@volverjs/ui-vue 0.0.13-beta.8 → 0.0.13-beta.9

package/README.md

@@ -328,12 +328,91 @@ The following features are planned for the next releases:
 - [x] (v0.0.6) Alerts, notifications and toasts with `VvAlert` and `VvAlertGroup` component;
 - [x] (v0.0.10) Multiple uploads with `VvInputFile`;
 - [x] (v0.0.10) `useBlurhash` composable;
+- [x] (v0.0.13) Generative UI with [json-render](https://json-render.dev) catalog & registry;
 - [ ] Image crop and file previews;
 - [ ] Loaders with `VvLoader` and `VvSkeleton`;
 - [ ] `VvTable` component with sort, filters, pagination and cell editing;
 - [ ] Carousel and galleries with `VvCarousel` component;
 - [ ] Calendar and date picker with `VvCalendar` component.
 
+## Generative UI (json-render)
+
+`@volverjs/ui-vue` ships with a built-in [json-render](https://json-render.dev) catalog and registry, enabling LLMs to generate UIs using Volver components.
+
+### Quick start
+
+```typescript
+import { catalog, registry } from '@volverjs/ui-vue/json-render'
+
+// Generate a system prompt for your AI model
+const systemPrompt = catalog.prompt()
+```
+
+The `catalog` declares **26 components** (layout, data display, actions, navigation, forms) with Zod-validated props and AI-friendly descriptions. The `registry` maps each catalog type to the real Vue component.
+
+### Rendering AI-generated specs
+
+```vue
+<script setup lang="ts">
+import {
+    Renderer,
+    StateProvider,
+    VisibilityProvider,
+} from '@json-render/vue'
+import { registry } from '@volverjs/ui-vue/json-render'
+
+const spec = ref(null)
+</script>
+
+<template>
+    <StateProvider :initial-state="{}">
+        <VisibilityProvider>
+            <Renderer :spec="spec" :registry="registry" />
+        </VisibilityProvider>
+    </StateProvider>
+</template>
+```
+
+### Custom catalog (subset of components)
+
+You can build a custom catalog with only the components you need:
+
+```typescript
+import { defineCatalog } from '@json-render/core'
+import { defineRegistry, schema } from '@json-render/vue'
+import {
+    volverComponentDefinitions,
+    volverComponents,
+} from '@volverjs/ui-vue/json-render'
+
+// Pick only the components you need
+const myCatalog = defineCatalog(schema, {
+    components: {
+        Button: volverComponentDefinitions.Button,
+        Card: volverComponentDefinitions.Card,
+        InputText: volverComponentDefinitions.InputText,
+    },
+    actions: {},
+})
+
+// Create a matching registry
+const { registry } = defineRegistry(myCatalog, {
+    components: {
+        Button: volverComponents.Button,
+        Card: volverComponents.Card,
+        InputText: volverComponents.InputText,
+    },
+})
+```
+
+### Peer dependencies
+
+To use the json-render integration, install the required peer dependencies:
+
+```bash
+pnpm add @json-render/core @json-render/vue zod
+```
+
 ## Documentation
 
 To learn more about `@volverjs/ui-vue`, check [its documentation](https://volverjs.github.io/ui-vue).

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

@@ -1,4 +1,4 @@
-import { computed as v, createElementBlock as W, createElementVNode as j, createTextVNode as x, defineComponent as z, guardReactiveProps as T, inject as H, normalizeClass as Q, normalizeProps as k, onBeforeUnmount as X, openBlock as Z, ref as ee, renderSlot as w, toDisplayString as L, toRef as te, toRefs as re, unref as d, useAttrs as oe, useId as ae, watch as E, withModifiers as ne } from "vue";
+import { computed as c, createElementBlock as H, createElementVNode as I, createTextVNode as w, defineComponent as J, guardReactiveProps as L, inject as W, normalizeClass as Q, normalizeProps as R, onBeforeUnmount as X, openBlock as Z, ref as ee, renderSlot as V, toDisplayString as $, toRef as te, toRefs as re, unref as d, useAttrs as ae, useId as oe, watch as _, withModifiers as ne } from "vue";
 import { useVModel as le } from "@vueuse/core";
 var ie = {
   showPassword: "eye-on",
@@ -13,7 +13,7 @@ var ie = {
   download: "download"
 }, ue = /* @__PURE__ */ (function(e) {
   return e.simple = "simple", e.normal = "normal", e.detailed = "detailed", e;
-})({}), Ve = { prefix: ue.normal }, V = /* @__PURE__ */ (function(e) {
+})({}), Ge = { prefix: ue.normal }, G = /* @__PURE__ */ (function(e) {
   return e.local = "local", e.session = "session", e;
 })({}), de = /* @__PURE__ */ (function(e) {
   return e.absolute = "absolute", e.fixed = "fixed", e;
@@ -21,15 +21,13 @@ var ie = {
   return e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e;
 })({}), se = /* @__PURE__ */ (function(e) {
   return e.topStart = "top-start", e.topEnd = "top-end", e.bottomStart = "bottom-start", e.bottomEnd = "bottom-end", e.leftStart = "left-start", e.leftEnd = "left-end", e.rightStart = "right-start", e.rightEnd = "right-end", e;
-})({}), K = /* @__PURE__ */ (function(e) {
+})({}), M = /* @__PURE__ */ (function(e) {
   return e.before = "before", e.after = "after", e;
-})({}), Y = /* @__PURE__ */ (function(e) {
+})({}), F = /* @__PURE__ */ (function(e) {
   return e.button = "button", e.submit = "submit", e.reset = "reset", e;
 })({}), fe = /* @__PURE__ */ (function(e) {
   return e.nuxtLink = "nuxt-link", e.routerLink = "router-link", e.a = "a", e.button = "button", e;
-})({});
-var pe = /* @__PURE__ */ Symbol.for("accordionGroup");
-var ve = {
+})({}), pe = /* @__PURE__ */ Symbol.for("accordionGroup"), ce = {
   to: { type: [String, Object] },
   href: String,
   target: String,
@@ -37,7 +35,7 @@ var ve = {
     type: String,
     default: "noopener noreferrer"
   }
-}, I = {
+}, A = {
   valid: {
     type: Boolean,
     default: !1
@@ -55,7 +53,7 @@ var ve = {
     type: [String, Array],
     default: void 0
   }
-}, h = {
+}, j = {
   loading: {
     type: Boolean,
     default: !1
@@ -67,10 +65,10 @@ var ve = {
 }, y = { disabled: {
   type: Boolean,
   default: !1
-} }, $ = { required: {
+} }, K = { required: {
   type: Boolean,
   default: !1
-} }, ce = { active: {
+} }, ve = { active: {
   type: Boolean,
   default: !1
 } }, ye = { current: {
@@ -89,22 +87,22 @@ var ve = {
     type: String,
     default: "Clear"
   }
-}, be = { pressed: {
+}, ge = { pressed: {
   type: Boolean,
   default: !1
-} }, b = { label: {
+} }, g = { label: {
   type: [String, Number],
   default: void 0
-} }, B = { readonly: {
+} }, x = { readonly: {
   type: Boolean,
   default: !1
-} }, g = { modifiers: {
+} }, b = { modifiers: {
   type: [String, Array],
   default: void 0
-} }, A = { hintLabel: {
+} }, N = { hintLabel: {
   type: String,
   default: ""
-} }, ge = {
+} }, be = {
   options: {
     type: Array,
     default: () => []
@@ -133,23 +131,23 @@ var ve = {
 } }, Se = { debounce: {
   type: [Number, String],
   default: void 0
-} }, _e = {
+} }, Pe = {
   icon: {
     type: [String, Object],
     default: void 0
   },
   iconPosition: {
     type: String,
-    default: K.before,
-    validation: (e) => Object.values(K).includes(e)
+    default: M.before,
+    validation: (e) => Object.values(M).includes(e)
   }
-}, J = { tabindex: {
+}, q = { tabindex: {
   type: [String, Number],
   default: 0
-} }, Oe = { floating: {
+} }, he = { floating: {
   type: Boolean,
   default: !1
-} }, Pe = { id: [String, Number] }, Ke = {
+} }, Be = { id: [String, Number] }, Me = {
   placement: {
     type: String,
     default: D.bottom,
@@ -204,35 +202,35 @@ var ve = {
     type: Boolean,
     default: !1
   }
-}, M = {
-  ...Pe,
+}, z = {
+  ...Be,
   name: {
     type: String,
     required: !0
   }
-}, Ne = { autofocus: {
+}, Oe = { autofocus: {
   type: Boolean,
   default: !1
-} }, Ee = { autocomplete: {
+} }, _e = { autocomplete: {
   type: String,
   default: "off"
-} }, Ye = {
-  ...M,
-  ...Ne,
-  ...Ee,
-  ...J,
+} }, Fe = {
+  ...z,
+  ...Oe,
+  ..._e,
+  ...q,
   ...y,
-  ...B,
-  ...I,
-  ...C,
+  ...x,
   ...A,
-  ...h,
-  ...g,
+  ...C,
+  ...N,
+  ...j,
+  ...b,
   ...me,
   ...Se,
-  ..._e,
-  ...Oe,
-  ...b,
+  ...Pe,
+  ...he,
+  ...g,
   minlength: {
     type: [String, Number],
     default: void 0
@@ -245,18 +243,18 @@ var ve = {
     type: String,
     default: void 0
   },
-  ...$
-}, $e = {
-  ...M,
-  ...J,
-  ...I,
-  ...C,
+  ...K
+}, Ke = {
+  ...z,
+  ...q,
   ...A,
+  ...C,
+  ...N,
   ...y,
-  ...B,
-  ...g,
+  ...x,
   ...b,
-  ...h,
+  ...g,
+  ...j,
   value: {
     type: [
       String,
@@ -274,17 +272,17 @@ var ve = {
     ],
     default: void 0
   }
-}, Je = {
-  ...I,
-  ...C,
-  ...ge,
+}, qe = {
   ...A,
+  ...C,
+  ...be,
+  ...N,
   ...y,
-  ...B,
-  ...g,
+  ...x,
   ...b,
-  ...h,
-  ...$,
+  ...g,
+  ...j,
+  ...K,
   modelValue: {
     type: [
       String,
@@ -303,17 +301,17 @@ var ve = {
     type: Boolean,
     default: !1
   }
-}, Me = {
+}, ze = {
   ...y,
-  ...b,
-  ...be,
-  ...ce,
-  ...ye,
+  ...g,
+  ...ge,
   ...ve,
+  ...ye,
+  ...ce,
   type: {
     type: String,
-    default: Y.button,
-    validator: (e) => Object.values(Y).includes(e)
+    default: F.button,
+    validator: (e) => Object.values(F).includes(e)
   },
   ariaLabel: {
     type: String,
@@ -323,33 +321,33 @@ var ve = {
     type: String,
     default: fe.button
   }
-}, Ue = {
+}, Ye = {
   storageType: {
     type: String,
-    default: V.local,
-    validator: (e) => Object.values(V).includes(e)
+    default: G.local,
+    validator: (e) => Object.values(G).includes(e)
   },
   storageKey: String
 };
-function Ie(e) {
-  const n = H(e, void 0), s = v(() => n !== void 0);
-  function i(o, a, f) {
-    const r = n?.[o];
-    if (r) return v({
+function Ae(e) {
+  const n = W(e, void 0), s = c(() => n !== void 0);
+  function i(a, o, f) {
+    const r = n?.[a];
+    if (r) return c({
       get() {
         return r.value;
       },
-      set(c) {
-        r.value = c;
+      set(v) {
+        r.value = v;
       }
     });
-    const m = te(a, o);
-    return v({
+    const m = te(o, a);
+    return c({
       get() {
         return m.value;
       },
-      set(c) {
-        f && f(`update:${o}`, c);
+      set(v) {
+        f && f(`update:${a}`, v);
       }
     });
   }
@@ -360,7 +358,7 @@ function Ie(e) {
   };
 }
 var Ce = {
-  ...g,
+  ...b,
   name: String,
   title: String,
   content: String,
@@ -370,47 +368,47 @@ var Ce = {
   },
   disabled: Boolean,
   not: Boolean
-}, he = ["update:modelValue"];
-function Be(e) {
-  const { group: n, isInGroup: s } = Ie(pe), i = v(() => !!(e.disabled || n?.disabled.value));
+}, je = ["update:modelValue"];
+function xe(e) {
+  const { group: n, isInGroup: s } = Ae(pe), i = c(() => !!(e.disabled || n?.disabled.value));
   return {
     isInGroup: s,
     group: n,
-    modifiers: v(() => {
-      let o = e.modifiers, a = n?.modifiers.value;
+    modifiers: c(() => {
+      let a = e.modifiers, o = n?.modifiers.value;
       const f = /* @__PURE__ */ new Set();
-      return o && (Array.isArray(o) || (o = o.split(" ")), o.forEach((r) => f.add(r))), a && (Array.isArray(a) || (a = a.split(" ")), a.forEach((r) => f.add(r))), [...f];
+      return a && (Array.isArray(a) || (a = a.split(" ")), a.forEach((r) => f.add(r))), o && (Array.isArray(o) || (o = o.split(" ")), o.forEach((r) => f.add(r))), [...f];
     }),
     disabled: i,
     bus: n?.bus
   };
 }
-function Ae(e, n, s) {
-  return v(() => {
-    const i = { [e]: !0 }, o = typeof n?.value == "string" ? n.value.split(" ") : n?.value;
-    return o && Array.isArray(o) && o.forEach((a) => {
-      a && (i[`${e}--${a}`] = !0);
-    }), s && Object.keys(s.value).forEach((a) => {
-      i[`${e}--${a}`] = d(s.value[a]);
+function Ne(e, n, s) {
+  return c(() => {
+    const i = { [e]: !0 }, a = typeof n?.value == "string" ? n.value.split(" ") : n?.value;
+    return a && Array.isArray(a) && a.forEach((o) => {
+      o && (i[`${e}--${o}`] = !0);
+    }), s && Object.keys(s.value).forEach((o) => {
+      i[`${e}--${o}`] = d(s.value[o]);
     }), i;
   });
 }
-var Re = ["id", "open"], Ge = ["aria-controls", "aria-expanded"], je = ["aria-hidden"], xe = { name: "VvAccordion" }, Te = /* @__PURE__ */ z({
-  ...xe,
+var Ee = ["id", "open"], ke = ["aria-controls", "aria-expanded"], Ie = ["aria-hidden"], we = { name: "VvAccordion" }, Le = /* @__PURE__ */ J({
+  ...we,
   props: Ce,
-  emits: he,
+  emits: je,
   setup(e, { expose: n, emit: s }) {
-    const i = e, o = s, a = oe(), f = le(i, "modelValue", o), r = v(() => i.name || a?.id || ae()), { title: m, content: c, not: R } = re(i), { isInGroup: U, modifiers: F, disabled: G, bus: u } = Be(i), l = ee(!1);
-    E(f, (t) => {
-      typeof t == "boolean" && (l.value = R.value ? !t : t);
-    }, { immediate: !0 }), E(l, (t) => {
-      f.value = R.value ? !t : t;
+    const i = e, a = s, o = ae(), f = le(i, "modelValue", a), r = c(() => i.name || o?.id || oe()), { title: m, content: v, not: E } = re(i), { isInGroup: Y, modifiers: T, disabled: k, bus: u } = xe(i), l = ee(!1);
+    _(f, (t) => {
+      typeof t == "boolean" && (l.value = E.value ? !t : t);
+    }, { immediate: !0 }), _(l, (t) => {
+      f.value = E.value ? !t : t;
     }), u?.on("toggle", ({ name: t, value: p }) => {
       t === r.value && (l.value = p);
     });
     function S() {
-      if (!G.value) {
-        if (U.value) {
+      if (!k.value) {
+        if (Y.value) {
           u?.emit("toggle", {
             name: r.value,
             value: !l.value
@@ -420,25 +418,25 @@ var Re = ["id", "open"], Ge = ["aria-controls", "aria-expanded"], je = ["aria-hi
         l.value = !l.value;
       }
     }
-    E(r, (t, p) => {
+    _(r, (t, p) => {
       u && (p && p !== t && u.emit("unregister", { name: p }), u.emit("register", { name: t }));
     }, { immediate: !0 }), X(() => {
       u && u.emit("unregister", { name: r.value });
     });
-    function _() {
+    function P() {
       l.value || S();
     }
-    function O() {
+    function h() {
       l.value && S();
     }
-    function P(t) {
+    function B(t) {
       if (!u) {
         console.warn(`[VvAccordion]: You are trying to expand accordion group of "${r.value}" but it is not in a group`);
         return;
       }
       u.emit("expand", { name: t });
     }
-    function N(t) {
+    function O(t) {
       if (!u) {
         console.warn(`[VvAccordion]: You are trying to collapse accordion group of "${r.value}" but it is not in a group`);
         return;
@@ -447,39 +445,39 @@ var Re = ["id", "open"], Ge = ["aria-controls", "aria-expanded"], je = ["aria-hi
     }
     n({
       isExpanded: l,
-      expand: _,
-      collapse: O,
-      groupExpand: P,
-      groupCollapse: N
+      expand: P,
+      collapse: h,
+      groupExpand: B,
+      groupCollapse: O
     });
-    const q = Ae("vv-accordion", F, v(() => ({ disabled: G.value })));
-    return (t, p) => (Z(), W("details", {
+    const U = Ne("vv-accordion", T, c(() => ({ disabled: k.value })));
+    return (t, p) => (Z(), H("details", {
       id: d(r),
-      class: Q(d(q)),
+      class: Q(d(U)),
       open: d(l)
-    }, [j("summary", {
+    }, [I("summary", {
       "aria-controls": d(r),
       "aria-expanded": d(l),
       class: "vv-accordion__summary",
-      onClick: p[0] || (p[0] = ne((ke) => S(), ["prevent"]))
-    }, [w(t.$slots, "summary", k(T({
+      onClick: p[0] || (p[0] = ne((Re) => S(), ["prevent"]))
+    }, [V(t.$slots, "summary", R(L({
       isExpanded: d(l),
-      expand: _,
-      collapse: O,
-      groupExpand: P,
-      groupCollapse: N
-    })), () => [x(L(d(m)), 1)])], 8, Ge), j("div", {
+      expand: P,
+      collapse: h,
+      groupExpand: B,
+      groupCollapse: O
+    })), () => [w($(d(m)), 1)])], 8, ke), I("div", {
       "aria-hidden": !d(l),
       class: "vv-accordion__content"
-    }, [w(t.$slots, "default", k(T({
+    }, [V(t.$slots, "default", R(L({
       isExpanded: d(l),
-      expand: _,
-      collapse: O,
-      groupExpand: P,
-      groupCollapse: N
-    })), () => [x(L(d(c)), 1)])], 8, je)], 10, Re));
+      expand: P,
+      collapse: h,
+      groupExpand: B,
+      groupCollapse: O
+    })), () => [w($(d(v)), 1)])], 8, Ie)], 10, Ee));
   }
-}), Fe = Te;
+}), Te = Le;
 export {
-  Fe as default
+  Te as default
 };

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

@@ -1 +1 @@
-(function(t,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["vue","@vueuse/core"],c):(t=typeof globalThis<"u"?globalThis:t||self,t.VvAccordion=c(t.Vue,t.VueuseCore))})(this,function(t,c){var D={showPassword:"eye-on",hidePassword:"eye-off",showDatePicker:"calendar",showTimePicker:"time",showColorPicker:"color",clear:"close",add:"add",remove:"trash",edit:"edit",download:"download"},L=(function(e){return e.simple="simple",e.normal="normal",e.detailed="detailed",e})({}),me={prefix:L.normal},A=(function(e){return e.local="local",e.session="session",e})({}),K=(function(e){return e.absolute="absolute",e.fixed="fixed",e})({}),R=(function(e){return e.left="left",e.right="right",e.top="top",e.bottom="bottom",e})({}),Y=(function(e){return e.topStart="top-start",e.topEnd="top-end",e.bottomStart="bottom-start",e.bottomEnd="bottom-end",e.leftStart="left-start",e.leftEnd="left-end",e.rightStart="right-start",e.rightEnd="right-end",e})({}),x=(function(e){return e.before="before",e.after="after",e})({}),T=(function(e){return e.button="button",e.submit="submit",e.reset="reset",e})({}),$=(function(e){return e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e})({}),be=Symbol.for("volver"),ge=Symbol.for("buttonGroup"),Se=Symbol.for("radioGroup"),_e=Symbol.for("checkGroup"),J=Symbol.for("accordionGroup"),Oe=Symbol.for("dropdownTrigger"),Pe=Symbol.for("dropdownItem"),Ne=Symbol.for("dropdownAction"),Ee=Symbol.for("alertGroup"),M={to:{type:[String,Object]},href:String,target:String,rel:{type:String,default:"noopener noreferrer"}},g={valid:{type:Boolean,default:!1},validLabel:{type:[String,Array],default:void 0}},S={invalid:{type:Boolean,default:!1},invalidLabel:{type:[String,Array],default:void 0}},_={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},y={disabled:{type:Boolean,default:!1}},V={required:{type:Boolean,default:!1}},U={active:{type:Boolean,default:!1}},q={current:{type:Boolean,default:!1}},he={showClearAction:{type:Boolean,default:!1},iconClear:{type:[String,Object],default:D.clear},labelClear:{type:String,default:"Clear"}},F={pressed:{type:Boolean,default:!1}},m={label:{type:[String,Number],default:void 0}},O={readonly:{type:Boolean,default:!1}},b={modifiers:{type:[String,Array],default:void 0}},P={hintLabel:{type:String,default:""}},z={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}},W={count:{type:[Boolean,String],default:!1,validator:e=>[!0,!1,"limit","countdown"].includes(e)}},H={debounce:{type:[Number,String],default:void 0}},Q={icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:x.before,validation:e=>Object.values(x).includes(e)}},j={tabindex:{type:[String,Number],default:0}},X={floating:{type:Boolean,default:!1}},Z={id:[String,Number]},Ie={placement:{type:String,default:R.bottom,validator:e=>Object.values(R).includes(e)||Object.values(Y).includes(e)},strategy:{type:String,default:void 0,validator:e=>Object.values(K).includes(e)},transitionName:{type:String,default:void 0},offset:{type:[Number,String,Object],default:0},shift:{type:[Boolean,Object],default:!1},flip:{type:[Boolean,Object],default:!0},size:{type:[Boolean,Object],default:()=>({padding:10})},autoPlacement:{type:[Boolean,Object],default:!1},arrow:{type:Boolean,default:!1},keepOpen:{type:Boolean,default:!1},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean,default:!1}},G={...Z,name:{type:String,required:!0}},ee={autofocus:{type:Boolean,default:!1}},te={autocomplete:{type:String,default:"off"}},Ce={...G,...ee,...te,...j,...y,...O,...g,...S,...P,..._,...b,...W,...H,...Q,...X,...m,minlength:{type:[String,Number],default:void 0},maxlength:{type:[String,Number],default:void 0},placeholder:{type:String,default:void 0},...V},Be={...G,...j,...g,...S,...P,...y,...O,...b,...m,..._,value:{type:[String,Number,Boolean],default:void 0},modelValue:{type:[Object,Number,Boolean,String],default:void 0}},Ae={...g,...S,...z,...P,...y,...O,...b,...m,..._,...V,modelValue:{type:[String,Array,Boolean,Number,Symbol],default:void 0},name:{type:String,required:!0},vertical:{type:Boolean,default:!1}},Re={...y,...m,...F,...U,...q,...M,type:{type:String,default:T.button,validator:e=>Object.values(T).includes(e)},ariaLabel:{type:String,default:void 0},defaultTag:{type:String,default:$.button}},xe={storageType:{type:String,default:A.local,validator:e=>Object.values(A).includes(e)},storageKey:String};function re(e){const i=(0,t.inject)(e,void 0),s=(0,t.computed)(()=>i!==void 0);function d(a,n,f){const o=i?.[a];if(o)return(0,t.computed)({get(){return o.value},set(v){o.value=v}});const N=(0,t.toRef)(n,a);return(0,t.computed)({get(){return N.value},set(v){f&&f(`update:${a}`,v)}})}return{group:i,isInGroup:s,getGroupOrLocalRef:d}}var oe={...b,name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},disabled:Boolean,not:Boolean},ae=["update:modelValue"];function ne(e){const{group:i,isInGroup:s}=re(J),d=(0,t.computed)(()=>!!(e.disabled||i?.disabled.value));return{isInGroup:s,group:i,modifiers:(0,t.computed)(()=>{let a=e.modifiers,n=i?.modifiers.value;const f=new Set;return a&&(Array.isArray(a)||(a=a.split(" ")),a.forEach(o=>f.add(o))),n&&(Array.isArray(n)||(n=n.split(" ")),n.forEach(o=>f.add(o))),[...f]}),disabled:d,bus:i?.bus}}function ie(e,i,s){return(0,t.computed)(()=>{const d={[e]:!0},a=typeof i?.value=="string"?i.value.split(" "):i?.value;return a&&Array.isArray(a)&&a.forEach(n=>{n&&(d[`${e}--${n}`]=!0)}),s&&Object.keys(s.value).forEach(n=>{d[`${e}--${n}`]=(0,t.unref)(s.value[n])}),d})}var le=["id","open"],de=["aria-controls","aria-expanded"],ue=["aria-hidden"],se={name:"VvAccordion"},fe=(0,t.defineComponent)({...se,props:oe,emits:ae,setup(e,{expose:i,emit:s}){const d=e,a=s,n=(0,t.useAttrs)(),f=(0,c.useVModel)(d,"modelValue",a),o=(0,t.computed)(()=>d.name||n?.id||(0,t.useId)()),{title:N,content:v,not:w}=(0,t.toRefs)(d),{isInGroup:ce,modifiers:ve,disabled:k,bus:u}=ne(d),l=(0,t.ref)(!1);(0,t.watch)(f,r=>{typeof r=="boolean"&&(l.value=w.value?!r:r)},{immediate:!0}),(0,t.watch)(l,r=>{f.value=w.value?!r:r}),u?.on("toggle",({name:r,value:p})=>{r===o.value&&(l.value=p)});function E(){if(!k.value){if(ce.value){u?.emit("toggle",{name:o.value,value:!l.value});return}l.value=!l.value}}(0,t.watch)(o,(r,p)=>{u&&(p&&p!==r&&u.emit("unregister",{name:p}),u.emit("register",{name:r}))},{immediate:!0}),(0,t.onBeforeUnmount)(()=>{u&&u.emit("unregister",{name:o.value})});function h(){l.value||E()}function I(){l.value&&E()}function C(r){if(!u){console.warn(`[VvAccordion]: You are trying to expand accordion group of "${o.value}" but it is not in a group`);return}u.emit("expand",{name:r})}function B(r){if(!u){console.warn(`[VvAccordion]: You are trying to collapse accordion group of "${o.value}" but it is not in a group`);return}u?.emit("collapse",{name:r})}i({isExpanded:l,expand:h,collapse:I,groupExpand:C,groupCollapse:B});const ye=ie("vv-accordion",ve,(0,t.computed)(()=>({disabled:k.value})));return(r,p)=>((0,t.openBlock)(),(0,t.createElementBlock)("details",{id:(0,t.unref)(o),class:(0,t.normalizeClass)((0,t.unref)(ye)),open:(0,t.unref)(l)},[(0,t.createElementVNode)("summary",{"aria-controls":(0,t.unref)(o),"aria-expanded":(0,t.unref)(l),class:"vv-accordion__summary",onClick:p[0]||(p[0]=(0,t.withModifiers)(Te=>E(),["prevent"]))},[(0,t.renderSlot)(r.$slots,"summary",(0,t.normalizeProps)((0,t.guardReactiveProps)({isExpanded:(0,t.unref)(l),expand:h,collapse:I,groupExpand:C,groupCollapse:B})),()=>[(0,t.createTextVNode)((0,t.toDisplayString)((0,t.unref)(N)),1)])],8,de),(0,t.createElementVNode)("div",{"aria-hidden":!(0,t.unref)(l),class:"vv-accordion__content"},[(0,t.renderSlot)(r.$slots,"default",(0,t.normalizeProps)((0,t.guardReactiveProps)({isExpanded:(0,t.unref)(l),expand:h,collapse:I,groupExpand:C,groupCollapse:B})),()=>[(0,t.createTextVNode)((0,t.toDisplayString)((0,t.unref)(v)),1)])],8,ue)],10,le))}}),pe=fe;return pe});
+(function(t,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["vue","@vueuse/core"],c):(t=typeof globalThis<"u"?globalThis:t||self,t.VvAccordion=c(t.Vue,t.VueuseCore))})(this,function(t,c){var G={showPassword:"eye-on",hidePassword:"eye-off",showDatePicker:"calendar",showTimePicker:"time",showColorPicker:"color",clear:"close",add:"add",remove:"trash",edit:"edit",download:"download"},D=(function(e){return e.simple="simple",e.normal="normal",e.detailed="detailed",e})({}),ge={prefix:D.normal},j=(function(e){return e.local="local",e.session="session",e})({}),q=(function(e){return e.absolute="absolute",e.fixed="fixed",e})({}),E=(function(e){return e.left="left",e.right="right",e.top="top",e.bottom="bottom",e})({}),M=(function(e){return e.topStart="top-start",e.topEnd="top-end",e.bottomStart="bottom-start",e.bottomEnd="bottom-end",e.leftStart="left-start",e.leftEnd="left-end",e.rightStart="right-start",e.rightEnd="right-end",e})({}),V=(function(e){return e.before="before",e.after="after",e})({}),k=(function(e){return e.button="button",e.submit="submit",e.reset="reset",e})({}),F=(function(e){return e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e})({}),K=Symbol.for("accordionGroup"),T={to:{type:[String,Object]},href:String,target:String,rel:{type:String,default:"noopener noreferrer"}},b={valid:{type:Boolean,default:!1},validLabel:{type:[String,Array],default:void 0}},S={invalid:{type:Boolean,default:!1},invalidLabel:{type:[String,Array],default:void 0}},P={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},y={disabled:{type:Boolean,default:!1}},w={required:{type:Boolean,default:!1}},z={active:{type:Boolean,default:!1}},Y={current:{type:Boolean,default:!1}},me={showClearAction:{type:Boolean,default:!1},iconClear:{type:[String,Object],default:G.clear},labelClear:{type:String,default:"Clear"}},U={pressed:{type:Boolean,default:!1}},g={label:{type:[String,Number],default:void 0}},h={readonly:{type:Boolean,default:!1}},m={modifiers:{type:[String,Array],default:void 0}},B={hintLabel:{type:String,default:""}},H={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}},J={count:{type:[Boolean,String],default:!1,validator:e=>[!0,!1,"limit","countdown"].includes(e)}},W={debounce:{type:[Number,String],default:void 0}},Q={icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:V.before,validation:e=>Object.values(V).includes(e)}},I={tabindex:{type:[String,Number],default:0}},X={floating:{type:Boolean,default:!1}},Z={id:[String,Number]},be={placement:{type:String,default:E.bottom,validator:e=>Object.values(E).includes(e)||Object.values(M).includes(e)},strategy:{type:String,default:void 0,validator:e=>Object.values(q).includes(e)},transitionName:{type:String,default:void 0},offset:{type:[Number,String,Object],default:0},shift:{type:[Boolean,Object],default:!1},flip:{type:[Boolean,Object],default:!0},size:{type:[Boolean,Object],default:()=>({padding:10})},autoPlacement:{type:[Boolean,Object],default:!1},arrow:{type:Boolean,default:!1},keepOpen:{type:Boolean,default:!1},autofocusFirst:{type:Boolean,default:!0},triggerWidth:{type:Boolean,default:!1}},R={...Z,name:{type:String,required:!0}},ee={autofocus:{type:Boolean,default:!1}},te={autocomplete:{type:String,default:"off"}},Se={...R,...ee,...te,...I,...y,...h,...b,...S,...B,...P,...m,...J,...W,...Q,...X,...g,minlength:{type:[String,Number],default:void 0},maxlength:{type:[String,Number],default:void 0},placeholder:{type:String,default:void 0},...w},Pe={...R,...I,...b,...S,...B,...y,...h,...m,...g,...P,value:{type:[String,Number,Boolean],default:void 0},modelValue:{type:[Object,Number,Boolean,String],default:void 0}},he={...b,...S,...H,...B,...y,...h,...m,...g,...P,...w,modelValue:{type:[String,Array,Boolean,Number,Symbol],default:void 0},name:{type:String,required:!0},vertical:{type:Boolean,default:!1}},Be={...y,...g,...U,...z,...Y,...T,type:{type:String,default:k.button,validator:e=>Object.values(k).includes(e)},ariaLabel:{type:String,default:void 0},defaultTag:{type:String,default:F.button}},Ae={storageType:{type:String,default:j.local,validator:e=>Object.values(j).includes(e)},storageKey:String};function re(e){const i=(0,t.inject)(e,void 0),s=(0,t.computed)(()=>i!==void 0);function d(a,n,f){const o=i?.[a];if(o)return(0,t.computed)({get(){return o.value},set(v){o.value=v}});const A=(0,t.toRef)(n,a);return(0,t.computed)({get(){return A.value},set(v){f&&f(`update:${a}`,v)}})}return{group:i,isInGroup:s,getGroupOrLocalRef:d}}var oe={...m,name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},disabled:Boolean,not:Boolean},ae=["update:modelValue"];function ne(e){const{group:i,isInGroup:s}=re(K),d=(0,t.computed)(()=>!!(e.disabled||i?.disabled.value));return{isInGroup:s,group:i,modifiers:(0,t.computed)(()=>{let a=e.modifiers,n=i?.modifiers.value;const f=new Set;return a&&(Array.isArray(a)||(a=a.split(" ")),a.forEach(o=>f.add(o))),n&&(Array.isArray(n)||(n=n.split(" ")),n.forEach(o=>f.add(o))),[...f]}),disabled:d,bus:i?.bus}}function ie(e,i,s){return(0,t.computed)(()=>{const d={[e]:!0},a=typeof i?.value=="string"?i.value.split(" "):i?.value;return a&&Array.isArray(a)&&a.forEach(n=>{n&&(d[`${e}--${n}`]=!0)}),s&&Object.keys(s.value).forEach(n=>{d[`${e}--${n}`]=(0,t.unref)(s.value[n])}),d})}var le=["id","open"],de=["aria-controls","aria-expanded"],ue=["aria-hidden"],se={name:"VvAccordion"},fe=(0,t.defineComponent)({...se,props:oe,emits:ae,setup(e,{expose:i,emit:s}){const d=e,a=s,n=(0,t.useAttrs)(),f=(0,c.useVModel)(d,"modelValue",a),o=(0,t.computed)(()=>d.name||n?.id||(0,t.useId)()),{title:A,content:v,not:L}=(0,t.toRefs)(d),{isInGroup:ce,modifiers:ve,disabled:$,bus:u}=ne(d),l=(0,t.ref)(!1);(0,t.watch)(f,r=>{typeof r=="boolean"&&(l.value=L.value?!r:r)},{immediate:!0}),(0,t.watch)(l,r=>{f.value=L.value?!r:r}),u?.on("toggle",({name:r,value:p})=>{r===o.value&&(l.value=p)});function O(){if(!$.value){if(ce.value){u?.emit("toggle",{name:o.value,value:!l.value});return}l.value=!l.value}}(0,t.watch)(o,(r,p)=>{u&&(p&&p!==r&&u.emit("unregister",{name:p}),u.emit("register",{name:r}))},{immediate:!0}),(0,t.onBeforeUnmount)(()=>{u&&u.emit("unregister",{name:o.value})});function _(){l.value||O()}function C(){l.value&&O()}function x(r){if(!u){console.warn(`[VvAccordion]: You are trying to expand accordion group of "${o.value}" but it is not in a group`);return}u.emit("expand",{name:r})}function N(r){if(!u){console.warn(`[VvAccordion]: You are trying to collapse accordion group of "${o.value}" but it is not in a group`);return}u?.emit("collapse",{name:r})}i({isExpanded:l,expand:_,collapse:C,groupExpand:x,groupCollapse:N});const ye=ie("vv-accordion",ve,(0,t.computed)(()=>({disabled:$.value})));return(r,p)=>((0,t.openBlock)(),(0,t.createElementBlock)("details",{id:(0,t.unref)(o),class:(0,t.normalizeClass)((0,t.unref)(ye)),open:(0,t.unref)(l)},[(0,t.createElementVNode)("summary",{"aria-controls":(0,t.unref)(o),"aria-expanded":(0,t.unref)(l),class:"vv-accordion__summary",onClick:p[0]||(p[0]=(0,t.withModifiers)(Oe=>O(),["prevent"]))},[(0,t.renderSlot)(r.$slots,"summary",(0,t.normalizeProps)((0,t.guardReactiveProps)({isExpanded:(0,t.unref)(l),expand:_,collapse:C,groupExpand:x,groupCollapse:N})),()=>[(0,t.createTextVNode)((0,t.toDisplayString)((0,t.unref)(A)),1)])],8,de),(0,t.createElementVNode)("div",{"aria-hidden":!(0,t.unref)(l),class:"vv-accordion__content"},[(0,t.renderSlot)(r.$slots,"default",(0,t.normalizeProps)((0,t.guardReactiveProps)({isExpanded:(0,t.unref)(l),expand:_,collapse:C,groupExpand:x,groupCollapse:N})),()=>[(0,t.createTextVNode)((0,t.toDisplayString)((0,t.unref)(v)),1)])],8,ue)],10,le))}}),pe=fe;return pe});

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

@@ -40,10 +40,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<global
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    disabled: boolean;
     modelValue: boolean;
-    not: boolean;
     modifiers: string | string[];
+    disabled: boolean;
+    not: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     summary?: (props: {
         isExpanded: boolean;