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

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 volverjs
+Copyright (c) 2022-2023 24/Consulting
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -26,13 +26,13 @@
 
 ```bash
 # pnpm
-pnpm add @volverjs/style @volverjs/ui-vue
+pnpm add @volverjs/ui-vue
 
 # yarn
-yarn add @volverjs/style @volverjs/ui-vue
+yarn add @volverjs/ui-vue
 
 # npm
-npm install @volverjs/style @volverjs/ui-vue --save
+npm install @volverjs/ui-vue --save
 ```
 
 <br />
@@ -42,6 +42,7 @@ npm install @volverjs/style @volverjs/ui-vue --save
 Install the plugin in your `main.ts` file.
 
 ```typescript
+// main.ts
 import { createApp } from 'vue'
 import App from './App.vue'
 
@@ -50,19 +51,38 @@ import { VolverPlugin } from '@volverjs/ui-vue'
 // import @volverjs/ui-vue icons collections
 import iconsCollections from '@volverjs/ui-vue/icons'
 /*
- * import @volverjs/style reset and props
- * for scss support you can import the scss files
- * import '@volverjs/style/scss/reset'
- * import '@volverjs/style/scss/props'
+ * import @volverjs/style base style with reset and props
+ * for scss support you can import the scss file
+ * import '@volverjs/style/scss/base'
  */
-import '@volverjs/style/reset'
-import '@volverjs/style/props'
+import '@volverjs/style/base'
 
 const app = createApp(App).mount('#app')
 
 // install the plugin
 app.use(VolverPlugin, {
-  iconsCollections
+  iconsCollections,
+  /*
+   * if you want can import components globally
+   * components: { VvButton, VvInputText }
+   */
+  compoments: undefined,
+  /*
+   * if you want can import directives globally
+   * directives: { toolip: VTooltip }
+   */
+  directives: undefined,
+  /*
+   * if you want can create components aliases
+   * aliases: { Btn: VvButton, BtnDanger: VvButton}
+   */
+  aliases: undefined,
+  /*
+   * if you want can change default props
+   * for globally imported components and aliases
+   * defaults: { VvButton: { modifiers: 'secondary', BtnDanger: { modifiers: 'danger' } }
+   */
+  defaults: undefined
 })
 ```
 
@@ -70,7 +90,13 @@ Than you can import components and use them in your templates.
 
 ```html
 <script setup lang="ts">
-  import { VvButton } from '@volverjs/ui-vue'
+  // MyComponent.vue
+  /*
+   * import the component
+   * all components are also available with a dedicated export
+   * import VvButton from '@volverjs/ui-vue/vv-button'
+   */
+  import { VvButton } from '@volverjs/ui-vue/components'
   /*
    * import the component style
    * for scss support you can import the scss file
@@ -107,9 +133,22 @@ export default defineConfig({
     Components({
       resolvers: [
         VolverResolver({
-          // enable/disable import of style
-          // default: false
-          importStyle: 'css' // or 'scss'
+          /*
+           * enable/disable auto import of components style
+           * also accept 'scss' for scss support
+           * default: false
+           */
+          importStyle: false,
+          /*
+           * enable/disable auto import of directives
+           * default: false
+           */
+          directives: false,
+          /*
+           * Change components prefix
+           * default: 'vv'
+           */
+          prefix: 'vv'
         })
       ]
     })
@@ -124,12 +163,12 @@ The following features are planned for the next releases:
 - [x] (v0.0.3) `VvTooltip` component and `v-tooltip` directive;
 - [x] (v0.0.3) Redesign of `VvCombobox` for better accessibility and more features;
 - [x] (v0.0.3) Rewrite of `VvDropdown` to get it applicable to any element;
+- [x] (v0.0.5) Input masks for `VvInputText` component;
 - [ ] `VvAvatar` component;
 - [ ] `VvAvatarGroup` component;
 - [ ] Alerts, notifications and toasts with `VvAlert` and `VvToast` component;
 - [ ] Loaders with `VvLoader` and `VvSkeleton`;
 - [ ] Menus, navigation and tabs with `VvNav`;
-- [ ] Input masks for `VvInputText` component;
 - [ ] `VvTable` component with sort, filters, pagination and cell editing;
 - [ ] Multiple uploads, image crop and file previews with `VvInputFile`;
 - [ ] Carousel and galleries with `VvCarousel` component;

package/auto-imports.d.ts

@@ -1,4 +1,7 @@
-// Generated by 'unplugin-auto-import'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -84,7 +87,6 @@ declare global {
   const refWithControl: typeof import('@vueuse/core')['refWithControl']
   const removeFromList: typeof import('./src/utils/ObjectUtilities')['removeFromList']
   const resolveComponent: typeof import('vue')['resolveComponent']
-  const resolveDirective: typeof import('vue')['resolveDirective']
   const resolveFieldData: typeof import('./src/utils/ObjectUtilities')['resolveFieldData']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
@@ -114,6 +116,7 @@ declare global {
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
@@ -124,7 +127,6 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
-  const useBemModifiers: typeof import('./src/composables/useModifiers')['useBemModifiers']
   const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
   const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
@@ -148,6 +150,7 @@ declare global {
   const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
   const useDebouncedInput: typeof import('./src/composables/useDebouncedInput')['useDebouncedInput']
   const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDefaults: typeof import('./src/composables/useDefaults')['useDefaults']
   const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
   const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
   const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
@@ -194,6 +197,7 @@ declare global {
   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useModifiers: typeof import('./src/composables/useModifiers')['useModifiers']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -291,3 +295,8 @@ declare global {
   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
   const whenever: typeof import('@vueuse/core')['whenever']
 }
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+}

package/bin/icons.cjs

@@ -1,73 +1 @@
-(function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("fs"), require("yargs"), require("yargs/helpers"), require("@iconify/tools"), require("path"), require("@iconify/utils")) : typeof define === "function" && define.amd ? define(["exports", "fs", "yargs", "yargs/helpers", "@iconify/tools", "path", "@iconify/utils"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["generate-icons"] = {}, global.fileSystem, global.yargs, global.helpers, global.tools, global.path, global.utils));
-})(this, function(exports2, fileSystem, yargs, helpers, tools, path, utils) {
-  "use strict";
-  function getAllFiles(dirPath, prefix = "iconify", objectFiles = {}) {
-    const files = fileSystem.readdirSync(dirPath);
-    files.forEach(function(file) {
-      if (fileSystem.statSync(dirPath + "/" + file).isDirectory()) {
-        objectFiles = getAllFiles(dirPath + "/" + file, file, objectFiles);
-      } else {
-        if (file.includes(".svg")) {
-          objectFiles[prefix] ? objectFiles[prefix].push(path.join(dirPath, "/", file)) : objectFiles[prefix] = [path.join(dirPath, "/", file)];
-        }
-      }
-    });
-    return objectFiles;
-  }
-  async function generateIcons(prefix, files, destPath2) {
-    const iconSet = tools.blankIconSet(prefix);
-    for (const file of files) {
-      const content = await fileSystem.promises.readFile(file, {
-        encoding: "utf-8"
-      });
-      const svg = new tools.SVG(content);
-      await tools.cleanupSVG(svg);
-      await tools.parseColors(svg, {
-        defaultColor: "currentColor",
-        callback: (attr, colorStr, color) => {
-          return !color || tools.isEmptyColor(color) ? colorStr : "currentColor";
-        }
-      });
-      await tools.runSVGO(svg);
-      const fileName = file.replace(/^.*[\\/]/, "").split(".")[0].replace(/ /g, "-").replace(/[^a-z0-9-]/gi, "");
-      iconSet.fromSVG(fileName, svg);
-    }
-    const iconifyJson = iconSet.export();
-    try {
-      utils.validateIconSet(iconifyJson);
-    } catch (error) {
-      throw new Error(
-        `Icon set is not valid: ${error == null ? void 0 : error.message}`
-      );
-    }
-    fileSystem.writeFileSync(
-      `${destPath2}/${iconifyJson.prefix}.json`,
-      JSON.stringify(iconifyJson)
-    );
-  }
-  function createIconifyJsonFiles(srcPath2, destPath2, prefix) {
-    const objectFiles = getAllFiles(srcPath2, prefix);
-    if (!Object.keys(objectFiles).length) {
-      console.error(`There are no files in ${srcPath2}`);
-    } else {
-      Object.keys(objectFiles).forEach((prefix2) => {
-        generateIcons(prefix2, objectFiles[prefix2], destPath2);
-        console.info(`Icons generated in: ${destPath2}/${prefix2}.json
-`);
-      });
-    }
-  }
-  const argv = yargs(helpers.hideBin(process.argv)).argv;
-  const srcPath = argv.srcPath;
-  const destPath = argv.destPath || srcPath;
-  if (!srcPath || !destPath) {
-    console.error(
-      "Please specify the srcPath and destPath with --srcPath and --destPath"
-    );
-    process.exit();
-  }
-  createIconifyJsonFiles(srcPath, destPath, argv.prefix);
-  exports2.createIconifyJsonFiles = createIconifyJsonFiles;
-  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
-});
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("fs"),require("yargs"),require("yargs/helpers"),require("@iconify/tools"),require("path"),require("@iconify/utils")):"function"==typeof define&&define.amd?define(["exports","fs","yargs","yargs/helpers","@iconify/tools","path","@iconify/utils"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self)["generate-icons"]={},e.fileSystem,e.yargs,e.helpers,e.tools,e.path,e.utils)}(this,(function(e,o,t,r,n,i,s){"use strict";function c(e,t="iconify",r={}){return o.readdirSync(e).forEach((function(n){o.statSync(e+"/"+n).isDirectory()?r=c(e+"/"+n,n,r):n.includes(".svg")&&(r[t]?r[t].push(i.join(e,"/",n)):r[t]=[i.join(e,"/",n)])})),r}function a(e,t,r){const i=c(e,r);Object.keys(i).length?Object.keys(i).forEach((e=>{!async function(e,t,r){const i=n.blankIconSet(e);for(const s of t){const e=await o.promises.readFile(s,{encoding:"utf-8"}),t=new n.SVG(e);await n.cleanupSVG(t),await n.parseColors(t,{defaultColor:"currentColor",callback:(e,o,t)=>!t||n.isEmptyColor(t)?o:"currentColor"}),await n.runSVGO(t);const r=s.replace(/^.*[\\/]/,"").split(".")[0].replace(/ /g,"-").replace(/[^a-z0-9-]/gi,"");i.fromSVG(r,t)}const c=i.export();try{s.validateIconSet(c)}catch(a){throw new Error(`Icon set is not valid: ${null==a?void 0:a.message}`)}o.writeFileSync(`${r}/${c.prefix}.json`,JSON.stringify(c))}(e,i[e],t),console.info(`Icons generated in: ${t}/${e}.json\n`)})):console.error(`There are no files in ${e}`)}const l=t(r.hideBin(process.argv)).argv,f=l.srcPath,u=l.destPath||f;f&&u||(console.error("Please specify the srcPath and destPath with --srcPath and --destPath"),process.exit()),a(f,u,l.prefix),e.createIconifyJsonFiles=a,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));

package/dist/Volver.d.ts

@@ -1,5 +1,5 @@
 import { type IconifyIcon, type IconifyJSON, type PartialIconifyAPIConfig } from '@iconify/vue';
-import type { Component, Plugin } from 'vue';
+import type { Component, Directive, Plugin, Ref } from 'vue';
 export declare function useDefaultProps(component: Component, defaults?: Record<string, unknown>, name?: string): Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
 export type DefaultOptions = Record<string, Record<string, unknown>>;
 export type VolverOptions = {
@@ -25,7 +25,7 @@ export type VolverOptions = {
      * @see https://docs.iconify.design/icon-components/vue/add-collection.html
      * @default 'vv'
      */
-    provider?: string;
+    iconsProvider?: string;
     /**
      * Components to install
      */
@@ -34,6 +34,10 @@ export type VolverOptions = {
      * Alias to install
      */
     aliases?: Record<string, Component>;
+    /**
+     * Directives to install
+     */
+    directives?: Record<string, Directive>;
     /**
      * Default props for components
      */
@@ -62,16 +66,16 @@ export interface VolverInterface {
      */
     addIcon(name: string, data: IconifyIcon): boolean;
     /**
-     * Add custom config for provider
+     * Add custom config for icons provider
      * @param {String} provider
      * @param {PartialIconifyAPIConfig} customConfig
      * @returns {Boolean} true on success, false if something is wrong with data
      */
-    addAPIProvider(provider: string, customConfig: PartialIconifyAPIConfig): boolean;
+    addIconsAPIProvider(provider: string, customConfig: PartialIconifyAPIConfig): boolean;
     /**
      * Current provider
      */
-    provider: string;
+    iconsProvider: string;
     /**
      * Array of installed iconify collections
      * @see https://docs.iconify.design/types/iconify-json.html
@@ -81,16 +85,24 @@ export interface VolverInterface {
      * Set true inside nuxt
      */
     nuxt: boolean;
+    /**
+     * Components defaults options
+     */
+    defaults: Ref<DefaultOptions>;
 }
 export declare class Volver implements VolverInterface {
-    fetchOptions: RequestInit;
-    nuxt: boolean;
-    iconsCollections: IconifyJSON[];
-    provider: string;
-    constructor({ fetchWithCredentials, fetchOptions, provider, nuxt, iconsCollections, }?: VolverOptions);
+    private _fetchOptions;
+    private _iconsCollections;
+    private _iconsProvider;
+    private _nuxt;
+    defaults: Ref<DefaultOptions>;
+    constructor({ fetchWithCredentials, fetchOptions, iconsProvider, nuxt, iconsCollections, defaults, }?: VolverOptions);
+    get nuxt(): boolean;
+    get iconsProvider(): string;
+    get iconsCollections(): IconifyJSON[];
     addCollection(collection: IconifyJSON, providerName?: string): boolean;
     addIcon(name: string, data: IconifyIcon): boolean;
-    addAPIProvider(provider: string, customConfig: PartialIconifyAPIConfig): boolean;
+    addIconsAPIProvider(provider: string, customConfig: PartialIconifyAPIConfig): boolean;
     fetchIcon(src: string, options?: RequestInit): Promise<string | undefined>;
 }
 declare const VolverPlugin: Plugin;

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

@@ -1,6 +1,43 @@
-import { defineComponent as h, openBlock as I, createElementBlock as N, unref as t, normalizeClass as O, withModifiers as B, createElementVNode as y, renderSlot as g, normalizeProps as A, guardReactiveProps as C, createTextVNode as b, toDisplayString as S } from "vue";
-import { nanoid as E } from "nanoid";
-const P = Symbol.for("accordionGroup"), R = {
+import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from "vue";
+import { nanoid } from "nanoid";
+import { useToggle } 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,167 @@ const P = Symbol.for("accordionGroup"), R = {
   /**
    * If true, the accordion will be disabled
    */
-  disabled: Boolean
-}, k = ["update:modelValue"];
-function x(n, d) {
-  const { group: l, isInGroup: s, getGroupOrLocalRef: o } = useInjectedGroupState(
-    P
-  ), { title: c, content: v } = toRefs(n), m = o("modelValue", n, d), p = o("disabled", n), i = o("collapse", n), e = o("modifiers", n);
+  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: p,
-    isInGroup: s,
-    group: l,
-    collapse: i,
-    modifiers: e,
+    modelValue,
+    not,
+    isInGroup,
+    group,
+    collapse,
+    modifiers,
+    disabled,
     // local props
-    title: c,
-    content: v
+    title,
+    content
   };
 }
-const M = ["id", "open"], T = ["aria-controls", "aria-expanded"], $ = ["aria-hidden"], z = {
+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__ = {
   name: "VvAccordion"
-}, K = /* @__PURE__ */ h({
-  ...z,
-  props: R,
-  emits: k,
-  setup(n, { emit: d }) {
-    const l = n, s = useAttrs(), o = computed(
-      () => l.name || (s == null ? void 0 : s.id) || E()
-    ), {
-      modifiers: c,
-      title: v,
-      content: m,
-      disabled: p,
-      collapse: i,
-      modelValue: e,
-      isInGroup: f
-    } = x(l, d), _ = ref(!1), r = computed({
-      get: () => f.value ? i.value && Array.isArray(e.value) ? e.value.includes(o.value) : e.value === o.value : e.value === void 0 ? _.value : e.value,
-      set: (a) => {
-        if (f.value) {
-          if (i.value && Array.isArray(e.value)) {
-            if (a) {
-              e.value.push(o.value);
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  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;
             }
-            e.value = e.value.filter(
-              (u) => u !== o.value
+            modelValue.value = modelValue.value.filter(
+              (name) => name !== accordionName.value
             );
             return;
           }
-          e.value = a ? o.value : null;
+          modelValue.value = newValue ? accordionName.value : null;
           return;
         }
-        if (e.value === void 0 && typeof a == "boolean") {
-          _.value = a;
+        if (modelValue.value === void 0 && typeof newValue === "boolean") {
+          localModelValue.value = newValue;
           return;
         }
-        e.value = a;
+        modelValue.value = newValue;
       }
-    }), G = useBemModifiers(
+    });
+    const bemCssClasses = useModifiers(
       "vv-accordion",
-      c,
+      modifiers,
       computed(() => ({
-        disabled: p.value
+        disabled: disabled.value
       }))
-    ), V = useToggle(r);
-    return (a, u) => (I(), N("details", {
-      id: t(o),
-      class: O(t(G)),
-      open: t(r),
-      onClick: u[0] || (u[0] = B((D) => t(V)(), ["prevent"]))
-    }, [
-      y("summary", {
-        "aria-controls": t(o),
-        "aria-expanded": t(r),
-        class: "vv-collapse__summary"
-      }, [
-        g(a.$slots, "summary", A(C({ open: t(r) })), () => [
-          b(S(t(v)), 1)
-        ])
-      ], 8, T),
-      y("div", {
-        "aria-hidden": !t(r),
-        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)
       }, [
-        g(a.$slots, "details", A(C({ open: t(r) })), () => [
-          b(S(t(m)), 1)
-        ])
-      ], 8, $)
-    ], 10, M));
+        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);
+    };
   }
 });
 export {
-  K as default
+  _sfc_main as default
 };

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

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