vlite3 1.3.11 → 1.4.2

package/components/Dropdown/DropdownGroupedLayout.vue3.js

@@ -0,0 +1,111 @@
+import { defineComponent as B, computed as S, openBlock as l, createElementBlock as n, normalizeStyle as D, Fragment as i, renderList as u, createBlock as m, resolveDynamicComponent as E, mergeProps as L, withCtx as N, createElementVNode as y, normalizeClass as x, createCommentVNode as d, toDisplayString as k, createVNode as V } from "vue";
+import h from "../Icon.vue.js";
+import v from "./DropdownItem.vue.js";
+import { $t as z } from "../../utils/i18n.js";
+const A = { class: "flex items-center gap-2" }, G = { class: "font-semibold text-sm text-foreground" }, I = {
+  key: 2,
+  class: "flex flex-col space-y-0.5"
+}, P = {
+  key: 0,
+  class: "flex flex-col space-y-0.5 ml-3 pl-3 border-l border-border mt-0.5 mb-1.5"
+}, J = /* @__PURE__ */ B({
+  __name: "DropdownGroupedLayout",
+  props: {
+    options: { default: () => [] },
+    selected: {},
+    selectable: { type: Boolean, default: !0 },
+    columns: { default: 3 },
+    itemsClass: {},
+    headerClass: {}
+  },
+  emits: ["select", "mouseenter"],
+  setup(o, { emit: T }) {
+    const s = o, C = S(() => {
+      const e = s.columns;
+      return typeof e == "number" ? { "--mega-cols": e } : { gridTemplateColumns: e };
+    }), a = (e) => s.selected ? Array.isArray(s.selected) ? s.selected.includes(e.value) : typeof s.selected == "object" && s.selected !== null && e.key && e.key in s.selected ? s.selected[e.key] === e.value : s.selected === e.value : !1, b = (e) => e.labelI18n ? z(e.labelI18n) : e.label, p = (e) => e.to ? "router-link" : e.href ? "a" : "button", j = (e) => {
+      if (e.to) return { to: e.to };
+      if (e.href) {
+        const f = e.href.startsWith("http") || e.href.startsWith("//");
+        return {
+          href: e.href,
+          target: f ? "_blank" : void 0,
+          rel: f ? "noopener noreferrer" : void 0
+        };
+      }
+      return { type: "button" };
+    };
+    return (e, f) => (l(), n("div", {
+      class: "mega-menu-grid p-2 gap-6",
+      style: D(C.value)
+    }, [
+      (l(!0), n(i, null, u(o.options, (t, $) => (l(), n("div", {
+        key: t.key || t.value || $,
+        class: "flex flex-col space-y-1"
+      }, [
+        o.selectable !== !1 && t.disabled !== !0 ? (l(), m(E(p(t)), L({
+          key: 0,
+          ref_for: !0
+        }, j(t), {
+          class: ["flex items-center px-2 py-1.5 mb-1 w-full text-left transition-colors group/header", [
+            o.headerClass,
+            a(t) ? "text-primary" : ""
+          ]],
+          onClick: (r) => e.$emit("select", t)
+        }), {
+          default: N(() => [
+            y("div", A, [
+              t.icon || t.emoji ? (l(), m(h, {
+                key: 0,
+                icon: t.icon,
+                emoji: t.emoji,
+                class: x(["w-4 h-4 opacity-80", a(t) ? "text-primary" : "text-muted-foreground group-hover/header:text-primary"])
+              }, null, 8, ["icon", "emoji", "class"])) : d("", !0),
+              y("span", {
+                class: x(["font-semibold text-sm transition-colors", a(t) ? "text-primary" : "text-foreground group-hover/header:text-primary"])
+              }, k(b(t)), 3)
+            ])
+          ]),
+          _: 2
+        }, 1040, ["class", "onClick"])) : (l(), n("div", {
+          key: 1,
+          class: x(["flex items-center gap-2 px-2 py-1.5 mb-1", o.headerClass])
+        }, [
+          t.icon || t.emoji ? (l(), m(h, {
+            key: 0,
+            icon: t.icon,
+            emoji: t.emoji,
+            class: "w-4 h-4 text-muted-foreground"
+          }, null, 8, ["icon", "emoji"])) : d("", !0),
+          y("span", G, k(b(t)), 1)
+        ], 2)),
+        t.children && t.children.length ? (l(), n("div", I, [
+          (l(!0), n(i, null, u(t.children, (r, _) => (l(), n(i, {
+            key: r.key || r.value || _
+          }, [
+            V(v, {
+              option: r,
+              selected: a(r),
+              selectable: o.selectable,
+              class: "w-full text-sm text-muted-foreground hover:text-foreground font-medium",
+              onClick: (c) => e.$emit("select", r)
+            }, null, 8, ["option", "selected", "selectable", "onClick"]),
+            r.children && r.children.length ? (l(), n("div", P, [
+              (l(!0), n(i, null, u(r.children, (c, w) => (l(), m(v, {
+                key: c.key || c.value || w,
+                option: c,
+                selected: a(c),
+                selectable: o.selectable,
+                class: "w-full text-xs text-muted-foreground hover:text-foreground",
+                onClick: (W) => e.$emit("select", c)
+              }, null, 8, ["option", "selected", "selectable", "onClick"]))), 128))
+            ])) : d("", !0)
+          ], 64))), 128))
+        ])) : d("", !0)
+      ]))), 128))
+    ], 4));
+  }
+});
+export {
+  J as default
+};

package/components/Dropdown/DropdownItem.vue.d.ts

@@ -16,7 +16,7 @@ declare function __VLS_template(): {
         }): any;
     };
     refs: {};
-    rootEl: HTMLDivElement;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
@@ -25,7 +25,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onClick?: (option: IDropdownOption) => any;
     onMouseenter?: (index: number) => any;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/components/Dropdown/DropdownItem.vue.js

@@ -1,13 +1,13 @@
-import { defineComponent as w, computed as l, openBlock as n, createElementBlock as s, withKeys as g, withModifiers as k, normalizeClass as h, renderSlot as $, normalizeProps as I, guardReactiveProps as B, createBlock as p, createCommentVNode as i, createElementVNode as d, toDisplayString as c } from "vue";
-import v from "../Icon.vue.js";
-import { $t as r } from "../../utils/i18n.js";
-const j = ["tabindex", "data-disabled", "data-testid"], C = { class: "flex flex-col flex-1 min-w-0" }, S = { class: "flex items-center justify-between gap-2" }, z = { class: "truncate font-medium" }, D = {
+import { defineComponent as $, computed as n, openBlock as i, createBlock as l, resolveDynamicComponent as C, mergeProps as I, withKeys as B, withCtx as D, renderSlot as j, normalizeProps as E, guardReactiveProps as P, createCommentVNode as a, createElementVNode as r, toDisplayString as s, createElementBlock as b } from "vue";
+import h from "../Icon.vue.js";
+import { $t as c } from "../../utils/i18n.js";
+const S = { class: "flex flex-col flex-1 min-w-0" }, z = { class: "flex items-center justify-between gap-2" }, K = { class: "truncate font-medium" }, L = {
   key: 0,
   class: "text-xs text-muted-foreground whitespace-nowrap opacity-90"
-}, E = {
+}, N = {
   key: 0,
   class: "text-[10px] text-muted-foreground truncate opacity-70"
-}, N = /* @__PURE__ */ w({
+}, T = /* @__PURE__ */ $({
   __name: "DropdownItem",
   props: {
     option: {},
@@ -17,52 +17,69 @@ const j = ["tabindex", "data-disabled", "data-testid"], C = { class: "flex flex-
     index: {}
   },
   emits: ["click", "mouseenter"],
-  setup(e, { emit: x }) {
-    const t = e, u = x, y = l(
-      () => t.option.labelI18n ? r(t.option.labelI18n) : t.option.label
-    ), m = l(
-      () => t.option.subtitleI18n ? r(t.option.subtitleI18n) : t.option.subtitle
-    ), b = l(
-      () => t.option.descriptionI18n ? r(t.option.descriptionI18n) : t.option.description
-    );
-    return (a, o) => (n(), s("div", {
-      tabindex: e.option.disabled ? -1 : 0,
+  setup(t, { emit: v }) {
+    const e = t, d = v, x = n(
+      () => e.option.labelI18n ? c(e.option.labelI18n) : e.option.label
+    ), u = n(
+      () => e.option.subtitleI18n ? c(e.option.subtitleI18n) : e.option.subtitle
+    ), p = n(
+      () => e.option.descriptionI18n ? c(e.option.descriptionI18n) : e.option.description
+    ), m = n(
+      () => e.option.href && (e.option.href.startsWith("http") || e.option.href.startsWith("//"))
+    ), y = n(() => e.option.to ? "router-link" : e.option.href ? "a" : "div"), k = n(() => e.option.to ? { to: e.option.to } : e.option.href ? {
+      href: e.option.href,
+      target: m.value ? "_blank" : void 0,
+      rel: m.value ? "noopener noreferrer" : void 0
+    } : {}), g = (o) => {
+      if (e.option.disabled) {
+        o.preventDefault();
+        return;
+      }
+      d("click", e.option);
+    }, w = (o) => {
+      e.option.to || e.option.href || (o.preventDefault(), d("click", e.option));
+    };
+    return (o, f) => (i(), l(C(y.value), I(k.value, {
+      tabindex: t.option.disabled ? -1 : 0,
       "data-dropdown-item": "",
-      class: h(["relative w-full flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus-visible:bg-accent focus-visible:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50", [
-        e.selectable && e.selected && !e.option.children ? "bg-accent" : "",
-        e.focused ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
-        e.option.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-        e.option.class || ""
-      ]]),
-      "data-disabled": e.option.disabled ? !0 : void 0,
-      "data-testid": a.$attrs["data-testid"] || (e.option.value ? `dropdown-item-${e.option.value}` : `dropdown-item-${e.option.label}`).toString().toLowerCase().replace(/[^a-z0-9]+/g, "-"),
-      onClick: o[0] || (o[0] = (f) => u("click", e.option)),
-      onKeydown: o[1] || (o[1] = g(k((f) => u("click", e.option), ["prevent"]), ["enter"])),
-      onMouseenter: o[2] || (o[2] = (f) => a.$emit("mouseenter", e.index ?? -1))
-    }, [
-      $(a.$slots, "default", I(B({ option: e.option, index: e.index, selected: e.selected })), () => [
-        e.option.icon || e.option.emoji ? (n(), p(v, {
-          key: 0,
-          icon: e.option.icon,
-          emoji: e.option.emoji,
-          class: "mr-2.5 h-4 w-4 shrink-0 mt-0.5"
-        }, null, 8, ["icon", "emoji"])) : i("", !0),
-        d("div", C, [
-          d("div", S, [
-            d("span", z, c(y.value), 1),
-            m.value ? (n(), s("span", D, c(m.value), 1)) : i("", !0)
+      class: ["relative w-full flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus-visible:bg-accent focus-visible:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50", [
+        t.selectable && t.selected && !t.option.children ? "bg-accent" : "",
+        t.focused ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
+        t.option.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+        t.option.class || ""
+      ]],
+      "data-disabled": t.option.disabled ? !0 : void 0,
+      "data-testid": o.$attrs["data-testid"] || (t.option.value ? `dropdown-item-${t.option.value}` : `dropdown-item-${t.option.label}`).toString().toLowerCase().replace(/[^a-z0-9]+/g, "-"),
+      onClick: g,
+      onKeydown: B(w, ["enter"]),
+      onMouseenter: f[0] || (f[0] = (V) => o.$emit("mouseenter", t.index ?? -1))
+    }), {
+      default: D(() => [
+        j(o.$slots, "default", E(P({ option: t.option, index: t.index, selected: t.selected })), () => [
+          t.option.icon || t.option.emoji ? (i(), l(h, {
+            key: 0,
+            icon: t.option.icon,
+            emoji: t.option.emoji,
+            class: "mr-2.5 h-4 w-4 shrink-0 mt-0.5"
+          }, null, 8, ["icon", "emoji"])) : a("", !0),
+          r("div", S, [
+            r("div", z, [
+              r("span", K, s(x.value), 1),
+              u.value ? (i(), b("span", L, s(u.value), 1)) : a("", !0)
+            ]),
+            p.value ? (i(), b("span", N, s(p.value), 1)) : a("", !0)
           ]),
-          b.value ? (n(), s("span", E, c(b.value), 1)) : i("", !0)
-        ]),
-        e.selectable && e.selected ? (n(), p(v, {
-          key: 1,
-          icon: "lucide:check",
-          class: "ml-2 h-4 w-4 shrink-0 text-primary"
-        })) : i("", !0)
-      ])
-    ], 42, j));
+          t.selectable && t.selected ? (i(), l(h, {
+            key: 1,
+            icon: "lucide:check",
+            class: "ml-2 h-4 w-4 shrink-0 text-primary"
+          })) : a("", !0)
+        ])
+      ]),
+      _: 3
+    }, 16, ["tabindex", "class", "data-disabled", "data-testid"]));
   }
 });
 export {
-  N as default
+  T as default
 };

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,4 +1,4 @@
-import o from "./DropdownMenu.vue2.js";
+import o from "./DropdownMenu.vue3.js";
 /* empty css                  */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
 const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-0df8084f"]]);

package/components/Dropdown/{DropdownMenu.vue2.js → DropdownMenu.vue3.js}

@@ -1,10 +1,10 @@
-import { defineComponent as ee, ref as j, computed as g, watch as T, onMounted as te, onBeforeUnmount as le, openBlock as o, createElementBlock as d, createVNode as O, createCommentVNode as f, renderSlot as k, unref as r, normalizeStyle as se, normalizeClass as E, createElementVNode as w, toDisplayString as N, createBlock as h, Fragment as P, renderList as oe, withCtx as V, createSlots as ne, mergeProps as re, nextTick as ae } from "vue";
+import { defineComponent as ee, ref as j, computed as g, watch as T, onMounted as te, onBeforeUnmount as le, openBlock as o, createElementBlock as i, createVNode as O, createCommentVNode as f, renderSlot as k, unref as r, normalizeStyle as se, normalizeClass as E, createElementVNode as w, toDisplayString as N, createBlock as h, Fragment as D, renderList as oe, withCtx as P, createSlots as ne, mergeProps as re, nextTick as ae } from "vue";
 import p from "../Icon.vue.js";
-import ie from "../Input.vue.js";
+import de from "../Input.vue.js";
 /* empty css            */
-import de from "./DropdownItem.vue.js";
+import ie from "./DropdownItem.vue.js";
 import ce from "./DropdownBooleanItem.vue.js";
-import ue from "./DropdownGroupedLayout.vue.js";
+import ue from "./DropdownGroupedLayout.vue2.js";
 import { useDropdownNavigation as fe } from "./composables/useDropdownNavigation.js";
 import { useDropdownIds as me } from "./composables/useDropdownIds.js";
 import { $t as $ } from "../../utils/i18n.js";
@@ -27,7 +27,7 @@ const ve = ["dir"], ye = {
 }, Oe = {
   key: 3,
   class: "shrink-0 rounded-b-md overflow-hidden"
-}, De = /* @__PURE__ */ ee({
+}, Ve = /* @__PURE__ */ ee({
   __name: "DropdownMenu",
   props: {
     options: { default: () => [] },
@@ -52,19 +52,19 @@ const ve = ["dir"], ye = {
     searchEmptyMessage: {}
   },
   emits: ["select", "close", "load-more", "search"],
-  setup(a, { emit: D }) {
-    const t = a, m = D, _ = j(null), i = j(""), { getMenuId: z, getAllRecursiveIds: H } = me(), L = g(() => {
-      if (i.value && i.value.trim() !== "")
+  setup(a, { emit: V }) {
+    const t = a, m = V, B = j(null), d = j(""), { getMenuId: z, getAllRecursiveIds: H } = me(), L = g(() => {
+      if (d.value && d.value.trim() !== "")
         return t.searchEmptyMessage ? t.searchEmptyMessage : `No results found for
-"${i.value}"`;
+"${d.value}"`;
       const e = $("vlite.dropdown.empty");
       return e !== "vlite.dropdown.empty" ? e : t.emptyMessage;
     }), R = g(() => {
       const e = $("vlite.dropdown.search");
       return e !== "vlite.dropdown.search" ? e : "Search...";
-    }), u = g(() => t.options ? t.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), B = g(() => t.searchable ? i.value && i.value.trim() !== "" ? !0 : t.remote ? t.loading ? !0 : t.hasMore || (u.value.length || 0) > 5 : (u.value.length || 0) > 5 : !1);
+    }), u = g(() => t.options ? t.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), C = g(() => t.searchable ? d.value && d.value.trim() !== "" ? !0 : t.remote ? t.loading ? !0 : t.hasMore || (u.value.length || 0) > 5 : (u.value.length || 0) > 5 : !1);
     let v = null;
-    T(i, (e) => {
+    T(d, (e) => {
       t.remote && (v && clearTimeout(v), v = setTimeout(() => {
         e !== void 0 && m("search", e);
       }, t.debounceTime));
@@ -78,20 +78,20 @@ const ve = ["dir"], ye = {
       focusedIndex: b,
       isKeyboardMode: M,
       filteredOptions: F,
-      handleKeyDown: C,
-      handleMouseMove: I,
+      handleKeyDown: I,
+      handleMouseMove: _,
       onMouseEnterItem: S,
       scrollToIndex: K
     } = fe({
       options: u,
-      searchQuery: i,
-      containerRef: _,
+      searchQuery: d,
+      containerRef: B,
       emit: (e, ...s) => m(e, ...s),
       handleSelect: (e, s) => x(e)
-    }), y = g(() => t.remote ? i.value ? u.value : t.cachedOptions.length ? t.cachedOptions : u.value : F.value), U = (e) => {
+    }), y = g(() => t.remote ? d.value ? u.value : t.cachedOptions.length ? t.cachedOptions : u.value : F.value), U = (e) => {
       if (!(!t.selected || typeof t.selected != "object") && e.key && e.key in t.selected)
         return t.selected[e.key];
-    }, q = (e) => e.disabled ? !1 : Array.isArray(t.selected) ? t.selected.includes(e.value) : t.selected && typeof t.selected == "object" && e.key ? t.selected[e.key] === e.value : t.selected === e.value, G = (e) => !e.key || !t.selected || typeof t.selected != "object" ? !1 : !!t.selected[e.key], J = (e, s) => {
+    }, G = (e) => e.disabled ? !1 : Array.isArray(t.selected) ? t.selected.includes(e.value) : t.selected && typeof t.selected == "object" && e.key ? t.selected[e.key] === e.value : t.selected === e.value, q = (e) => !e.key || !t.selected || typeof t.selected != "object" ? !1 : !!t.selected[e.key], J = (e, s) => {
       if (!s.key) return;
       const l = {
         label: s.label,
@@ -125,19 +125,19 @@ const ve = ["dir"], ye = {
         b.value = -1;
       }
     ), te(() => {
-      W(), window.addEventListener("keydown", C);
+      W(), window.addEventListener("keydown", I);
     }), le(() => {
-      window.removeEventListener("keydown", C), v && clearTimeout(v), i.value && t.remote && m("search", "");
+      window.removeEventListener("keydown", I), v && clearTimeout(v), d.value && t.remote && m("search", "");
     });
     const X = (e) => e.labelI18n ? $(e.labelI18n) : e.label, Y = (e) => e.showChevron !== !1;
-    return (e, s) => (o(), d("div", {
+    return (e, s) => (o(), i("div", {
       class: "dropdown-menu w-full flex flex-col",
       dir: a.direction
     }, [
-      B.value ? (o(), d("div", ye, [
-        O(ie, {
-          modelValue: i.value,
-          "onUpdate:modelValue": s[0] || (s[0] = (l) => i.value = l),
+      C.value ? (o(), i("div", ye, [
+        O(de, {
+          modelValue: d.value,
+          "onUpdate:modelValue": s[0] || (s[0] = (l) => d.value = l),
           placeholder: R.value,
           icon: "lucide:search",
           size: "sm",
@@ -150,14 +150,14 @@ const ve = ["dir"], ye = {
           "data-testid": "dropdown-search-input"
         }, null, 8, ["modelValue", "placeholder"])
       ])) : f("", !0),
-      e.$slots.header ? (o(), d("div", ge, [
+      e.$slots.header ? (o(), i("div", ge, [
         k(e.$slots, "header", {}, void 0, !0)
       ])) : f("", !0),
-      u.value.length > 0 || y.value.length === 0 ? (o(), d("div", {
+      u.value.length > 0 || y.value.length === 0 ? (o(), i("div", {
         key: 2,
         ref_key: "containerRef",
-        ref: _,
-        tabindex: B.value ? -1 : 0,
+        ref: B,
+        tabindex: C.value ? -1 : 0,
         role: "menu",
         class: E([
           "w-full p-1 space-y-0.5 overflow-y-auto overflow-x-hidden focus:outline-none flex-1 scrollbar-thin",
@@ -165,10 +165,10 @@ const ve = ["dir"], ye = {
         ]),
         style: se({ maxHeight: t.maxHeight }),
         onMousemove: s[1] || (s[1] = //@ts-ignore
-        (...l) => r(I) && r(I)(...l)),
+        (...l) => r(_) && r(_)(...l)),
         onScroll: A
       }, [
-        !a.isCustomSlotMenu && y.value.length === 0 && !a.loading && !(u.value.length === 0 && e.$slots.menu) ? (o(), d("div", ke, [
+        !a.isCustomSlotMenu && y.value.length === 0 && !a.loading && !(u.value.length === 0 && e.$slots.menu) ? (o(), i("div", ke, [
           O(p, {
             icon: "lucide:inbox",
             class: "w-8 h-8 mb-2 opacity-70"
@@ -182,11 +182,11 @@ const ve = ["dir"], ye = {
           selectable: a.selectable,
           columns: a.columns,
           onSelect: x
-        }, null, 8, ["options", "selected", "selectable", "columns"])) : (o(!0), d(P, { key: 2 }, oe(y.value, (l, n) => (o(), d(P, { key: n }, [
-          l.label === "---" ? (o(), d("div", we)) : l.data?.isBoolean ? (o(), h(ce, {
+        }, null, 8, ["options", "selected", "selectable", "columns"])) : (o(!0), i(D, { key: 2 }, oe(y.value, (l, n) => (o(), i(D, { key: n }, [
+          l.label === "---" ? (o(), i("div", we)) : l.data?.isBoolean ? (o(), h(ce, {
             key: 1,
             option: l,
-            value: G(l),
+            value: q(l),
             focused: r(M) && r(b) === n,
             onChange: J,
             onMouseenter: (c) => r(S)(n)
@@ -206,7 +206,7 @@ const ve = ["dir"], ye = {
             direction: a.direction,
             onOnSelect: (c) => Q(l, c)
           }, {
-            trigger: V(() => [
+            trigger: P(() => [
               w("div", {
                 tabindex: 0,
                 "data-dropdown-item": "",
@@ -234,11 +234,11 @@ const ve = ["dir"], ye = {
               ], 42, pe)
             ]),
             _: 2
-          }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (o(), h(de, {
+          }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (o(), h(ie, {
             key: 3,
             option: l,
             index: n,
-            selected: q(l),
+            selected: G(l),
             focused: r(M) && r(b) === n,
             selectable: a.selectable,
             onClick: (c) => x(l),
@@ -246,14 +246,14 @@ const ve = ["dir"], ye = {
           }, ne({ _: 2 }, [
             e.$slots.item ? {
               name: "default",
-              fn: V((c) => [
+              fn: P((c) => [
                 k(e.$slots, "item", re({ ref_for: !0 }, c), void 0, !0)
               ]),
               key: "0"
             } : void 0
           ]), 1032, ["option", "index", "selected", "focused", "selectable", "onClick", "onMouseenter"]))
         ], 64))), 128)),
-        a.loading ? (o(), d("div", Se, [
+        a.loading ? (o(), i("div", Se, [
           O(p, {
             icon: "lucide:loader-2",
             class: "w-4 h-4 animate-spin text-muted-foreground"
@@ -261,12 +261,12 @@ const ve = ["dir"], ye = {
         ])) : f("", !0),
         k(e.$slots, "menu", {}, void 0, !0)
       ], 46, be)) : f("", !0),
-      e.$slots.footer ? (o(), d("div", Oe, [
+      e.$slots.footer ? (o(), i("div", Oe, [
         k(e.$slots, "footer", {}, void 0, !0)
       ])) : f("", !0)
     ], 8, ve));
   }
 });
 export {
-  De as default
+  Ve as default
 };

package/components/Dropdown/composables/useDropdownHydration.d.ts

@@ -21,6 +21,8 @@ export declare function useDropdownHydration(opts: UseDropdownHydrationOptions):
     selectedBuffer: import('vue').Ref<Map<any, {
         label: string;
         labelI18n?: string;
+        to?: string;
+        href?: string;
         value?: any;
         subtitle?: string;
         subtitleI18n?: string;
@@ -62,6 +64,8 @@ export declare function useDropdownHydration(opts: UseDropdownHydrationOptions):
     }> & Omit<Map<any, IDropdownOption>, keyof Map<any, any>>, Map<any, IDropdownOption> | (Map<any, {
         label: string;
         labelI18n?: string;
+        to?: string;
+        href?: string;
         value?: any;
         subtitle?: string;
         subtitleI18n?: string;

package/components/Dropdown/composables/useDropdownNavigation.js

@@ -1,24 +1,36 @@
-import { ref as u, computed as i } from "vue";
-import { $t as c } from "../../../utils/i18n.js";
-function b(n) {
-  const t = u(-1), o = u(!1), s = i(() => {
-    const e = n.options.value;
-    if (!n.searchQuery.value) return e;
-    const a = n.searchQuery.value.toLowerCase();
-    return e.filter((l) => (l.labelI18n ? c(l.labelI18n) : l.label).toLowerCase().includes(a));
+import { ref as i, computed as d } from "vue";
+import { $t as f } from "../../../utils/i18n.js";
+function g(o) {
+  const t = i(-1), l = i(!1), s = d(() => {
+    const e = o.options.value;
+    if (!o.searchQuery.value) return e;
+    const a = o.searchQuery.value.toLowerCase();
+    return e.filter((n) => (n.labelI18n ? f(n.labelI18n) : n.label).toLowerCase().includes(a));
   }), r = (e) => {
-    if (!n.containerRef.value || e < 0) return;
-    const l = n.containerRef.value.querySelectorAll("[data-dropdown-item]")[e];
-    l && l.scrollIntoView({ block: "nearest" });
+    if (!o.containerRef.value || e < 0) return;
+    const n = o.containerRef.value.querySelectorAll("[data-dropdown-item]")[e];
+    n && n.scrollIntoView({ block: "nearest" });
   };
   return {
     focusedIndex: t,
-    isKeyboardMode: o,
+    isKeyboardMode: l,
     filteredOptions: s,
     handleKeyDown: (e) => {
+      if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && !e.defaultPrevented) {
+        const n = document.activeElement;
+        if (!(n?.tagName === "INPUT" || n?.tagName === "TEXTAREA" || n?.isContentEditable)) {
+          const c = o.containerRef.value?.closest(".dropdown-menu");
+          if (c) {
+            const u = c.querySelector(
+              'input[data-testid="dropdown-search-input"]'
+            );
+            u && document.activeElement !== u && u.focus();
+          }
+        }
+      }
       const a = s.value;
       if (a.length !== 0)
-        switch (["ArrowDown", "ArrowUp", "Enter"].includes(e.key) && (o.value = !0), e.key) {
+        switch (["ArrowDown", "ArrowUp", "Enter"].includes(e.key) && (l.value = !0), e.key) {
           case "ArrowDown":
             e.preventDefault(), e.stopPropagation(), t.value < a.length - 1 ? t.value++ : t.value = 0, r(t.value);
             break;
@@ -27,17 +39,17 @@ function b(n) {
             break;
           case "Enter":
             if (e.preventDefault(), e.stopPropagation(), t.value >= 0 && t.value < a.length) {
-              const l = a[t.value];
-              l.children || n.handleSelect(l, t.value);
+              const n = a[t.value];
+              n.children || o.handleSelect(n, t.value);
             }
             break;
           case "Escape":
-            e.preventDefault(), e.stopPropagation(), n.emit("close");
+            e.preventDefault(), e.stopPropagation(), o.emit("close");
             break;
         }
     },
     handleMouseMove: () => {
-      o.value && (o.value = !1);
+      l.value && (l.value = !1);
     },
     onMouseEnterItem: (e) => {
       t.value = e;
@@ -46,5 +58,5 @@ function b(n) {
   };
 }
 export {
-  b as useDropdownNavigation
+  g as useDropdownNavigation
 };

package/components/Form/Form.vue.d.ts

@@ -1,4 +1,4 @@
-import { IForm, IFormStep, IFormSubmitPayload, IFormGroupsHeadings } from './types';
+import { IForm, IFormStep, IFormSubmitPayload, IFormGroupsHeadings, IFormGroupLayout } from './types';
 import { InputVariant, InputSize, InputRounded, TimelineTextPosition, ButtonProps } from '../../types';
 interface Props {
     schema: IForm[] | IForm[][];
@@ -11,6 +11,14 @@ interface Props {
     footer?: boolean;
     groupsHeadings?: IFormGroupsHeadings;
     groupHeadingsDescription?: IFormGroupsHeadings;
+    /**
+     * Visual layout for grouped schemas (`schema: IForm[][]`).
+     * - `'basic'` (default) — each group is a card with a header and a body
+     * - `'accordion'` — each group is an `AccordionItem` with the heading as the trigger
+     *
+     * Has no effect on flat schemas. Backward compatible.
+     */
+    groupLayout?: IFormGroupLayout;
     tabs?: IFormStep[];
     submitText?: string;
     submitProps?: ButtonProps;
@@ -72,12 +80,14 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {
     clearErrors: () => void;
     setFieldValue: (name: string, value: any, data?: any) => Promise<void>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    onChange: (values: Record<string, any>) => any;
     onSubmit: (payload: IFormSubmitPayload, close: () => void) => any;
     onCancel: () => any;
     onAddonAction: (action: string) => any;
     onStepChange: (step: number) => any;
     onBack: () => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onOnChange?: (values: Record<string, any>) => any;
     onOnSubmit?: (payload: IFormSubmitPayload, close: () => void) => any;
     onOnCancel?: () => any;
     onOnAddonAction?: (action: string) => any;
@@ -98,6 +108,8 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {
     schemaLoading: boolean;
     groupsHeadings: IFormGroupsHeadings;
     groupHeadingsDescription: IFormGroupsHeadings;
+    groupLayout: IFormGroupLayout;
+    tabs: IFormStep[];
     submitText: string;
     showCancel: boolean;
     groupClass: string;

package/components/Form/Form.vue.js

@@ -1,7 +1,7 @@
 import o from "./Form.vue2.js";
 /* empty css          */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-1f8a19cd"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-db13df10"]]);
 export {
-  f as default
+  p as default
 };