@volverjs/ui-vue 0.0.11 → 0.0.12
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/VvAccordionGroup/VvAccordionGroup.es.js +2 -702
- package/dist/components/VvAction/VvAction.es.js +1 -302
- package/dist/components/VvAlert/VvAlert.es.js +1 -527
- package/dist/components/VvAlertGroup/VvAlertGroup.es.js +1 -730
- package/dist/components/VvAvatar/VvAvatar.es.js +1 -132
- package/dist/components/VvAvatarGroup/VvAvatarGroup.es.js +1 -250
- package/dist/components/VvBadge/VvBadge.es.js +1 -131
- package/dist/components/VvBreadcrumb/VvBreadcrumb.es.js +1 -410
- package/dist/components/VvButton/VvButton.es.js +1 -882
- package/dist/components/VvButtonGroup/VvButtonGroup.es.js +1 -214
- package/dist/components/VvCard/VvCard.es.js +1 -152
- package/dist/components/VvCheckbox/VvCheckbox.es.js +1 -741
- package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js +1 -981
- 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 +8 -1
- package/dist/components/VvDialog/VvDialog.es.js +1 -317
- package/dist/components/VvDropdown/VvDropdown.es.js +1 -750
- package/dist/components/VvDropdown/VvDropdownAction.vue.d.ts +2 -2
- package/dist/components/VvDropdown/VvDropdownOptgroup.vue.d.ts +9 -2
- package/dist/components/VvDropdownAction/VvDropdownAction.es.js +1 -448
- 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/VvInputFile/VvInputFile.es.js +1 -1704
- package/dist/components/VvInputText/VvInputText.es.js +4 -2790
- package/dist/components/VvNav/VvNav.es.js +1 -438
- package/dist/components/VvNavItem/VvNavItem.es.js +1 -337
- package/dist/components/VvNavSeparator/VvNavSeparator.es.js +1 -24
- package/dist/components/VvProgress/VvProgress.es.js +1 -163
- package/dist/components/VvRadio/VvRadio.es.js +1 -661
- package/dist/components/VvRadioGroup/VvRadioGroup.es.js +1 -901
- package/dist/components/VvSelect/VvSelect.es.js +1 -1103
- package/dist/components/VvSelect/VvSelect.vue.d.ts +3 -1
- package/dist/components/VvTab/VvTab.es.js +1 -558
- package/dist/components/VvTextarea/VvTextarea.es.js +2 -1989
- package/dist/components/VvTooltip/VvTooltip.es.js +1 -154
- 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/resolvers/unplugin.es.js +1 -187
- package/package.json +33 -33
|
@@ -1,1989 +1,2 @@
|
|
|
1
|
-
import { unref, computed, isRef, defineComponent, h, useId, Fragment, provide, ref, toRefs, useAttrs, onMounted, watch, createElementBlock, openBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, mergeProps, toHandlers, withDirectives, createElementVNode, normalizeClass, normalizeStyle, createCommentVNode, vShow, nextTick, inject, createBlock, createTextVNode, toDisplayString, mergeDefaults, useSlots, vModelText, createSlots, renderList, withModifiers } from "vue";
|
|
2
|
-
|
|
3
|
-
import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, useElementHover, onKeyStroke, useFocus, useStorage, useElementVisibility } from "@vueuse/core";
|
|
4
|
-
import mitt from "mitt";
|
|
5
|
-
import { iconLoaded, Icon, addIcon } from "@iconify/vue";
|
|
6
|
-
const ACTION_ICONS = {
|
|
7
|
-
remove: "trash"
|
|
8
|
-
};
|
|
9
|
-
const VvIconPropsDefaults = {
|
|
10
|
-
prefix: "normal"
|
|
11
|
-
/* normal */
|
|
12
|
-
};
|
|
13
|
-
var StorageType = /* @__PURE__ */ ((StorageType2) => {
|
|
14
|
-
StorageType2["local"] = "local";
|
|
15
|
-
StorageType2["session"] = "session";
|
|
16
|
-
return StorageType2;
|
|
17
|
-
})(StorageType || {});
|
|
18
|
-
var Strategy = /* @__PURE__ */ ((Strategy2) => {
|
|
19
|
-
Strategy2["absolute"] = "absolute";
|
|
20
|
-
Strategy2["fixed"] = "fixed";
|
|
21
|
-
return Strategy2;
|
|
22
|
-
})(Strategy || {});
|
|
23
|
-
var Side = /* @__PURE__ */ ((Side2) => {
|
|
24
|
-
Side2["left"] = "left";
|
|
25
|
-
Side2["right"] = "right";
|
|
26
|
-
Side2["top"] = "top";
|
|
27
|
-
Side2["bottom"] = "bottom";
|
|
28
|
-
return Side2;
|
|
29
|
-
})(Side || {});
|
|
30
|
-
var Placement = /* @__PURE__ */ ((Placement2) => {
|
|
31
|
-
Placement2["topStart"] = "top-start";
|
|
32
|
-
Placement2["topEnd"] = "top-end";
|
|
33
|
-
Placement2["bottomStart"] = "bottom-start";
|
|
34
|
-
Placement2["bottomEnd"] = "bottom-end";
|
|
35
|
-
Placement2["leftStart"] = "left-start";
|
|
36
|
-
Placement2["leftEnd"] = "left-end";
|
|
37
|
-
Placement2["rightStart"] = "right-start";
|
|
38
|
-
Placement2["rightEnd"] = "right-end";
|
|
39
|
-
return Placement2;
|
|
40
|
-
})(Placement || {});
|
|
41
|
-
var Position = /* @__PURE__ */ ((Position2) => {
|
|
42
|
-
Position2["before"] = "before";
|
|
43
|
-
Position2["after"] = "after";
|
|
44
|
-
return Position2;
|
|
45
|
-
})(Position || {});
|
|
46
|
-
var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
|
|
47
|
-
ButtonType2["button"] = "button";
|
|
48
|
-
ButtonType2["submit"] = "submit";
|
|
49
|
-
ButtonType2["reset"] = "reset";
|
|
50
|
-
return ButtonType2;
|
|
51
|
-
})(ButtonType || {});
|
|
52
|
-
var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
|
|
53
|
-
ActionTag2["nuxtLink"] = "nuxt-link";
|
|
54
|
-
ActionTag2["routerLink"] = "router-link";
|
|
55
|
-
ActionTag2["a"] = "a";
|
|
56
|
-
ActionTag2["button"] = "button";
|
|
57
|
-
return ActionTag2;
|
|
58
|
-
})(ActionTag || {});
|
|
59
|
-
var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
|
|
60
|
-
ActionRoles2["button"] = "button";
|
|
61
|
-
ActionRoles2["link"] = "link";
|
|
62
|
-
ActionRoles2["menuitem"] = "menuitem";
|
|
63
|
-
return ActionRoles2;
|
|
64
|
-
})(ActionRoles || {});
|
|
65
|
-
var DropdownRole = /* @__PURE__ */ ((DropdownRole2) => {
|
|
66
|
-
DropdownRole2["listbox"] = "listbox";
|
|
67
|
-
DropdownRole2["menu"] = "menu";
|
|
68
|
-
return DropdownRole2;
|
|
69
|
-
})(DropdownRole || {});
|
|
70
|
-
var DropdownItemRole = /* @__PURE__ */ ((DropdownItemRole2) => {
|
|
71
|
-
DropdownItemRole2["option"] = "option";
|
|
72
|
-
DropdownItemRole2["presentation"] = "presentation";
|
|
73
|
-
return DropdownItemRole2;
|
|
74
|
-
})(DropdownItemRole || {});
|
|
75
|
-
const INJECTION_KEY_VOLVER = Symbol.for("volver");
|
|
76
|
-
const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
|
|
77
|
-
"dropdownTrigger"
|
|
78
|
-
);
|
|
79
|
-
const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
|
|
80
|
-
"dropdownItem"
|
|
81
|
-
);
|
|
82
|
-
const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
|
|
83
|
-
"dropdownAction"
|
|
84
|
-
);
|
|
85
|
-
const ValidProps = {
|
|
86
|
-
/**
|
|
87
|
-
* Valid status
|
|
88
|
-
*/
|
|
89
|
-
valid: { type: Boolean, default: false },
|
|
90
|
-
/**
|
|
91
|
-
* Valid label
|
|
92
|
-
*/
|
|
93
|
-
validLabel: { type: [String, Array], default: void 0 }
|
|
94
|
-
};
|
|
95
|
-
const InvalidProps = {
|
|
96
|
-
/**
|
|
97
|
-
* Invalid status
|
|
98
|
-
*/
|
|
99
|
-
invalid: {
|
|
100
|
-
type: Boolean,
|
|
101
|
-
default: false
|
|
102
|
-
},
|
|
103
|
-
/**
|
|
104
|
-
* Invalid label
|
|
105
|
-
*/
|
|
106
|
-
invalidLabel: { type: [String, Array], default: void 0 }
|
|
107
|
-
};
|
|
108
|
-
const LoadingProps = {
|
|
109
|
-
/**
|
|
110
|
-
* Loading status
|
|
111
|
-
*/
|
|
112
|
-
loading: {
|
|
113
|
-
type: Boolean,
|
|
114
|
-
default: false
|
|
115
|
-
},
|
|
116
|
-
/**
|
|
117
|
-
* Loading label
|
|
118
|
-
*/
|
|
119
|
-
loadingLabel: {
|
|
120
|
-
type: String,
|
|
121
|
-
default: "Loading..."
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
const DisabledProps = {
|
|
125
|
-
/**
|
|
126
|
-
* Whether the form control is disabled
|
|
127
|
-
*/
|
|
128
|
-
disabled: {
|
|
129
|
-
type: Boolean,
|
|
130
|
-
default: false
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
const RequiredProps = {
|
|
134
|
-
/**
|
|
135
|
-
* Whether the form control is required
|
|
136
|
-
*/
|
|
137
|
-
required: {
|
|
138
|
-
type: Boolean,
|
|
139
|
-
default: false
|
|
140
|
-
}
|
|
141
|
-
};
|
|
142
|
-
const SelectedProps = {
|
|
143
|
-
/**
|
|
144
|
-
* Whether the item is selected
|
|
145
|
-
*/
|
|
146
|
-
selected: {
|
|
147
|
-
type: Boolean,
|
|
148
|
-
default: false
|
|
149
|
-
}
|
|
150
|
-
};
|
|
151
|
-
const LabelProps = {
|
|
152
|
-
/**
|
|
153
|
-
* The item label
|
|
154
|
-
*/
|
|
155
|
-
label: {
|
|
156
|
-
type: [String, Number],
|
|
157
|
-
default: void 0
|
|
158
|
-
}
|
|
159
|
-
};
|
|
160
|
-
const ReadonlyProps = {
|
|
161
|
-
/**
|
|
162
|
-
* The value is not editable
|
|
163
|
-
*/
|
|
164
|
-
readonly: {
|
|
165
|
-
type: Boolean,
|
|
166
|
-
default: false
|
|
167
|
-
}
|
|
168
|
-
};
|
|
169
|
-
const ModifiersProps = {
|
|
170
|
-
/**
|
|
171
|
-
* Component BEM modifiers
|
|
172
|
-
*/
|
|
173
|
-
modifiers: {
|
|
174
|
-
type: [String, Array],
|
|
175
|
-
default: void 0
|
|
176
|
-
}
|
|
177
|
-
};
|
|
178
|
-
const HintProps = {
|
|
179
|
-
hintLabel: { type: String, default: "" }
|
|
180
|
-
};
|
|
181
|
-
const CountProps = {
|
|
182
|
-
/**
|
|
183
|
-
* Show character limit
|
|
184
|
-
*/
|
|
185
|
-
count: {
|
|
186
|
-
type: [Boolean, String],
|
|
187
|
-
default: false,
|
|
188
|
-
validator: (value) => [true, false, "limit", "countdown"].includes(value)
|
|
189
|
-
}
|
|
190
|
-
};
|
|
191
|
-
const DebounceProps = {
|
|
192
|
-
/**
|
|
193
|
-
* Milliseconds to wait before emitting the input event
|
|
194
|
-
*/
|
|
195
|
-
debounce: {
|
|
196
|
-
type: [Number, String],
|
|
197
|
-
default: void 0
|
|
198
|
-
}
|
|
199
|
-
};
|
|
200
|
-
const IconProps = {
|
|
201
|
-
/**
|
|
202
|
-
* VvIcon name or props
|
|
203
|
-
* @see VvIcon
|
|
204
|
-
*/
|
|
205
|
-
icon: {
|
|
206
|
-
type: [String, Object],
|
|
207
|
-
default: void 0
|
|
208
|
-
},
|
|
209
|
-
/**
|
|
210
|
-
* VvIcon position
|
|
211
|
-
*/
|
|
212
|
-
iconPosition: {
|
|
213
|
-
type: String,
|
|
214
|
-
default: Position.before,
|
|
215
|
-
validation: (value) => Object.values(Position).includes(value)
|
|
216
|
-
}
|
|
217
|
-
};
|
|
218
|
-
const TabindexProps = {
|
|
219
|
-
/**
|
|
220
|
-
* Global attribute tabindex
|
|
221
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
|
|
222
|
-
*/
|
|
223
|
-
tabindex: { type: [String, Number], default: 0 }
|
|
224
|
-
};
|
|
225
|
-
const FloatingLabelProps = {
|
|
226
|
-
/**
|
|
227
|
-
* If true the label will be floating
|
|
228
|
-
*/
|
|
229
|
-
floating: {
|
|
230
|
-
type: Boolean,
|
|
231
|
-
default: false
|
|
232
|
-
}
|
|
233
|
-
};
|
|
234
|
-
const UnselectableProps = {
|
|
235
|
-
/**
|
|
236
|
-
* If true the input will be unselectable
|
|
237
|
-
*/
|
|
238
|
-
unselectable: { type: Boolean, default: true }
|
|
239
|
-
};
|
|
240
|
-
const IdProps = {
|
|
241
|
-
/**
|
|
242
|
-
* Global attribute id
|
|
243
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
|
|
244
|
-
*/
|
|
245
|
-
id: [String, Number]
|
|
246
|
-
};
|
|
247
|
-
const DropdownProps = {
|
|
248
|
-
/**
|
|
249
|
-
* Dropdown placement
|
|
250
|
-
*/
|
|
251
|
-
placement: {
|
|
252
|
-
type: String,
|
|
253
|
-
default: Side.bottom,
|
|
254
|
-
validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
|
|
255
|
-
},
|
|
256
|
-
/**
|
|
257
|
-
* Dropdown strategy
|
|
258
|
-
*/
|
|
259
|
-
strategy: {
|
|
260
|
-
type: String,
|
|
261
|
-
default: void 0,
|
|
262
|
-
validator: (value) => Object.values(Strategy).includes(value)
|
|
263
|
-
},
|
|
264
|
-
/**
|
|
265
|
-
* Dropdown show / hide transition name
|
|
266
|
-
*/
|
|
267
|
-
transitionName: {
|
|
268
|
-
type: String,
|
|
269
|
-
default: void 0
|
|
270
|
-
},
|
|
271
|
-
/**
|
|
272
|
-
* Offset of the dropdown from the trigger
|
|
273
|
-
* @see https://floating-ui.com/docs/offset
|
|
274
|
-
*/
|
|
275
|
-
offset: {
|
|
276
|
-
type: [Number, String, Object],
|
|
277
|
-
default: 0
|
|
278
|
-
},
|
|
279
|
-
/**
|
|
280
|
-
* Move dropdown to the side if there is no space in the default position
|
|
281
|
-
* @see https://floating-ui.com/docs/shift
|
|
282
|
-
*/
|
|
283
|
-
shift: {
|
|
284
|
-
type: [Boolean, Object],
|
|
285
|
-
default: false
|
|
286
|
-
},
|
|
287
|
-
/**
|
|
288
|
-
* Flip dropdown position if there is no space in the default position
|
|
289
|
-
* @see https://floating-ui.com/docs/flip
|
|
290
|
-
*/
|
|
291
|
-
flip: {
|
|
292
|
-
type: [Boolean, Object],
|
|
293
|
-
default: true
|
|
294
|
-
},
|
|
295
|
-
/**
|
|
296
|
-
* Size of the dropdown
|
|
297
|
-
* @see https://floating-ui.com/docs/size
|
|
298
|
-
*/
|
|
299
|
-
size: {
|
|
300
|
-
type: [Boolean, Object],
|
|
301
|
-
default: () => ({ padding: 10 })
|
|
302
|
-
},
|
|
303
|
-
/**
|
|
304
|
-
* Automatically change the position of the dropdown
|
|
305
|
-
* @see https://floating-ui.com/docs/autoPlacement
|
|
306
|
-
*/
|
|
307
|
-
autoPlacement: {
|
|
308
|
-
type: [Boolean, Object],
|
|
309
|
-
default: false
|
|
310
|
-
},
|
|
311
|
-
/**
|
|
312
|
-
* Add arrow to the dropdown
|
|
313
|
-
* @see https://floating-ui.com/docs/arrow
|
|
314
|
-
*/
|
|
315
|
-
arrow: {
|
|
316
|
-
type: Boolean,
|
|
317
|
-
default: false
|
|
318
|
-
},
|
|
319
|
-
/**
|
|
320
|
-
* Keep open dropdown on click outside
|
|
321
|
-
*/
|
|
322
|
-
keepOpen: {
|
|
323
|
-
type: Boolean,
|
|
324
|
-
default: false
|
|
325
|
-
},
|
|
326
|
-
/**
|
|
327
|
-
* Autofocus first item on dropdown open
|
|
328
|
-
*/
|
|
329
|
-
autofocusFirst: {
|
|
330
|
-
type: Boolean,
|
|
331
|
-
default: true
|
|
332
|
-
},
|
|
333
|
-
/**
|
|
334
|
-
* Set dropdown width to the same as the trigger
|
|
335
|
-
*/
|
|
336
|
-
triggerWidth: {
|
|
337
|
-
type: Boolean,
|
|
338
|
-
default: false
|
|
339
|
-
}
|
|
340
|
-
};
|
|
341
|
-
const IdNameProps = {
|
|
342
|
-
...IdProps,
|
|
343
|
-
/**
|
|
344
|
-
* Input / Textarea name
|
|
345
|
-
* Name of the form control. Submitted with the form as part of a name/value pair
|
|
346
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
|
|
347
|
-
*/
|
|
348
|
-
name: { type: String, required: true }
|
|
349
|
-
};
|
|
350
|
-
const AutofocusProps = {
|
|
351
|
-
/**
|
|
352
|
-
* Global attribute autofocus
|
|
353
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
|
|
354
|
-
*/
|
|
355
|
-
autofocus: {
|
|
356
|
-
type: Boolean,
|
|
357
|
-
default: false
|
|
358
|
-
}
|
|
359
|
-
};
|
|
360
|
-
const AutocompleteProps = {
|
|
361
|
-
/**
|
|
362
|
-
* Global attribute autocomplete
|
|
363
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
|
|
364
|
-
*/
|
|
365
|
-
autocomplete: { type: String, default: "off" }
|
|
366
|
-
};
|
|
367
|
-
const InputTextareaProps = {
|
|
368
|
-
...IdNameProps,
|
|
369
|
-
...AutofocusProps,
|
|
370
|
-
...AutocompleteProps,
|
|
371
|
-
...TabindexProps,
|
|
372
|
-
...DisabledProps,
|
|
373
|
-
...ReadonlyProps,
|
|
374
|
-
...ValidProps,
|
|
375
|
-
...InvalidProps,
|
|
376
|
-
...HintProps,
|
|
377
|
-
...LoadingProps,
|
|
378
|
-
...ModifiersProps,
|
|
379
|
-
...CountProps,
|
|
380
|
-
...DebounceProps,
|
|
381
|
-
...IconProps,
|
|
382
|
-
...FloatingLabelProps,
|
|
383
|
-
...LabelProps,
|
|
384
|
-
/**
|
|
385
|
-
* Input / Textarea minlength
|
|
386
|
-
* Minimum length (number of characters) of value
|
|
387
|
-
* Available for input types: text, search, url, tel, email, password
|
|
388
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
|
|
389
|
-
*/
|
|
390
|
-
minlength: { type: [String, Number], default: void 0 },
|
|
391
|
-
/**
|
|
392
|
-
* Input / Textarea maxlength
|
|
393
|
-
* Maximum length (number of characters) of value
|
|
394
|
-
* Available for input types: text, search, url, tel, email, password
|
|
395
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
|
|
396
|
-
*/
|
|
397
|
-
maxlength: { type: [String, Number], default: void 0 },
|
|
398
|
-
/**
|
|
399
|
-
* Input / Textarea placeholder
|
|
400
|
-
* Text that appears in the form control when it has no value set
|
|
401
|
-
* Available for input types: text, search, url, tel, email, password, number
|
|
402
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
|
|
403
|
-
*/
|
|
404
|
-
placeholder: {
|
|
405
|
-
type: String,
|
|
406
|
-
default: void 0
|
|
407
|
-
},
|
|
408
|
-
/**
|
|
409
|
-
* Input / Textarea required
|
|
410
|
-
* A value is required or must be check for the form to be submittable
|
|
411
|
-
* Available for all input types except color
|
|
412
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
|
|
413
|
-
*/
|
|
414
|
-
...RequiredProps
|
|
415
|
-
};
|
|
416
|
-
({
|
|
417
|
-
/**
|
|
418
|
-
* Button type
|
|
419
|
-
*/
|
|
420
|
-
type: {
|
|
421
|
-
default: ButtonType.button
|
|
422
|
-
},
|
|
423
|
-
/**
|
|
424
|
-
* Default tag for the action
|
|
425
|
-
*/
|
|
426
|
-
defaultTag: {
|
|
427
|
-
default: ActionTag.button
|
|
428
|
-
}
|
|
429
|
-
});
|
|
430
|
-
const StorageProps = {
|
|
431
|
-
storageType: {
|
|
432
|
-
type: String,
|
|
433
|
-
default: StorageType.local,
|
|
434
|
-
validator: (value) => Object.values(StorageType).includes(value)
|
|
435
|
-
},
|
|
436
|
-
storageKey: String
|
|
437
|
-
};
|
|
438
|
-
const WRAP = {
|
|
439
|
-
soft: "soft"
|
|
440
|
-
};
|
|
441
|
-
const SPELLCHECK = {
|
|
442
|
-
default: "default"
|
|
443
|
-
};
|
|
444
|
-
const VvTextareaEvents = ["update:modelValue", "focus", "blur", "keyup", "suggestion:selected", "suggestion:removed"];
|
|
445
|
-
const VvTextareaProps = {
|
|
446
|
-
...InputTextareaProps,
|
|
447
|
-
...StorageProps,
|
|
448
|
-
/**
|
|
449
|
-
* Textarea value
|
|
450
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#value
|
|
451
|
-
*/
|
|
452
|
-
modelValue: String,
|
|
453
|
-
/**
|
|
454
|
-
* The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.
|
|
455
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols
|
|
456
|
-
*/
|
|
457
|
-
cols: { type: [String, Number], default: 20 },
|
|
458
|
-
/**
|
|
459
|
-
* The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.
|
|
460
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows
|
|
461
|
-
*/
|
|
462
|
-
rows: { type: [String, Number], default: 2 },
|
|
463
|
-
/**
|
|
464
|
-
* Indicates how the control should wrap the value for form submission.
|
|
465
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
|
|
466
|
-
*/
|
|
467
|
-
wrap: { type: String, default: WRAP.soft },
|
|
468
|
-
/**
|
|
469
|
-
* Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS.
|
|
470
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
|
|
471
|
-
*/
|
|
472
|
-
spellcheck: { type: [Boolean, String], default: SPELLCHECK.default },
|
|
473
|
-
/**
|
|
474
|
-
* VvIcon name for remove suggestion button
|
|
475
|
-
* @see VvIcon
|
|
476
|
-
*/
|
|
477
|
-
iconRemoveSuggestion: {
|
|
478
|
-
type: [String, Object],
|
|
479
|
-
default: ACTION_ICONS.remove
|
|
480
|
-
},
|
|
481
|
-
/**
|
|
482
|
-
* Label for remove suggestion button
|
|
483
|
-
*/
|
|
484
|
-
labelRemoveSuggestion: {
|
|
485
|
-
type: String,
|
|
486
|
-
default: "Remove suggestion"
|
|
487
|
-
},
|
|
488
|
-
/**
|
|
489
|
-
* Maximum number of suggestions
|
|
490
|
-
*/
|
|
491
|
-
maxSuggestions: {
|
|
492
|
-
type: Number,
|
|
493
|
-
default: 5
|
|
494
|
-
},
|
|
495
|
-
/**
|
|
496
|
-
* Select input text on focus
|
|
497
|
-
*/
|
|
498
|
-
selectOnFocus: {
|
|
499
|
-
type: Boolean,
|
|
500
|
-
default: false
|
|
501
|
-
},
|
|
502
|
-
/**
|
|
503
|
-
* If true, the textarea will be resizable
|
|
504
|
-
*/
|
|
505
|
-
resizable: Boolean
|
|
506
|
-
};
|
|
507
|
-
function isEmpty(value) {
|
|
508
|
-
return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
|
|
509
|
-
}
|
|
510
|
-
function isString(value) {
|
|
511
|
-
return typeof value === "string";
|
|
512
|
-
}
|
|
513
|
-
function joinLines(items) {
|
|
514
|
-
if (Array.isArray(items)) {
|
|
515
|
-
return items.filter((item) => isString(item)).join(" ");
|
|
516
|
-
}
|
|
517
|
-
return items;
|
|
518
|
-
}
|
|
519
|
-
function HintSlotFactory(propsOrRef, slots) {
|
|
520
|
-
const props = computed(() => {
|
|
521
|
-
if (isRef(propsOrRef)) {
|
|
522
|
-
return propsOrRef.value;
|
|
523
|
-
}
|
|
524
|
-
return propsOrRef;
|
|
525
|
-
});
|
|
526
|
-
const invalidLabel = computed(() => joinLines(props.value.invalidLabel));
|
|
527
|
-
const validLabel = computed(() => joinLines(props.value.validLabel));
|
|
528
|
-
const loadingLabel = computed(() => props.value.loadingLabel);
|
|
529
|
-
const hintLabel = computed(() => props.value.hintLabel);
|
|
530
|
-
const hasLoadingLabelOrSlot = computed(
|
|
531
|
-
() => Boolean(props.value.loading && (slots.loading || loadingLabel.value))
|
|
532
|
-
);
|
|
533
|
-
const hasInvalidLabelOrSlot = computed(
|
|
534
|
-
() => !hasLoadingLabelOrSlot.value && Boolean(
|
|
535
|
-
props.value.invalid && (slots.invalid || invalidLabel.value)
|
|
536
|
-
)
|
|
537
|
-
);
|
|
538
|
-
const hasValidLabelOrSlot = computed(
|
|
539
|
-
() => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.value.valid && (slots.valid || validLabel.value))
|
|
540
|
-
);
|
|
541
|
-
const hasHintLabelOrSlot = computed(
|
|
542
|
-
() => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && !hasValidLabelOrSlot.value && Boolean(slots.hint || hintLabel.value)
|
|
543
|
-
);
|
|
544
|
-
const isVisible = computed(
|
|
545
|
-
() => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
|
|
546
|
-
);
|
|
547
|
-
const hintSlotScope = computed(() => ({
|
|
548
|
-
modelValue: props.value.modelValue,
|
|
549
|
-
valid: props.value.valid,
|
|
550
|
-
invalid: props.value.invalid,
|
|
551
|
-
loading: props.value.loading
|
|
552
|
-
}));
|
|
553
|
-
const HintSlot = defineComponent({
|
|
554
|
-
name: "HintSlot",
|
|
555
|
-
props: {
|
|
556
|
-
tag: {
|
|
557
|
-
type: String,
|
|
558
|
-
default: "small"
|
|
559
|
-
}
|
|
560
|
-
},
|
|
561
|
-
setup() {
|
|
562
|
-
return {
|
|
563
|
-
isVisible,
|
|
564
|
-
invalidLabel,
|
|
565
|
-
validLabel,
|
|
566
|
-
loadingLabel,
|
|
567
|
-
hintLabel,
|
|
568
|
-
hasInvalidLabelOrSlot,
|
|
569
|
-
hasValidLabelOrSlot,
|
|
570
|
-
hasLoadingLabelOrSlot,
|
|
571
|
-
hasHintLabelOrSlot
|
|
572
|
-
};
|
|
573
|
-
},
|
|
574
|
-
render() {
|
|
575
|
-
if (this.isVisible) {
|
|
576
|
-
let role;
|
|
577
|
-
if (this.hasInvalidLabelOrSlot) {
|
|
578
|
-
role = "alert";
|
|
579
|
-
}
|
|
580
|
-
if (this.hasValidLabelOrSlot) {
|
|
581
|
-
role = "status";
|
|
582
|
-
}
|
|
583
|
-
if (this.hasLoadingLabelOrSlot) {
|
|
584
|
-
return h(
|
|
585
|
-
this.tag,
|
|
586
|
-
{
|
|
587
|
-
role
|
|
588
|
-
},
|
|
589
|
-
this.$slots.loading?.() ?? this.loadingLabel
|
|
590
|
-
);
|
|
591
|
-
}
|
|
592
|
-
if (this.hasInvalidLabelOrSlot) {
|
|
593
|
-
return h(
|
|
594
|
-
this.tag,
|
|
595
|
-
{
|
|
596
|
-
role
|
|
597
|
-
},
|
|
598
|
-
this.$slots.invalid?.() ?? this.$slots.invalid ?? this.invalidLabel
|
|
599
|
-
);
|
|
600
|
-
}
|
|
601
|
-
if (this.hasValidLabelOrSlot) {
|
|
602
|
-
return h(
|
|
603
|
-
this.tag,
|
|
604
|
-
{
|
|
605
|
-
role
|
|
606
|
-
},
|
|
607
|
-
this.$slots.valid?.() ?? this.validLabel
|
|
608
|
-
);
|
|
609
|
-
}
|
|
610
|
-
return h(
|
|
611
|
-
this.tag,
|
|
612
|
-
{
|
|
613
|
-
role
|
|
614
|
-
},
|
|
615
|
-
this.$slots.hint?.() ?? this.$slots.hint ?? this.hintLabel
|
|
616
|
-
);
|
|
617
|
-
}
|
|
618
|
-
return null;
|
|
619
|
-
}
|
|
620
|
-
});
|
|
621
|
-
return {
|
|
622
|
-
hasInvalidLabelOrSlot,
|
|
623
|
-
hasHintLabelOrSlot,
|
|
624
|
-
hasValidLabelOrSlot,
|
|
625
|
-
hasLoadingLabelOrSlot,
|
|
626
|
-
hintSlotScope,
|
|
627
|
-
HintSlot
|
|
628
|
-
};
|
|
629
|
-
}
|
|
630
|
-
const VvDropdownProps = {
|
|
631
|
-
...IdProps,
|
|
632
|
-
...DropdownProps,
|
|
633
|
-
...ModifiersProps,
|
|
634
|
-
/**
|
|
635
|
-
* Show / hide dropdown programmatically
|
|
636
|
-
*/
|
|
637
|
-
modelValue: {
|
|
638
|
-
type: Boolean,
|
|
639
|
-
default: void 0
|
|
640
|
-
},
|
|
641
|
-
/**
|
|
642
|
-
* Dropdown trigger element
|
|
643
|
-
*/
|
|
644
|
-
reference: {
|
|
645
|
-
type: Object,
|
|
646
|
-
default: null
|
|
647
|
-
},
|
|
648
|
-
/**
|
|
649
|
-
* Dropdown role
|
|
650
|
-
*/
|
|
651
|
-
role: {
|
|
652
|
-
type: String,
|
|
653
|
-
default: DropdownRole.menu,
|
|
654
|
-
validator: (value) => Object.values(DropdownRole).includes(value)
|
|
655
|
-
}
|
|
656
|
-
};
|
|
657
|
-
const VvDropdownItemProps = {
|
|
658
|
-
focusOnHover: {
|
|
659
|
-
type: Boolean,
|
|
660
|
-
default: false
|
|
661
|
-
}
|
|
662
|
-
};
|
|
663
|
-
const VvDropdownOptionProps = {
|
|
664
|
-
...DisabledProps,
|
|
665
|
-
...SelectedProps,
|
|
666
|
-
...UnselectableProps,
|
|
667
|
-
...ModifiersProps,
|
|
668
|
-
deselectHintLabel: {
|
|
669
|
-
type: String
|
|
670
|
-
},
|
|
671
|
-
selectHintLabel: {
|
|
672
|
-
type: String
|
|
673
|
-
},
|
|
674
|
-
selectedHintLabel: {
|
|
675
|
-
type: String
|
|
676
|
-
},
|
|
677
|
-
focusOnHover: {
|
|
678
|
-
type: Boolean,
|
|
679
|
-
default: false
|
|
680
|
-
}
|
|
681
|
-
};
|
|
682
|
-
function useUniqueId(id) {
|
|
683
|
-
return computed(() => String(id?.value || useId()));
|
|
684
|
-
}
|
|
685
|
-
function useDropdownProvideTrigger({
|
|
686
|
-
reference,
|
|
687
|
-
id,
|
|
688
|
-
expanded,
|
|
689
|
-
aria
|
|
690
|
-
}) {
|
|
691
|
-
const bus = mitt();
|
|
692
|
-
const component = defineComponent({
|
|
693
|
-
name: "VvDropdownTriggerProvider",
|
|
694
|
-
setup() {
|
|
695
|
-
provide(INJECTION_KEY_DROPDOWN_TRIGGER, {
|
|
696
|
-
reference,
|
|
697
|
-
id,
|
|
698
|
-
expanded,
|
|
699
|
-
aria,
|
|
700
|
-
bus
|
|
701
|
-
});
|
|
702
|
-
},
|
|
703
|
-
render() {
|
|
704
|
-
return h(Fragment, {}, this.$slots.default?.());
|
|
705
|
-
}
|
|
706
|
-
});
|
|
707
|
-
return {
|
|
708
|
-
bus,
|
|
709
|
-
component
|
|
710
|
-
};
|
|
711
|
-
}
|
|
712
|
-
function useDropdownProvideItem({
|
|
713
|
-
role,
|
|
714
|
-
...others
|
|
715
|
-
}) {
|
|
716
|
-
const itemRole = computed(
|
|
717
|
-
() => role.value === DropdownRole.listbox ? DropdownItemRole.option : DropdownItemRole.presentation
|
|
718
|
-
);
|
|
719
|
-
provide(INJECTION_KEY_DROPDOWN_ITEM, {
|
|
720
|
-
role: itemRole,
|
|
721
|
-
...others
|
|
722
|
-
});
|
|
723
|
-
return { itemRole };
|
|
724
|
-
}
|
|
725
|
-
function useDropdownProvideAction({
|
|
726
|
-
expanded
|
|
727
|
-
}) {
|
|
728
|
-
provide(INJECTION_KEY_DROPDOWN_ACTION, {
|
|
729
|
-
role: ref(ActionRoles.menuitem),
|
|
730
|
-
expanded
|
|
731
|
-
});
|
|
732
|
-
}
|
|
733
|
-
function useModifiers(prefix, modifiers, others) {
|
|
734
|
-
return computed(() => {
|
|
735
|
-
const toReturn = {
|
|
736
|
-
[prefix]: true
|
|
737
|
-
};
|
|
738
|
-
const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : modifiers?.value;
|
|
739
|
-
if (modifiersArray) {
|
|
740
|
-
if (Array.isArray(modifiersArray)) {
|
|
741
|
-
modifiersArray.forEach((modifier) => {
|
|
742
|
-
if (modifier) {
|
|
743
|
-
toReturn[`${prefix}--${modifier}`] = true;
|
|
744
|
-
}
|
|
745
|
-
});
|
|
746
|
-
}
|
|
747
|
-
}
|
|
748
|
-
if (others) {
|
|
749
|
-
Object.keys(others.value).forEach((key) => {
|
|
750
|
-
toReturn[`${prefix}--${key}`] = unref(others.value[key]);
|
|
751
|
-
});
|
|
752
|
-
}
|
|
753
|
-
return toReturn;
|
|
754
|
-
});
|
|
755
|
-
}
|
|
756
|
-
const _hoisted_1$2 = ["id", "tabindex", "role", "aria-labelledby"];
|
|
757
|
-
const __default__$4 = {
|
|
758
|
-
name: "VvDropdown",
|
|
759
|
-
inheritAttrs: false
|
|
760
|
-
};
|
|
761
|
-
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
762
|
-
...__default__$4,
|
|
763
|
-
props: VvDropdownProps,
|
|
764
|
-
emits: [
|
|
765
|
-
"update:modelValue",
|
|
766
|
-
"beforeEnter",
|
|
767
|
-
"afterLeave",
|
|
768
|
-
"beforeExpand",
|
|
769
|
-
"beforeCollapse",
|
|
770
|
-
"afterExpand",
|
|
771
|
-
"afterCollapse",
|
|
772
|
-
"before-enter",
|
|
773
|
-
"after-leave",
|
|
774
|
-
"enter",
|
|
775
|
-
"afterEnter",
|
|
776
|
-
"enterCancelled",
|
|
777
|
-
"beforeLeave",
|
|
778
|
-
"leave",
|
|
779
|
-
"leaveCancelled"
|
|
780
|
-
],
|
|
781
|
-
setup(__props, { expose: __expose, emit: __emit }) {
|
|
782
|
-
const props = __props;
|
|
783
|
-
const emit = __emit;
|
|
784
|
-
const { id } = toRefs(props);
|
|
785
|
-
const hasId = useUniqueId(id);
|
|
786
|
-
const attrs = useAttrs();
|
|
787
|
-
const maxWidth = ref("auto");
|
|
788
|
-
const maxHeight = ref("auto");
|
|
789
|
-
const localReferenceEl = ref();
|
|
790
|
-
const floatingEl = ref();
|
|
791
|
-
const arrowEl = ref();
|
|
792
|
-
const listEl = ref();
|
|
793
|
-
const referenceEl = computed({
|
|
794
|
-
get: () => props.reference ?? localReferenceEl.value,
|
|
795
|
-
set: (newValue) => {
|
|
796
|
-
localReferenceEl.value = newValue;
|
|
797
|
-
}
|
|
798
|
-
});
|
|
799
|
-
const hasCustomPosition = ref(false);
|
|
800
|
-
onMounted(() => {
|
|
801
|
-
useMutationObserver(
|
|
802
|
-
floatingEl.value,
|
|
803
|
-
() => {
|
|
804
|
-
hasCustomPosition.value = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")?.trim() === "true";
|
|
805
|
-
},
|
|
806
|
-
{
|
|
807
|
-
attributeFilter: ["style"],
|
|
808
|
-
window
|
|
809
|
-
}
|
|
810
|
-
);
|
|
811
|
-
});
|
|
812
|
-
const middleware = computed(() => {
|
|
813
|
-
const toReturn = [];
|
|
814
|
-
if (props.autoPlacement) {
|
|
815
|
-
if (typeof props.autoPlacement === "boolean") {
|
|
816
|
-
toReturn.push(autoPlacement());
|
|
817
|
-
} else {
|
|
818
|
-
toReturn.push(
|
|
819
|
-
autoPlacement(props.autoPlacement)
|
|
820
|
-
);
|
|
821
|
-
}
|
|
822
|
-
} else if (props.flip) {
|
|
823
|
-
if (typeof props.flip === "boolean") {
|
|
824
|
-
toReturn.push(flip({ fallbackStrategy: "initialPlacement" }));
|
|
825
|
-
} else {
|
|
826
|
-
toReturn.push(flip(props.flip));
|
|
827
|
-
}
|
|
828
|
-
}
|
|
829
|
-
if (props.shift) {
|
|
830
|
-
if (typeof props.shift === "boolean") {
|
|
831
|
-
toReturn.push(shift());
|
|
832
|
-
} else {
|
|
833
|
-
toReturn.push(shift(props.shift));
|
|
834
|
-
}
|
|
835
|
-
}
|
|
836
|
-
if (props.size) {
|
|
837
|
-
const apply = ({
|
|
838
|
-
availableWidth,
|
|
839
|
-
availableHeight
|
|
840
|
-
}) => {
|
|
841
|
-
maxWidth.value = `${availableWidth}px`;
|
|
842
|
-
maxHeight.value = `${availableHeight}px`;
|
|
843
|
-
};
|
|
844
|
-
if (typeof props.size === "boolean") {
|
|
845
|
-
toReturn.push(
|
|
846
|
-
size({
|
|
847
|
-
apply
|
|
848
|
-
})
|
|
849
|
-
);
|
|
850
|
-
} else {
|
|
851
|
-
toReturn.push(
|
|
852
|
-
size({
|
|
853
|
-
...props.size,
|
|
854
|
-
apply
|
|
855
|
-
})
|
|
856
|
-
);
|
|
857
|
-
}
|
|
858
|
-
}
|
|
859
|
-
if (props.offset) {
|
|
860
|
-
toReturn.push(offset(Number(props.offset)));
|
|
861
|
-
if (["string", "number"].includes(typeof props.offset)) {
|
|
862
|
-
toReturn.push(offset(Number(props.offset)));
|
|
863
|
-
} else {
|
|
864
|
-
toReturn.push(offset(props.offset));
|
|
865
|
-
}
|
|
866
|
-
}
|
|
867
|
-
if (props.arrow) {
|
|
868
|
-
toReturn.push(
|
|
869
|
-
arrow({
|
|
870
|
-
element: arrowEl
|
|
871
|
-
})
|
|
872
|
-
);
|
|
873
|
-
}
|
|
874
|
-
return toReturn;
|
|
875
|
-
});
|
|
876
|
-
const { x, y, middlewareData, placement, strategy } = useFloating(
|
|
877
|
-
referenceEl,
|
|
878
|
-
floatingEl,
|
|
879
|
-
{
|
|
880
|
-
whileElementsMounted: (...args) => {
|
|
881
|
-
return autoUpdate(...args, {
|
|
882
|
-
animationFrame: props.strategy === Strategy.fixed
|
|
883
|
-
});
|
|
884
|
-
},
|
|
885
|
-
placement: computed(() => props.placement),
|
|
886
|
-
strategy: computed(() => props.strategy),
|
|
887
|
-
middleware
|
|
888
|
-
}
|
|
889
|
-
);
|
|
890
|
-
const dropdownPlacement = computed(() => {
|
|
891
|
-
if (hasCustomPosition.value) {
|
|
892
|
-
return void 0;
|
|
893
|
-
}
|
|
894
|
-
const width = props.triggerWidth && referenceEl.value ? `${referenceEl.value?.offsetWidth}px` : void 0;
|
|
895
|
-
return {
|
|
896
|
-
position: strategy.value,
|
|
897
|
-
top: `${y.value ?? 0}px`,
|
|
898
|
-
left: `${x.value ?? 0}px`,
|
|
899
|
-
maxWidth: width ? void 0 : maxWidth.value,
|
|
900
|
-
maxHeight: maxHeight.value,
|
|
901
|
-
width
|
|
902
|
-
};
|
|
903
|
-
});
|
|
904
|
-
const side = computed(
|
|
905
|
-
() => placement.value.split("-")[0]
|
|
906
|
-
);
|
|
907
|
-
const arrowPlacement = computed(() => {
|
|
908
|
-
if (hasCustomPosition.value) {
|
|
909
|
-
return void 0;
|
|
910
|
-
}
|
|
911
|
-
const staticSide = {
|
|
912
|
-
[Side.top]: Side.bottom,
|
|
913
|
-
[Side.right]: Side.left,
|
|
914
|
-
[Side.bottom]: Side.top,
|
|
915
|
-
[Side.left]: Side.right
|
|
916
|
-
}[side.value];
|
|
917
|
-
return {
|
|
918
|
-
left: middlewareData.value.arrow?.x !== void 0 ? `${middlewareData.value.arrow?.x}px` : void 0,
|
|
919
|
-
top: middlewareData.value.arrow?.y !== void 0 ? `${middlewareData.value.arrow?.y}px` : void 0,
|
|
920
|
-
[staticSide]: `${-(arrowEl.value?.offsetWidth ?? 0) / 2}px`
|
|
921
|
-
};
|
|
922
|
-
});
|
|
923
|
-
const modelValue = useVModel(props, "modelValue", emit);
|
|
924
|
-
const localModelValue = ref(false);
|
|
925
|
-
const expanded = computed({
|
|
926
|
-
get: () => modelValue.value ?? localModelValue.value,
|
|
927
|
-
set: (newValue) => {
|
|
928
|
-
if (modelValue.value === void 0) {
|
|
929
|
-
localModelValue.value = newValue;
|
|
930
|
-
return;
|
|
931
|
-
}
|
|
932
|
-
modelValue.value = newValue;
|
|
933
|
-
}
|
|
934
|
-
});
|
|
935
|
-
function show() {
|
|
936
|
-
expanded.value = true;
|
|
937
|
-
}
|
|
938
|
-
function hide() {
|
|
939
|
-
expanded.value = false;
|
|
940
|
-
}
|
|
941
|
-
function toggle() {
|
|
942
|
-
expanded.value = !expanded.value;
|
|
943
|
-
}
|
|
944
|
-
function init(el) {
|
|
945
|
-
referenceEl.value = el;
|
|
946
|
-
}
|
|
947
|
-
onClickOutside(
|
|
948
|
-
floatingEl,
|
|
949
|
-
() => {
|
|
950
|
-
if (!props.keepOpen && expanded.value) {
|
|
951
|
-
expanded.value = false;
|
|
952
|
-
}
|
|
953
|
-
},
|
|
954
|
-
{ ignore: [referenceEl] }
|
|
955
|
-
);
|
|
956
|
-
const hasAriaLabelledby = computed(() => {
|
|
957
|
-
return referenceEl.value?.getAttribute?.("id") ?? void 0;
|
|
958
|
-
});
|
|
959
|
-
const referenceAria = computed(() => ({
|
|
960
|
-
"aria-controls": hasId.value,
|
|
961
|
-
"aria-haspopup": true,
|
|
962
|
-
"aria-expanded": expanded.value
|
|
963
|
-
}));
|
|
964
|
-
const { component: VvDropdownTriggerProvider, bus } = useDropdownProvideTrigger({
|
|
965
|
-
reference: referenceEl,
|
|
966
|
-
id: hasId,
|
|
967
|
-
expanded,
|
|
968
|
-
aria: referenceAria
|
|
969
|
-
});
|
|
970
|
-
bus.on("click", toggle);
|
|
971
|
-
const { role, modifiers } = toRefs(props);
|
|
972
|
-
const bemCssClasses = useModifiers(
|
|
973
|
-
"vv-dropdown",
|
|
974
|
-
modifiers,
|
|
975
|
-
computed(() => ({
|
|
976
|
-
arrow: props.arrow
|
|
977
|
-
}))
|
|
978
|
-
);
|
|
979
|
-
const { focused } = useFocusWithin(floatingEl);
|
|
980
|
-
function getKeyboardFocusableElements(element) {
|
|
981
|
-
if (!element) {
|
|
982
|
-
return [];
|
|
983
|
-
}
|
|
984
|
-
return [
|
|
985
|
-
...element.querySelectorAll(
|
|
986
|
-
'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
|
|
987
|
-
)
|
|
988
|
-
].filter(
|
|
989
|
-
(el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
|
|
990
|
-
);
|
|
991
|
-
}
|
|
992
|
-
function focusFirst() {
|
|
993
|
-
nextTick(() => {
|
|
994
|
-
const focusableElements = getKeyboardFocusableElements(
|
|
995
|
-
floatingEl.value
|
|
996
|
-
);
|
|
997
|
-
if (focusableElements.length > 0) {
|
|
998
|
-
focusableElements[0].focus({
|
|
999
|
-
preventScroll: true
|
|
1000
|
-
});
|
|
1001
|
-
}
|
|
1002
|
-
});
|
|
1003
|
-
}
|
|
1004
|
-
function focusFirstListElement() {
|
|
1005
|
-
nextTick(() => {
|
|
1006
|
-
const focusableElements = getKeyboardFocusableElements(
|
|
1007
|
-
listEl.value
|
|
1008
|
-
);
|
|
1009
|
-
if (focusableElements.length > 0) {
|
|
1010
|
-
focusableElements[0].focus({
|
|
1011
|
-
preventScroll: true
|
|
1012
|
-
});
|
|
1013
|
-
}
|
|
1014
|
-
});
|
|
1015
|
-
}
|
|
1016
|
-
function focusNext() {
|
|
1017
|
-
nextTick(() => {
|
|
1018
|
-
if (focused.value) {
|
|
1019
|
-
const focusableElements = getKeyboardFocusableElements(
|
|
1020
|
-
floatingEl.value
|
|
1021
|
-
);
|
|
1022
|
-
if (focusableElements.length === 0 || !document.activeElement) {
|
|
1023
|
-
return;
|
|
1024
|
-
}
|
|
1025
|
-
const activeElementIndex = focusableElements.indexOf(
|
|
1026
|
-
document.activeElement
|
|
1027
|
-
);
|
|
1028
|
-
if (activeElementIndex < focusableElements.length - 1) {
|
|
1029
|
-
focusableElements[activeElementIndex + 1].focus({
|
|
1030
|
-
preventScroll: true
|
|
1031
|
-
});
|
|
1032
|
-
} else {
|
|
1033
|
-
focusableElements[0].focus({
|
|
1034
|
-
preventScroll: true
|
|
1035
|
-
});
|
|
1036
|
-
}
|
|
1037
|
-
}
|
|
1038
|
-
});
|
|
1039
|
-
}
|
|
1040
|
-
function focusPrev() {
|
|
1041
|
-
nextTick(() => {
|
|
1042
|
-
if (focused.value) {
|
|
1043
|
-
const focusableElements = getKeyboardFocusableElements(
|
|
1044
|
-
floatingEl.value
|
|
1045
|
-
);
|
|
1046
|
-
if (focusableElements.length === 0 || !document.activeElement) {
|
|
1047
|
-
return;
|
|
1048
|
-
}
|
|
1049
|
-
const activeElementIndex = focusableElements.indexOf(
|
|
1050
|
-
document.activeElement
|
|
1051
|
-
);
|
|
1052
|
-
if (activeElementIndex > 0) {
|
|
1053
|
-
focusableElements[activeElementIndex - 1].focus({
|
|
1054
|
-
preventScroll: true
|
|
1055
|
-
});
|
|
1056
|
-
} else {
|
|
1057
|
-
focusableElements[focusableElements.length - 1].focus({
|
|
1058
|
-
preventScroll: true
|
|
1059
|
-
});
|
|
1060
|
-
}
|
|
1061
|
-
}
|
|
1062
|
-
});
|
|
1063
|
-
}
|
|
1064
|
-
watch(expanded, (newValue) => {
|
|
1065
|
-
if (newValue && props.autofocusFirst) {
|
|
1066
|
-
focusFirst();
|
|
1067
|
-
}
|
|
1068
|
-
});
|
|
1069
|
-
__expose({
|
|
1070
|
-
toggle,
|
|
1071
|
-
show,
|
|
1072
|
-
hide,
|
|
1073
|
-
init,
|
|
1074
|
-
focusFirst,
|
|
1075
|
-
focusFirstListElement,
|
|
1076
|
-
focusNext,
|
|
1077
|
-
focusPrev,
|
|
1078
|
-
customPosition: hasCustomPosition
|
|
1079
|
-
});
|
|
1080
|
-
const hovered = useElementHover(floatingEl);
|
|
1081
|
-
const { itemRole } = useDropdownProvideItem({
|
|
1082
|
-
role,
|
|
1083
|
-
expanded,
|
|
1084
|
-
focused,
|
|
1085
|
-
hovered
|
|
1086
|
-
});
|
|
1087
|
-
onKeyStroke("Escape", (e) => {
|
|
1088
|
-
if (expanded.value) {
|
|
1089
|
-
e.preventDefault();
|
|
1090
|
-
hide();
|
|
1091
|
-
}
|
|
1092
|
-
});
|
|
1093
|
-
onKeyStroke("ArrowDown", (e) => {
|
|
1094
|
-
if (expanded.value && focused.value) {
|
|
1095
|
-
e.preventDefault();
|
|
1096
|
-
focusNext();
|
|
1097
|
-
}
|
|
1098
|
-
});
|
|
1099
|
-
onKeyStroke("ArrowUp", (e) => {
|
|
1100
|
-
if (expanded.value && focused.value) {
|
|
1101
|
-
e.preventDefault();
|
|
1102
|
-
focusPrev();
|
|
1103
|
-
}
|
|
1104
|
-
});
|
|
1105
|
-
onKeyStroke([" ", "Enter"], (e) => {
|
|
1106
|
-
const htmlEl = e.target;
|
|
1107
|
-
if (expanded.value && focused.value && htmlEl) {
|
|
1108
|
-
htmlEl?.click();
|
|
1109
|
-
}
|
|
1110
|
-
});
|
|
1111
|
-
const dropdownTransitionHandlers = {
|
|
1112
|
-
"before-enter": () => {
|
|
1113
|
-
emit(expanded.value ? "beforeExpand" : "beforeCollapse");
|
|
1114
|
-
emit("beforeEnter");
|
|
1115
|
-
},
|
|
1116
|
-
"after-leave": () => {
|
|
1117
|
-
emit(expanded.value ? "afterExpand" : "afterCollapse");
|
|
1118
|
-
emit("afterLeave");
|
|
1119
|
-
},
|
|
1120
|
-
"enter": () => {
|
|
1121
|
-
emit("enter");
|
|
1122
|
-
},
|
|
1123
|
-
"after-enter": () => {
|
|
1124
|
-
emit("afterEnter");
|
|
1125
|
-
},
|
|
1126
|
-
"enter-cancelled": () => {
|
|
1127
|
-
emit("enterCancelled");
|
|
1128
|
-
},
|
|
1129
|
-
"before-leave": () => {
|
|
1130
|
-
emit("beforeLeave");
|
|
1131
|
-
},
|
|
1132
|
-
"leave": () => {
|
|
1133
|
-
emit("leave");
|
|
1134
|
-
},
|
|
1135
|
-
"leave-cancelled": () => {
|
|
1136
|
-
emit("leaveCancelled");
|
|
1137
|
-
}
|
|
1138
|
-
};
|
|
1139
|
-
return (_ctx, _cache) => {
|
|
1140
|
-
return openBlock(), createElementBlock(
|
|
1141
|
-
Fragment,
|
|
1142
|
-
null,
|
|
1143
|
-
[
|
|
1144
|
-
createVNode(unref(VvDropdownTriggerProvider), null, {
|
|
1145
|
-
default: withCtx(() => [
|
|
1146
|
-
renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ init, show, hide, toggle, expanded: unref(expanded), aria: unref(referenceAria) })))
|
|
1147
|
-
]),
|
|
1148
|
-
_: 3
|
|
1149
|
-
/* FORWARDED */
|
|
1150
|
-
}),
|
|
1151
|
-
createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers), { persisted: "" }), {
|
|
1152
|
-
default: withCtx(() => [
|
|
1153
|
-
withDirectives(createElementVNode(
|
|
1154
|
-
"div",
|
|
1155
|
-
{
|
|
1156
|
-
ref_key: "floatingEl",
|
|
1157
|
-
ref: floatingEl,
|
|
1158
|
-
style: normalizeStyle(unref(dropdownPlacement)),
|
|
1159
|
-
class: normalizeClass(unref(bemCssClasses))
|
|
1160
|
-
},
|
|
1161
|
-
[
|
|
1162
|
-
props.arrow ? (openBlock(), createElementBlock(
|
|
1163
|
-
"div",
|
|
1164
|
-
{
|
|
1165
|
-
key: 0,
|
|
1166
|
-
ref_key: "arrowEl",
|
|
1167
|
-
ref: arrowEl,
|
|
1168
|
-
style: normalizeStyle(unref(arrowPlacement)),
|
|
1169
|
-
class: "vv-dropdown__arrow"
|
|
1170
|
-
},
|
|
1171
|
-
null,
|
|
1172
|
-
4
|
|
1173
|
-
/* STYLE */
|
|
1174
|
-
)) : createCommentVNode("v-if", true),
|
|
1175
|
-
renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
|
|
1176
|
-
createElementVNode("div", mergeProps(unref(attrs), {
|
|
1177
|
-
id: unref(hasId),
|
|
1178
|
-
ref_key: "listEl",
|
|
1179
|
-
ref: listEl,
|
|
1180
|
-
tabindex: !unref(expanded) ? -1 : void 0,
|
|
1181
|
-
role: unref(role),
|
|
1182
|
-
"aria-labelledby": unref(hasAriaLabelledby),
|
|
1183
|
-
class: "vv-dropdown__list"
|
|
1184
|
-
}), [
|
|
1185
|
-
renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
|
|
1186
|
-
role: unref(itemRole)
|
|
1187
|
-
})))
|
|
1188
|
-
], 16, _hoisted_1$2),
|
|
1189
|
-
renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
|
|
1190
|
-
],
|
|
1191
|
-
6
|
|
1192
|
-
/* CLASS, STYLE */
|
|
1193
|
-
), [
|
|
1194
|
-
[vShow, unref(expanded)]
|
|
1195
|
-
])
|
|
1196
|
-
]),
|
|
1197
|
-
_: 3
|
|
1198
|
-
/* FORWARDED */
|
|
1199
|
-
}, 16, ["name"])
|
|
1200
|
-
],
|
|
1201
|
-
64
|
|
1202
|
-
/* STABLE_FRAGMENT */
|
|
1203
|
-
);
|
|
1204
|
-
};
|
|
1205
|
-
}
|
|
1206
|
-
});
|
|
1207
|
-
function useInjectedDropdownItem() {
|
|
1208
|
-
return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
|
|
1209
|
-
}
|
|
1210
|
-
const __default__$3 = {
|
|
1211
|
-
name: "VvDropdownItem"
|
|
1212
|
-
};
|
|
1213
|
-
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
1214
|
-
...__default__$3,
|
|
1215
|
-
props: VvDropdownItemProps,
|
|
1216
|
-
setup(__props) {
|
|
1217
|
-
const props = __props;
|
|
1218
|
-
const { role, expanded } = useInjectedDropdownItem();
|
|
1219
|
-
const element = ref(null);
|
|
1220
|
-
useDropdownProvideAction({ expanded });
|
|
1221
|
-
const hovered = useElementHover(element);
|
|
1222
|
-
const { focused } = useFocus(element);
|
|
1223
|
-
const { focused: focusedWithin } = useFocusWithin(element);
|
|
1224
|
-
watch(hovered, (newValue) => {
|
|
1225
|
-
if (newValue && props.focusOnHover) {
|
|
1226
|
-
focused.value = true;
|
|
1227
|
-
}
|
|
1228
|
-
});
|
|
1229
|
-
return (_ctx, _cache) => {
|
|
1230
|
-
return openBlock(), createElementBlock(
|
|
1231
|
-
"div",
|
|
1232
|
-
mergeProps({ role: unref(role) }, {
|
|
1233
|
-
ref_key: "element",
|
|
1234
|
-
ref: element,
|
|
1235
|
-
class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
|
|
1236
|
-
}),
|
|
1237
|
-
[
|
|
1238
|
-
renderSlot(_ctx.$slots, "default")
|
|
1239
|
-
],
|
|
1240
|
-
16
|
|
1241
|
-
/* FULL_PROPS */
|
|
1242
|
-
);
|
|
1243
|
-
};
|
|
1244
|
-
}
|
|
1245
|
-
});
|
|
1246
|
-
const _hoisted_1$1 = ["title"];
|
|
1247
|
-
const __default__$2 = {
|
|
1248
|
-
name: "VvDropdownOption"
|
|
1249
|
-
};
|
|
1250
|
-
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
1251
|
-
...__default__$2,
|
|
1252
|
-
props: VvDropdownOptionProps,
|
|
1253
|
-
setup(__props) {
|
|
1254
|
-
const props = __props;
|
|
1255
|
-
const { modifiers } = toRefs(props);
|
|
1256
|
-
const bemCssClasses = useModifiers(
|
|
1257
|
-
"vv-dropdown-option",
|
|
1258
|
-
modifiers,
|
|
1259
|
-
computed(() => ({
|
|
1260
|
-
disabled: props.disabled,
|
|
1261
|
-
selected: props.selected,
|
|
1262
|
-
unselectable: props.unselectable && props.selected
|
|
1263
|
-
}))
|
|
1264
|
-
);
|
|
1265
|
-
const hintLabel = computed(() => {
|
|
1266
|
-
if (props.selected) {
|
|
1267
|
-
return props.unselectable ? props.deselectHintLabel : props.selectedHintLabel;
|
|
1268
|
-
}
|
|
1269
|
-
if (!props.disabled) {
|
|
1270
|
-
return props.selectHintLabel;
|
|
1271
|
-
}
|
|
1272
|
-
return "";
|
|
1273
|
-
});
|
|
1274
|
-
return (_ctx, _cache) => {
|
|
1275
|
-
return openBlock(), createBlock(_sfc_main$3, {
|
|
1276
|
-
class: normalizeClass(unref(bemCssClasses)),
|
|
1277
|
-
tabindex: _ctx.disabled ? -1 : 0,
|
|
1278
|
-
"aria-selected": _ctx.selected,
|
|
1279
|
-
"aria-disabled": _ctx.disabled,
|
|
1280
|
-
"focus-on-hover": _ctx.focusOnHover
|
|
1281
|
-
}, {
|
|
1282
|
-
default: withCtx(() => [
|
|
1283
|
-
renderSlot(_ctx.$slots, "default"),
|
|
1284
|
-
createElementVNode("span", {
|
|
1285
|
-
class: "vv-dropdown-option__hint",
|
|
1286
|
-
title: unref(hintLabel)
|
|
1287
|
-
}, [
|
|
1288
|
-
renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
|
|
1289
|
-
createTextVNode(
|
|
1290
|
-
toDisplayString(unref(hintLabel)),
|
|
1291
|
-
1
|
|
1292
|
-
/* TEXT */
|
|
1293
|
-
)
|
|
1294
|
-
])
|
|
1295
|
-
], 8, _hoisted_1$1)
|
|
1296
|
-
]),
|
|
1297
|
-
_: 3
|
|
1298
|
-
/* FORWARDED */
|
|
1299
|
-
}, 8, ["class", "tabindex", "aria-selected", "aria-disabled", "focus-on-hover"]);
|
|
1300
|
-
};
|
|
1301
|
-
}
|
|
1302
|
-
});
|
|
1303
|
-
function useVolver() {
|
|
1304
|
-
return inject(INJECTION_KEY_VOLVER, void 0);
|
|
1305
|
-
}
|
|
1306
|
-
const __default__$1 = {
|
|
1307
|
-
name: "VvIcon"
|
|
1308
|
-
};
|
|
1309
|
-
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
1310
|
-
...__default__$1,
|
|
1311
|
-
props: /* @__PURE__ */ mergeDefaults({
|
|
1312
|
-
name: {},
|
|
1313
|
-
color: {},
|
|
1314
|
-
width: {},
|
|
1315
|
-
height: {},
|
|
1316
|
-
provider: {},
|
|
1317
|
-
prefix: {},
|
|
1318
|
-
src: {},
|
|
1319
|
-
horizontalFlip: { type: Boolean },
|
|
1320
|
-
verticalFlip: { type: Boolean },
|
|
1321
|
-
flip: {},
|
|
1322
|
-
mode: {},
|
|
1323
|
-
inline: { type: Boolean },
|
|
1324
|
-
rotate: {},
|
|
1325
|
-
onLoad: { type: Function },
|
|
1326
|
-
svg: {},
|
|
1327
|
-
modifiers: {}
|
|
1328
|
-
}, VvIconPropsDefaults),
|
|
1329
|
-
setup(__props) {
|
|
1330
|
-
const props = __props;
|
|
1331
|
-
const hasRotate = computed(() => {
|
|
1332
|
-
if (typeof props.rotate === "string") {
|
|
1333
|
-
return Number.parseFloat(props.rotate);
|
|
1334
|
-
}
|
|
1335
|
-
return props.rotate;
|
|
1336
|
-
});
|
|
1337
|
-
const show = ref(true);
|
|
1338
|
-
const volver = useVolver();
|
|
1339
|
-
const { modifiers } = toRefs(props);
|
|
1340
|
-
const bemCssClasses = useModifiers("vv-icon", modifiers);
|
|
1341
|
-
const provider = computed(() => {
|
|
1342
|
-
return props.provider || volver?.iconsProvider;
|
|
1343
|
-
});
|
|
1344
|
-
const icon = computed(() => {
|
|
1345
|
-
const name = props.name ?? "";
|
|
1346
|
-
const iconName = `@${provider.value}:${props.prefix}:${name}`;
|
|
1347
|
-
if (iconLoaded(iconName)) {
|
|
1348
|
-
return iconName;
|
|
1349
|
-
}
|
|
1350
|
-
const iconsCollection = volver?.iconsCollections.find(
|
|
1351
|
-
(iconsCollection2) => {
|
|
1352
|
-
const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
|
|
1353
|
-
return iconLoaded(icon2);
|
|
1354
|
-
}
|
|
1355
|
-
);
|
|
1356
|
-
if (iconsCollection) {
|
|
1357
|
-
return `@${provider.value}:${iconsCollection.prefix}:${name}`;
|
|
1358
|
-
}
|
|
1359
|
-
return name;
|
|
1360
|
-
});
|
|
1361
|
-
function getSvgContent(svg) {
|
|
1362
|
-
let dom;
|
|
1363
|
-
if (typeof window === "undefined") {
|
|
1364
|
-
const { JSDOM } = require("jsdom");
|
|
1365
|
-
dom = new JSDOM().window;
|
|
1366
|
-
}
|
|
1367
|
-
const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
|
|
1368
|
-
const svgDomString = domParser.parseFromString(svg, "text/html");
|
|
1369
|
-
const svgEl = svgDomString.querySelector("svg");
|
|
1370
|
-
return svgEl;
|
|
1371
|
-
}
|
|
1372
|
-
function addIconFromSvg(svg) {
|
|
1373
|
-
const svgContentEl = getSvgContent(svg);
|
|
1374
|
-
const svgContent = svgContentEl?.innerHTML.trim() || "";
|
|
1375
|
-
if (svgContentEl && svgContent) {
|
|
1376
|
-
addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
|
|
1377
|
-
body: svgContent,
|
|
1378
|
-
// Set height and width from svg content
|
|
1379
|
-
height: svgContentEl.viewBox.baseVal.height,
|
|
1380
|
-
width: svgContentEl.viewBox.baseVal.width
|
|
1381
|
-
});
|
|
1382
|
-
}
|
|
1383
|
-
}
|
|
1384
|
-
if (volver) {
|
|
1385
|
-
if (props.src && !iconLoaded(`@${provider.value}:${props.prefix}:${props.name}`)) {
|
|
1386
|
-
show.value = false;
|
|
1387
|
-
volver.fetchIcon(props.src).then((svg) => {
|
|
1388
|
-
if (svg) {
|
|
1389
|
-
addIconFromSvg(svg);
|
|
1390
|
-
show.value = true;
|
|
1391
|
-
}
|
|
1392
|
-
}).catch((e) => {
|
|
1393
|
-
throw new Error(`Error during fetch icon: ${e?.message}`);
|
|
1394
|
-
});
|
|
1395
|
-
}
|
|
1396
|
-
}
|
|
1397
|
-
if (props.svg) {
|
|
1398
|
-
addIconFromSvg(props.svg);
|
|
1399
|
-
}
|
|
1400
|
-
return (_ctx, _cache) => {
|
|
1401
|
-
return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
|
|
1402
|
-
key: 0,
|
|
1403
|
-
class: unref(bemCssClasses)
|
|
1404
|
-
}, {
|
|
1405
|
-
inline: __props.inline,
|
|
1406
|
-
width: __props.width,
|
|
1407
|
-
height: __props.height,
|
|
1408
|
-
horizontalFlip: __props.horizontalFlip,
|
|
1409
|
-
verticalFlip: __props.verticalFlip,
|
|
1410
|
-
flip: __props.flip,
|
|
1411
|
-
rotate: unref(hasRotate),
|
|
1412
|
-
color: __props.color,
|
|
1413
|
-
icon: unref(icon)
|
|
1414
|
-
}, { onLoad: __props.onLoad }), null, 16, ["class", "onLoad"])) : createCommentVNode("v-if", true);
|
|
1415
|
-
};
|
|
1416
|
-
}
|
|
1417
|
-
});
|
|
1418
|
-
function useDefaults(componentName, propsDefinition, props) {
|
|
1419
|
-
const volver = useVolver();
|
|
1420
|
-
const volverComponentDefaults = computed(() => {
|
|
1421
|
-
if (!volver || !volver.defaults.value?.[componentName]) {
|
|
1422
|
-
return void 0;
|
|
1423
|
-
}
|
|
1424
|
-
return volver.defaults.value[componentName];
|
|
1425
|
-
});
|
|
1426
|
-
return computed(() => {
|
|
1427
|
-
if (volverComponentDefaults.value === void 0) {
|
|
1428
|
-
return props;
|
|
1429
|
-
}
|
|
1430
|
-
const componentDefaults = volverComponentDefaults.value;
|
|
1431
|
-
const simplifiedPropsDefinition = propsDefinition;
|
|
1432
|
-
const simplifiedProps = props;
|
|
1433
|
-
return Object.keys(simplifiedPropsDefinition).reduce((acc, key) => {
|
|
1434
|
-
const propValue = simplifiedProps[key];
|
|
1435
|
-
acc[key] = propValue;
|
|
1436
|
-
if (key in componentDefaults) {
|
|
1437
|
-
if (Array.isArray(simplifiedPropsDefinition[key])) {
|
|
1438
|
-
const typeArray = simplifiedPropsDefinition[key];
|
|
1439
|
-
if (typeArray.length) {
|
|
1440
|
-
const typeFunction = typeArray[0];
|
|
1441
|
-
if (typeFunction === propValue) {
|
|
1442
|
-
acc[key] = componentDefaults[key];
|
|
1443
|
-
}
|
|
1444
|
-
}
|
|
1445
|
-
}
|
|
1446
|
-
if (typeof simplifiedPropsDefinition[key] === "function") {
|
|
1447
|
-
const typeFunction = simplifiedPropsDefinition[key];
|
|
1448
|
-
if (typeFunction() === propValue) {
|
|
1449
|
-
acc[key] = componentDefaults[key];
|
|
1450
|
-
}
|
|
1451
|
-
}
|
|
1452
|
-
if (typeof simplifiedPropsDefinition[key] === "object") {
|
|
1453
|
-
let defaultValue = simplifiedPropsDefinition[key].default;
|
|
1454
|
-
if (typeof defaultValue === "function") {
|
|
1455
|
-
defaultValue = defaultValue();
|
|
1456
|
-
}
|
|
1457
|
-
if (typeof defaultValue === "object") {
|
|
1458
|
-
if (JSON.stringify(defaultValue) === JSON.stringify(propValue)) {
|
|
1459
|
-
acc[key] = componentDefaults[key];
|
|
1460
|
-
}
|
|
1461
|
-
} else if (defaultValue === propValue) {
|
|
1462
|
-
acc[key] = componentDefaults[key];
|
|
1463
|
-
}
|
|
1464
|
-
}
|
|
1465
|
-
}
|
|
1466
|
-
return acc;
|
|
1467
|
-
}, {});
|
|
1468
|
-
});
|
|
1469
|
-
}
|
|
1470
|
-
function useDebouncedInput(modelValue, emit, ms = 0, {
|
|
1471
|
-
getter = (value) => value,
|
|
1472
|
-
setter = (value) => value
|
|
1473
|
-
} = {}) {
|
|
1474
|
-
let timeout;
|
|
1475
|
-
if (typeof ms === "string") {
|
|
1476
|
-
ms = Number.parseInt(ms);
|
|
1477
|
-
}
|
|
1478
|
-
return computed({
|
|
1479
|
-
get: () => getter(modelValue?.value),
|
|
1480
|
-
set: (value) => {
|
|
1481
|
-
if (timeout) {
|
|
1482
|
-
clearTimeout(timeout);
|
|
1483
|
-
}
|
|
1484
|
-
timeout = setTimeout(() => {
|
|
1485
|
-
emit("update:modelValue", setter(value));
|
|
1486
|
-
}, ms);
|
|
1487
|
-
}
|
|
1488
|
-
});
|
|
1489
|
-
}
|
|
1490
|
-
function useComponentIcon(icon, iconPosition) {
|
|
1491
|
-
const hasIcon = computed(() => {
|
|
1492
|
-
if (typeof icon?.value === "string") {
|
|
1493
|
-
return { name: icon?.value };
|
|
1494
|
-
}
|
|
1495
|
-
return icon?.value;
|
|
1496
|
-
});
|
|
1497
|
-
const hasIconBefore = computed(
|
|
1498
|
-
() => iconPosition?.value === Position.before ? hasIcon.value : void 0
|
|
1499
|
-
);
|
|
1500
|
-
const hasIconAfter = computed(
|
|
1501
|
-
() => iconPosition?.value === Position.after ? hasIcon.value : void 0
|
|
1502
|
-
);
|
|
1503
|
-
const hasIconLeft = computed(
|
|
1504
|
-
() => iconPosition?.value === Side.left ? hasIcon.value : void 0
|
|
1505
|
-
);
|
|
1506
|
-
const hasIconRight = computed(
|
|
1507
|
-
() => iconPosition?.value === Side.right ? hasIcon.value : void 0
|
|
1508
|
-
);
|
|
1509
|
-
const hasIconTop = computed(
|
|
1510
|
-
() => iconPosition?.value === Side.top ? hasIcon.value : void 0
|
|
1511
|
-
);
|
|
1512
|
-
const hasIconBottom = computed(
|
|
1513
|
-
() => iconPosition?.value === Side.bottom ? hasIcon.value : void 0
|
|
1514
|
-
);
|
|
1515
|
-
return {
|
|
1516
|
-
hasIcon,
|
|
1517
|
-
hasIconLeft,
|
|
1518
|
-
hasIconRight,
|
|
1519
|
-
hasIconTop,
|
|
1520
|
-
hasIconBottom,
|
|
1521
|
-
hasIconBefore,
|
|
1522
|
-
hasIconAfter
|
|
1523
|
-
};
|
|
1524
|
-
}
|
|
1525
|
-
function useComponentFocus(inputTemplateRef, emit) {
|
|
1526
|
-
const { focused } = useFocus(inputTemplateRef);
|
|
1527
|
-
watch(focused, (newValue) => {
|
|
1528
|
-
emit(newValue ? "focus" : "blur", unref(inputTemplateRef));
|
|
1529
|
-
});
|
|
1530
|
-
return {
|
|
1531
|
-
focused
|
|
1532
|
-
};
|
|
1533
|
-
}
|
|
1534
|
-
function useTextCount(text, options) {
|
|
1535
|
-
const length = computed(() => {
|
|
1536
|
-
return (unref(text) ?? "").length;
|
|
1537
|
-
});
|
|
1538
|
-
const gap = computed(() => {
|
|
1539
|
-
if (options?.lowerLimit !== void 0 && length.value < options?.lowerLimit) {
|
|
1540
|
-
return length.value - options.lowerLimit;
|
|
1541
|
-
}
|
|
1542
|
-
if (options?.upperLimit !== void 0 && length.value < options?.upperLimit) {
|
|
1543
|
-
return options.upperLimit - length.value;
|
|
1544
|
-
}
|
|
1545
|
-
return 0;
|
|
1546
|
-
});
|
|
1547
|
-
const formatted = computed(() => {
|
|
1548
|
-
if (options?.mode === false) {
|
|
1549
|
-
return "";
|
|
1550
|
-
}
|
|
1551
|
-
if (options?.mode === "limit" && options?.upperLimit) {
|
|
1552
|
-
return `${length.value} / ${options.lowerLimit ? `${options.lowerLimit}-` : ""}${options.upperLimit}`;
|
|
1553
|
-
}
|
|
1554
|
-
if (options?.mode === "countdown") {
|
|
1555
|
-
if (gap.value === 0) {
|
|
1556
|
-
return void 0;
|
|
1557
|
-
}
|
|
1558
|
-
return gap;
|
|
1559
|
-
}
|
|
1560
|
-
return length.value;
|
|
1561
|
-
});
|
|
1562
|
-
return {
|
|
1563
|
-
length,
|
|
1564
|
-
gap,
|
|
1565
|
-
formatted
|
|
1566
|
-
};
|
|
1567
|
-
}
|
|
1568
|
-
function usePersistence(storageKey, storageType = StorageType.local, defaultValue) {
|
|
1569
|
-
const localValue = ref();
|
|
1570
|
-
if (defaultValue) {
|
|
1571
|
-
localValue.value = defaultValue;
|
|
1572
|
-
}
|
|
1573
|
-
let storageValue;
|
|
1574
|
-
onMounted(() => {
|
|
1575
|
-
if (storageKey) {
|
|
1576
|
-
watch(
|
|
1577
|
-
storageKey,
|
|
1578
|
-
(newKey, oldKey) => {
|
|
1579
|
-
const storage = unref(storageType) === StorageType.session ? sessionStorage : localStorage;
|
|
1580
|
-
if (oldKey && oldKey !== newKey) {
|
|
1581
|
-
storage.removeItem(oldKey);
|
|
1582
|
-
}
|
|
1583
|
-
if (newKey) {
|
|
1584
|
-
storageValue = useStorage(
|
|
1585
|
-
newKey,
|
|
1586
|
-
storageValue?.value ?? localValue.value,
|
|
1587
|
-
storage
|
|
1588
|
-
);
|
|
1589
|
-
if (storageValue.value) {
|
|
1590
|
-
localValue.value = storageValue.value;
|
|
1591
|
-
}
|
|
1592
|
-
return;
|
|
1593
|
-
}
|
|
1594
|
-
storageValue = void 0;
|
|
1595
|
-
},
|
|
1596
|
-
{
|
|
1597
|
-
immediate: true
|
|
1598
|
-
}
|
|
1599
|
-
);
|
|
1600
|
-
}
|
|
1601
|
-
if (isRef(storageType)) {
|
|
1602
|
-
watch(storageType, (newType, oldType) => {
|
|
1603
|
-
if (storageKey?.value) {
|
|
1604
|
-
if (newType) {
|
|
1605
|
-
const storage = newType === StorageType.session ? sessionStorage : localStorage;
|
|
1606
|
-
storageValue = useStorage(
|
|
1607
|
-
storageKey.value,
|
|
1608
|
-
storageValue?.value ?? localValue.value,
|
|
1609
|
-
storage
|
|
1610
|
-
);
|
|
1611
|
-
}
|
|
1612
|
-
if (oldType && oldType !== newType) {
|
|
1613
|
-
const oldStorage = oldType === StorageType.session ? sessionStorage : localStorage;
|
|
1614
|
-
oldStorage.removeItem(storageKey.value);
|
|
1615
|
-
}
|
|
1616
|
-
}
|
|
1617
|
-
});
|
|
1618
|
-
}
|
|
1619
|
-
});
|
|
1620
|
-
watch(localValue, (newValue) => {
|
|
1621
|
-
if (storageValue) {
|
|
1622
|
-
storageValue.value = newValue;
|
|
1623
|
-
}
|
|
1624
|
-
}, {
|
|
1625
|
-
deep: true,
|
|
1626
|
-
immediate: true
|
|
1627
|
-
});
|
|
1628
|
-
return localValue;
|
|
1629
|
-
}
|
|
1630
|
-
const _hoisted_1 = ["for"];
|
|
1631
|
-
const _hoisted_2 = {
|
|
1632
|
-
key: 0,
|
|
1633
|
-
class: "vv-textarea__input-before"
|
|
1634
|
-
};
|
|
1635
|
-
const _hoisted_3 = { class: "vv-textarea__inner" };
|
|
1636
|
-
const _hoisted_4 = ["id"];
|
|
1637
|
-
const _hoisted_5 = {
|
|
1638
|
-
key: 1,
|
|
1639
|
-
class: "vv-textarea__input-after"
|
|
1640
|
-
};
|
|
1641
|
-
const _hoisted_6 = {
|
|
1642
|
-
key: 2,
|
|
1643
|
-
class: "vv-textarea__limit"
|
|
1644
|
-
};
|
|
1645
|
-
const _hoisted_7 = { class: "flex-1" };
|
|
1646
|
-
const _hoisted_8 = ["title", "onClick"];
|
|
1647
|
-
const __default__ = {
|
|
1648
|
-
name: "VvTextarea"
|
|
1649
|
-
};
|
|
1650
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
1651
|
-
...__default__,
|
|
1652
|
-
props: VvTextareaProps,
|
|
1653
|
-
emits: VvTextareaEvents,
|
|
1654
|
-
setup(__props, { emit: __emit }) {
|
|
1655
|
-
const props = __props;
|
|
1656
|
-
const emit = __emit;
|
|
1657
|
-
const slots = useSlots();
|
|
1658
|
-
const volver = useVolver();
|
|
1659
|
-
const propsDefaults = useDefaults(
|
|
1660
|
-
"VvTextarea",
|
|
1661
|
-
VvTextareaProps,
|
|
1662
|
-
props
|
|
1663
|
-
);
|
|
1664
|
-
const textareaEl = ref();
|
|
1665
|
-
const wrapperEl = ref();
|
|
1666
|
-
const suggestionsDropdownEl = ref();
|
|
1667
|
-
const {
|
|
1668
|
-
id,
|
|
1669
|
-
icon,
|
|
1670
|
-
iconPosition,
|
|
1671
|
-
iconRemoveSuggestion,
|
|
1672
|
-
labelRemoveSuggestion,
|
|
1673
|
-
label,
|
|
1674
|
-
modelValue,
|
|
1675
|
-
count,
|
|
1676
|
-
valid,
|
|
1677
|
-
invalid,
|
|
1678
|
-
loading,
|
|
1679
|
-
modifiers,
|
|
1680
|
-
debounce,
|
|
1681
|
-
minlength,
|
|
1682
|
-
maxlength,
|
|
1683
|
-
storageType
|
|
1684
|
-
} = toRefs(props);
|
|
1685
|
-
const hasId = useUniqueId(id);
|
|
1686
|
-
const hasHintId = computed(() => `${hasId.value}-hint`);
|
|
1687
|
-
const hasPlaceholder = computed(
|
|
1688
|
-
() => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
|
|
1689
|
-
);
|
|
1690
|
-
const localModelValue = useDebouncedInput(modelValue, emit, debounce?.value);
|
|
1691
|
-
const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
|
|
1692
|
-
const { hasIcon: hasIconRemoveSuggestion } = useComponentIcon(iconRemoveSuggestion);
|
|
1693
|
-
const { focused } = useComponentFocus(textareaEl, emit);
|
|
1694
|
-
const isFocused = computed(
|
|
1695
|
-
() => focused.value && !props.disabled && !props.readonly
|
|
1696
|
-
);
|
|
1697
|
-
watch(isFocused, (newValue) => {
|
|
1698
|
-
if (newValue && propsDefaults.value.selectOnFocus && textareaEl.value) {
|
|
1699
|
-
textareaEl.value.select();
|
|
1700
|
-
}
|
|
1701
|
-
if (newValue && suggestions.value?.size) {
|
|
1702
|
-
suggestionsDropdownEl.value?.show();
|
|
1703
|
-
return;
|
|
1704
|
-
}
|
|
1705
|
-
if (isDirty.value && suggestions.value) {
|
|
1706
|
-
const suggestionsLimit = props.maxSuggestions;
|
|
1707
|
-
if (suggestions.value.size >= suggestionsLimit && !suggestions.value.has(localModelValue.value)) {
|
|
1708
|
-
suggestions.value = new Set(
|
|
1709
|
-
[...suggestions.value].slice(
|
|
1710
|
-
suggestions.value.size - suggestionsLimit + 1
|
|
1711
|
-
)
|
|
1712
|
-
);
|
|
1713
|
-
}
|
|
1714
|
-
suggestions.value.add(localModelValue.value);
|
|
1715
|
-
}
|
|
1716
|
-
});
|
|
1717
|
-
const isVisible = useElementVisibility(textareaEl);
|
|
1718
|
-
watch(isVisible, (newValue) => {
|
|
1719
|
-
if (newValue && props.autofocus) {
|
|
1720
|
-
focused.value = true;
|
|
1721
|
-
}
|
|
1722
|
-
});
|
|
1723
|
-
const { formatted: countFormatted } = useTextCount(localModelValue, {
|
|
1724
|
-
mode: count?.value,
|
|
1725
|
-
upperLimit: Number(maxlength?.value),
|
|
1726
|
-
lowerLimit: Number(minlength?.value)
|
|
1727
|
-
});
|
|
1728
|
-
const isClickable = computed(() => !props.disabled && !props.readonly);
|
|
1729
|
-
const hasTabindex = computed(
|
|
1730
|
-
() => isClickable.value ? props.tabindex : -1
|
|
1731
|
-
);
|
|
1732
|
-
const isDirty = computed(() => !isEmpty(modelValue));
|
|
1733
|
-
const isInvalid = computed(() => {
|
|
1734
|
-
if (props.invalid === true) {
|
|
1735
|
-
return true;
|
|
1736
|
-
}
|
|
1737
|
-
if (props.valid === true) {
|
|
1738
|
-
return false;
|
|
1739
|
-
}
|
|
1740
|
-
return void 0;
|
|
1741
|
-
});
|
|
1742
|
-
const storageKey = computed(() => props.storageKey ?? (volver?.experimentalFeatures.forceInputSuggestions ? props.name : void 0));
|
|
1743
|
-
const suggestions = usePersistence(
|
|
1744
|
-
storageKey,
|
|
1745
|
-
storageType,
|
|
1746
|
-
/* @__PURE__ */ new Set()
|
|
1747
|
-
);
|
|
1748
|
-
const filteredSuggestions = computed(() => {
|
|
1749
|
-
if (!suggestions.value) {
|
|
1750
|
-
return [];
|
|
1751
|
-
}
|
|
1752
|
-
return [...suggestions.value].filter(
|
|
1753
|
-
(suggestion) => isEmpty(localModelValue.value) || `${suggestion}`.toLowerCase().includes(`${localModelValue.value}`.toLowerCase()) && suggestion !== localModelValue.value
|
|
1754
|
-
).reverse();
|
|
1755
|
-
});
|
|
1756
|
-
const hasSuggestions = computed(
|
|
1757
|
-
() => storageKey?.value && suggestions.value && suggestions.value.size > 0
|
|
1758
|
-
);
|
|
1759
|
-
function onSuggestionSelect(suggestion) {
|
|
1760
|
-
localModelValue.value = suggestion;
|
|
1761
|
-
suggestionsDropdownEl.value?.hide();
|
|
1762
|
-
emit("suggestion:selected", suggestion);
|
|
1763
|
-
}
|
|
1764
|
-
function onSuggestionRemove(suggestion) {
|
|
1765
|
-
suggestions.value?.delete(suggestion);
|
|
1766
|
-
emit("suggestion:removed", suggestion);
|
|
1767
|
-
}
|
|
1768
|
-
const {
|
|
1769
|
-
HintSlot,
|
|
1770
|
-
hasHintLabelOrSlot,
|
|
1771
|
-
hasInvalidLabelOrSlot,
|
|
1772
|
-
hintSlotScope
|
|
1773
|
-
} = HintSlotFactory(propsDefaults, slots);
|
|
1774
|
-
const bemCssClasses = useModifiers(
|
|
1775
|
-
"vv-textarea",
|
|
1776
|
-
modifiers,
|
|
1777
|
-
computed(() => ({
|
|
1778
|
-
"valid": valid.value,
|
|
1779
|
-
"invalid": invalid.value,
|
|
1780
|
-
"loading": loading.value,
|
|
1781
|
-
"disabled": props.disabled,
|
|
1782
|
-
"readonly": props.readonly,
|
|
1783
|
-
"required": props.required,
|
|
1784
|
-
"icon-before": hasIconBefore.value !== void 0,
|
|
1785
|
-
"icon-after": hasIconAfter.value !== void 0,
|
|
1786
|
-
"floating": props.floating && !isEmpty(props.label),
|
|
1787
|
-
"dirty": isDirty.value,
|
|
1788
|
-
"focus": focused.value,
|
|
1789
|
-
"resizable": props.resizable
|
|
1790
|
-
}))
|
|
1791
|
-
);
|
|
1792
|
-
const hasAttrs = computed(
|
|
1793
|
-
() => ({
|
|
1794
|
-
"name": props.name,
|
|
1795
|
-
"placeholder": hasPlaceholder.value,
|
|
1796
|
-
"tabindex": hasTabindex.value,
|
|
1797
|
-
"disabled": props.disabled,
|
|
1798
|
-
"readonly": props.readonly,
|
|
1799
|
-
"required": props.required,
|
|
1800
|
-
"autocomplete": props.autocomplete,
|
|
1801
|
-
"minlength": props.minlength,
|
|
1802
|
-
"maxlength": props.maxlength,
|
|
1803
|
-
"cols": props.cols,
|
|
1804
|
-
"rows": props.rows,
|
|
1805
|
-
"wrap": props.wrap,
|
|
1806
|
-
"spellcheck": props.spellcheck,
|
|
1807
|
-
"aria-invalid": isInvalid.value,
|
|
1808
|
-
"aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
|
|
1809
|
-
"aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
|
|
1810
|
-
})
|
|
1811
|
-
);
|
|
1812
|
-
const slotProps = computed(() => ({
|
|
1813
|
-
valid: props.valid,
|
|
1814
|
-
invalid: props.invalid,
|
|
1815
|
-
modelValue: props.modelValue,
|
|
1816
|
-
hintLabel: props.hintLabel,
|
|
1817
|
-
maxlength: props.maxlength,
|
|
1818
|
-
minlength: props.minlength,
|
|
1819
|
-
clear: onClear
|
|
1820
|
-
}));
|
|
1821
|
-
function onClear() {
|
|
1822
|
-
localModelValue.value = void 0;
|
|
1823
|
-
}
|
|
1824
|
-
return (_ctx, _cache) => {
|
|
1825
|
-
return openBlock(), createElementBlock(
|
|
1826
|
-
"div",
|
|
1827
|
-
{
|
|
1828
|
-
class: normalizeClass(unref(bemCssClasses))
|
|
1829
|
-
},
|
|
1830
|
-
[
|
|
1831
|
-
unref(label) ? (openBlock(), createElementBlock("label", {
|
|
1832
|
-
key: 0,
|
|
1833
|
-
for: unref(hasId),
|
|
1834
|
-
class: "vv-textarea__label"
|
|
1835
|
-
}, toDisplayString(unref(label)), 9, _hoisted_1)) : createCommentVNode("v-if", true),
|
|
1836
|
-
createElementVNode(
|
|
1837
|
-
"div",
|
|
1838
|
-
{
|
|
1839
|
-
ref_key: "wrapperEl",
|
|
1840
|
-
ref: wrapperEl,
|
|
1841
|
-
class: "vv-textarea__wrapper"
|
|
1842
|
-
},
|
|
1843
|
-
[
|
|
1844
|
-
_ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_2, [
|
|
1845
|
-
renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
|
|
1846
|
-
])) : createCommentVNode("v-if", true),
|
|
1847
|
-
createElementVNode("div", _hoisted_3, [
|
|
1848
|
-
unref(hasIconBefore) ? (openBlock(), createBlock(
|
|
1849
|
-
_sfc_main$1,
|
|
1850
|
-
mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-textarea__icon" }),
|
|
1851
|
-
null,
|
|
1852
|
-
16
|
|
1853
|
-
/* FULL_PROPS */
|
|
1854
|
-
)) : createCommentVNode("v-if", true),
|
|
1855
|
-
withDirectives(createElementVNode("textarea", mergeProps({
|
|
1856
|
-
id: unref(hasId),
|
|
1857
|
-
ref_key: "textareaEl",
|
|
1858
|
-
ref: textareaEl,
|
|
1859
|
-
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
|
|
1860
|
-
}, unref(hasAttrs), {
|
|
1861
|
-
onKeyup: _cache[1] || (_cache[1] = ($event) => emit("keyup", $event))
|
|
1862
|
-
}), null, 16, _hoisted_4), [
|
|
1863
|
-
[vModelText, unref(localModelValue)]
|
|
1864
|
-
]),
|
|
1865
|
-
unref(hasIconAfter) ? (openBlock(), createBlock(
|
|
1866
|
-
_sfc_main$1,
|
|
1867
|
-
mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-textarea__icon vv-textarea__icon-after" }),
|
|
1868
|
-
null,
|
|
1869
|
-
16
|
|
1870
|
-
/* FULL_PROPS */
|
|
1871
|
-
)) : createCommentVNode("v-if", true)
|
|
1872
|
-
]),
|
|
1873
|
-
_ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_5, [
|
|
1874
|
-
renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
|
|
1875
|
-
])) : createCommentVNode("v-if", true),
|
|
1876
|
-
unref(count) ? (openBlock(), createElementBlock("span", _hoisted_6, [
|
|
1877
|
-
renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
|
|
1878
|
-
createTextVNode(
|
|
1879
|
-
toDisplayString(unref(countFormatted)),
|
|
1880
|
-
1
|
|
1881
|
-
/* TEXT */
|
|
1882
|
-
)
|
|
1883
|
-
])
|
|
1884
|
-
])) : createCommentVNode("v-if", true)
|
|
1885
|
-
],
|
|
1886
|
-
512
|
|
1887
|
-
/* NEED_PATCH */
|
|
1888
|
-
),
|
|
1889
|
-
createVNode(unref(HintSlot), {
|
|
1890
|
-
id: unref(hasHintId),
|
|
1891
|
-
class: "vv-textarea__hint"
|
|
1892
|
-
}, createSlots({
|
|
1893
|
-
_: 2
|
|
1894
|
-
/* DYNAMIC */
|
|
1895
|
-
}, [
|
|
1896
|
-
_ctx.$slots.hint ? {
|
|
1897
|
-
name: "hint",
|
|
1898
|
-
fn: withCtx(() => [
|
|
1899
|
-
renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
1900
|
-
]),
|
|
1901
|
-
key: "0"
|
|
1902
|
-
} : void 0,
|
|
1903
|
-
_ctx.$slots.loading ? {
|
|
1904
|
-
name: "loading",
|
|
1905
|
-
fn: withCtx(() => [
|
|
1906
|
-
renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
1907
|
-
]),
|
|
1908
|
-
key: "1"
|
|
1909
|
-
} : void 0,
|
|
1910
|
-
_ctx.$slots.valid ? {
|
|
1911
|
-
name: "valid",
|
|
1912
|
-
fn: withCtx(() => [
|
|
1913
|
-
renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
1914
|
-
]),
|
|
1915
|
-
key: "2"
|
|
1916
|
-
} : void 0,
|
|
1917
|
-
_ctx.$slots.invalid ? {
|
|
1918
|
-
name: "invalid",
|
|
1919
|
-
fn: withCtx(() => [
|
|
1920
|
-
renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
1921
|
-
]),
|
|
1922
|
-
key: "3"
|
|
1923
|
-
} : void 0
|
|
1924
|
-
]), 1032, ["id"]),
|
|
1925
|
-
unref(hasSuggestions) ? (openBlock(), createBlock(_sfc_main$4, {
|
|
1926
|
-
key: 1,
|
|
1927
|
-
ref_key: "suggestionsDropdownEl",
|
|
1928
|
-
ref: suggestionsDropdownEl,
|
|
1929
|
-
reference: unref(wrapperEl),
|
|
1930
|
-
"autofocus-first": false,
|
|
1931
|
-
"trigger-width": true
|
|
1932
|
-
}, {
|
|
1933
|
-
items: withCtx(() => [
|
|
1934
|
-
(openBlock(true), createElementBlock(
|
|
1935
|
-
Fragment,
|
|
1936
|
-
null,
|
|
1937
|
-
renderList(unref(filteredSuggestions), (value) => {
|
|
1938
|
-
return openBlock(), createBlock(_sfc_main$2, {
|
|
1939
|
-
key: value,
|
|
1940
|
-
onClick: withModifiers(($event) => onSuggestionSelect(value), ["stop"])
|
|
1941
|
-
}, {
|
|
1942
|
-
default: withCtx(() => [
|
|
1943
|
-
createElementVNode("div", _hoisted_7, [
|
|
1944
|
-
renderSlot(_ctx.$slots, "suggestion", mergeProps({ ref_for: true }, { value }), () => [
|
|
1945
|
-
createTextVNode(
|
|
1946
|
-
toDisplayString(value),
|
|
1947
|
-
1
|
|
1948
|
-
/* TEXT */
|
|
1949
|
-
)
|
|
1950
|
-
])
|
|
1951
|
-
]),
|
|
1952
|
-
unref(suggestions) && unref(hasIconRemoveSuggestion) ? (openBlock(), createElementBlock("button", {
|
|
1953
|
-
key: 0,
|
|
1954
|
-
type: "button",
|
|
1955
|
-
tabindex: "-1",
|
|
1956
|
-
class: "cursor-pointer",
|
|
1957
|
-
title: unref(labelRemoveSuggestion),
|
|
1958
|
-
onClick: withModifiers(($event) => onSuggestionRemove(value), ["stop"])
|
|
1959
|
-
}, [
|
|
1960
|
-
createVNode(
|
|
1961
|
-
_sfc_main$1,
|
|
1962
|
-
mergeProps({ ref_for: true }, unref(hasIconRemoveSuggestion)),
|
|
1963
|
-
null,
|
|
1964
|
-
16
|
|
1965
|
-
/* FULL_PROPS */
|
|
1966
|
-
)
|
|
1967
|
-
], 8, _hoisted_8)) : createCommentVNode("v-if", true)
|
|
1968
|
-
]),
|
|
1969
|
-
_: 2
|
|
1970
|
-
/* DYNAMIC */
|
|
1971
|
-
}, 1032, ["onClick"]);
|
|
1972
|
-
}),
|
|
1973
|
-
128
|
|
1974
|
-
/* KEYED_FRAGMENT */
|
|
1975
|
-
))
|
|
1976
|
-
]),
|
|
1977
|
-
_: 3
|
|
1978
|
-
/* FORWARDED */
|
|
1979
|
-
}, 8, ["reference"])) : createCommentVNode("v-if", true)
|
|
1980
|
-
],
|
|
1981
|
-
2
|
|
1982
|
-
/* CLASS */
|
|
1983
|
-
);
|
|
1984
|
-
};
|
|
1985
|
-
}
|
|
1986
|
-
});
|
|
1987
|
-
export {
|
|
1988
|
-
_sfc_main as default
|
|
1989
|
-
};
|
|
1
|
+
import{unref as e,computed as t,isRef as l,defineComponent as a,h as o,useId as i,Fragment as n,provide as r,ref as u,toRefs as s,useAttrs as d,onMounted as v,watch as f,createElementBlock as c,openBlock as p,createVNode as m,withCtx as b,renderSlot as g,normalizeProps as h,guardReactiveProps as y,Transition as S,mergeProps as x,toHandlers as w,withDirectives as L,createElementVNode as $,normalizeClass as O,normalizeStyle as k,createCommentVNode as _,vShow as B,nextTick as E,inject as V,createBlock as I,createTextVNode as j,toDisplayString as A,mergeDefaults as N,useSlots as H,vModelText as F,createSlots as C,renderList as z,withModifiers as D}from"vue";import{autoPlacement as P,flip as T,shift as q,size as R,offset as W,arrow as M,useFloating as J,autoUpdate as K}from"@floating-ui/vue";import{useMutationObserver as U,useVModel as G,onClickOutside as Q,useFocusWithin as X,useElementHover as Y,onKeyStroke as Z,useFocus as ee,useStorage as te,useElementVisibility as le}from"@vueuse/core";import ae from"mitt";import{iconLoaded as oe,Icon as ie,addIcon as ne}from"@iconify/vue";const re={prefix:"normal"};var ue=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(ue||{}),se=/* @__PURE__ */(e=>(e.absolute="absolute",e.fixed="fixed",e))(se||{}),de=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(de||{}),ve=/* @__PURE__ */(e=>(e.topStart="top-start",e.topEnd="top-end",e.bottomStart="bottom-start",e.bottomEnd="bottom-end",e.leftStart="left-start",e.leftEnd="left-end",e.rightStart="right-start",e.rightEnd="right-end",e))(ve||{}),fe=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(fe||{}),ce=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(ce||{}),pe=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(pe||{}),me=/* @__PURE__ */(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(me||{}),be=/* @__PURE__ */(e=>(e.listbox="listbox",e.menu="menu",e))(be||{}),ge=/* @__PURE__ */(e=>(e.option="option",e.presentation="presentation",e))(ge||{});const he=Symbol.for("volver"),ye=Symbol.for("dropdownTrigger"),Se=Symbol.for("dropdownItem"),xe=Symbol.for("dropdownAction"),we={valid:{type:Boolean,default:!1},validLabel:{type:[String,Array],default:void 0}},Le={invalid:{type:Boolean,default:!1},invalidLabel:{type:[String,Array],default:void 0}},$e={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},Oe={disabled:{type:Boolean,default:!1}},ke={required:{type:Boolean,default:!1}},_e={selected:{type:Boolean,default:!1}},Be={label:{type:[String,Number],default:void 0}},Ee={readonly:{type:Boolean,default:!1}},Ve={modifiers:{type:[String,Array],default:void 0}},Ie={hintLabel:{type:String,default:""}},je={count:{type:[Boolean,String],default:!1,validator:e=>[!0,!1,"limit","countdown"].includes(e)}},Ae={debounce:{type:[Number,String],default:void 0}},Ne={icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:fe.before,validation:e=>Object.values(fe).includes(e)}},He={tabindex:{type:[String,Number],default:0}},Fe={floating:{type:Boolean,default:!1}},Ce={unselectable:{type:Boolean,default:!0}},ze={id:[String,Number]},De={placement:{type:String,default:de.bottom,validator:e=>Object.values(de).includes(e)||Object.values(ve).includes(e)},strategy:{type:String,default:void 0,validator:e=>Object.values(se).includes(e)},transitionName:{type:String,default:void 0},offset:{type:[Number,String,Object],default:0},shift:{type:[Boolean,Object],default:!1},flip:{type:[Boolean,Object],default:!0},size:{type:[Boolean,Object],default:()=>({padding:10})},autoPlacement:{type:[Boolean,Object],default:!1},arrow:{type:Boolean,default:!1},keepOpen:{type:Boolean,default:!1},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean,default:!1}},Pe={...{...ze,name:{type:String,required:!0}},...{autofocus:{type:Boolean,default:!1}},...{autocomplete:{type:String,default:"off"}},...He,...Oe,...Ee,...we,...Le,...Ie,...$e,...Ve,...je,...Ae,...Ne,...Fe,...Be,minlength:{type:[String,Number],default:void 0},maxlength:{type:[String,Number],default:void 0},placeholder:{type:String,default:void 0},...ke};ce.button,pe.button;const Te={...Pe,...{storageType:{type:String,default:ue.local,validator:e=>Object.values(ue).includes(e)},storageKey:String},modelValue:String,cols:{type:[String,Number],default:20},rows:{type:[String,Number],default:2},wrap:{type:String,default:"soft"},spellcheck:{type:[Boolean,String],default:"default"},iconRemoveSuggestion:{type:[String,Object],default:"trash"},labelRemoveSuggestion:{type:String,default:"Remove suggestion"},maxSuggestions:{type:Number,default:5},selectOnFocus:{type:Boolean,default:!1},resizable:Boolean};function qe(t){return null==(l=e(t))||""===l||Array.isArray(l)&&0===l.length||!(l instanceof Date)&&"object"==typeof l&&0===Object.keys(l).length;var l}function Re(e){return Array.isArray(e)?e.filter(e=>"string"==typeof e).join(" "):e}const We={...ze,...De,...Ve,modelValue:{type:Boolean,default:void 0},reference:{type:Object,default:null},role:{type:String,default:be.menu,validator:e=>Object.values(be).includes(e)}},Me={focusOnHover:{type:Boolean,default:!1}},Je={...Oe,..._e,...Ce,...Ve,deselectHintLabel:{type:String},selectHintLabel:{type:String},selectedHintLabel:{type:String},focusOnHover:{type:Boolean,default:!1}};function Ke(e){return t(()=>String(e?.value||i()))}function Ue(l,a,o){return t(()=>{const t={[l]:!0},i="string"==typeof a?.value?a.value.split(" "):a?.value;return i&&Array.isArray(i)&&i.forEach(e=>{e&&(t[`${l}--${e}`]=!0)}),o&&Object.keys(o.value).forEach(a=>{t[`${l}--${a}`]=e(o.value[a])}),t})}const Ge=["id","tabindex","role","aria-labelledby"],Qe=/* @__PURE__ */a({name:"VvDropdown",inheritAttrs:!1,props:We,emits:["update:modelValue","beforeEnter","afterLeave","beforeExpand","beforeCollapse","afterExpand","afterCollapse","before-enter","after-leave","enter","afterEnter","enterCancelled","beforeLeave","leave","leaveCancelled"],setup(l,{expose:i,emit:V}){const I=l,j=V,{id:A}=s(I),N=Ke(A),H=d(),F=u("auto"),C=u("auto"),z=u(),D=u(),ee=u(),te=u(),le=t({get:()=>I.reference??z.value,set:e=>{z.value=e}}),oe=u(!1);v(()=>{U(D.value,()=>{oe.value="true"===window.getComputedStyle(D.value).getPropertyValue("--dropdown-custom-position")?.trim()},{attributeFilter:["style"],window:window})});const ie=t(()=>{const e=[];if(I.autoPlacement?"boolean"==typeof I.autoPlacement?e.push(P()):e.push(P(I.autoPlacement)):I.flip&&("boolean"==typeof I.flip?e.push(T({fallbackStrategy:"initialPlacement"})):e.push(T(I.flip))),I.shift&&("boolean"==typeof I.shift?e.push(q()):e.push(q(I.shift))),I.size){const t=({availableWidth:e,availableHeight:t})=>{F.value=`${e}px`,C.value=`${t}px`};"boolean"==typeof I.size?e.push(R({apply:t})):e.push(R({...I.size,apply:t}))}return I.offset&&(e.push(W(Number(I.offset))),["string","number"].includes(typeof I.offset)?e.push(W(Number(I.offset))):e.push(W(I.offset))),I.arrow&&e.push(M({element:ee})),e}),{x:ne,y:re,middlewareData:ue,placement:ve,strategy:fe}=J(le,D,{whileElementsMounted:(...e)=>K(...e,{animationFrame:I.strategy===se.fixed}),placement:t(()=>I.placement),strategy:t(()=>I.strategy),middleware:ie}),ce=t(()=>{if(oe.value)return;const e=I.triggerWidth&&le.value?`${le.value?.offsetWidth}px`:void 0;return{position:fe.value,top:`${re.value??0}px`,left:`${ne.value??0}px`,maxWidth:e?void 0:F.value,maxHeight:C.value,width:e}}),pe=t(()=>ve.value.split("-")[0]),me=t(()=>{if(oe.value)return;const e={[de.top]:de.bottom,[de.right]:de.left,[de.bottom]:de.top,[de.left]:de.right}[pe.value];return{left:void 0!==ue.value.arrow?.x?`${ue.value.arrow?.x}px`:void 0,top:void 0!==ue.value.arrow?.y?`${ue.value.arrow?.y}px`:void 0,[e]:-(ee.value?.offsetWidth??0)/2+"px"}}),he=G(I,"modelValue",j),xe=u(!1),we=t({get:()=>he.value??xe.value,set:e=>{void 0!==he.value?he.value=e:xe.value=e}});function Le(){we.value=!0}function $e(){we.value=!1}function Oe(){we.value=!we.value}function ke(e){le.value=e}Q(D,()=>{!I.keepOpen&&we.value&&(we.value=!1)},{ignore:[le]});const _e=t(()=>le.value?.getAttribute?.("id")??void 0),Be=t(()=>({"aria-controls":N.value,"aria-haspopup":!0,"aria-expanded":we.value})),{component:Ee,bus:Ve}=function({reference:e,id:t,expanded:l,aria:i}){const u=ae(),s=a({name:"VvDropdownTriggerProvider",setup(){r(ye,{reference:e,id:t,expanded:l,aria:i,bus:u})},render(){return o(n,{},this.$slots.default?.())}});return{bus:u,component:s}}({reference:le,id:N,expanded:we,aria:Be});Ve.on("click",Oe);const{role:Ie,modifiers:je}=s(I),Ae=Ue("vv-dropdown",je,t(()=>({arrow:I.arrow}))),{focused:Ne}=X(D);function He(e){return e?[...e.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')].filter(e=>!e.hasAttribute("disabled")&&!e.getAttribute("aria-hidden")):[]}function Fe(){E(()=>{const e=He(D.value);e.length>0&&e[0].focus({preventScroll:!0})})}function Ce(){E(()=>{if(Ne.value){const e=He(D.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t<e.length-1?e[t+1].focus({preventScroll:!0}):e[0].focus({preventScroll:!0})}})}function ze(){E(()=>{if(Ne.value){const e=He(D.value);if(0===e.length||!document.activeElement)return;const t=e.indexOf(document.activeElement);t>0?e[t-1].focus({preventScroll:!0}):e[e.length-1].focus({preventScroll:!0})}})}f(we,e=>{e&&I.autofocusFirst&&Fe()}),i({toggle:Oe,show:Le,hide:$e,init:ke,focusFirst:Fe,focusFirstListElement:function(){E(()=>{const e=He(te.value);e.length>0&&e[0].focus({preventScroll:!0})})},focusNext:Ce,focusPrev:ze,customPosition:oe});const De=Y(D),{itemRole:Pe}=function({role:e,...l}){const a=t(()=>e.value===be.listbox?ge.option:ge.presentation);return r(Se,{role:a,...l}),{itemRole:a}}({role:Ie,expanded:we,focused:Ne,hovered:De});Z("Escape",e=>{we.value&&(e.preventDefault(),$e())}),Z("ArrowDown",e=>{we.value&&Ne.value&&(e.preventDefault(),Ce())}),Z("ArrowUp",e=>{we.value&&Ne.value&&(e.preventDefault(),ze())}),Z([" ","Enter"],e=>{const t=e.target;we.value&&Ne.value&&t&&t?.click()});const Te={"before-enter":()=>{j(we.value?"beforeExpand":"beforeCollapse"),j("beforeEnter")},"after-leave":()=>{j(we.value?"afterExpand":"afterCollapse"),j("afterLeave")},enter:()=>{j("enter")},"after-enter":()=>{j("afterEnter")},"enter-cancelled":()=>{j("enterCancelled")},"before-leave":()=>{j("beforeLeave")},leave:()=>{j("leave")},"leave-cancelled":()=>{j("leaveCancelled")}};return(t,l)=>(p(),c(n,null,[m(e(Ee),null,{default:b(()=>[g(t.$slots,"default",h(y({init:ke,show:Le,hide:$e,toggle:Oe,expanded:e(we),aria:e(Be)})))]),_:3}),m(S,x({name:t.transitionName},w(Te),{persisted:""}),{default:b(()=>[L($("div",{ref_key:"floatingEl",ref:D,style:k(e(ce)),class:O(e(Ae))},[I.arrow?(p(),c("div",{key:0,ref_key:"arrowEl",ref:ee,style:k(e(me)),class:"vv-dropdown__arrow"},null,4)):_("v-if",!0),g(t.$slots,"before",h(y({expanded:e(we)}))),$("div",x(e(H),{id:e(N),ref_key:"listEl",ref:te,tabindex:e(we)?void 0:-1,role:e(Ie),"aria-labelledby":e(_e),class:"vv-dropdown__list"}),[g(t.$slots,"items",h(y({role:e(Pe)})))],16,Ge),g(t.$slots,"after",h(y({expanded:e(we)})))],6),[[B,e(we)]])]),_:3},16,["name"])],64))}});const Xe=/* @__PURE__ */a({name:"VvDropdownItem",props:Me,setup(t){const l=t,{role:a,expanded:o}=V(Se,{}),i=u(null);!function({expanded:e}){r(xe,{role:u(me.menuitem),expanded:e})}({expanded:o});const n=Y(i),{focused:s}=ee(i),{focused:d}=X(i);return f(n,e=>{e&&l.focusOnHover&&(s.value=!0)}),(t,l)=>(p(),c("div",x({role:e(a)},{ref_key:"element",ref:i,class:["vv-dropdown__item",{"focus-visible":e(s)||e(d)}]}),[g(t.$slots,"default")],16))}}),Ye=["title"],Ze=/* @__PURE__ */a({name:"VvDropdownOption",props:Je,setup(l){const a=l,{modifiers:o}=s(a),i=Ue("vv-dropdown-option",o,t(()=>({disabled:a.disabled,selected:a.selected,unselectable:a.unselectable&&a.selected}))),n=t(()=>a.selected?a.unselectable?a.deselectHintLabel:a.selectedHintLabel:a.disabled?"":a.selectHintLabel);return(t,l)=>(p(),I(Xe,{class:O(e(i)),tabindex:t.disabled?-1:0,"aria-selected":t.selected,"aria-disabled":t.disabled,"focus-on-hover":t.focusOnHover},{default:b(()=>[g(t.$slots,"default"),$("span",{class:"vv-dropdown-option__hint",title:e(n)},[g(t.$slots,"hint",h(y({disabled:t.disabled,selected:t.selected,unselectable:t.unselectable})),()=>[j(A(e(n)),1)])],8,Ye)]),_:3},8,["class","tabindex","aria-selected","aria-disabled","focus-on-hover"]))}});function et(){return V(he,void 0)}const tt=/* @__PURE__ */a({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:{}},re),setup(l){const a=l,o=t(()=>"string"==typeof a.rotate?Number.parseFloat(a.rotate):a.rotate),i=u(!0),n=et(),{modifiers:r}=s(a),d=Ue("vv-icon",r),v=t(()=>a.provider||n?.iconsProvider),f=t(()=>{const e=a.name??"",t=`@${v.value}:${a.prefix}:${e}`;if(oe(t))return t;const l=n?.iconsCollections.find(t=>{const l=`@${v.value}:${t.prefix}:${e}`;return oe(l)});return l?`@${v.value}:${l.prefix}:${e}`:e});function c(e){const t=function(e){let t;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");t=(new e).window}return(t?new t.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),l=t?.innerHTML.trim()||"";t&&l&&ne(`@${v.value}:${a.prefix}:${a.name}`,{body:l,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return n&&a.src&&!oe(`@${v.value}:${a.prefix}:${a.name}`)&&(i.value=!1,n.fetchIcon(a.src).then(e=>{e&&(c(e),i.value=!0)}).catch(e=>{throw new Error(`Error during fetch icon: ${e?.message}`)})),a.svg&&c(a.svg),(t,a)=>e(i)?(p(),I(e(ie),x({key:0,class:e(d)},{inline:l.inline,width:l.width,height:l.height,horizontalFlip:l.horizontalFlip,verticalFlip:l.verticalFlip,flip:l.flip,rotate:e(o),color:l.color,icon:e(f)},{onLoad:l.onLoad}),null,16,["class","onLoad"])):_("v-if",!0)}});function lt(e,l){const a=t(()=>"string"==typeof e?.value?{name:e?.value}:e?.value),o=t(()=>l?.value===fe.before?a.value:void 0),i=t(()=>l?.value===fe.after?a.value:void 0),n=t(()=>l?.value===de.left?a.value:void 0),r=t(()=>l?.value===de.right?a.value:void 0),u=t(()=>l?.value===de.top?a.value:void 0),s=t(()=>l?.value===de.bottom?a.value:void 0);return{hasIcon:a,hasIconLeft:n,hasIconRight:r,hasIconTop:u,hasIconBottom:s,hasIconBefore:o,hasIconAfter:i}}const at=["for"],ot={key:0,class:"vv-textarea__input-before"},it={class:"vv-textarea__inner"},nt=["id"],rt={key:1,class:"vv-textarea__input-after"},ut={key:2,class:"vv-textarea__limit"},st={class:"flex-1"},dt=["title","onClick"],vt=/* @__PURE__ */a({name:"VvTextarea",props:Te,emits:["update:modelValue","focus","blur","keyup","suggestion:selected","suggestion:removed"],setup(i,{emit:r}){const d=i,S=r,w=H(),k=et(),B=function(e,l,a){const o=et(),i=t(()=>{if(o&&o.defaults.value?.[e])return o.defaults.value[e]});return t(()=>{if(void 0===i.value)return a;const e=i.value,t=l,o=a;return Object.keys(t).reduce((l,a)=>{const i=o[a];if(l[a]=i,a in e){if(Array.isArray(t[a])){const o=t[a];o.length&&o[0]===i&&(l[a]=e[a])}if("function"==typeof t[a]&&(0,t[a])()===i&&(l[a]=e[a]),"object"==typeof t[a]){let o=t[a].default;"function"==typeof o&&(o=o()),"object"==typeof o?JSON.stringify(o)===JSON.stringify(i)&&(l[a]=e[a]):o===i&&(l[a]=e[a])}}return l},{})})}("VvTextarea",Te,d),E=u(),V=u(),N=u(),{id:P,icon:T,iconPosition:q,iconRemoveSuggestion:R,labelRemoveSuggestion:W,label:M,modelValue:J,count:K,valid:U,invalid:G,loading:Q,modifiers:X,debounce:Y,minlength:Z,maxlength:ae,storageType:oe}=s(d),ie=Ke(P),ne=t(()=>`${ie.value}-hint`),re=t(()=>d.floating&&qe(d.placeholder)?" ":d.placeholder),se=function(e,l,a=0,{getter:o=e=>e,setter:i=e=>e}={}){let n;return"string"==typeof a&&(a=Number.parseInt(a)),t({get:()=>o(e?.value),set:e=>{n&&clearTimeout(n),n=setTimeout(()=>{l("update:modelValue",i(e))},a)}})}(J,S,Y?.value),{hasIconBefore:de,hasIconAfter:ve}=lt(T,q),{hasIcon:fe}=lt(R),{focused:ce}=function(t,l){const{focused:a}=ee(t);return f(a,a=>{l(a?"focus":"blur",e(t))}),{focused:a}}(E,S),pe=t(()=>ce.value&&!d.disabled&&!d.readonly);f(pe,e=>{if(e&&B.value.selectOnFocus&&E.value&&E.value.select(),e&&we.value?.size)N.value?.show();else if(ye.value&&we.value){const e=d.maxSuggestions;we.value.size>=e&&!we.value.has(se.value)&&(we.value=new Set([...we.value].slice(we.value.size-e+1))),we.value.add(se.value)}});const me=le(E);f(me,e=>{e&&d.autofocus&&(ce.value=!0)});const{formatted:be}=function(l,a){const o=t(()=>(e(l)??"").length),i=t(()=>void 0!==a?.lowerLimit&&o.value<a?.lowerLimit?o.value-a.lowerLimit:void 0!==a?.upperLimit&&o.value<a?.upperLimit?a.upperLimit-o.value:0),n=t(()=>{if(!1===a?.mode)return"";if("limit"===a?.mode&&a?.upperLimit)return`${o.value} / ${a.lowerLimit?`${a.lowerLimit}-`:""}${a.upperLimit}`;if("countdown"===a?.mode){if(0===i.value)return;return i}return o.value});return{length:o,gap:i,formatted:n}}(se,{mode:K?.value,upperLimit:Number(ae?.value),lowerLimit:Number(Z?.value)}),ge=t(()=>!d.disabled&&!d.readonly),he=t(()=>ge.value?d.tabindex:-1),ye=t(()=>!qe(J)),Se=t(()=>!0===d.invalid||!0!==d.valid&&void 0),xe=t(()=>d.storageKey??(k?.experimentalFeatures.forceInputSuggestions?d.name:void 0)),we=function(t,a=ue.local,o){const i=u();let n;return o&&(i.value=o),v(()=>{t&&f(t,(t,l)=>{const o=e(a)===ue.session?sessionStorage:localStorage;if(l&&l!==t&&o.removeItem(l),t)return n=te(t,n?.value??i.value,o),void(n.value&&(i.value=n.value));n=void 0},{immediate:!0}),l(a)&&f(a,(e,l)=>{if(t?.value){if(e){const l=e===ue.session?sessionStorage:localStorage;n=te(t.value,n?.value??i.value,l)}l&&l!==e&&(l===ue.session?sessionStorage:localStorage).removeItem(t.value)}})}),f(i,e=>{n&&(n.value=e)},{deep:!0,immediate:!0}),i}(xe,oe,
|
|
2
|
+
/* @__PURE__ */new Set),Le=t(()=>we.value?[...we.value].filter(e=>qe(se.value)||`${e}`.toLowerCase().includes(`${se.value}`.toLowerCase())&&e!==se.value).reverse():[]),$e=t(()=>xe?.value&&we.value&&we.value.size>0);const{HintSlot:Oe,hasHintLabelOrSlot:ke,hasInvalidLabelOrSlot:_e,hintSlotScope:Be}=function(e,i){const n=t(()=>l(e)?e.value:e),r=t(()=>Re(n.value.invalidLabel)),u=t(()=>Re(n.value.validLabel)),s=t(()=>n.value.loadingLabel),d=t(()=>n.value.hintLabel),v=t(()=>Boolean(n.value.loading&&(i.loading||s.value))),f=t(()=>!v.value&&Boolean(n.value.invalid&&(i.invalid||r.value))),c=t(()=>!v.value&&!f.value&&Boolean(n.value.valid&&(i.valid||u.value))),p=t(()=>!v.value&&!f.value&&!c.value&&Boolean(i.hint||d.value)),m=t(()=>f.value||c.value||v.value||p.value),b=t(()=>({modelValue:n.value.modelValue,valid:n.value.valid,invalid:n.value.invalid,loading:n.value.loading})),g=a({name:"HintSlot",props:{tag:{type:String,default:"small"}},setup:()=>({isVisible:m,invalidLabel:r,validLabel:u,loadingLabel:s,hintLabel:d,hasInvalidLabelOrSlot:f,hasValidLabelOrSlot:c,hasLoadingLabelOrSlot:v,hasHintLabelOrSlot:p}),render(){if(this.isVisible){let e;return this.hasInvalidLabelOrSlot&&(e="alert"),this.hasValidLabelOrSlot&&(e="status"),this.hasLoadingLabelOrSlot?o(this.tag,{role:e},this.$slots.loading?.()??this.loadingLabel):this.hasInvalidLabelOrSlot?o(this.tag,{role:e},this.$slots.invalid?.()??this.$slots.invalid??this.invalidLabel):this.hasValidLabelOrSlot?o(this.tag,{role:e},this.$slots.valid?.()??this.validLabel):o(this.tag,{role:e},this.$slots.hint?.()??this.$slots.hint??this.hintLabel)}return null}});return{hasInvalidLabelOrSlot:f,hasHintLabelOrSlot:p,hasValidLabelOrSlot:c,hasLoadingLabelOrSlot:v,hintSlotScope:b,HintSlot:g}}(B,w),Ee=Ue("vv-textarea",X,t(()=>({valid:U.value,invalid:G.value,loading:Q.value,disabled:d.disabled,readonly:d.readonly,required:d.required,"icon-before":void 0!==de.value,"icon-after":void 0!==ve.value,floating:d.floating&&!qe(d.label),dirty:ye.value,focus:ce.value,resizable:d.resizable}))),Ve=t(()=>({name:d.name,placeholder:re.value,tabindex:he.value,disabled:d.disabled,readonly:d.readonly,required:d.required,autocomplete:d.autocomplete,minlength:d.minlength,maxlength:d.maxlength,cols:d.cols,rows:d.rows,wrap:d.wrap,spellcheck:d.spellcheck,"aria-invalid":Se.value,"aria-describedby":ke.value?ne.value:void 0,"aria-errormessage":_e.value?ne.value:void 0})),Ie=t(()=>({valid:d.valid,invalid:d.invalid,modelValue:d.modelValue,hintLabel:d.hintLabel,maxlength:d.maxlength,minlength:d.minlength,clear:je}));function je(){se.value=void 0}return(t,a)=>(p(),c("div",{class:O(e(Ee))},[e(M)?(p(),c("label",{key:0,for:e(ie),class:"vv-textarea__label"},A(e(M)),9,at)):_("v-if",!0),$("div",{ref_key:"wrapperEl",ref:V,class:"vv-textarea__wrapper"},[t.$slots.before?(p(),c("div",ot,[g(t.$slots,"before",h(y(e(Ie))))])):_("v-if",!0),$("div",it,[e(de)?(p(),I(tt,x({key:0},e(de),{class:"vv-textarea__icon"}),null,16)):_("v-if",!0),L($("textarea",x({id:e(ie),ref_key:"textareaEl",ref:E,"onUpdate:modelValue":a[0]||(a[0]=e=>l(se)?se.value=e:null)},e(Ve),{onKeyup:a[1]||(a[1]=e=>S("keyup",e))}),null,16,nt),[[F,e(se)]]),e(ve)?(p(),I(tt,x({key:1},e(ve),{class:"vv-textarea__icon vv-textarea__icon-after"}),null,16)):_("v-if",!0)]),t.$slots.after?(p(),c("div",rt,[g(t.$slots,"after",h(y(e(Ie))))])):_("v-if",!0),e(K)?(p(),c("span",ut,[g(t.$slots,"count",h(y(e(Ie))),()=>[j(A(e(be)),1)])])):_("v-if",!0)],512),m(e(Oe),{id:e(ne),class:"vv-textarea__hint"},C({_:2},[t.$slots.hint?{name:"hint",fn:b(()=>[g(t.$slots,"hint",h(y(e(Be))))]),key:"0"}:void 0,t.$slots.loading?{name:"loading",fn:b(()=>[g(t.$slots,"loading",h(y(e(Be))))]),key:"1"}:void 0,t.$slots.valid?{name:"valid",fn:b(()=>[g(t.$slots,"valid",h(y(e(Be))))]),key:"2"}:void 0,t.$slots.invalid?{name:"invalid",fn:b(()=>[g(t.$slots,"invalid",h(y(e(Be))))]),key:"3"}:void 0]),1032,["id"]),e($e)?(p(),I(Qe,{key:1,ref_key:"suggestionsDropdownEl",ref:N,reference:e(V),"autofocus-first":!1,"trigger-width":!0},{items:b(()=>[(p(!0),c(n,null,z(e(Le),l=>(p(),I(Ze,{key:l,onClick:D(e=>{return t=l,se.value=t,N.value?.hide(),void S("suggestion:selected",t);var t},["stop"])},{default:b(()=>[$("div",st,[g(t.$slots,"suggestion",x({ref_for:!0},{value:l}),()=>[j(A(l),1)])]),e(we)&&e(fe)?(p(),c("button",{key:0,type:"button",tabindex:"-1",class:"cursor-pointer",title:e(W),onClick:D(e=>{return t=l,we.value?.delete(t),void S("suggestion:removed",t);var t},["stop"])},[m(tt,x({ref_for:!0},e(fe)),null,16)],8,dt)):_("v-if",!0)]),_:2},1032,["onClick"]))),128))]),_:3},8,["reference"])):_("v-if",!0)],2))}});export{vt as default};
|