@vue-interface/select-field 1.0.0-beta.8 → 2.0.0
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/CHANGELOG.md +12 -0
- package/demo.css +12 -0
- package/docs/select-field.md +532 -0
- package/index.css +3 -0
- package/index.html +470 -0
- package/{dist/index.d.ts → index.ts} +4 -1
- package/package.json +16 -35
- package/src/SelectField.vue +160 -0
- package/tsconfig.json +27 -0
- package/vite.config.js +47 -0
- package/dist/select-field.js +0 -125
- package/dist/select-field.js.map +0 -1
- package/dist/select-field.umd.cjs +0 -2
- package/dist/select-field.umd.cjs.map +0 -1
- package/dist/src/SelectField.vue.d.ts +0 -589
- package/dist/style.css +0 -1
package/index.html
ADDED
|
@@ -0,0 +1,470 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
6
|
+
<title>SelectField</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body class="dark:bg-neutral-900 dark:text-white">
|
|
9
|
+
<div id="app" class="container mx-auto mb-6">
|
|
10
|
+
<h1 class="text-4xl mb-5">select-field</h1>
|
|
11
|
+
|
|
12
|
+
<div class="bg-neutral-100 dark:bg-neutral-800 p-3 mb-3">
|
|
13
|
+
Value: {{ value }}
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<select-field v-model="value" label="Regular Field" class="mb-3" tabindex="1">
|
|
17
|
+
<option value="1">Option 1</option>
|
|
18
|
+
<option value="2">Option 2</option>
|
|
19
|
+
<option value="3">Option 3</option>
|
|
20
|
+
</select-field>
|
|
21
|
+
|
|
22
|
+
<select-field label="Some Label Here" help-text="This field uses an empty option for a label..." class="mb-3">
|
|
23
|
+
<option value="">This field shows the empty option by default.</option>
|
|
24
|
+
<option value="1">Option 1</option>
|
|
25
|
+
<option value="2" selected>Option 2</option>
|
|
26
|
+
<option value="3">Option 3</option>
|
|
27
|
+
</select-field>
|
|
28
|
+
|
|
29
|
+
<select-field label="Some Label Here" help-text="Some helpful text goes here." class="mb-3">
|
|
30
|
+
<option value="1">Option 1</option>
|
|
31
|
+
<option value="2" selected>Option 2</option>
|
|
32
|
+
<option value="3">Option 3</option>
|
|
33
|
+
</select-field>
|
|
34
|
+
|
|
35
|
+
<select-field label="Readonly Field" value="1" class="mb-3" readonly>
|
|
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="Disabled Field" class="mb-3" value="2" disabled>
|
|
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 & Disabled Field" class="mb-3" value="2" readonly disabled>
|
|
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
|
+
<h2 class="text-2xl mt-6 mb-3">Custom Colors</h2>
|
|
54
|
+
|
|
55
|
+
<select-field label="red-500" value="2" color="form-select-red-500">
|
|
56
|
+
<option value="1">Option 1</option>
|
|
57
|
+
<option value="2" selected>Option 2</option>
|
|
58
|
+
<option value="3">Option 3</option>
|
|
59
|
+
</select-field>
|
|
60
|
+
|
|
61
|
+
<select-field label="blue-500" value="2" color="form-select-blue-500">
|
|
62
|
+
<option value="1">Option 1</option>
|
|
63
|
+
<option value="2" selected>Option 2</option>
|
|
64
|
+
<option value="3">Option 3</option>
|
|
65
|
+
</select-field>
|
|
66
|
+
|
|
67
|
+
<select-field label="green-500" value="2" color="form-select-green-500">
|
|
68
|
+
<option value="1">Option 1</option>
|
|
69
|
+
<option value="2" selected>Option 2</option>
|
|
70
|
+
<option value="3">Option 3</option>
|
|
71
|
+
</select-field>
|
|
72
|
+
|
|
73
|
+
<select-field label="amber-500" value="2" color="form-select-amber-500">
|
|
74
|
+
<option value="1">Option 1</option>
|
|
75
|
+
<option value="2" selected>Option 2</option>
|
|
76
|
+
<option value="3">Option 3</option>
|
|
77
|
+
</select-field>
|
|
78
|
+
|
|
79
|
+
<h2 class="text-2xl mt-6 mb-3">Sizes</h2>
|
|
80
|
+
|
|
81
|
+
<select-field label="form-select-xs" size="form-select-xs" class="mb-3">
|
|
82
|
+
<option value="1">Option 1</option>
|
|
83
|
+
<option value="2" selected>Option 2</option>
|
|
84
|
+
<option value="3">Option 3</option>
|
|
85
|
+
</select-field>
|
|
86
|
+
|
|
87
|
+
<select-field label="form-select-sm" size="form-select-sm" class="mb-3">
|
|
88
|
+
<option value="1">Option 1</option>
|
|
89
|
+
<option value="2" selected>Option 2</option>
|
|
90
|
+
<option value="3">Option 3</option>
|
|
91
|
+
</select-field>
|
|
92
|
+
|
|
93
|
+
<select-field label="form-select-md" size="form-select-md" class="mb-3">
|
|
94
|
+
<option value="1">Option 1</option>
|
|
95
|
+
<option value="2" selected>Option 2</option>
|
|
96
|
+
<option value="3">Option 3</option>
|
|
97
|
+
</select-field>
|
|
98
|
+
|
|
99
|
+
<select-field label="form-select-lg" size="form-select-lg" class="mb-3">
|
|
100
|
+
<option value="1">Option 1</option>
|
|
101
|
+
<option value="2" selected>Option 2</option>
|
|
102
|
+
<option value="3">Option 3</option>
|
|
103
|
+
</select-field>
|
|
104
|
+
|
|
105
|
+
<select-field label="form-select-xl" size="form-select-xl" class="mb-3">
|
|
106
|
+
<option value="1">Option 1</option>
|
|
107
|
+
<option value="2" selected>Option 2</option>
|
|
108
|
+
<option value="3">Option 3</option>
|
|
109
|
+
</select-field>
|
|
110
|
+
|
|
111
|
+
<select-field label="form-select-2xl" size="form-select-2xl" class="mb-3">
|
|
112
|
+
<option value="1">Option 1</option>
|
|
113
|
+
<option value="2" selected>Option 2</option>
|
|
114
|
+
<option value="3">Option 3</option>
|
|
115
|
+
</select-field>
|
|
116
|
+
|
|
117
|
+
<select-field label="form-select-3xl" size="form-select-3xl" class="mb-3">
|
|
118
|
+
<option value="1">Option 1</option>
|
|
119
|
+
<option value="2" selected>Option 2</option>
|
|
120
|
+
<option value="3">Option 3</option>
|
|
121
|
+
</select-field>
|
|
122
|
+
|
|
123
|
+
<select-field label="form-select-4xl" size="form-select-4xl" class="mb-3">
|
|
124
|
+
<option value="1">Option 1</option>
|
|
125
|
+
<option value="2" selected>Option 2</option>
|
|
126
|
+
<option value="3">Option 3</option>
|
|
127
|
+
</select-field>
|
|
128
|
+
|
|
129
|
+
<select-field label="form-select-4" size="form-select-4" class="mb-3">
|
|
130
|
+
<option value="1">Option 1</option>
|
|
131
|
+
<option value="2" selected>Option 2</option>
|
|
132
|
+
<option value="3">Option 3</option>
|
|
133
|
+
</select-field>
|
|
134
|
+
|
|
135
|
+
<select-field label="form-select-5" size="form-select-5" class="mb-3">
|
|
136
|
+
<option value="1">Option 1</option>
|
|
137
|
+
<option value="2" selected>Option 2</option>
|
|
138
|
+
<option value="3">Option 3</option>
|
|
139
|
+
</select-field>
|
|
140
|
+
|
|
141
|
+
<select-field label="form-select-[16px]" size="form-select-[16px]" class="mb-3">
|
|
142
|
+
<option value="1">Option 1</option>
|
|
143
|
+
<option value="2" selected>Option 2</option>
|
|
144
|
+
<option value="3">Option 3</option>
|
|
145
|
+
</select-field>
|
|
146
|
+
|
|
147
|
+
<select-field label="form-select-[21px]" size="form-select-[21px]" class="mb-3">
|
|
148
|
+
<option value="1">Option 1</option>
|
|
149
|
+
<option value="2" selected>Option 2</option>
|
|
150
|
+
<option value="3">Option 3</option>
|
|
151
|
+
</select-field>
|
|
152
|
+
|
|
153
|
+
<h2 class="text-2xl mt-6 mb-3">Icons</h2>
|
|
154
|
+
|
|
155
|
+
<select-field label="Small Icon" size="form-select-sm" class="form-select-sm mb-3">
|
|
156
|
+
<option value="1">Option 1</option>
|
|
157
|
+
<option value="2">Option 2</option>
|
|
158
|
+
<option value="3">Option 3</option>
|
|
159
|
+
<template #icon>
|
|
160
|
+
<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">
|
|
161
|
+
<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" />
|
|
162
|
+
</svg>
|
|
163
|
+
</template>
|
|
164
|
+
</select-field>
|
|
165
|
+
|
|
166
|
+
<select-field label="Medium Icon" size="form-select-md" class="form-select-md mb-3">
|
|
167
|
+
<option value="1">Option 1</option>
|
|
168
|
+
<option value="2">Option 2</option>
|
|
169
|
+
<option value="3">Option 3</option>
|
|
170
|
+
<template #icon>
|
|
171
|
+
<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">
|
|
172
|
+
<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" />
|
|
173
|
+
</svg>
|
|
174
|
+
</template>
|
|
175
|
+
</select-field>
|
|
176
|
+
|
|
177
|
+
<select-field label="Large Icon" size="form-select-lg" class="form-select-lg mb-3">
|
|
178
|
+
<option value="1">Option 1</option>
|
|
179
|
+
<option value="2">Option 2</option>
|
|
180
|
+
<option value="3">Option 3</option>
|
|
181
|
+
<template #icon>
|
|
182
|
+
<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">
|
|
183
|
+
<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" />
|
|
184
|
+
</svg>
|
|
185
|
+
</template>
|
|
186
|
+
</select-field>
|
|
187
|
+
|
|
188
|
+
<select-field label="XL Icon" size="form-select-xl" class="form-select-xl mb-3">
|
|
189
|
+
<option value="1">Option 1</option>
|
|
190
|
+
<option value="2">Option 2</option>
|
|
191
|
+
<option value="3">Option 3</option>
|
|
192
|
+
<template #icon>
|
|
193
|
+
<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">
|
|
194
|
+
<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" />
|
|
195
|
+
</svg>
|
|
196
|
+
</template>
|
|
197
|
+
</select-field>
|
|
198
|
+
|
|
199
|
+
<select-field label="Icon-7" size="form-select-7" class="form-select-7 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="Icon-[16px]" size="form-select-[16px]" class="form-select-[16px] 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
|
+
<h2 class="text-2xl mt-6 mb-3">Activity Indicator</h2>
|
|
222
|
+
|
|
223
|
+
<select-field label="Small" size="form-select-sm" :indicator="Dots()" indicator-size="xs" :activity="showActivity" class="mb-3">
|
|
224
|
+
<option value="1">Option 1</option>
|
|
225
|
+
<option value="2">Option 2</option>
|
|
226
|
+
<option value="3">Option 3</option>
|
|
227
|
+
</select-field>
|
|
228
|
+
|
|
229
|
+
<select-field label="Medium" size="form-select-md" :indicator="Pulse()" indicator-size="md" :activity="showActivity" class="mb-3">
|
|
230
|
+
<option value="1">Option 1</option>
|
|
231
|
+
<option value="2">Option 2</option>
|
|
232
|
+
<option value="3">Option 3</option>
|
|
233
|
+
</select-field>
|
|
234
|
+
|
|
235
|
+
<select-field label="Large" size="form-select-lg" :indicator="Spinner()" indicator-size="md" :activity="showActivity" class="mb-3">
|
|
236
|
+
<option value="1">Option 1</option>
|
|
237
|
+
<option value="2">Option 2</option>
|
|
238
|
+
<option value="3">Option 3</option>
|
|
239
|
+
</select-field>
|
|
240
|
+
|
|
241
|
+
<button class="underline text-blue-600" @click="showActivity = !showActivity">
|
|
242
|
+
<span v-if="!showActivity">Show</span><span v-else>Hide</span> Activity
|
|
243
|
+
</button>
|
|
244
|
+
|
|
245
|
+
<!-- <h2 class="text-2xl mt-6 mb-3">Animated Labels</h2>
|
|
246
|
+
|
|
247
|
+
<select-field v-model="value" class="mb-3" label="Some Label" animated>
|
|
248
|
+
<option value="1">Option 1</option>
|
|
249
|
+
<option value="2" selected>Option 2</option>
|
|
250
|
+
<option value="3">Option 3</option>
|
|
251
|
+
</select-field>
|
|
252
|
+
|
|
253
|
+
<select-field class="mb-3" label="Some Empty Label" animated>
|
|
254
|
+
<option value="1">Option 1</option>
|
|
255
|
+
<option value="2">Option 2</option>
|
|
256
|
+
<option value="3">Option 3</option>
|
|
257
|
+
</select-field> -->
|
|
258
|
+
|
|
259
|
+
<h2 class="text-2xl mt-6 mb-3">Validation</h2>
|
|
260
|
+
|
|
261
|
+
<select-field label="Empty Array of Errors" :errors="[]" class="mb-3">
|
|
262
|
+
<option value=""></option>
|
|
263
|
+
<option value="1">Option 1</option>
|
|
264
|
+
<option value="2">Option 2</option>
|
|
265
|
+
<option value="3">Option 3</option>
|
|
266
|
+
</select-field>
|
|
267
|
+
<select-field label="Single Inline Error" error="This is an inline error." class="mb-3 invalid-feedback">
|
|
268
|
+
<option value=""></option>
|
|
269
|
+
<option value="1">Option 1</option>
|
|
270
|
+
<option value="2">Option 2</option>
|
|
271
|
+
<option value="3">Option 3</option>
|
|
272
|
+
</select-field>
|
|
273
|
+
<select-field label="Array of Errors" :errors="['First Error', 'Second Error']" class="mb-3 invalid-feedback">
|
|
274
|
+
<option value=""></option>
|
|
275
|
+
<option value="1">Option 1</option>
|
|
276
|
+
<option value="2">Option 2</option>
|
|
277
|
+
<option value="3">Option 3</option>
|
|
278
|
+
</select-field>
|
|
279
|
+
<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">
|
|
280
|
+
<option value=""></option>
|
|
281
|
+
<option value="1">Option 1</option>
|
|
282
|
+
<option value="2">Option 2</option>
|
|
283
|
+
<option value="3">Option 3</option>
|
|
284
|
+
</select-field>
|
|
285
|
+
|
|
286
|
+
<select-field label="Valid Field" valid class="mb-3 valid-feedback">
|
|
287
|
+
<option value=""></option>
|
|
288
|
+
<option value="1">Option 1</option>
|
|
289
|
+
<option value="2">Option 2</option>
|
|
290
|
+
<option value="3">Option 3</option>
|
|
291
|
+
</select-field>
|
|
292
|
+
<select-field label="Valid Field with Feedback" valid feedback="This is some success message." class="mb-3 valid-feedback">
|
|
293
|
+
<option value=""></option>
|
|
294
|
+
<option value="1">Option 1</option>
|
|
295
|
+
<option value="2">Option 2</option>
|
|
296
|
+
<option value="3">Option 3</option>
|
|
297
|
+
</select-field>
|
|
298
|
+
<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">
|
|
299
|
+
<option value=""></option>
|
|
300
|
+
<option value="1">Option 1</option>
|
|
301
|
+
<option value="2">Option 2</option>
|
|
302
|
+
<option value="3">Option 3</option>
|
|
303
|
+
</select-field>
|
|
304
|
+
|
|
305
|
+
<h2 class="text-2xl mt-6 mb-3">Animated Labels</h2>
|
|
306
|
+
|
|
307
|
+
<select-field v-model="value" label="form-select-md" size="form-select-md" class="mb-3 form-control-animated-md">
|
|
308
|
+
<option value=""></option>
|
|
309
|
+
<option value="1">Option 1</option>
|
|
310
|
+
<option value="2">Option 2</option>
|
|
311
|
+
<option value="3">Option 3</option>
|
|
312
|
+
</select-field>
|
|
313
|
+
|
|
314
|
+
<select-field label="form-select-lg" size="form-select-lg" class="mb-3 form-control-animated-lg">
|
|
315
|
+
<option value=""></option>
|
|
316
|
+
<option value="1">Option 1</option>
|
|
317
|
+
<option value="2">Option 2</option>
|
|
318
|
+
<option value="3">Option 3</option>
|
|
319
|
+
</select-field>
|
|
320
|
+
|
|
321
|
+
<select-field label="form-select-xl" size="form-select-xl" class="mb-3 form-control-animated-xl">
|
|
322
|
+
<option value=""></option>
|
|
323
|
+
<option value="1">Option 1</option>
|
|
324
|
+
<option value="2">Option 2</option>
|
|
325
|
+
<option value="3">Option 3</option>
|
|
326
|
+
</select-field>
|
|
327
|
+
|
|
328
|
+
<select-field label="form-select-4" size="form-select-4" class="mb-3 form-control-animated-4">
|
|
329
|
+
<option value=""></option>
|
|
330
|
+
<option value="1">Option 1</option>
|
|
331
|
+
<option value="2">Option 2</option>
|
|
332
|
+
<option value="3">Option 3</option>
|
|
333
|
+
</select-field>
|
|
334
|
+
|
|
335
|
+
<select-field label="form-select-[16px]" size="form-select-[16px]" class="mb-3 form-control-animated-[16px]">
|
|
336
|
+
<option value=""></option>
|
|
337
|
+
<option value="1">Option 1</option>
|
|
338
|
+
<option value="2">Option 2</option>
|
|
339
|
+
<option value="3">Option 3</option>
|
|
340
|
+
</select-field>
|
|
341
|
+
|
|
342
|
+
<!-- Animated with Icons -->
|
|
343
|
+
|
|
344
|
+
<select-field label="Small Icon" size="form-select-sm" class="mb-3 form-control-animated-sm">
|
|
345
|
+
<option value=""></option>
|
|
346
|
+
<option value="1">Option 1</option>
|
|
347
|
+
<option value="2">Option 2</option>
|
|
348
|
+
<option value="3">Option 3</option>
|
|
349
|
+
<template #icon>
|
|
350
|
+
<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">
|
|
351
|
+
<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" />
|
|
352
|
+
</svg>
|
|
353
|
+
</template>
|
|
354
|
+
</select-field>
|
|
355
|
+
|
|
356
|
+
<select-field label="Medium Icon" size="form-select-md" class="mb-3 form-control-animated-md">
|
|
357
|
+
<option value=""></option>
|
|
358
|
+
<option value="1">Option 1</option>
|
|
359
|
+
<option value="2">Option 2</option>
|
|
360
|
+
<option value="3">Option 3</option>
|
|
361
|
+
<template #icon>
|
|
362
|
+
<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">
|
|
363
|
+
<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" />
|
|
364
|
+
</svg>
|
|
365
|
+
</template>
|
|
366
|
+
</select-field>
|
|
367
|
+
|
|
368
|
+
<select-field label="Large Icon" size="form-select-lg" class="mb-3 form-control-animated-lg">
|
|
369
|
+
<option value=""></option>
|
|
370
|
+
<option value="1">Option 1</option>
|
|
371
|
+
<option value="2">Option 2</option>
|
|
372
|
+
<option value="3">Option 3</option>
|
|
373
|
+
<template #icon>
|
|
374
|
+
<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">
|
|
375
|
+
<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" />
|
|
376
|
+
</svg>
|
|
377
|
+
</template>
|
|
378
|
+
</select-field>
|
|
379
|
+
|
|
380
|
+
<select-field label="Icon-xl" size="form-select-xl" class="mb-3 form-control-animated-xl">
|
|
381
|
+
<option value=""></option>
|
|
382
|
+
<option value="1">Option 1</option>
|
|
383
|
+
<option value="2">Option 2</option>
|
|
384
|
+
<option value="3">Option 3</option>
|
|
385
|
+
<template #icon>
|
|
386
|
+
<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">
|
|
387
|
+
<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" />
|
|
388
|
+
</svg>
|
|
389
|
+
</template>
|
|
390
|
+
</select-field>
|
|
391
|
+
|
|
392
|
+
<select-field label="Icon-5" size="form-select-5" class="mb-3 form-control-animated-5">
|
|
393
|
+
<option value=""></option>
|
|
394
|
+
<option value="1">Option 1</option>
|
|
395
|
+
<option value="2">Option 2</option>
|
|
396
|
+
<option value="3">Option 3</option>
|
|
397
|
+
<template #icon>
|
|
398
|
+
<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">
|
|
399
|
+
<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" />
|
|
400
|
+
</svg>
|
|
401
|
+
</template>
|
|
402
|
+
</select-field>
|
|
403
|
+
|
|
404
|
+
<select-field label="Icon-6" size="form-select-6" class="mb-3 form-control-animated-6">
|
|
405
|
+
<option value=""></option>
|
|
406
|
+
<option value="1">Option 1</option>
|
|
407
|
+
<option value="2">Option 2</option>
|
|
408
|
+
<option value="3">Option 3</option>
|
|
409
|
+
<template #icon>
|
|
410
|
+
<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">
|
|
411
|
+
<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" />
|
|
412
|
+
</svg>
|
|
413
|
+
</template>
|
|
414
|
+
</select-field>
|
|
415
|
+
|
|
416
|
+
<select-field label="Icon-[16px]" size="form-select-[16px]" class="mb-3 form-control-animated-[16px]">
|
|
417
|
+
<option value=""></option>
|
|
418
|
+
<option value="1">Option 1</option>
|
|
419
|
+
<option value="2">Option 2</option>
|
|
420
|
+
<option value="3">Option 3</option>
|
|
421
|
+
<template #icon>
|
|
422
|
+
<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">
|
|
423
|
+
<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" />
|
|
424
|
+
</svg>
|
|
425
|
+
</template>
|
|
426
|
+
</select-field>
|
|
427
|
+
|
|
428
|
+
<select-field label="Icon-[21px]" size="form-select-[21px]" class="mb-3 form-control-animated-[21px]">
|
|
429
|
+
<option value=""></option>
|
|
430
|
+
<option value="1">Option 1</option>
|
|
431
|
+
<option value="2">Option 2</option>
|
|
432
|
+
<option value="3">Option 3</option>
|
|
433
|
+
<template #icon>
|
|
434
|
+
<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">
|
|
435
|
+
<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" />
|
|
436
|
+
</svg>
|
|
437
|
+
</template>
|
|
438
|
+
</select-field>
|
|
439
|
+
|
|
440
|
+
</div>
|
|
441
|
+
|
|
442
|
+
<script type="module">
|
|
443
|
+
import './demo.css';
|
|
444
|
+
import { createApp } from 'vue/dist/vue.esm-bundler.js';
|
|
445
|
+
import { SelectField } from './index';
|
|
446
|
+
import { Dots, Pulse, Spinner } from '@vue-interface/activity-indicator';
|
|
447
|
+
|
|
448
|
+
const vue = createApp({
|
|
449
|
+
components: {
|
|
450
|
+
SelectField
|
|
451
|
+
},
|
|
452
|
+
data() {
|
|
453
|
+
return {
|
|
454
|
+
Dots: () => Dots,
|
|
455
|
+
Spinner: () => Spinner,
|
|
456
|
+
Pulse: () => Pulse,
|
|
457
|
+
showActivity: false,
|
|
458
|
+
value: undefined
|
|
459
|
+
};
|
|
460
|
+
},
|
|
461
|
+
mounted() {
|
|
462
|
+
setTimeout(() => {
|
|
463
|
+
this.value = '1';
|
|
464
|
+
}, 1000)
|
|
465
|
+
}
|
|
466
|
+
})
|
|
467
|
+
.mount('#app');
|
|
468
|
+
</script>
|
|
469
|
+
</body>
|
|
470
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,32 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-interface/select-field",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "A Vue select field component.",
|
|
5
|
-
"files": [
|
|
6
|
-
"dist"
|
|
7
|
-
],
|
|
8
5
|
"type": "module",
|
|
9
6
|
"main": "./dist/select-field.umd.js",
|
|
10
7
|
"module": "./dist/select-field.js",
|
|
11
|
-
"style": "./dist/style.css",
|
|
12
8
|
"types": "./dist/index.d.ts",
|
|
13
9
|
"exports": {
|
|
14
10
|
".": {
|
|
11
|
+
"source": "./index.ts",
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
15
13
|
"import": "./dist/select-field.js",
|
|
16
|
-
"require": "./dist/select-field.umd.js"
|
|
17
|
-
|
|
18
|
-
},
|
|
19
|
-
"./dist/style.css": "./dist/style.css"
|
|
14
|
+
"require": "./dist/select-field.umd.js"
|
|
15
|
+
}
|
|
20
16
|
},
|
|
21
17
|
"browserslist": "last 2 versions, > 0.5%, ie >= 11",
|
|
22
|
-
"scripts": {
|
|
23
|
-
"dev": "vite",
|
|
24
|
-
"build": "vite build",
|
|
25
|
-
"preview": "vite preview"
|
|
26
|
-
},
|
|
27
18
|
"repository": {
|
|
28
19
|
"type": "git",
|
|
29
|
-
"url": "git+https://github.com/vue-interface/select-field
|
|
20
|
+
"url": "git+https://github.com/vue-interface/select-field"
|
|
30
21
|
},
|
|
31
22
|
"keywords": [
|
|
32
23
|
"Select",
|
|
@@ -39,27 +30,17 @@
|
|
|
39
30
|
"author": "Justin Kimbrell",
|
|
40
31
|
"license": "ISC",
|
|
41
32
|
"bugs": {
|
|
42
|
-
"url": "https://github.com/vue-interface/select-field
|
|
43
|
-
},
|
|
44
|
-
"homepage": "https://github.com/vue-interface/select-field/docs#readme",
|
|
45
|
-
"dependencies": {
|
|
46
|
-
"@vue-interface/activity-indicator": "^2.0.0-beta.11",
|
|
47
|
-
"@vue-interface/form-control": "^1.0.0-beta.15"
|
|
33
|
+
"url": "https://github.com/vue-interface/select-field"
|
|
48
34
|
},
|
|
35
|
+
"homepage": "https://github.com/vue-interface/vue-interface",
|
|
49
36
|
"peerDependencies": {
|
|
50
|
-
"vue": "^3.
|
|
37
|
+
"vue": "^3.3.4",
|
|
38
|
+
"@vue-interface/activity-indicator": "3.0.0",
|
|
39
|
+
"@vue-interface/form-control": "2.0.0"
|
|
51
40
|
},
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"eslint": "^8.34.0",
|
|
57
|
-
"eslint-plugin-vue": "^9.9.0",
|
|
58
|
-
"pascalcase": "^2.0.0",
|
|
59
|
-
"postcss": "^8.4.21",
|
|
60
|
-
"tailwindcss": "^3.2.7",
|
|
61
|
-
"vite": "^4.1.4",
|
|
62
|
-
"vite-plugin-dts": "^1.7.3",
|
|
63
|
-
"vue": "^3.2.47"
|
|
41
|
+
"scripts": {
|
|
42
|
+
"dev": "vite",
|
|
43
|
+
"build": "vue-tsc && vite build",
|
|
44
|
+
"preview": "vite preview"
|
|
64
45
|
}
|
|
65
|
-
}
|
|
46
|
+
}
|