@volverjs/ui-vue 0.0.4 → 0.0.5-beta.2

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

@@ -1,41 +1,43 @@
-import { unref as l, inject as M, computed as d, toRef as N, toRefs as k, defineComponent as R, useAttrs as D, ref as S, openBlock as g, createElementBlock as h, normalizeClass as B, withModifiers as L, createElementVNode as G, renderSlot as A, normalizeProps as V, guardReactiveProps as b, createTextVNode as C, toDisplayString as E, isRef as T, provide as z, watchEffect as F, Fragment as J, renderList as K, createBlock as U, mergeProps as Y, withCtx as O } from "vue";
-import { nanoid as q } from "nanoid";
-import { useToggle as x } from "@vueuse/core";
-const I = Symbol.for("accordionGroup");
-function H(t) {
-  return ((e) => e == null || e === "" || Array.isArray(e) && e.length === 0 || !(e instanceof Date) && typeof e == "object" && Object.keys(e).length === 0)(l(t));
+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 { nanoid } from "nanoid";
+import { useToggle, useStorage } from "@vueuse/core";
+const INJECTION_KEY_ACCORDION_GROUP = Symbol.for("accordionGroup");
+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 Q(t) {
-  const e = M(t, void 0), r = d(() => !H(e));
-  function s(o, c, v) {
-    if (e != null && e.value) {
-      const i = l(e.value)[o];
-      return d({
+function useInjectedGroupState(groupKey) {
+  const group = inject(groupKey, void 0);
+  const isInGroup = computed(() => !isEmpty(group));
+  function getGroupOrLocalRef(propName, props, emit) {
+    if (group == null ? void 0 : group.value) {
+      const groupPropValue = unref(group.value)[propName];
+      return computed({
         get() {
-          return i == null ? void 0 : i.value;
+          return groupPropValue == null ? void 0 : groupPropValue.value;
         },
-        set(f) {
-          i.value = f;
+        set(value) {
+          groupPropValue.value = value;
         }
       });
     }
-    const m = N(c, o);
-    return d({
+    const propRef = toRef(props, propName);
+    return computed({
       get() {
-        return m.value;
+        return propRef.value;
       },
-      set(i) {
-        v && v(`update:${o}`, i);
+      set(value) {
+        if (emit)
+          emit(`update:${propName}`, value);
       }
     });
   }
   return {
-    group: e,
-    isInGroup: r,
-    getGroupOrLocalRef: s
+    group,
+    isInGroup,
+    getGroupOrLocalRef
   };
 }
-const W = {
+const VvAccordionProps = {
   /**
    * Accordion name
    */
@@ -62,110 +64,168 @@ const W = {
   /**
    * If true, the accordion will be disabled
    */
-  disabled: Boolean
-}, X = ["update:modelValue"];
-function Z(t, e) {
-  const { group: r, isInGroup: s, getGroupOrLocalRef: o } = Q(
-    I
-  ), { title: c, content: v } = k(t), m = o("modelValue", t, e), i = o("disabled", t), f = o("collapse", t), n = o("modifiers", t);
+  disabled: Boolean,
+  /**
+   * If true, the accordion will be opened by default
+   */
+  not: Boolean
+};
+const VvAccordionEvents = ["update:modelValue"];
+function useGroupProps(props, emit) {
+  const { group, isInGroup, getGroupOrLocalRef } = 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 modifiers = getGroupOrLocalRef("modifiers", props);
+  const disabled = computed(
+    () => {
+      var _a;
+      return Boolean(props.disabled || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.disabled.value));
+    }
+  );
   return {
     // group props
-    modelValue: m,
-    disabled: i,
-    isInGroup: s,
-    group: r,
-    collapse: f,
-    modifiers: n,
+    modelValue,
+    not,
+    isInGroup,
+    group,
+    collapse,
+    modifiers,
+    disabled,
     // local props
-    title: c,
-    content: v
+    title,
+    content
   };
 }
-function P(t, e, r) {
-  return d(() => {
-    const s = {
-      [t]: !0
-    }, o = typeof (e == null ? void 0 : e.value) == "string" ? e.value.split(" ") : e == null ? void 0 : e.value;
-    return o && Array.isArray(o) && o.forEach((c) => {
-      s[`${t}--${c}`] = !0;
-    }), r && Object.keys(r.value).forEach((c) => {
-      s[`${t}--${c}`] = l(r.value[c]);
-    }), s;
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
   });
 }
-const w = ["id", "open"], ee = ["aria-controls", "aria-expanded"], oe = ["aria-hidden"], te = {
+const _hoisted_1 = ["id", "open"];
+const _hoisted_2 = ["aria-controls", "aria-expanded"];
+const _hoisted_3 = ["aria-hidden"];
+const __default__$1 = {
   name: "VvAccordion"
-}, re = /* @__PURE__ */ R({
-  ...te,
-  props: W,
-  emits: X,
-  setup(t, { emit: e }) {
-    const r = t, s = D(), o = d(
-      () => r.name || (s == null ? void 0 : s.id) || q()
-    ), {
-      modifiers: c,
-      title: v,
-      content: m,
-      disabled: i,
-      collapse: f,
-      modelValue: n,
-      isInGroup: a
-    } = Z(r, e), $ = S(!1), u = d({
-      get: () => a.value ? f.value && Array.isArray(n.value) ? n.value.includes(o.value) : n.value === o.value : n.value === void 0 ? $.value : n.value,
-      set: (p) => {
-        if (a.value) {
-          if (f.value && Array.isArray(n.value)) {
-            if (p) {
-              n.value.push(o.value);
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvAccordionProps,
+  emits: VvAccordionEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const accordionName = computed(
+      () => props.name || (attrs == null ? void 0 : attrs.id) || nanoid()
+    );
+    const {
+      modifiers,
+      title,
+      content,
+      disabled,
+      collapse,
+      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;
+        }
+        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;
             }
-            n.value = n.value.filter(
-              (_) => _ !== o.value
+            modelValue.value = modelValue.value.filter(
+              (name) => name !== accordionName.value
             );
             return;
           }
-          n.value = p ? o.value : null;
+          modelValue.value = newValue ? accordionName.value : null;
           return;
         }
-        if (n.value === void 0 && typeof p == "boolean") {
-          $.value = p;
+        if (modelValue.value === void 0 && typeof newValue === "boolean") {
+          localModelValue.value = newValue;
           return;
         }
-        n.value = p;
+        modelValue.value = newValue;
       }
-    }), y = P(
+    });
+    const bemCssClasses = useModifiers(
       "vv-accordion",
-      c,
-      d(() => ({
-        disabled: i.value
+      modifiers,
+      computed(() => ({
+        disabled: disabled.value
       }))
-    ), j = x(u);
-    return (p, _) => (g(), h("details", {
-      id: l(o),
-      class: B(l(y)),
-      open: l(u),
-      onClick: _[0] || (_[0] = L((ie) => l(j)(), ["prevent"]))
-    }, [
-      G("summary", {
-        "aria-controls": l(o),
-        "aria-expanded": l(u),
-        class: "vv-collapse__summary"
-      }, [
-        A(p.$slots, "summary", V(b({ open: l(u) })), () => [
-          C(E(l(v)), 1)
-        ])
-      ], 8, ee),
-      G("div", {
-        "aria-hidden": !l(u),
-        class: "vv-collapse__content"
+    );
+    const onClick = useToggle(isOpen);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("details", {
+        id: unref(accordionName),
+        class: normalizeClass(unref(bemCssClasses)),
+        open: unref(isOpen)
       }, [
-        A(p.$slots, "details", V(b({ open: l(u) })), () => [
-          C(E(l(m)), 1)
-        ])
-      ], 8, oe)
-    ], 10, w));
+        createElementVNode("summary", {
+          "aria-controls": unref(accordionName),
+          "aria-expanded": unref(isOpen),
+          class: "vv-accordion__summary",
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(onClick)(), ["prevent"]))
+        }, [
+          renderSlot(_ctx.$slots, "summary", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
+            createTextVNode(toDisplayString(unref(title)), 1)
+          ])
+        ], 8, _hoisted_2),
+        createElementVNode("div", {
+          "aria-hidden": !unref(isOpen),
+          class: "vv-accordion__content"
+        }, [
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ open: unref(isOpen) })), () => [
+            createTextVNode(toDisplayString(unref(content)), 1)
+          ])
+        ], 8, _hoisted_3)
+      ], 10, _hoisted_1);
+    };
   }
-}), ae = {
+});
+const VvAccordionGroupProps = {
   /**
    * VModel
    */
@@ -193,79 +253,119 @@ const w = ["id", "open"], ee = ["aria-controls", "aria-expanded"], oe = ["aria-h
   /**
    * If true, the accordion items will be disabled
    */
-  disabled: Boolean
-}, ne = ["update:modelValue"];
-function le(t) {
-  if (Object.keys(t).some(
-    (e) => e !== "key" && !T(t[e])
+  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.");
-  z(
-    t.key,
-    d(() => t)
+  provide(
+    groupState.key,
+    computed(() => groupState)
   );
 }
-const se = {
+const __default__ = {
   name: "VvAccordionGroup"
-}, ve = /* @__PURE__ */ R({
-  ...se,
-  props: ae,
-  emits: ne,
-  setup(t, { emit: e }) {
-    const r = t, { disabled: s, collapse: o, modifiers: c, itemModifiers: v, items: m } = k(r);
-    F(() => {
-      typeof r.modelValue == "string" && o.value && console.warn(
-        "[VvAccordionGroup]: modelValue is a string but collapse is true."
-      );
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvAccordionGroupProps,
+  emits: VvAccordionGroupEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const { disabled, collapse, modifiers, itemModifiers, items, not } = toRefs(props);
+    watchEffect(() => {
+      if (typeof props.modelValue === "string" && collapse.value) {
+        console.warn(
+          `[VvAccordionGroup]: modelValue is a string but collapse is true.`
+        );
+      }
     });
-    const i = S([]), f = d({
+    let localModelValue = ref([]);
+    watch(
+      () => props.storeKey,
+      (newKey) => {
+        if (newKey) {
+          localModelValue = useStorage(newKey, localModelValue.value);
+        } else {
+          localModelValue = ref([]);
+        }
+      },
+      { immediate: true }
+    );
+    const modelValue = computed({
       get: () => {
-        var a;
-        return r.modelValue !== void 0 ? o.value ? r.modelValue : Array.isArray(r.modelValue) ? r.modelValue[0] : r.modelValue : o.value ? i.value : (a = i.value) == null ? void 0 : a[0];
+        var _a;
+        if (props.modelValue !== void 0) {
+          if (!collapse.value) {
+            return Array.isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
+          }
+          return props.modelValue;
+        }
+        return !collapse.value ? (_a = localModelValue.value) == null ? void 0 : _a[0] : localModelValue.value;
       },
-      set: (a) => {
-        if (r.modelValue !== void 0)
-          return (Array.isArray(r.modelValue) || o.value) && !Array.isArray(a) && (a = [a]), e("update:modelValue", a);
-        i.value = Array.isArray(a) ? a : [a];
+      set: (newValue) => {
+        if (props.modelValue !== void 0) {
+          if ((Array.isArray(props.modelValue) || collapse.value) && !Array.isArray(newValue)) {
+            newValue = [newValue];
+          }
+          return emit("update:modelValue", newValue);
+        }
+        localModelValue.value = Array.isArray(newValue) ? newValue : [newValue];
       }
     });
-    le({
-      key: I,
-      modelValue: f,
-      disabled: s,
-      collapse: o,
-      modifiers: v
+    useProvideGroupState({
+      key: INJECTION_KEY_ACCORDION_GROUP,
+      modelValue,
+      disabled,
+      collapse,
+      modifiers: itemModifiers,
+      not
     });
-    const n = P(
+    const bemCssClasses = useModifiers(
       "vv-accordion-group",
-      c,
-      d(() => ({
-        disabled: s.value
+      modifiers,
+      computed(() => ({
+        disabled: disabled.value
       }))
     );
-    return (a, $) => (g(), h("div", {
-      class: B(l(n))
-    }, [
-      A(a.$slots, "default", {}, () => [
-        (g(!0), h(J, null, K(l(m), (u) => (g(), U(re, Y({
-          key: u.title
-        }, {
-          name: u.name,
-          title: u.title,
-          content: u.content
-        }), {
-          header: O((y) => [
-            A(a.$slots, `header::${u.name}`, V(b(y)))
-          ]),
-          details: O((y) => [
-            A(a.$slots, `details::${u.name}`, V(b(y)))
-          ]),
-          _: 2
-        }, 1040))), 128))
-      ])
-    ], 2));
+    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);
+    };
   }
 });
 export {
-  ve as default
+  _sfc_main as default
 };

package/dist/components/VvAccordionGroup/VvAccordionGroup.umd.js

@@ -1 +1 @@
-(function(e,y){typeof exports=="object"&&typeof module<"u"?module.exports=y(require("vue"),require("nanoid"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["vue","nanoid","@vueuse/core"],y):(e=typeof globalThis<"u"?globalThis:e||self,e.VvAccordionGroup=y(e.vue,e.nanoid,e.core))})(this,function(e,y,b){"use strict";const V=Symbol.for("accordionGroup");function k(t){return(o=>o==null||o===""||Array.isArray(o)&&o.length===0||!(o instanceof Date)&&typeof o=="object"&&Object.keys(o).length===0)(e.unref(t))}function C(t){const o=e.inject(t,void 0),n=e.computed(()=>!k(o));function l(r,d,u){if(o!=null&&o.value){const i=e.unref(o.value)[r];return e.computed({get(){return i==null?void 0:i.value},set(f){i.value=f}})}const m=e.toRef(d,r);return e.computed({get(){return m.value},set(i){u&&u(`update:${r}`,i)}})}return{group:o,isInGroup:n,getGroupOrLocalRef:l}}const G={name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},modifiers:[String,Array],disabled:Boolean},S=["update:modelValue"];function $(t,o){const{group:n,isInGroup:l,getGroupOrLocalRef:r}=C(V),{title:d,content:u}=e.toRefs(t),m=r("modelValue",t,o),i=r("disabled",t),f=r("collapse",t),s=r("modifiers",t);return{modelValue:m,disabled:i,isInGroup:l,group:n,collapse:f,modifiers:s,title:d,content:u}}function h(t,o,n){return e.computed(()=>{const l={[t]:!0},r=typeof(o==null?void 0:o.value)=="string"?o.value.split(" "):o==null?void 0:o.value;return r&&Array.isArray(r)&&r.forEach(d=>{l[`${t}--${d}`]=!0}),n&&Object.keys(n.value).forEach(d=>{l[`${t}--${d}`]=e.unref(n.value[d])}),l})}const E=["id","open"],R=["aria-controls","aria-expanded"],B=["aria-hidden"],P={name:"VvAccordion"},O=e.defineComponent({...P,props:G,emits:S,setup(t,{emit:o}){const n=t,l=e.useAttrs(),r=e.computed(()=>n.name||(l==null?void 0:l.id)||y.nanoid()),{modifiers:d,title:u,content:m,disabled:i,collapse:f,modelValue:s,isInGroup:a}=$(n,o),g=e.ref(!1),c=e.computed({get:()=>a.value?f.value&&Array.isArray(s.value)?s.value.includes(r.value):s.value===r.value:s.value===void 0?g.value:s.value,set:p=>{if(a.value){if(f.value&&Array.isArray(s.value)){if(p){s.value.push(r.value);return}s.value=s.value.filter(_=>_!==r.value);return}s.value=p?r.value:null;return}if(s.value===void 0&&typeof p=="boolean"){g.value=p;return}s.value=p}}),A=h("vv-accordion",d,e.computed(()=>({disabled:i.value}))),N=b.useToggle(c);return(p,_)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(r),class:e.normalizeClass(e.unref(A)),open:e.unref(c),onClick:_[0]||(_[0]=e.withModifiers(D=>e.unref(N)(),["prevent"]))},[e.createElementVNode("summary",{"aria-controls":e.unref(r),"aria-expanded":e.unref(c),class:"vv-collapse__summary"},[e.renderSlot(p.$slots,"summary",e.normalizeProps(e.guardReactiveProps({open:e.unref(c)})),()=>[e.createTextVNode(e.toDisplayString(e.unref(u)),1)])],8,R),e.createElementVNode("div",{"aria-hidden":!e.unref(c),class:"vv-collapse__content"},[e.renderSlot(p.$slots,"details",e.normalizeProps(e.guardReactiveProps({open:e.unref(c)})),()=>[e.createTextVNode(e.toDisplayString(e.unref(m)),1)])],8,B)],10,E))}}),j={modelValue:[String,Array],items:{type:Array,default:()=>[]},collapse:Boolean,modifiers:[String,Array],itemModifiers:{type:[String,Array],default:""},disabled:Boolean},I=["update:modelValue"];function z(t){if(Object.keys(t).some(o=>o!=="key"&&!e.isRef(t[o])))throw Error("One or more groupState props aren't ref.");e.provide(t.key,e.computed(()=>t))}const M={name:"VvAccordionGroup"};return e.defineComponent({...M,props:j,emits:I,setup(t,{emit:o}){const n=t,{disabled:l,collapse:r,modifiers:d,itemModifiers:u,items:m}=e.toRefs(n);e.watchEffect(()=>{typeof n.modelValue=="string"&&r.value&&console.warn("[VvAccordionGroup]: modelValue is a string but collapse is true.")});const i=e.ref([]),f=e.computed({get:()=>{var a;return n.modelValue!==void 0?r.value?n.modelValue:Array.isArray(n.modelValue)?n.modelValue[0]:n.modelValue:r.value?i.value:(a=i.value)==null?void 0:a[0]},set:a=>{if(n.modelValue!==void 0)return(Array.isArray(n.modelValue)||r.value)&&!Array.isArray(a)&&(a=[a]),o("update:modelValue",a);i.value=Array.isArray(a)?a:[a]}});z({key:V,modelValue:f,disabled:l,collapse:r,modifiers:u});const s=h("vv-accordion-group",d,e.computed(()=>({disabled:l.value})));return(a,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(s))},[e.renderSlot(a.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(m),c=>(e.openBlock(),e.createBlock(O,e.mergeProps({key:c.title},{name:c.name,title:c.title,content:c.content}),{header:e.withCtx(A=>[e.renderSlot(a.$slots,`header::${c.name}`,e.normalizeProps(e.guardReactiveProps(A)))]),details:e.withCtx(A=>[e.renderSlot(a.$slots,`details::${c.name}`,e.normalizeProps(e.guardReactiveProps(A)))]),_:2},1040))),128))])],2))}})});
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("nanoid"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","nanoid","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAccordionGroup=o(e.vue,e.nanoid,e.core)}(this,(function(e,o,r){"use strict";const t=Symbol.for("accordionGroup");function l(o){const r=e.inject(o,void 0),t=e.computed((()=>{return o=r,!(null==(t=e.unref(o))||""===t||Array.isArray(t)&&0===t.length||!(t instanceof Date)&&"object"==typeof t&&0===Object.keys(t).length);var o,t}));return{group:r,isInGroup:t,getGroupOrLocalRef:function(o,t,l){if(null==r?void 0:r.value){const t=e.unref(r.value)[o];return e.computed({get:()=>null==t?void 0:t.value,set(e){t.value=e}})}const a=e.toRef(t,o);return e.computed({get:()=>a.value,set(e){l&&l(`update:${o}`,e)}})}}}const a={name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},modifiers:[String,Array],disabled:Boolean,not:Boolean};function n(o,r,t){return e.computed((()=>{const l={[o]:!0},a="string"==typeof(null==r?void 0:r.value)?r.value.split(" "):null==r?void 0:r.value;return a&&Array.isArray(a)&&a.forEach((e=>{e&&(l[`${o}--${e}`]=!0)})),t&&Object.keys(t.value).forEach((r=>{l[`${o}--${r}`]=e.unref(t.value[r])})),l}))}const u=["id","open"],i=["aria-controls","aria-expanded"],d=["aria-hidden"],s=e.defineComponent({name:"VvAccordion",props:a,emits:["update:modelValue"],setup(a,{emit:s}){const c=a,v=e.useAttrs(),p=e.computed((()=>c.name||(null==v?void 0:v.id)||o.nanoid())),{modifiers:m,title:f,content:y,disabled:g,collapse:A,modelValue:V,isInGroup:b,not:h}=function(o,r){const{group:a,isInGroup:n,getGroupOrLocalRef:u}=l(t),{title:i,content:d}=e.toRefs(o),s=u("modelValue",o,r),c=u("not",o),v=u("collapse",o),p=u("modifiers",o),m=e.computed((()=>{var e;return Boolean(o.disabled||(null==(e=null==a?void 0:a.value)?void 0:e.disabled.value))}));return{modelValue:s,not:c,isInGroup:n,group:a,collapse:v,modifiers:p,disabled:m,title:i,content:d}}(c,s),S=e.ref(!1),k=e.computed({get:()=>{let e=V.value;return b.value?e=A.value&&Array.isArray(V.value)?V.value.includes(p.value):V.value===p.value:void 0===V.value&&(e=S.value),h.value?!e:e},set:e=>{if(h.value&&(e=!e),b.value)return A.value&&Array.isArray(V.value)?e?void V.value.push(p.value):void(V.value=V.value.filter((e=>e!==p.value))):void(V.value=e?p.value:null);void 0!==V.value||"boolean"!=typeof e?V.value=e:S.value=e}}),B=n("vv-accordion",m,e.computed((()=>({disabled:g.value})))),$=r.useToggle(k);return(o,r)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(p),class:e.normalizeClass(e.unref(B)),open:e.unref(k)},[e.createElementVNode("summary",{"aria-controls":e.unref(p),"aria-expanded":e.unref(k),class:"vv-accordion__summary",onClick:r[0]||(r[0]=e.withModifiers((o=>e.unref($)()),["prevent"]))},[e.renderSlot(o.$slots,"summary",e.normalizeProps(e.guardReactiveProps({open:e.unref(k)})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(f)),1)]))],8,i),e.createElementVNode("div",{"aria-hidden":!e.unref(k),class:"vv-accordion__content"},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({open:e.unref(k)})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(y)),1)]))],8,d)],10,u))}}),c={modelValue:[String,Array],items:{type:Array,default:()=>[]},collapse:Boolean,modifiers:[String,Array],itemModifiers:{type:[String,Array],default:""},disabled:Boolean,not:Boolean,storeKey:String};return e.defineComponent({name:"VvAccordionGroup",props:c,emits:["update:modelValue"],setup(o,{emit:l}){const a=o,{disabled:u,collapse:i,modifiers:d,itemModifiers:c,items:v,not:p}=e.toRefs(a);e.watchEffect((()=>{"string"==typeof a.modelValue&&i.value&&console.warn("[VvAccordionGroup]: modelValue is a string but collapse is true.")}));let m=e.ref([]);e.watch((()=>a.storeKey),(o=>{m=o?r.useStorage(o,m.value):e.ref([])}),{immediate:!0});const f=e.computed({get:()=>{var e;return void 0!==a.modelValue?i.value?a.modelValue:Array.isArray(a.modelValue)?a.modelValue[0]:a.modelValue:i.value?m.value:null==(e=m.value)?void 0:e[0]},set:e=>{if(void 0!==a.modelValue)return!Array.isArray(a.modelValue)&&!i.value||Array.isArray(e)||(e=[e]),l("update:modelValue",e);m.value=Array.isArray(e)?e:[e]}});!function(o){if(Object.keys(o).some((r=>"key"!==r&&!e.isRef(o[r]))))throw Error("One or more groupState props aren't ref.");e.provide(o.key,e.computed((()=>o)))}({key:t,modelValue:f,disabled:u,collapse:i,modifiers:c,not:p});const y=n("vv-accordion-group",d,e.computed((()=>({disabled:u.value}))));return(o,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(y))},[e.renderSlot(o.$slots,"default",{},(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(v),(r=>(e.openBlock(),e.createBlock(s,e.mergeProps({key:r.title},{name:r.name,title:r.title,content:r.content}),{header:e.withCtx((t=>[e.renderSlot(o.$slots,`header::${r.name}`,e.normalizeProps(e.guardReactiveProps(t)))])),details:e.withCtx((t=>[e.renderSlot(o.$slots,`details::${r.name}`,e.normalizeProps(e.guardReactiveProps(t)))])),_:2},1040)))),128))]))],2))}})}));

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

@@ -2,10 +2,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: (StringConstructor | ArrayConstructor)[];
     items: {
         type: {
-            (arrayLength: number): import("@/components/VvAccordionGroup/").VvAccordionGroupItem[];
-            (...items: import("@/components/VvAccordionGroup/").VvAccordionGroupItem[]): import("@/components/VvAccordionGroup/").VvAccordionGroupItem[];
-            new (arrayLength: number): import("@/components/VvAccordionGroup/").VvAccordionGroupItem[];
-            new (...items: import("@/components/VvAccordionGroup/").VvAccordionGroupItem[]): import("@/components/VvAccordionGroup/").VvAccordionGroupItem[];
+            (arrayLength: number): import(".").VvAccordionGroupItem[];
+            (...items: import(".").VvAccordionGroupItem[]): import(".").VvAccordionGroupItem[];
+            new (arrayLength: number): import(".").VvAccordionGroupItem[];
+            new (...items: import(".").VvAccordionGroupItem[]): import(".").VvAccordionGroupItem[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
             from<T>(arrayLike: ArrayLike<T>): T[];
@@ -37,14 +37,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     disabled: BooleanConstructor;
+    not: BooleanConstructor;
+    storeKey: StringConstructor;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: (StringConstructor | ArrayConstructor)[];
     items: {
         type: {
-            (arrayLength: number): import("@/components/VvAccordionGroup/").VvAccordionGroupItem[];
-            (...items: import("@/components/VvAccordionGroup/").VvAccordionGroupItem[]): import("@/components/VvAccordionGroup/").VvAccordionGroupItem[];
-            new (arrayLength: number): import("@/components/VvAccordionGroup/").VvAccordionGroupItem[];
-            new (...items: import("@/components/VvAccordionGroup/").VvAccordionGroupItem[]): import("@/components/VvAccordionGroup/").VvAccordionGroupItem[];
+            (arrayLength: number): import(".").VvAccordionGroupItem[];
+            (...items: import(".").VvAccordionGroupItem[]): import(".").VvAccordionGroupItem[];
+            new (arrayLength: number): import(".").VvAccordionGroupItem[];
+            new (...items: import(".").VvAccordionGroupItem[]): import(".").VvAccordionGroupItem[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
             from<T>(arrayLike: ArrayLike<T>): T[];
@@ -76,16 +78,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     disabled: BooleanConstructor;
+    not: BooleanConstructor;
+    storeKey: StringConstructor;
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
+    not: boolean;
     collapse: boolean;
-    items: import("@/components/VvAccordionGroup/").VvAccordionGroupItem[];
+    items: import(".").VvAccordionGroupItem[];
     itemModifiers: string | string[];
-}>, Record<string, (_: any) => any> & Record<string, (_: {
-    open: boolean;
-}) => any> & {
+}>, Record<string, (_: any) => any> & Record<string, (_: any) => any> & {
     default: (_: {}) => any;
 }>;
 export default _default;

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

@@ -63,5 +63,13 @@ export declare const VvAccordionGroupProps: {
      * If true, the accordion items will be disabled
      */
     disabled: BooleanConstructor;
+    /**
+     * If true, the accordion items will be opened by default
+     */
+    not: BooleanConstructor;
+    /**
+     * Enable local storage persistence
+     */
+    storeKey: StringConstructor;
 };
 export declare const VvAccordionGroupEvents: string[];