@volverjs/ui-vue 0.0.10-beta.23 → 0.0.10-beta.25
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/VvAccordion/VvAccordion.es.js +119 -79
- package/dist/components/VvAccordion/VvAccordion.umd.js +1 -1
- package/dist/components/VvAccordion/VvAccordion.vue.d.ts +18 -4
- package/dist/components/VvAccordion/index.d.ts +4 -8
- package/dist/components/VvAccordionGroup/VvAccordionGroup.es.js +282 -124
- package/dist/components/VvAccordionGroup/VvAccordionGroup.umd.js +1 -1
- package/dist/components/VvAccordionGroup/VvAccordionGroup.vue.d.ts +34 -7
- package/dist/components/VvAccordionGroup/index.d.ts +4 -1
- package/dist/components/VvAction/VvAction.vue.d.ts +1 -1
- package/dist/components/VvAlert/VvAlert.vue.d.ts +1 -1
- package/dist/components/VvButton/VvButton.es.js +92 -98
- package/dist/components/VvButton/VvButton.umd.js +1 -1
- package/dist/components/VvButton/VvButton.vue.d.ts +7 -7
- package/dist/components/VvButton/index.d.ts +11 -11
- package/dist/components/VvButtonGroup/VvButtonGroup.es.js +7 -13
- package/dist/components/VvButtonGroup/VvButtonGroup.umd.js +1 -1
- package/dist/components/VvButtonGroup/VvButtonGroup.vue.d.ts +3 -3
- package/dist/components/VvCheckbox/VvCheckbox.es.js +81 -87
- package/dist/components/VvCheckbox/VvCheckbox.umd.js +1 -1
- package/dist/components/VvCheckbox/VvCheckbox.vue.d.ts +6 -6
- package/dist/components/VvCheckbox/index.d.ts +2 -2
- package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js +15 -29
- package/dist/components/VvCheckboxGroup/VvCheckboxGroup.umd.js +1 -1
- package/dist/components/VvCheckboxGroup/VvCheckboxGroup.vue.d.ts +5 -5
- package/dist/components/VvCombobox/VvCombobox.es.js +13 -16
- package/dist/components/VvCombobox/VvCombobox.umd.js +1 -1
- package/dist/components/VvCombobox/VvCombobox.vue.d.ts +11 -11
- package/dist/components/VvCombobox/index.d.ts +1 -1
- package/dist/components/VvDropdown/VvDropdown.vue.d.ts +5 -5
- package/dist/components/VvDropdown/VvDropdownAction.vue.d.ts +1 -1
- package/dist/components/VvDropdown/VvDropdownOption.vue.d.ts +1 -1
- package/dist/components/VvDropdown/index.d.ts +1 -1
- package/dist/components/VvInputFile/VvInputFile.es.js +183 -168
- package/dist/components/VvInputFile/VvInputFile.umd.js +1 -1
- package/dist/components/VvInputFile/VvInputFile.vue.d.ts +16 -9
- package/dist/components/VvInputFile/index.d.ts +12 -3
- package/dist/components/VvInputText/VvInputClearAction.d.ts +1 -1
- package/dist/components/VvInputText/VvInputStepAction.d.ts +1 -1
- package/dist/components/VvInputText/VvInputText.vue.d.ts +6 -6
- package/dist/components/VvProgress/VvProgress.vue.d.ts +1 -1
- package/dist/components/VvRadio/VvRadio.es.js +64 -70
- package/dist/components/VvRadio/VvRadio.umd.js +1 -1
- package/dist/components/VvRadio/VvRadio.vue.d.ts +6 -6
- package/dist/components/VvRadio/index.d.ts +6 -6
- package/dist/components/VvRadioGroup/VvRadioGroup.es.js +15 -29
- package/dist/components/VvRadioGroup/VvRadioGroup.umd.js +1 -1
- package/dist/components/VvRadioGroup/VvRadioGroup.vue.d.ts +5 -5
- package/dist/components/VvSelect/VvSelect.vue.d.ts +8 -8
- package/dist/components/VvTextarea/VvTextarea.vue.d.ts +5 -5
- package/dist/components/VvTooltip/VvTooltip.vue.d.ts +3 -3
- package/dist/components/VvTooltip/index.d.ts +1 -1
- package/dist/components/index.es.js +494 -328
- package/dist/components/index.umd.js +1 -1
- package/dist/composables/alert/useInjectAlert.d.ts +1 -6
- package/dist/composables/group/useInjectedGroupState.d.ts +4 -5
- package/dist/composables/group/useProvideGroupState.d.ts +3 -3
- package/dist/constants.d.ts +6 -10
- package/dist/icons.es.js +3 -3
- package/dist/icons.umd.js +1 -1
- package/dist/index.es.js +3 -2
- package/dist/index.umd.js +1 -1
- package/dist/props/index.d.ts +1 -1
- package/dist/resolvers/unplugin.es.js +3 -2
- package/dist/resolvers/unplugin.umd.js +1 -1
- package/dist/stories/AccordionGroup/AccordionGroup.stories.d.ts +58 -15
- package/dist/stories/AccordionGroup/AccordionGroupSlots.stories.d.ts +381 -107
- package/dist/types/group.d.ts +37 -15
- package/package.json +37 -36
- 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/VvAccordion/VvAccordion.vue +119 -56
- package/src/components/VvAccordion/index.ts +8 -23
- package/src/components/VvAccordionGroup/VvAccordionGroup.vue +164 -42
- package/src/components/VvAccordionGroup/index.ts +4 -1
- package/src/components/VvButton/index.ts +7 -12
- package/src/components/VvButtonGroup/VvButtonGroup.vue +1 -2
- package/src/components/VvCheckbox/index.ts +2 -2
- package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue +1 -2
- package/src/components/VvInputFile/VvInputFile.vue +71 -47
- package/src/components/VvInputFile/index.ts +5 -4
- package/src/components/VvRadio/index.ts +5 -5
- package/src/components/VvRadioGroup/VvRadioGroup.vue +1 -2
- package/src/composables/group/useInjectedGroupState.ts +20 -16
- package/src/composables/group/useProvideGroupState.ts +10 -15
- package/src/constants.ts +19 -14
- package/src/stories/AccordionGroup/AccordionGroup.settings.ts +2 -2
- package/src/stories/AccordionGroup/AccordionGroup.test.ts +16 -10
- package/src/stories/AccordionGroup/AccordionGroupSlots.stories.ts +1 -1
- package/src/types/group.ts +22 -14
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { inject, computed, toRef, unref, defineComponent, useAttrs, toRefs, ref, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, provide, watchEffect, reactive, onMounted, nextTick, Fragment, renderList, createBlock, mergeProps, createSlots, withCtx } from "vue";
|
|
2
|
+
import mitt from "mitt";
|
|
2
3
|
import { uid } from "uid";
|
|
3
|
-
import {
|
|
4
|
+
import { useVModel, useLocalStorage } from "@vueuse/core";
|
|
4
5
|
var Strategy = /* @__PURE__ */ ((Strategy2) => {
|
|
5
6
|
Strategy2["absolute"] = "absolute";
|
|
6
7
|
Strategy2["fixed"] = "fixed";
|
|
@@ -49,7 +50,9 @@ var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
|
|
|
49
50
|
AnchorTarget2["_top"] = "_top";
|
|
50
51
|
return AnchorTarget2;
|
|
51
52
|
})(AnchorTarget || {});
|
|
52
|
-
const INJECTION_KEY_ACCORDION_GROUP = Symbol.for(
|
|
53
|
+
const INJECTION_KEY_ACCORDION_GROUP = Symbol.for(
|
|
54
|
+
"accordionGroup"
|
|
55
|
+
);
|
|
53
56
|
const LinkProps = {
|
|
54
57
|
/**
|
|
55
58
|
* The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
|
|
@@ -274,18 +277,15 @@ const ModifiersProps = {
|
|
|
274
277
|
default: ActionTag.button
|
|
275
278
|
}
|
|
276
279
|
});
|
|
277
|
-
function isEmpty(value) {
|
|
278
|
-
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));
|
|
279
|
-
}
|
|
280
280
|
function useInjectedGroupState(groupKey) {
|
|
281
281
|
const group = inject(groupKey, void 0);
|
|
282
|
-
const isInGroup = computed(() =>
|
|
282
|
+
const isInGroup = computed(() => group !== void 0);
|
|
283
283
|
function getGroupOrLocalRef(propName, props, emit) {
|
|
284
|
-
|
|
285
|
-
|
|
284
|
+
const groupPropValue = group == null ? void 0 : group[propName];
|
|
285
|
+
if (groupPropValue) {
|
|
286
286
|
return computed({
|
|
287
287
|
get() {
|
|
288
|
-
return groupPropValue
|
|
288
|
+
return groupPropValue.value;
|
|
289
289
|
},
|
|
290
290
|
set(value) {
|
|
291
291
|
groupPropValue.value = value;
|
|
@@ -298,8 +298,9 @@ function useInjectedGroupState(groupKey) {
|
|
|
298
298
|
return propRef.value;
|
|
299
299
|
},
|
|
300
300
|
set(value) {
|
|
301
|
-
if (emit)
|
|
301
|
+
if (emit) {
|
|
302
302
|
emit(`update:${propName}`, value);
|
|
303
|
+
}
|
|
303
304
|
}
|
|
304
305
|
});
|
|
305
306
|
}
|
|
@@ -340,23 +341,16 @@ const VvAccordionProps = {
|
|
|
340
341
|
not: Boolean
|
|
341
342
|
};
|
|
342
343
|
const VvAccordionEvents = ["update:modelValue"];
|
|
343
|
-
function useGroupProps(props
|
|
344
|
-
const { group, isInGroup
|
|
344
|
+
function useGroupProps(props) {
|
|
345
|
+
const { group, isInGroup } = useInjectedGroupState(
|
|
345
346
|
INJECTION_KEY_ACCORDION_GROUP
|
|
346
347
|
);
|
|
347
|
-
const { title, content } = toRefs(props);
|
|
348
|
-
const modelValue = getGroupOrLocalRef("modelValue", props, emit);
|
|
349
|
-
const not = getGroupOrLocalRef("not", props);
|
|
350
|
-
const collapse = getGroupOrLocalRef("collapse", props);
|
|
351
348
|
const disabled = computed(
|
|
352
|
-
() =>
|
|
353
|
-
var _a;
|
|
354
|
-
return Boolean(props.disabled || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.disabled.value));
|
|
355
|
-
}
|
|
349
|
+
() => Boolean(props.disabled || (group == null ? void 0 : group.disabled.value))
|
|
356
350
|
);
|
|
357
351
|
const modifiers = computed(() => {
|
|
358
352
|
let localModifiers = props.modifiers;
|
|
359
|
-
let groupModifiers = group == null ? void 0 : group.
|
|
353
|
+
let groupModifiers = group == null ? void 0 : group.modifiers.value;
|
|
360
354
|
const toReturn = /* @__PURE__ */ new Set();
|
|
361
355
|
if (localModifiers) {
|
|
362
356
|
if (!Array.isArray(localModifiers)) {
|
|
@@ -374,16 +368,11 @@ function useGroupProps(props, emit) {
|
|
|
374
368
|
});
|
|
375
369
|
return {
|
|
376
370
|
// group props
|
|
377
|
-
modelValue,
|
|
378
|
-
not,
|
|
379
371
|
isInGroup,
|
|
380
372
|
group,
|
|
381
|
-
collapse,
|
|
382
373
|
modifiers,
|
|
383
374
|
disabled,
|
|
384
|
-
|
|
385
|
-
title,
|
|
386
|
-
content
|
|
375
|
+
bus: group == null ? void 0 : group.bus
|
|
387
376
|
};
|
|
388
377
|
}
|
|
389
378
|
function useModifiers(prefix, modifiers, others) {
|
|
@@ -419,62 +408,103 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
419
408
|
...__default__$1,
|
|
420
409
|
props: VvAccordionProps,
|
|
421
410
|
emits: VvAccordionEvents,
|
|
422
|
-
setup(__props, { emit: __emit }) {
|
|
411
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
423
412
|
const props = __props;
|
|
424
413
|
const attrs = useAttrs();
|
|
425
414
|
const emit = __emit;
|
|
415
|
+
const modelValue = useVModel(props, "modelValue", emit);
|
|
426
416
|
const accordionName = computed(
|
|
427
417
|
() => props.name || (attrs == null ? void 0 : attrs.id) || uid()
|
|
428
418
|
);
|
|
429
|
-
const {
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
disabled,
|
|
434
|
-
collapse,
|
|
419
|
+
const { title, content, not } = toRefs(props);
|
|
420
|
+
const { isInGroup, modifiers, disabled, bus } = useGroupProps(props);
|
|
421
|
+
const isExpanded = ref(false);
|
|
422
|
+
watch(
|
|
435
423
|
modelValue,
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
const localModelValue = ref(false);
|
|
440
|
-
const isOpen = computed({
|
|
441
|
-
get: () => {
|
|
442
|
-
let toReturn = modelValue.value;
|
|
443
|
-
if (isInGroup.value) {
|
|
444
|
-
if (collapse.value && Array.isArray(modelValue.value)) {
|
|
445
|
-
toReturn = modelValue.value.includes(accordionName.value);
|
|
446
|
-
} else {
|
|
447
|
-
toReturn = modelValue.value === accordionName.value;
|
|
448
|
-
}
|
|
449
|
-
} else if (modelValue.value === void 0) {
|
|
450
|
-
toReturn = localModelValue.value;
|
|
424
|
+
(newValue) => {
|
|
425
|
+
if (typeof newValue === "boolean") {
|
|
426
|
+
isExpanded.value = not.value ? !newValue : newValue;
|
|
451
427
|
}
|
|
452
|
-
return not.value ? !toReturn : toReturn;
|
|
453
428
|
},
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
429
|
+
{ immediate: true }
|
|
430
|
+
);
|
|
431
|
+
watch(isExpanded, (newValue) => {
|
|
432
|
+
modelValue.value = not.value ? !newValue : newValue;
|
|
433
|
+
});
|
|
434
|
+
bus == null ? void 0 : bus.on("toggle", ({ name, value }) => {
|
|
435
|
+
if (name !== accordionName.value) {
|
|
436
|
+
return;
|
|
437
|
+
}
|
|
438
|
+
isExpanded.value = value;
|
|
439
|
+
});
|
|
440
|
+
const onClick = () => {
|
|
441
|
+
if (disabled.value) {
|
|
442
|
+
return;
|
|
443
|
+
}
|
|
444
|
+
if (isInGroup.value) {
|
|
445
|
+
bus == null ? void 0 : bus.emit("toggle", {
|
|
446
|
+
name: accordionName.value,
|
|
447
|
+
value: !isExpanded.value
|
|
448
|
+
});
|
|
449
|
+
return;
|
|
450
|
+
}
|
|
451
|
+
isExpanded.value = !isExpanded.value;
|
|
452
|
+
};
|
|
453
|
+
watch(
|
|
454
|
+
accordionName,
|
|
455
|
+
(newValue, oldValue) => {
|
|
456
|
+
if (bus) {
|
|
457
|
+
if (oldValue && oldValue !== newValue) {
|
|
458
|
+
bus.emit("unregister", { name: oldValue });
|
|
468
459
|
}
|
|
469
|
-
|
|
470
|
-
return;
|
|
471
|
-
}
|
|
472
|
-
if (modelValue.value === void 0 && typeof newValue === "boolean") {
|
|
473
|
-
localModelValue.value = newValue;
|
|
474
|
-
return;
|
|
460
|
+
bus.emit("register", { name: newValue });
|
|
475
461
|
}
|
|
476
|
-
|
|
462
|
+
},
|
|
463
|
+
{
|
|
464
|
+
immediate: true
|
|
465
|
+
}
|
|
466
|
+
);
|
|
467
|
+
onBeforeUnmount(() => {
|
|
468
|
+
if (bus) {
|
|
469
|
+
bus.emit("unregister", { name: accordionName.value });
|
|
470
|
+
}
|
|
471
|
+
});
|
|
472
|
+
const expand = () => {
|
|
473
|
+
if (isExpanded.value) {
|
|
474
|
+
return;
|
|
475
|
+
}
|
|
476
|
+
onClick();
|
|
477
|
+
};
|
|
478
|
+
const collapse = () => {
|
|
479
|
+
if (!isExpanded.value) {
|
|
480
|
+
return;
|
|
477
481
|
}
|
|
482
|
+
onClick();
|
|
483
|
+
};
|
|
484
|
+
const groupExpand = (name) => {
|
|
485
|
+
if (!bus) {
|
|
486
|
+
console.warn(
|
|
487
|
+
`[VvAccordion]: You are trying to expand accordion group of "${accordionName.value}" but it is not in a group`
|
|
488
|
+
);
|
|
489
|
+
return;
|
|
490
|
+
}
|
|
491
|
+
bus.emit("expand", { name });
|
|
492
|
+
};
|
|
493
|
+
const groupCollapse = (name) => {
|
|
494
|
+
if (!bus) {
|
|
495
|
+
console.warn(
|
|
496
|
+
`[VvAccordion]: You are trying to collapse accordion group of "${accordionName.value}" but it is not in a group`
|
|
497
|
+
);
|
|
498
|
+
return;
|
|
499
|
+
}
|
|
500
|
+
bus == null ? void 0 : bus.emit("collapse", { name });
|
|
501
|
+
};
|
|
502
|
+
__expose({
|
|
503
|
+
isExpanded,
|
|
504
|
+
expand,
|
|
505
|
+
collapse,
|
|
506
|
+
groupExpand,
|
|
507
|
+
groupCollapse
|
|
478
508
|
});
|
|
479
509
|
const bemCssClasses = useModifiers(
|
|
480
510
|
"vv-accordion",
|
|
@@ -483,20 +513,25 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
483
513
|
disabled: disabled.value
|
|
484
514
|
}))
|
|
485
515
|
);
|
|
486
|
-
const onClick = useToggle(isOpen);
|
|
487
516
|
return (_ctx, _cache) => {
|
|
488
517
|
return openBlock(), createElementBlock("details", {
|
|
489
518
|
id: unref(accordionName),
|
|
490
519
|
class: normalizeClass(unref(bemCssClasses)),
|
|
491
|
-
open: unref(
|
|
520
|
+
open: unref(isExpanded)
|
|
492
521
|
}, [
|
|
493
522
|
createElementVNode("summary", {
|
|
494
523
|
"aria-controls": unref(accordionName),
|
|
495
|
-
"aria-expanded": unref(
|
|
524
|
+
"aria-expanded": unref(isExpanded),
|
|
496
525
|
class: "vv-accordion__summary",
|
|
497
|
-
onClick: _cache[0] || (_cache[0] = withModifiers(($event) =>
|
|
526
|
+
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => onClick(), ["prevent"]))
|
|
498
527
|
}, [
|
|
499
|
-
renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({
|
|
528
|
+
renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({
|
|
529
|
+
isExpanded: unref(isExpanded),
|
|
530
|
+
expand,
|
|
531
|
+
collapse,
|
|
532
|
+
groupExpand,
|
|
533
|
+
groupCollapse
|
|
534
|
+
})), () => [
|
|
500
535
|
createTextVNode(
|
|
501
536
|
toDisplayString(unref(title)),
|
|
502
537
|
1
|
|
@@ -505,10 +540,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
505
540
|
])
|
|
506
541
|
], 8, _hoisted_2),
|
|
507
542
|
createElementVNode("div", {
|
|
508
|
-
"aria-hidden": !unref(
|
|
543
|
+
"aria-hidden": !unref(isExpanded),
|
|
509
544
|
class: "vv-accordion__content"
|
|
510
545
|
}, [
|
|
511
|
-
renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
|
|
546
|
+
renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
|
|
547
|
+
isExpanded: unref(isExpanded),
|
|
548
|
+
expand,
|
|
549
|
+
collapse,
|
|
550
|
+
groupExpand,
|
|
551
|
+
groupCollapse
|
|
552
|
+
})), () => [
|
|
512
553
|
createTextVNode(
|
|
513
554
|
toDisplayString(unref(content)),
|
|
514
555
|
1
|
|
@@ -525,7 +566,10 @@ const VvAccordionGroupProps = {
|
|
|
525
566
|
/**
|
|
526
567
|
* VModel
|
|
527
568
|
*/
|
|
528
|
-
modelValue:
|
|
569
|
+
modelValue: {
|
|
570
|
+
type: [String, Array],
|
|
571
|
+
default: void 0
|
|
572
|
+
},
|
|
529
573
|
/**
|
|
530
574
|
* Accordion items
|
|
531
575
|
* @type VvAccordionGroupItem
|
|
@@ -559,15 +603,8 @@ const VvAccordionGroupProps = {
|
|
|
559
603
|
storeKey: String
|
|
560
604
|
};
|
|
561
605
|
const VvAccordionGroupEvents = ["update:modelValue"];
|
|
562
|
-
function useProvideGroupState(groupState) {
|
|
563
|
-
|
|
564
|
-
(k) => k !== "key" && !isRef(groupState[k])
|
|
565
|
-
))
|
|
566
|
-
throw Error("One or more groupState props aren't ref.");
|
|
567
|
-
provide(
|
|
568
|
-
groupState.key,
|
|
569
|
-
computed(() => groupState)
|
|
570
|
-
);
|
|
606
|
+
function useProvideGroupState(key, groupState) {
|
|
607
|
+
provide(key, groupState);
|
|
571
608
|
}
|
|
572
609
|
const __default__ = {
|
|
573
610
|
name: "VvAccordionGroup"
|
|
@@ -576,58 +613,166 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
576
613
|
...__default__,
|
|
577
614
|
props: VvAccordionGroupProps,
|
|
578
615
|
emits: VvAccordionGroupEvents,
|
|
579
|
-
setup(__props, { emit: __emit }) {
|
|
616
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
580
617
|
const props = __props;
|
|
581
618
|
const emit = __emit;
|
|
582
|
-
const { disabled,
|
|
619
|
+
const { disabled, modifiers, itemModifiers, items } = toRefs(props);
|
|
583
620
|
watchEffect(() => {
|
|
584
|
-
if (typeof props.modelValue === "string" && collapse
|
|
621
|
+
if (typeof props.modelValue === "string" && props.collapse) {
|
|
585
622
|
console.warn(
|
|
586
623
|
`[VvAccordionGroup]: modelValue is a string but collapse is true.`
|
|
587
624
|
);
|
|
588
625
|
}
|
|
589
626
|
});
|
|
590
|
-
|
|
627
|
+
const accordionNames = reactive(/* @__PURE__ */ new Set());
|
|
628
|
+
let storeModelValue = ref();
|
|
591
629
|
watch(
|
|
592
630
|
() => props.storeKey,
|
|
593
|
-
(newKey) => {
|
|
631
|
+
(newKey, oldKey) => {
|
|
632
|
+
if (oldKey && oldKey !== newKey) {
|
|
633
|
+
localStorage.removeItem(oldKey);
|
|
634
|
+
}
|
|
594
635
|
if (newKey) {
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
localModelValue = ref([]);
|
|
636
|
+
storeModelValue = useLocalStorage(newKey, storeModelValue.value);
|
|
637
|
+
return;
|
|
598
638
|
}
|
|
639
|
+
storeModelValue = ref(storeModelValue.value);
|
|
599
640
|
},
|
|
600
|
-
{
|
|
641
|
+
{
|
|
642
|
+
immediate: true
|
|
643
|
+
}
|
|
601
644
|
);
|
|
602
|
-
const
|
|
645
|
+
const localModelValue = computed({
|
|
603
646
|
get: () => {
|
|
604
|
-
|
|
605
|
-
if (props.modelValue !== void 0) {
|
|
606
|
-
if (!collapse.value) {
|
|
607
|
-
return Array.isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
|
|
608
|
-
}
|
|
647
|
+
if (props.modelValue !== null && props.modelValue !== void 0) {
|
|
609
648
|
return props.modelValue;
|
|
610
649
|
}
|
|
611
|
-
return
|
|
650
|
+
return storeModelValue.value;
|
|
612
651
|
},
|
|
613
652
|
set: (newValue) => {
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
653
|
+
emit("update:modelValue", newValue);
|
|
654
|
+
storeModelValue.value = newValue;
|
|
655
|
+
}
|
|
656
|
+
});
|
|
657
|
+
const expandedAccordions = computed({
|
|
658
|
+
get: () => {
|
|
659
|
+
if (localModelValue.value === void 0) {
|
|
660
|
+
return /* @__PURE__ */ new Set();
|
|
661
|
+
}
|
|
662
|
+
let toReturn = /* @__PURE__ */ new Set();
|
|
663
|
+
if (props.not) {
|
|
664
|
+
if (typeof localModelValue.value === "string") {
|
|
665
|
+
toReturn = new Set(
|
|
666
|
+
[...accordionNames].filter(
|
|
667
|
+
(name) => name !== localModelValue.value
|
|
668
|
+
)
|
|
669
|
+
);
|
|
670
|
+
} else if (Array.isArray(localModelValue.value)) {
|
|
671
|
+
toReturn = new Set(
|
|
672
|
+
[...accordionNames].filter(
|
|
673
|
+
(name) => !localModelValue.value.includes(
|
|
674
|
+
name
|
|
675
|
+
)
|
|
676
|
+
)
|
|
677
|
+
);
|
|
617
678
|
}
|
|
618
|
-
|
|
679
|
+
} else if (typeof localModelValue.value === "string") {
|
|
680
|
+
toReturn = /* @__PURE__ */ new Set([localModelValue.value]);
|
|
681
|
+
} else if (Array.isArray(localModelValue.value)) {
|
|
682
|
+
toReturn = new Set(localModelValue.value);
|
|
619
683
|
}
|
|
620
|
-
|
|
684
|
+
return toReturn;
|
|
685
|
+
},
|
|
686
|
+
set: (newValue) => {
|
|
687
|
+
if (props.not) {
|
|
688
|
+
localModelValue.value = [...accordionNames].filter(
|
|
689
|
+
(name) => !newValue.has(name)
|
|
690
|
+
);
|
|
691
|
+
return;
|
|
692
|
+
}
|
|
693
|
+
if (props.collapse) {
|
|
694
|
+
localModelValue.value = [...newValue];
|
|
695
|
+
return;
|
|
696
|
+
}
|
|
697
|
+
localModelValue.value = newValue.values().next().value;
|
|
621
698
|
}
|
|
622
699
|
});
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
700
|
+
onMounted(() => {
|
|
701
|
+
if (props.not && localModelValue.value === void 0) {
|
|
702
|
+
localModelValue.value = props.collapse ? [] : [...accordionNames.values()].splice(1, accordionNames.size);
|
|
703
|
+
}
|
|
704
|
+
nextTick(() => {
|
|
705
|
+
for (const name of accordionNames) {
|
|
706
|
+
bus.emit("toggle", {
|
|
707
|
+
name,
|
|
708
|
+
value: expandedAccordions.value.has(name)
|
|
709
|
+
});
|
|
710
|
+
}
|
|
711
|
+
});
|
|
712
|
+
});
|
|
713
|
+
const bus = mitt();
|
|
714
|
+
useProvideGroupState(INJECTION_KEY_ACCORDION_GROUP, {
|
|
626
715
|
disabled,
|
|
627
|
-
collapse,
|
|
628
716
|
modifiers: itemModifiers,
|
|
629
|
-
|
|
717
|
+
bus
|
|
718
|
+
});
|
|
719
|
+
bus.on("register", ({ name }) => {
|
|
720
|
+
accordionNames.add(name);
|
|
721
|
+
});
|
|
722
|
+
bus.on("unregister", ({ name }) => {
|
|
723
|
+
accordionNames.delete(name);
|
|
724
|
+
});
|
|
725
|
+
bus.on("toggle", ({ name, value }) => {
|
|
726
|
+
const newValue = new Set(expandedAccordions.value);
|
|
727
|
+
if (value) {
|
|
728
|
+
if (!props.collapse) {
|
|
729
|
+
for (const item of newValue) {
|
|
730
|
+
if (item !== name) {
|
|
731
|
+
bus.emit("toggle", { name: item, value: false });
|
|
732
|
+
}
|
|
733
|
+
}
|
|
734
|
+
newValue.clear();
|
|
735
|
+
}
|
|
736
|
+
newValue.add(name);
|
|
737
|
+
expandedAccordions.value = newValue;
|
|
738
|
+
return;
|
|
739
|
+
}
|
|
740
|
+
newValue.delete(name);
|
|
741
|
+
expandedAccordions.value = newValue;
|
|
630
742
|
});
|
|
743
|
+
const expand = (name) => {
|
|
744
|
+
if (typeof name === "string") {
|
|
745
|
+
bus.emit("toggle", { name, value: true });
|
|
746
|
+
return;
|
|
747
|
+
}
|
|
748
|
+
if (Array.isArray(name)) {
|
|
749
|
+
for (const item of name) {
|
|
750
|
+
bus.emit("toggle", { name: item, value: true });
|
|
751
|
+
}
|
|
752
|
+
return;
|
|
753
|
+
}
|
|
754
|
+
for (const item of accordionNames) {
|
|
755
|
+
bus.emit("toggle", { name: item, value: true });
|
|
756
|
+
}
|
|
757
|
+
};
|
|
758
|
+
bus.on("expand", ({ name }) => expand(name));
|
|
759
|
+
const collapse = (name) => {
|
|
760
|
+
if (typeof name === "string") {
|
|
761
|
+
bus.emit("toggle", { name, value: false });
|
|
762
|
+
return;
|
|
763
|
+
}
|
|
764
|
+
if (Array.isArray(name)) {
|
|
765
|
+
for (const item of name) {
|
|
766
|
+
bus.emit("toggle", { name: item, value: false });
|
|
767
|
+
}
|
|
768
|
+
return;
|
|
769
|
+
}
|
|
770
|
+
for (const item of accordionNames) {
|
|
771
|
+
bus.emit("toggle", { name: item, value: false });
|
|
772
|
+
}
|
|
773
|
+
};
|
|
774
|
+
bus.on("collapse", ({ name }) => collapse(name));
|
|
775
|
+
__expose({ expandedAccordions, expand, collapse });
|
|
631
776
|
const bemCssClasses = useModifiers(
|
|
632
777
|
"vv-accordion-group",
|
|
633
778
|
modifiers,
|
|
@@ -642,7 +787,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
642
787
|
class: normalizeClass(unref(bemCssClasses))
|
|
643
788
|
},
|
|
644
789
|
[
|
|
645
|
-
renderSlot(_ctx.$slots, "default", {
|
|
790
|
+
renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
|
|
791
|
+
expandedAccordions: unref(expandedAccordions),
|
|
792
|
+
expand,
|
|
793
|
+
collapse
|
|
794
|
+
})), () => [
|
|
646
795
|
(openBlock(true), createElementBlock(
|
|
647
796
|
Fragment,
|
|
648
797
|
null,
|
|
@@ -656,16 +805,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
656
805
|
title: item.title,
|
|
657
806
|
content: item.content
|
|
658
807
|
}),
|
|
659
|
-
{
|
|
660
|
-
header: withCtx((data) => [
|
|
661
|
-
renderSlot(_ctx.$slots, `header::${item.name}`, normalizeProps(guardReactiveProps(data)))
|
|
662
|
-
]),
|
|
663
|
-
details: withCtx((data) => [
|
|
664
|
-
renderSlot(_ctx.$slots, `details::${item.name}`, normalizeProps(guardReactiveProps(data)))
|
|
665
|
-
]),
|
|
808
|
+
createSlots({
|
|
666
809
|
_: 2
|
|
667
810
|
/* DYNAMIC */
|
|
668
|
-
},
|
|
811
|
+
}, [
|
|
812
|
+
_ctx.$slots[`summary::${item.name}`] ? {
|
|
813
|
+
name: "summary",
|
|
814
|
+
fn: withCtx((data) => [
|
|
815
|
+
renderSlot(_ctx.$slots, `summary::${item.name}`, normalizeProps(guardReactiveProps(data)))
|
|
816
|
+
]),
|
|
817
|
+
key: "0"
|
|
818
|
+
} : void 0,
|
|
819
|
+
_ctx.$slots[`content::${item.name}`] ? {
|
|
820
|
+
name: "default",
|
|
821
|
+
fn: withCtx((data) => [
|
|
822
|
+
renderSlot(_ctx.$slots, `content::${item.name}`, normalizeProps(guardReactiveProps(data)))
|
|
823
|
+
]),
|
|
824
|
+
key: "1"
|
|
825
|
+
} : void 0
|
|
826
|
+
]),
|
|
669
827
|
1040
|
|
670
828
|
/* FULL_PROPS, DYNAMIC_SLOTS */
|
|
671
829
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("uid"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","uid","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAccordionGroup=o(e.vue,e.uid,e.core)}(this,(function(e,o,t){"use strict";var
|
|
1
|
+
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("mitt"),require("uid"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","uid","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAccordionGroup=o(e.vue,e.mitt,e.uid,e.core)}(this,(function(e,o,t,a){"use strict";var n=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(n||{}),l=(e=>(e.before="before",e.after="after",e))(l||{}),r=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(r||{}),i=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(i||{});const u=Symbol.for("accordionGroup"),s=(Boolean,Boolean,Boolean,Boolean,{modifiers:{type:[String,Array],default:void 0}});l.before,n.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,r.button,i.button;const d={...s,name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},disabled:Boolean,not:Boolean};function c(o){const{group:t,isInGroup:a}=function(o){const t=e.inject(o,void 0),a=e.computed((()=>void 0!==t));return{group:t,isInGroup:a,getGroupOrLocalRef:function(o,a,n){const l=null==t?void 0:t[o];if(l)return e.computed({get:()=>l.value,set(e){l.value=e}});const r=e.toRef(a,o);return e.computed({get:()=>r.value,set(e){n&&n(`update:${o}`,e)}})}}}(u),n=e.computed((()=>Boolean(o.disabled||(null==t?void 0:t.disabled.value)))),l=e.computed((()=>{let e=o.modifiers,a=null==t?void 0:t.modifiers.value;const n=new Set;return e&&(Array.isArray(e)||(e=e.split(" ")),e.forEach((e=>n.add(e)))),a&&(Array.isArray(a)||(a=a.split(" ")),a.forEach((e=>n.add(e)))),Array.from(n)}));return{isInGroup:a,group:t,modifiers:l,disabled:n,bus:null==t?void 0:t.bus}}function m(o,t,a){return e.computed((()=>{const n={[o]:!0},l="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(n[`${o}--${e}`]=!0)})),a&&Object.keys(a.value).forEach((t=>{n[`${o}--${t}`]=e.unref(a.value[t])})),n}))}const p=["id","open"],v=["aria-controls","aria-expanded"],f=["aria-hidden"],g=e.defineComponent({name:"VvAccordion",props:d,emits:["update:modelValue"],setup(o,{expose:n,emit:l}){const r=o,i=e.useAttrs(),u=l,s=a.useVModel(r,"modelValue",u),d=e.computed((()=>r.name||(null==i?void 0:i.id)||t.uid())),{title:g,content:y,not:b}=e.toRefs(r),{isInGroup:x,modifiers:A,disabled:B,bus:S}=c(r),V=e.ref(!1);e.watch(s,(e=>{"boolean"==typeof e&&(V.value=b.value?!e:e)}),{immediate:!0}),e.watch(V,(e=>{s.value=b.value?!e:e})),null==S||S.on("toggle",(({name:e,value:o})=>{e===d.value&&(V.value=o)}));const h=()=>{B.value||(x.value?null==S||S.emit("toggle",{name:d.value,value:!V.value}):V.value=!V.value)};e.watch(d,((e,o)=>{S&&(o&&o!==e&&S.emit("unregister",{name:o}),S.emit("register",{name:e}))}),{immediate:!0}),e.onBeforeUnmount((()=>{S&&S.emit("unregister",{name:d.value})}));const w=()=>{V.value||h()},k=()=>{V.value&&h()},$=e=>{S?S.emit("expand",{name:e}):console.warn(`[VvAccordion]: You are trying to expand accordion group of "${d.value}" but it is not in a group`)},E=e=>{S?null==S||S.emit("collapse",{name:e}):console.warn(`[VvAccordion]: You are trying to collapse accordion group of "${d.value}" but it is not in a group`)};n({isExpanded:V,expand:w,collapse:k,groupExpand:$,groupCollapse:E});const P=m("vv-accordion",A,e.computed((()=>({disabled:B.value}))));return(o,t)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(d),class:e.normalizeClass(e.unref(P)),open:e.unref(V)},[e.createElementVNode("summary",{"aria-controls":e.unref(d),"aria-expanded":e.unref(V),class:"vv-accordion__summary",onClick:t[0]||(t[0]=e.withModifiers((e=>h()),["prevent"]))},[e.renderSlot(o.$slots,"summary",e.normalizeProps(e.guardReactiveProps({isExpanded:e.unref(V),expand:w,collapse:k,groupExpand:$,groupCollapse:E})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(g)),1)]))],8,v),e.createElementVNode("div",{"aria-hidden":!e.unref(V),class:"vv-accordion__content"},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({isExpanded:e.unref(V),expand:w,collapse:k,groupExpand:$,groupCollapse:E})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(y)),1)]))],8,f)],10,p))}}),y={...s,modelValue:{type:[String,Array],default:void 0},items:{type:Array,default:()=>[]},collapse:Boolean,itemModifiers:{type:[String,Array],default:""},disabled:Boolean,not:Boolean,storeKey:String};return e.defineComponent({name:"VvAccordionGroup",props:y,emits:["update:modelValue"],setup(t,{expose:n,emit:l}){const r=t,i=l,{disabled:s,modifiers:d,itemModifiers:c,items:p}=e.toRefs(r);e.watchEffect((()=>{"string"==typeof r.modelValue&&r.collapse&&console.warn("[VvAccordionGroup]: modelValue is a string but collapse is true.")}));const v=e.reactive(new Set);let f=e.ref();e.watch((()=>r.storeKey),((o,t)=>{t&&t!==o&&localStorage.removeItem(t),f=o?a.useLocalStorage(o,f.value):e.ref(f.value)}),{immediate:!0});const y=e.computed({get:()=>null!==r.modelValue&&void 0!==r.modelValue?r.modelValue:f.value,set:e=>{i("update:modelValue",e),f.value=e}}),b=e.computed({get:()=>{if(void 0===y.value)return new Set;let e=new Set;return r.not?"string"==typeof y.value?e=new Set([...v].filter((e=>e!==y.value))):Array.isArray(y.value)&&(e=new Set([...v].filter((e=>!y.value.includes(e))))):"string"==typeof y.value?e=new Set([y.value]):Array.isArray(y.value)&&(e=new Set(y.value)),e},set:e=>{r.not?y.value=[...v].filter((o=>!e.has(o))):r.collapse?y.value=[...e]:y.value=e.values().next().value}});e.onMounted((()=>{r.not&&void 0===y.value&&(y.value=r.collapse?[]:[...v.values()].splice(1,v.size)),e.nextTick((()=>{for(const e of v)x.emit("toggle",{name:e,value:b.value.has(e)})}))}));const x=o();var A,B;A=u,B={disabled:s,modifiers:c,bus:x},e.provide(A,B),x.on("register",(({name:e})=>{v.add(e)})),x.on("unregister",(({name:e})=>{v.delete(e)})),x.on("toggle",(({name:e,value:o})=>{const t=new Set(b.value);if(o){if(!r.collapse){for(const o of t)o!==e&&x.emit("toggle",{name:o,value:!1});t.clear()}return t.add(e),void(b.value=t)}t.delete(e),b.value=t}));const S=e=>{if("string"!=typeof e)if(Array.isArray(e))for(const o of e)x.emit("toggle",{name:o,value:!0});else for(const o of v)x.emit("toggle",{name:o,value:!0});else x.emit("toggle",{name:e,value:!0})};x.on("expand",(({name:e})=>S(e)));const V=e=>{if("string"!=typeof e)if(Array.isArray(e))for(const o of e)x.emit("toggle",{name:o,value:!1});else for(const o of v)x.emit("toggle",{name:o,value:!1});else x.emit("toggle",{name:e,value:!1})};x.on("collapse",(({name:e})=>V(e))),n({expandedAccordions:b,expand:S,collapse:V});const h=m("vv-accordion-group",d,e.computed((()=>({disabled:s.value}))));return(o,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(h))},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({expandedAccordions:e.unref(b),expand:S,collapse:V})),(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p),(t=>(e.openBlock(),e.createBlock(g,e.mergeProps({key:t.title},{name:t.name,title:t.title,content:t.content}),e.createSlots({_:2},[o.$slots[`summary::${t.name}`]?{name:"summary",fn:e.withCtx((a=>[e.renderSlot(o.$slots,`summary::${t.name}`,e.normalizeProps(e.guardReactiveProps(a)))])),key:"0"}:void 0,o.$slots[`content::${t.name}`]?{name:"default",fn:e.withCtx((a=>[e.renderSlot(o.$slots,`content::${t.name}`,e.normalizeProps(e.guardReactiveProps(a)))])),key:"1"}:void 0]),1040)))),128))]))],2))}})}));
|