@vue-interface/select-field 2.0.0 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +22 -0
- package/README.md +34 -0
- package/dist/index.d.ts +2 -0
- package/dist/select-field.js +141 -0
- package/dist/select-field.js.map +1 -0
- package/dist/select-field.umd.cjs +2 -0
- package/dist/select-field.umd.cjs.map +1 -0
- package/dist/src/SelectField.vue.d.ts +81 -0
- package/package.json +14 -7
- package/CHANGELOG.md +0 -12
- package/demo.css +0 -12
- package/docs/select-field.md +0 -532
- package/index.html +0 -470
- package/index.ts +0 -5
- package/src/SelectField.vue +0 -160
- package/tsconfig.json +0 -27
- package/vite.config.js +0 -47
package/docs/select-field.md
DELETED
|
@@ -1,532 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Select Field
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
<script setup>
|
|
6
|
-
import '../demo.css'
|
|
7
|
-
import { ref, onMounted } from 'vue'
|
|
8
|
-
import SelectField from '../src/SelectField.vue';
|
|
9
|
-
import { Dots, Spinner, Pulse } from '@vue-interface/activity-indicator'
|
|
10
|
-
|
|
11
|
-
const value = ref()
|
|
12
|
-
const showActivity = ref(false)
|
|
13
|
-
|
|
14
|
-
onMounted(() => {
|
|
15
|
-
setTimeout(() => {
|
|
16
|
-
value.value = '1';
|
|
17
|
-
}, 1000)
|
|
18
|
-
})
|
|
19
|
-
</script>
|
|
20
|
-
|
|
21
|
-
# Select Field
|
|
22
|
-
|
|
23
|
-
The `select-field` component provides flexible and customizable select dropdown fields with customizable sizes and states.
|
|
24
|
-
|
|
25
|
-
## Variations and States
|
|
26
|
-
|
|
27
|
-
<!-- #region variations -->
|
|
28
|
-
<select-field v-model="value" label="Regular Field" class="mb-3" tabindex="1">
|
|
29
|
-
<option value="1">Option 1</option>
|
|
30
|
-
<option value="2">Option 2</option>
|
|
31
|
-
<option value="3">Option 3</option>
|
|
32
|
-
</select-field>
|
|
33
|
-
|
|
34
|
-
<select-field label="Some Label Here" help-text="This field uses an empty option for a label..." class="mb-3">
|
|
35
|
-
<option value="">This field shows the empty option by default.</option>
|
|
36
|
-
<option value="1">Option 1</option>
|
|
37
|
-
<option value="2" selected>Option 2</option>
|
|
38
|
-
<option value="3">Option 3</option>
|
|
39
|
-
</select-field>
|
|
40
|
-
|
|
41
|
-
<select-field label="Some Label Here" help-text="Some helpful text goes here." class="mb-3">
|
|
42
|
-
<option value="1">Option 1</option>
|
|
43
|
-
<option value="2" selected>Option 2</option>
|
|
44
|
-
<option value="3">Option 3</option>
|
|
45
|
-
</select-field>
|
|
46
|
-
|
|
47
|
-
<select-field label="Readonly Field" value="1" class="mb-3" readonly>
|
|
48
|
-
<option value="1">Option 1</option>
|
|
49
|
-
<option value="2" selected>Option 2</option>
|
|
50
|
-
<option value="3">Option 3</option>
|
|
51
|
-
</select-field>
|
|
52
|
-
|
|
53
|
-
<select-field label="Disabled Field" class="mb-3" value="2" disabled>
|
|
54
|
-
<option value="1">Option 1</option>
|
|
55
|
-
<option value="2" selected>Option 2</option>
|
|
56
|
-
<option value="3">Option 3</option>
|
|
57
|
-
</select-field>
|
|
58
|
-
|
|
59
|
-
<select-field label="Readonly & Disabled Field" class="mb-3" value="2" readonly disabled>
|
|
60
|
-
<option value="1">Option 1</option>
|
|
61
|
-
<option value="2" selected>Option 2</option>
|
|
62
|
-
<option value="3">Option 3</option>
|
|
63
|
-
</select-field>
|
|
64
|
-
<!-- #endregion variations -->
|
|
65
|
-
|
|
66
|
-
::: details Show Code
|
|
67
|
-
<<< @/packages/select-field/docs/select-field.md#variations{html}
|
|
68
|
-
:::
|
|
69
|
-
|
|
70
|
-
## Sizes
|
|
71
|
-
|
|
72
|
-
Customize the `select-field` size using a [predetermined size](#predetermined-sizes), [tailwind's numeric sizing classes](#tailwind-sizes), or an [arbitrary](#arbitrary-sizes) CSS length unit.
|
|
73
|
-
|
|
74
|
-
### Predetermined Sizes
|
|
75
|
-
|
|
76
|
-
The size can be customized using predetermined `size prop` values: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`. Use the syntax: `form-select-[size]`.
|
|
77
|
-
|
|
78
|
-
<!-- #region predeterminedSizes -->
|
|
79
|
-
<select-field label="form-select-xs" size="form-select-xs" class="mb-3">
|
|
80
|
-
<option value="1">Option 1</option>
|
|
81
|
-
<option value="2" selected>Option 2</option>
|
|
82
|
-
<option value="3">Option 3</option>
|
|
83
|
-
</select-field>
|
|
84
|
-
|
|
85
|
-
<select-field label="form-select-sm" size="form-select-sm" class="mb-3">
|
|
86
|
-
<option value="1">Option 1</option>
|
|
87
|
-
<option value="2" selected>Option 2</option>
|
|
88
|
-
<option value="3">Option 3</option>
|
|
89
|
-
</select-field>
|
|
90
|
-
|
|
91
|
-
<select-field label="form-select-md" size="form-select-md" class="mb-3">
|
|
92
|
-
<option value="1">Option 1</option>
|
|
93
|
-
<option value="2" selected>Option 2</option>
|
|
94
|
-
<option value="3">Option 3</option>
|
|
95
|
-
</select-field>
|
|
96
|
-
|
|
97
|
-
<select-field label="form-select-lg" size="form-select-lg" class="mb-3">
|
|
98
|
-
<option value="1">Option 1</option>
|
|
99
|
-
<option value="2" selected>Option 2</option>
|
|
100
|
-
<option value="3">Option 3</option>
|
|
101
|
-
</select-field>
|
|
102
|
-
|
|
103
|
-
<select-field label="form-select-xl" size="form-select-xl" class="mb-3">
|
|
104
|
-
<option value="1">Option 1</option>
|
|
105
|
-
<option value="2" selected>Option 2</option>
|
|
106
|
-
<option value="3">Option 3</option>
|
|
107
|
-
</select-field>
|
|
108
|
-
|
|
109
|
-
<select-field label="form-select-2xl" size="form-select-2xl" class="mb-3">
|
|
110
|
-
<option value="1">Option 1</option>
|
|
111
|
-
<option value="2" selected>Option 2</option>
|
|
112
|
-
<option value="3">Option 3</option>
|
|
113
|
-
</select-field>
|
|
114
|
-
|
|
115
|
-
<select-field label="form-select-3xl" size="form-select-3xl" class="mb-3">
|
|
116
|
-
<option value="1">Option 1</option>
|
|
117
|
-
<option value="2" selected>Option 2</option>
|
|
118
|
-
<option value="3">Option 3</option>
|
|
119
|
-
</select-field>
|
|
120
|
-
|
|
121
|
-
<select-field label="form-select-4xl" size="form-select-4xl" class="mb-3">
|
|
122
|
-
<option value="1">Option 1</option>
|
|
123
|
-
<option value="2" selected>Option 2</option>
|
|
124
|
-
<option value="3">Option 3</option>
|
|
125
|
-
</select-field>
|
|
126
|
-
|
|
127
|
-
<select-field label="form-select-5xl" size="form-select-5xl" class="mb-3">
|
|
128
|
-
<option value="1">Option 1</option>
|
|
129
|
-
<option value="2" selected>Option 2</option>
|
|
130
|
-
<option value="3">Option 3</option>
|
|
131
|
-
</select-field>
|
|
132
|
-
<!-- #endregion predeterminedSizes -->
|
|
133
|
-
|
|
134
|
-
::: details Show Code
|
|
135
|
-
<<< @/packages/select-field/docs/select-field.md#predeterminedSizes{html}
|
|
136
|
-
:::
|
|
137
|
-
|
|
138
|
-
### Tailwind Sizes
|
|
139
|
-
|
|
140
|
-
For more granular control over sizes, use Tailwind's numeric sizing scale classes: `form-select-1` - `form-select-96`.
|
|
141
|
-
|
|
142
|
-
<!-- #region tailwindSizes -->
|
|
143
|
-
<select-field label="form-select-3" size="form-select-3" class="mb-3">
|
|
144
|
-
<option value="1">Option 1</option>
|
|
145
|
-
<option value="2" selected>Option 2</option>
|
|
146
|
-
<option value="3">Option 3</option>
|
|
147
|
-
</select-field>
|
|
148
|
-
|
|
149
|
-
<select-field label="form-select-4" size="form-select-4" class="mb-3">
|
|
150
|
-
<option value="1">Option 1</option>
|
|
151
|
-
<option value="2" selected>Option 2</option>
|
|
152
|
-
<option value="3">Option 3</option>
|
|
153
|
-
</select-field>
|
|
154
|
-
|
|
155
|
-
<select-field label="form-select-5" size="form-select-5" class="mb-3">
|
|
156
|
-
<option value="1">Option 1</option>
|
|
157
|
-
<option value="2" selected>Option 2</option>
|
|
158
|
-
<option value="3">Option 3</option>
|
|
159
|
-
</select-field>
|
|
160
|
-
<!-- #endregion tailwindSizes -->
|
|
161
|
-
|
|
162
|
-
::: details Show Code
|
|
163
|
-
<<< @/packages/select-field/docs/select-field.md#tailwindSizes{html}
|
|
164
|
-
:::
|
|
165
|
-
|
|
166
|
-
### Arbitrary Sizes
|
|
167
|
-
|
|
168
|
-
For precise sizing, specify exact pixel values using the syntax `form-select-[Npx]` or any other CSS length units (`rem`, `em`, `mm`, etc.).
|
|
169
|
-
|
|
170
|
-
<!-- #region arbitrarySizes -->
|
|
171
|
-
<select-field label="form-select-[16px]" size="form-select-[16px]" class="mb-3">
|
|
172
|
-
<option value="1">Option 1</option>
|
|
173
|
-
<option value="2" selected>Option 2</option>
|
|
174
|
-
<option value="3">Option 3</option>
|
|
175
|
-
</select-field>
|
|
176
|
-
|
|
177
|
-
<select-field label="form-select-[1.5rem]" size="form-select-[1.5rem]" class="mb-3">
|
|
178
|
-
<option value="1">Option 1</option>
|
|
179
|
-
<option value="2" selected>Option 2</option>
|
|
180
|
-
<option value="3">Option 3</option>
|
|
181
|
-
</select-field>
|
|
182
|
-
<!-- #endregion arbitrarySizes -->
|
|
183
|
-
|
|
184
|
-
::: details Show Code
|
|
185
|
-
<<< @/packages/select-field/docs/select-field.md#arbitrarySizes{html}
|
|
186
|
-
:::
|
|
187
|
-
|
|
188
|
-
## Icons
|
|
189
|
-
|
|
190
|
-
The following `select-field` components combine a select field with a [heroicon](https://heroicons.com/). Customize the size of select-field/icon combinations using the same [sizing prop values](#sizes) described above.
|
|
191
|
-
|
|
192
|
-
::: warning Add an Icon
|
|
193
|
-
1. Add the `<template #icon>` header
|
|
194
|
-
2. Select `Copy SVG` from the heroicon website
|
|
195
|
-
3. Paste the SVG inside the `template` header.
|
|
196
|
-
:::
|
|
197
|
-
|
|
198
|
-
<!-- #region icons -->
|
|
199
|
-
<select-field label="Small Icon" size="form-select-sm" class="form-select-sm mb-3">
|
|
200
|
-
<option value="1">Option 1</option>
|
|
201
|
-
<option value="2">Option 2</option>
|
|
202
|
-
<option value="3">Option 3</option>
|
|
203
|
-
<template #icon>
|
|
204
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
205
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
206
|
-
</svg>
|
|
207
|
-
</template>
|
|
208
|
-
</select-field>
|
|
209
|
-
|
|
210
|
-
<select-field label="Medium Icon" size="form-select-md" class="form-select-md mb-3">
|
|
211
|
-
<option value="1">Option 1</option>
|
|
212
|
-
<option value="2">Option 2</option>
|
|
213
|
-
<option value="3">Option 3</option>
|
|
214
|
-
<template #icon>
|
|
215
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
216
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
217
|
-
</svg>
|
|
218
|
-
</template>
|
|
219
|
-
</select-field>
|
|
220
|
-
|
|
221
|
-
<select-field label="Large Icon" size="form-select-lg" class="form-select-lg mb-3">
|
|
222
|
-
<option value="1">Option 1</option>
|
|
223
|
-
<option value="2">Option 2</option>
|
|
224
|
-
<option value="3">Option 3</option>
|
|
225
|
-
<template #icon>
|
|
226
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
227
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
228
|
-
</svg>
|
|
229
|
-
</template>
|
|
230
|
-
</select-field>
|
|
231
|
-
|
|
232
|
-
<select-field label="XL Icon" size="form-select-xl" class="form-select-xl mb-3">
|
|
233
|
-
<option value="1">Option 1</option>
|
|
234
|
-
<option value="2">Option 2</option>
|
|
235
|
-
<option value="3">Option 3</option>
|
|
236
|
-
<template #icon>
|
|
237
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
238
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
239
|
-
</svg>
|
|
240
|
-
</template>
|
|
241
|
-
</select-field>
|
|
242
|
-
|
|
243
|
-
<select-field label="Icon-7" size="form-select-7" class="form-select-7 mb-3">
|
|
244
|
-
<option value="1">Option 1</option>
|
|
245
|
-
<option value="2">Option 2</option>
|
|
246
|
-
<option value="3">Option 3</option>
|
|
247
|
-
<template #icon>
|
|
248
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
249
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
250
|
-
</svg>
|
|
251
|
-
</template>
|
|
252
|
-
</select-field>
|
|
253
|
-
|
|
254
|
-
<select-field label="Icon-[16px]" size="form-select-[16px]" class="form-select-[16px] mb-3">
|
|
255
|
-
<option value="1">Option 1</option>
|
|
256
|
-
<option value="2">Option 2</option>
|
|
257
|
-
<option value="3">Option 3</option>
|
|
258
|
-
<template #icon>
|
|
259
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
260
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
261
|
-
</svg>
|
|
262
|
-
</template>
|
|
263
|
-
</select-field>
|
|
264
|
-
|
|
265
|
-
<!-- #endregion icons -->
|
|
266
|
-
|
|
267
|
-
::: details Show Code
|
|
268
|
-
<<< @/packages/select-field/docs/select-field.md#icons{html}
|
|
269
|
-
:::
|
|
270
|
-
|
|
271
|
-
## With Activity
|
|
272
|
-
|
|
273
|
-
Combine [activity indicators](/packages/activity-indicator/docs/activity-indicator) with `select-field` to show a loading icon.
|
|
274
|
-
|
|
275
|
-
<!-- #region withActivity -->
|
|
276
|
-
<select-field label="Small" size="form-select-sm" :indicator="Dots" indicator-size="xs" :activity="showActivity" class="mb-3">
|
|
277
|
-
<option value="1">Option 1</option>
|
|
278
|
-
<option value="2">Option 2</option>
|
|
279
|
-
<option value="3">Option 3</option>
|
|
280
|
-
</select-field>
|
|
281
|
-
|
|
282
|
-
<select-field label="Medium" size="form-select-md" :indicator="Pulse" indicator-size="md" :activity="showActivity" class="mb-3">
|
|
283
|
-
<option value="1">Option 1</option>
|
|
284
|
-
<option value="2">Option 2</option>
|
|
285
|
-
<option value="3">Option 3</option>
|
|
286
|
-
</select-field>
|
|
287
|
-
|
|
288
|
-
<select-field label="Large" size="form-select-lg" :indicator="Spinner" indicator-size="md" :activity="showActivity" class="mb-3">
|
|
289
|
-
<option value="1">Option 1</option>
|
|
290
|
-
<option value="2">Option 2</option>
|
|
291
|
-
<option value="3">Option 3</option>
|
|
292
|
-
</select-field>
|
|
293
|
-
|
|
294
|
-
<button type="button" class="underline text-blue-600" @click="showActivity = !showActivity">
|
|
295
|
-
<span v-if="!showActivity">Show</span><span v-else>Hide</span> Activity
|
|
296
|
-
</button>
|
|
297
|
-
<!-- #endregion withActivity -->
|
|
298
|
-
|
|
299
|
-
::: details Show Code
|
|
300
|
-
<<< @/packages/select-field/docs/select-field.md#withActivity{html}
|
|
301
|
-
:::
|
|
302
|
-
|
|
303
|
-
## Validation
|
|
304
|
-
|
|
305
|
-
Validation classes provides error-checking styling for the select-field component. The `invalid-feedback` and `valid-feedback` classes provide the styling for invalid and valid elements, respectively.
|
|
306
|
-
|
|
307
|
-
<!-- #region validation -->
|
|
308
|
-
<select-field label="Empty Array of Errors" :errors="[]" class="mb-3">
|
|
309
|
-
<option value=""></option>
|
|
310
|
-
<option value="1">Option 1</option>
|
|
311
|
-
<option value="2">Option 2</option>
|
|
312
|
-
<option value="3">Option 3</option>
|
|
313
|
-
</select-field>
|
|
314
|
-
|
|
315
|
-
<select-field label="Single Inline Error" error="This is an inline error." class="mb-3 invalid-feedback">
|
|
316
|
-
<option value=""></option>
|
|
317
|
-
<option value="1">Option 1</option>
|
|
318
|
-
<option value="2">Option 2</option>
|
|
319
|
-
<option value="3">Option 3</option>
|
|
320
|
-
</select-field>
|
|
321
|
-
|
|
322
|
-
<select-field label="Array of Errors" :errors="['First Error', 'Second Error']" class="mb-3 invalid-feedback">
|
|
323
|
-
<option value=""></option>
|
|
324
|
-
<option value="1">Option 1</option>
|
|
325
|
-
<option value="2">Option 2</option>
|
|
326
|
-
<option value="3">Option 3</option>
|
|
327
|
-
</select-field>
|
|
328
|
-
|
|
329
|
-
<select-field name="test" label="Multiple Errors From Object" :errors="{'test': ['This is an inline error #1.', 'This is an inline error #2.']}" class="mb-3 invalid-feedback">
|
|
330
|
-
<option value=""></option>
|
|
331
|
-
<option value="1">Option 1</option>
|
|
332
|
-
<option value="2">Option 2</option>
|
|
333
|
-
<option value="3">Option 3</option>
|
|
334
|
-
</select-field>
|
|
335
|
-
|
|
336
|
-
<select-field label="Valid Field" valid class="mb-3 valid-feedback">
|
|
337
|
-
<option value=""></option>
|
|
338
|
-
<option value="1">Option 1</option>
|
|
339
|
-
<option value="2">Option 2</option>
|
|
340
|
-
<option value="3">Option 3</option>
|
|
341
|
-
</select-field>
|
|
342
|
-
|
|
343
|
-
<select-field label="Valid Field with Feedback" valid feedback="This is some success message." class="mb-3 valid-feedback">
|
|
344
|
-
<option value=""></option>
|
|
345
|
-
<option value="1">Option 1</option>
|
|
346
|
-
<option value="2">Option 2</option>
|
|
347
|
-
<option value="3">Option 3</option>
|
|
348
|
-
</select-field>
|
|
349
|
-
|
|
350
|
-
<select-field label="Valid Field with Array of Feedback" valid :feedback="['This is some success message.', 'This is some success message.']" class="mb-3 valid-feedback">
|
|
351
|
-
<option value=""></option>
|
|
352
|
-
<option value="1">Option 1</option>
|
|
353
|
-
<option value="2">Option 2</option>
|
|
354
|
-
<option value="3">Option 3</option>
|
|
355
|
-
</select-field>
|
|
356
|
-
<!-- #endregion validation -->
|
|
357
|
-
|
|
358
|
-
::: details Show Code
|
|
359
|
-
<<< @/packages/select-field/docs/select-field.md#validation{html}
|
|
360
|
-
:::
|
|
361
|
-
|
|
362
|
-
## Custom Colors
|
|
363
|
-
|
|
364
|
-
Customize the color of a select-field component with the [Tailwind color palette](https://tailwindcss.com/docs/colors) by using the `color` prop: `form-select-[color]`.
|
|
365
|
-
|
|
366
|
-
<!-- #region customColors -->
|
|
367
|
-
<select-field label="red-500" value="2" color="form-select-red-500">
|
|
368
|
-
<option value="1">Option 1</option>
|
|
369
|
-
<option value="2" selected>Option 2</option>
|
|
370
|
-
<option value="3">Option 3</option>
|
|
371
|
-
</select-field>
|
|
372
|
-
|
|
373
|
-
<select-field label="blue-500" value="2" color="form-select-blue-500">
|
|
374
|
-
<option value="1">Option 1</option>
|
|
375
|
-
<option value="2" selected>Option 2</option>
|
|
376
|
-
<option value="3">Option 3</option>
|
|
377
|
-
</select-field>
|
|
378
|
-
|
|
379
|
-
<select-field label="green-500" value="2" color="form-select-green-500">
|
|
380
|
-
<option value="1">Option 1</option>
|
|
381
|
-
<option value="2" selected>Option 2</option>
|
|
382
|
-
<option value="3">Option 3</option>
|
|
383
|
-
</select-field>
|
|
384
|
-
|
|
385
|
-
<select-field label="amber-500" value="2" color="form-select-amber-500">
|
|
386
|
-
<option value="1">Option 1</option>
|
|
387
|
-
<option value="2" selected>Option 2</option>
|
|
388
|
-
<option value="3">Option 3</option>
|
|
389
|
-
</select-field>
|
|
390
|
-
<!-- #endregion customColors -->
|
|
391
|
-
|
|
392
|
-
::: details Show Code
|
|
393
|
-
<<< @/packages/select-field/docs/select-field.md#customColors{html}
|
|
394
|
-
:::
|
|
395
|
-
|
|
396
|
-
## Animated
|
|
397
|
-
|
|
398
|
-
The `select-field` animated component combines the tailwind `form-control-animated` classes to provide a custom animated component. Customize the size of animated select-field combinations using the same [sizing prop values](#sizes) described above.
|
|
399
|
-
|
|
400
|
-
<!-- #region animated -->
|
|
401
|
-
<select-field v-model="value" label="form-select-md" size="form-select-md" class="mb-3 form-control-animated-md">
|
|
402
|
-
<option value=""></option>
|
|
403
|
-
<option value="1">Option 1</option>
|
|
404
|
-
<option value="2">Option 2</option>
|
|
405
|
-
<option value="3">Option 3</option>
|
|
406
|
-
</select-field>
|
|
407
|
-
|
|
408
|
-
<select-field label="form-select-lg" size="form-select-lg" class="mb-3 form-control-animated-lg">
|
|
409
|
-
<option value=""></option>
|
|
410
|
-
<option value="1">Option 1</option>
|
|
411
|
-
<option value="2">Option 2</option>
|
|
412
|
-
<option value="3">Option 3</option>
|
|
413
|
-
</select-field>
|
|
414
|
-
|
|
415
|
-
<select-field label="form-select-xl" size="form-select-xl" class="mb-3 form-control-animated-xl">
|
|
416
|
-
<option value=""></option>
|
|
417
|
-
<option value="1">Option 1</option>
|
|
418
|
-
<option value="2">Option 2</option>
|
|
419
|
-
<option value="3">Option 3</option>
|
|
420
|
-
</select-field>
|
|
421
|
-
<!-- #endregion animated -->
|
|
422
|
-
|
|
423
|
-
::: details Show Code
|
|
424
|
-
<<< @/packages/select-field/docs/select-field.md#animated{html}
|
|
425
|
-
:::
|
|
426
|
-
|
|
427
|
-
### With Icons
|
|
428
|
-
|
|
429
|
-
Add an [icon](#icons) to the animated select-fields using the steps described above.
|
|
430
|
-
|
|
431
|
-
<!-- #region animatedIcons -->
|
|
432
|
-
<select-field label="Small Icon" size="form-select-sm" class="mb-3 form-control-animated-sm">
|
|
433
|
-
<option value=""></option>
|
|
434
|
-
<option value="1">Option 1</option>
|
|
435
|
-
<option value="2">Option 2</option>
|
|
436
|
-
<option value="3">Option 3</option>
|
|
437
|
-
<template #icon>
|
|
438
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
439
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
440
|
-
</svg>
|
|
441
|
-
</template>
|
|
442
|
-
</select-field>
|
|
443
|
-
|
|
444
|
-
<select-field label="Medium Icon" size="form-select-md" class="mb-3 form-control-animated-md">
|
|
445
|
-
<option value=""></option>
|
|
446
|
-
<option value="1">Option 1</option>
|
|
447
|
-
<option value="2">Option 2</option>
|
|
448
|
-
<option value="3">Option 3</option>
|
|
449
|
-
<template #icon>
|
|
450
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
451
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
452
|
-
</svg>
|
|
453
|
-
</template>
|
|
454
|
-
</select-field>
|
|
455
|
-
|
|
456
|
-
<select-field label="Large Icon" size="form-select-lg" class="mb-3 form-control-animated-lg">
|
|
457
|
-
<option value=""></option>
|
|
458
|
-
<option value="1">Option 1</option>
|
|
459
|
-
<option value="2">Option 2</option>
|
|
460
|
-
<option value="3">Option 3</option>
|
|
461
|
-
<template #icon>
|
|
462
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
463
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
464
|
-
</svg>
|
|
465
|
-
</template>
|
|
466
|
-
</select-field>
|
|
467
|
-
|
|
468
|
-
<select-field label="Icon-xl" size="form-select-xl" class="mb-3 form-control-animated-xl">
|
|
469
|
-
<option value=""></option>
|
|
470
|
-
<option value="1">Option 1</option>
|
|
471
|
-
<option value="2">Option 2</option>
|
|
472
|
-
<option value="3">Option 3</option>
|
|
473
|
-
<template #icon>
|
|
474
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
475
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
476
|
-
</svg>
|
|
477
|
-
</template>
|
|
478
|
-
</select-field>
|
|
479
|
-
|
|
480
|
-
<select-field label="Icon-5" size="form-select-5" class="mb-3 form-control-animated-5">
|
|
481
|
-
<option value=""></option>
|
|
482
|
-
<option value="1">Option 1</option>
|
|
483
|
-
<option value="2">Option 2</option>
|
|
484
|
-
<option value="3">Option 3</option>
|
|
485
|
-
<template #icon>
|
|
486
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
487
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
488
|
-
</svg>
|
|
489
|
-
</template>
|
|
490
|
-
</select-field>
|
|
491
|
-
|
|
492
|
-
<select-field label="Icon-6" size="form-select-6" class="mb-3 form-control-animated-6">
|
|
493
|
-
<option value=""></option>
|
|
494
|
-
<option value="1">Option 1</option>
|
|
495
|
-
<option value="2">Option 2</option>
|
|
496
|
-
<option value="3">Option 3</option>
|
|
497
|
-
<template #icon>
|
|
498
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
499
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
500
|
-
</svg>
|
|
501
|
-
</template>
|
|
502
|
-
</select-field>
|
|
503
|
-
|
|
504
|
-
<select-field label="Icon-[16px]" size="form-select-[16px]" class="mb-3 form-control-animated-[16px]">
|
|
505
|
-
<option value=""></option>
|
|
506
|
-
<option value="1">Option 1</option>
|
|
507
|
-
<option value="2">Option 2</option>
|
|
508
|
-
<option value="3">Option 3</option>
|
|
509
|
-
<template #icon>
|
|
510
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
511
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
512
|
-
</svg>
|
|
513
|
-
</template>
|
|
514
|
-
</select-field>
|
|
515
|
-
|
|
516
|
-
<select-field label="Icon-[21px]" size="form-select-[21px]" class="mb-3 form-control-animated-[21px]">
|
|
517
|
-
<option value=""></option>
|
|
518
|
-
<option value="1">Option 1</option>
|
|
519
|
-
<option value="2">Option 2</option>
|
|
520
|
-
<option value="3">Option 3</option>
|
|
521
|
-
<template #icon>
|
|
522
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
523
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
524
|
-
</svg>
|
|
525
|
-
</template>
|
|
526
|
-
</select-field>
|
|
527
|
-
<!-- #endregion animatedIcons -->
|
|
528
|
-
|
|
529
|
-
::: details Show Code
|
|
530
|
-
<<< @/packages/select-field/docs/select-field.md#animatedIcons{html}
|
|
531
|
-
:::
|
|
532
|
-
|