@volverjs/ui-vue 0.0.10-beta.8 → 0.0.10

package/dist/components/VvAccordion/VvAccordion.es.js

@@ -1,11 +1,10 @@
-import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from "vue";
-import { uid } from "uid";
-import { useToggle } from "@vueuse/core";
-var Strategy = /* @__PURE__ */ ((Strategy2) => {
-  Strategy2["absolute"] = "absolute";
-  Strategy2["fixed"] = "fixed";
-  return Strategy2;
-})(Strategy || {});
+import { inject, computed, toRef, unref, defineComponent, useAttrs, useId, toRefs, ref, watch, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from "vue";
+import { useVModel } from "@vueuse/core";
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Side = /* @__PURE__ */ ((Side2) => {
   Side2["left"] = "left";
   Side2["right"] = "right";
@@ -13,17 +12,6 @@ var Side = /* @__PURE__ */ ((Side2) => {
   Side2["bottom"] = "bottom";
   return Side2;
 })(Side || {});
-var Placement = /* @__PURE__ */ ((Placement2) => {
-  Placement2["topStart"] = "top-start";
-  Placement2["topEnd"] = "top-end";
-  Placement2["bottomStart"] = "bottom-start";
-  Placement2["bottomEnd"] = "bottom-end";
-  Placement2["leftStart"] = "left-start";
-  Placement2["leftEnd"] = "left-end";
-  Placement2["rightStart"] = "right-start";
-  Placement2["rightEnd"] = "right-end";
-  return Placement2;
-})(Placement || {});
 var Position = /* @__PURE__ */ ((Position2) => {
   Position2["before"] = "before";
   Position2["after"] = "after";
@@ -35,90 +23,31 @@ 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");
-const LinkProps = {
-  /**
-   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
-   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
-   */
-  to: {
-    type: [String, Object]
-  },
-  /**
-   * Anchor href
-   */
-  href: String,
-  /**
-   * Anchor target
-   */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
-  /**
-   * Anchor rel
-   */
-  rel: {
-    type: String,
-    default: "noopener noreferrer"
-  }
-};
-const DisabledProps = {
-  /**
-   * Whether the form control is disabled
-   */
-  disabled: Boolean
-};
-const ActiveProps = {
-  /**
-   * Whether the item is active
-   */
-  active: Boolean
-};
-const CurrentProps = {
-  /**
-   * Whether the item is current
-   */
-  current: Boolean
-};
-const PressedProps = {
-  /**
-   * Whether the item is pressed
-   */
-  pressed: Boolean
-};
-const LabelProps = {
-  /**
-   * The item label
-   */
-  label: [String, Number]
-};
+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 ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 ({
-  /**
-   * VvIcon name or props
-   * @see VVIcon
-   */
-  icon: { type: [String, Object] },
   /**
    * VvIcon position
    */
   iconPosition: {
-    type: String,
-    default: Position.before,
-    validation: (value) => Object.values(Position).includes(value)
+    default: Position.before
   }
 });
 ({
@@ -126,128 +55,37 @@ const ModifiersProps = {
    * Dropdown placement
    */
   placement: {
-    type: String,
-    default: Side.bottom,
-    validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
-  },
-  /**
-   * Dropdown strategy
-   */
-  strategy: {
-    type: String,
-    default: void 0,
-    validator: (value) => Object.values(Strategy).includes(value)
-  },
-  /**
-   * Dropdown show / hide transition name
-   */
-  transitionName: {
-    type: String
-  },
-  /**
-   * Offset of the dropdown from the trigger
-   * @see https://floating-ui.com/docs/offset
-   */
-  offset: {
-    type: [Number, String, Object],
-    default: 0
-  },
-  /**
-   * Move dropdown to the side if there is no space in the default position
-   * @see https://floating-ui.com/docs/shift
-   */
-  shift: {
-    type: [Boolean, Object],
-    default: false
-  },
-  /**
-   * Flip dropdown position if there is no space in the default position
-   * @see https://floating-ui.com/docs/flip
-   */
-  flip: {
-    type: [Boolean, Object],
-    default: true
-  },
-  /**
-   * Size of the dropdown
-   * @see https://floating-ui.com/docs/size
-   */
-  size: {
-    type: [Boolean, Object],
-    default: () => ({ padding: 10 })
-  },
-  /**
-   * Automatically change the position of the dropdown
-   * @see https://floating-ui.com/docs/autoPlacement
-   */
-  autoPlacement: {
-    type: [Boolean, Object],
-    default: false
-  },
-  /**
-   * Add arrow to the dropdown
-   * @see https://floating-ui.com/docs/arrow
-   */
-  arrow: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Keep open dropdown on click outside
-   */
-  keepOpen: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Autofocus first item on dropdown open
-   */
-  autofocusFirst: {
-    type: Boolean,
-    default: true
-  },
-  /**
-   * Set dropdown width to the same as the trigger
-   */
-  triggerWidth: {
-    type: Boolean
+    default: Side.bottom
   }
 });
 ({
-  ...DisabledProps,
-  ...LabelProps,
-  ...PressedProps,
-  ...ActiveProps,
-  ...CurrentProps,
-  ...LinkProps,
   /**
    * Button type
    */
   type: {
-    type: String,
-    default: ButtonType.button,
-    validator: (value) => Object.values(ButtonType).includes(value)
+    default: ButtonType.button
   },
   /**
-   * Button aria-label
+   * Default tag for the action
    */
-  ariaLabel: {
-    type: String,
-    default: void 0
+  defaultTag: {
+    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) {
+({
+  storageType: {
+    default: StorageType.local
+  }
+});
+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?.[propName];
+    if (groupPropValue) {
       return computed({
         get() {
-          return groupPropValue == null ? void 0 : groupPropValue.value;
+          return groupPropValue.value;
         },
         set(value) {
           groupPropValue.value = value;
@@ -260,8 +98,9 @@ function useInjectedGroupState(groupKey) {
         return propRef.value;
       },
       set(value) {
-        if (emit)
+        if (emit) {
           emit(`update:${propName}`, value);
+        }
       }
     });
   }
@@ -302,23 +141,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?.disabled.value)
   );
   const modifiers = computed(() => {
     let localModifiers = props.modifiers;
-    let groupModifiers = group == null ? void 0 : group.value.modifiers.value;
+    let groupModifiers = group?.modifiers.value;
     const toReturn = /* @__PURE__ */ new Set();
     if (localModifiers) {
       if (!Array.isArray(localModifiers)) {
@@ -336,16 +168,11 @@ function useGroupProps(props, emit) {
   });
   return {
     // group props
-    modelValue,
-    not,
     isInGroup,
     group,
-    collapse,
     modifiers,
     disabled,
-    // local props
-    title,
-    content
+    bus: group?.bus
   };
 }
 function useModifiers(prefix, modifiers, others) {
@@ -353,7 +180,7 @@ function useModifiers(prefix, modifiers, others) {
     const toReturn = {
       [prefix]: true
     };
-    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : modifiers?.value;
     if (modifiersArray) {
       if (Array.isArray(modifiersArray)) {
         modifiersArray.forEach((modifier) => {
@@ -381,61 +208,103 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   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?.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?.on("toggle", ({ name, value }) => {
+      if (name !== accordionName.value) {
+        return;
+      }
+      isExpanded.value = value;
+    });
+    function onClick() {
+      if (disabled.value) {
+        return;
+      }
+      if (isInGroup.value) {
+        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;
-        }
-        if (modelValue.value === void 0 && typeof newValue === "boolean") {
-          localModelValue.value = newValue;
-          return;
+          bus.emit("register", { name: newValue });
         }
-        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?.emit("collapse", { name });
+    }
+    __expose({
+      isExpanded,
+      expand,
+      collapse,
+      groupExpand,
+      groupCollapse
     });
     const bemCssClasses = useModifiers(
       "vv-accordion",
@@ -444,20 +313,25 @@ const _sfc_main = /* @__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) })), () => [
+          renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({
+            isExpanded: unref(isExpanded),
+            expand,
+            collapse,
+            groupExpand,
+            groupCollapse
+          })), () => [
             createTextVNode(
               toDisplayString(unref(title)),
               1
@@ -466,10 +340,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])
         ], 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) })), () => [
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+            isExpanded: unref(isExpanded),
+            expand,
+            collapse,
+            groupExpand,
+            groupCollapse
+          })), () => [
             createTextVNode(
               toDisplayString(unref(content)),
               1

package/dist/components/VvAccordion/VvAccordion.umd.js

@@ -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).VvAccordion=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||{}),n=(e=>(e.before="before",e.after="after",e))(n||{}),a=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(a||{});const l=Symbol.for("accordionGroup"),u=(Boolean,Boolean,Boolean,Boolean,{modifiers:[String,Array]});function i(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,n){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){n&&n(`update:${o}`,e)}})}}}n.before,r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,a.button;const d={...u,name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},disabled:Boolean,not:Boolean};const s=["id","open"],c=["aria-controls","aria-expanded"],v=["aria-hidden"];return e.defineComponent({name:"VvAccordion",props:d,emits:["update:modelValue"],setup(r,{emit:n}){const a=r,u=e.useAttrs(),d=e.computed((()=>a.name||(null==u?void 0:u.id)||o.uid())),{modifiers:f,title:p,content:m,disabled:y,collapse:b,modelValue:g,isInGroup:B,not:A}=function(o,t){const{group:r,isInGroup:n,getGroupOrLocalRef:a}=i(l),{title:u,content:d}=e.toRefs(o),s=a("modelValue",o,t),c=a("not",o),v=a("collapse",o),f=e.computed((()=>{var e;return Boolean(o.disabled||(null==(e=null==r?void 0:r.value)?void 0:e.disabled.value))})),p=e.computed((()=>{let e=o.modifiers,t=null==r?void 0:r.value.modifiers.value;const n=new Set;return e&&(Array.isArray(e)||(e=e.split(" ")),e.forEach((e=>n.add(e)))),t&&(Array.isArray(t)||(t=t.split(" ")),t.forEach((e=>n.add(e)))),Array.from(n)}));return{modelValue:s,not:c,isInGroup:n,group:r,collapse:v,modifiers:p,disabled:f,title:u,content:d}}(a,n),h=e.ref(!1),V=e.computed({get:()=>{let e=g.value;return B.value?e=b.value&&Array.isArray(g.value)?g.value.includes(d.value):g.value===d.value:void 0===g.value&&(e=h.value),A.value?!e:e},set:e=>{if(A.value&&(e=!e),B.value)return b.value&&Array.isArray(g.value)?e?void g.value.push(d.value):void(g.value=g.value.filter((e=>e!==d.value))):void(g.value=e?d.value:null);void 0!==g.value||"boolean"!=typeof e?g.value=e:h.value=e}}),S=function(o,t,r){return e.computed((()=>{const n={[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&&(n[`${o}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((t=>{n[`${o}--${t}`]=e.unref(r.value[t])})),n}))}("vv-accordion",f,e.computed((()=>({disabled:y.value})))),E=t.useToggle(V);return(o,t)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(d),class:e.normalizeClass(e.unref(S)),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((o=>e.unref(E)()),["prevent"]))},[e.renderSlot(o.$slots,"summary",e.normalizeProps(e.guardReactiveProps({open:e.unref(V)})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(p)),1)]))],8,c),e.createElementVNode("div",{"aria-hidden":!e.unref(V),class:"vv-accordion__content"},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({open:e.unref(V)})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(m)),1)]))],8,v)],10,s))}})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAccordion=o(e.vue,e.core)}(this,function(e,o){"use strict";var t=(e=>(e.local="local",e.session="session",e))(t||{}),n=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(n||{}),r=(e=>(e.before="before",e.after="after",e))(r||{}),a=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(a||{}),u=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(u||{});const i=Symbol.for("accordionGroup"),l={modifiers:{type:[String,Array],default:void 0}};r.before,n.bottom,a.button,u.button,t.local;const s={...l,name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},disabled:Boolean,not:Boolean};function d(o){const{group:t,isInGroup:n}=function(o){const t=e.inject(o,void 0),n=e.computed(()=>void 0!==t);return{group:t,isInGroup:n,getGroupOrLocalRef:function(o,n,r){const a=t?.[o];if(a)return e.computed({get:()=>a.value,set(e){a.value=e}});const u=e.toRef(n,o);return e.computed({get:()=>u.value,set(e){r&&r(`update:${o}`,e)}})}}}(i),r=e.computed(()=>Boolean(o.disabled||t?.disabled.value)),a=e.computed(()=>{let e=o.modifiers,n=t?.modifiers.value;const r=new Set;return e&&(Array.isArray(e)||(e=e.split(" ")),e.forEach(e=>r.add(e))),n&&(Array.isArray(n)||(n=n.split(" ")),n.forEach(e=>r.add(e))),Array.from(r)});return{isInGroup:n,group:t,modifiers:a,disabled:r,bus:t?.bus}}const c=["id","open"],p=["aria-controls","aria-expanded"],f=["aria-hidden"];return e.defineComponent({name:"VvAccordion",props:s,emits:["update:modelValue"],setup(t,{expose:n,emit:r}){const a=t,u=r,i=e.useAttrs(),l=o.useVModel(a,"modelValue",u),s=e.computed(()=>a.name||i?.id||e.useId()),{title:m,content:v,not:g}=e.toRefs(a),{isInGroup:b,modifiers:y,disabled:x,bus:h}=d(a),A=e.ref(!1);function E(){x.value||(b.value?h?.emit("toggle",{name:s.value,value:!A.value}):A.value=!A.value)}function V(){A.value||E()}function S(){A.value&&E()}function $(e){h?h.emit("expand",{name:e}):console.warn(`[VvAccordion]: You are trying to expand accordion group of "${s.value}" but it is not in a group`)}function k(e){h?h?.emit("collapse",{name:e}):console.warn(`[VvAccordion]: You are trying to collapse accordion group of "${s.value}" but it is not in a group`)}e.watch(l,e=>{"boolean"==typeof e&&(A.value=g.value?!e:e)},{immediate:!0}),e.watch(A,e=>{l.value=g.value?!e:e}),h?.on("toggle",({name:e,value:o})=>{e===s.value&&(A.value=o)}),e.watch(s,(e,o)=>{h&&(o&&o!==e&&h.emit("unregister",{name:o}),h.emit("register",{name:e}))},{immediate:!0}),e.onBeforeUnmount(()=>{h&&h.emit("unregister",{name:s.value})}),n({isExpanded:A,expand:V,collapse:S,groupExpand:$,groupCollapse:k});const w=function(o,t,n){return e.computed(()=>{const r={[o]:!0},a="string"==typeof t?.value?t.value.split(" "):t?.value;return a&&Array.isArray(a)&&a.forEach(e=>{e&&(r[`${o}--${e}`]=!0)}),n&&Object.keys(n.value).forEach(t=>{r[`${o}--${t}`]=e.unref(n.value[t])}),r})}("vv-accordion",y,e.computed(()=>({disabled:x.value})));return(o,t)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(s),class:e.normalizeClass(e.unref(w)),open:e.unref(A)},[e.createElementVNode("summary",{"aria-controls":e.unref(s),"aria-expanded":e.unref(A),class:"vv-accordion__summary",onClick:t[0]||(t[0]=e.withModifiers(e=>E(),["prevent"]))},[e.renderSlot(o.$slots,"summary",e.normalizeProps(e.guardReactiveProps({isExpanded:e.unref(A),expand:V,collapse:S,groupExpand:$,groupCollapse:k})),()=>[e.createTextVNode(e.toDisplayString(e.unref(m)),1)])],8,p),e.createElementVNode("div",{"aria-hidden":!e.unref(A),class:"vv-accordion__content"},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({isExpanded:e.unref(A),expand:V,collapse:S,groupExpand:$,groupCollapse:k})),()=>[e.createTextVNode(e.toDisplayString(e.unref(v)),1)])],8,f)],10,c))}})});

package/dist/components/VvAccordion/VvAccordion.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<globalThis.ExtractPropTypes<{
     name: StringConstructor;
     title: StringConstructor;
     content: StringConstructor;
@@ -8,10 +8,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     disabled: BooleanConstructor;
     not: BooleanConstructor;
-    modifiers: globalThis.PropType<string | string[]>;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    [x: string]: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modifiers: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+}>, {
+    isExpanded: globalThis.Ref<boolean, boolean>;
+    expand: () => void;
+    collapse: () => void;
+    groupExpand: (name?: string | string[]) => void;
+    groupCollapse: (name?: string | string[]) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
     name: StringConstructor;
     title: StringConstructor;
     content: StringConstructor;
@@ -21,21 +28,34 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     disabled: BooleanConstructor;
     not: BooleanConstructor;
-    modifiers: globalThis.PropType<string | string[]>;
-}>>, {
+    modifiers: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
     disabled: boolean;
     modelValue: boolean;
     not: boolean;
-}, {}>, {
-    summary?(_: {
-        open: boolean;
-    }): any;
-    default?(_: {
-        open: boolean;
-    }): any;
+    modifiers: string | string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    summary?: (props: {
+        isExpanded: boolean;
+        expand: () => void;
+        collapse: () => void;
+        groupExpand: (name?: string | string[]) => void;
+        groupCollapse: (name?: string | string[]) => void;
+    }) => any;
+} & {
+    default?: (props: {
+        isExpanded: boolean;
+        expand: () => void;
+        collapse: () => void;
+        groupExpand: (name?: string | string[]) => void;
+        groupCollapse: (name?: string | string[]) => void;
+    }) => any;
 }>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };