@volverjs/ui-vue 0.0.1-beta.6 → 0.0.1

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,12 +22,105 @@
 
 ## Install
 
+`@volverjs/ui-vue` is closely linked to [`@volverjs/style`](https://volverjs.github.io/style/) and is neeeded to style components.
+
+```bash
+# pnpm
+pnpm add @volverjs/style @volverjs/ui-vue
+
+# yarn
+yarn add @volverjs/style @volverjs/ui-vue
+
+# npm
+npm install @volverjs/style @volverjs/ui-vue --save
 ```
-$ npm i @volverjs/ui-vue
+
+<br />
+
+## Usage
+
+Install the plugin in your `main.ts` file.
+
+```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
+})
 ```
 
-## Basic usage
+Than you can import components and use them in your templates.
 
 ```html
-<vv-text weight="thin">Size thin</vv-text>
+<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>
 ```
+
+## Icons Collections
+
+`@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).
+
+## 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
+// 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'
+        })
+      ]
+    })
+  ]
+})
+```
+
+## 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,$))}})});

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

@@ -1,104 +1,39 @@
-declare const _default: {
-    new (...args: any[]): {
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{
-            open: boolean;
-            iconRight: boolean;
-            bordered: boolean;
-            disabled: boolean;
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
-            title: StringConstructor;
-            content: StringConstructor;
-            open: BooleanConstructor;
-            iconRight: BooleanConstructor;
-            bordered: BooleanConstructor;
-            modifiers: (StringConstructor | ArrayConstructor)[];
-            disabled: BooleanConstructor;
-        }>> & {
-            [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "open" | "iconRight" | "bordered" | "disabled">;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot | undefined;
-        }>;
-        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $emit: (event: string, ...args: any[]) => void;
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            title: StringConstructor;
-            content: StringConstructor;
-            open: BooleanConstructor;
-            iconRight: BooleanConstructor;
-            bordered: BooleanConstructor;
-            modifiers: (StringConstructor | ArrayConstructor)[];
-            disabled: BooleanConstructor;
-        }>> & {
-            [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, {
-            open: boolean;
-            iconRight: boolean;
-            bordered: boolean;
-            disabled: boolean;
-        }, {}, string> & {
-            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
-            created?: ((() => void) | (() => void)[]) | undefined;
-            beforeMount?: ((() => void) | (() => void)[]) | undefined;
-            mounted?: ((() => void) | (() => void)[]) | undefined;
-            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
-            updated?: ((() => void) | (() => void)[]) | undefined;
-            activated?: ((() => void) | (() => void)[]) | undefined;
-            deactivated?: ((() => void) | (() => void)[]) | undefined;
-            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
-            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
-            destroyed?: ((() => void) | (() => void)[]) | undefined;
-            unmounted?: ((() => void) | (() => void)[]) | undefined;
-            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & Readonly<import("vue").ExtractPropTypes<{
-        title: StringConstructor;
-        content: StringConstructor;
-        open: BooleanConstructor;
-        iconRight: BooleanConstructor;
-        bordered: BooleanConstructor;
-        modifiers: (StringConstructor | ArrayConstructor)[];
-        disabled: BooleanConstructor;
-    }>> & {
-        [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
-    __isFragment?: undefined;
-    __isTeleport?: undefined;
-    __isSuspense?: undefined;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    name: StringConstructor;
     title: StringConstructor;
     content: StringConstructor;
-    open: BooleanConstructor;
-    iconRight: BooleanConstructor;
-    bordered: BooleanConstructor;
-    modifiers: (StringConstructor | ArrayConstructor)[];
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modifiers: (ArrayConstructor | StringConstructor)[];
+    disabled: 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;
+    content: StringConstructor;
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modifiers: (ArrayConstructor | StringConstructor)[];
     disabled: BooleanConstructor;
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, {
-    open: boolean;
-    iconRight: boolean;
-    bordered: boolean;
+}, {
+    modelValue: boolean;
     disabled: boolean;
-}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-    $slots: {
-        header: (_: {}) => any;
-        details: (_: {}) => any;
-    };
-});
+}>, {
+    summary: (_: {
+        open: boolean;
+    }) => any;
+    details: (_: {
+        open: boolean;
+    }) => any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};