@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.50

package/dist/components/VvAccordionGroup/VvAccordionGroup.es.js

@@ -1,6 +1,11 @@
-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";
-import { uid } from "uid";
-import { useToggle, useStorage } from "@vueuse/core";
+import { inject, computed, toRef, unref, defineComponent, useAttrs, useId, toRefs, ref, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, isRef, provide, watchEffect, reactive, onMounted, nextTick, Fragment, renderList, createBlock, mergeProps, createSlots, withCtx } from "vue";
+import mitt from "mitt";
+import { useVModel, useStorage } from "@vueuse/core";
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -35,14 +40,16 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   ButtonType2["reset"] = "reset";
   return ButtonType2;
 })(ButtonType || {});
-var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
-const INJECTION_KEY_ACCORDION_GROUP = Symbol.for("accordionGroup");
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
+const INJECTION_KEY_ACCORDION_GROUP = Symbol.for(
+  "accordionGroup"
+);
 const LinkProps = {
   /**
    * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
@@ -58,10 +65,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -74,44 +78,65 @@ const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActiveProps = {
   /**
    * Whether the item is active
    */
-  active: Boolean
+  active: {
+    type: Boolean,
+    default: false
+  }
 };
 const CurrentProps = {
   /**
    * Whether the item is current
    */
-  current: Boolean
+  current: {
+    type: Boolean,
+    default: false
+  }
 };
 const PressedProps = {
   /**
    * Whether the item is pressed
    */
-  pressed: Boolean
+  pressed: {
+    type: Boolean,
+    default: false
+  }
 };
 const LabelProps = {
   /**
    * The item label
    */
-  label: [String, Number]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
 };
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 ({
   /**
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -142,7 +167,8 @@ const ModifiersProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -210,7 +236,8 @@ const ModifiersProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 });
 ({
@@ -234,20 +261,71 @@ const ModifiersProps = {
   ariaLabel: {
     type: String,
     default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
   }
 });
-function isEmpty(value) {
-  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));
-}
-function useInjectedGroupState(groupKey) {
+const StorageProps = {
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+};
+const VvAccordionGroupProps = {
+  ...ModifiersProps,
+  ...StorageProps,
+  /**
+   * VModel
+   */
+  modelValue: {
+    type: [String, Array],
+    default: void 0
+  },
+  /**
+   * Accordion items
+   * @type VvAccordionGroupItem
+   */
+  items: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * If true, accordion items stay open when another item is opened
+   */
+  collapse: Boolean,
+  /**
+   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+   */
+  itemModifiers: {
+    type: [String, Array],
+    default: ""
+  },
+  /**
+   * If true, the accordion items will be disabled
+   */
+  disabled: Boolean,
+  /**
+   * If true, the accordion items will be opened by default
+   */
+  not: Boolean
+};
+const VvAccordionGroupEvents = ["update:modelValue"];
+function useGroupStateInject(groupKey) {
   const group = inject(groupKey, void 0);
-  const isInGroup = computed(() => !isEmpty(group));
+  const isInGroup = computed(() => group !== void 0);
   function getGroupOrLocalRef(propName, props, emit) {
-    if (group == null ? void 0 : group.value) {
-      const groupPropValue = unref(group.value)[propName];
+    const groupPropValue = group == null ? void 0 : group[propName];
+    if (groupPropValue) {
       return computed({
         get() {
-          return groupPropValue == null ? void 0 : groupPropValue.value;
+          return groupPropValue.value;
         },
         set(value) {
           groupPropValue.value = value;
@@ -260,8 +338,9 @@ function useInjectedGroupState(groupKey) {
         return propRef.value;
       },
       set(value) {
-        if (emit)
+        if (emit) {
           emit(`update:${propName}`, value);
+        }
       }
     });
   }
@@ -302,23 +381,16 @@ const VvAccordionProps = {
   not: Boolean
 };
 const VvAccordionEvents = ["update:modelValue"];
-function useGroupProps(props, emit) {
-  const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(
+function useGroupProps(props) {
+  const { group, isInGroup } = useGroupStateInject(
     INJECTION_KEY_ACCORDION_GROUP
   );
-  const { title, content } = toRefs(props);
-  const modelValue = getGroupOrLocalRef("modelValue", props, emit);
-  const not = getGroupOrLocalRef("not", props);
-  const collapse = getGroupOrLocalRef("collapse", props);
   const disabled = computed(
-    () => {
-      var _a;
-      return Boolean(props.disabled || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.disabled.value));
-    }
+    () => Boolean(props.disabled || (group == null ? void 0 : group.disabled.value))
   );
   const modifiers = computed(() => {
     let localModifiers = props.modifiers;
-    let groupModifiers = group == null ? void 0 : group.value.modifiers.value;
+    let groupModifiers = group == null ? void 0 : group.modifiers.value;
     const toReturn = /* @__PURE__ */ new Set();
     if (localModifiers) {
       if (!Array.isArray(localModifiers)) {
@@ -336,16 +408,11 @@ function useGroupProps(props, emit) {
   });
   return {
     // group props
-    modelValue,
-    not,
     isInGroup,
     group,
-    collapse,
     modifiers,
     disabled,
-    // local props
-    title,
-    content
+    bus: group == null ? void 0 : group.bus
   };
 }
 function useModifiers(prefix, modifiers, others) {
@@ -381,61 +448,103 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: VvAccordionProps,
   emits: VvAccordionEvents,
-  setup(__props, { emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const attrs = useAttrs();
+    const modelValue = useVModel(props, "modelValue", emit);
     const accordionName = computed(
-      () => props.name || (attrs == null ? void 0 : attrs.id) || uid()
+      () => props.name || (attrs == null ? void 0 : attrs.id) || useId()
     );
-    const {
-      modifiers,
-      title,
-      content,
-      disabled,
-      collapse,
+    const { title, content, not } = toRefs(props);
+    const { isInGroup, modifiers, disabled, bus } = useGroupProps(props);
+    const isExpanded = ref(false);
+    watch(
       modelValue,
-      isInGroup,
-      not
-    } = useGroupProps(props, emit);
-    const localModelValue = ref(false);
-    const isOpen = computed({
-      get: () => {
-        let toReturn = modelValue.value;
-        if (isInGroup.value) {
-          if (collapse.value && Array.isArray(modelValue.value)) {
-            toReturn = modelValue.value.includes(accordionName.value);
-          } else {
-            toReturn = modelValue.value === accordionName.value;
-          }
-        } else if (modelValue.value === void 0) {
-          toReturn = localModelValue.value;
+      (newValue) => {
+        if (typeof newValue === "boolean") {
+          isExpanded.value = not.value ? !newValue : newValue;
         }
-        return not.value ? !toReturn : toReturn;
       },
-      set: (newValue) => {
-        if (not.value) {
-          newValue = !newValue;
-        }
-        if (isInGroup.value) {
-          if (collapse.value && Array.isArray(modelValue.value)) {
-            if (newValue) {
-              modelValue.value.push(accordionName.value);
-              return;
-            }
-            modelValue.value = modelValue.value.filter(
-              (name) => name !== accordionName.value
-            );
-            return;
+      { immediate: true }
+    );
+    watch(isExpanded, (newValue) => {
+      modelValue.value = not.value ? !newValue : newValue;
+    });
+    bus == null ? void 0 : bus.on("toggle", ({ name, value }) => {
+      if (name !== accordionName.value) {
+        return;
+      }
+      isExpanded.value = value;
+    });
+    function onClick() {
+      if (disabled.value) {
+        return;
+      }
+      if (isInGroup.value) {
+        bus == null ? void 0 : bus.emit("toggle", {
+          name: accordionName.value,
+          value: !isExpanded.value
+        });
+        return;
+      }
+      isExpanded.value = !isExpanded.value;
+    }
+    watch(
+      accordionName,
+      (newValue, oldValue) => {
+        if (bus) {
+          if (oldValue && oldValue !== newValue) {
+            bus.emit("unregister", { name: oldValue });
           }
-          modelValue.value = newValue ? accordionName.value : null;
-          return;
+          bus.emit("register", { name: newValue });
         }
-        if (modelValue.value === void 0 && typeof newValue === "boolean") {
-          localModelValue.value = newValue;
-          return;
-        }
-        modelValue.value = newValue;
+      },
+      {
+        immediate: true
+      }
+    );
+    onBeforeUnmount(() => {
+      if (bus) {
+        bus.emit("unregister", { name: accordionName.value });
+      }
+    });
+    function expand() {
+      if (isExpanded.value) {
+        return;
+      }
+      onClick();
+    }
+    function collapse() {
+      if (!isExpanded.value) {
+        return;
+      }
+      onClick();
+    }
+    function groupExpand(name) {
+      if (!bus) {
+        console.warn(
+          `[VvAccordion]: You are trying to expand accordion group of "${accordionName.value}" but it is not in a group`
+        );
+        return;
       }
+      bus.emit("expand", { name });
+    }
+    function groupCollapse(name) {
+      if (!bus) {
+        console.warn(
+          `[VvAccordion]: You are trying to collapse accordion group of "${accordionName.value}" but it is not in a group`
+        );
+        return;
+      }
+      bus == null ? void 0 : bus.emit("collapse", { name });
+    }
+    __expose({
+      isExpanded,
+      expand,
+      collapse,
+      groupExpand,
+      groupCollapse
     });
     const bemCssClasses = useModifiers(
       "vv-accordion",
@@ -444,83 +553,116 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         disabled: disabled.value
       }))
     );
-    const onClick = useToggle(isOpen);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("details", {
         id: unref(accordionName),
         class: normalizeClass(unref(bemCssClasses)),
-        open: unref(isOpen)
+        open: unref(isExpanded)
       }, [
         createElementVNode("summary", {
           "aria-controls": unref(accordionName),
-          "aria-expanded": unref(isOpen),
+          "aria-expanded": unref(isExpanded),
           class: "vv-accordion__summary",
-          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(onClick)(), ["prevent"]))
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => onClick(), ["prevent"]))
         }, [
-          renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
-            createTextVNode(toDisplayString(unref(title)), 1)
+          renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({
+            isExpanded: unref(isExpanded),
+            expand,
+            collapse,
+            groupExpand,
+            groupCollapse
+          })), () => [
+            createTextVNode(
+              toDisplayString(unref(title)),
+              1
+              /* TEXT */
+            )
           ])
         ], 8, _hoisted_2),
         createElementVNode("div", {
-          "aria-hidden": !unref(isOpen),
+          "aria-hidden": !unref(isExpanded),
           class: "vv-accordion__content"
         }, [
-          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
-            createTextVNode(toDisplayString(unref(content)), 1)
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+            isExpanded: unref(isExpanded),
+            expand,
+            collapse,
+            groupExpand,
+            groupCollapse
+          })), () => [
+            createTextVNode(
+              toDisplayString(unref(content)),
+              1
+              /* TEXT */
+            )
           ])
         ], 8, _hoisted_3)
       ], 10, _hoisted_1);
     };
   }
 });
-const VvAccordionGroupProps = {
-  ...ModifiersProps,
-  /**
-   * VModel
-   */
-  modelValue: [String, Array],
-  /**
-   * Accordion items
-   * @type VvAccordionGroupItem
-   */
-  items: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * If true, accordion items stay open when another item is opened
-   */
-  collapse: Boolean,
-  /**
-   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
-   */
-  itemModifiers: {
-    type: [String, Array],
-    default: ""
-  },
-  /**
-   * If true, the accordion items will be disabled
-   */
-  disabled: Boolean,
-  /**
-   * If true, the accordion items will be opened by default
-   */
-  not: Boolean,
-  /**
-   * Enable local storage persistence
-   */
-  storeKey: String
-};
-const VvAccordionGroupEvents = ["update:modelValue"];
-function useProvideGroupState(groupState) {
-  if (Object.keys(groupState).some(
-    (k) => k !== "key" && !isRef(groupState[k])
-  ))
-    throw Error("One or more groupState props aren't ref.");
-  provide(
-    groupState.key,
-    computed(() => groupState)
-  );
+function usePersistence(storageKey, storageType = StorageType.local, defaultValue) {
+  const localValue = ref();
+  if (defaultValue) {
+    localValue.value = defaultValue;
+  }
+  let storageValue;
+  if (storageKey) {
+    watch(
+      storageKey,
+      (newKey, oldKey) => {
+        const storage = unref(storageType) === StorageType.session ? sessionStorage : localStorage;
+        if (oldKey && oldKey !== newKey) {
+          storage.removeItem(oldKey);
+        }
+        if (newKey) {
+          storageValue = useStorage(
+            newKey,
+            (storageValue == null ? void 0 : storageValue.value) ?? localValue.value,
+            storage
+          );
+          return;
+        }
+        storageValue = void 0;
+      },
+      {
+        immediate: true
+      }
+    );
+  }
+  if (isRef(storageType)) {
+    watch(storageType, (newType, oldType) => {
+      if (storageKey == null ? void 0 : storageKey.value) {
+        if (newType) {
+          const storage = newType === StorageType.session ? sessionStorage : localStorage;
+          storageValue = useStorage(
+            storageKey.value,
+            (storageValue == null ? void 0 : storageValue.value) ?? localValue.value,
+            storage
+          );
+        }
+        if (oldType && oldType !== newType) {
+          const oldStorage = oldType === StorageType.session ? sessionStorage : localStorage;
+          oldStorage.removeItem(storageKey.value);
+        }
+      }
+    });
+  }
+  return computed({
+    get: () => {
+      return (storageValue == null ? void 0 : storageValue.value) ?? localValue.value;
+    },
+    set: (value) => {
+      if (storageValue) {
+        storageValue.value = value;
+        return;
+      }
+      localValue.value = value;
+    }
+  });
+}
+function useGroupStateProvide(key, groupState) {
+  provide(key, groupState);
 }
 const __default__ = {
   name: "VvAccordionGroup"
@@ -529,57 +671,161 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvAccordionGroupProps,
   emits: VvAccordionGroupEvents,
-  setup(__props, { emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
-    const { disabled, collapse, modifiers, itemModifiers, items, not } = toRefs(props);
+    const emit = __emit;
+    const {
+      disabled,
+      modifiers,
+      itemModifiers,
+      items,
+      storageKey,
+      storageType
+    } = toRefs(props);
     watchEffect(() => {
-      if (typeof props.modelValue === "string" && collapse.value) {
+      if (typeof props.modelValue === "string" && props.collapse) {
         console.warn(
           `[VvAccordionGroup]: modelValue is a string but collapse is true.`
         );
       }
     });
-    let localModelValue = ref([]);
-    watch(
-      () => props.storeKey,
-      (newKey) => {
-        if (newKey) {
-          localModelValue = useStorage(newKey, localModelValue.value);
-        } else {
-          localModelValue = ref([]);
-        }
-      },
-      { immediate: true }
+    const accordionNames = reactive(/* @__PURE__ */ new Set());
+    const storageModelValue = usePersistence(
+      storageKey,
+      storageType,
+      []
     );
-    const modelValue = computed({
+    const localModelValue = computed({
       get: () => {
-        var _a;
-        if (props.modelValue !== void 0) {
-          if (!collapse.value) {
-            return Array.isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
-          }
+        if (props.modelValue !== null && props.modelValue !== void 0) {
           return props.modelValue;
         }
-        return !collapse.value ? (_a = localModelValue.value) == null ? void 0 : _a[0] : localModelValue.value;
+        return storageModelValue.value;
       },
       set: (newValue) => {
-        if (props.modelValue !== void 0) {
-          if ((Array.isArray(props.modelValue) || collapse.value) && !Array.isArray(newValue)) {
-            newValue = [newValue];
+        emit("update:modelValue", newValue);
+        storageModelValue.value = newValue;
+      }
+    });
+    const expandedAccordions = computed({
+      get: () => {
+        if (localModelValue.value === void 0) {
+          return /* @__PURE__ */ new Set();
+        }
+        let toReturn = /* @__PURE__ */ new Set();
+        if (props.not) {
+          if (typeof localModelValue.value === "string") {
+            toReturn = new Set(
+              [...accordionNames].filter(
+                (name) => name !== localModelValue.value
+              )
+            );
+          } else if (Array.isArray(localModelValue.value)) {
+            toReturn = new Set(
+              [...accordionNames].filter(
+                (name) => !localModelValue.value.includes(
+                  name
+                )
+              )
+            );
           }
-          return emit("update:modelValue", newValue);
+        } else if (typeof localModelValue.value === "string") {
+          toReturn = /* @__PURE__ */ new Set([localModelValue.value]);
+        } else if (Array.isArray(localModelValue.value)) {
+          toReturn = new Set(localModelValue.value);
+        }
+        return toReturn;
+      },
+      set: (newValue) => {
+        if (props.not) {
+          localModelValue.value = [...accordionNames].filter(
+            (name) => !newValue.has(name)
+          );
+          return;
+        }
+        if (props.collapse) {
+          localModelValue.value = [...newValue];
+          return;
         }
-        localModelValue.value = Array.isArray(newValue) ? newValue : [newValue];
+        localModelValue.value = newValue.values().next().value;
       }
     });
-    useProvideGroupState({
-      key: INJECTION_KEY_ACCORDION_GROUP,
-      modelValue,
+    onMounted(() => {
+      if (props.not && localModelValue.value === void 0) {
+        localModelValue.value = props.collapse ? [] : [...accordionNames.values()].splice(1, accordionNames.size);
+      }
+      nextTick(() => {
+        for (const name of accordionNames) {
+          bus.emit("toggle", {
+            name,
+            value: expandedAccordions.value.has(name)
+          });
+        }
+      });
+    });
+    const bus = mitt();
+    useGroupStateProvide(INJECTION_KEY_ACCORDION_GROUP, {
       disabled,
-      collapse,
       modifiers: itemModifiers,
-      not
+      bus
+    });
+    bus.on("register", ({ name }) => {
+      accordionNames.add(name);
+    });
+    bus.on("unregister", ({ name }) => {
+      accordionNames.delete(name);
+    });
+    bus.on("toggle", ({ name, value }) => {
+      const newValue = new Set(expandedAccordions.value);
+      if (value) {
+        if (!props.collapse) {
+          for (const item of newValue) {
+            if (item !== name) {
+              bus.emit("toggle", { name: item, value: false });
+            }
+          }
+          newValue.clear();
+        }
+        newValue.add(name);
+        expandedAccordions.value = newValue;
+        return;
+      }
+      newValue.delete(name);
+      expandedAccordions.value = newValue;
     });
+    function expand(name) {
+      if (typeof name === "string") {
+        bus.emit("toggle", { name, value: true });
+        return;
+      }
+      if (Array.isArray(name)) {
+        for (const item of name) {
+          bus.emit("toggle", { name: item, value: true });
+        }
+        return;
+      }
+      for (const item of accordionNames) {
+        bus.emit("toggle", { name: item, value: true });
+      }
+    }
+    bus.on("expand", ({ name }) => expand(name));
+    function collapse(name) {
+      if (typeof name === "string") {
+        bus.emit("toggle", { name, value: false });
+        return;
+      }
+      if (Array.isArray(name)) {
+        for (const item of name) {
+          bus.emit("toggle", { name: item, value: false });
+        }
+        return;
+      }
+      for (const item of accordionNames) {
+        bus.emit("toggle", { name: item, value: false });
+      }
+    }
+    bus.on("collapse", ({ name }) => collapse(name));
+    __expose({ expandedAccordions, expand, collapse });
     const bemCssClasses = useModifiers(
       "vv-accordion-group",
       modifiers,
@@ -588,29 +834,62 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }))
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, () => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item) => {
-            return openBlock(), createBlock(_sfc_main$1, mergeProps({
-              key: item.title
-            }, {
-              name: item.name,
-              title: item.title,
-              content: item.content
-            }), {
-              header: withCtx((data) => [
-                renderSlot(_ctx.$slots, `header::${item.name}`, normalizeProps(guardReactiveProps(data)))
-              ]),
-              details: withCtx((data) => [
-                renderSlot(_ctx.$slots, `details::${item.name}`, normalizeProps(guardReactiveProps(data)))
-              ]),
-              _: 2
-            }, 1040);
-          }), 128))
-        ])
-      ], 2);
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+            expandedAccordions: unref(expandedAccordions),
+            expand,
+            collapse
+          })), () => [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(unref(items), (item) => {
+                return openBlock(), createBlock(
+                  _sfc_main$1,
+                  mergeProps({
+                    key: item.title,
+                    ref_for: true
+                  }, {
+                    name: item.name,
+                    title: item.title,
+                    content: item.content
+                  }),
+                  createSlots({
+                    _: 2
+                    /* DYNAMIC */
+                  }, [
+                    _ctx.$slots[`summary::${item.name}`] ? {
+                      name: "summary",
+                      fn: withCtx((data) => [
+                        renderSlot(_ctx.$slots, `summary::${item.name}`, mergeProps({ ref_for: true }, data))
+                      ]),
+                      key: "0"
+                    } : void 0,
+                    _ctx.$slots[`content::${item.name}`] ? {
+                      name: "default",
+                      fn: withCtx((data) => [
+                        renderSlot(_ctx.$slots, `content::${item.name}`, mergeProps({ ref_for: true }, data))
+                      ]),
+                      key: "1"
+                    } : void 0
+                  ]),
+                  1040
+                  /* FULL_PROPS, DYNAMIC_SLOTS */
+                );
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });