@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

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,6 +90,12 @@ Than you can import components and use them in your templates.
 
 ```html
 <script setup lang="ts">
+  // 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'
   /*
    * import the component style
@@ -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'
         })
       ]
     })
@@ -121,12 +160,13 @@ export default defineConfig({
 
 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;
 - [ ] `VvAvatar` component;
+- [ ] `VvAvatarGroup` component;
 - [ ] Alerts, notifications and toasts with `VvAlert` and `VvToast` component;
 - [ ] Loaders with `VvLoader` and `VvSkeleton`;
-- [ ] `VvTooltip` component;
-- [ ] Redesign `VvCombobox` for better accessibility;
-- [ ] Rewrite `VvDropdown` component and get it applicable to any element;
 - [ ] Menus, navigation and tabs with `VvNav`;
 - [ ] Input masks for `VvInputText` component;
 - [ ] `VvTable` component with sort, filters, pagination and cell editing;

package/auto-imports.d.ts

@@ -34,9 +34,6 @@ declare global {
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
-  const iAccordionGroupState: typeof import('./src/composables/group/types/IAccordionGroupState')['default']
-  const iButtonGroupState: typeof import('./src/composables/group/types/IButtonGroupState')['default']
-  const iGroupState: typeof import('./src/composables/group/types/IGroupState')['default']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
   const isDefined: typeof import('@vueuse/core')['isDefined']
@@ -99,7 +96,6 @@ declare global {
   const templateRef: typeof import('@vueuse/core')['templateRef']
   const throttledRef: typeof import('@vueuse/core')['throttledRef']
   const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
-  const toBem: typeof import('./src/composables/useModifiers')['toBem']
   const toRaw: typeof import('vue')['toRaw']
   const toReactive: typeof import('@vueuse/core')['toReactive']
   const toRef: typeof import('vue')['toRef']
@@ -138,8 +134,7 @@ declare global {
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useComponentFocus: typeof import('./src/composables/useComponentFocus')['useComponentFocus']
-  const useComponentIcon: typeof import('./src/composables/useComponentIcons')['useComponentIcon']
-  const useComponentIcons: typeof import('./src/composables/useComponentIcons')['useComponentIcons']
+  const useComponentIcon: typeof import('./src/composables/useComponentIcon')['useComponentIcon']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
@@ -183,6 +178,9 @@ declare global {
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useInjectedDropdownAction: typeof import('./src/composables/dropdown/useInjectDropdown')['useInjectedDropdownAction']
+  const useInjectedDropdownItem: typeof import('./src/composables/dropdown/useInjectDropdown')['useInjectedDropdownItem']
+  const useInjectedDropdownTrigger: typeof import('./src/composables/dropdown/useInjectDropdown')['useInjectedDropdownTrigger']
   const useInjectedGroupState: typeof import('./src/composables/group/useInjectedGroupState')['useInjectedGroupState']
   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
   const useInterval: typeof import('@vueuse/core')['useInterval']
@@ -219,6 +217,10 @@ declare global {
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const usePrevious: typeof import('@vueuse/core')['usePrevious']
+  const useProvideDropdownAction: typeof import('./src/composables/dropdown/useProvideDropdown')['useProvideDropdownAction']
+  const useProvideDropdownItem: typeof import('./src/composables/dropdown/useProvideDropdown')['useProvideDropdownItem']
+  const useProvideDropdownTrigger: typeof import('./src/composables/dropdown/useProvideDropdown')['useProvideDropdownTrigger']
   const useProvideGroupState: typeof import('./src/composables/group/useProvideGroupState')['useProvideGroupState']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
@@ -258,12 +260,14 @@ declare global {
   const useToString: typeof import('@vueuse/core')['useToString']
   const useToggle: typeof import('@vueuse/core')['useToggle']
   const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUniqueId: typeof import('./src/composables/useUniqueId')['useUniqueId']
   const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
   const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
   const useVModel: typeof import('@vueuse/core')['useVModel']
   const useVModels: typeof import('@vueuse/core')['useVModels']
   const useVibrate: typeof import('@vueuse/core')['useVibrate']
   const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useVolver: typeof import('./src/composables/useVolver')['useVolver']
   const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
   const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
   const useWebSocket: typeof import('@vueuse/core')['useWebSocket']

package/bin/icons.cjs

@@ -2,11 +2,11 @@
   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, objectFiles = {}, prefix = "iconify") {
+  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, objectFiles, file);
+        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)];
@@ -46,14 +46,14 @@
       JSON.stringify(iconifyJson)
     );
   }
-  function createIconifyJsonFiles(srcPath2, destPath2) {
-    const objectFiles = getAllFiles(srcPath2);
+  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((prefix) => {
-        generateIcons(prefix, objectFiles[prefix], destPath2);
-        console.info(`Icons generated in: ${destPath2}/${prefix}.json
+      Object.keys(objectFiles).forEach((prefix2) => {
+        generateIcons(prefix2, objectFiles[prefix2], destPath2);
+        console.info(`Icons generated in: ${destPath2}/${prefix2}.json
 `);
       });
     }
@@ -67,7 +67,7 @@
     );
     process.exit();
   }
-  createIconifyJsonFiles(srcPath, destPath);
+  createIconifyJsonFiles(srcPath, destPath, argv.prefix);
   exports2.createIconifyJsonFiles = createIconifyJsonFiles;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/bin/icons.js

@@ -4,11 +4,11 @@ import { hideBin } from "yargs/helpers";
 import { blankIconSet, SVG, cleanupSVG, parseColors, isEmptyColor, runSVGO } from "@iconify/tools";
 import path from "path";
 import { validateIconSet } from "@iconify/utils";
-function getAllFiles(dirPath, objectFiles = {}, prefix = "iconify") {
+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, objectFiles, file);
+      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)];
@@ -48,14 +48,14 @@ async function generateIcons(prefix, files, destPath2) {
     JSON.stringify(iconifyJson)
   );
 }
-function createIconifyJsonFiles(srcPath2, destPath2) {
-  const objectFiles = getAllFiles(srcPath2);
+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((prefix) => {
-      generateIcons(prefix, objectFiles[prefix], destPath2);
-      console.info(`Icons generated in: ${destPath2}/${prefix}.json
+    Object.keys(objectFiles).forEach((prefix2) => {
+      generateIcons(prefix2, objectFiles[prefix2], destPath2);
+      console.info(`Icons generated in: ${destPath2}/${prefix2}.json
 `);
     });
   }
@@ -69,7 +69,7 @@ if (!srcPath || !destPath) {
   );
   process.exit();
 }
-createIconifyJsonFiles(srcPath, destPath);
+createIconifyJsonFiles(srcPath, destPath, argv.prefix);
 export {
   createIconifyJsonFiles
 };

package/dist/Volver.d.ts

@@ -1,7 +1,8 @@
 import { type IconifyIcon, type IconifyJSON, type PartialIconifyAPIConfig } from '@iconify/vue';
-import type { Plugin } from 'vue';
-export declare const VOLVER_PREFIX = "ds";
-interface IVolverParams {
+import type { Component, Directive, Plugin } 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 = {
     /**
      * If true set "fetchOptions" with credentials: 'include'
      */
@@ -11,16 +12,38 @@ interface IVolverParams {
      */
     fetchOptions?: RequestInit;
     /**
-     * Array of https://docs.iconify.design/types/iconify-json.html
-     * This collections will be added during plugin install
+     * Array of iconify collections that will be added during plugin install
+     * @see https://docs.iconify.design/types/iconify-json.html
      */
     iconsCollections?: IconifyJSON[];
     /**
      * Set true inside nuxt
      */
     nuxt?: boolean;
-}
-export interface IVolver extends IVolverParams {
+    /**
+     * Default iconify provider
+     * @see https://docs.iconify.design/icon-components/vue/add-collection.html
+     * @default 'vv'
+     */
+    provider?: string;
+    /**
+     * Components to install
+     */
+    components?: Record<string, Component>;
+    /**
+     * Alias to install
+     */
+    aliases?: Record<string, Component>;
+    /**
+     * Directives to install
+     */
+    directives?: Record<string, Directive>;
+    /**
+     * Default props for components
+     */
+    defaults?: DefaultOptions;
+};
+export interface VolverInterface {
     /**
      * @param {String} src Icon source path (url)
      * @param {RequestInit} options
@@ -28,13 +51,15 @@ export interface IVolver extends IVolverParams {
      */
     fetchIcon(src: string, options?: RequestInit): Promise<string | undefined>;
     /**
-     * Add iconify collection to library https://docs.iconify.design/icon-components/vue/add-collection.html
+     * Add iconify collection to library
+     * @see https://docs.iconify.design/icon-components/vue/add-collection.html
      * @param {IconifyJSON} collection
      * @param {String} providerName Optional provider name
      */
     addCollection(collection: IconifyJSON, providerName?: string): boolean;
     /**
-     * Add icon to collection https://docs.iconify.design/icon-components/vue/add-icon.html
+     * Add icon to collection
+     * @see https://docs.iconify.design/icon-components/vue/add-icon.html
      * @param {String} name
      * @param {IconifyIcon} data
      * @returns {Boolean} true on success, false if something is wrong with data
@@ -52,16 +77,21 @@ export interface IVolver extends IVolverParams {
      */
     provider: string;
     /**
-     * Icon collections
+     * Array of installed iconify collections
+     * @see https://docs.iconify.design/types/iconify-json.html
      */
     iconsCollections: IconifyJSON[];
+    /**
+     * Set true inside nuxt
+     */
+    nuxt: boolean;
 }
-export declare class Volver implements IVolver {
+export declare class Volver implements VolverInterface {
     fetchOptions: RequestInit;
+    nuxt: boolean;
     iconsCollections: IconifyJSON[];
     provider: string;
-    nuxt: boolean;
-    constructor({ fetchWithCredentials, fetchOptions, iconsCollections, nuxt, }?: IVolverParams);
+    constructor({ fetchWithCredentials, fetchOptions, provider, nuxt, iconsCollections, }?: VolverOptions);
     addCollection(collection: IconifyJSON, providerName?: string): boolean;
     addIcon(name: string, data: IconifyIcon): boolean;
     addAPIProvider(provider: string, customConfig: PartialIconifyAPIConfig): boolean;

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

@@ -1,97 +1,171 @@
-import { defineComponent as S, openBlock as b, createElementBlock as h, unref as t, normalizeClass as P, withModifiers as B, createElementVNode as g, renderSlot as y, normalizeProps as A, guardReactiveProps as V, createTextVNode as C, toDisplayString as O } from "vue";
-import { nanoid as I } from "nanoid";
-const N = "VV_ACCORDION_GROUP", k = {
+import { unref as r, inject as E, computed as i, toRef as S, toRefs as $, defineComponent as I, useAttrs as V, ref as j, openBlock as k, createElementBlock as B, normalizeClass as N, withModifiers as P, createElementVNode as g, renderSlot as A, normalizeProps as b, guardReactiveProps as C, createTextVNode as G, toDisplayString as O } from "vue";
+import { nanoid as D } from "nanoid";
+import { useToggle as M } from "@vueuse/core";
+const T = Symbol.for("accordionGroup");
+function z(o) {
+  return ((e) => e == null || e === "" || Array.isArray(e) && e.length === 0 || !(e instanceof Date) && typeof e == "object" && Object.keys(e).length === 0)(r(o));
+}
+function L(o) {
+  const e = E(o, void 0), l = i(() => !z(e));
+  function a(t, s, d) {
+    if (e != null && e.value) {
+      const u = r(e.value)[t];
+      return i({
+        get() {
+          return u == null ? void 0 : u.value;
+        },
+        set(v) {
+          u.value = v;
+        }
+      });
+    }
+    const p = S(s, t);
+    return i({
+      get() {
+        return p.value;
+      },
+      set(u) {
+        d && d(`update:${t}`, u);
+      }
+    });
+  }
+  return {
+    group: e,
+    isInGroup: l,
+    getGroupOrLocalRef: a
+  };
+}
+const x = {
+  /**
+   * Accordion name
+   */
   name: String,
+  /**
+   * Header title
+   */
   title: String,
+  /**
+   * Content text
+   */
   content: String,
+  /**
+   * (Optional) Defines if item is open. Event "update:modelValue" is emitted on accordion header click
+   */
   modelValue: {
     type: Boolean,
     default: void 0
   },
+  /**
+   * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+   */
   modifiers: [String, Array],
+  /**
+   * If true, the accordion will be disabled
+   */
   disabled: Boolean
-}, x = ["update:modelValue"];
-function D(s, d) {
-  const { group: l, isInGroup: a, getGroupOrLocalRef: o } = useInjectedGroupState(N), { title: u, content: v } = toRefs(s), m = o("modelValue", s, d), p = o("disabled", s), i = o("collapse", s), e = o("modifiers", s);
+}, J = ["update:modelValue"];
+function K(o, e) {
+  const { group: l, isInGroup: a, getGroupOrLocalRef: t } = L(
+    T
+  ), { title: s, content: d } = $(o), p = t("modelValue", o, e), u = t("disabled", o), v = t("collapse", o), n = t("modifiers", o);
   return {
-    modelValue: m,
-    disabled: p,
+    // group props
+    modelValue: p,
+    disabled: u,
     isInGroup: a,
     group: l,
-    collapse: i,
-    modifiers: e,
-    title: u,
-    content: v
+    collapse: v,
+    modifiers: n,
+    // local props
+    title: s,
+    content: d
   };
 }
-const E = ["id", "open"], M = ["aria-controls", "aria-expanded"], $ = ["aria-hidden"], z = {
+function U(o, e, l) {
+  return i(() => {
+    const a = {
+      [o]: !0
+    }, t = typeof (e == null ? void 0 : e.value) == "string" ? e.value.split(" ") : e == null ? void 0 : e.value;
+    return t && Array.isArray(t) && t.forEach((s) => {
+      a[`${o}--${s}`] = !0;
+    }), l && Object.keys(l.value).forEach((s) => {
+      a[`${o}--${s}`] = r(l.value[s]);
+    }), a;
+  });
+}
+const Y = ["id", "open"], q = ["aria-controls", "aria-expanded"], F = ["aria-hidden"], H = {
   name: "VvAccordion"
-}, L = /* @__PURE__ */ S({
-  ...z,
-  props: k,
-  emits: x,
-  setup(s, { emit: d }) {
-    const l = s, a = useAttrs(), o = l.name || (a == null ? void 0 : a.id) || I(), {
-      modifiers: u,
-      title: v,
-      content: m,
-      disabled: p,
-      collapse: i,
-      modelValue: e,
-      isInGroup: f
-    } = D(l, d), _ = ref(!1), r = computed({
-      get: () => f.value ? i.value && Array.isArray(e.value) ? e.value.includes(o) : e.value === o : e.value === void 0 ? _.value : e.value,
-      set: (n) => {
-        if (f.value) {
-          if (i.value && Array.isArray(e.value)) {
-            if (n) {
-              e.value.push(o);
+}, w = /* @__PURE__ */ I({
+  ...H,
+  props: x,
+  emits: J,
+  setup(o, { emit: e }) {
+    const l = o, a = V(), t = i(
+      () => l.name || (a == null ? void 0 : a.id) || D()
+    ), {
+      modifiers: s,
+      title: d,
+      content: p,
+      disabled: u,
+      collapse: v,
+      modelValue: n,
+      isInGroup: y
+    } = K(l, e), _ = j(!1), f = i({
+      get: () => y.value ? v.value && Array.isArray(n.value) ? n.value.includes(t.value) : n.value === t.value : n.value === void 0 ? _.value : n.value,
+      set: (c) => {
+        if (y.value) {
+          if (v.value && Array.isArray(n.value)) {
+            if (c) {
+              n.value.push(t.value);
               return;
             }
-            e.value = e.value.filter(
-              (c) => c !== o
+            n.value = n.value.filter(
+              (m) => m !== t.value
             );
             return;
           }
-          e.value = n ? o : null;
+          n.value = c ? t.value : null;
           return;
         }
-        if (e.value === void 0 && typeof n == "boolean") {
-          _.value = n;
+        if (n.value === void 0 && typeof c == "boolean") {
+          _.value = c;
           return;
         }
-        e.value = n;
+        n.value = c;
       }
-    }), { bemCssClasses: G } = useBemModifiers("vv-accordion", {
-      modifiers: u,
-      disabled: p
-    }), R = useToggle(r);
-    return (n, c) => (b(), h("details", {
-      id: t(o),
-      class: P(t(G)),
-      open: t(r),
-      onClick: c[0] || (c[0] = B((T) => t(R)(), ["prevent"]))
+    }), R = U(
+      "vv-accordion",
+      s,
+      i(() => ({
+        disabled: u.value
+      }))
+    ), h = M(f);
+    return (c, m) => (k(), B("details", {
+      id: r(t),
+      class: N(r(R)),
+      open: r(f),
+      onClick: m[0] || (m[0] = P((Q) => r(h)(), ["prevent"]))
     }, [
       g("summary", {
-        "aria-controls": t(o),
-        "aria-expanded": t(r),
+        "aria-controls": r(t),
+        "aria-expanded": r(f),
         class: "vv-collapse__summary"
       }, [
-        y(n.$slots, "summary", A(V({ open: t(r) })), () => [
-          C(O(t(v)), 1)
+        A(c.$slots, "summary", b(C({ open: r(f) })), () => [
+          G(O(r(d)), 1)
         ])
-      ], 8, M),
+      ], 8, q),
       g("div", {
-        "aria-hidden": !t(r),
+        "aria-hidden": !r(f),
         class: "vv-collapse__content"
       }, [
-        y(n.$slots, "details", A(V({ open: t(r) })), () => [
-          C(O(t(m)), 1)
+        A(c.$slots, "details", b(C({ open: r(f) })), () => [
+          G(O(r(p)), 1)
         ])
-      ], 8, $)
-    ], 10, E));
+      ], 8, F)
+    ], 10, Y));
   }
 });
 export {
-  L as default
+  w 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 v="VV_ACCORDION_GROUP",A={name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},modifiers:[String,Array],disabled:Boolean},g=["update:modelValue"];function C(r,u){const{group:l,isInGroup:a,getGroupOrLocalRef:o}=useInjectedGroupState(v),{title:f,content:p}=toRefs(r),m=o("modelValue",r,u),_=o("disabled",r),d=o("collapse",r),n=o("modifiers",r);return{modelValue:m,disabled:_,isInGroup:a,group:l,collapse:d,modifiers:n,title:f,content:p}}const h=["id","open"],S=["aria-controls","aria-expanded"],O=["aria-hidden"],P={name:"VvAccordion"};return e.defineComponent({...P,props:A,emits:g,setup(r,{emit:u}){const l=r,a=useAttrs(),o=l.name||(a==null?void 0:a.id)||s.nanoid(),{modifiers:f,title:p,content:m,disabled:_,collapse:d,modelValue:n,isInGroup:y}=C(l,u),V=ref(!1),i=computed({get:()=>y.value?d.value&&Array.isArray(n.value)?n.value.includes(o):n.value===o:n.value===void 0?V.value:n.value,set:t=>{if(y.value){if(d.value&&Array.isArray(n.value)){if(t){n.value.push(o);return}n.value=n.value.filter(c=>c!==o);return}n.value=t?o:null;return}if(n.value===void 0&&typeof t=="boolean"){V.value=t;return}n.value=t}}),{bemCssClasses:R}=useBemModifiers("vv-accordion",{modifiers:f,disabled:_}),G=useToggle(i);return(t,c)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(o),class:e.normalizeClass(e.unref(R)),open:e.unref(i),onClick:c[0]||(c[0]=e.withModifiers(b=>e.unref(G)(),["prevent"]))},[e.createElementVNode("summary",{"aria-controls":e.unref(o),"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,S),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,O)],10,h))}})});
+(function(e,p){typeof exports=="object"&&typeof module<"u"?module.exports=p(require("vue"),require("nanoid"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["vue","nanoid","@vueuse/core"],p):(e=typeof globalThis<"u"?globalThis:e||self,e.VvAccordion=p(e.vue,e.nanoid,e.core))})(this,function(e,p,g){"use strict";const h=Symbol.for("accordionGroup");function v(o){return(n=>n==null||n===""||Array.isArray(n)&&n.length===0||!(n instanceof Date)&&typeof n=="object"&&Object.keys(n).length===0)(e.unref(o))}function R(o){const n=e.inject(o,void 0),s=e.computed(()=>!v(n));function a(t,i,u){if(n!=null&&n.value){const c=e.unref(n.value)[t];return e.computed({get(){return c==null?void 0:c.value},set(d){c.value=d}})}const m=e.toRef(i,t);return e.computed({get(){return m.value},set(c){u&&u(`update:${t}`,c)}})}return{group:n,isInGroup:s,getGroupOrLocalRef:a}}const S={name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},modifiers:[String,Array],disabled:Boolean},b=["update:modelValue"];function C(o,n){const{group:s,isInGroup:a,getGroupOrLocalRef:t}=R(h),{title:i,content:u}=e.toRefs(o),m=t("modelValue",o,n),c=t("disabled",o),d=t("collapse",o),r=t("modifiers",o);return{modelValue:m,disabled:c,isInGroup:a,group:s,collapse:d,modifiers:r,title:i,content:u}}function E(o,n,s){return e.computed(()=>{const a={[o]:!0},t=typeof(n==null?void 0:n.value)=="string"?n.value.split(" "):n==null?void 0:n.value;return t&&Array.isArray(t)&&t.forEach(i=>{a[`${o}--${i}`]=!0}),s&&Object.keys(s.value).forEach(i=>{a[`${o}--${i}`]=e.unref(s.value[i])}),a})}const G=["id","open"],O=["aria-controls","aria-expanded"],V=["aria-hidden"],$={name:"VvAccordion"};return e.defineComponent({...$,props:S,emits:b,setup(o,{emit:n}){const s=o,a=e.useAttrs(),t=e.computed(()=>s.name||(a==null?void 0:a.id)||p.nanoid()),{modifiers:i,title:u,content:m,disabled:c,collapse:d,modelValue:r,isInGroup:_}=C(s,n),A=e.ref(!1),f=e.computed({get:()=>_.value?d.value&&Array.isArray(r.value)?r.value.includes(t.value):r.value===t.value:r.value===void 0?A.value:r.value,set:l=>{if(_.value){if(d.value&&Array.isArray(r.value)){if(l){r.value.push(t.value);return}r.value=r.value.filter(y=>y!==t.value);return}r.value=l?t.value:null;return}if(r.value===void 0&&typeof l=="boolean"){A.value=l;return}r.value=l}}),I=E("vv-accordion",i,e.computed(()=>({disabled:c.value}))),j=g.useToggle(f);return(l,y)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(t),class:e.normalizeClass(e.unref(I)),open:e.unref(f),onClick:y[0]||(y[0]=e.withModifiers(P=>e.unref(j)(),["prevent"]))},[e.createElementVNode("summary",{"aria-controls":e.unref(t),"aria-expanded":e.unref(f),class:"vv-collapse__summary"},[e.renderSlot(l.$slots,"summary",e.normalizeProps(e.guardReactiveProps({open:e.unref(f)})),()=>[e.createTextVNode(e.toDisplayString(e.unref(u)),1)])],8,O),e.createElementVNode("div",{"aria-hidden":!e.unref(f),class:"vv-collapse__content"},[e.renderSlot(l.$slots,"details",e.normalizeProps(e.guardReactiveProps({open:e.unref(f)})),()=>[e.createTextVNode(e.toDisplayString(e.unref(m)),1)])],8,V)],10,G))}})});

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

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, Ref } from 'vue';
-import type IAccordionGroupState from '@/composables/group/types/IAccordionGroupState';
+import type { AccordionGroupState } from '@/types/group';
 export declare const VvAccordionProps: {
     /**
      * Accordion name
@@ -38,7 +38,7 @@ export declare function useGroupProps(props: VvAccordionPropsTypes, emit: (event
     modelValue: import("vue").WritableComputedRef<unknown>;
     disabled: Ref<boolean>;
     isInGroup: import("vue").ComputedRef<boolean>;
-    group: Ref<IAccordionGroupState> | undefined;
+    group: Ref<AccordionGroupState> | undefined;
     collapse: Ref<boolean>;
     modifiers: Ref<string | string[]>;
     title: Ref<string | undefined> | undefined;