@volverjs/ui-vue 0.0.11 → 0.0.13-beta.1
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/bin/icons.js +1 -93
- package/dist/components/VvAccordion/VvAccordion.es.js +1 -366
- package/dist/components/VvAccordion/VvAccordion.vue.d.ts +7 -2
- package/dist/components/VvAccordionGroup/VvAccordionGroup.es.js +2 -702
- package/dist/components/VvAccordionGroup/VvAccordionGroup.vue.d.ts +5 -2
- package/dist/components/VvAction/VvAction.es.js +1 -302
- package/dist/components/VvAction/VvAction.umd.js +1 -1
- package/dist/components/VvAction/VvAction.vue.d.ts +3 -2
- package/dist/components/VvAlert/VvAlert.es.js +1 -527
- package/dist/components/VvAlert/VvAlert.vue.d.ts +3 -2
- package/dist/components/VvAlertGroup/VvAlertGroup.es.js +1 -730
- package/dist/components/VvAlertGroup/VvAlertGroup.vue.d.ts +3 -3
- package/dist/components/VvAvatar/VvAvatar.es.js +1 -132
- package/dist/components/VvAvatar/VvAvatar.vue.d.ts +2 -2
- package/dist/components/VvAvatarGroup/VvAvatarGroup.es.js +1 -250
- package/dist/components/VvAvatarGroup/VvAvatarGroup.vue.d.ts +2 -2
- package/dist/components/VvBadge/VvBadge.es.js +1 -131
- package/dist/components/VvBadge/VvBadge.vue.d.ts +2 -2
- package/dist/components/VvBreadcrumb/VvBreadcrumb.es.js +1 -410
- package/dist/components/VvBreadcrumb/VvBreadcrumb.umd.js +1 -1
- package/dist/components/VvBreadcrumb/VvBreadcrumb.vue.d.ts +2 -2
- package/dist/components/VvButton/VvButton.es.js +1 -882
- package/dist/components/VvButton/VvButton.umd.js +1 -1
- package/dist/components/VvButton/VvButton.vue.d.ts +3 -2
- package/dist/components/VvButtonGroup/VvButtonGroup.es.js +1 -214
- package/dist/components/VvButtonGroup/VvButtonGroup.vue.d.ts +2 -2
- package/dist/components/VvCard/VvCard.es.js +1 -152
- package/dist/components/VvCard/VvCard.vue.d.ts +2 -2
- package/dist/components/VvCheckbox/VvCheckbox.es.js +1 -741
- package/dist/components/VvCheckbox/VvCheckbox.vue.d.ts +2 -2
- package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js +1 -981
- package/dist/components/VvCheckboxGroup/VvCheckboxGroup.vue.d.ts +2 -2
- package/dist/components/VvCombobox/VvCombobox.es.js +1 -3463
- package/dist/components/VvCombobox/VvCombobox.umd.js +1 -1
- package/dist/components/VvCombobox/VvCombobox.vue.d.ts +16 -7
- package/dist/components/VvDialog/VvDialog.es.js +1 -317
- package/dist/components/VvDialog/VvDialog.vue.d.ts +4 -2
- package/dist/components/VvDropdown/VvDropdown.es.js +1 -750
- package/dist/components/VvDropdown/VvDropdown.vue.d.ts +14 -2
- package/dist/components/VvDropdown/VvDropdownAction.vue.d.ts +2 -2
- package/dist/components/VvDropdown/VvDropdownItem.vue.d.ts +2 -2
- package/dist/components/VvDropdown/VvDropdownOptgroup.vue.d.ts +11 -4
- package/dist/components/VvDropdown/VvDropdownOption.vue.d.ts +2 -2
- package/dist/components/VvDropdownAction/VvDropdownAction.es.js +1 -448
- package/dist/components/VvDropdownAction/VvDropdownAction.umd.js +1 -1
- package/dist/components/VvDropdownItem/VvDropdownItem.es.js +1 -149
- package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.es.js +1 -104
- package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.umd.js +1 -1
- package/dist/components/VvDropdownOption/VvDropdownOption.es.js +1 -281
- package/dist/components/VvIcon/VvIcon.es.js +1 -143
- package/dist/components/VvIcon/VvIcon.vue.d.ts +2 -2
- package/dist/components/VvInputFile/VvInputFile.es.js +1 -1704
- package/dist/components/VvInputFile/VvInputFile.umd.js +1 -1
- package/dist/components/VvInputFile/VvInputFile.vue.d.ts +34 -4
- package/dist/components/VvInputFile/index.d.ts +7 -0
- package/dist/components/VvInputText/VvInputText.es.js +4 -2790
- package/dist/components/VvInputText/VvInputText.umd.js +1 -1
- package/dist/components/VvInputText/VvInputText.vue.d.ts +8 -3
- package/dist/components/VvNav/VvNav.es.js +1 -438
- package/dist/components/VvNav/VvNav.umd.js +1 -1
- package/dist/components/VvNav/VvNav.vue.d.ts +2 -2
- package/dist/components/VvNav/VvNavItem.vue.d.ts +2 -2
- package/dist/components/VvNav/VvNavSeparator.vue.d.ts +1 -1
- package/dist/components/VvNavItem/VvNavItem.es.js +1 -337
- package/dist/components/VvNavItem/VvNavItem.umd.js +1 -1
- package/dist/components/VvNavSeparator/VvNavSeparator.es.js +1 -24
- package/dist/components/VvProgress/VvProgress.es.js +1 -163
- package/dist/components/VvProgress/VvProgress.vue.d.ts +2 -2
- package/dist/components/VvRadio/VvRadio.es.js +1 -661
- package/dist/components/VvRadio/VvRadio.vue.d.ts +2 -2
- package/dist/components/VvRadioGroup/VvRadioGroup.es.js +1 -901
- package/dist/components/VvRadioGroup/VvRadioGroup.vue.d.ts +2 -2
- package/dist/components/VvSelect/VvSelect.es.js +1 -1103
- package/dist/components/VvSelect/VvSelect.vue.d.ts +11 -7
- package/dist/components/VvTab/VvTab.es.js +1 -558
- package/dist/components/VvTab/VvTab.umd.js +1 -1
- package/dist/components/VvTab/VvTab.vue.d.ts +2 -2
- package/dist/components/VvTextarea/VvTextarea.es.js +2 -1989
- package/dist/components/VvTextarea/VvTextarea.vue.d.ts +3 -3
- package/dist/components/VvTooltip/VvTooltip.es.js +1 -154
- package/dist/components/VvTooltip/VvTooltip.vue.d.ts +2 -2
- package/dist/components/index.es.js +6 -8558
- package/dist/components/index.umd.js +1 -1
- package/dist/composables/index.es.js +2 -247
- package/dist/composables/index.umd.js +1 -1
- package/dist/directives/index.es.js +2 -311
- package/dist/directives/index.umd.js +1 -1
- package/dist/directives/v-contextmenu.es.js +2 -142
- package/dist/directives/v-contextmenu.umd.js +1 -1
- package/dist/directives/v-tooltip.es.js +1 -172
- package/dist/icons.es.js +1 -39
- package/dist/icons.umd.js +1 -1
- package/dist/index.es.js +1 -219
- package/dist/props/index.d.ts +7 -0
- package/dist/resolvers/unplugin.es.js +1 -187
- package/dist/stories/AccordionGroup/AccordionGroupSlots.stories.d.ts +2 -2
- package/dist/stories/Avatar/Avatar.settings.d.ts +1 -1
- package/package.json +47 -40
|
@@ -1,1103 +1 @@
|
|
|
1
|
-
import { computed, isRef, defineComponent, h, inject, unref, mergeDefaults, ref, toRefs, createBlock, createCommentVNode, openBlock, mergeProps, watch, useId, useSlots, createElementBlock, normalizeClass, createElementVNode, createVNode, toDisplayString, renderSlot, normalizeProps, guardReactiveProps, withDirectives, Fragment, renderList, vModelSelect, createSlots, withCtx } from "vue";
|
|
2
|
-
import { iconLoaded, Icon, addIcon } from "@iconify/vue";
|
|
3
|
-
import { useFocus, useElementVisibility } from "@vueuse/core";
|
|
4
|
-
import { getProperty } from "dot-prop";
|
|
5
|
-
const ACTION_ICONS = {
|
|
6
|
-
clear: "close"
|
|
7
|
-
};
|
|
8
|
-
const VvIconPropsDefaults = {
|
|
9
|
-
prefix: "normal"
|
|
10
|
-
/* normal */
|
|
11
|
-
};
|
|
12
|
-
var StorageType = /* @__PURE__ */ ((StorageType2) => {
|
|
13
|
-
StorageType2["local"] = "local";
|
|
14
|
-
StorageType2["session"] = "session";
|
|
15
|
-
return StorageType2;
|
|
16
|
-
})(StorageType || {});
|
|
17
|
-
var Side = /* @__PURE__ */ ((Side2) => {
|
|
18
|
-
Side2["left"] = "left";
|
|
19
|
-
Side2["right"] = "right";
|
|
20
|
-
Side2["top"] = "top";
|
|
21
|
-
Side2["bottom"] = "bottom";
|
|
22
|
-
return Side2;
|
|
23
|
-
})(Side || {});
|
|
24
|
-
var Position = /* @__PURE__ */ ((Position2) => {
|
|
25
|
-
Position2["before"] = "before";
|
|
26
|
-
Position2["after"] = "after";
|
|
27
|
-
return Position2;
|
|
28
|
-
})(Position || {});
|
|
29
|
-
var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
|
|
30
|
-
ButtonType2["button"] = "button";
|
|
31
|
-
ButtonType2["submit"] = "submit";
|
|
32
|
-
ButtonType2["reset"] = "reset";
|
|
33
|
-
return ButtonType2;
|
|
34
|
-
})(ButtonType || {});
|
|
35
|
-
var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
|
|
36
|
-
ActionTag2["nuxtLink"] = "nuxt-link";
|
|
37
|
-
ActionTag2["routerLink"] = "router-link";
|
|
38
|
-
ActionTag2["a"] = "a";
|
|
39
|
-
ActionTag2["button"] = "button";
|
|
40
|
-
return ActionTag2;
|
|
41
|
-
})(ActionTag || {});
|
|
42
|
-
const INJECTION_KEY_VOLVER = Symbol.for("volver");
|
|
43
|
-
const ValidProps = {
|
|
44
|
-
/**
|
|
45
|
-
* Valid status
|
|
46
|
-
*/
|
|
47
|
-
valid: { type: Boolean, default: false },
|
|
48
|
-
/**
|
|
49
|
-
* Valid label
|
|
50
|
-
*/
|
|
51
|
-
validLabel: { type: [String, Array], default: void 0 }
|
|
52
|
-
};
|
|
53
|
-
const InvalidProps = {
|
|
54
|
-
/**
|
|
55
|
-
* Invalid status
|
|
56
|
-
*/
|
|
57
|
-
invalid: {
|
|
58
|
-
type: Boolean,
|
|
59
|
-
default: false
|
|
60
|
-
},
|
|
61
|
-
/**
|
|
62
|
-
* Invalid label
|
|
63
|
-
*/
|
|
64
|
-
invalidLabel: { type: [String, Array], default: void 0 }
|
|
65
|
-
};
|
|
66
|
-
const LoadingProps = {
|
|
67
|
-
/**
|
|
68
|
-
* Loading status
|
|
69
|
-
*/
|
|
70
|
-
loading: {
|
|
71
|
-
type: Boolean,
|
|
72
|
-
default: false
|
|
73
|
-
},
|
|
74
|
-
/**
|
|
75
|
-
* Loading label
|
|
76
|
-
*/
|
|
77
|
-
loadingLabel: {
|
|
78
|
-
type: String,
|
|
79
|
-
default: "Loading..."
|
|
80
|
-
}
|
|
81
|
-
};
|
|
82
|
-
const DisabledProps = {
|
|
83
|
-
/**
|
|
84
|
-
* Whether the form control is disabled
|
|
85
|
-
*/
|
|
86
|
-
disabled: {
|
|
87
|
-
type: Boolean,
|
|
88
|
-
default: false
|
|
89
|
-
}
|
|
90
|
-
};
|
|
91
|
-
const ClearProps = {
|
|
92
|
-
/**
|
|
93
|
-
* If true, the clear button will be shown
|
|
94
|
-
*/
|
|
95
|
-
showClearAction: {
|
|
96
|
-
type: Boolean,
|
|
97
|
-
default: false
|
|
98
|
-
},
|
|
99
|
-
/**
|
|
100
|
-
* VvIcon name for clear button
|
|
101
|
-
* @see VvIcon
|
|
102
|
-
*/
|
|
103
|
-
iconClear: {
|
|
104
|
-
type: [String, Object],
|
|
105
|
-
default: ACTION_ICONS.clear
|
|
106
|
-
},
|
|
107
|
-
/**
|
|
108
|
-
* Label for clear button
|
|
109
|
-
*/
|
|
110
|
-
labelClear: {
|
|
111
|
-
type: String,
|
|
112
|
-
default: "Clear"
|
|
113
|
-
}
|
|
114
|
-
};
|
|
115
|
-
const LabelProps = {
|
|
116
|
-
/**
|
|
117
|
-
* The item label
|
|
118
|
-
*/
|
|
119
|
-
label: {
|
|
120
|
-
type: [String, Number],
|
|
121
|
-
default: void 0
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
const ReadonlyProps = {
|
|
125
|
-
/**
|
|
126
|
-
* The value is not editable
|
|
127
|
-
*/
|
|
128
|
-
readonly: {
|
|
129
|
-
type: Boolean,
|
|
130
|
-
default: false
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
const ModifiersProps = {
|
|
134
|
-
/**
|
|
135
|
-
* Component BEM modifiers
|
|
136
|
-
*/
|
|
137
|
-
modifiers: {
|
|
138
|
-
type: [String, Array],
|
|
139
|
-
default: void 0
|
|
140
|
-
}
|
|
141
|
-
};
|
|
142
|
-
const HintProps = {
|
|
143
|
-
hintLabel: { type: String, default: "" }
|
|
144
|
-
};
|
|
145
|
-
const OptionsProps = {
|
|
146
|
-
/**
|
|
147
|
-
* List of options, can be string[] or object[]
|
|
148
|
-
*/
|
|
149
|
-
options: {
|
|
150
|
-
type: Array,
|
|
151
|
-
default: () => []
|
|
152
|
-
},
|
|
153
|
-
/**
|
|
154
|
-
* Used when options are objects: key to use for option label
|
|
155
|
-
*/
|
|
156
|
-
labelKey: { type: [String, Function], default: "label" },
|
|
157
|
-
/**
|
|
158
|
-
* Used when options are objects: key to use for option label
|
|
159
|
-
*/
|
|
160
|
-
valueKey: { type: [String, Function], default: "value" },
|
|
161
|
-
/**
|
|
162
|
-
* Used when options are objects: key to use for option disabled
|
|
163
|
-
*/
|
|
164
|
-
disabledKey: { type: [String, Function], default: "disabled" }
|
|
165
|
-
};
|
|
166
|
-
const IconProps = {
|
|
167
|
-
/**
|
|
168
|
-
* VvIcon name or props
|
|
169
|
-
* @see VvIcon
|
|
170
|
-
*/
|
|
171
|
-
icon: {
|
|
172
|
-
type: [String, Object],
|
|
173
|
-
default: void 0
|
|
174
|
-
},
|
|
175
|
-
/**
|
|
176
|
-
* VvIcon position
|
|
177
|
-
*/
|
|
178
|
-
iconPosition: {
|
|
179
|
-
type: String,
|
|
180
|
-
default: Position.before,
|
|
181
|
-
validation: (value) => Object.values(Position).includes(value)
|
|
182
|
-
}
|
|
183
|
-
};
|
|
184
|
-
const TabindexProps = {
|
|
185
|
-
/**
|
|
186
|
-
* Global attribute tabindex
|
|
187
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
|
|
188
|
-
*/
|
|
189
|
-
tabindex: { type: [String, Number], default: 0 }
|
|
190
|
-
};
|
|
191
|
-
const FloatingLabelProps = {
|
|
192
|
-
/**
|
|
193
|
-
* If true the label will be floating
|
|
194
|
-
*/
|
|
195
|
-
floating: {
|
|
196
|
-
type: Boolean,
|
|
197
|
-
default: false
|
|
198
|
-
}
|
|
199
|
-
};
|
|
200
|
-
const UnselectableProps = {
|
|
201
|
-
/**
|
|
202
|
-
* If true the input will be unselectable
|
|
203
|
-
*/
|
|
204
|
-
unselectable: { type: Boolean, default: true }
|
|
205
|
-
};
|
|
206
|
-
const IdProps = {
|
|
207
|
-
/**
|
|
208
|
-
* Global attribute id
|
|
209
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
|
|
210
|
-
*/
|
|
211
|
-
id: [String, Number]
|
|
212
|
-
};
|
|
213
|
-
({
|
|
214
|
-
/**
|
|
215
|
-
* Dropdown placement
|
|
216
|
-
*/
|
|
217
|
-
placement: {
|
|
218
|
-
default: Side.bottom
|
|
219
|
-
}
|
|
220
|
-
});
|
|
221
|
-
const IdNameProps = {
|
|
222
|
-
...IdProps,
|
|
223
|
-
/**
|
|
224
|
-
* Input / Textarea name
|
|
225
|
-
* Name of the form control. Submitted with the form as part of a name/value pair
|
|
226
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
|
|
227
|
-
*/
|
|
228
|
-
name: { type: String, required: true }
|
|
229
|
-
};
|
|
230
|
-
const AutofocusProps = {
|
|
231
|
-
/**
|
|
232
|
-
* Global attribute autofocus
|
|
233
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
|
|
234
|
-
*/
|
|
235
|
-
autofocus: {
|
|
236
|
-
type: Boolean,
|
|
237
|
-
default: false
|
|
238
|
-
}
|
|
239
|
-
};
|
|
240
|
-
const AutocompleteProps = {
|
|
241
|
-
/**
|
|
242
|
-
* Global attribute autocomplete
|
|
243
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
|
|
244
|
-
*/
|
|
245
|
-
autocomplete: { type: String, default: "off" }
|
|
246
|
-
};
|
|
247
|
-
({
|
|
248
|
-
/**
|
|
249
|
-
* Button type
|
|
250
|
-
*/
|
|
251
|
-
type: {
|
|
252
|
-
default: ButtonType.button
|
|
253
|
-
},
|
|
254
|
-
/**
|
|
255
|
-
* Default tag for the action
|
|
256
|
-
*/
|
|
257
|
-
defaultTag: {
|
|
258
|
-
default: ActionTag.button
|
|
259
|
-
}
|
|
260
|
-
});
|
|
261
|
-
({
|
|
262
|
-
storageType: {
|
|
263
|
-
default: StorageType.local
|
|
264
|
-
}
|
|
265
|
-
});
|
|
266
|
-
const VvSelectProps = {
|
|
267
|
-
...IdNameProps,
|
|
268
|
-
...AutofocusProps,
|
|
269
|
-
...AutocompleteProps,
|
|
270
|
-
...TabindexProps,
|
|
271
|
-
...ValidProps,
|
|
272
|
-
...InvalidProps,
|
|
273
|
-
...HintProps,
|
|
274
|
-
...LoadingProps,
|
|
275
|
-
...DisabledProps,
|
|
276
|
-
...ReadonlyProps,
|
|
277
|
-
...ModifiersProps,
|
|
278
|
-
...OptionsProps,
|
|
279
|
-
...IconProps,
|
|
280
|
-
...FloatingLabelProps,
|
|
281
|
-
...UnselectableProps,
|
|
282
|
-
...LabelProps,
|
|
283
|
-
...ClearProps,
|
|
284
|
-
/**
|
|
285
|
-
* This Boolean attribute indicates that multiple options can be selected in the list.
|
|
286
|
-
* If it is not specified, then only one option can be selected at a time.
|
|
287
|
-
* When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
|
|
288
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
|
|
289
|
-
*/
|
|
290
|
-
multiple: Boolean,
|
|
291
|
-
/**
|
|
292
|
-
* A Boolean attribute indicating that an option with a non-empty string value must be selected.
|
|
293
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
|
|
294
|
-
*/
|
|
295
|
-
required: Boolean,
|
|
296
|
-
/**
|
|
297
|
-
* If the control is presented as a scrolling list box (e.g. when multiple is specified),
|
|
298
|
-
* this attribute represents the number of rows in the list that should be visible at one time.
|
|
299
|
-
* Browsers are not required to present a select element as a scrolled list box. The default value is 0.
|
|
300
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
|
|
301
|
-
*/
|
|
302
|
-
size: [String, Number],
|
|
303
|
-
/**
|
|
304
|
-
* modelValue can be a string, number, boolean, object or array of string, number, boolean, object
|
|
305
|
-
*/
|
|
306
|
-
modelValue: {
|
|
307
|
-
type: [String, Number, Boolean, Object, Array],
|
|
308
|
-
default: void 0
|
|
309
|
-
},
|
|
310
|
-
/**
|
|
311
|
-
* Select first option automatically
|
|
312
|
-
*/
|
|
313
|
-
autoselectFirst: {
|
|
314
|
-
type: Boolean,
|
|
315
|
-
default: false
|
|
316
|
-
},
|
|
317
|
-
/**
|
|
318
|
-
* Select placeholder
|
|
319
|
-
*/
|
|
320
|
-
placeholder: String
|
|
321
|
-
};
|
|
322
|
-
function useVvSelectProps() {
|
|
323
|
-
return {
|
|
324
|
-
...VvSelectProps,
|
|
325
|
-
options: {
|
|
326
|
-
...VvSelectProps.options,
|
|
327
|
-
type: Array,
|
|
328
|
-
default: () => []
|
|
329
|
-
}
|
|
330
|
-
};
|
|
331
|
-
}
|
|
332
|
-
function isString(value) {
|
|
333
|
-
return typeof value === "string";
|
|
334
|
-
}
|
|
335
|
-
function joinLines(items) {
|
|
336
|
-
if (Array.isArray(items)) {
|
|
337
|
-
return items.filter((item) => isString(item)).join(" ");
|
|
338
|
-
}
|
|
339
|
-
return items;
|
|
340
|
-
}
|
|
341
|
-
function HintSlotFactory(propsOrRef, slots) {
|
|
342
|
-
const props = computed(() => {
|
|
343
|
-
if (isRef(propsOrRef)) {
|
|
344
|
-
return propsOrRef.value;
|
|
345
|
-
}
|
|
346
|
-
return propsOrRef;
|
|
347
|
-
});
|
|
348
|
-
const invalidLabel = computed(() => joinLines(props.value.invalidLabel));
|
|
349
|
-
const validLabel = computed(() => joinLines(props.value.validLabel));
|
|
350
|
-
const loadingLabel = computed(() => props.value.loadingLabel);
|
|
351
|
-
const hintLabel = computed(() => props.value.hintLabel);
|
|
352
|
-
const hasLoadingLabelOrSlot = computed(
|
|
353
|
-
() => Boolean(props.value.loading && (slots.loading || loadingLabel.value))
|
|
354
|
-
);
|
|
355
|
-
const hasInvalidLabelOrSlot = computed(
|
|
356
|
-
() => !hasLoadingLabelOrSlot.value && Boolean(
|
|
357
|
-
props.value.invalid && (slots.invalid || invalidLabel.value)
|
|
358
|
-
)
|
|
359
|
-
);
|
|
360
|
-
const hasValidLabelOrSlot = computed(
|
|
361
|
-
() => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.value.valid && (slots.valid || validLabel.value))
|
|
362
|
-
);
|
|
363
|
-
const hasHintLabelOrSlot = computed(
|
|
364
|
-
() => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && !hasValidLabelOrSlot.value && Boolean(slots.hint || hintLabel.value)
|
|
365
|
-
);
|
|
366
|
-
const isVisible = computed(
|
|
367
|
-
() => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
|
|
368
|
-
);
|
|
369
|
-
const hintSlotScope = computed(() => ({
|
|
370
|
-
modelValue: props.value.modelValue,
|
|
371
|
-
valid: props.value.valid,
|
|
372
|
-
invalid: props.value.invalid,
|
|
373
|
-
loading: props.value.loading
|
|
374
|
-
}));
|
|
375
|
-
const HintSlot = defineComponent({
|
|
376
|
-
name: "HintSlot",
|
|
377
|
-
props: {
|
|
378
|
-
tag: {
|
|
379
|
-
type: String,
|
|
380
|
-
default: "small"
|
|
381
|
-
}
|
|
382
|
-
},
|
|
383
|
-
setup() {
|
|
384
|
-
return {
|
|
385
|
-
isVisible,
|
|
386
|
-
invalidLabel,
|
|
387
|
-
validLabel,
|
|
388
|
-
loadingLabel,
|
|
389
|
-
hintLabel,
|
|
390
|
-
hasInvalidLabelOrSlot,
|
|
391
|
-
hasValidLabelOrSlot,
|
|
392
|
-
hasLoadingLabelOrSlot,
|
|
393
|
-
hasHintLabelOrSlot
|
|
394
|
-
};
|
|
395
|
-
},
|
|
396
|
-
render() {
|
|
397
|
-
if (this.isVisible) {
|
|
398
|
-
let role;
|
|
399
|
-
if (this.hasInvalidLabelOrSlot) {
|
|
400
|
-
role = "alert";
|
|
401
|
-
}
|
|
402
|
-
if (this.hasValidLabelOrSlot) {
|
|
403
|
-
role = "status";
|
|
404
|
-
}
|
|
405
|
-
if (this.hasLoadingLabelOrSlot) {
|
|
406
|
-
return h(
|
|
407
|
-
this.tag,
|
|
408
|
-
{
|
|
409
|
-
role
|
|
410
|
-
},
|
|
411
|
-
this.$slots.loading?.() ?? this.loadingLabel
|
|
412
|
-
);
|
|
413
|
-
}
|
|
414
|
-
if (this.hasInvalidLabelOrSlot) {
|
|
415
|
-
return h(
|
|
416
|
-
this.tag,
|
|
417
|
-
{
|
|
418
|
-
role
|
|
419
|
-
},
|
|
420
|
-
this.$slots.invalid?.() ?? this.$slots.invalid ?? this.invalidLabel
|
|
421
|
-
);
|
|
422
|
-
}
|
|
423
|
-
if (this.hasValidLabelOrSlot) {
|
|
424
|
-
return h(
|
|
425
|
-
this.tag,
|
|
426
|
-
{
|
|
427
|
-
role
|
|
428
|
-
},
|
|
429
|
-
this.$slots.valid?.() ?? this.validLabel
|
|
430
|
-
);
|
|
431
|
-
}
|
|
432
|
-
return h(
|
|
433
|
-
this.tag,
|
|
434
|
-
{
|
|
435
|
-
role
|
|
436
|
-
},
|
|
437
|
-
this.$slots.hint?.() ?? this.$slots.hint ?? this.hintLabel
|
|
438
|
-
);
|
|
439
|
-
}
|
|
440
|
-
return null;
|
|
441
|
-
}
|
|
442
|
-
});
|
|
443
|
-
return {
|
|
444
|
-
hasInvalidLabelOrSlot,
|
|
445
|
-
hasHintLabelOrSlot,
|
|
446
|
-
hasValidLabelOrSlot,
|
|
447
|
-
hasLoadingLabelOrSlot,
|
|
448
|
-
hintSlotScope,
|
|
449
|
-
HintSlot
|
|
450
|
-
};
|
|
451
|
-
}
|
|
452
|
-
function useVolver() {
|
|
453
|
-
return inject(INJECTION_KEY_VOLVER, void 0);
|
|
454
|
-
}
|
|
455
|
-
function useModifiers(prefix, modifiers, others) {
|
|
456
|
-
return computed(() => {
|
|
457
|
-
const toReturn = {
|
|
458
|
-
[prefix]: true
|
|
459
|
-
};
|
|
460
|
-
const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : modifiers?.value;
|
|
461
|
-
if (modifiersArray) {
|
|
462
|
-
if (Array.isArray(modifiersArray)) {
|
|
463
|
-
modifiersArray.forEach((modifier) => {
|
|
464
|
-
if (modifier) {
|
|
465
|
-
toReturn[`${prefix}--${modifier}`] = true;
|
|
466
|
-
}
|
|
467
|
-
});
|
|
468
|
-
}
|
|
469
|
-
}
|
|
470
|
-
if (others) {
|
|
471
|
-
Object.keys(others.value).forEach((key) => {
|
|
472
|
-
toReturn[`${prefix}--${key}`] = unref(others.value[key]);
|
|
473
|
-
});
|
|
474
|
-
}
|
|
475
|
-
return toReturn;
|
|
476
|
-
});
|
|
477
|
-
}
|
|
478
|
-
const __default__$1 = {
|
|
479
|
-
name: "VvIcon"
|
|
480
|
-
};
|
|
481
|
-
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
482
|
-
...__default__$1,
|
|
483
|
-
props: /* @__PURE__ */ mergeDefaults({
|
|
484
|
-
name: {},
|
|
485
|
-
color: {},
|
|
486
|
-
width: {},
|
|
487
|
-
height: {},
|
|
488
|
-
provider: {},
|
|
489
|
-
prefix: {},
|
|
490
|
-
src: {},
|
|
491
|
-
horizontalFlip: { type: Boolean },
|
|
492
|
-
verticalFlip: { type: Boolean },
|
|
493
|
-
flip: {},
|
|
494
|
-
mode: {},
|
|
495
|
-
inline: { type: Boolean },
|
|
496
|
-
rotate: {},
|
|
497
|
-
onLoad: { type: Function },
|
|
498
|
-
svg: {},
|
|
499
|
-
modifiers: {}
|
|
500
|
-
}, VvIconPropsDefaults),
|
|
501
|
-
setup(__props) {
|
|
502
|
-
const props = __props;
|
|
503
|
-
const hasRotate = computed(() => {
|
|
504
|
-
if (typeof props.rotate === "string") {
|
|
505
|
-
return Number.parseFloat(props.rotate);
|
|
506
|
-
}
|
|
507
|
-
return props.rotate;
|
|
508
|
-
});
|
|
509
|
-
const show = ref(true);
|
|
510
|
-
const volver = useVolver();
|
|
511
|
-
const { modifiers } = toRefs(props);
|
|
512
|
-
const bemCssClasses = useModifiers("vv-icon", modifiers);
|
|
513
|
-
const provider = computed(() => {
|
|
514
|
-
return props.provider || volver?.iconsProvider;
|
|
515
|
-
});
|
|
516
|
-
const icon = computed(() => {
|
|
517
|
-
const name = props.name ?? "";
|
|
518
|
-
const iconName = `@${provider.value}:${props.prefix}:${name}`;
|
|
519
|
-
if (iconLoaded(iconName)) {
|
|
520
|
-
return iconName;
|
|
521
|
-
}
|
|
522
|
-
const iconsCollection = volver?.iconsCollections.find(
|
|
523
|
-
(iconsCollection2) => {
|
|
524
|
-
const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
|
|
525
|
-
return iconLoaded(icon2);
|
|
526
|
-
}
|
|
527
|
-
);
|
|
528
|
-
if (iconsCollection) {
|
|
529
|
-
return `@${provider.value}:${iconsCollection.prefix}:${name}`;
|
|
530
|
-
}
|
|
531
|
-
return name;
|
|
532
|
-
});
|
|
533
|
-
function getSvgContent(svg) {
|
|
534
|
-
let dom;
|
|
535
|
-
if (typeof window === "undefined") {
|
|
536
|
-
const { JSDOM } = require("jsdom");
|
|
537
|
-
dom = new JSDOM().window;
|
|
538
|
-
}
|
|
539
|
-
const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
|
|
540
|
-
const svgDomString = domParser.parseFromString(svg, "text/html");
|
|
541
|
-
const svgEl = svgDomString.querySelector("svg");
|
|
542
|
-
return svgEl;
|
|
543
|
-
}
|
|
544
|
-
function addIconFromSvg(svg) {
|
|
545
|
-
const svgContentEl = getSvgContent(svg);
|
|
546
|
-
const svgContent = svgContentEl?.innerHTML.trim() || "";
|
|
547
|
-
if (svgContentEl && svgContent) {
|
|
548
|
-
addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
|
|
549
|
-
body: svgContent,
|
|
550
|
-
// Set height and width from svg content
|
|
551
|
-
height: svgContentEl.viewBox.baseVal.height,
|
|
552
|
-
width: svgContentEl.viewBox.baseVal.width
|
|
553
|
-
});
|
|
554
|
-
}
|
|
555
|
-
}
|
|
556
|
-
if (volver) {
|
|
557
|
-
if (props.src && !iconLoaded(`@${provider.value}:${props.prefix}:${props.name}`)) {
|
|
558
|
-
show.value = false;
|
|
559
|
-
volver.fetchIcon(props.src).then((svg) => {
|
|
560
|
-
if (svg) {
|
|
561
|
-
addIconFromSvg(svg);
|
|
562
|
-
show.value = true;
|
|
563
|
-
}
|
|
564
|
-
}).catch((e) => {
|
|
565
|
-
throw new Error(`Error during fetch icon: ${e?.message}`);
|
|
566
|
-
});
|
|
567
|
-
}
|
|
568
|
-
}
|
|
569
|
-
if (props.svg) {
|
|
570
|
-
addIconFromSvg(props.svg);
|
|
571
|
-
}
|
|
572
|
-
return (_ctx, _cache) => {
|
|
573
|
-
return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
|
|
574
|
-
key: 0,
|
|
575
|
-
class: unref(bemCssClasses)
|
|
576
|
-
}, {
|
|
577
|
-
inline: __props.inline,
|
|
578
|
-
width: __props.width,
|
|
579
|
-
height: __props.height,
|
|
580
|
-
horizontalFlip: __props.horizontalFlip,
|
|
581
|
-
verticalFlip: __props.verticalFlip,
|
|
582
|
-
flip: __props.flip,
|
|
583
|
-
rotate: unref(hasRotate),
|
|
584
|
-
color: __props.color,
|
|
585
|
-
icon: unref(icon)
|
|
586
|
-
}, { onLoad: __props.onLoad }), null, 16, ["class", "onLoad"])) : createCommentVNode("v-if", true);
|
|
587
|
-
};
|
|
588
|
-
}
|
|
589
|
-
});
|
|
590
|
-
function useComponentIcon(icon, iconPosition) {
|
|
591
|
-
const hasIcon = computed(() => {
|
|
592
|
-
if (typeof icon?.value === "string") {
|
|
593
|
-
return { name: icon?.value };
|
|
594
|
-
}
|
|
595
|
-
return icon?.value;
|
|
596
|
-
});
|
|
597
|
-
const hasIconBefore = computed(
|
|
598
|
-
() => iconPosition?.value === Position.before ? hasIcon.value : void 0
|
|
599
|
-
);
|
|
600
|
-
const hasIconAfter = computed(
|
|
601
|
-
() => iconPosition?.value === Position.after ? hasIcon.value : void 0
|
|
602
|
-
);
|
|
603
|
-
const hasIconLeft = computed(
|
|
604
|
-
() => iconPosition?.value === Side.left ? hasIcon.value : void 0
|
|
605
|
-
);
|
|
606
|
-
const hasIconRight = computed(
|
|
607
|
-
() => iconPosition?.value === Side.right ? hasIcon.value : void 0
|
|
608
|
-
);
|
|
609
|
-
const hasIconTop = computed(
|
|
610
|
-
() => iconPosition?.value === Side.top ? hasIcon.value : void 0
|
|
611
|
-
);
|
|
612
|
-
const hasIconBottom = computed(
|
|
613
|
-
() => iconPosition?.value === Side.bottom ? hasIcon.value : void 0
|
|
614
|
-
);
|
|
615
|
-
return {
|
|
616
|
-
hasIcon,
|
|
617
|
-
hasIconLeft,
|
|
618
|
-
hasIconRight,
|
|
619
|
-
hasIconTop,
|
|
620
|
-
hasIconBottom,
|
|
621
|
-
hasIconBefore,
|
|
622
|
-
hasIconAfter
|
|
623
|
-
};
|
|
624
|
-
}
|
|
625
|
-
const VvInputClearAction = defineComponent({
|
|
626
|
-
components: {
|
|
627
|
-
VvIcon: _sfc_main$1
|
|
628
|
-
},
|
|
629
|
-
props: {
|
|
630
|
-
inputType: {
|
|
631
|
-
type: String,
|
|
632
|
-
default: "input-text"
|
|
633
|
-
},
|
|
634
|
-
disabled: {
|
|
635
|
-
type: Boolean,
|
|
636
|
-
default: false
|
|
637
|
-
},
|
|
638
|
-
label: {
|
|
639
|
-
type: String,
|
|
640
|
-
default: "Clear"
|
|
641
|
-
},
|
|
642
|
-
icon: {
|
|
643
|
-
type: [String, Object],
|
|
644
|
-
default: "close"
|
|
645
|
-
}
|
|
646
|
-
},
|
|
647
|
-
emits: ["clear"],
|
|
648
|
-
setup(props, { emit }) {
|
|
649
|
-
const { hasIcon } = useComponentIcon(computed(() => props.icon));
|
|
650
|
-
function onClick(e) {
|
|
651
|
-
e?.stopPropagation();
|
|
652
|
-
if (!props.disabled) {
|
|
653
|
-
emit("clear");
|
|
654
|
-
}
|
|
655
|
-
}
|
|
656
|
-
return {
|
|
657
|
-
hasIcon,
|
|
658
|
-
onClick
|
|
659
|
-
};
|
|
660
|
-
},
|
|
661
|
-
render() {
|
|
662
|
-
const icon = this.hasIcon ? h(_sfc_main$1, {
|
|
663
|
-
...this.hasIcon,
|
|
664
|
-
class: `vv-${this.inputType}__icon`
|
|
665
|
-
}) : void 0;
|
|
666
|
-
return h(
|
|
667
|
-
"button",
|
|
668
|
-
{
|
|
669
|
-
disabled: this.disabled,
|
|
670
|
-
class: `vv-${this.inputType}__action`,
|
|
671
|
-
ariaLabel: this.label,
|
|
672
|
-
type: "button",
|
|
673
|
-
onClick: this.onClick
|
|
674
|
-
},
|
|
675
|
-
icon
|
|
676
|
-
);
|
|
677
|
-
}
|
|
678
|
-
});
|
|
679
|
-
function useDefaults(componentName, propsDefinition, props) {
|
|
680
|
-
const volver = useVolver();
|
|
681
|
-
const volverComponentDefaults = computed(() => {
|
|
682
|
-
if (!volver || !volver.defaults.value?.[componentName]) {
|
|
683
|
-
return void 0;
|
|
684
|
-
}
|
|
685
|
-
return volver.defaults.value[componentName];
|
|
686
|
-
});
|
|
687
|
-
return computed(() => {
|
|
688
|
-
if (volverComponentDefaults.value === void 0) {
|
|
689
|
-
return props;
|
|
690
|
-
}
|
|
691
|
-
const componentDefaults = volverComponentDefaults.value;
|
|
692
|
-
const simplifiedPropsDefinition = propsDefinition;
|
|
693
|
-
const simplifiedProps = props;
|
|
694
|
-
return Object.keys(simplifiedPropsDefinition).reduce((acc, key) => {
|
|
695
|
-
const propValue = simplifiedProps[key];
|
|
696
|
-
acc[key] = propValue;
|
|
697
|
-
if (key in componentDefaults) {
|
|
698
|
-
if (Array.isArray(simplifiedPropsDefinition[key])) {
|
|
699
|
-
const typeArray = simplifiedPropsDefinition[key];
|
|
700
|
-
if (typeArray.length) {
|
|
701
|
-
const typeFunction = typeArray[0];
|
|
702
|
-
if (typeFunction === propValue) {
|
|
703
|
-
acc[key] = componentDefaults[key];
|
|
704
|
-
}
|
|
705
|
-
}
|
|
706
|
-
}
|
|
707
|
-
if (typeof simplifiedPropsDefinition[key] === "function") {
|
|
708
|
-
const typeFunction = simplifiedPropsDefinition[key];
|
|
709
|
-
if (typeFunction() === propValue) {
|
|
710
|
-
acc[key] = componentDefaults[key];
|
|
711
|
-
}
|
|
712
|
-
}
|
|
713
|
-
if (typeof simplifiedPropsDefinition[key] === "object") {
|
|
714
|
-
let defaultValue = simplifiedPropsDefinition[key].default;
|
|
715
|
-
if (typeof defaultValue === "function") {
|
|
716
|
-
defaultValue = defaultValue();
|
|
717
|
-
}
|
|
718
|
-
if (typeof defaultValue === "object") {
|
|
719
|
-
if (JSON.stringify(defaultValue) === JSON.stringify(propValue)) {
|
|
720
|
-
acc[key] = componentDefaults[key];
|
|
721
|
-
}
|
|
722
|
-
} else if (defaultValue === propValue) {
|
|
723
|
-
acc[key] = componentDefaults[key];
|
|
724
|
-
}
|
|
725
|
-
}
|
|
726
|
-
}
|
|
727
|
-
return acc;
|
|
728
|
-
}, {});
|
|
729
|
-
});
|
|
730
|
-
}
|
|
731
|
-
function useComponentFocus(inputTemplateRef, emit) {
|
|
732
|
-
const { focused } = useFocus(inputTemplateRef);
|
|
733
|
-
watch(focused, (newValue) => {
|
|
734
|
-
emit(newValue ? "focus" : "blur", unref(inputTemplateRef));
|
|
735
|
-
});
|
|
736
|
-
return {
|
|
737
|
-
focused
|
|
738
|
-
};
|
|
739
|
-
}
|
|
740
|
-
function useUniqueId(id) {
|
|
741
|
-
return computed(() => String(id?.value || useId()));
|
|
742
|
-
}
|
|
743
|
-
function useOptions(props) {
|
|
744
|
-
const { options, labelKey, valueKey, disabledKey } = toRefs(props);
|
|
745
|
-
const getOptionLabel = (option) => {
|
|
746
|
-
if (typeof option === "string") {
|
|
747
|
-
return option;
|
|
748
|
-
}
|
|
749
|
-
if (typeof labelKey.value === "function") {
|
|
750
|
-
return labelKey.value(option);
|
|
751
|
-
}
|
|
752
|
-
return String(
|
|
753
|
-
labelKey.value ? getProperty(option, labelKey.value) : option
|
|
754
|
-
);
|
|
755
|
-
};
|
|
756
|
-
const getOptionValue = (option) => {
|
|
757
|
-
if (typeof option === "string") {
|
|
758
|
-
return option;
|
|
759
|
-
}
|
|
760
|
-
if (typeof valueKey.value === "function") {
|
|
761
|
-
return valueKey.value(option);
|
|
762
|
-
}
|
|
763
|
-
return valueKey.value ? getProperty(option, valueKey.value) : option;
|
|
764
|
-
};
|
|
765
|
-
const isOptionDisabled = (option) => {
|
|
766
|
-
if (typeof option === "string") {
|
|
767
|
-
return false;
|
|
768
|
-
}
|
|
769
|
-
if (typeof disabledKey.value === "function") {
|
|
770
|
-
return disabledKey.value(option);
|
|
771
|
-
}
|
|
772
|
-
return disabledKey.value ? Boolean(getProperty(option, disabledKey.value)) : false;
|
|
773
|
-
};
|
|
774
|
-
const getOptionGrouped = (option) => {
|
|
775
|
-
if (typeof option == "string") {
|
|
776
|
-
return [];
|
|
777
|
-
}
|
|
778
|
-
if (typeof option === "object" && option && "options" in option) {
|
|
779
|
-
return option.options;
|
|
780
|
-
}
|
|
781
|
-
return [];
|
|
782
|
-
};
|
|
783
|
-
return {
|
|
784
|
-
options,
|
|
785
|
-
getOptionLabel,
|
|
786
|
-
getOptionValue,
|
|
787
|
-
isOptionDisabled,
|
|
788
|
-
getOptionGrouped
|
|
789
|
-
};
|
|
790
|
-
}
|
|
791
|
-
const _hoisted_1 = ["for"];
|
|
792
|
-
const _hoisted_2 = { class: "vv-select__wrapper" };
|
|
793
|
-
const _hoisted_3 = {
|
|
794
|
-
key: 0,
|
|
795
|
-
class: "vv-select__input-before"
|
|
796
|
-
};
|
|
797
|
-
const _hoisted_4 = { class: "vv-select__inner" };
|
|
798
|
-
const _hoisted_5 = ["id"];
|
|
799
|
-
const _hoisted_6 = ["disabled", "hidden"];
|
|
800
|
-
const _hoisted_7 = ["disabled", "value"];
|
|
801
|
-
const _hoisted_8 = ["disabled", "label"];
|
|
802
|
-
const _hoisted_9 = ["disabled", "value"];
|
|
803
|
-
const _hoisted_10 = {
|
|
804
|
-
key: 2,
|
|
805
|
-
class: "vv-select__input-after"
|
|
806
|
-
};
|
|
807
|
-
const __default__ = {
|
|
808
|
-
name: "VvSelect"
|
|
809
|
-
};
|
|
810
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
811
|
-
...__default__,
|
|
812
|
-
props: useVvSelectProps(),
|
|
813
|
-
emits: ["update:modelValue", "focus", "blur", "clear"],
|
|
814
|
-
setup(__props, { emit: __emit }) {
|
|
815
|
-
const props = __props;
|
|
816
|
-
const emit = __emit;
|
|
817
|
-
const slots = useSlots();
|
|
818
|
-
const VvSelectProps2 = useVvSelectProps();
|
|
819
|
-
const propsDefaults = useDefaults(
|
|
820
|
-
"VvSelect",
|
|
821
|
-
VvSelectProps2,
|
|
822
|
-
props
|
|
823
|
-
);
|
|
824
|
-
const selectEl = ref();
|
|
825
|
-
const {
|
|
826
|
-
HintSlot,
|
|
827
|
-
hasHintLabelOrSlot,
|
|
828
|
-
hasInvalidLabelOrSlot,
|
|
829
|
-
hintSlotScope
|
|
830
|
-
} = HintSlotFactory(propsDefaults, slots);
|
|
831
|
-
const { focused } = useComponentFocus(selectEl, emit);
|
|
832
|
-
function isGroup(option) {
|
|
833
|
-
if (typeof option === "string") {
|
|
834
|
-
return false;
|
|
835
|
-
}
|
|
836
|
-
return option.options?.length;
|
|
837
|
-
}
|
|
838
|
-
const {
|
|
839
|
-
id,
|
|
840
|
-
modifiers,
|
|
841
|
-
disabled,
|
|
842
|
-
readonly,
|
|
843
|
-
loading,
|
|
844
|
-
icon,
|
|
845
|
-
iconPosition,
|
|
846
|
-
invalid,
|
|
847
|
-
valid,
|
|
848
|
-
floating,
|
|
849
|
-
multiple
|
|
850
|
-
} = toRefs(props);
|
|
851
|
-
const hasId = useUniqueId(id);
|
|
852
|
-
const hasHintId = computed(() => `${hasId.value}-hint`);
|
|
853
|
-
const isDisabledOrReadonly = computed(() => props.disabled || props.readonly);
|
|
854
|
-
const hasTabindex = computed(() => {
|
|
855
|
-
return isDisabledOrReadonly.value ? -1 : props.tabindex;
|
|
856
|
-
});
|
|
857
|
-
const localModelValue = computed({
|
|
858
|
-
get: () => {
|
|
859
|
-
return props.modelValue;
|
|
860
|
-
},
|
|
861
|
-
set: (newValue) => {
|
|
862
|
-
if (Array.isArray(newValue)) {
|
|
863
|
-
newValue = newValue.filter((item) => item !== void 0);
|
|
864
|
-
if (newValue.length === 0 && !props.unselectable && selectEl.value) {
|
|
865
|
-
selectEl.value.value = String(props.modelValue);
|
|
866
|
-
return;
|
|
867
|
-
}
|
|
868
|
-
}
|
|
869
|
-
emit("update:modelValue", newValue);
|
|
870
|
-
}
|
|
871
|
-
});
|
|
872
|
-
const isDirty = computed(() => {
|
|
873
|
-
if (Array.isArray(localModelValue.value)) {
|
|
874
|
-
return localModelValue.value.length > 0;
|
|
875
|
-
}
|
|
876
|
-
return localModelValue.value !== void 0 && localModelValue.value !== null;
|
|
877
|
-
});
|
|
878
|
-
const isUnselectable = computed(() => {
|
|
879
|
-
if (isDisabledOrReadonly.value) {
|
|
880
|
-
return false;
|
|
881
|
-
}
|
|
882
|
-
return props.unselectable;
|
|
883
|
-
});
|
|
884
|
-
const isVisible = useElementVisibility(selectEl);
|
|
885
|
-
watch(isVisible, (newValue) => {
|
|
886
|
-
if (newValue && props.autofocus) {
|
|
887
|
-
focused.value = true;
|
|
888
|
-
}
|
|
889
|
-
});
|
|
890
|
-
const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
|
|
891
|
-
const isInvalid = computed(() => {
|
|
892
|
-
if (props.invalid === true) {
|
|
893
|
-
return true;
|
|
894
|
-
}
|
|
895
|
-
if (props.valid === true) {
|
|
896
|
-
return false;
|
|
897
|
-
}
|
|
898
|
-
return void 0;
|
|
899
|
-
});
|
|
900
|
-
const bemCssClasses = useModifiers(
|
|
901
|
-
"vv-select",
|
|
902
|
-
modifiers,
|
|
903
|
-
computed(() => ({
|
|
904
|
-
"valid": valid.value,
|
|
905
|
-
"invalid": invalid.value,
|
|
906
|
-
"loading": loading.value,
|
|
907
|
-
"disabled": disabled.value,
|
|
908
|
-
"readonly": readonly.value,
|
|
909
|
-
"icon-before": hasIconBefore.value !== void 0,
|
|
910
|
-
"icon-after": hasIconAfter.value !== void 0,
|
|
911
|
-
"dirty": isDirty.value,
|
|
912
|
-
"focus": focused.value && !isDisabledOrReadonly.value,
|
|
913
|
-
"floating": floating.value,
|
|
914
|
-
"multiple": multiple.value
|
|
915
|
-
}))
|
|
916
|
-
);
|
|
917
|
-
const {
|
|
918
|
-
getOptionLabel,
|
|
919
|
-
getOptionValue,
|
|
920
|
-
isOptionDisabled,
|
|
921
|
-
getOptionGrouped
|
|
922
|
-
} = useOptions(props);
|
|
923
|
-
watch(
|
|
924
|
-
() => props.options,
|
|
925
|
-
(newValue) => {
|
|
926
|
-
if (newValue?.length && props.autoselectFirst && !isDirty.value) {
|
|
927
|
-
const firstOptionValue = getOptionValue(newValue[0]);
|
|
928
|
-
localModelValue.value = props.multiple ? [firstOptionValue] : firstOptionValue;
|
|
929
|
-
}
|
|
930
|
-
},
|
|
931
|
-
{ immediate: true }
|
|
932
|
-
);
|
|
933
|
-
function onClear() {
|
|
934
|
-
if (Array.isArray(localModelValue.value)) {
|
|
935
|
-
localModelValue.value = [];
|
|
936
|
-
} else {
|
|
937
|
-
localModelValue.value = void 0;
|
|
938
|
-
}
|
|
939
|
-
emit("clear");
|
|
940
|
-
}
|
|
941
|
-
const hasAttrs = computed(() => {
|
|
942
|
-
return {
|
|
943
|
-
"name": props.name,
|
|
944
|
-
"tabindex": hasTabindex.value,
|
|
945
|
-
"disabled": isDisabledOrReadonly.value,
|
|
946
|
-
"required": props.required,
|
|
947
|
-
"size": props.size,
|
|
948
|
-
"autocomplete": props.autocomplete,
|
|
949
|
-
"multiple": props.multiple,
|
|
950
|
-
"aria-invalid": isInvalid.value,
|
|
951
|
-
"aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
|
|
952
|
-
"aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
|
|
953
|
-
};
|
|
954
|
-
});
|
|
955
|
-
const slotProps = computed(() => ({
|
|
956
|
-
valid: props.valid,
|
|
957
|
-
invalid: props.invalid,
|
|
958
|
-
modelValue: props.modelValue
|
|
959
|
-
}));
|
|
960
|
-
return (_ctx, _cache) => {
|
|
961
|
-
return openBlock(), createElementBlock(
|
|
962
|
-
"div",
|
|
963
|
-
{
|
|
964
|
-
class: normalizeClass(unref(bemCssClasses))
|
|
965
|
-
},
|
|
966
|
-
[
|
|
967
|
-
_ctx.label ? (openBlock(), createElementBlock("label", {
|
|
968
|
-
key: 0,
|
|
969
|
-
for: unref(hasId)
|
|
970
|
-
}, toDisplayString(_ctx.label), 9, _hoisted_1)) : createCommentVNode("v-if", true),
|
|
971
|
-
createElementVNode("div", _hoisted_2, [
|
|
972
|
-
_ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3, [
|
|
973
|
-
renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
|
|
974
|
-
])) : createCommentVNode("v-if", true),
|
|
975
|
-
createElementVNode("div", _hoisted_4, [
|
|
976
|
-
unref(hasIconBefore) ? (openBlock(), createBlock(
|
|
977
|
-
_sfc_main$1,
|
|
978
|
-
mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-select__icon" }),
|
|
979
|
-
null,
|
|
980
|
-
16
|
|
981
|
-
/* FULL_PROPS */
|
|
982
|
-
)) : createCommentVNode("v-if", true),
|
|
983
|
-
withDirectives(createElementVNode("select", mergeProps({
|
|
984
|
-
id: unref(hasId),
|
|
985
|
-
ref_key: "selectEl",
|
|
986
|
-
ref: selectEl
|
|
987
|
-
}, unref(hasAttrs), {
|
|
988
|
-
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
|
|
989
|
-
}), [
|
|
990
|
-
_ctx.placeholder ? (openBlock(), createElementBlock("option", {
|
|
991
|
-
key: 0,
|
|
992
|
-
value: void 0,
|
|
993
|
-
disabled: !unref(isUnselectable),
|
|
994
|
-
hidden: !unref(isUnselectable)
|
|
995
|
-
}, toDisplayString(_ctx.placeholder), 9, _hoisted_6)) : createCommentVNode("v-if", true),
|
|
996
|
-
(openBlock(true), createElementBlock(
|
|
997
|
-
Fragment,
|
|
998
|
-
null,
|
|
999
|
-
renderList(_ctx.options, (option, index) => {
|
|
1000
|
-
return openBlock(), createElementBlock(
|
|
1001
|
-
Fragment,
|
|
1002
|
-
null,
|
|
1003
|
-
[
|
|
1004
|
-
!isGroup(option) ? (openBlock(), createElementBlock("option", {
|
|
1005
|
-
key: index,
|
|
1006
|
-
disabled: unref(isOptionDisabled)(option),
|
|
1007
|
-
value: unref(getOptionValue)(option)
|
|
1008
|
-
}, toDisplayString(unref(getOptionLabel)(option)), 9, _hoisted_7)) : (openBlock(), createElementBlock("optgroup", {
|
|
1009
|
-
key: `group-${index}`,
|
|
1010
|
-
disabled: unref(isOptionDisabled)(option),
|
|
1011
|
-
label: unref(getOptionLabel)(option)
|
|
1012
|
-
}, [
|
|
1013
|
-
(openBlock(true), createElementBlock(
|
|
1014
|
-
Fragment,
|
|
1015
|
-
null,
|
|
1016
|
-
renderList(unref(getOptionGrouped)(option), (item, i) => {
|
|
1017
|
-
return openBlock(), createElementBlock("option", {
|
|
1018
|
-
key: `group-${index}-item-${i}`,
|
|
1019
|
-
disabled: unref(isOptionDisabled)(item),
|
|
1020
|
-
value: unref(getOptionValue)(item)
|
|
1021
|
-
}, toDisplayString(unref(getOptionLabel)(item)), 9, _hoisted_9);
|
|
1022
|
-
}),
|
|
1023
|
-
128
|
|
1024
|
-
/* KEYED_FRAGMENT */
|
|
1025
|
-
))
|
|
1026
|
-
], 8, _hoisted_8))
|
|
1027
|
-
],
|
|
1028
|
-
64
|
|
1029
|
-
/* STABLE_FRAGMENT */
|
|
1030
|
-
);
|
|
1031
|
-
}),
|
|
1032
|
-
256
|
|
1033
|
-
/* UNKEYED_FRAGMENT */
|
|
1034
|
-
))
|
|
1035
|
-
], 16, _hoisted_5), [
|
|
1036
|
-
[vModelSelect, unref(localModelValue)]
|
|
1037
|
-
]),
|
|
1038
|
-
unref(hasIconAfter) ? (openBlock(), createBlock(
|
|
1039
|
-
_sfc_main$1,
|
|
1040
|
-
mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
|
|
1041
|
-
null,
|
|
1042
|
-
16
|
|
1043
|
-
/* FULL_PROPS */
|
|
1044
|
-
)) : createCommentVNode("v-if", true)
|
|
1045
|
-
]),
|
|
1046
|
-
unref(isUnselectable) && unref(propsDefaults).showClearAction ? (openBlock(), createBlock(unref(VvInputClearAction), {
|
|
1047
|
-
key: 1,
|
|
1048
|
-
"input-type": "select",
|
|
1049
|
-
label: _ctx.labelClear,
|
|
1050
|
-
icon: _ctx.iconClear,
|
|
1051
|
-
disabled: !unref(isDirty),
|
|
1052
|
-
onClear
|
|
1053
|
-
}, null, 8, ["label", "icon", "disabled"])) : createCommentVNode("v-if", true),
|
|
1054
|
-
_ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_10, [
|
|
1055
|
-
renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
|
|
1056
|
-
])) : createCommentVNode("v-if", true)
|
|
1057
|
-
]),
|
|
1058
|
-
createVNode(unref(HintSlot), {
|
|
1059
|
-
id: unref(hasHintId),
|
|
1060
|
-
class: "vv-select__hint"
|
|
1061
|
-
}, createSlots({
|
|
1062
|
-
_: 2
|
|
1063
|
-
/* DYNAMIC */
|
|
1064
|
-
}, [
|
|
1065
|
-
_ctx.$slots.hint ? {
|
|
1066
|
-
name: "hint",
|
|
1067
|
-
fn: withCtx(() => [
|
|
1068
|
-
renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
1069
|
-
]),
|
|
1070
|
-
key: "0"
|
|
1071
|
-
} : void 0,
|
|
1072
|
-
_ctx.$slots.loading ? {
|
|
1073
|
-
name: "loading",
|
|
1074
|
-
fn: withCtx(() => [
|
|
1075
|
-
renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
1076
|
-
]),
|
|
1077
|
-
key: "1"
|
|
1078
|
-
} : void 0,
|
|
1079
|
-
_ctx.$slots.valid ? {
|
|
1080
|
-
name: "valid",
|
|
1081
|
-
fn: withCtx(() => [
|
|
1082
|
-
renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
1083
|
-
]),
|
|
1084
|
-
key: "2"
|
|
1085
|
-
} : void 0,
|
|
1086
|
-
_ctx.$slots.invalid ? {
|
|
1087
|
-
name: "invalid",
|
|
1088
|
-
fn: withCtx(() => [
|
|
1089
|
-
renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
1090
|
-
]),
|
|
1091
|
-
key: "3"
|
|
1092
|
-
} : void 0
|
|
1093
|
-
]), 1032, ["id"])
|
|
1094
|
-
],
|
|
1095
|
-
2
|
|
1096
|
-
/* CLASS */
|
|
1097
|
-
);
|
|
1098
|
-
};
|
|
1099
|
-
}
|
|
1100
|
-
});
|
|
1101
|
-
export {
|
|
1102
|
-
_sfc_main as default
|
|
1103
|
-
};
|
|
1
|
+
import{computed as e,isRef as l,defineComponent as t,h as a,inject as i,unref as o,mergeDefaults as n,ref as r,toRefs as u,createBlock as s,createCommentVNode as d,openBlock as v,mergeProps as c,watch as f,useId as p,useSlots as b,createElementBlock as y,normalizeClass as h,createElementVNode as g,createVNode as m,toDisplayString as S,renderSlot as L,normalizeProps as $,guardReactiveProps as O,withDirectives as B,Fragment as k,renderList as V,vModelSelect as A,createSlots as _,withCtx as w}from"vue";import{iconLoaded as I,Icon as x,addIcon as F}from"@iconify/vue";import{useFocus as C,useElementVisibility as j}from"@vueuse/core";import{getProperty as N}from"dot-prop";const H={prefix:"normal"};var q=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(q||{}),z=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(z||{}),K=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(K||{}),P=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(P||{}),D=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(D||{});const E=/* @__PURE__ */Symbol.for("volver"),T={valid:{type:Boolean,default:!1},validLabel:{type:[String,Array],default:void 0}},M={invalid:{type:Boolean,default:!1},invalidLabel:{type:[String,Array],default:void 0}},J={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},G={disabled:{type:Boolean,default:!1}},R={showClearAction:{type:Boolean,default:!1},iconClear:{type:[String,Object],default:"close"},labelClear:{type:String,default:"Clear"}},U={label:{type:[String,Number],default:void 0}},Q={readonly:{type:Boolean,default:!1}},W={modifiers:{type:[String,Array],default:void 0}},X={hintLabel:{type:String,default:""}},Y={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}},Z={icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:K.before,validation:e=>Object.values(K).includes(e)}},ee={tabindex:{type:[String,Number],default:0}},le={floating:{type:Boolean,default:!1}},te={unselectable:{type:Boolean,default:!0}},ae={id:[String,Number]};z.bottom;const ie={...ae,name:{type:String,required:!0}},oe={autofocus:{type:Boolean,default:!1}},ne={autocomplete:{type:String,default:"off"}};P.button,D.button,q.local;const re={...ie,...oe,...ne,...ee,...T,...M,...X,...J,...G,...Q,...W,...Y,...Z,...le,...te,...U,...R,multiple:Boolean,required:Boolean,size:[String,Number],modelValue:{type:[String,Number,Boolean,Object,Array],default:void 0},autoselectFirst:{type:Boolean,default:!1},placeholder:String};function ue(){return{...re,options:{...re.options,type:Array,default:()=>[]}}}function se(e){return Array.isArray(e)?e.filter(e=>"string"==typeof e).join(" "):e}function de(){return i(E,void 0)}function ve(l,t,a){return e(()=>{const e={[l]:!0},i="string"==typeof t?.value?t.value.split(" "):t?.value;return i&&Array.isArray(i)&&i.forEach(t=>{t&&(e[`${l}--${t}`]=!0)}),a&&Object.keys(a.value).forEach(t=>{e[`${l}--${t}`]=o(a.value[t])}),e})}const ce=/* @__PURE__ */t({name:"VvIcon",props:/* @__PURE__ */n({name:{},color:{},width:{},height:{},provider:{},prefix:{},src:{},horizontalFlip:{type:Boolean},verticalFlip:{type:Boolean},flip:{},mode:{},inline:{type:Boolean},rotate:{},onLoad:{type:Function},svg:{},modifiers:{}},H),setup(l){const t=l,a=e(()=>"string"==typeof t.rotate?Number.parseFloat(t.rotate):t.rotate),i=r(!0),n=de(),{modifiers:f}=u(t),p=ve("vv-icon",f),b=e(()=>t.provider||n?.iconsProvider),y=e(()=>{const e=t.name??"",l=`@${b.value}:${t.prefix}:${e}`;if(I(l))return l;const a=n?.iconsCollections.find(l=>{const t=`@${b.value}:${l.prefix}:${e}`;return I(t)});return a?`@${b.value}:${a.prefix}:${e}`:e});function h(e){const l=function(e){let l;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");l=(new e).window}return(l?new l.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),a=l?.innerHTML.trim()||"";l&&a&&F(`@${b.value}:${t.prefix}:${t.name}`,{body:a,height:l.viewBox.baseVal.height,width:l.viewBox.baseVal.width})}return n&&t.src&&!I(`@${b.value}:${t.prefix}:${t.name}`)&&(i.value=!1,n.fetchIcon(t.src).then(e=>{e&&(h(e),i.value=!0)}).catch(e=>{throw new Error(`Error during fetch icon: ${e?.message}`)})),t.svg&&h(t.svg),(e,t)=>o(i)?(v(),s(o(x),c({key:0,class:o(p)},{inline:l.inline,width:l.width,height:l.height,horizontalFlip:l.horizontalFlip,verticalFlip:l.verticalFlip,flip:l.flip,rotate:o(a),color:l.color,icon:o(y)},{onLoad:l.onLoad}),null,16,["class","onLoad"])):d("v-if",!0)}});function fe(l,t){const a=e(()=>"string"==typeof l?.value?{name:l?.value}:l?.value),i=e(()=>t?.value===K.before?a.value:void 0),o=e(()=>t?.value===K.after?a.value:void 0),n=e(()=>t?.value===z.left?a.value:void 0),r=e(()=>t?.value===z.right?a.value:void 0),u=e(()=>t?.value===z.top?a.value:void 0),s=e(()=>t?.value===z.bottom?a.value:void 0);return{hasIcon:a,hasIconLeft:n,hasIconRight:r,hasIconTop:u,hasIconBottom:s,hasIconBefore:i,hasIconAfter:o}}const pe=t({components:{VvIcon:ce},props:{inputType:{type:String,default:"input-text"},disabled:{type:Boolean,default:!1},label:{type:String,default:"Clear"},icon:{type:[String,Object],default:"close"}},emits:["clear"],setup(l,{emit:t}){const{hasIcon:a}=fe(e(()=>l.icon));return{hasIcon:a,onClick:function(e){e?.stopPropagation(),l.disabled||t("clear")}}},render(){const e=this.hasIcon?a(ce,{...this.hasIcon,class:`vv-${this.inputType}__icon`}):void 0;return a("button",{disabled:this.disabled,class:`vv-${this.inputType}__action`,ariaLabel:this.label,type:"button",onClick:this.onClick},e)}});const be=["for"],ye={class:"vv-select__wrapper"},he={key:0,class:"vv-select__input-before"},ge={class:"vv-select__inner"},me=["id"],Se=["disabled","hidden"],Le=["disabled","value"],$e=["disabled","label"],Oe=["disabled","value"],Be={key:2,class:"vv-select__input-after"},ke=/* @__PURE__ */t({name:"VvSelect",props:ue(),emits:["update:modelValue","focus","blur","clear"],setup(i,{emit:n}){const I=i,x=n,F=b(),H=function(l,t,a){const i=de(),o=e(()=>{if(i&&i.defaults.value?.[l])return i.defaults.value[l]});return e(()=>{if(void 0===o.value)return a;const e=o.value,l=t,i=a;return Object.keys(l).reduce((t,a)=>{const o=i[a];if(t[a]=o,a in e){if(Array.isArray(l[a])){const i=l[a];i.length&&i[0]===o&&(t[a]=e[a])}if("function"==typeof l[a]&&(0,l[a])()===o&&(t[a]=e[a]),"object"==typeof l[a]){let i=l[a].default;"function"==typeof i&&(i=i()),"object"==typeof i?JSON.stringify(i)===JSON.stringify(o)&&(t[a]=e[a]):i===o&&(t[a]=e[a])}}return t},{})})}("VvSelect",ue(),I),q=r(),{HintSlot:z,hasHintLabelOrSlot:K,hasInvalidLabelOrSlot:P,hintSlotScope:D}=function(i,o){const n=e(()=>l(i)?i.value:i),r=e(()=>se(n.value.invalidLabel)),u=e(()=>se(n.value.validLabel)),s=e(()=>n.value.loadingLabel),d=e(()=>n.value.hintLabel),v=e(()=>Boolean(n.value.loading&&(o.loading||s.value))),c=e(()=>!v.value&&Boolean(n.value.invalid&&(o.invalid||r.value))),f=e(()=>!v.value&&!c.value&&Boolean(n.value.valid&&(o.valid||u.value))),p=e(()=>!v.value&&!c.value&&!f.value&&Boolean(o.hint||d.value)),b=e(()=>c.value||f.value||v.value||p.value),y=e(()=>({modelValue:n.value.modelValue,valid:n.value.valid,invalid:n.value.invalid,loading:n.value.loading})),h=t({name:"HintSlot",props:{tag:{type:String,default:"small"}},setup:()=>({isVisible:b,invalidLabel:r,validLabel:u,loadingLabel:s,hintLabel:d,hasInvalidLabelOrSlot:c,hasValidLabelOrSlot:f,hasLoadingLabelOrSlot:v,hasHintLabelOrSlot:p}),render(){if(this.isVisible){let e;return this.hasInvalidLabelOrSlot&&(e="alert"),this.hasValidLabelOrSlot&&(e="status"),this.hasLoadingLabelOrSlot?a(this.tag,{role:e},this.$slots.loading?.()??this.loadingLabel):this.hasInvalidLabelOrSlot?a(this.tag,{role:e},this.$slots.invalid?.()??this.$slots.invalid??this.invalidLabel):this.hasValidLabelOrSlot?a(this.tag,{role:e},this.$slots.valid?.()??this.validLabel):a(this.tag,{role:e},this.$slots.hint?.()??this.$slots.hint??this.hintLabel)}return null}});return{hasInvalidLabelOrSlot:c,hasHintLabelOrSlot:p,hasValidLabelOrSlot:f,hasLoadingLabelOrSlot:v,hintSlotScope:y,HintSlot:h}}(H,F),{focused:E}=function(e,l){const{focused:t}=C(e);return f(t,t=>{l(t?"focus":"blur",o(e))}),{focused:t}}(q,x);function T(e){return"string"!=typeof e&&e.options?.length}const{id:M,modifiers:J,disabled:G,readonly:R,loading:U,icon:Q,iconPosition:W,invalid:X,valid:Y,floating:Z,multiple:ee}=u(I),le=function(l){return e(()=>String(l?.value||p()))}(M),te=e(()=>`${le.value}-hint`),ae=e(()=>I.disabled||I.readonly),ie=e(()=>ae.value?-1:I.tabindex),oe=e({get:()=>I.modelValue,set:e=>{Array.isArray(e)&&0===(e=e.filter(e=>void 0!==e)).length&&!I.unselectable&&q.value?q.value.value=String(I.modelValue):x("update:modelValue",e)}}),ne=e(()=>Array.isArray(oe.value)?oe.value.length>0:void 0!==oe.value&&null!==oe.value),re=e(()=>!ae.value&&I.unselectable),ke=j(q);f(ke,e=>{e&&I.autofocus&&(E.value=!0)});const{hasIconBefore:Ve,hasIconAfter:Ae}=fe(Q,W),_e=e(()=>!0===I.invalid||!0!==I.valid&&void 0),we=ve("vv-select",J,e(()=>({valid:Y.value,invalid:X.value,loading:U.value,disabled:G.value,readonly:R.value,"icon-before":void 0!==Ve.value,"icon-after":void 0!==Ae.value,dirty:ne.value,focus:E.value&&!ae.value,floating:Z.value,multiple:ee.value}))),{getOptionLabel:Ie,getOptionValue:xe,isOptionDisabled:Fe,getOptionGrouped:Ce}=function(e){const{options:l,labelKey:t,valueKey:a,disabledKey:i}=u(e);return{options:l,getOptionLabel:e=>"string"==typeof e?e:"function"==typeof t.value?t.value(e):String(t.value?N(e,t.value):e),getOptionValue:e=>"string"==typeof e?e:"function"==typeof a.value?a.value(e):a.value?N(e,a.value):e,isOptionDisabled:e=>"string"!=typeof e&&("function"==typeof i.value?i.value(e):!!i.value&&Boolean(N(e,i.value))),getOptionGrouped:e=>"string"==typeof e?[]:"object"==typeof e&&e&&"options"in e?e.options:[]}}(I);function je(){Array.isArray(oe.value)?oe.value=[]:oe.value=void 0,x("clear")}f(()=>I.options,e=>{if(e?.length&&I.autoselectFirst&&!ne.value){const l=xe(e[0]);oe.value=I.multiple?[l]:l}},{immediate:!0});const Ne=e(()=>({name:I.name,tabindex:ie.value,disabled:ae.value,required:I.required,size:I.size,autocomplete:I.autocomplete,multiple:I.multiple,"aria-invalid":_e.value,"aria-describedby":K.value?te.value:void 0,"aria-errormessage":P.value?te.value:void 0})),He=e(()=>({valid:I.valid,invalid:I.invalid,modelValue:I.modelValue}));return(e,t)=>(v(),y("div",{class:h(o(we))},[e.label?(v(),y("label",{key:0,for:o(le)},S(e.label),9,be)):d("v-if",!0),g("div",ye,[e.$slots.before?(v(),y("div",he,[L(e.$slots,"before",$(O(o(He))))])):d("v-if",!0),g("div",ge,[o(Ve)?(v(),s(ce,c({key:0},o(Ve),{class:"vv-select__icon"}),null,16)):d("v-if",!0),B(g("select",c({id:o(le),ref_key:"selectEl",ref:q},o(Ne),{"onUpdate:modelValue":t[0]||(t[0]=e=>l(oe)?oe.value=e:null)}),[e.placeholder?(v(),y("option",{key:0,value:void 0,disabled:!o(re),hidden:!o(re)},S(e.placeholder),9,Se)):d("v-if",!0),(v(!0),y(k,null,V(e.options,(e,l)=>(v(),y(k,null,[T(e)?(v(),y("optgroup",{key:`group-${l}`,disabled:o(Fe)(e),label:o(Ie)(e)},[(v(!0),y(k,null,V(o(Ce)(e),(e,t)=>(v(),y("option",{key:`group-${l}-item-${t}`,disabled:o(Fe)(e),value:o(xe)(e)},S(o(Ie)(e)),9,Oe))),128))],8,$e)):(v(),y("option",{key:l,disabled:o(Fe)(e),value:o(xe)(e)},S(o(Ie)(e)),9,Le))],64))),256))],16,me),[[A,o(oe)]]),o(Ae)?(v(),s(ce,c({key:1},o(Ae),{class:"vv-select__icon vv-select__icon-after"}),null,16)):d("v-if",!0)]),o(re)&&o(H).showClearAction?(v(),s(o(pe),{key:1,"input-type":"select",label:e.labelClear,icon:e.iconClear,disabled:!o(ne),onClear:je},null,8,["label","icon","disabled"])):d("v-if",!0),e.$slots.after?(v(),y("div",Be,[L(e.$slots,"after",$(O(o(He))))])):d("v-if",!0)]),m(o(z),{id:o(te),class:"vv-select__hint"},_({_:2},[e.$slots.hint?{name:"hint",fn:w(()=>[L(e.$slots,"hint",$(O(o(D))))]),key:"0"}:void 0,e.$slots.loading?{name:"loading",fn:w(()=>[L(e.$slots,"loading",$(O(o(D))))]),key:"1"}:void 0,e.$slots.valid?{name:"valid",fn:w(()=>[L(e.$slots,"valid",$(O(o(D))))]),key:"2"}:void 0,e.$slots.invalid?{name:"invalid",fn:w(()=>[L(e.$slots,"invalid",$(O(o(D))))]),key:"3"}:void 0]),1032,["id"])],2))}});export{ke as default};
|