@volverjs/ui-vue 0.0.3 → 0.0.5-beta.1

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

@@ -8,6 +8,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     modifiers: (StringConstructor | ArrayConstructor)[];
     disabled: BooleanConstructor;
+    not: BooleanConstructor;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     name: StringConstructor;
     title: StringConstructor;
@@ -18,16 +19,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     modifiers: (StringConstructor | ArrayConstructor)[];
     disabled: BooleanConstructor;
+    not: BooleanConstructor;
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: boolean;
     disabled: boolean;
+    not: boolean;
 }>, {
     summary: (_: {
         open: boolean;
     }) => any;
-    details: (_: {
+    default: (_: {
         open: boolean;
     }) => any;
 }>;

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

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, Ref } from 'vue';
-import type { AccordionGroupState } from '@/types/group';
+import type { AccordionGroupState } from '../../types/group';
 export declare const VvAccordionProps: {
     /**
      * Accordion name
@@ -28,6 +28,10 @@ export declare const VvAccordionProps: {
      * If true, the accordion will be disabled
      */
     disabled: BooleanConstructor;
+    /**
+     * If true, the accordion will be opened by default
+     */
+    not: BooleanConstructor;
 };
 export declare const VvAccordionEvents: string[];
 export type VvAccordionPropsTypes = ExtractPropTypes<typeof VvAccordionProps>;
@@ -36,11 +40,12 @@ export type VvAccordionPropsTypes = ExtractPropTypes<typeof VvAccordionProps>;
  */
 export declare function useGroupProps(props: VvAccordionPropsTypes, emit: (event: string, value: unknown) => void): {
     modelValue: import("vue").WritableComputedRef<unknown>;
-    disabled: Ref<boolean>;
-    isInGroup: import("vue").ComputedRef<boolean>;
+    not: Ref<boolean>;
+    isInGroup: globalThis.ComputedRef<boolean>;
     group: Ref<AccordionGroupState> | undefined;
     collapse: Ref<boolean>;
     modifiers: Ref<string | string[]>;
+    disabled: globalThis.ComputedRef<boolean>;
     title: Ref<string | undefined> | undefined;
     content: Ref<string | undefined> | undefined;
 };

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

@@ -1,6 +1,43 @@
-import { defineComponent as B, openBlock as _, createElementBlock as C, unref as l, normalizeClass as P, withModifiers as M, createElementVNode as G, renderSlot as y, normalizeProps as g, guardReactiveProps as V, createTextVNode as S, toDisplayString as h, Fragment as I, renderList as N, createBlock as O, mergeProps as R, withCtx as $ } from "vue";
-import { nanoid as T } from "nanoid";
-const k = Symbol.for("accordionGroup"), x = {
+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 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 groupPropValue == null ? void 0 : groupPropValue.value;
+        },
+        set(value) {
+          groupPropValue.value = value;
+        }
+      });
+    }
+    const propRef = toRef(props, propName);
+    return computed({
+      get() {
+        return propRef.value;
+      },
+      set(value) {
+        if (emit)
+          emit(`update:${propName}`, value);
+      }
+    });
+  }
+  return {
+    group,
+    isInGroup,
+    getGroupOrLocalRef
+  };
+}
+const VvAccordionProps = {
   /**
    * Accordion name
    */
@@ -27,98 +64,168 @@ const k = Symbol.for("accordionGroup"), x = {
   /**
    * If true, the accordion will be disabled
    */
-  disabled: Boolean
-}, z = ["update:modelValue"];
-function D(s, c) {
-  const { group: t, isInGroup: n, getGroupOrLocalRef: e } = useInjectedGroupState(
-    k
-  ), { title: m, content: v } = toRefs(s), p = e("modelValue", s, c), d = e("disabled", s), u = e("collapse", s), r = e("modifiers", s);
+  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: p,
-    disabled: d,
-    isInGroup: n,
-    group: t,
-    collapse: u,
-    modifiers: r,
+    modelValue,
+    not,
+    isInGroup,
+    group,
+    collapse,
+    modifiers,
+    disabled,
     // local props
-    title: m,
-    content: v
+    title,
+    content
   };
 }
-const L = ["id", "open"], j = ["aria-controls", "aria-expanded"], F = ["aria-hidden"], J = {
+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 _hoisted_1 = ["id", "open"];
+const _hoisted_2 = ["aria-controls", "aria-expanded"];
+const _hoisted_3 = ["aria-hidden"];
+const __default__$1 = {
   name: "VvAccordion"
-}, K = /* @__PURE__ */ B({
-  ...J,
-  props: x,
-  emits: z,
-  setup(s, { emit: c }) {
-    const t = s, n = useAttrs(), e = computed(
-      () => t.name || (n == null ? void 0 : n.id) || T()
-    ), {
-      modifiers: m,
-      title: v,
-      content: p,
-      disabled: d,
-      collapse: u,
-      modelValue: r,
-      isInGroup: o
-    } = D(t, c), b = ref(!1), a = computed({
-      get: () => o.value ? u.value && Array.isArray(r.value) ? r.value.includes(e.value) : r.value === e.value : r.value === void 0 ? b.value : r.value,
-      set: (i) => {
-        if (o.value) {
-          if (u.value && Array.isArray(r.value)) {
-            if (i) {
-              r.value.push(e.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;
             }
-            r.value = r.value.filter(
-              (A) => A !== e.value
+            modelValue.value = modelValue.value.filter(
+              (name) => name !== accordionName.value
             );
             return;
           }
-          r.value = i ? e.value : null;
+          modelValue.value = newValue ? accordionName.value : null;
           return;
         }
-        if (r.value === void 0 && typeof i == "boolean") {
-          b.value = i;
+        if (modelValue.value === void 0 && typeof newValue === "boolean") {
+          localModelValue.value = newValue;
           return;
         }
-        r.value = i;
+        modelValue.value = newValue;
       }
-    }), f = useBemModifiers(
+    });
+    const bemCssClasses = useModifiers(
       "vv-accordion",
-      m,
+      modifiers,
       computed(() => ({
-        disabled: d.value
+        disabled: disabled.value
       }))
-    ), E = useToggle(a);
-    return (i, A) => (_(), C("details", {
-      id: l(e),
-      class: P(l(f)),
-      open: l(a),
-      onClick: A[0] || (A[0] = M((H) => l(E)(), ["prevent"]))
-    }, [
-      G("summary", {
-        "aria-controls": l(e),
-        "aria-expanded": l(a),
-        class: "vv-collapse__summary"
-      }, [
-        y(i.$slots, "summary", g(V({ open: l(a) })), () => [
-          S(h(l(v)), 1)
-        ])
-      ], 8, j),
-      G("div", {
-        "aria-hidden": !l(a),
-        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)
       }, [
-        y(i.$slots, "details", g(V({ open: l(a) })), () => [
-          S(h(l(p)), 1)
-        ])
-      ], 8, F)
-    ], 10, L));
+        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);
+    };
   }
-}), U = {
+});
+const VvAccordionGroupProps = {
   /**
    * VModel
    */
@@ -146,68 +253,119 @@ const L = ["id", "open"], j = ["aria-controls", "aria-expanded"], F = ["aria-hid
   /**
    * If true, the accordion items will be disabled
    */
-  disabled: Boolean
-}, Y = ["update:modelValue"], q = {
+  disabled: Boolean,
+  /**
+   * If true, the accordion items will be opened by default
+   */
+  not: Boolean,
+  /**
+   * Enable local storage persistence
+   */
+  storeKey: String
+};
+const VvAccordionGroupEvents = ["update:modelValue"];
+function useProvideGroupState(groupState) {
+  if (Object.keys(groupState).some(
+    (k) => k !== "key" && !isRef(groupState[k])
+  ))
+    throw Error("One or more groupState props aren't ref.");
+  provide(
+    groupState.key,
+    computed(() => groupState)
+  );
+}
+const __default__ = {
   name: "VvAccordionGroup"
-}, X = /* @__PURE__ */ B({
-  ...q,
-  props: U,
-  emits: Y,
-  setup(s, { emit: c }) {
-    const t = s, { disabled: n, collapse: e, modifiers: m, itemModifiers: v, items: p } = toRefs(t);
+};
+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(() => {
-      typeof t.modelValue == "string" && e.value && console.warn(
-        "[VvAccordionGroup]: modelValue is a string but collapse is true."
-      );
+      if (typeof props.modelValue === "string" && collapse.value) {
+        console.warn(
+          `[VvAccordionGroup]: modelValue is a string but collapse is true.`
+        );
+      }
     });
-    const d = ref([]), u = computed({
+    let localModelValue = ref([]);
+    watch(
+      () => props.storeKey,
+      (newKey) => {
+        if (newKey) {
+          localModelValue = useStorage(newKey, localModelValue.value);
+        } else {
+          localModelValue = ref([]);
+        }
+      },
+      { immediate: true }
+    );
+    const modelValue = computed({
       get: () => {
-        var o;
-        return t.modelValue !== void 0 ? e.value ? t.modelValue : Array.isArray(t.modelValue) ? t.modelValue[0] : t.modelValue : e.value ? d.value : (o = d.value) == null ? void 0 : o[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: (o) => {
-        if (t.modelValue !== void 0)
-          return (Array.isArray(t.modelValue) || e.value) && !Array.isArray(o) && (o = [o]), c("update:modelValue", o);
-        d.value = Array.isArray(o) ? o : [o];
+      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];
       }
     });
     useProvideGroupState({
-      key: k,
-      modelValue: u,
-      disabled: n,
-      collapse: e,
-      modifiers: v
+      key: INJECTION_KEY_ACCORDION_GROUP,
+      modelValue,
+      disabled,
+      collapse,
+      modifiers: itemModifiers,
+      not
     });
-    const r = useBemModifiers(
+    const bemCssClasses = useModifiers(
       "vv-accordion-group",
-      m,
+      modifiers,
       computed(() => ({
-        disabled: n.value
+        disabled: disabled.value
       }))
     );
-    return (o, b) => (_(), C("div", {
-      class: P(l(r))
-    }, [
-      y(o.$slots, "default", {}, () => [
-        (_(!0), C(I, null, N(l(p), (a) => (_(), O(K, R({
-          key: a.title
-        }, {
-          name: a.name,
-          title: a.title,
-          content: a.content
-        }), {
-          header: $((f) => [
-            y(o.$slots, `header::${a.name}`, g(V(f)))
-          ]),
-          details: $((f) => [
-            y(o.$slots, `details::${a.name}`, g(V(f)))
-          ]),
-          _: 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 {
-  X as default
+  _sfc_main as default
 };

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

@@ -1 +1 @@
-(function(e,u){typeof exports=="object"&&typeof module<"u"?module.exports=u(require("vue"),require("nanoid")):typeof define=="function"&&define.amd?define(["vue","nanoid"],u):(e=typeof globalThis<"u"?globalThis:e||self,e.VvAccordionGroup=u(e.vue,e.nanoid))})(this,function(e,u){"use strict";const V=Symbol.for("accordionGroup"),v={name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},modifiers:[String,Array],disabled:Boolean},S=["update:modelValue"];function h(s,f){const{group:n,isInGroup:l,getGroupOrLocalRef:o}=useInjectedGroupState(V),{title:m,content:p}=toRefs(s),y=o("modelValue",s,f),d=o("disabled",s),c=o("collapse",s),t=o("modifiers",s);return{modelValue:y,disabled:d,isInGroup:l,group:n,collapse:c,modifiers:t,title:m,content:p}}const C=["id","open"],B=["aria-controls","aria-expanded"],P=["aria-hidden"],G={name:"VvAccordion"},b=e.defineComponent({...G,props:v,emits:S,setup(s,{emit:f}){const n=s,l=useAttrs(),o=computed(()=>n.name||(l==null?void 0:l.id)||u.nanoid()),{modifiers:m,title:p,content:y,disabled:d,collapse:c,modelValue:t,isInGroup:r}=h(n,f),g=ref(!1),a=computed({get:()=>r.value?c.value&&Array.isArray(t.value)?t.value.includes(o.value):t.value===o.value:t.value===void 0?g.value:t.value,set:i=>{if(r.value){if(c.value&&Array.isArray(t.value)){if(i){t.value.push(o.value);return}t.value=t.value.filter(_=>_!==o.value);return}t.value=i?o.value:null;return}if(t.value===void 0&&typeof i=="boolean"){g.value=i;return}t.value=i}}),A=useBemModifiers("vv-accordion",m,computed(()=>({disabled:d.value}))),R=useToggle(a);return(i,_)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(o),class:e.normalizeClass(e.unref(A)),open:e.unref(a),onClick:_[0]||(_[0]=e.withModifiers(M=>e.unref(R)(),["prevent"]))},[e.createElementVNode("summary",{"aria-controls":e.unref(o),"aria-expanded":e.unref(a),class:"vv-collapse__summary"},[e.renderSlot(i.$slots,"summary",e.normalizeProps(e.guardReactiveProps({open:e.unref(a)})),()=>[e.createTextVNode(e.toDisplayString(e.unref(p)),1)])],8,B),e.createElementVNode("div",{"aria-hidden":!e.unref(a),class:"vv-collapse__content"},[e.renderSlot(i.$slots,"details",e.normalizeProps(e.guardReactiveProps({open:e.unref(a)})),()=>[e.createTextVNode(e.toDisplayString(e.unref(y)),1)])],8,P)],10,C))}}),k={modelValue:[String,Array],items:{type:Array,default:()=>[]},collapse:Boolean,modifiers:[String,Array],itemModifiers:{type:[String,Array],default:""},disabled:Boolean},E=["update:modelValue"],$={name:"VvAccordionGroup"};return e.defineComponent({...$,props:k,emits:E,setup(s,{emit:f}){const n=s,{disabled:l,collapse:o,modifiers:m,itemModifiers:p,items:y}=toRefs(n);watchEffect(()=>{typeof n.modelValue=="string"&&o.value&&console.warn("[VvAccordionGroup]: modelValue is a string but collapse is true.")});const d=ref([]),c=computed({get:()=>{var r;return n.modelValue!==void 0?o.value?n.modelValue:Array.isArray(n.modelValue)?n.modelValue[0]:n.modelValue:o.value?d.value:(r=d.value)==null?void 0:r[0]},set:r=>{if(n.modelValue!==void 0)return(Array.isArray(n.modelValue)||o.value)&&!Array.isArray(r)&&(r=[r]),f("update:modelValue",r);d.value=Array.isArray(r)?r:[r]}});useProvideGroupState({key:V,modelValue:c,disabled:l,collapse:o,modifiers:p});const t=useBemModifiers("vv-accordion-group",m,computed(()=>({disabled:l.value})));return(r,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(t))},[e.renderSlot(r.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(y),a=>(e.openBlock(),e.createBlock(b,e.mergeProps({key:a.title},{name:a.name,title:a.title,content:a.content}),{header:e.withCtx(A=>[e.renderSlot(r.$slots,`header::${a.name}`,e.normalizeProps(e.guardReactiveProps(A)))]),details:e.withCtx(A=>[e.renderSlot(r.$slots,`details::${a.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[];