@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.
Files changed (90) hide show
  1. package/dist/components/VvAccordion/VvAccordion.es.js +119 -79
  2. package/dist/components/VvAccordion/VvAccordion.umd.js +1 -1
  3. package/dist/components/VvAccordion/VvAccordion.vue.d.ts +18 -4
  4. package/dist/components/VvAccordion/index.d.ts +4 -8
  5. package/dist/components/VvAccordionGroup/VvAccordionGroup.es.js +282 -124
  6. package/dist/components/VvAccordionGroup/VvAccordionGroup.umd.js +1 -1
  7. package/dist/components/VvAccordionGroup/VvAccordionGroup.vue.d.ts +34 -7
  8. package/dist/components/VvAccordionGroup/index.d.ts +4 -1
  9. package/dist/components/VvAction/VvAction.vue.d.ts +1 -1
  10. package/dist/components/VvAlert/VvAlert.vue.d.ts +1 -1
  11. package/dist/components/VvButton/VvButton.es.js +92 -98
  12. package/dist/components/VvButton/VvButton.umd.js +1 -1
  13. package/dist/components/VvButton/VvButton.vue.d.ts +7 -7
  14. package/dist/components/VvButton/index.d.ts +11 -11
  15. package/dist/components/VvButtonGroup/VvButtonGroup.es.js +7 -13
  16. package/dist/components/VvButtonGroup/VvButtonGroup.umd.js +1 -1
  17. package/dist/components/VvButtonGroup/VvButtonGroup.vue.d.ts +3 -3
  18. package/dist/components/VvCheckbox/VvCheckbox.es.js +81 -87
  19. package/dist/components/VvCheckbox/VvCheckbox.umd.js +1 -1
  20. package/dist/components/VvCheckbox/VvCheckbox.vue.d.ts +6 -6
  21. package/dist/components/VvCheckbox/index.d.ts +2 -2
  22. package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js +15 -29
  23. package/dist/components/VvCheckboxGroup/VvCheckboxGroup.umd.js +1 -1
  24. package/dist/components/VvCheckboxGroup/VvCheckboxGroup.vue.d.ts +5 -5
  25. package/dist/components/VvCombobox/VvCombobox.es.js +13 -16
  26. package/dist/components/VvCombobox/VvCombobox.umd.js +1 -1
  27. package/dist/components/VvCombobox/VvCombobox.vue.d.ts +11 -11
  28. package/dist/components/VvCombobox/index.d.ts +1 -1
  29. package/dist/components/VvDropdown/VvDropdown.vue.d.ts +5 -5
  30. package/dist/components/VvDropdown/VvDropdownAction.vue.d.ts +1 -1
  31. package/dist/components/VvDropdown/VvDropdownOption.vue.d.ts +1 -1
  32. package/dist/components/VvDropdown/index.d.ts +1 -1
  33. package/dist/components/VvInputFile/VvInputFile.es.js +183 -168
  34. package/dist/components/VvInputFile/VvInputFile.umd.js +1 -1
  35. package/dist/components/VvInputFile/VvInputFile.vue.d.ts +16 -9
  36. package/dist/components/VvInputFile/index.d.ts +12 -3
  37. package/dist/components/VvInputText/VvInputClearAction.d.ts +1 -1
  38. package/dist/components/VvInputText/VvInputStepAction.d.ts +1 -1
  39. package/dist/components/VvInputText/VvInputText.vue.d.ts +6 -6
  40. package/dist/components/VvProgress/VvProgress.vue.d.ts +1 -1
  41. package/dist/components/VvRadio/VvRadio.es.js +64 -70
  42. package/dist/components/VvRadio/VvRadio.umd.js +1 -1
  43. package/dist/components/VvRadio/VvRadio.vue.d.ts +6 -6
  44. package/dist/components/VvRadio/index.d.ts +6 -6
  45. package/dist/components/VvRadioGroup/VvRadioGroup.es.js +15 -29
  46. package/dist/components/VvRadioGroup/VvRadioGroup.umd.js +1 -1
  47. package/dist/components/VvRadioGroup/VvRadioGroup.vue.d.ts +5 -5
  48. package/dist/components/VvSelect/VvSelect.vue.d.ts +8 -8
  49. package/dist/components/VvTextarea/VvTextarea.vue.d.ts +5 -5
  50. package/dist/components/VvTooltip/VvTooltip.vue.d.ts +3 -3
  51. package/dist/components/VvTooltip/index.d.ts +1 -1
  52. package/dist/components/index.es.js +494 -328
  53. package/dist/components/index.umd.js +1 -1
  54. package/dist/composables/alert/useInjectAlert.d.ts +1 -6
  55. package/dist/composables/group/useInjectedGroupState.d.ts +4 -5
  56. package/dist/composables/group/useProvideGroupState.d.ts +3 -3
  57. package/dist/constants.d.ts +6 -10
  58. package/dist/icons.es.js +3 -3
  59. package/dist/icons.umd.js +1 -1
  60. package/dist/index.es.js +3 -2
  61. package/dist/index.umd.js +1 -1
  62. package/dist/props/index.d.ts +1 -1
  63. package/dist/resolvers/unplugin.es.js +3 -2
  64. package/dist/resolvers/unplugin.umd.js +1 -1
  65. package/dist/stories/AccordionGroup/AccordionGroup.stories.d.ts +58 -15
  66. package/dist/stories/AccordionGroup/AccordionGroupSlots.stories.d.ts +381 -107
  67. package/dist/types/group.d.ts +37 -15
  68. package/package.json +37 -36
  69. package/src/assets/icons/detailed.json +1 -1
  70. package/src/assets/icons/normal.json +1 -1
  71. package/src/assets/icons/simple.json +1 -1
  72. package/src/components/VvAccordion/VvAccordion.vue +119 -56
  73. package/src/components/VvAccordion/index.ts +8 -23
  74. package/src/components/VvAccordionGroup/VvAccordionGroup.vue +164 -42
  75. package/src/components/VvAccordionGroup/index.ts +4 -1
  76. package/src/components/VvButton/index.ts +7 -12
  77. package/src/components/VvButtonGroup/VvButtonGroup.vue +1 -2
  78. package/src/components/VvCheckbox/index.ts +2 -2
  79. package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue +1 -2
  80. package/src/components/VvInputFile/VvInputFile.vue +71 -47
  81. package/src/components/VvInputFile/index.ts +5 -4
  82. package/src/components/VvRadio/index.ts +5 -5
  83. package/src/components/VvRadioGroup/VvRadioGroup.vue +1 -2
  84. package/src/composables/group/useInjectedGroupState.ts +20 -16
  85. package/src/composables/group/useProvideGroupState.ts +10 -15
  86. package/src/constants.ts +19 -14
  87. package/src/stories/AccordionGroup/AccordionGroup.settings.ts +2 -2
  88. package/src/stories/AccordionGroup/AccordionGroup.test.ts +16 -10
  89. package/src/stories/AccordionGroup/AccordionGroupSlots.stories.ts +1 -1
  90. package/src/types/group.ts +22 -14
@@ -1,6 +1,7 @@
1
- import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, isRef, provide, watchEffect, watch, Fragment, renderList, createBlock, mergeProps, withCtx } from "vue";
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 { useToggle, useStorage } from "@vueuse/core";
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("accordionGroup");
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(() => !isEmpty(group));
282
+ const isInGroup = computed(() => group !== void 0);
283
283
  function getGroupOrLocalRef(propName, props, emit) {
284
- if (group == null ? void 0 : group.value) {
285
- const groupPropValue = unref(group.value)[propName];
284
+ const groupPropValue = group == null ? void 0 : group[propName];
285
+ if (groupPropValue) {
286
286
  return computed({
287
287
  get() {
288
- return groupPropValue == null ? void 0 : groupPropValue.value;
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, emit) {
344
- const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(
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.value.modifiers.value;
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
- // local props
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
- modifiers,
431
- title,
432
- content,
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
- isInGroup,
437
- not
438
- } = useGroupProps(props, emit);
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
- set: (newValue) => {
455
- if (not.value) {
456
- newValue = !newValue;
457
- }
458
- if (isInGroup.value) {
459
- if (collapse.value && Array.isArray(modelValue.value)) {
460
- if (newValue) {
461
- modelValue.value.push(accordionName.value);
462
- return;
463
- }
464
- modelValue.value = modelValue.value.filter(
465
- (name) => name !== accordionName.value
466
- );
467
- return;
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
- modelValue.value = newValue ? accordionName.value : null;
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
- modelValue.value = newValue;
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(isOpen)
520
+ open: unref(isExpanded)
492
521
  }, [
493
522
  createElementVNode("summary", {
494
523
  "aria-controls": unref(accordionName),
495
- "aria-expanded": unref(isOpen),
524
+ "aria-expanded": unref(isExpanded),
496
525
  class: "vv-accordion__summary",
497
- onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(onClick)(), ["prevent"]))
526
+ onClick: _cache[0] || (_cache[0] = withModifiers(($event) => onClick(), ["prevent"]))
498
527
  }, [
499
- renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
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(isOpen),
543
+ "aria-hidden": !unref(isExpanded),
509
544
  class: "vv-accordion__content"
510
545
  }, [
511
- renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
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: [String, Array],
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
- if (Object.keys(groupState).some(
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, collapse, modifiers, itemModifiers, items, not } = toRefs(props);
619
+ const { disabled, modifiers, itemModifiers, items } = toRefs(props);
583
620
  watchEffect(() => {
584
- if (typeof props.modelValue === "string" && collapse.value) {
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
- let localModelValue = ref([]);
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
- localModelValue = useStorage(newKey, localModelValue.value);
596
- } else {
597
- localModelValue = ref([]);
636
+ storeModelValue = useLocalStorage(newKey, storeModelValue.value);
637
+ return;
598
638
  }
639
+ storeModelValue = ref(storeModelValue.value);
599
640
  },
600
- { immediate: true }
641
+ {
642
+ immediate: true
643
+ }
601
644
  );
602
- const modelValue = computed({
645
+ const localModelValue = computed({
603
646
  get: () => {
604
- var _a;
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 !collapse.value ? (_a = localModelValue.value) == null ? void 0 : _a[0] : localModelValue.value;
650
+ return storeModelValue.value;
612
651
  },
613
652
  set: (newValue) => {
614
- if (props.modelValue !== void 0) {
615
- if ((Array.isArray(props.modelValue) || collapse.value) && !Array.isArray(newValue)) {
616
- newValue = [newValue];
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
- return emit("update:modelValue", newValue);
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
- localModelValue.value = Array.isArray(newValue) ? newValue : [newValue];
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
- useProvideGroupState({
624
- key: INJECTION_KEY_ACCORDION_GROUP,
625
- modelValue,
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
- not
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 r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),l=(e=>(e.before="before",e.after="after",e))(l||{}),a=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(a||{}),n=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(n||{});const u=Symbol.for("accordionGroup"),i=(Boolean,Boolean,Boolean,Boolean,{modifiers:{type:[String,Array],default:void 0}});function d(o){const t=e.inject(o,void 0),r=e.computed((()=>{return o=t,!(null==(r=e.unref(o))||""===r||Array.isArray(r)&&0===r.length||!(r instanceof Date)&&"object"==typeof r&&0===Object.keys(r).length);var o,r}));return{group:t,isInGroup:r,getGroupOrLocalRef:function(o,r,l){if(null==t?void 0:t.value){const r=e.unref(t.value)[o];return e.computed({get:()=>null==r?void 0:r.value,set(e){r.value=e}})}const a=e.toRef(r,o);return e.computed({get:()=>a.value,set(e){l&&l(`update:${o}`,e)}})}}}l.before,r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,a.button,n.button;const s={...i,name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},disabled:Boolean,not:Boolean};function c(o,t,r){return e.computed((()=>{const l={[o]:!0},a="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return a&&Array.isArray(a)&&a.forEach((e=>{e&&(l[`${o}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((t=>{l[`${o}--${t}`]=e.unref(r.value[t])})),l}))}const v=["id","open"],p=["aria-controls","aria-expanded"],m=["aria-hidden"],f=e.defineComponent({name:"VvAccordion",props:s,emits:["update:modelValue"],setup(r,{emit:l}){const a=r,n=e.useAttrs(),i=l,s=e.computed((()=>a.name||(null==n?void 0:n.id)||o.uid())),{modifiers:f,title:y,content:g,disabled:b,collapse:A,modelValue:B,isInGroup:V,not:h}=function(o,t){const{group:r,isInGroup:l,getGroupOrLocalRef:a}=d(u),{title:n,content:i}=e.toRefs(o),s=a("modelValue",o,t),c=a("not",o),v=a("collapse",o),p=e.computed((()=>{var e;return Boolean(o.disabled||(null==(e=null==r?void 0:r.value)?void 0:e.disabled.value))})),m=e.computed((()=>{let e=o.modifiers,t=null==r?void 0:r.value.modifiers.value;const l=new Set;return e&&(Array.isArray(e)||(e=e.split(" ")),e.forEach((e=>l.add(e)))),t&&(Array.isArray(t)||(t=t.split(" ")),t.forEach((e=>l.add(e)))),Array.from(l)}));return{modelValue:s,not:c,isInGroup:l,group:r,collapse:v,modifiers:m,disabled:p,title:n,content:i}}(a,i),k=e.ref(!1),S=e.computed({get:()=>{let e=B.value;return V.value?e=A.value&&Array.isArray(B.value)?B.value.includes(s.value):B.value===s.value:void 0===B.value&&(e=k.value),h.value?!e:e},set:e=>{if(h.value&&(e=!e),V.value)return A.value&&Array.isArray(B.value)?e?void B.value.push(s.value):void(B.value=B.value.filter((e=>e!==s.value))):void(B.value=e?s.value:null);void 0!==B.value||"boolean"!=typeof e?B.value=e:k.value=e}}),$=c("vv-accordion",f,e.computed((()=>({disabled:b.value})))),E=t.useToggle(S);return(o,t)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(s),class:e.normalizeClass(e.unref($)),open:e.unref(S)},[e.createElementVNode("summary",{"aria-controls":e.unref(s),"aria-expanded":e.unref(S),class:"vv-accordion__summary",onClick:t[0]||(t[0]=e.withModifiers((o=>e.unref(E)()),["prevent"]))},[e.renderSlot(o.$slots,"summary",e.normalizeProps(e.guardReactiveProps({open:e.unref(S)})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(y)),1)]))],8,p),e.createElementVNode("div",{"aria-hidden":!e.unref(S),class:"vv-accordion__content"},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({open:e.unref(S)})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(g)),1)]))],8,m)],10,v))}}),y={...i,modelValue:[String,Array],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(o,{emit:r}){const l=o,a=r,{disabled:n,collapse:i,modifiers:d,itemModifiers:s,items:v,not:p}=e.toRefs(l);e.watchEffect((()=>{"string"==typeof l.modelValue&&i.value&&console.warn("[VvAccordionGroup]: modelValue is a string but collapse is true.")}));let m=e.ref([]);e.watch((()=>l.storeKey),(o=>{m=o?t.useStorage(o,m.value):e.ref([])}),{immediate:!0});const y=e.computed({get:()=>{var e;return void 0!==l.modelValue?i.value?l.modelValue:Array.isArray(l.modelValue)?l.modelValue[0]:l.modelValue:i.value?m.value:null==(e=m.value)?void 0:e[0]},set:e=>{if(void 0!==l.modelValue)return!Array.isArray(l.modelValue)&&!i.value||Array.isArray(e)||(e=[e]),a("update:modelValue",e);m.value=Array.isArray(e)?e:[e]}});!function(o){if(Object.keys(o).some((t=>"key"!==t&&!e.isRef(o[t]))))throw Error("One or more groupState props aren't ref.");e.provide(o.key,e.computed((()=>o)))}({key:u,modelValue:y,disabled:n,collapse:i,modifiers:s,not:p});const g=c("vv-accordion-group",d,e.computed((()=>({disabled:n.value}))));return(o,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(g))},[e.renderSlot(o.$slots,"default",{},(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(v),(t=>(e.openBlock(),e.createBlock(f,e.mergeProps({key:t.title},{name:t.name,title:t.title,content:t.content}),{header:e.withCtx((r=>[e.renderSlot(o.$slots,`header::${t.name}`,e.normalizeProps(e.guardReactiveProps(r)))])),details:e.withCtx((r=>[e.renderSlot(o.$slots,`details::${t.name}`,e.normalizeProps(e.guardReactiveProps(r)))])),_:2},1040)))),128))]))],2))}})}));
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))}})}));