79bdea0441
* Migrate DropArea to composition * remove hardcoded button styling * let markdown editor call for image upload * allow for local testing in the docs * validate url on set * add chips to modal with correct defaults * update docs to show example url doesn't load * Bump version 0.6.4
102 lines
1.8 KiB
Markdown
102 lines
1.8 KiB
Markdown
# Text Inputs
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
const inputText = ref(null)
|
|
</script>
|
|
|
|
<DemoContainer>
|
|
<input
|
|
type="text"
|
|
placeholder="Text input"
|
|
/>
|
|
</DemoContainer>
|
|
|
|
```vue
|
|
<input
|
|
type="text"
|
|
placeholder="Text input"
|
|
/>
|
|
```
|
|
|
|
<DemoContainer>
|
|
<div class="iconified-input">
|
|
<SearchIcon/>
|
|
<input
|
|
v-model="inputText"
|
|
type="text"
|
|
placeholder="Text input"
|
|
/>
|
|
<Button class="r-btn" @click="() => inputText = ''">
|
|
<XIcon/>
|
|
</Button>
|
|
</div>
|
|
</DemoContainer>
|
|
|
|
```vue
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
const inputText = ref(null)
|
|
</script>
|
|
|
|
<div class="iconified-input">
|
|
<SearchIcon/>
|
|
<input
|
|
v-model="inputText"
|
|
type="text"
|
|
placeholder="Text input"
|
|
/>
|
|
<Button @click="() => inputText = ''">
|
|
<XIcon/>
|
|
</Button>
|
|
</div>
|
|
```
|
|
|
|
<DemoContainer>
|
|
<div class="dropdown-input">
|
|
<DropdownSelect
|
|
v-model="value"
|
|
:options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
|
|
placeholder="Choose Frequency"
|
|
/>
|
|
<div class="iconified-input">
|
|
<SearchIcon/>
|
|
<input
|
|
v-model="inputText"
|
|
type="text"
|
|
placeholder="Text input"
|
|
/>
|
|
<Button class="r-btn" @click="() => inputText = ''">
|
|
<XIcon/>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DemoContainer>
|
|
|
|
```vue
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
const inputText = ref(null)
|
|
const value = ref(null)
|
|
</script>
|
|
|
|
<div class="dropdown-input">
|
|
<DropdownSelect
|
|
v-model="value"
|
|
:options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
|
|
placeholder="Choose Frequency"
|
|
/>
|
|
<div class="iconified-input">
|
|
<SearchIcon/>
|
|
<input
|
|
v-model="inputText"
|
|
type="text"
|
|
placeholder="Text input"
|
|
/>
|
|
<Button class="r-btn" @click="() => inputText = ''">
|
|
<XIcon/>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
```
|
|
|