@volverjs/ui-vue 0.0.1-beta.8 → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 volverjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,11 +1,12 @@
 <div align="center">
   
-[![volverjs](https://raw.githubusercontent.com/volverjs/style/main/src/assets/volverjs.svg)](https://github.com/volverjs)
+[![volverjs](.storybook/static/volverjs-beta.svg)](https://volverjs.github.io/ui-vue)
 
 ## @volverjs/ui-vue
 
-`vue` `components` `ui` `design-system` `typography`  
-`input` `button` `text`
+`vue` `components` `component-library` `design-system` \
+`input` `button` `accordion` `badge` `combobox` `breadcrumb` `dialog`\
+`checkbox` `radio` `textarea` `badge`
 
 <br>
 
@@ -13,7 +14,7 @@
 
 <br>
 
-[![24/Consulting](https://raw.githubusercontent.com/volverjs/style/main/src/assets/24consulting.svg)](https://24consulting.it)
+[![24/Consulting](.storybook/static/24consulting.svg)](https://24consulting.it)
 
 <br>
 
@@ -21,71 +22,122 @@
 
 ## Install
 
-```
-$ npm i @volverjs/ui-vue
-```
+`@volverjs/ui-vue` is closely linked to [`@volverjs/style`](https://volverjs.github.io/style/) and is neeeded to style components.
 
-## Style
+```bash
+# pnpm
+pnpm add @volverjs/style @volverjs/ui-vue
 
-#### @volverjs/ui-vue is closely linked to [@volverjs/style](https://volverjs.github.io/style/) and is neeeded to style components
+# yarn
+yarn add @volverjs/style @volverjs/ui-vue
+
+# npm
+npm install @volverjs/style @volverjs/ui-vue --save
+```
 
 <br />
 
-## Basic usage
+## Usage
 
-```typescript
-import { iconsSimple, iconsNormal, iconsDetailed } from '@volverjs/ui-vue/icons'
-import { DesygnSystem } from '@volverjs/ui-vue'
+Install the plugin in your `main.ts` file.
 
-const volver = new DesignSystem({
-	iconsCollections: [iconsSimple, iconsNormal, iconsDetailed]
+```typescript
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// import @volverjs/ui-vue plugin
+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/reset'
+import '@volverjs/style/props'
+
+const app = createApp(App).mount('#app')
+
+// install the plugin
+app.use(VolverPlugin, {
+  iconsCollections
 })
+```
 
-app.use(volver)
+Than you can import components and use them in your templates.
+
+```html
+<script setup lang="ts">
+  import { VvButton } from '@volverjs/ui-vue'
+  /*
+   * import the component style
+   * for scss support you can import the scss file
+   * import '@volverjs/style/scss/vv-button'
+   */
+  import '@volverjs/style/vv-button'
+</script>
+
+<template>
+  <VvButton label="Button" />
+</template>
 ```
 
-Constructor parameters:
+## Icons Collections
 
-```typescript
-interface IDesignSystemParams {
-	/**
-	 * If true set "fetchOptions" with credentials: 'include'
-	 */
-	fetchWithCredentials?: boolean
-	/**
-	 * Optional fetch params
-	 */
-	fetchOptions?: RequestInit
-	/**
-	 * Array of https://docs.iconify.design/types/iconify-json.html
-	 * This collections will be added during plugin install
-	 */
-	iconsCollections?: IconifyJSON[]
-}
-```
+`@volverjs/ui-vue` comes with a set of icons with different levels of details. You can use them by importing `@volverjs/ui-vue/icons`.
+
+To learn more about icons collections, check [icons documentation](src/components/VvIcon/README.md).
 
-Design System definition
+## Unplugin Resolver
+
+You can use `@volverjs/ui-vue` with [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) to automatically import components and styles.
 
 ```typescript
-interface IDesignSystem extends IDesignSystemParams {
-	/**
-	 * @param {String} src Icon source path (url)
-	 * @param {RequestInit} options
-	 * @returns {Promise<string | undefined>} String SVG if exist
-	 */
-	fetchIcon(src: string, options?: RequestInit): Promise<string | undefined>
-	/**
-	 * Add iconify collection to library 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
-	 * @param {String} name
-	 * @param {IconifyIcon} data
-	 * @returns {Boolean} true on success, false if something is wrong with data
-	 */
-	addIcon(name: string, data: IconifyIcon): boolean
-}
+// vite.config.ts
+import { defineConfig } from 'vite'
+import Components from 'unplugin-vue-components/vite'
+import { VolverResolver } from '@volverjs/ui-vue/resolvers/unplugin'
+
+export default defineConfig({
+  // ...
+  plugins: [
+    // ...
+    Components({
+      resolvers: [
+        VolverResolver({
+          // enable/disable import of style
+          // default: false
+          importStyle: 'css' // or 'scss'
+        })
+      ]
+    })
+  ]
+})
 ```
+
+## Roadmap
+
+The following features are planned for the next releases:
+
+- [ ] `VvAvatar` 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;
+- [ ] Multiple uploads, image crop and file previews with `VvInputFile`;
+- [ ] Carousel and galleries with `VvCarousel` component;
+- [ ] Calendar and date picker with `VvCalendar` component.
+
+## Documentation
+
+To learn more about `@volverjs/ui-vue`, check [its documentation](https://volverjs.github.io/ui-vue).
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)

package/bin/icons.cjs

@@ -0,0 +1,73 @@
+(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, objectFiles = {}, prefix = "iconify") {
+    const files = fileSystem.readdirSync(dirPath);
+    files.forEach(function(file) {
+      if (fileSystem.statSync(dirPath + "/" + file).isDirectory()) {
+        objectFiles = getAllFiles(dirPath + "/" + file, objectFiles, file);
+      } 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) {
+    const objectFiles = getAllFiles(srcPath2);
+    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
+`);
+      });
+    }
+  }
+  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);
+  exports2.createIconifyJsonFiles = createIconifyJsonFiles;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});

package/bin/icons.js

@@ -0,0 +1,75 @@
+import fileSystem from "fs";
+import yargs from "yargs";
+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") {
+  const files = fileSystem.readdirSync(dirPath);
+  files.forEach(function(file) {
+    if (fileSystem.statSync(dirPath + "/" + file).isDirectory()) {
+      objectFiles = getAllFiles(dirPath + "/" + file, objectFiles, file);
+    } 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 = blankIconSet(prefix);
+  for (const file of files) {
+    const content = await fileSystem.promises.readFile(file, {
+      encoding: "utf-8"
+    });
+    const svg = new SVG(content);
+    await cleanupSVG(svg);
+    await parseColors(svg, {
+      defaultColor: "currentColor",
+      callback: (attr, colorStr, color) => {
+        return !color || isEmptyColor(color) ? colorStr : "currentColor";
+      }
+    });
+    await runSVGO(svg);
+    const fileName = file.replace(/^.*[\\/]/, "").split(".")[0].replace(/ /g, "-").replace(/[^a-z0-9-]/gi, "");
+    iconSet.fromSVG(fileName, svg);
+  }
+  const iconifyJson = iconSet.export();
+  try {
+    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) {
+  const objectFiles = getAllFiles(srcPath2);
+  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
+`);
+    });
+  }
+}
+const argv = yargs(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);
+export {
+  createIconifyJsonFiles
+};

package/dist/{DesignSystem.d.ts → Volver.d.ts}

@@ -1,11 +1,7 @@
-import { type IconifyIcon, type IconifyJSON } from '@iconify/vue';
-import type { App } from 'vue';
-declare module 'vue' {
-    interface ComponentCustomProperties {
-        $ds: typeof DesignSystem.prototype;
-    }
-}
-interface IDesignSystemParams {
+import { type IconifyIcon, type IconifyJSON, type PartialIconifyAPIConfig } from '@iconify/vue';
+import type { Plugin } from 'vue';
+export declare const VOLVER_PREFIX = "ds";
+interface IVolverParams {
     /**
      * If true set "fetchOptions" with credentials: 'include'
      */
@@ -19,8 +15,12 @@ interface IDesignSystemParams {
      * This collections will be added during plugin install
      */
     iconsCollections?: IconifyJSON[];
+    /**
+     * Set true inside nuxt
+     */
+    nuxt?: boolean;
 }
-export interface IDesignSystem extends IDesignSystemParams {
+export interface IVolver extends IVolverParams {
     /**
      * @param {String} src Icon source path (url)
      * @param {RequestInit} options
@@ -40,6 +40,13 @@ export interface IDesignSystem extends IDesignSystemParams {
      * @returns {Boolean} true on success, false if something is wrong with data
      */
     addIcon(name: string, data: IconifyIcon): boolean;
+    /**
+     * Add custom config for 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;
     /**
      * Current provider
      */
@@ -49,19 +56,16 @@ export interface IDesignSystem extends IDesignSystemParams {
      */
     iconsCollections: IconifyJSON[];
 }
-export default class DesignSystem implements IDesignSystem {
+export declare class Volver implements IVolver {
     fetchOptions: RequestInit;
     iconsCollections: IconifyJSON[];
     provider: string;
-    constructor({ fetchWithCredentials, fetchOptions, iconsCollections }?: IDesignSystemParams);
-    /**
-     * Vue.use() hook
-     * @param {App} Vue
-     * @param {Object} options
-     */
-    install(app: App): void;
+    nuxt: boolean;
+    constructor({ fetchWithCredentials, fetchOptions, iconsCollections, nuxt, }?: IVolverParams);
     addCollection(collection: IconifyJSON, providerName?: string): boolean;
     addIcon(name: string, data: IconifyIcon): boolean;
+    addAPIProvider(provider: string, customConfig: PartialIconifyAPIConfig): boolean;
     fetchIcon(src: string, options?: RequestInit): Promise<string | undefined>;
 }
-export {};
+declare const VolverPlugin: Plugin;
+export default VolverPlugin;

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

@@ -0,0 +1,165 @@
+import { unref as r, computed as v, inject as $, toRef as k, toRefs as S, defineComponent as j, useAttrs as I, ref as B, openBlock as P, createElementBlock as z, normalizeClass as D, withModifiers as E, createElementVNode as A, renderSlot as C, normalizeProps as b, guardReactiveProps as g, createTextVNode as O, toDisplayString as R } from "vue";
+import { useToggle as M } from "@vueuse/core";
+import { nanoid as Z } from "nanoid";
+function L(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 V(o) {
+  var e, a;
+  if (o)
+    return (a = (e = o.match(
+      /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
+    )) == null ? void 0 : e.join("-")) == null ? void 0 : a.toLowerCase();
+}
+function N(o, e) {
+  const a = { [`${o}`]: !0 };
+  return {
+    bemCssClasses: v(() => Object.keys(e).reduce((t, l) => {
+      const s = r(e[l]) || !1;
+      if (!s)
+        return t;
+      if (l === "modifiers") {
+        const f = Array.isArray(s) ? s : s.split(" ");
+        return {
+          ...t,
+          ...f.reduce(
+            (i, c) => ({
+              ...i,
+              [`${o}--${V(c)}`]: !0
+            }),
+            {}
+          )
+        };
+      } else
+        return {
+          ...t,
+          [`${o}--${V(l)}`]: s
+        };
+    }, a) || {})
+  };
+}
+function T(o) {
+  const e = $(o, void 0), a = v(() => !L(e));
+  function u(t, l, s) {
+    if (e != null && e.value) {
+      const i = r(e.value)[t];
+      return v({
+        get() {
+          return i == null ? void 0 : i.value;
+        },
+        set(c) {
+          i.value = c;
+        }
+      });
+    }
+    const f = k(l, t);
+    return v({
+      get() {
+        return f.value;
+      },
+      set(i) {
+        s && s(`update:${t}`, i);
+      }
+    });
+  }
+  return {
+    group: e,
+    isInGroup: a,
+    getGroupOrLocalRef: u
+  };
+}
+const U = "VV_ACCORDION_GROUP", x = {
+  name: String,
+  title: String,
+  content: String,
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
+  modifiers: [String, Array],
+  disabled: Boolean
+}, q = ["update:modelValue"];
+function F(o, e) {
+  const { group: a, isInGroup: u, getGroupOrLocalRef: t } = T(U), { title: l, content: s } = S(o), f = t("modelValue", o, e), i = t("disabled", o), c = t("collapse", o), n = t("modifiers", o);
+  return {
+    modelValue: f,
+    disabled: i,
+    isInGroup: u,
+    group: a,
+    collapse: c,
+    modifiers: n,
+    title: l,
+    content: s
+  };
+}
+const H = ["id", "open"], J = ["aria-controls", "aria-expanded"], K = ["aria-hidden"], Q = {
+  name: "VvAccordion"
+}, ee = /* @__PURE__ */ j({
+  ...Q,
+  props: x,
+  emits: q,
+  setup(o, { emit: e }) {
+    const a = o, u = I(), t = a.name || (u == null ? void 0 : u.id) || Z(), {
+      modifiers: l,
+      title: s,
+      content: f,
+      disabled: i,
+      collapse: c,
+      modelValue: n,
+      isInGroup: _
+    } = F(a, e), y = B(!1), m = v({
+      get: () => _.value ? c.value && Array.isArray(n.value) ? n.value.includes(t) : n.value === t : n.value === void 0 ? y.value : n.value,
+      set: (d) => {
+        if (_.value) {
+          if (c.value && Array.isArray(n.value)) {
+            if (d) {
+              n.value.push(t);
+              return;
+            }
+            n.value = n.value.filter(
+              (p) => p !== t
+            );
+            return;
+          }
+          n.value = d ? t : null;
+          return;
+        }
+        if (n.value === void 0 && typeof d == "boolean") {
+          y.value = d;
+          return;
+        }
+        n.value = d;
+      }
+    }), { bemCssClasses: h } = N("vv-accordion", {
+      modifiers: l,
+      disabled: i
+    }), G = M(m);
+    return (d, p) => (P(), z("details", {
+      id: r(t),
+      class: D(r(h)),
+      open: r(m),
+      onClick: p[0] || (p[0] = E((W) => r(G)(), ["prevent"]))
+    }, [
+      A("summary", {
+        "aria-controls": r(t),
+        "aria-expanded": r(m),
+        class: "vv-collapse__summary"
+      }, [
+        C(d.$slots, "summary", b(g({ open: r(m) })), () => [
+          O(R(r(s)), 1)
+        ])
+      ], 8, J),
+      A("div", {
+        "aria-hidden": !r(m),
+        class: "vv-collapse__content"
+      }, [
+        C(d.$slots, "details", b(g({ open: r(m) })), () => [
+          O(R(r(f)), 1)
+        ])
+      ], 8, K)
+    ], 10, H));
+  }
+});
+export {
+  ee as default
+};

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

@@ -0,0 +1 @@
+(function(e,m){typeof exports=="object"&&typeof module<"u"?module.exports=m(require("vue"),require("@vueuse/core"),require("nanoid")):typeof define=="function"&&define.amd?define(["vue","@vueuse/core","nanoid"],m):(e=typeof globalThis<"u"?globalThis:e||self,e.VvAccordion=m(e.vue,e.core,e.nanoid))})(this,function(e,m,g){"use strict";function b(r){return(n=>n==null||n===""||Array.isArray(n)&&n.length===0||!(n instanceof Date)&&typeof n=="object"&&Object.keys(n).length===0)(e.unref(r))}function _(r){var n,a;if(r)return(a=(n=r.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g))==null?void 0:n.join("-"))==null?void 0:a.toLowerCase()}function V(r,n){const a={[`${r}`]:!0};return{bemCssClasses:e.computed(()=>Object.keys(n).reduce((t,c)=>{const s=e.unref(n[c])||!1;if(!s)return t;if(c==="modifiers"){const f=Array.isArray(s)?s:s.split(" ");return{...t,...f.reduce((i,l)=>({...i,[`${r}--${_(l)}`]:!0}),{})}}else return{...t,[`${r}--${_(c)}`]:s}},a)||{})}}function h(r){const n=e.inject(r,void 0),a=e.computed(()=>!b(n));function d(t,c,s){if(n!=null&&n.value){const i=e.unref(n.value)[t];return e.computed({get(){return i==null?void 0:i.value},set(l){i.value=l}})}const f=e.toRef(c,t);return e.computed({get(){return f.value},set(i){s&&s(`update:${t}`,i)}})}return{group:n,isInGroup:a,getGroupOrLocalRef:d}}const O="VV_ACCORDION_GROUP",R={name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},modifiers:[String,Array],disabled:Boolean},G=["update:modelValue"];function S(r,n){const{group:a,isInGroup:d,getGroupOrLocalRef:t}=h(O),{title:c,content:s}=e.toRefs(r),f=t("modelValue",r,n),i=t("disabled",r),l=t("collapse",r),o=t("modifiers",r);return{modelValue:f,disabled:i,isInGroup:d,group:a,collapse:l,modifiers:o,title:c,content:s}}const $=["id","open"],j=["aria-controls","aria-expanded"],k=["aria-hidden"],P={name:"VvAccordion"};return e.defineComponent({...P,props:R,emits:G,setup(r,{emit:n}){const a=r,d=e.useAttrs(),t=a.name||(d==null?void 0:d.id)||g.nanoid(),{modifiers:c,title:s,content:f,disabled:i,collapse:l,modelValue:o,isInGroup:A}=S(a,n),C=e.ref(!1),p=e.computed({get:()=>A.value?l.value&&Array.isArray(o.value)?o.value.includes(t):o.value===t:o.value===void 0?C.value:o.value,set:u=>{if(A.value){if(l.value&&Array.isArray(o.value)){if(u){o.value.push(t);return}o.value=o.value.filter(y=>y!==t);return}o.value=u?t:null;return}if(o.value===void 0&&typeof u=="boolean"){C.value=u;return}o.value=u}}),{bemCssClasses:I}=V("vv-accordion",{modifiers:c,disabled:i}),z=m.useToggle(p);return(u,y)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(t),class:e.normalizeClass(e.unref(I)),open:e.unref(p),onClick:y[0]||(y[0]=e.withModifiers(D=>e.unref(z)(),["prevent"]))},[e.createElementVNode("summary",{"aria-controls":e.unref(t),"aria-expanded":e.unref(p),class:"vv-collapse__summary"},[e.renderSlot(u.$slots,"summary",e.normalizeProps(e.guardReactiveProps({open:e.unref(p)})),()=>[e.createTextVNode(e.toDisplayString(e.unref(s)),1)])],8,j),e.createElementVNode("div",{"aria-hidden":!e.unref(p),class:"vv-collapse__content"},[e.renderSlot(u.$slots,"details",e.normalizeProps(e.guardReactiveProps({open:e.unref(p)})),()=>[e.createTextVNode(e.toDisplayString(e.unref(f)),1)])],8,k)],10,$))}})});