@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.
- package/bin/icons.js +1 -93
- package/dist/components/VvAccordion/VvAccordion.es.js +1 -366
- package/dist/components/VvAccordion/VvAccordion.vue.d.ts +2 -1
- package/dist/components/VvAccordionGroup/VvAccordionGroup.es.js +2 -702
- package/dist/components/VvAccordionGroup/VvAccordionGroup.vue.d.ts +3 -2
- package/dist/components/VvAction/VvAction.es.js +1 -302
- package/dist/components/VvAction/VvAction.vue.d.ts +2 -1
- package/dist/components/VvAlert/VvAlert.es.js +1 -527
- package/dist/components/VvAlert/VvAlert.umd.js +1 -1
- package/dist/components/VvAlert/VvAlert.vue.d.ts +2 -1
- package/dist/components/VvAlertGroup/VvAlertGroup.es.js +1 -730
- package/dist/components/VvAlertGroup/VvAlertGroup.umd.js +1 -1
- package/dist/components/VvAlertGroup/VvAlertGroup.vue.d.ts +2 -1
- package/dist/components/VvAvatar/VvAvatar.es.js +1 -132
- package/dist/components/VvAvatar/VvAvatar.vue.d.ts +2 -1
- package/dist/components/VvAvatarGroup/VvAvatarGroup.es.js +1 -250
- package/dist/components/VvAvatarGroup/VvAvatarGroup.vue.d.ts +2 -1
- package/dist/components/VvBadge/VvBadge.es.js +1 -131
- package/dist/components/VvBadge/VvBadge.vue.d.ts +2 -1
- package/dist/components/VvBreadcrumb/VvBreadcrumb.es.js +1 -410
- package/dist/components/VvBreadcrumb/VvBreadcrumb.vue.d.ts +2 -1
- package/dist/components/VvButton/VvButton.es.js +1 -882
- package/dist/components/VvButton/VvButton.umd.js +1 -1
- package/dist/components/VvButton/VvButton.vue.d.ts +2 -1
- package/dist/components/VvButtonGroup/VvButtonGroup.es.js +1 -214
- package/dist/components/VvButtonGroup/VvButtonGroup.vue.d.ts +2 -1
- package/dist/components/VvCard/VvCard.es.js +1 -152
- package/dist/components/VvCard/VvCard.vue.d.ts +2 -1
- package/dist/components/VvCheckbox/VvCheckbox.es.js +1 -741
- package/dist/components/VvCheckbox/VvCheckbox.vue.d.ts +3 -2
- package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js +1 -981
- package/dist/components/VvCheckboxGroup/VvCheckboxGroup.vue.d.ts +2 -1
- package/dist/components/VvCombobox/VvCombobox.es.js +1 -3463
- package/dist/components/VvCombobox/VvCombobox.umd.js +1 -1
- package/dist/components/VvCombobox/VvCombobox.vue.d.ts +263 -317
- package/dist/components/VvDialog/VvDialog.es.js +1 -317
- package/dist/components/VvDialog/VvDialog.vue.d.ts +2 -1
- package/dist/components/VvDropdown/VvDropdown.es.js +1 -750
- package/dist/components/VvDropdown/VvDropdown.vue.d.ts +2 -1
- package/dist/components/VvDropdown/VvDropdownAction.vue.d.ts +5 -4
- package/dist/components/VvDropdown/VvDropdownItem.vue.d.ts +2 -1
- package/dist/components/VvDropdown/VvDropdownOptgroup.vue.d.ts +10 -2
- package/dist/components/VvDropdown/VvDropdownOption.vue.d.ts +2 -1
- package/dist/components/VvDropdownAction/VvDropdownAction.es.js +1 -448
- package/dist/components/VvDropdownItem/VvDropdownItem.es.js +1 -149
- package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.es.js +1 -104
- package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.umd.js +1 -1
- package/dist/components/VvDropdownOption/VvDropdownOption.es.js +1 -281
- package/dist/components/VvIcon/VvIcon.es.js +1 -143
- package/dist/components/VvIcon/VvIcon.umd.js +1 -1
- package/dist/components/VvIcon/VvIcon.vue.d.ts +2 -1
- package/dist/components/VvInputFile/VvInputFile.es.js +1 -1704
- package/dist/components/VvInputFile/VvInputFile.umd.js +1 -1
- package/dist/components/VvInputFile/VvInputFile.vue.d.ts +2 -1
- package/dist/components/VvInputText/VvInputText.es.js +4 -2790
- package/dist/components/VvInputText/VvInputText.umd.js +1 -1
- package/dist/components/VvInputText/VvInputText.vue.d.ts +2 -1
- package/dist/components/VvNav/VvNav.es.js +1 -438
- package/dist/components/VvNav/VvNav.vue.d.ts +2 -1
- package/dist/components/VvNav/VvNavItem.vue.d.ts +2 -1
- package/dist/components/VvNav/VvNavSeparator.vue.d.ts +2 -1
- package/dist/components/VvNavItem/VvNavItem.es.js +1 -337
- package/dist/components/VvNavSeparator/VvNavSeparator.es.js +1 -24
- package/dist/components/VvProgress/VvProgress.es.js +1 -163
- package/dist/components/VvProgress/VvProgress.vue.d.ts +2 -1
- package/dist/components/VvRadio/VvRadio.es.js +1 -661
- package/dist/components/VvRadio/VvRadio.vue.d.ts +3 -2
- package/dist/components/VvRadioGroup/VvRadioGroup.es.js +1 -901
- package/dist/components/VvRadioGroup/VvRadioGroup.vue.d.ts +2 -1
- package/dist/components/VvSelect/VvSelect.es.js +1 -1103
- package/dist/components/VvSelect/VvSelect.umd.js +1 -1
- package/dist/components/VvSelect/VvSelect.vue.d.ts +130 -71
- package/dist/components/VvTab/VvTab.es.js +1 -558
- package/dist/components/VvTab/VvTab.vue.d.ts +2 -1
- package/dist/components/VvTextarea/VvTextarea.es.js +2 -1989
- package/dist/components/VvTextarea/VvTextarea.umd.js +1 -1
- package/dist/components/VvTextarea/VvTextarea.vue.d.ts +2 -1
- package/dist/components/VvTooltip/VvTooltip.es.js +1 -154
- package/dist/components/VvTooltip/VvTooltip.vue.d.ts +2 -1
- package/dist/components/index.es.js +6 -8558
- package/dist/components/index.umd.js +1 -1
- package/dist/composables/index.es.js +2 -247
- package/dist/composables/index.umd.js +1 -1
- package/dist/directives/index.es.js +2 -311
- package/dist/directives/index.umd.js +1 -1
- package/dist/directives/v-contextmenu.es.js +2 -142
- package/dist/directives/v-contextmenu.umd.js +1 -1
- package/dist/directives/v-tooltip.es.js +1 -172
- package/dist/icons.es.js +1 -39
- package/dist/icons.umd.js +1 -1
- package/dist/index.es.js +1 -219
- package/dist/resolvers/unplugin.es.js +1 -187
- package/dist/stories/AccordionGroup/AccordionGroupSlots.stories.d.ts +14 -14
- package/package.json +37 -37
|
@@ -1,981 +1 @@
|
|
|
1
|
-
import { computed, isRef, defineComponent, h, inject, toRef, toRefs, useId, unref, useSlots, ref, watchEffect, watch, onMounted, createElementBlock, openBlock, normalizeClass, withDirectives, renderSlot, createVNode, createElementVNode, vModelCheckbox, createTextVNode, toDisplayString, createSlots, withCtx, normalizeProps, guardReactiveProps, provide, createCommentVNode, Fragment, renderList, createBlock, mergeProps } from "vue";
|
|
2
|
-
import { useVModel } from "@vueuse/core";
|
|
3
|
-
import { getProperty } from "dot-prop";
|
|
4
|
-
var StorageType = /* @__PURE__ */ ((StorageType2) => {
|
|
5
|
-
StorageType2["local"] = "local";
|
|
6
|
-
StorageType2["session"] = "session";
|
|
7
|
-
return StorageType2;
|
|
8
|
-
})(StorageType || {});
|
|
9
|
-
var Side = /* @__PURE__ */ ((Side2) => {
|
|
10
|
-
Side2["left"] = "left";
|
|
11
|
-
Side2["right"] = "right";
|
|
12
|
-
Side2["top"] = "top";
|
|
13
|
-
Side2["bottom"] = "bottom";
|
|
14
|
-
return Side2;
|
|
15
|
-
})(Side || {});
|
|
16
|
-
var Position = /* @__PURE__ */ ((Position2) => {
|
|
17
|
-
Position2["before"] = "before";
|
|
18
|
-
Position2["after"] = "after";
|
|
19
|
-
return Position2;
|
|
20
|
-
})(Position || {});
|
|
21
|
-
var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
|
|
22
|
-
ButtonType2["button"] = "button";
|
|
23
|
-
ButtonType2["submit"] = "submit";
|
|
24
|
-
ButtonType2["reset"] = "reset";
|
|
25
|
-
return ButtonType2;
|
|
26
|
-
})(ButtonType || {});
|
|
27
|
-
var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
|
|
28
|
-
ActionTag2["nuxtLink"] = "nuxt-link";
|
|
29
|
-
ActionTag2["routerLink"] = "router-link";
|
|
30
|
-
ActionTag2["a"] = "a";
|
|
31
|
-
ActionTag2["button"] = "button";
|
|
32
|
-
return ActionTag2;
|
|
33
|
-
})(ActionTag || {});
|
|
34
|
-
const INJECTION_KEY_VOLVER = Symbol.for("volver");
|
|
35
|
-
const INJECTION_KEY_CHECK_GROUP = Symbol.for(
|
|
36
|
-
"checkGroup"
|
|
37
|
-
);
|
|
38
|
-
const ValidProps = {
|
|
39
|
-
/**
|
|
40
|
-
* Valid status
|
|
41
|
-
*/
|
|
42
|
-
valid: { type: Boolean, default: false },
|
|
43
|
-
/**
|
|
44
|
-
* Valid label
|
|
45
|
-
*/
|
|
46
|
-
validLabel: { type: [String, Array], default: void 0 }
|
|
47
|
-
};
|
|
48
|
-
const InvalidProps = {
|
|
49
|
-
/**
|
|
50
|
-
* Invalid status
|
|
51
|
-
*/
|
|
52
|
-
invalid: {
|
|
53
|
-
type: Boolean,
|
|
54
|
-
default: false
|
|
55
|
-
},
|
|
56
|
-
/**
|
|
57
|
-
* Invalid label
|
|
58
|
-
*/
|
|
59
|
-
invalidLabel: { type: [String, Array], default: void 0 }
|
|
60
|
-
};
|
|
61
|
-
const LoadingProps = {
|
|
62
|
-
/**
|
|
63
|
-
* Loading status
|
|
64
|
-
*/
|
|
65
|
-
loading: {
|
|
66
|
-
type: Boolean,
|
|
67
|
-
default: false
|
|
68
|
-
},
|
|
69
|
-
/**
|
|
70
|
-
* Loading label
|
|
71
|
-
*/
|
|
72
|
-
loadingLabel: {
|
|
73
|
-
type: String,
|
|
74
|
-
default: "Loading..."
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
const DisabledProps = {
|
|
78
|
-
/**
|
|
79
|
-
* Whether the form control is disabled
|
|
80
|
-
*/
|
|
81
|
-
disabled: {
|
|
82
|
-
type: Boolean,
|
|
83
|
-
default: false
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
const RequiredProps = {
|
|
87
|
-
/**
|
|
88
|
-
* Whether the form control is required
|
|
89
|
-
*/
|
|
90
|
-
required: {
|
|
91
|
-
type: Boolean,
|
|
92
|
-
default: false
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
const LabelProps = {
|
|
96
|
-
/**
|
|
97
|
-
* The item label
|
|
98
|
-
*/
|
|
99
|
-
label: {
|
|
100
|
-
type: [String, Number],
|
|
101
|
-
default: void 0
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
const ReadonlyProps = {
|
|
105
|
-
/**
|
|
106
|
-
* The value is not editable
|
|
107
|
-
*/
|
|
108
|
-
readonly: {
|
|
109
|
-
type: Boolean,
|
|
110
|
-
default: false
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
const ModifiersProps = {
|
|
114
|
-
/**
|
|
115
|
-
* Component BEM modifiers
|
|
116
|
-
*/
|
|
117
|
-
modifiers: {
|
|
118
|
-
type: [String, Array],
|
|
119
|
-
default: void 0
|
|
120
|
-
}
|
|
121
|
-
};
|
|
122
|
-
const HintProps = {
|
|
123
|
-
hintLabel: { type: String, default: "" }
|
|
124
|
-
};
|
|
125
|
-
const OptionsProps = {
|
|
126
|
-
/**
|
|
127
|
-
* List of options, can be string[] or object[]
|
|
128
|
-
*/
|
|
129
|
-
options: {
|
|
130
|
-
type: Array,
|
|
131
|
-
default: () => []
|
|
132
|
-
},
|
|
133
|
-
/**
|
|
134
|
-
* Used when options are objects: key to use for option label
|
|
135
|
-
*/
|
|
136
|
-
labelKey: { type: [String, Function], default: "label" },
|
|
137
|
-
/**
|
|
138
|
-
* Used when options are objects: key to use for option label
|
|
139
|
-
*/
|
|
140
|
-
valueKey: { type: [String, Function], default: "value" },
|
|
141
|
-
/**
|
|
142
|
-
* Used when options are objects: key to use for option disabled
|
|
143
|
-
*/
|
|
144
|
-
disabledKey: { type: [String, Function], default: "disabled" }
|
|
145
|
-
};
|
|
146
|
-
({
|
|
147
|
-
/**
|
|
148
|
-
* VvIcon position
|
|
149
|
-
*/
|
|
150
|
-
iconPosition: {
|
|
151
|
-
default: Position.before
|
|
152
|
-
}
|
|
153
|
-
});
|
|
154
|
-
const TabindexProps = {
|
|
155
|
-
/**
|
|
156
|
-
* Global attribute tabindex
|
|
157
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
|
|
158
|
-
*/
|
|
159
|
-
tabindex: { type: [String, Number], default: 0 }
|
|
160
|
-
};
|
|
161
|
-
const IdProps = {
|
|
162
|
-
/**
|
|
163
|
-
* Global attribute id
|
|
164
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
|
|
165
|
-
*/
|
|
166
|
-
id: [String, Number]
|
|
167
|
-
};
|
|
168
|
-
({
|
|
169
|
-
/**
|
|
170
|
-
* Dropdown placement
|
|
171
|
-
*/
|
|
172
|
-
placement: {
|
|
173
|
-
default: Side.bottom
|
|
174
|
-
}
|
|
175
|
-
});
|
|
176
|
-
const IdNameProps = {
|
|
177
|
-
...IdProps,
|
|
178
|
-
/**
|
|
179
|
-
* Input / Textarea name
|
|
180
|
-
* Name of the form control. Submitted with the form as part of a name/value pair
|
|
181
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
|
|
182
|
-
*/
|
|
183
|
-
name: { type: String, required: true }
|
|
184
|
-
};
|
|
185
|
-
const CheckboxRadioProps = {
|
|
186
|
-
...IdNameProps,
|
|
187
|
-
...TabindexProps,
|
|
188
|
-
...ValidProps,
|
|
189
|
-
...InvalidProps,
|
|
190
|
-
...HintProps,
|
|
191
|
-
...DisabledProps,
|
|
192
|
-
...ReadonlyProps,
|
|
193
|
-
...ModifiersProps,
|
|
194
|
-
...LabelProps,
|
|
195
|
-
...LoadingProps,
|
|
196
|
-
/**
|
|
197
|
-
* Input value
|
|
198
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
|
|
199
|
-
*/
|
|
200
|
-
value: {
|
|
201
|
-
type: [String, Number, Boolean],
|
|
202
|
-
default: void 0
|
|
203
|
-
},
|
|
204
|
-
/**
|
|
205
|
-
* Input value
|
|
206
|
-
*/
|
|
207
|
-
modelValue: {
|
|
208
|
-
type: [Object, Number, Boolean, String],
|
|
209
|
-
default: void 0
|
|
210
|
-
}
|
|
211
|
-
};
|
|
212
|
-
const CheckboxRadioGroupProps = {
|
|
213
|
-
...ValidProps,
|
|
214
|
-
...InvalidProps,
|
|
215
|
-
...OptionsProps,
|
|
216
|
-
...HintProps,
|
|
217
|
-
...DisabledProps,
|
|
218
|
-
...ReadonlyProps,
|
|
219
|
-
...ModifiersProps,
|
|
220
|
-
...LabelProps,
|
|
221
|
-
...LoadingProps,
|
|
222
|
-
...RequiredProps,
|
|
223
|
-
/**
|
|
224
|
-
* Input value
|
|
225
|
-
*/
|
|
226
|
-
modelValue: {
|
|
227
|
-
type: [String, Array, Boolean, Number, Symbol],
|
|
228
|
-
default: void 0
|
|
229
|
-
},
|
|
230
|
-
/**
|
|
231
|
-
* Input name
|
|
232
|
-
*/
|
|
233
|
-
name: { type: String, required: true },
|
|
234
|
-
/**
|
|
235
|
-
* If true, the group will be displayed in a vertical column
|
|
236
|
-
*/
|
|
237
|
-
vertical: {
|
|
238
|
-
type: Boolean,
|
|
239
|
-
default: false
|
|
240
|
-
}
|
|
241
|
-
};
|
|
242
|
-
({
|
|
243
|
-
/**
|
|
244
|
-
* Button type
|
|
245
|
-
*/
|
|
246
|
-
type: {
|
|
247
|
-
default: ButtonType.button
|
|
248
|
-
},
|
|
249
|
-
/**
|
|
250
|
-
* Default tag for the action
|
|
251
|
-
*/
|
|
252
|
-
defaultTag: {
|
|
253
|
-
default: ActionTag.button
|
|
254
|
-
}
|
|
255
|
-
});
|
|
256
|
-
({
|
|
257
|
-
storageType: {
|
|
258
|
-
default: StorageType.local
|
|
259
|
-
}
|
|
260
|
-
});
|
|
261
|
-
const VvCheckboxGroupProps = CheckboxRadioGroupProps;
|
|
262
|
-
const VvCheckboxGroupEvents = ["update:modelValue", "change"];
|
|
263
|
-
function equals(obj1, obj2, field) {
|
|
264
|
-
return deepEquals(obj1, obj2);
|
|
265
|
-
}
|
|
266
|
-
function deepEquals(a, b) {
|
|
267
|
-
if (a === b)
|
|
268
|
-
return true;
|
|
269
|
-
if (a && b && typeof a == "object" && typeof b == "object") {
|
|
270
|
-
const arrA = Array.isArray(a);
|
|
271
|
-
const arrB = Array.isArray(b);
|
|
272
|
-
let i, length, key;
|
|
273
|
-
if (arrA && arrB) {
|
|
274
|
-
length = a.length;
|
|
275
|
-
if (length !== b.length)
|
|
276
|
-
return false;
|
|
277
|
-
for (i = length; i-- !== 0; ) {
|
|
278
|
-
if (!deepEquals(a[i], b[i]))
|
|
279
|
-
return false;
|
|
280
|
-
}
|
|
281
|
-
return true;
|
|
282
|
-
}
|
|
283
|
-
if (arrA !== arrB)
|
|
284
|
-
return false;
|
|
285
|
-
const dateA = a instanceof Date;
|
|
286
|
-
const dateB = b instanceof Date;
|
|
287
|
-
if (dateA !== dateB)
|
|
288
|
-
return false;
|
|
289
|
-
if (dateA && dateB)
|
|
290
|
-
return a.getTime() === b.getTime();
|
|
291
|
-
const regexpA = a instanceof RegExp;
|
|
292
|
-
const regexpB = b instanceof RegExp;
|
|
293
|
-
if (regexpA !== regexpB)
|
|
294
|
-
return false;
|
|
295
|
-
if (regexpA && regexpB)
|
|
296
|
-
return a.toString() === b.toString();
|
|
297
|
-
const keys = Object.keys(a);
|
|
298
|
-
length = keys.length;
|
|
299
|
-
if (length !== Object.keys(b).length)
|
|
300
|
-
return false;
|
|
301
|
-
for (i = length; i-- !== 0; ) {
|
|
302
|
-
if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
|
|
303
|
-
return false;
|
|
304
|
-
}
|
|
305
|
-
for (i = length; i-- !== 0; ) {
|
|
306
|
-
key = keys[i];
|
|
307
|
-
if (!deepEquals(a[key], b[key]))
|
|
308
|
-
return false;
|
|
309
|
-
}
|
|
310
|
-
return true;
|
|
311
|
-
}
|
|
312
|
-
return Number.isNaN(a) && Number.isNaN(b);
|
|
313
|
-
}
|
|
314
|
-
function contains(value, list) {
|
|
315
|
-
if (value != null && list && list.length) {
|
|
316
|
-
for (const val of list) {
|
|
317
|
-
if (equals(value, val)) {
|
|
318
|
-
return true;
|
|
319
|
-
}
|
|
320
|
-
}
|
|
321
|
-
}
|
|
322
|
-
return false;
|
|
323
|
-
}
|
|
324
|
-
function isString(value) {
|
|
325
|
-
return typeof value === "string";
|
|
326
|
-
}
|
|
327
|
-
function joinLines(items) {
|
|
328
|
-
if (Array.isArray(items)) {
|
|
329
|
-
return items.filter((item) => isString(item)).join(" ");
|
|
330
|
-
}
|
|
331
|
-
return items;
|
|
332
|
-
}
|
|
333
|
-
function HintSlotFactory(propsOrRef, slots) {
|
|
334
|
-
const props = computed(() => {
|
|
335
|
-
if (isRef(propsOrRef)) {
|
|
336
|
-
return propsOrRef.value;
|
|
337
|
-
}
|
|
338
|
-
return propsOrRef;
|
|
339
|
-
});
|
|
340
|
-
const invalidLabel = computed(() => joinLines(props.value.invalidLabel));
|
|
341
|
-
const validLabel = computed(() => joinLines(props.value.validLabel));
|
|
342
|
-
const loadingLabel = computed(() => props.value.loadingLabel);
|
|
343
|
-
const hintLabel = computed(() => props.value.hintLabel);
|
|
344
|
-
const hasLoadingLabelOrSlot = computed(
|
|
345
|
-
() => Boolean(props.value.loading && (slots.loading || loadingLabel.value))
|
|
346
|
-
);
|
|
347
|
-
const hasInvalidLabelOrSlot = computed(
|
|
348
|
-
() => !hasLoadingLabelOrSlot.value && Boolean(
|
|
349
|
-
props.value.invalid && (slots.invalid || invalidLabel.value)
|
|
350
|
-
)
|
|
351
|
-
);
|
|
352
|
-
const hasValidLabelOrSlot = computed(
|
|
353
|
-
() => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.value.valid && (slots.valid || validLabel.value))
|
|
354
|
-
);
|
|
355
|
-
const hasHintLabelOrSlot = computed(
|
|
356
|
-
() => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && !hasValidLabelOrSlot.value && Boolean(slots.hint || hintLabel.value)
|
|
357
|
-
);
|
|
358
|
-
const isVisible = computed(
|
|
359
|
-
() => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
|
|
360
|
-
);
|
|
361
|
-
const hintSlotScope = computed(() => ({
|
|
362
|
-
modelValue: props.value.modelValue,
|
|
363
|
-
valid: props.value.valid,
|
|
364
|
-
invalid: props.value.invalid,
|
|
365
|
-
loading: props.value.loading
|
|
366
|
-
}));
|
|
367
|
-
const HintSlot = defineComponent({
|
|
368
|
-
name: "HintSlot",
|
|
369
|
-
props: {
|
|
370
|
-
tag: {
|
|
371
|
-
type: String,
|
|
372
|
-
default: "small"
|
|
373
|
-
}
|
|
374
|
-
},
|
|
375
|
-
setup() {
|
|
376
|
-
return {
|
|
377
|
-
isVisible,
|
|
378
|
-
invalidLabel,
|
|
379
|
-
validLabel,
|
|
380
|
-
loadingLabel,
|
|
381
|
-
hintLabel,
|
|
382
|
-
hasInvalidLabelOrSlot,
|
|
383
|
-
hasValidLabelOrSlot,
|
|
384
|
-
hasLoadingLabelOrSlot,
|
|
385
|
-
hasHintLabelOrSlot
|
|
386
|
-
};
|
|
387
|
-
},
|
|
388
|
-
render() {
|
|
389
|
-
if (this.isVisible) {
|
|
390
|
-
let role;
|
|
391
|
-
if (this.hasInvalidLabelOrSlot) {
|
|
392
|
-
role = "alert";
|
|
393
|
-
}
|
|
394
|
-
if (this.hasValidLabelOrSlot) {
|
|
395
|
-
role = "status";
|
|
396
|
-
}
|
|
397
|
-
if (this.hasLoadingLabelOrSlot) {
|
|
398
|
-
return h(
|
|
399
|
-
this.tag,
|
|
400
|
-
{
|
|
401
|
-
role
|
|
402
|
-
},
|
|
403
|
-
this.$slots.loading?.() ?? this.loadingLabel
|
|
404
|
-
);
|
|
405
|
-
}
|
|
406
|
-
if (this.hasInvalidLabelOrSlot) {
|
|
407
|
-
return h(
|
|
408
|
-
this.tag,
|
|
409
|
-
{
|
|
410
|
-
role
|
|
411
|
-
},
|
|
412
|
-
this.$slots.invalid?.() ?? this.$slots.invalid ?? this.invalidLabel
|
|
413
|
-
);
|
|
414
|
-
}
|
|
415
|
-
if (this.hasValidLabelOrSlot) {
|
|
416
|
-
return h(
|
|
417
|
-
this.tag,
|
|
418
|
-
{
|
|
419
|
-
role
|
|
420
|
-
},
|
|
421
|
-
this.$slots.valid?.() ?? this.validLabel
|
|
422
|
-
);
|
|
423
|
-
}
|
|
424
|
-
return h(
|
|
425
|
-
this.tag,
|
|
426
|
-
{
|
|
427
|
-
role
|
|
428
|
-
},
|
|
429
|
-
this.$slots.hint?.() ?? this.$slots.hint ?? this.hintLabel
|
|
430
|
-
);
|
|
431
|
-
}
|
|
432
|
-
return null;
|
|
433
|
-
}
|
|
434
|
-
});
|
|
435
|
-
return {
|
|
436
|
-
hasInvalidLabelOrSlot,
|
|
437
|
-
hasHintLabelOrSlot,
|
|
438
|
-
hasValidLabelOrSlot,
|
|
439
|
-
hasLoadingLabelOrSlot,
|
|
440
|
-
hintSlotScope,
|
|
441
|
-
HintSlot
|
|
442
|
-
};
|
|
443
|
-
}
|
|
444
|
-
function useGroupStateInject(groupKey) {
|
|
445
|
-
const group = inject(groupKey, void 0);
|
|
446
|
-
const isInGroup = computed(() => group !== void 0);
|
|
447
|
-
function getGroupOrLocalRef(propName, props, emit) {
|
|
448
|
-
const groupPropValue = group?.[propName];
|
|
449
|
-
if (groupPropValue) {
|
|
450
|
-
return computed({
|
|
451
|
-
get() {
|
|
452
|
-
return groupPropValue.value;
|
|
453
|
-
},
|
|
454
|
-
set(value) {
|
|
455
|
-
groupPropValue.value = value;
|
|
456
|
-
}
|
|
457
|
-
});
|
|
458
|
-
}
|
|
459
|
-
const propRef = toRef(props, propName);
|
|
460
|
-
return computed({
|
|
461
|
-
get() {
|
|
462
|
-
return propRef.value;
|
|
463
|
-
},
|
|
464
|
-
set(value) {
|
|
465
|
-
if (emit) {
|
|
466
|
-
emit(`update:${propName}`, value);
|
|
467
|
-
}
|
|
468
|
-
}
|
|
469
|
-
});
|
|
470
|
-
}
|
|
471
|
-
return {
|
|
472
|
-
group,
|
|
473
|
-
isInGroup,
|
|
474
|
-
getGroupOrLocalRef
|
|
475
|
-
};
|
|
476
|
-
}
|
|
477
|
-
const VvCheckboxProps = {
|
|
478
|
-
...CheckboxRadioProps,
|
|
479
|
-
...ModifiersProps,
|
|
480
|
-
/**
|
|
481
|
-
* If true, the input will be indeterminated
|
|
482
|
-
*/
|
|
483
|
-
indeterminate: Boolean,
|
|
484
|
-
/**
|
|
485
|
-
* Value associated with the unchecked state
|
|
486
|
-
*/
|
|
487
|
-
uncheckedValue: [String, Number, Boolean],
|
|
488
|
-
/**
|
|
489
|
-
* If true, the input will be displayed as a switch
|
|
490
|
-
*/
|
|
491
|
-
switch: Boolean
|
|
492
|
-
};
|
|
493
|
-
const VvCheckboxEvents = ["click", "update:modelValue", "change", "blur"];
|
|
494
|
-
function useGroupProps(props, emit) {
|
|
495
|
-
const { group, isInGroup, getGroupOrLocalRef } = useGroupStateInject(INJECTION_KEY_CHECK_GROUP);
|
|
496
|
-
const { id, switch: propsSwitch, indeterminate } = toRefs(props);
|
|
497
|
-
const modelValue = getGroupOrLocalRef("modelValue", props, emit);
|
|
498
|
-
const valid = getGroupOrLocalRef("valid", props);
|
|
499
|
-
const invalid = getGroupOrLocalRef("invalid", props);
|
|
500
|
-
const readonly = computed(
|
|
501
|
-
() => Boolean(props.readonly || group?.readonly.value)
|
|
502
|
-
);
|
|
503
|
-
const disabled = computed(
|
|
504
|
-
() => Boolean(props.disabled || group?.disabled.value)
|
|
505
|
-
);
|
|
506
|
-
return {
|
|
507
|
-
// local props
|
|
508
|
-
id,
|
|
509
|
-
propsSwitch,
|
|
510
|
-
indeterminate,
|
|
511
|
-
// global props
|
|
512
|
-
group,
|
|
513
|
-
isInGroup,
|
|
514
|
-
modelValue,
|
|
515
|
-
valid,
|
|
516
|
-
invalid,
|
|
517
|
-
readonly,
|
|
518
|
-
disabled
|
|
519
|
-
};
|
|
520
|
-
}
|
|
521
|
-
function useVolver() {
|
|
522
|
-
return inject(INJECTION_KEY_VOLVER, void 0);
|
|
523
|
-
}
|
|
524
|
-
function useDefaults(componentName, propsDefinition, props) {
|
|
525
|
-
const volver = useVolver();
|
|
526
|
-
const volverComponentDefaults = computed(() => {
|
|
527
|
-
if (!volver || !volver.defaults.value?.[componentName]) {
|
|
528
|
-
return void 0;
|
|
529
|
-
}
|
|
530
|
-
return volver.defaults.value[componentName];
|
|
531
|
-
});
|
|
532
|
-
return computed(() => {
|
|
533
|
-
if (volverComponentDefaults.value === void 0) {
|
|
534
|
-
return props;
|
|
535
|
-
}
|
|
536
|
-
const componentDefaults = volverComponentDefaults.value;
|
|
537
|
-
const simplifiedPropsDefinition = propsDefinition;
|
|
538
|
-
const simplifiedProps = props;
|
|
539
|
-
return Object.keys(simplifiedPropsDefinition).reduce((acc, key) => {
|
|
540
|
-
const propValue = simplifiedProps[key];
|
|
541
|
-
acc[key] = propValue;
|
|
542
|
-
if (key in componentDefaults) {
|
|
543
|
-
if (Array.isArray(simplifiedPropsDefinition[key])) {
|
|
544
|
-
const typeArray = simplifiedPropsDefinition[key];
|
|
545
|
-
if (typeArray.length) {
|
|
546
|
-
const typeFunction = typeArray[0];
|
|
547
|
-
if (typeFunction === propValue) {
|
|
548
|
-
acc[key] = componentDefaults[key];
|
|
549
|
-
}
|
|
550
|
-
}
|
|
551
|
-
}
|
|
552
|
-
if (typeof simplifiedPropsDefinition[key] === "function") {
|
|
553
|
-
const typeFunction = simplifiedPropsDefinition[key];
|
|
554
|
-
if (typeFunction() === propValue) {
|
|
555
|
-
acc[key] = componentDefaults[key];
|
|
556
|
-
}
|
|
557
|
-
}
|
|
558
|
-
if (typeof simplifiedPropsDefinition[key] === "object") {
|
|
559
|
-
let defaultValue = simplifiedPropsDefinition[key].default;
|
|
560
|
-
if (typeof defaultValue === "function") {
|
|
561
|
-
defaultValue = defaultValue();
|
|
562
|
-
}
|
|
563
|
-
if (typeof defaultValue === "object") {
|
|
564
|
-
if (JSON.stringify(defaultValue) === JSON.stringify(propValue)) {
|
|
565
|
-
acc[key] = componentDefaults[key];
|
|
566
|
-
}
|
|
567
|
-
} else if (defaultValue === propValue) {
|
|
568
|
-
acc[key] = componentDefaults[key];
|
|
569
|
-
}
|
|
570
|
-
}
|
|
571
|
-
}
|
|
572
|
-
return acc;
|
|
573
|
-
}, {});
|
|
574
|
-
});
|
|
575
|
-
}
|
|
576
|
-
function useUniqueId(id) {
|
|
577
|
-
return computed(() => String(id?.value || useId()));
|
|
578
|
-
}
|
|
579
|
-
function useModifiers(prefix, modifiers, others) {
|
|
580
|
-
return computed(() => {
|
|
581
|
-
const toReturn = {
|
|
582
|
-
[prefix]: true
|
|
583
|
-
};
|
|
584
|
-
const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : modifiers?.value;
|
|
585
|
-
if (modifiersArray) {
|
|
586
|
-
if (Array.isArray(modifiersArray)) {
|
|
587
|
-
modifiersArray.forEach((modifier) => {
|
|
588
|
-
if (modifier) {
|
|
589
|
-
toReturn[`${prefix}--${modifier}`] = true;
|
|
590
|
-
}
|
|
591
|
-
});
|
|
592
|
-
}
|
|
593
|
-
}
|
|
594
|
-
if (others) {
|
|
595
|
-
Object.keys(others.value).forEach((key) => {
|
|
596
|
-
toReturn[`${prefix}--${key}`] = unref(others.value[key]);
|
|
597
|
-
});
|
|
598
|
-
}
|
|
599
|
-
return toReturn;
|
|
600
|
-
});
|
|
601
|
-
}
|
|
602
|
-
const _hoisted_1$1 = ["for"];
|
|
603
|
-
const _hoisted_2$1 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
|
|
604
|
-
const __default__$1 = {
|
|
605
|
-
name: "VvCheckbox"
|
|
606
|
-
};
|
|
607
|
-
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
608
|
-
...__default__$1,
|
|
609
|
-
props: VvCheckboxProps,
|
|
610
|
-
emits: VvCheckboxEvents,
|
|
611
|
-
setup(__props, { emit: __emit }) {
|
|
612
|
-
const props = __props;
|
|
613
|
-
const emit = __emit;
|
|
614
|
-
const slots = useSlots();
|
|
615
|
-
const propsDefaults = useDefaults(
|
|
616
|
-
"VvCheckbox",
|
|
617
|
-
VvCheckboxProps,
|
|
618
|
-
props
|
|
619
|
-
);
|
|
620
|
-
const {
|
|
621
|
-
id,
|
|
622
|
-
disabled,
|
|
623
|
-
readonly,
|
|
624
|
-
valid,
|
|
625
|
-
invalid,
|
|
626
|
-
propsSwitch,
|
|
627
|
-
modelValue,
|
|
628
|
-
indeterminate,
|
|
629
|
-
isInGroup
|
|
630
|
-
} = useGroupProps(props, emit);
|
|
631
|
-
const hasId = useUniqueId(id);
|
|
632
|
-
const hasHintId = computed(() => `${hasId.value}-hint`);
|
|
633
|
-
const tabindex = computed(() => isDisabled.value ? -1 : props.tabindex);
|
|
634
|
-
const input = ref();
|
|
635
|
-
const isBinary = computed(
|
|
636
|
-
() => props.uncheckedValue !== void 0 && !isInGroup.value
|
|
637
|
-
);
|
|
638
|
-
const isDisabled = computed(() => disabled.value || readonly.value);
|
|
639
|
-
const isInvalid = computed(() => {
|
|
640
|
-
if (invalid.value === true) {
|
|
641
|
-
return true;
|
|
642
|
-
}
|
|
643
|
-
if (valid.value === true) {
|
|
644
|
-
return false;
|
|
645
|
-
}
|
|
646
|
-
return void 0;
|
|
647
|
-
});
|
|
648
|
-
const isChecked = computed(() => {
|
|
649
|
-
if (isBinary.value) {
|
|
650
|
-
return modelValue.value === props.value;
|
|
651
|
-
}
|
|
652
|
-
return Array.isArray(modelValue.value) ? contains(props.value, modelValue.value) : equals(props.value, modelValue.value);
|
|
653
|
-
});
|
|
654
|
-
const isIndeterminated = computed(() => {
|
|
655
|
-
if (indeterminate.value) {
|
|
656
|
-
return true;
|
|
657
|
-
}
|
|
658
|
-
if (!isChecked.value && isBinary.value && props.uncheckedValue !== modelValue.value) {
|
|
659
|
-
return true;
|
|
660
|
-
}
|
|
661
|
-
return false;
|
|
662
|
-
});
|
|
663
|
-
const hasValue = computed(() => {
|
|
664
|
-
if (isBinary.value) {
|
|
665
|
-
return void 0;
|
|
666
|
-
}
|
|
667
|
-
return ["string", "number", "boolean"].includes(typeof props.value) ? props.value : true;
|
|
668
|
-
});
|
|
669
|
-
const localModelValue = computed({
|
|
670
|
-
get() {
|
|
671
|
-
return isChecked.value;
|
|
672
|
-
},
|
|
673
|
-
set(newValue) {
|
|
674
|
-
if (isBinary.value) {
|
|
675
|
-
modelValue.value = newValue ? props.value : props.uncheckedValue;
|
|
676
|
-
} else if (Array.isArray(modelValue.value) || isInGroup.value) {
|
|
677
|
-
const currentValue = modelValue.value ?? [];
|
|
678
|
-
const toReturn = new Set(
|
|
679
|
-
Array.isArray(currentValue) ? currentValue : [currentValue]
|
|
680
|
-
);
|
|
681
|
-
if (newValue) {
|
|
682
|
-
toReturn.add(props.value);
|
|
683
|
-
} else {
|
|
684
|
-
toReturn.delete(props.value);
|
|
685
|
-
}
|
|
686
|
-
modelValue.value = [...toReturn];
|
|
687
|
-
} else {
|
|
688
|
-
modelValue.value = newValue ? props.value : void 0;
|
|
689
|
-
}
|
|
690
|
-
emit("change", newValue);
|
|
691
|
-
}
|
|
692
|
-
});
|
|
693
|
-
const { modifiers } = toRefs(props);
|
|
694
|
-
const bemCssClasses = useModifiers(
|
|
695
|
-
"vv-checkbox",
|
|
696
|
-
modifiers,
|
|
697
|
-
computed(() => ({
|
|
698
|
-
switch: propsSwitch.value,
|
|
699
|
-
valid: valid.value,
|
|
700
|
-
invalid: invalid.value,
|
|
701
|
-
disabled: disabled.value,
|
|
702
|
-
readonly: readonly.value,
|
|
703
|
-
indeterminate: indeterminate.value
|
|
704
|
-
}))
|
|
705
|
-
);
|
|
706
|
-
watchEffect(() => {
|
|
707
|
-
if (isBinary.value && Array.isArray(modelValue.value)) {
|
|
708
|
-
console.warn(
|
|
709
|
-
`[VvCheckbox] The model value is an array but the component is in binary mode.`
|
|
710
|
-
);
|
|
711
|
-
}
|
|
712
|
-
});
|
|
713
|
-
watch(
|
|
714
|
-
() => isIndeterminated.value,
|
|
715
|
-
(newValue) => {
|
|
716
|
-
if (newValue) {
|
|
717
|
-
input.value.indeterminate = true;
|
|
718
|
-
} else {
|
|
719
|
-
input.value.indeterminate = false;
|
|
720
|
-
}
|
|
721
|
-
}
|
|
722
|
-
);
|
|
723
|
-
onMounted(() => {
|
|
724
|
-
if (isIndeterminated.value) {
|
|
725
|
-
input.value.indeterminate = true;
|
|
726
|
-
}
|
|
727
|
-
});
|
|
728
|
-
const {
|
|
729
|
-
HintSlot,
|
|
730
|
-
hasHintLabelOrSlot,
|
|
731
|
-
hasInvalidLabelOrSlot,
|
|
732
|
-
hintSlotScope
|
|
733
|
-
} = HintSlotFactory(propsDefaults, slots);
|
|
734
|
-
return (_ctx, _cache) => {
|
|
735
|
-
return openBlock(), createElementBlock("label", {
|
|
736
|
-
class: normalizeClass(unref(bemCssClasses)),
|
|
737
|
-
for: unref(hasId)
|
|
738
|
-
}, [
|
|
739
|
-
withDirectives(createElementVNode("input", {
|
|
740
|
-
id: unref(hasId),
|
|
741
|
-
ref_key: "input",
|
|
742
|
-
ref: input,
|
|
743
|
-
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null),
|
|
744
|
-
type: "checkbox",
|
|
745
|
-
class: "vv-checkbox__input",
|
|
746
|
-
name: _ctx.name,
|
|
747
|
-
disabled: unref(isDisabled),
|
|
748
|
-
value: unref(hasValue),
|
|
749
|
-
tabindex: unref(tabindex),
|
|
750
|
-
"aria-invalid": unref(isInvalid),
|
|
751
|
-
"aria-describedby": unref(hasHintLabelOrSlot) ? unref(hasHintId) : void 0,
|
|
752
|
-
"aria-errormessage": unref(hasInvalidLabelOrSlot) ? unref(hasHintId) : void 0
|
|
753
|
-
}, null, 8, _hoisted_2$1), [
|
|
754
|
-
[vModelCheckbox, unref(localModelValue)]
|
|
755
|
-
]),
|
|
756
|
-
renderSlot(_ctx.$slots, "default", { value: unref(modelValue) }, () => [
|
|
757
|
-
createTextVNode(
|
|
758
|
-
toDisplayString(_ctx.label),
|
|
759
|
-
1
|
|
760
|
-
/* TEXT */
|
|
761
|
-
)
|
|
762
|
-
]),
|
|
763
|
-
createVNode(unref(HintSlot), {
|
|
764
|
-
id: unref(hasHintId),
|
|
765
|
-
class: "vv-checkbox__hint"
|
|
766
|
-
}, createSlots({
|
|
767
|
-
_: 2
|
|
768
|
-
/* DYNAMIC */
|
|
769
|
-
}, [
|
|
770
|
-
_ctx.$slots.hint ? {
|
|
771
|
-
name: "hint",
|
|
772
|
-
fn: withCtx(() => [
|
|
773
|
-
renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
774
|
-
]),
|
|
775
|
-
key: "0"
|
|
776
|
-
} : void 0,
|
|
777
|
-
_ctx.$slots.loading ? {
|
|
778
|
-
name: "loading",
|
|
779
|
-
fn: withCtx(() => [
|
|
780
|
-
renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
781
|
-
]),
|
|
782
|
-
key: "1"
|
|
783
|
-
} : void 0,
|
|
784
|
-
_ctx.$slots.valid ? {
|
|
785
|
-
name: "valid",
|
|
786
|
-
fn: withCtx(() => [
|
|
787
|
-
renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
788
|
-
]),
|
|
789
|
-
key: "2"
|
|
790
|
-
} : void 0,
|
|
791
|
-
_ctx.$slots.invalid ? {
|
|
792
|
-
name: "invalid",
|
|
793
|
-
fn: withCtx(() => [
|
|
794
|
-
renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
795
|
-
]),
|
|
796
|
-
key: "3"
|
|
797
|
-
} : void 0
|
|
798
|
-
]), 1032, ["id"])
|
|
799
|
-
], 10, _hoisted_1$1);
|
|
800
|
-
};
|
|
801
|
-
}
|
|
802
|
-
});
|
|
803
|
-
function useGroupStateProvide(key, groupState) {
|
|
804
|
-
provide(key, groupState);
|
|
805
|
-
}
|
|
806
|
-
function useOptions(props) {
|
|
807
|
-
const { options, labelKey, valueKey, disabledKey } = toRefs(props);
|
|
808
|
-
const getOptionLabel = (option) => {
|
|
809
|
-
if (typeof option === "string") {
|
|
810
|
-
return option;
|
|
811
|
-
}
|
|
812
|
-
if (typeof labelKey.value === "function") {
|
|
813
|
-
return labelKey.value(option);
|
|
814
|
-
}
|
|
815
|
-
return String(
|
|
816
|
-
labelKey.value ? getProperty(option, labelKey.value) : option
|
|
817
|
-
);
|
|
818
|
-
};
|
|
819
|
-
const getOptionValue = (option) => {
|
|
820
|
-
if (typeof option === "string") {
|
|
821
|
-
return option;
|
|
822
|
-
}
|
|
823
|
-
if (typeof valueKey.value === "function") {
|
|
824
|
-
return valueKey.value(option);
|
|
825
|
-
}
|
|
826
|
-
return valueKey.value ? getProperty(option, valueKey.value) : option;
|
|
827
|
-
};
|
|
828
|
-
const isOptionDisabled = (option) => {
|
|
829
|
-
if (typeof option === "string") {
|
|
830
|
-
return false;
|
|
831
|
-
}
|
|
832
|
-
if (typeof disabledKey.value === "function") {
|
|
833
|
-
return disabledKey.value(option);
|
|
834
|
-
}
|
|
835
|
-
return disabledKey.value ? Boolean(getProperty(option, disabledKey.value)) : false;
|
|
836
|
-
};
|
|
837
|
-
const getOptionGrouped = (option) => {
|
|
838
|
-
if (typeof option == "string") {
|
|
839
|
-
return [];
|
|
840
|
-
}
|
|
841
|
-
if (typeof option === "object" && option && "options" in option) {
|
|
842
|
-
return option.options;
|
|
843
|
-
}
|
|
844
|
-
return [];
|
|
845
|
-
};
|
|
846
|
-
return {
|
|
847
|
-
options,
|
|
848
|
-
getOptionLabel,
|
|
849
|
-
getOptionValue,
|
|
850
|
-
isOptionDisabled,
|
|
851
|
-
getOptionGrouped
|
|
852
|
-
};
|
|
853
|
-
}
|
|
854
|
-
const _hoisted_1 = ["textContent"];
|
|
855
|
-
const _hoisted_2 = { class: "vv-checkbox-group__wrapper" };
|
|
856
|
-
const __default__ = {
|
|
857
|
-
name: "VvCheckboxGroup"
|
|
858
|
-
};
|
|
859
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
860
|
-
...__default__,
|
|
861
|
-
props: VvCheckboxGroupProps,
|
|
862
|
-
emits: VvCheckboxGroupEvents,
|
|
863
|
-
setup(__props, { emit: __emit }) {
|
|
864
|
-
const props = __props;
|
|
865
|
-
const emit = __emit;
|
|
866
|
-
const slots = useSlots();
|
|
867
|
-
const propsDefaults = useDefaults(
|
|
868
|
-
"VvCheckboxGroup",
|
|
869
|
-
VvCheckboxGroupProps,
|
|
870
|
-
props
|
|
871
|
-
);
|
|
872
|
-
const modelValue = useVModel(props, "modelValue", emit);
|
|
873
|
-
const { disabled, readonly, vertical, valid, invalid, modifiers } = toRefs(props);
|
|
874
|
-
useGroupStateProvide(INJECTION_KEY_CHECK_GROUP, {
|
|
875
|
-
modelValue,
|
|
876
|
-
disabled,
|
|
877
|
-
readonly,
|
|
878
|
-
valid,
|
|
879
|
-
invalid
|
|
880
|
-
});
|
|
881
|
-
const { getOptionLabel, getOptionValue, isOptionDisabled } = useOptions(props);
|
|
882
|
-
const bemCssClasses = useModifiers(
|
|
883
|
-
"vv-checkbox-group",
|
|
884
|
-
modifiers,
|
|
885
|
-
computed(() => ({
|
|
886
|
-
disabled: disabled.value,
|
|
887
|
-
readonly: readonly.value,
|
|
888
|
-
required: props.required,
|
|
889
|
-
horizontal: !vertical.value,
|
|
890
|
-
valid: valid.value,
|
|
891
|
-
invalid: invalid.value
|
|
892
|
-
}))
|
|
893
|
-
);
|
|
894
|
-
function getOptionProps(option, index) {
|
|
895
|
-
return {
|
|
896
|
-
id: `${props.name}_opt${index}`,
|
|
897
|
-
name: props.name,
|
|
898
|
-
label: getOptionLabel(option),
|
|
899
|
-
value: getOptionValue(option),
|
|
900
|
-
required: props.required,
|
|
901
|
-
disabled: isOptionDisabled(option)
|
|
902
|
-
};
|
|
903
|
-
}
|
|
904
|
-
const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots);
|
|
905
|
-
return (_ctx, _cache) => {
|
|
906
|
-
return openBlock(), createElementBlock(
|
|
907
|
-
"fieldset",
|
|
908
|
-
{
|
|
909
|
-
class: normalizeClass(unref(bemCssClasses))
|
|
910
|
-
},
|
|
911
|
-
[
|
|
912
|
-
_ctx.label ? (openBlock(), createElementBlock("legend", {
|
|
913
|
-
key: 0,
|
|
914
|
-
textContent: toDisplayString(_ctx.label)
|
|
915
|
-
}, null, 8, _hoisted_1)) : createCommentVNode("v-if", true),
|
|
916
|
-
createElementVNode("div", _hoisted_2, [
|
|
917
|
-
_ctx.options.length > 0 ? (openBlock(true), createElementBlock(
|
|
918
|
-
Fragment,
|
|
919
|
-
{ key: 0 },
|
|
920
|
-
renderList(_ctx.options, (option, index) => {
|
|
921
|
-
return openBlock(), createBlock(
|
|
922
|
-
_sfc_main$1,
|
|
923
|
-
mergeProps({ key: index }, { ref_for: true }, getOptionProps(option, index)),
|
|
924
|
-
null,
|
|
925
|
-
16
|
|
926
|
-
/* FULL_PROPS */
|
|
927
|
-
);
|
|
928
|
-
}),
|
|
929
|
-
128
|
|
930
|
-
/* KEYED_FRAGMENT */
|
|
931
|
-
)) : renderSlot(_ctx.$slots, "default", { key: 1 })
|
|
932
|
-
]),
|
|
933
|
-
createVNode(
|
|
934
|
-
unref(HintSlot),
|
|
935
|
-
{ class: "vv-checkbox-group__hint" },
|
|
936
|
-
createSlots({
|
|
937
|
-
_: 2
|
|
938
|
-
/* DYNAMIC */
|
|
939
|
-
}, [
|
|
940
|
-
_ctx.$slots.hint ? {
|
|
941
|
-
name: "hint",
|
|
942
|
-
fn: withCtx(() => [
|
|
943
|
-
renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
944
|
-
]),
|
|
945
|
-
key: "0"
|
|
946
|
-
} : void 0,
|
|
947
|
-
_ctx.$slots.loading ? {
|
|
948
|
-
name: "loading",
|
|
949
|
-
fn: withCtx(() => [
|
|
950
|
-
renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
951
|
-
]),
|
|
952
|
-
key: "1"
|
|
953
|
-
} : void 0,
|
|
954
|
-
_ctx.$slots.valid ? {
|
|
955
|
-
name: "valid",
|
|
956
|
-
fn: withCtx(() => [
|
|
957
|
-
renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
958
|
-
]),
|
|
959
|
-
key: "2"
|
|
960
|
-
} : void 0,
|
|
961
|
-
_ctx.$slots.invalid ? {
|
|
962
|
-
name: "invalid",
|
|
963
|
-
fn: withCtx(() => [
|
|
964
|
-
renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
|
|
965
|
-
]),
|
|
966
|
-
key: "3"
|
|
967
|
-
} : void 0
|
|
968
|
-
]),
|
|
969
|
-
1024
|
|
970
|
-
/* DYNAMIC_SLOTS */
|
|
971
|
-
)
|
|
972
|
-
],
|
|
973
|
-
2
|
|
974
|
-
/* CLASS */
|
|
975
|
-
);
|
|
976
|
-
};
|
|
977
|
-
}
|
|
978
|
-
});
|
|
979
|
-
export {
|
|
980
|
-
_sfc_main as default
|
|
981
|
-
};
|
|
1
|
+
import{computed as e,isRef as a,defineComponent as l,h as t,inject as i,toRef as n,toRefs as o,useId as r,unref as u,useSlots as d,ref as s,watchEffect as v,watch as f,onMounted as c,createElementBlock as b,openBlock as p,normalizeClass as y,withDirectives as h,renderSlot as g,createVNode as m,createElementVNode as S,vModelCheckbox as L,createTextVNode as k,toDisplayString as O,createSlots as $,withCtx as V,normalizeProps as x,guardReactiveProps as A,provide as B,createCommentVNode as N,Fragment as _,renderList as j,createBlock as G,mergeProps as w}from"vue";import{useVModel as I}from"@vueuse/core";import{getProperty as q}from"dot-prop";var C=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(C||{}),H=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(H||{}),K=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(K||{}),D=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(D||{}),E=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(E||{});const R=Symbol.for("volver"),F=Symbol.for("checkGroup"),T={valid:{type:Boolean,default:!1},validLabel:{type:[String,Array],default:void 0}},J={invalid:{type:Boolean,default:!1},invalidLabel:{type:[String,Array],default:void 0}},z={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},P={disabled:{type:Boolean,default:!1}},U={required:{type:Boolean,default:!1}},M={label:{type:[String,Number],default:void 0}},Q={readonly:{type:Boolean,default:!1}},W={modifiers:{type:[String,Array],default:void 0}},X={hintLabel:{type:String,default:""}},Y={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}};K.before;const Z={tabindex:{type:[String,Number],default:0}},ee={id:[String,Number]};H.bottom;const ae={...{...ee,name:{type:String,required:!0}},...Z,...T,...J,...X,...P,...Q,...W,...M,...z,value:{type:[String,Number,Boolean],default:void 0},modelValue:{type:[Object,Number,Boolean,String],default:void 0}},le={...T,...J,...Y,...X,...P,...Q,...W,...M,...z,...U,modelValue:{type:[String,Array,Boolean,Number,Symbol],default:void 0},name:{type:String,required:!0},vertical:{type:Boolean,default:!1}};D.button,E.button,C.local;const te=le;function ie(e,a,l){return ne(e,a)}function ne(e,a){if(e===a)return!0;if(e&&a&&"object"==typeof e&&"object"==typeof a){const l=Array.isArray(e),t=Array.isArray(a);let i,n,o;if(l&&t){if(n=e.length,n!==a.length)return!1;for(i=n;0!==i--;)if(!ne(e[i],a[i]))return!1;return!0}if(l!==t)return!1;const r=e instanceof Date,u=a instanceof Date;if(r!==u)return!1;if(r&&u)return e.getTime()===a.getTime();const d=e instanceof RegExp,s=a instanceof RegExp;if(d!==s)return!1;if(d&&s)return e.toString()===a.toString();const v=Object.keys(e);if(n=v.length,n!==Object.keys(a).length)return!1;for(i=n;0!==i--;)if(!Object.prototype.hasOwnProperty.call(a,v[i]))return!1;for(i=n;0!==i--;)if(o=v[i],!ne(e[o],a[o]))return!1;return!0}return Number.isNaN(e)&&Number.isNaN(a)}function oe(e){return Array.isArray(e)?e.filter(e=>"string"==typeof e).join(" "):e}function re(i,n){const o=e(()=>a(i)?i.value:i),r=e(()=>oe(o.value.invalidLabel)),u=e(()=>oe(o.value.validLabel)),d=e(()=>o.value.loadingLabel),s=e(()=>o.value.hintLabel),v=e(()=>Boolean(o.value.loading&&(n.loading||d.value))),f=e(()=>!v.value&&Boolean(o.value.invalid&&(n.invalid||r.value))),c=e(()=>!v.value&&!f.value&&Boolean(o.value.valid&&(n.valid||u.value))),b=e(()=>!v.value&&!f.value&&!c.value&&Boolean(n.hint||s.value)),p=e(()=>f.value||c.value||v.value||b.value),y=e(()=>({modelValue:o.value.modelValue,valid:o.value.valid,invalid:o.value.invalid,loading:o.value.loading})),h=l({name:"HintSlot",props:{tag:{type:String,default:"small"}},setup:()=>({isVisible:p,invalidLabel:r,validLabel:u,loadingLabel:d,hintLabel:s,hasInvalidLabelOrSlot:f,hasValidLabelOrSlot:c,hasLoadingLabelOrSlot:v,hasHintLabelOrSlot:b}),render(){if(this.isVisible){let e;return this.hasInvalidLabelOrSlot&&(e="alert"),this.hasValidLabelOrSlot&&(e="status"),this.hasLoadingLabelOrSlot?t(this.tag,{role:e},this.$slots.loading?.()??this.loadingLabel):this.hasInvalidLabelOrSlot?t(this.tag,{role:e},this.$slots.invalid?.()??this.$slots.invalid??this.invalidLabel):this.hasValidLabelOrSlot?t(this.tag,{role:e},this.$slots.valid?.()??this.validLabel):t(this.tag,{role:e},this.$slots.hint?.()??this.$slots.hint??this.hintLabel)}return null}});return{hasInvalidLabelOrSlot:f,hasHintLabelOrSlot:b,hasValidLabelOrSlot:c,hasLoadingLabelOrSlot:v,hintSlotScope:y,HintSlot:h}}const ue={...ae,...W,indeterminate:Boolean,uncheckedValue:[String,Number,Boolean],switch:Boolean};function de(a,l){const{group:t,isInGroup:r,getGroupOrLocalRef:u}=function(a){const l=i(a,void 0),t=e(()=>void 0!==l);return{group:l,isInGroup:t,getGroupOrLocalRef:function(a,t,i){const o=l?.[a];if(o)return e({get:()=>o.value,set(e){o.value=e}});const r=n(t,a);return e({get:()=>r.value,set(e){i&&i(`update:${a}`,e)}})}}}(F),{id:d,switch:s,indeterminate:v}=o(a),f=u("modelValue",a,l),c=u("valid",a),b=u("invalid",a),p=e(()=>Boolean(a.readonly||t?.readonly.value)),y=e(()=>Boolean(a.disabled||t?.disabled.value));return{id:d,propsSwitch:s,indeterminate:v,group:t,isInGroup:r,modelValue:f,valid:c,invalid:b,readonly:p,disabled:y}}function se(a,l,t){const n=i(R,void 0),o=e(()=>{if(n&&n.defaults.value?.[a])return n.defaults.value[a]});return e(()=>{if(void 0===o.value)return t;const e=o.value,a=l,i=t;return Object.keys(a).reduce((l,t)=>{const n=i[t];if(l[t]=n,t in e){if(Array.isArray(a[t])){const i=a[t];if(i.length){i[0]===n&&(l[t]=e[t])}}if("function"==typeof a[t]){(0,a[t])()===n&&(l[t]=e[t])}if("object"==typeof a[t]){let i=a[t].default;"function"==typeof i&&(i=i()),"object"==typeof i?JSON.stringify(i)===JSON.stringify(n)&&(l[t]=e[t]):i===n&&(l[t]=e[t])}}return l},{})})}function ve(a,l,t){return e(()=>{const e={[a]:!0},i="string"==typeof l?.value?l.value.split(" "):l?.value;return i&&Array.isArray(i)&&i.forEach(l=>{l&&(e[`${a}--${l}`]=!0)}),t&&Object.keys(t.value).forEach(l=>{e[`${a}--${l}`]=u(t.value[l])}),e})}const fe=["for"],ce=["id","name","disabled","value","tabindex","aria-invalid","aria-describedby","aria-errormessage"],be=/* @__PURE__ */l({name:"VvCheckbox",props:ue,emits:["click","update:modelValue","change","blur"],setup(l,{emit:t}){const i=l,n=t,B=d(),N=se("VvCheckbox",ue,i),{id:_,disabled:j,readonly:G,valid:w,invalid:I,propsSwitch:q,modelValue:C,indeterminate:H,isInGroup:K}=de(i,n),D=function(a){return e(()=>String(a?.value||r()))}(_),E=e(()=>`${D.value}-hint`),R=e(()=>J.value?-1:i.tabindex),F=s(),T=e(()=>void 0!==i.uncheckedValue&&!K.value),J=e(()=>j.value||G.value),z=e(()=>!0===I.value||!0!==w.value&&void 0),P=e(()=>T.value?C.value===i.value:Array.isArray(C.value)?function(e,a){if(null!=e&&a&&a.length)for(const l of a)if(ie(e,l))return!0;return!1}(i.value,C.value):ie(i.value,C.value)),U=e(()=>!!H.value||!(P.value||!T.value||i.uncheckedValue===C.value)),M=e(()=>{if(!T.value)return!["string","number","boolean"].includes(typeof i.value)||i.value}),Q=e({get:()=>P.value,set(e){if(T.value)C.value=e?i.value:i.uncheckedValue;else if(Array.isArray(C.value)||K.value){const a=C.value??[],l=new Set(Array.isArray(a)?a:[a]);e?l.add(i.value):l.delete(i.value),C.value=[...l]}else C.value=e?i.value:void 0;n("change",e)}}),{modifiers:W}=o(i),X=ve("vv-checkbox",W,e(()=>({switch:q.value,valid:w.value,invalid:I.value,disabled:j.value,readonly:G.value,indeterminate:H.value})));v(()=>{T.value&&Array.isArray(C.value)&&console.warn("[VvCheckbox] The model value is an array but the component is in binary mode.")}),f(()=>U.value,e=>{F.value.indeterminate=!!e}),c(()=>{U.value&&(F.value.indeterminate=!0)});const{HintSlot:Y,hasHintLabelOrSlot:Z,hasInvalidLabelOrSlot:ee,hintSlotScope:ae}=re(N,B);return(e,l)=>(p(),b("label",{class:y(u(X)),for:u(D)},[h(S("input",{id:u(D),ref_key:"input",ref:F,"onUpdate:modelValue":l[0]||(l[0]=e=>a(Q)?Q.value=e:null),type:"checkbox",class:"vv-checkbox__input",name:e.name,disabled:u(J),value:u(M),tabindex:u(R),"aria-invalid":u(z),"aria-describedby":u(Z)?u(E):void 0,"aria-errormessage":u(ee)?u(E):void 0},null,8,ce),[[L,u(Q)]]),g(e.$slots,"default",{value:u(C)},()=>[k(O(e.label),1)]),m(u(Y),{id:u(E),class:"vv-checkbox__hint"},$({_:2},[e.$slots.hint?{name:"hint",fn:V(()=>[g(e.$slots,"hint",x(A(u(ae))))]),key:"0"}:void 0,e.$slots.loading?{name:"loading",fn:V(()=>[g(e.$slots,"loading",x(A(u(ae))))]),key:"1"}:void 0,e.$slots.valid?{name:"valid",fn:V(()=>[g(e.$slots,"valid",x(A(u(ae))))]),key:"2"}:void 0,e.$slots.invalid?{name:"invalid",fn:V(()=>[g(e.$slots,"invalid",x(A(u(ae))))]),key:"3"}:void 0]),1032,["id"])],10,fe))}});const pe=["textContent"],ye={class:"vv-checkbox-group__wrapper"},he=/* @__PURE__ */l({name:"VvCheckboxGroup",props:te,emits:["update:modelValue","change"],setup(a,{emit:l}){const t=a,i=l,n=d(),r=se("VvCheckboxGroup",te,t),s=I(t,"modelValue",i),{disabled:v,readonly:f,vertical:c,valid:h,invalid:L,modifiers:k}=o(t);B(F,{modelValue:s,disabled:v,readonly:f,valid:h,invalid:L});const{getOptionLabel:C,getOptionValue:H,isOptionDisabled:K}=function(e){const{options:a,labelKey:l,valueKey:t,disabledKey:i}=o(e);return{options:a,getOptionLabel:e=>"string"==typeof e?e:"function"==typeof l.value?l.value(e):String(l.value?q(e,l.value):e),getOptionValue:e=>"string"==typeof e?e:"function"==typeof t.value?t.value(e):t.value?q(e,t.value):e,isOptionDisabled:e=>"string"!=typeof e&&("function"==typeof i.value?i.value(e):!!i.value&&Boolean(q(e,i.value))),getOptionGrouped:e=>"string"==typeof e?[]:"object"==typeof e&&e&&"options"in e?e.options:[]}}(t),D=ve("vv-checkbox-group",k,e(()=>({disabled:v.value,readonly:f.value,required:t.required,horizontal:!c.value,valid:h.value,invalid:L.value})));const{HintSlot:E,hintSlotScope:R}=re(r,n);return(e,a)=>(p(),b("fieldset",{class:y(u(D))},[e.label?(p(),b("legend",{key:0,textContent:O(e.label)},null,8,pe)):N("v-if",!0),S("div",ye,[e.options.length>0?(p(!0),b(_,{key:0},j(e.options,(e,a)=>(p(),G(be,w({key:a},{ref_for:!0},function(e,a){return{id:`${t.name}_opt${a}`,name:t.name,label:C(e),value:H(e),required:t.required,disabled:K(e)}}(e,a)),null,16))),128)):g(e.$slots,"default",{key:1})]),m(u(E),{class:"vv-checkbox-group__hint"},$({_:2},[e.$slots.hint?{name:"hint",fn:V(()=>[g(e.$slots,"hint",x(A(u(R))))]),key:"0"}:void 0,e.$slots.loading?{name:"loading",fn:V(()=>[g(e.$slots,"loading",x(A(u(R))))]),key:"1"}:void 0,e.$slots.valid?{name:"valid",fn:V(()=>[g(e.$slots,"valid",x(A(u(R))))]),key:"2"}:void 0,e.$slots.invalid?{name:"invalid",fn:V(()=>[g(e.$slots,"invalid",x(A(u(R))))]),key:"3"}:void 0]),1024)],2))}});export{he as default};
|