@volverjs/ui-vue 0.0.10-beta.23 → 0.0.10-beta.24

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

@@ -1,6 +1,7 @@
-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 { inject, computed, toRef, unref, defineComponent, useAttrs, toRefs, ref, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, provide, watchEffect, reactive, Fragment, renderList, createBlock, mergeProps, withCtx } from "vue";
+import mitt from "mitt";
 import { uid } from "uid";
-import { useToggle, useStorage } from "@vueuse/core";
+import { useVModel, useLocalStorage } from "@vueuse/core";
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -49,7 +50,9 @@ var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
   AnchorTarget2["_top"] = "_top";
   return AnchorTarget2;
 })(AnchorTarget || {});
-const INJECTION_KEY_ACCORDION_GROUP = Symbol.for("accordionGroup");
+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.
@@ -274,18 +277,15 @@ const ModifiersProps = {
     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 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;
@@ -298,8 +298,9 @@ function useInjectedGroupState(groupKey) {
         return propRef.value;
       },
       set(value) {
-        if (emit)
+        if (emit) {
           emit(`update:${propName}`, value);
+        }
       }
     });
   }
@@ -340,23 +341,16 @@ const VvAccordionProps = {
   not: Boolean
 };
 const VvAccordionEvents = ["update:modelValue"];
-function useGroupProps(props, emit) {
-  const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(
+function useGroupProps(props) {
+  const { group, isInGroup } = useInjectedGroupState(
     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)) {
@@ -374,16 +368,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) {
@@ -419,62 +408,103 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: VvAccordionProps,
   emits: VvAccordionEvents,
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const attrs = useAttrs();
     const emit = __emit;
+    const modelValue = useVModel(props, "modelValue", emit);
     const accordionName = computed(
       () => props.name || (attrs == null ? void 0 : attrs.id) || uid()
     );
-    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;
+    });
+    const 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;
-        }
-        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 });
+      }
+    });
+    const expand = () => {
+      if (isExpanded.value) {
+        return;
+      }
+      onClick();
+    };
+    const collapse = () => {
+      if (!isExpanded.value) {
+        return;
       }
+      onClick();
+    };
+    const 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 });
+    };
+    const 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",
@@ -483,20 +513,25 @@ 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) })), () => [
+          renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({
+            isExpanded: unref(isExpanded),
+            expand,
+            collapse,
+            groupExpand,
+            groupCollapse
+          })), () => [
             createTextVNode(
               toDisplayString(unref(title)),
               1
@@ -505,10 +540,16 @@ const _sfc_main$1 = /* @__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
@@ -525,7 +566,9 @@ const VvAccordionGroupProps = {
   /**
    * VModel
    */
-  modelValue: [String, Array],
+  modelValue: {
+    type: [String, Array]
+  },
   /**
    * Accordion items
    * @type VvAccordionGroupItem
@@ -559,15 +602,8 @@ const VvAccordionGroupProps = {
   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 useProvideGroupState(key, groupState) {
+  provide(key, groupState);
 }
 const __default__ = {
   name: "VvAccordionGroup"
@@ -576,58 +612,149 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvAccordionGroupProps,
   emits: VvAccordionGroupEvents,
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const { disabled, collapse, modifiers, itemModifiers, items, not } = toRefs(props);
+    const { disabled, modifiers, itemModifiers, items } = 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([]);
+    const accordionNames = reactive(/* @__PURE__ */ new Set());
+    let modelValue = ref(/* @__PURE__ */ new Set());
     watch(
       () => props.storeKey,
-      (newKey) => {
+      (newKey, oldKey) => {
+        if (oldKey && oldKey !== newKey) {
+          localStorage.removeItem(oldKey);
+        }
         if (newKey) {
-          localModelValue = useStorage(newKey, localModelValue.value);
-        } else {
-          localModelValue = ref([]);
+          modelValue = useLocalStorage(newKey, modelValue.value);
+          return;
         }
+        modelValue = ref(new Set(modelValue.value));
       },
       { immediate: true }
     );
-    const modelValue = computed({
-      get: () => {
-        var _a;
-        if (props.modelValue !== void 0) {
-          if (!collapse.value) {
-            return Array.isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
-          }
-          return props.modelValue;
+    watch(
+      [modelValue, accordionNames, () => props.not, () => props.collapse],
+      () => {
+        if (props.not) {
+          emit(
+            "update:modelValue",
+            [...accordionNames].filter(
+              (name) => !modelValue.value.has(name)
+            )
+          );
+          return;
+        }
+        if (props.collapse) {
+          emit("update:modelValue", [...modelValue.value]);
+          return;
         }
-        return !collapse.value ? (_a = localModelValue.value) == null ? void 0 : _a[0] : localModelValue.value;
+        emit("update:modelValue", modelValue.value.values().next().value);
       },
-      set: (newValue) => {
-        if (props.modelValue !== void 0) {
-          if ((Array.isArray(props.modelValue) || collapse.value) && !Array.isArray(newValue)) {
-            newValue = [newValue];
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    watch(
+      () => props.modelValue,
+      (newValue, oldValue) => {
+        if (newValue === void 0 || newValue === null || JSON.stringify(newValue) === JSON.stringify(oldValue)) {
+          return;
+        }
+        let toReturn = /* @__PURE__ */ new Set();
+        if (props.not) {
+          if (typeof newValue === "string") {
+            toReturn = new Set(
+              [...accordionNames].filter((name) => name !== newValue)
+            );
+          } else if (Array.isArray(newValue)) {
+            toReturn = new Set(
+              [...accordionNames].filter(
+                (name) => !newValue.includes(name)
+              )
+            );
           }
-          return emit("update:modelValue", newValue);
+        } else if (typeof newValue === "string") {
+          toReturn = /* @__PURE__ */ new Set([newValue]);
+        } else if (Array.isArray(newValue)) {
+          toReturn = new Set(newValue);
+        }
+        for (const name of accordionNames) {
+          bus.emit("toggle", { name, value: toReturn.has(name) });
         }
-        localModelValue.value = Array.isArray(newValue) ? newValue : [newValue];
+        modelValue.value = toReturn;
+      },
+      {
+        immediate: true
       }
-    });
-    useProvideGroupState({
-      key: INJECTION_KEY_ACCORDION_GROUP,
-      modelValue,
+    );
+    const bus = mitt();
+    useProvideGroupState(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 }) => {
+      if (value) {
+        if (!props.collapse) {
+          for (const item of modelValue.value) {
+            if (item !== name) {
+              bus.emit("toggle", { name: item, value: false });
+            }
+          }
+          modelValue.value.clear();
+        }
+        modelValue.value.add(name);
+        return;
+      }
+      modelValue.value.delete(name);
     });
+    const 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));
+    const 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({ modelValue, expand, collapse });
     const bemCssClasses = useModifiers(
       "vv-accordion-group",
       modifiers,
@@ -642,7 +769,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: normalizeClass(unref(bemCssClasses))
         },
         [
-          renderSlot(_ctx.$slots, "default", {}, () => [
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+            modelValue: unref(modelValue),
+            expand,
+            collapse
+          })), () => [
             (openBlock(true), createElementBlock(
               Fragment,
               null,

package/dist/components/VvAccordionGroup/VvAccordionGroup.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).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))}})}));
+!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||{}),r=(e=>(e.before="before",e.after="after",e))(r||{}),l=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(l||{}),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}});r.before,n.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,l.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 r=null==t?void 0:t[o];if(r)return e.computed({get:()=>r.value,set(e){r.value=e}});const l=e.toRef(a,o);return e.computed({get:()=>l.value,set(e){n&&n(`update:${o}`,e)}})}}}(u),n=e.computed((()=>Boolean(o.disabled||(null==t?void 0:t.disabled.value)))),r=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:r,disabled:n,bus:null==t?void 0:t.bus}}function m(o,t,a){return e.computed((()=>{const n={[o]:!0},r="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return r&&Array.isArray(r)&&r.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"],f=["aria-controls","aria-expanded"],v=["aria-hidden"],g=e.defineComponent({name:"VvAccordion",props:d,emits:["update:modelValue"],setup(o,{expose:n,emit:r}){const l=o,i=e.useAttrs(),u=r,s=a.useVModel(l,"modelValue",u),d=e.computed((()=>l.name||(null==i?void 0:i.id)||t.uid())),{title:g,content:y,not:b}=e.toRefs(l),{isInGroup:B,modifiers:S,disabled:x,bus:A}=c(l),h=e.ref(!1);e.watch(s,(e=>{"boolean"==typeof e&&(h.value=b.value?!e:e)}),{immediate:!0}),e.watch(h,(e=>{s.value=b.value?!e:e})),null==A||A.on("toggle",(({name:e,value:o})=>{e===d.value&&(h.value=o)}));const V=()=>{x.value||(B.value?null==A||A.emit("toggle",{name:d.value,value:!h.value}):h.value=!h.value)};e.watch(d,((e,o)=>{A&&(o&&o!==e&&A.emit("unregister",{name:o}),A.emit("register",{name:e}))}),{immediate:!0}),e.onBeforeUnmount((()=>{A&&A.emit("unregister",{name:d.value})}));const w=()=>{h.value||V()},E=()=>{h.value&&V()},k=e=>{A?A.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=>{A?null==A||A.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:h,expand:w,collapse:E,groupExpand:k,groupCollapse:$});const P=m("vv-accordion",S,e.computed((()=>({disabled:x.value}))));return(o,t)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(d),class:e.normalizeClass(e.unref(P)),open:e.unref(h)},[e.createElementVNode("summary",{"aria-controls":e.unref(d),"aria-expanded":e.unref(h),class:"vv-accordion__summary",onClick:t[0]||(t[0]=e.withModifiers((e=>V()),["prevent"]))},[e.renderSlot(o.$slots,"summary",e.normalizeProps(e.guardReactiveProps({isExpanded:e.unref(h),expand:w,collapse:E,groupExpand:k,groupCollapse:$})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(g)),1)]))],8,f),e.createElementVNode("div",{"aria-hidden":!e.unref(h),class:"vv-accordion__content"},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({isExpanded:e.unref(h),expand:w,collapse:E,groupExpand:k,groupCollapse:$})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(y)),1)]))],8,v)],10,p))}}),y={...s,modelValue:{type:[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(t,{expose:n,emit:r}){const l=t,i=r,{disabled:s,modifiers:d,itemModifiers:c,items:p}=e.toRefs(l);e.watchEffect((()=>{"string"==typeof l.modelValue&&l.collapse&&console.warn("[VvAccordionGroup]: modelValue is a string but collapse is true.")}));const f=e.reactive(new Set);let v=e.ref(new Set);e.watch((()=>l.storeKey),((o,t)=>{t&&t!==o&&localStorage.removeItem(t),v=o?a.useLocalStorage(o,v.value):e.ref(new Set(v.value))}),{immediate:!0}),e.watch([v,f,()=>l.not,()=>l.collapse],(()=>{l.not?i("update:modelValue",[...f].filter((e=>!v.value.has(e)))):l.collapse?i("update:modelValue",[...v.value]):i("update:modelValue",v.value.values().next().value)}),{deep:!0,immediate:!0}),e.watch((()=>l.modelValue),((e,o)=>{if(null==e||JSON.stringify(e)===JSON.stringify(o))return;let t=new Set;l.not?"string"==typeof e?t=new Set([...f].filter((o=>o!==e))):Array.isArray(e)&&(t=new Set([...f].filter((o=>!e.includes(o))))):"string"==typeof e?t=new Set([e]):Array.isArray(e)&&(t=new Set(e));for(const a of f)y.emit("toggle",{name:a,value:t.has(a)});v.value=t}),{immediate:!0});const y=o();var b,B;b=u,B={disabled:s,modifiers:c,bus:y},e.provide(b,B),y.on("register",(({name:e})=>{f.add(e)})),y.on("unregister",(({name:e})=>{f.delete(e)})),y.on("toggle",(({name:e,value:o})=>{if(o){if(!l.collapse){for(const o of v.value)o!==e&&y.emit("toggle",{name:o,value:!1});v.value.clear()}v.value.add(e)}else v.value.delete(e)}));const S=e=>{if("string"!=typeof e)if(Array.isArray(e))for(const o of e)y.emit("toggle",{name:o,value:!0});else for(const o of f)y.emit("toggle",{name:o,value:!0});else y.emit("toggle",{name:e,value:!0})};y.on("expand",(({name:e})=>S(e)));const x=e=>{if("string"!=typeof e)if(Array.isArray(e))for(const o of e)y.emit("toggle",{name:o,value:!1});else for(const o of f)y.emit("toggle",{name:o,value:!1});else y.emit("toggle",{name:e,value:!1})};y.on("collapse",(({name:e})=>x(e))),n({modelValue:v,expand:S,collapse:x});const A=m("vv-accordion-group",d,e.computed((()=>({disabled:s.value}))));return(o,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(A))},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({modelValue:e.unref(v),expand:S,collapse:x})),(()=>[(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}),{header:e.withCtx((a=>[e.renderSlot(o.$slots,`header::${t.name}`,e.normalizeProps(e.guardReactiveProps(a)))])),details:e.withCtx((a=>[e.renderSlot(o.$slots,`details::${t.name}`,e.normalizeProps(e.guardReactiveProps(a)))])),_:2},1040)))),128))]))],2))}})}));

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

@@ -1,5 +1,7 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    modelValue: (ArrayConstructor | StringConstructor)[];
+    modelValue: {
+        type: globalThis.PropType<string | string[] | undefined>;
+    };
     items: {
         type: globalThis.PropType<import(".").VvAccordionGroupItem[]>;
         default: () => never[];
@@ -16,10 +18,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: globalThis.PropType<string | string[]>;
         default: undefined;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {
+    modelValue: globalThis.Ref<Set<string> & Omit<Set<string>, keyof Set<any>>>;
+    expand: (name?: string | string[]) => void;
+    collapse: (name?: string | string[]) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     [x: string]: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
-    modelValue: (ArrayConstructor | StringConstructor)[];
+    modelValue: {
+        type: globalThis.PropType<string | string[] | undefined>;
+    };
     items: {
         type: globalThis.PropType<import(".").VvAccordionGroupItem[]>;
         default: () => never[];
@@ -37,14 +45,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
-    disabled: boolean;
-    modifiers: string | string[];
     collapse: boolean;
+    disabled: boolean;
     not: boolean;
+    modifiers: string | string[];
     items: import(".").VvAccordionGroupItem[];
     itemModifiers: string | string[];
 }, {}>, Partial<Record<`header::${string}`, (_: any) => any>> & Partial<Record<`details::${string}`, (_: any) => any>> & {
-    default?(_: {}): any;
+    default?(_: {
+        modelValue: Set<string> & Omit<Set<string>, keyof Set<any>>;
+        expand: (name?: string | string[]) => void;
+        collapse: (name?: string | string[]) => void;
+    }): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/VvAccordionGroup/index.d.ts

@@ -9,7 +9,9 @@ export declare const VvAccordionGroupProps: {
     /**
      * VModel
      */
-    modelValue: (ArrayConstructor | StringConstructor)[];
+    modelValue: {
+        type: globalThis.PropType<string | string[] | undefined>;
+    };
     /**
      * Accordion items
      * @type VvAccordionGroupItem

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

@@ -98,8 +98,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    disabled: boolean;
     label: string | number;
+    disabled: boolean;
     type: "button" | "submit" | "reset";
     target: "_blank" | "_self" | "_parent" | "_top";
     ariaLabel: string;

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

@@ -89,9 +89,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     id: (StringConstructor | NumberConstructor)[];
 }>>, {
-    modifiers: string | string[];
     title: string;
     content: string;
+    modifiers: string | string[];
     footer: string;
     role: "alert" | "alertdialog";
     icon: string | import("../VvIcon").VvIconProps;