@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/index.html
DELETED
|
@@ -1,470 +0,0 @@
|
|
|
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/index.ts
DELETED
package/src/SelectField.vue
DELETED
|
@@ -1,160 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts" generic="ModelValue, Value">
|
|
2
|
-
import { ActivityIndicator } from '@vue-interface/activity-indicator';
|
|
3
|
-
import type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';
|
|
4
|
-
import { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';
|
|
5
|
-
import { InputHTMLAttributes, onMounted, ref, SelectHTMLAttributes, useSlots } from 'vue';
|
|
6
|
-
|
|
7
|
-
const props = withDefaults(defineProps<SelectFieldProps<ModelValue,Value>>(), {
|
|
8
|
-
formControlClass: 'form-select',
|
|
9
|
-
labelClass: 'form-label'
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
defineOptions({
|
|
13
|
-
inheritAttrs: false
|
|
14
|
-
});
|
|
15
|
-
|
|
16
|
-
const model = defineModel<ModelValue>();
|
|
17
|
-
|
|
18
|
-
defineSlots<FormControlSlots<SelectFieldControlSizePrefix,ModelValue> & {
|
|
19
|
-
default: () => unknown
|
|
20
|
-
}>();
|
|
21
|
-
|
|
22
|
-
const emit = defineEmits<FormControlEvents<ModelValue>>();
|
|
23
|
-
|
|
24
|
-
const {
|
|
25
|
-
controlAttributes,
|
|
26
|
-
formGroupClasses,
|
|
27
|
-
listeners,
|
|
28
|
-
} = useFormControl<InputHTMLAttributes, SelectFieldControlSizePrefix, ModelValue, Value>({ model, props, emit });
|
|
29
|
-
|
|
30
|
-
const field = ref<HTMLSelectElement>();
|
|
31
|
-
|
|
32
|
-
function onMousedownLabel(e: MouseEvent) {
|
|
33
|
-
listeners.onClick(e);
|
|
34
|
-
|
|
35
|
-
field.value?.focus();
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
// Check the option slots for selected options. If the field has hardcoded
|
|
39
|
-
// selected options, this will ensure the value of the field is always set to
|
|
40
|
-
// the property. This will ensure the model is updated to the selected value.
|
|
41
|
-
onMounted(() => {
|
|
42
|
-
const slot = useSlots().default;
|
|
43
|
-
|
|
44
|
-
if(!slot) {
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
for(const child of slot()) {
|
|
49
|
-
if(!child.props) {
|
|
50
|
-
return;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
if('selected' in child.props && (child.props.value ?? child.children)) {
|
|
54
|
-
model.value = child.props.value ?? child.children;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
</script>
|
|
59
|
-
|
|
60
|
-
<script lang="ts">
|
|
61
|
-
export type SelectFieldControlSizePrefix = 'form-select';
|
|
62
|
-
|
|
63
|
-
export type SelectFieldProps<ModelValue, Value> = FormControlProps<
|
|
64
|
-
SelectHTMLAttributes,
|
|
65
|
-
SelectFieldControlSizePrefix,
|
|
66
|
-
ModelValue,
|
|
67
|
-
Value
|
|
68
|
-
>;
|
|
69
|
-
</script>
|
|
70
|
-
|
|
71
|
-
<template>
|
|
72
|
-
<div
|
|
73
|
-
class="select-field"
|
|
74
|
-
:class="formGroupClasses">
|
|
75
|
-
<slot name="label">
|
|
76
|
-
<label
|
|
77
|
-
v-if="label"
|
|
78
|
-
ref="label"
|
|
79
|
-
:for="controlAttributes.id"
|
|
80
|
-
:class="labelClass"
|
|
81
|
-
@mousedown="onMousedownLabel">
|
|
82
|
-
{{ label }}
|
|
83
|
-
</label>
|
|
84
|
-
</slot>
|
|
85
|
-
|
|
86
|
-
<div class="form-control-inner">
|
|
87
|
-
<slot
|
|
88
|
-
name="control"
|
|
89
|
-
v-bind="{ controlAttributes, listeners }">
|
|
90
|
-
<div
|
|
91
|
-
v-if="$slots.icon"
|
|
92
|
-
class="form-control-inner-icon"
|
|
93
|
-
@click="field?.focus()">
|
|
94
|
-
<slot name="icon" />
|
|
95
|
-
</div>
|
|
96
|
-
<select
|
|
97
|
-
ref="field"
|
|
98
|
-
v-model="model"
|
|
99
|
-
v-bind="{...controlAttributes, ...listeners}">
|
|
100
|
-
<slot />
|
|
101
|
-
</select>
|
|
102
|
-
</slot>
|
|
103
|
-
|
|
104
|
-
<div class="form-control-activity-indicator">
|
|
105
|
-
<slot name="activity">
|
|
106
|
-
<Transition name="select-field-fade">
|
|
107
|
-
<ActivityIndicator
|
|
108
|
-
v-if="activity && indicator"
|
|
109
|
-
key="activity"
|
|
110
|
-
ref="activity"
|
|
111
|
-
:type="indicator"
|
|
112
|
-
:size="indicatorSize" />
|
|
113
|
-
</Transition>
|
|
114
|
-
</slot>
|
|
115
|
-
</div>
|
|
116
|
-
</div>
|
|
117
|
-
|
|
118
|
-
<slot
|
|
119
|
-
name="errors"
|
|
120
|
-
v-bind="{ error, errors, id, name }">
|
|
121
|
-
<FormControlErrors
|
|
122
|
-
v-if="!!(error || errors)"
|
|
123
|
-
:id="id && String(id)"
|
|
124
|
-
v-slot="{ error }"
|
|
125
|
-
:name="name && String(name)"
|
|
126
|
-
:error="error"
|
|
127
|
-
:errors="errors">
|
|
128
|
-
<div
|
|
129
|
-
invalid
|
|
130
|
-
class="invalid-feedback">
|
|
131
|
-
{{ error }}<br>
|
|
132
|
-
</div>
|
|
133
|
-
</FormControlErrors>
|
|
134
|
-
</slot>
|
|
135
|
-
|
|
136
|
-
<slot
|
|
137
|
-
name="feedback"
|
|
138
|
-
v-bind="{ feedback }">
|
|
139
|
-
<FormControlFeedback
|
|
140
|
-
v-slot="{ feedback }"
|
|
141
|
-
:feedback="feedback">
|
|
142
|
-
<div
|
|
143
|
-
valid
|
|
144
|
-
class="valid-feedback">
|
|
145
|
-
{{ feedback }}
|
|
146
|
-
</div>
|
|
147
|
-
</FormControlFeedback>
|
|
148
|
-
</slot>
|
|
149
|
-
|
|
150
|
-
<slot
|
|
151
|
-
name="help"
|
|
152
|
-
v-bind="{ helpText }">
|
|
153
|
-
<small
|
|
154
|
-
v-if="helpText"
|
|
155
|
-
ref="help">
|
|
156
|
-
{{ helpText }}
|
|
157
|
-
</small>
|
|
158
|
-
</slot>
|
|
159
|
-
</div>
|
|
160
|
-
</template>
|