@volverjs/ui-vue 0.0.10 → 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.
Files changed (94) hide show
  1. package/bin/icons.js +1 -93
  2. package/dist/components/VvAccordion/VvAccordion.es.js +1 -366
  3. package/dist/components/VvAccordion/VvAccordion.vue.d.ts +2 -1
  4. package/dist/components/VvAccordionGroup/VvAccordionGroup.es.js +2 -702
  5. package/dist/components/VvAccordionGroup/VvAccordionGroup.vue.d.ts +3 -2
  6. package/dist/components/VvAction/VvAction.es.js +1 -302
  7. package/dist/components/VvAction/VvAction.vue.d.ts +2 -1
  8. package/dist/components/VvAlert/VvAlert.es.js +1 -527
  9. package/dist/components/VvAlert/VvAlert.umd.js +1 -1
  10. package/dist/components/VvAlert/VvAlert.vue.d.ts +2 -1
  11. package/dist/components/VvAlertGroup/VvAlertGroup.es.js +1 -730
  12. package/dist/components/VvAlertGroup/VvAlertGroup.umd.js +1 -1
  13. package/dist/components/VvAlertGroup/VvAlertGroup.vue.d.ts +2 -1
  14. package/dist/components/VvAvatar/VvAvatar.es.js +1 -132
  15. package/dist/components/VvAvatar/VvAvatar.vue.d.ts +2 -1
  16. package/dist/components/VvAvatarGroup/VvAvatarGroup.es.js +1 -250
  17. package/dist/components/VvAvatarGroup/VvAvatarGroup.vue.d.ts +2 -1
  18. package/dist/components/VvBadge/VvBadge.es.js +1 -131
  19. package/dist/components/VvBadge/VvBadge.vue.d.ts +2 -1
  20. package/dist/components/VvBreadcrumb/VvBreadcrumb.es.js +1 -410
  21. package/dist/components/VvBreadcrumb/VvBreadcrumb.vue.d.ts +2 -1
  22. package/dist/components/VvButton/VvButton.es.js +1 -882
  23. package/dist/components/VvButton/VvButton.umd.js +1 -1
  24. package/dist/components/VvButton/VvButton.vue.d.ts +2 -1
  25. package/dist/components/VvButtonGroup/VvButtonGroup.es.js +1 -214
  26. package/dist/components/VvButtonGroup/VvButtonGroup.vue.d.ts +2 -1
  27. package/dist/components/VvCard/VvCard.es.js +1 -152
  28. package/dist/components/VvCard/VvCard.vue.d.ts +2 -1
  29. package/dist/components/VvCheckbox/VvCheckbox.es.js +1 -741
  30. package/dist/components/VvCheckbox/VvCheckbox.vue.d.ts +3 -2
  31. package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js +1 -981
  32. package/dist/components/VvCheckboxGroup/VvCheckboxGroup.vue.d.ts +2 -1
  33. package/dist/components/VvCombobox/VvCombobox.es.js +1 -3463
  34. package/dist/components/VvCombobox/VvCombobox.umd.js +1 -1
  35. package/dist/components/VvCombobox/VvCombobox.vue.d.ts +263 -317
  36. package/dist/components/VvDialog/VvDialog.es.js +1 -317
  37. package/dist/components/VvDialog/VvDialog.vue.d.ts +2 -1
  38. package/dist/components/VvDropdown/VvDropdown.es.js +1 -750
  39. package/dist/components/VvDropdown/VvDropdown.vue.d.ts +2 -1
  40. package/dist/components/VvDropdown/VvDropdownAction.vue.d.ts +5 -4
  41. package/dist/components/VvDropdown/VvDropdownItem.vue.d.ts +2 -1
  42. package/dist/components/VvDropdown/VvDropdownOptgroup.vue.d.ts +10 -2
  43. package/dist/components/VvDropdown/VvDropdownOption.vue.d.ts +2 -1
  44. package/dist/components/VvDropdownAction/VvDropdownAction.es.js +1 -448
  45. package/dist/components/VvDropdownItem/VvDropdownItem.es.js +1 -149
  46. package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.es.js +1 -104
  47. package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.umd.js +1 -1
  48. package/dist/components/VvDropdownOption/VvDropdownOption.es.js +1 -281
  49. package/dist/components/VvIcon/VvIcon.es.js +1 -143
  50. package/dist/components/VvIcon/VvIcon.umd.js +1 -1
  51. package/dist/components/VvIcon/VvIcon.vue.d.ts +2 -1
  52. package/dist/components/VvInputFile/VvInputFile.es.js +1 -1704
  53. package/dist/components/VvInputFile/VvInputFile.umd.js +1 -1
  54. package/dist/components/VvInputFile/VvInputFile.vue.d.ts +2 -1
  55. package/dist/components/VvInputText/VvInputText.es.js +4 -2790
  56. package/dist/components/VvInputText/VvInputText.umd.js +1 -1
  57. package/dist/components/VvInputText/VvInputText.vue.d.ts +2 -1
  58. package/dist/components/VvNav/VvNav.es.js +1 -438
  59. package/dist/components/VvNav/VvNav.vue.d.ts +2 -1
  60. package/dist/components/VvNav/VvNavItem.vue.d.ts +2 -1
  61. package/dist/components/VvNav/VvNavSeparator.vue.d.ts +2 -1
  62. package/dist/components/VvNavItem/VvNavItem.es.js +1 -337
  63. package/dist/components/VvNavSeparator/VvNavSeparator.es.js +1 -24
  64. package/dist/components/VvProgress/VvProgress.es.js +1 -163
  65. package/dist/components/VvProgress/VvProgress.vue.d.ts +2 -1
  66. package/dist/components/VvRadio/VvRadio.es.js +1 -661
  67. package/dist/components/VvRadio/VvRadio.vue.d.ts +3 -2
  68. package/dist/components/VvRadioGroup/VvRadioGroup.es.js +1 -901
  69. package/dist/components/VvRadioGroup/VvRadioGroup.vue.d.ts +2 -1
  70. package/dist/components/VvSelect/VvSelect.es.js +1 -1103
  71. package/dist/components/VvSelect/VvSelect.umd.js +1 -1
  72. package/dist/components/VvSelect/VvSelect.vue.d.ts +130 -71
  73. package/dist/components/VvTab/VvTab.es.js +1 -558
  74. package/dist/components/VvTab/VvTab.vue.d.ts +2 -1
  75. package/dist/components/VvTextarea/VvTextarea.es.js +2 -1989
  76. package/dist/components/VvTextarea/VvTextarea.umd.js +1 -1
  77. package/dist/components/VvTextarea/VvTextarea.vue.d.ts +2 -1
  78. package/dist/components/VvTooltip/VvTooltip.es.js +1 -154
  79. package/dist/components/VvTooltip/VvTooltip.vue.d.ts +2 -1
  80. package/dist/components/index.es.js +6 -8558
  81. package/dist/components/index.umd.js +1 -1
  82. package/dist/composables/index.es.js +2 -247
  83. package/dist/composables/index.umd.js +1 -1
  84. package/dist/directives/index.es.js +2 -311
  85. package/dist/directives/index.umd.js +1 -1
  86. package/dist/directives/v-contextmenu.es.js +2 -142
  87. package/dist/directives/v-contextmenu.umd.js +1 -1
  88. package/dist/directives/v-tooltip.es.js +1 -172
  89. package/dist/icons.es.js +1 -39
  90. package/dist/icons.umd.js +1 -1
  91. package/dist/index.es.js +1 -219
  92. package/dist/resolvers/unplugin.es.js +1 -187
  93. package/dist/stories/AccordionGroup/AccordionGroupSlots.stories.d.ts +14 -14
  94. package/package.json +37 -37
@@ -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
- import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
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: _ctx.inline,
1406
- width: _ctx.width,
1407
- height: _ctx.height,
1408
- horizontalFlip: _ctx.horizontalFlip,
1409
- verticalFlip: _ctx.verticalFlip,
1410
- flip: _ctx.flip,
1411
- rotate: unref(hasRotate),
1412
- color: _ctx.color,
1413
- icon: unref(icon)
1414
- }, { onLoad: _ctx.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};