@volverjs/ui-vue 0.0.10-beta.54 → 0.0.10-beta.55
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/dist/components/VvCombobox/VvCombobox.es.js +357 -357
- package/dist/components/VvCombobox/VvCombobox.umd.js +1 -1
- package/dist/components/VvInputText/VvInputText.es.js +17 -19
- package/dist/components/VvInputText/VvInputText.umd.js +1 -1
- package/dist/components/VvTextarea/VvTextarea.es.js +966 -67
- package/dist/components/VvTextarea/VvTextarea.umd.js +1 -1
- package/dist/components/VvTextarea/VvTextarea.vue.d.ts +52 -0
- package/dist/components/VvTextarea/index.d.ts +37 -1
- package/dist/components/index.es.js +445 -295
- package/dist/components/index.umd.js +1 -1
- package/dist/icons.es.js +3 -3
- package/dist/icons.umd.js +1 -1
- package/package.json +22 -22
- package/src/assets/icons/detailed.json +1 -1
- package/src/assets/icons/normal.json +1 -1
- package/src/assets/icons/simple.json +1 -1
- package/src/components/VvCombobox/VvCombobox.vue +3 -3
- package/src/components/VvInputText/VvInputText.vue +18 -20
- package/src/components/VvTextarea/VvTextarea.vue +108 -5
- package/src/components/VvTextarea/index.ts +32 -1
|
@@ -79,188 +79,6 @@ const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
|
|
|
79
79
|
const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
|
|
80
80
|
"dropdownAction"
|
|
81
81
|
);
|
|
82
|
-
function equals(obj1, obj2, field) {
|
|
83
|
-
return deepEquals(obj1, obj2);
|
|
84
|
-
}
|
|
85
|
-
function deepEquals(a, b) {
|
|
86
|
-
if (a === b)
|
|
87
|
-
return true;
|
|
88
|
-
if (a && b && typeof a == "object" && typeof b == "object") {
|
|
89
|
-
const arrA = Array.isArray(a);
|
|
90
|
-
const arrB = Array.isArray(b);
|
|
91
|
-
let i, length, key;
|
|
92
|
-
if (arrA && arrB) {
|
|
93
|
-
length = a.length;
|
|
94
|
-
if (length !== b.length)
|
|
95
|
-
return false;
|
|
96
|
-
for (i = length; i-- !== 0; ) {
|
|
97
|
-
if (!deepEquals(a[i], b[i]))
|
|
98
|
-
return false;
|
|
99
|
-
}
|
|
100
|
-
return true;
|
|
101
|
-
}
|
|
102
|
-
if (arrA !== arrB)
|
|
103
|
-
return false;
|
|
104
|
-
const dateA = a instanceof Date;
|
|
105
|
-
const dateB = b instanceof Date;
|
|
106
|
-
if (dateA !== dateB)
|
|
107
|
-
return false;
|
|
108
|
-
if (dateA && dateB)
|
|
109
|
-
return a.getTime() === b.getTime();
|
|
110
|
-
const regexpA = a instanceof RegExp;
|
|
111
|
-
const regexpB = b instanceof RegExp;
|
|
112
|
-
if (regexpA !== regexpB)
|
|
113
|
-
return false;
|
|
114
|
-
if (regexpA && regexpB)
|
|
115
|
-
return a.toString() === b.toString();
|
|
116
|
-
const keys = Object.keys(a);
|
|
117
|
-
length = keys.length;
|
|
118
|
-
if (length !== Object.keys(b).length)
|
|
119
|
-
return false;
|
|
120
|
-
for (i = length; i-- !== 0; ) {
|
|
121
|
-
if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
|
|
122
|
-
return false;
|
|
123
|
-
}
|
|
124
|
-
for (i = length; i-- !== 0; ) {
|
|
125
|
-
key = keys[i];
|
|
126
|
-
if (!deepEquals(a[key], b[key]))
|
|
127
|
-
return false;
|
|
128
|
-
}
|
|
129
|
-
return true;
|
|
130
|
-
}
|
|
131
|
-
return Number.isNaN(a) && Number.isNaN(b);
|
|
132
|
-
}
|
|
133
|
-
function contains(value, list) {
|
|
134
|
-
if (value != null && list && list.length) {
|
|
135
|
-
for (const val of list) {
|
|
136
|
-
if (equals(value, val)) {
|
|
137
|
-
return true;
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
return false;
|
|
142
|
-
}
|
|
143
|
-
function isString(value) {
|
|
144
|
-
return typeof value === "string" || value instanceof String;
|
|
145
|
-
}
|
|
146
|
-
function joinLines(items) {
|
|
147
|
-
if (Array.isArray(items)) {
|
|
148
|
-
return items.filter((item) => isString(item)).join(" ");
|
|
149
|
-
}
|
|
150
|
-
return items;
|
|
151
|
-
}
|
|
152
|
-
function HintSlotFactory(propsOrRef, slots) {
|
|
153
|
-
const props = computed(() => {
|
|
154
|
-
if (isRef(propsOrRef)) {
|
|
155
|
-
return propsOrRef.value;
|
|
156
|
-
}
|
|
157
|
-
return propsOrRef;
|
|
158
|
-
});
|
|
159
|
-
const invalidLabel = computed(() => joinLines(props.value.invalidLabel));
|
|
160
|
-
const validLabel = computed(() => joinLines(props.value.validLabel));
|
|
161
|
-
const loadingLabel = computed(() => props.value.loadingLabel);
|
|
162
|
-
const hintLabel = computed(() => props.value.hintLabel);
|
|
163
|
-
const hasLoadingLabelOrSlot = computed(
|
|
164
|
-
() => Boolean(props.value.loading && (slots.loading || loadingLabel.value))
|
|
165
|
-
);
|
|
166
|
-
const hasInvalidLabelOrSlot = computed(
|
|
167
|
-
() => !hasLoadingLabelOrSlot.value && Boolean(
|
|
168
|
-
props.value.invalid && (slots.invalid || invalidLabel.value)
|
|
169
|
-
)
|
|
170
|
-
);
|
|
171
|
-
const hasValidLabelOrSlot = computed(
|
|
172
|
-
() => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.value.valid && (slots.valid || validLabel.value))
|
|
173
|
-
);
|
|
174
|
-
const hasHintLabelOrSlot = computed(
|
|
175
|
-
() => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && !hasValidLabelOrSlot.value && Boolean(slots.hint || hintLabel.value)
|
|
176
|
-
);
|
|
177
|
-
const isVisible = computed(
|
|
178
|
-
() => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
|
|
179
|
-
);
|
|
180
|
-
const hintSlotScope = computed(() => ({
|
|
181
|
-
modelValue: props.value.modelValue,
|
|
182
|
-
valid: props.value.valid,
|
|
183
|
-
invalid: props.value.invalid,
|
|
184
|
-
loading: props.value.loading
|
|
185
|
-
}));
|
|
186
|
-
const HintSlot = defineComponent({
|
|
187
|
-
name: "HintSlot",
|
|
188
|
-
props: {
|
|
189
|
-
tag: {
|
|
190
|
-
type: String,
|
|
191
|
-
default: "small"
|
|
192
|
-
}
|
|
193
|
-
},
|
|
194
|
-
setup() {
|
|
195
|
-
return {
|
|
196
|
-
isVisible,
|
|
197
|
-
invalidLabel,
|
|
198
|
-
validLabel,
|
|
199
|
-
loadingLabel,
|
|
200
|
-
hintLabel,
|
|
201
|
-
hasInvalidLabelOrSlot,
|
|
202
|
-
hasValidLabelOrSlot,
|
|
203
|
-
hasLoadingLabelOrSlot,
|
|
204
|
-
hasHintLabelOrSlot
|
|
205
|
-
};
|
|
206
|
-
},
|
|
207
|
-
render() {
|
|
208
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
209
|
-
if (this.isVisible) {
|
|
210
|
-
let role;
|
|
211
|
-
if (this.hasInvalidLabelOrSlot) {
|
|
212
|
-
role = "alert";
|
|
213
|
-
}
|
|
214
|
-
if (this.hasValidLabelOrSlot) {
|
|
215
|
-
role = "status";
|
|
216
|
-
}
|
|
217
|
-
if (this.hasLoadingLabelOrSlot) {
|
|
218
|
-
return h(
|
|
219
|
-
this.tag,
|
|
220
|
-
{
|
|
221
|
-
role
|
|
222
|
-
},
|
|
223
|
-
((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
|
|
224
|
-
);
|
|
225
|
-
}
|
|
226
|
-
if (this.hasInvalidLabelOrSlot) {
|
|
227
|
-
return h(
|
|
228
|
-
this.tag,
|
|
229
|
-
{
|
|
230
|
-
role
|
|
231
|
-
},
|
|
232
|
-
((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
|
|
233
|
-
);
|
|
234
|
-
}
|
|
235
|
-
if (this.hasValidLabelOrSlot) {
|
|
236
|
-
return h(
|
|
237
|
-
this.tag,
|
|
238
|
-
{
|
|
239
|
-
role
|
|
240
|
-
},
|
|
241
|
-
((_f = (_e = this.$slots).valid) == null ? void 0 : _f.call(_e)) ?? this.validLabel
|
|
242
|
-
);
|
|
243
|
-
}
|
|
244
|
-
return h(
|
|
245
|
-
this.tag,
|
|
246
|
-
{
|
|
247
|
-
role
|
|
248
|
-
},
|
|
249
|
-
((_h = (_g = this.$slots).hint) == null ? void 0 : _h.call(_g)) ?? this.$slots.hint ?? this.hintLabel
|
|
250
|
-
);
|
|
251
|
-
}
|
|
252
|
-
return null;
|
|
253
|
-
}
|
|
254
|
-
});
|
|
255
|
-
return {
|
|
256
|
-
hasInvalidLabelOrSlot,
|
|
257
|
-
hasHintLabelOrSlot,
|
|
258
|
-
hasValidLabelOrSlot,
|
|
259
|
-
hasLoadingLabelOrSlot,
|
|
260
|
-
hintSlotScope,
|
|
261
|
-
HintSlot
|
|
262
|
-
};
|
|
263
|
-
}
|
|
264
82
|
const LinkProps = {
|
|
265
83
|
/**
|
|
266
84
|
* The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
|
|
@@ -634,6 +452,363 @@ const ActionProps = {
|
|
|
634
452
|
},
|
|
635
453
|
storageKey: String
|
|
636
454
|
});
|
|
455
|
+
const VvComboboxProps = {
|
|
456
|
+
...IdNameProps,
|
|
457
|
+
...TabindexProps,
|
|
458
|
+
...ValidProps,
|
|
459
|
+
...InvalidProps,
|
|
460
|
+
...HintProps,
|
|
461
|
+
...LoadingProps,
|
|
462
|
+
...DisabledProps,
|
|
463
|
+
...ReadonlyProps,
|
|
464
|
+
...ModifiersProps,
|
|
465
|
+
...OptionsProps,
|
|
466
|
+
...IconProps,
|
|
467
|
+
...FloatingLabelProps,
|
|
468
|
+
...DropdownProps,
|
|
469
|
+
...LabelProps,
|
|
470
|
+
...RequiredProps,
|
|
471
|
+
/**
|
|
472
|
+
* Dropdown show / hide transition name
|
|
473
|
+
*/
|
|
474
|
+
transitionName: {
|
|
475
|
+
type: String,
|
|
476
|
+
default: "vv-dropdown--mobile-fade-block"
|
|
477
|
+
},
|
|
478
|
+
/**
|
|
479
|
+
* modelValue can be a string, number, boolean, object or array of string, number, boolean, object
|
|
480
|
+
*/
|
|
481
|
+
modelValue: {
|
|
482
|
+
type: [String, Number, Boolean, Object, Array],
|
|
483
|
+
default: void 0
|
|
484
|
+
},
|
|
485
|
+
/**
|
|
486
|
+
* Label for no search results
|
|
487
|
+
*/
|
|
488
|
+
noResultsLabel: { type: String, default: "No results" },
|
|
489
|
+
/**
|
|
490
|
+
* Label for no options available
|
|
491
|
+
*/
|
|
492
|
+
noOptionsLabel: { type: String, default: "No options available" },
|
|
493
|
+
/**
|
|
494
|
+
* Label for selected option hint
|
|
495
|
+
*/
|
|
496
|
+
selectedHintLabel: { type: String, default: "Selected" },
|
|
497
|
+
/**
|
|
498
|
+
* Label for deselect action button
|
|
499
|
+
*/
|
|
500
|
+
deselectActionLabel: { type: String, default: "Deselect" },
|
|
501
|
+
/**
|
|
502
|
+
* Label for select option hint
|
|
503
|
+
*/
|
|
504
|
+
selectHintLabel: { type: String, default: "Press enter to select" },
|
|
505
|
+
/**
|
|
506
|
+
* Label for deselected option hint
|
|
507
|
+
*/
|
|
508
|
+
deselectHintLabel: { type: String, default: "Press enter to remove" },
|
|
509
|
+
/**
|
|
510
|
+
* Label close button
|
|
511
|
+
*/
|
|
512
|
+
closeLabel: { type: String, default: "Close" },
|
|
513
|
+
/**
|
|
514
|
+
* Select input placeholder
|
|
515
|
+
*/
|
|
516
|
+
placeholder: String,
|
|
517
|
+
/**
|
|
518
|
+
* Use input text to search on options
|
|
519
|
+
*/
|
|
520
|
+
searchable: Boolean,
|
|
521
|
+
/**
|
|
522
|
+
* Search function to filter options
|
|
523
|
+
*/
|
|
524
|
+
searchFunction: {
|
|
525
|
+
type: Function,
|
|
526
|
+
default: void 0
|
|
527
|
+
},
|
|
528
|
+
/**
|
|
529
|
+
* On searchable select is the input search placeholder
|
|
530
|
+
*/
|
|
531
|
+
searchPlaceholder: {
|
|
532
|
+
type: String,
|
|
533
|
+
default: "Search..."
|
|
534
|
+
},
|
|
535
|
+
/**
|
|
536
|
+
* The input search debounce time in ms
|
|
537
|
+
*/
|
|
538
|
+
debounceSearch: {
|
|
539
|
+
type: [Number, String],
|
|
540
|
+
default: 0
|
|
541
|
+
},
|
|
542
|
+
/**
|
|
543
|
+
* Manage modelValue as string[] or object[]
|
|
544
|
+
*/
|
|
545
|
+
multiple: Boolean,
|
|
546
|
+
/**
|
|
547
|
+
* The min number of selected values
|
|
548
|
+
*/
|
|
549
|
+
minValues: {
|
|
550
|
+
type: [Number, String],
|
|
551
|
+
default: 0
|
|
552
|
+
},
|
|
553
|
+
/**
|
|
554
|
+
* The max number of selected values
|
|
555
|
+
*/
|
|
556
|
+
maxValues: [Number, String],
|
|
557
|
+
/**
|
|
558
|
+
* If true the input will be unselectable
|
|
559
|
+
* @deprecated use minValues instead
|
|
560
|
+
*/
|
|
561
|
+
unselectable: { type: Boolean, default: true },
|
|
562
|
+
/**
|
|
563
|
+
* The select label separator visible to the user
|
|
564
|
+
*/
|
|
565
|
+
separator: { type: String, default: ", " },
|
|
566
|
+
/**
|
|
567
|
+
* Show native select
|
|
568
|
+
*/
|
|
569
|
+
native: Boolean,
|
|
570
|
+
/**
|
|
571
|
+
* Show badges
|
|
572
|
+
*/
|
|
573
|
+
badges: Boolean,
|
|
574
|
+
/**
|
|
575
|
+
* Badge modifiers
|
|
576
|
+
*/
|
|
577
|
+
badgeModifiers: {
|
|
578
|
+
type: [String, Array],
|
|
579
|
+
default: "action sm"
|
|
580
|
+
},
|
|
581
|
+
/**
|
|
582
|
+
* Set dropdown width to the same as the trigger
|
|
583
|
+
*/
|
|
584
|
+
triggerWidth: {
|
|
585
|
+
...DropdownProps.triggerWidth,
|
|
586
|
+
default: true
|
|
587
|
+
},
|
|
588
|
+
/**
|
|
589
|
+
* Dropdown modifiers
|
|
590
|
+
*/
|
|
591
|
+
dropdownModifiers: {
|
|
592
|
+
type: [String, Array],
|
|
593
|
+
default: "mobile"
|
|
594
|
+
},
|
|
595
|
+
/**
|
|
596
|
+
* Open dropdown on focus
|
|
597
|
+
*/
|
|
598
|
+
autoOpen: {
|
|
599
|
+
type: Boolean,
|
|
600
|
+
default: false
|
|
601
|
+
},
|
|
602
|
+
/**
|
|
603
|
+
* Select first option automatically
|
|
604
|
+
*/
|
|
605
|
+
autoselectFirst: {
|
|
606
|
+
type: Boolean,
|
|
607
|
+
default: false
|
|
608
|
+
},
|
|
609
|
+
/**
|
|
610
|
+
* Keep open dropdown on single select
|
|
611
|
+
*/
|
|
612
|
+
keepOpen: {
|
|
613
|
+
type: Boolean,
|
|
614
|
+
default: false
|
|
615
|
+
}
|
|
616
|
+
};
|
|
617
|
+
function useVvComboboxProps() {
|
|
618
|
+
return {
|
|
619
|
+
...VvComboboxProps,
|
|
620
|
+
options: {
|
|
621
|
+
...VvComboboxProps.options,
|
|
622
|
+
type: Array
|
|
623
|
+
},
|
|
624
|
+
searchFunction: {
|
|
625
|
+
...VvComboboxProps.searchFunction,
|
|
626
|
+
type: Function
|
|
627
|
+
}
|
|
628
|
+
};
|
|
629
|
+
}
|
|
630
|
+
function equals(obj1, obj2, field) {
|
|
631
|
+
return deepEquals(obj1, obj2);
|
|
632
|
+
}
|
|
633
|
+
function deepEquals(a, b) {
|
|
634
|
+
if (a === b)
|
|
635
|
+
return true;
|
|
636
|
+
if (a && b && typeof a == "object" && typeof b == "object") {
|
|
637
|
+
const arrA = Array.isArray(a);
|
|
638
|
+
const arrB = Array.isArray(b);
|
|
639
|
+
let i, length, key;
|
|
640
|
+
if (arrA && arrB) {
|
|
641
|
+
length = a.length;
|
|
642
|
+
if (length !== b.length)
|
|
643
|
+
return false;
|
|
644
|
+
for (i = length; i-- !== 0; ) {
|
|
645
|
+
if (!deepEquals(a[i], b[i]))
|
|
646
|
+
return false;
|
|
647
|
+
}
|
|
648
|
+
return true;
|
|
649
|
+
}
|
|
650
|
+
if (arrA !== arrB)
|
|
651
|
+
return false;
|
|
652
|
+
const dateA = a instanceof Date;
|
|
653
|
+
const dateB = b instanceof Date;
|
|
654
|
+
if (dateA !== dateB)
|
|
655
|
+
return false;
|
|
656
|
+
if (dateA && dateB)
|
|
657
|
+
return a.getTime() === b.getTime();
|
|
658
|
+
const regexpA = a instanceof RegExp;
|
|
659
|
+
const regexpB = b instanceof RegExp;
|
|
660
|
+
if (regexpA !== regexpB)
|
|
661
|
+
return false;
|
|
662
|
+
if (regexpA && regexpB)
|
|
663
|
+
return a.toString() === b.toString();
|
|
664
|
+
const keys = Object.keys(a);
|
|
665
|
+
length = keys.length;
|
|
666
|
+
if (length !== Object.keys(b).length)
|
|
667
|
+
return false;
|
|
668
|
+
for (i = length; i-- !== 0; ) {
|
|
669
|
+
if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
|
|
670
|
+
return false;
|
|
671
|
+
}
|
|
672
|
+
for (i = length; i-- !== 0; ) {
|
|
673
|
+
key = keys[i];
|
|
674
|
+
if (!deepEquals(a[key], b[key]))
|
|
675
|
+
return false;
|
|
676
|
+
}
|
|
677
|
+
return true;
|
|
678
|
+
}
|
|
679
|
+
return Number.isNaN(a) && Number.isNaN(b);
|
|
680
|
+
}
|
|
681
|
+
function contains(value, list) {
|
|
682
|
+
if (value != null && list && list.length) {
|
|
683
|
+
for (const val of list) {
|
|
684
|
+
if (equals(value, val)) {
|
|
685
|
+
return true;
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
}
|
|
689
|
+
return false;
|
|
690
|
+
}
|
|
691
|
+
function isString(value) {
|
|
692
|
+
return typeof value === "string" || value instanceof String;
|
|
693
|
+
}
|
|
694
|
+
function joinLines(items) {
|
|
695
|
+
if (Array.isArray(items)) {
|
|
696
|
+
return items.filter((item) => isString(item)).join(" ");
|
|
697
|
+
}
|
|
698
|
+
return items;
|
|
699
|
+
}
|
|
700
|
+
function HintSlotFactory(propsOrRef, slots) {
|
|
701
|
+
const props = computed(() => {
|
|
702
|
+
if (isRef(propsOrRef)) {
|
|
703
|
+
return propsOrRef.value;
|
|
704
|
+
}
|
|
705
|
+
return propsOrRef;
|
|
706
|
+
});
|
|
707
|
+
const invalidLabel = computed(() => joinLines(props.value.invalidLabel));
|
|
708
|
+
const validLabel = computed(() => joinLines(props.value.validLabel));
|
|
709
|
+
const loadingLabel = computed(() => props.value.loadingLabel);
|
|
710
|
+
const hintLabel = computed(() => props.value.hintLabel);
|
|
711
|
+
const hasLoadingLabelOrSlot = computed(
|
|
712
|
+
() => Boolean(props.value.loading && (slots.loading || loadingLabel.value))
|
|
713
|
+
);
|
|
714
|
+
const hasInvalidLabelOrSlot = computed(
|
|
715
|
+
() => !hasLoadingLabelOrSlot.value && Boolean(
|
|
716
|
+
props.value.invalid && (slots.invalid || invalidLabel.value)
|
|
717
|
+
)
|
|
718
|
+
);
|
|
719
|
+
const hasValidLabelOrSlot = computed(
|
|
720
|
+
() => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.value.valid && (slots.valid || validLabel.value))
|
|
721
|
+
);
|
|
722
|
+
const hasHintLabelOrSlot = computed(
|
|
723
|
+
() => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && !hasValidLabelOrSlot.value && Boolean(slots.hint || hintLabel.value)
|
|
724
|
+
);
|
|
725
|
+
const isVisible = computed(
|
|
726
|
+
() => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
|
|
727
|
+
);
|
|
728
|
+
const hintSlotScope = computed(() => ({
|
|
729
|
+
modelValue: props.value.modelValue,
|
|
730
|
+
valid: props.value.valid,
|
|
731
|
+
invalid: props.value.invalid,
|
|
732
|
+
loading: props.value.loading
|
|
733
|
+
}));
|
|
734
|
+
const HintSlot = defineComponent({
|
|
735
|
+
name: "HintSlot",
|
|
736
|
+
props: {
|
|
737
|
+
tag: {
|
|
738
|
+
type: String,
|
|
739
|
+
default: "small"
|
|
740
|
+
}
|
|
741
|
+
},
|
|
742
|
+
setup() {
|
|
743
|
+
return {
|
|
744
|
+
isVisible,
|
|
745
|
+
invalidLabel,
|
|
746
|
+
validLabel,
|
|
747
|
+
loadingLabel,
|
|
748
|
+
hintLabel,
|
|
749
|
+
hasInvalidLabelOrSlot,
|
|
750
|
+
hasValidLabelOrSlot,
|
|
751
|
+
hasLoadingLabelOrSlot,
|
|
752
|
+
hasHintLabelOrSlot
|
|
753
|
+
};
|
|
754
|
+
},
|
|
755
|
+
render() {
|
|
756
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
757
|
+
if (this.isVisible) {
|
|
758
|
+
let role;
|
|
759
|
+
if (this.hasInvalidLabelOrSlot) {
|
|
760
|
+
role = "alert";
|
|
761
|
+
}
|
|
762
|
+
if (this.hasValidLabelOrSlot) {
|
|
763
|
+
role = "status";
|
|
764
|
+
}
|
|
765
|
+
if (this.hasLoadingLabelOrSlot) {
|
|
766
|
+
return h(
|
|
767
|
+
this.tag,
|
|
768
|
+
{
|
|
769
|
+
role
|
|
770
|
+
},
|
|
771
|
+
((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
|
|
772
|
+
);
|
|
773
|
+
}
|
|
774
|
+
if (this.hasInvalidLabelOrSlot) {
|
|
775
|
+
return h(
|
|
776
|
+
this.tag,
|
|
777
|
+
{
|
|
778
|
+
role
|
|
779
|
+
},
|
|
780
|
+
((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
|
|
781
|
+
);
|
|
782
|
+
}
|
|
783
|
+
if (this.hasValidLabelOrSlot) {
|
|
784
|
+
return h(
|
|
785
|
+
this.tag,
|
|
786
|
+
{
|
|
787
|
+
role
|
|
788
|
+
},
|
|
789
|
+
((_f = (_e = this.$slots).valid) == null ? void 0 : _f.call(_e)) ?? this.validLabel
|
|
790
|
+
);
|
|
791
|
+
}
|
|
792
|
+
return h(
|
|
793
|
+
this.tag,
|
|
794
|
+
{
|
|
795
|
+
role
|
|
796
|
+
},
|
|
797
|
+
((_h = (_g = this.$slots).hint) == null ? void 0 : _h.call(_g)) ?? this.$slots.hint ?? this.hintLabel
|
|
798
|
+
);
|
|
799
|
+
}
|
|
800
|
+
return null;
|
|
801
|
+
}
|
|
802
|
+
});
|
|
803
|
+
return {
|
|
804
|
+
hasInvalidLabelOrSlot,
|
|
805
|
+
hasHintLabelOrSlot,
|
|
806
|
+
hasValidLabelOrSlot,
|
|
807
|
+
hasLoadingLabelOrSlot,
|
|
808
|
+
hintSlotScope,
|
|
809
|
+
HintSlot
|
|
810
|
+
};
|
|
811
|
+
}
|
|
637
812
|
const VvBadgeProps = {
|
|
638
813
|
...ModifiersProps,
|
|
639
814
|
value: [String, Number]
|
|
@@ -2407,181 +2582,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
2407
2582
|
};
|
|
2408
2583
|
}
|
|
2409
2584
|
});
|
|
2410
|
-
const VvComboboxProps = {
|
|
2411
|
-
...IdNameProps,
|
|
2412
|
-
...TabindexProps,
|
|
2413
|
-
...ValidProps,
|
|
2414
|
-
...InvalidProps,
|
|
2415
|
-
...HintProps,
|
|
2416
|
-
...LoadingProps,
|
|
2417
|
-
...DisabledProps,
|
|
2418
|
-
...ReadonlyProps,
|
|
2419
|
-
...ModifiersProps,
|
|
2420
|
-
...OptionsProps,
|
|
2421
|
-
...IconProps,
|
|
2422
|
-
...FloatingLabelProps,
|
|
2423
|
-
...DropdownProps,
|
|
2424
|
-
...LabelProps,
|
|
2425
|
-
...RequiredProps,
|
|
2426
|
-
/**
|
|
2427
|
-
* Dropdown show / hide transition name
|
|
2428
|
-
*/
|
|
2429
|
-
transitionName: {
|
|
2430
|
-
type: String,
|
|
2431
|
-
default: "vv-dropdown--mobile-fade-block"
|
|
2432
|
-
},
|
|
2433
|
-
/**
|
|
2434
|
-
* modelValue can be a string, number, boolean, object or array of string, number, boolean, object
|
|
2435
|
-
*/
|
|
2436
|
-
modelValue: {
|
|
2437
|
-
type: [String, Number, Boolean, Object, Array],
|
|
2438
|
-
default: void 0
|
|
2439
|
-
},
|
|
2440
|
-
/**
|
|
2441
|
-
* Label for no search results
|
|
2442
|
-
*/
|
|
2443
|
-
noResultsLabel: { type: String, default: "No results" },
|
|
2444
|
-
/**
|
|
2445
|
-
* Label for no options available
|
|
2446
|
-
*/
|
|
2447
|
-
noOptionsLabel: { type: String, default: "No options available" },
|
|
2448
|
-
/**
|
|
2449
|
-
* Label for selected option hint
|
|
2450
|
-
*/
|
|
2451
|
-
selectedHintLabel: { type: String, default: "Selected" },
|
|
2452
|
-
/**
|
|
2453
|
-
* Label for deselect action button
|
|
2454
|
-
*/
|
|
2455
|
-
deselectActionLabel: { type: String, default: "Deselect" },
|
|
2456
|
-
/**
|
|
2457
|
-
* Label for select option hint
|
|
2458
|
-
*/
|
|
2459
|
-
selectHintLabel: { type: String, default: "Press enter to select" },
|
|
2460
|
-
/**
|
|
2461
|
-
* Label for deselected option hint
|
|
2462
|
-
*/
|
|
2463
|
-
deselectHintLabel: { type: String, default: "Press enter to remove" },
|
|
2464
|
-
/**
|
|
2465
|
-
* Label close button
|
|
2466
|
-
*/
|
|
2467
|
-
closeLabel: { type: String, default: "Close" },
|
|
2468
|
-
/**
|
|
2469
|
-
* Select input placeholder
|
|
2470
|
-
*/
|
|
2471
|
-
placeholder: String,
|
|
2472
|
-
/**
|
|
2473
|
-
* Use input text to search on options
|
|
2474
|
-
*/
|
|
2475
|
-
searchable: Boolean,
|
|
2476
|
-
/**
|
|
2477
|
-
* Search function to filter options
|
|
2478
|
-
*/
|
|
2479
|
-
searchFunction: {
|
|
2480
|
-
type: Function,
|
|
2481
|
-
default: void 0
|
|
2482
|
-
},
|
|
2483
|
-
/**
|
|
2484
|
-
* On searchable select is the input search placeholder
|
|
2485
|
-
*/
|
|
2486
|
-
searchPlaceholder: {
|
|
2487
|
-
type: String,
|
|
2488
|
-
default: "Search..."
|
|
2489
|
-
},
|
|
2490
|
-
/**
|
|
2491
|
-
* The input search debounce time in ms
|
|
2492
|
-
*/
|
|
2493
|
-
debounceSearch: {
|
|
2494
|
-
type: [Number, String],
|
|
2495
|
-
default: 0
|
|
2496
|
-
},
|
|
2497
|
-
/**
|
|
2498
|
-
* Manage modelValue as string[] or object[]
|
|
2499
|
-
*/
|
|
2500
|
-
multiple: Boolean,
|
|
2501
|
-
/**
|
|
2502
|
-
* The min number of selected values
|
|
2503
|
-
*/
|
|
2504
|
-
minValues: {
|
|
2505
|
-
type: [Number, String],
|
|
2506
|
-
default: 0
|
|
2507
|
-
},
|
|
2508
|
-
/**
|
|
2509
|
-
* The max number of selected values
|
|
2510
|
-
*/
|
|
2511
|
-
maxValues: [Number, String],
|
|
2512
|
-
/**
|
|
2513
|
-
* If true the input will be unselectable
|
|
2514
|
-
* @deprecated use minValues instead
|
|
2515
|
-
*/
|
|
2516
|
-
unselectable: { type: Boolean, default: true },
|
|
2517
|
-
/**
|
|
2518
|
-
* The select label separator visible to the user
|
|
2519
|
-
*/
|
|
2520
|
-
separator: { type: String, default: ", " },
|
|
2521
|
-
/**
|
|
2522
|
-
* Show native select
|
|
2523
|
-
*/
|
|
2524
|
-
native: Boolean,
|
|
2525
|
-
/**
|
|
2526
|
-
* Show badges
|
|
2527
|
-
*/
|
|
2528
|
-
badges: Boolean,
|
|
2529
|
-
/**
|
|
2530
|
-
* Badge modifiers
|
|
2531
|
-
*/
|
|
2532
|
-
badgeModifiers: {
|
|
2533
|
-
type: [String, Array],
|
|
2534
|
-
default: "action sm"
|
|
2535
|
-
},
|
|
2536
|
-
/**
|
|
2537
|
-
* Set dropdown width to the same as the trigger
|
|
2538
|
-
*/
|
|
2539
|
-
triggerWidth: {
|
|
2540
|
-
...DropdownProps.triggerWidth,
|
|
2541
|
-
default: true
|
|
2542
|
-
},
|
|
2543
|
-
/**
|
|
2544
|
-
* Dropdown modifiers
|
|
2545
|
-
*/
|
|
2546
|
-
dropdownModifiers: {
|
|
2547
|
-
type: [String, Array],
|
|
2548
|
-
default: "mobile"
|
|
2549
|
-
},
|
|
2550
|
-
/**
|
|
2551
|
-
* Open dropdown on focus
|
|
2552
|
-
*/
|
|
2553
|
-
autoOpen: {
|
|
2554
|
-
type: Boolean,
|
|
2555
|
-
default: false
|
|
2556
|
-
},
|
|
2557
|
-
/**
|
|
2558
|
-
* Select first option automatically
|
|
2559
|
-
*/
|
|
2560
|
-
autoselectFirst: {
|
|
2561
|
-
type: Boolean,
|
|
2562
|
-
default: false
|
|
2563
|
-
},
|
|
2564
|
-
/**
|
|
2565
|
-
* Keep open dropdown on single select
|
|
2566
|
-
*/
|
|
2567
|
-
keepOpen: {
|
|
2568
|
-
type: Boolean,
|
|
2569
|
-
default: false
|
|
2570
|
-
}
|
|
2571
|
-
};
|
|
2572
|
-
function useVvComboboxProps() {
|
|
2573
|
-
return {
|
|
2574
|
-
...VvComboboxProps,
|
|
2575
|
-
options: {
|
|
2576
|
-
...VvComboboxProps.options,
|
|
2577
|
-
type: Array
|
|
2578
|
-
},
|
|
2579
|
-
searchFunction: {
|
|
2580
|
-
...VvComboboxProps.searchFunction,
|
|
2581
|
-
type: Function
|
|
2582
|
-
}
|
|
2583
|
-
};
|
|
2584
|
-
}
|
|
2585
2585
|
const _hoisted_1 = ["id"];
|
|
2586
2586
|
const _hoisted_2 = ["id", "for"];
|
|
2587
2587
|
const _hoisted_3 = ["id", "aria-controls", "placeholder"];
|