vlite3 1.4.3 → 1.4.5

package/components/CategoryMenu/CategoryMenuVariant2.vue.js

@@ -1,162 +1,7 @@
-import { defineComponent as V, computed as u, ref as I, onMounted as A, openBlock as s, createElementBlock as l, normalizeClass as M, createVNode as y, unref as L, withCtx as f, createCommentVNode as d, createElementVNode as m, toDisplayString as v, createTextVNode as N, Fragment as D, renderList as S, createBlock as b, resolveDynamicComponent as z, mergeProps as E } from "vue";
-import R from "../Dropdown/Dropdown.vue.js";
-import k from "../Icon.vue.js";
-import "../../core/config.js";
-/* empty css            */
-/* empty css                                    */
-/* empty css                            */
-import j from "../Button.vue.js";
-import { categoriesToDropdownOptions as H, buildCategoryRoute as q } from "./utils.js";
-const G = {
-  class: "flex items-center gap-1 overflow-x-auto -mx-1 px-1 scrollbar-thin",
-  style: { "will-change": "transform", contain: "layout style" }
-}, J = ["onMouseenter", "onFocus", "onClick"], K = { class: "truncate max-w-[180px]" }, Q = { class: "truncate max-w-[180px]" }, U = {
-  key: 0,
-  class: "flex items-center gap-4 p-4 bg-muted/20 border-t border-border"
-}, W = ["src", "alt"], X = { class: "flex-1 min-w-0" }, Y = { class: "font-semibold text-foreground text-sm truncate" }, Z = {
-  key: 0,
-  class: "text-xs text-muted-foreground mt-1 line-clamp-2"
-}, ce = /* @__PURE__ */ V({
-  __name: "CategoryMenuVariant2",
-  props: {
-    items: {},
-    maxDepth: {},
-    showIcons: { type: Boolean },
-    showImages: { type: Boolean },
-    showDescriptions: { type: Boolean },
-    megaColumns: {},
-    activeId: {},
-    routePrefix: {},
-    class: {}
-  },
-  emits: ["select"],
-  setup(a, { emit: O }) {
-    const r = a, p = O, g = u(() => r.items || []), i = I(null), x = I(!1), o = u(
-      () => g.value.find((t) => t.id === i.value) || null
-    ), C = u(
-      () => o.value?.children ? H(o.value.children, r.routePrefix, [o.value]) : []
-    ), _ = u(() => C.value.length > 0), h = (t) => {
-      i.value = t.id;
-    }, $ = (t) => q(r.routePrefix, t), B = (t) => t ? "router-link" : "button", F = (t) => t ? { to: t } : { type: "button" }, w = (t) => r.activeId ? t.id === r.activeId ? !0 : (t.children || []).some((n) => w(n)) : !1, P = (t) => {
-      const n = t.option?.data;
-      p("select", n || t);
-    }, T = u(() => Math.max(1, Math.min(6, r.megaColumns || 4)));
-    return A(() => {
-      if (i.value !== null) return;
-      const t = g.value.find((n) => n.children && n.children.length > 0);
-      t && (i.value = t.id);
-    }), (t, n) => (s(), l("nav", {
-      class: M(["relative w-full flex", r.class]),
-      role: "navigation",
-      "aria-label": "Categories"
-    }, [
-      y(L(R), {
-        options: C.value,
-        disabled: !_.value,
-        layout: "grouped",
-        columns: T.value,
-        "close-on-select": !0,
-        searchable: !1,
-        "show-selected-label": !1,
-        "show-selected-icon": !1,
-        selectable: !0,
-        trigger: "hover",
-        "keep-alive": !0,
-        placement: "bottom-start",
-        offset: [0, 4],
-        maxHeight: "500px",
-        "menu-id": "cat-menu-mega",
-        "nested-position": "right-start",
-        "nested-offset": [0, -5],
-        width: "w-full max-w-5xl",
-        onOnSelect: P,
-        onOnOpen: n[1] || (n[1] = (e) => x.value = !0),
-        onOnClose: n[2] || (n[2] = (e) => x.value = !1)
-      }, {
-        trigger: f(() => [
-          m("div", G, [
-            (s(!0), l(D, null, S(g.value, (e) => (s(), l(D, {
-              key: e.id
-            }, [
-              e.children && e.children.length > 0 ? (s(), l("button", {
-                key: 0,
-                type: "button",
-                tabindex: "0",
-                class: M([
-                  "shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
-                  w(e) || i.value === e.id && _.value && x.value ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-accent"
-                ]),
-                onMouseenter: (c) => h(e),
-                onFocus: (c) => h(e),
-                onClick: (c) => p("select", e)
-              }, [
-                r.showIcons && e.icon ? (s(), b(k, {
-                  key: 0,
-                  icon: e.icon,
-                  class: "w-3.5 h-3.5 shrink-0"
-                }, null, 8, ["icon"])) : d("", !0),
-                m("span", K, v(e.title || e.name), 1),
-                y(k, {
-                  icon: "lucide:chevron-down",
-                  class: "w-3 h-3 opacity-60"
-                })
-              ], 42, J)) : (s(), b(z(B($(e))), E({
-                key: 1,
-                ref_for: !0
-              }, F($(e)), {
-                tabindex: "0",
-                class: [
-                  "shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
-                  w(e) ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-accent"
-                ],
-                onMouseenter: (c) => h(e),
-                onFocus: (c) => h(e),
-                onClick: (c) => p("select", e)
-              }), {
-                default: f(() => [
-                  r.showIcons && e.icon ? (s(), b(k, {
-                    key: 0,
-                    icon: e.icon,
-                    class: "w-3.5 h-3.5 shrink-0"
-                  }, null, 8, ["icon"])) : d("", !0),
-                  m("span", Q, v(e.title || e.name), 1)
-                ]),
-                _: 2
-              }, 1040, ["class", "onMouseenter", "onFocus", "onClick"]))
-            ], 64))), 128))
-          ])
-        ]),
-        footer: f(() => [
-          o.value && (a.showImages && o.value.image || a.showDescriptions && o.value.description) ? (s(), l("div", U, [
-            a.showImages && o.value.image ? (s(), l("img", {
-              key: 0,
-              src: o.value.image,
-              alt: o.value.title || "Category",
-              class: "w-24 h-16 object-cover rounded-md shadow-sm border border-border"
-            }, null, 8, W)) : d("", !0),
-            m("div", X, [
-              m("h4", Y, v(o.value.title || o.value.name), 1),
-              a.showDescriptions && o.value.description ? (s(), l("p", Z, v(o.value.description), 1)) : d("", !0)
-            ]),
-            y(j, {
-              variant: "outline",
-              size: "sm",
-              class: "shrink-0",
-              "icon-right": "lucide:arrow-right",
-              onClick: n[0] || (n[0] = (e) => p("select", o.value))
-            }, {
-              default: f(() => [
-                N(" Shop All " + v(o.value.title || o.value.name), 1)
-              ]),
-              _: 1
-            })
-          ])) : d("", !0)
-        ]),
-        _: 1
-      }, 8, ["options", "disabled", "columns"])
-    ], 2));
-  }
-});
+import o from "./CategoryMenuVariant2.vue2.js";
+/* empty css                          */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-5a117002"]]);
 export {
-  ce as default
+  m as default
 };

package/components/CategoryMenu/CategoryMenuVariant2.vue2.js

@@ -1,4 +1,237 @@
-import f from "./CategoryMenuVariant2.vue.js";
+import { defineComponent as H, computed as h, ref as d, watch as q, nextTick as L, onMounted as G, openBlock as l, createElementBlock as a, normalizeClass as T, createVNode as i, unref as J, withCtx as f, createCommentVNode as c, createElementVNode as s, toDisplayString as g, createTextVNode as K, Transition as z, withModifiers as F, Fragment as P, renderList as Q, createBlock as S, resolveDynamicComponent as U, mergeProps as X } from "vue";
+import { useResizeObserver as V } from "@vueuse/core";
+import Y from "../Dropdown/Dropdown.vue.js";
+import x from "../Icon.vue.js";
+import "../../core/config.js";
+/* empty css            */
+/* empty css                                    */
+/* empty css                            */
+import Z from "../Button.vue.js";
+import { categoriesToDropdownOptions as ee, buildCategoryRoute as te } from "./utils.js";
+const oe = { class: "relative w-full max-w-full min-w-0 overflow-hidden flex items-center group" }, ne = {
+  key: 0,
+  class: "absolute left-0 inset-y-0 z-10 flex items-center pointer-events-none"
+}, le = ["onMouseenter", "onFocus", "onClick"], se = { class: "truncate max-w-[180px]" }, re = { class: "truncate max-w-[180px]" }, ae = {
+  key: 0,
+  class: "absolute right-0 inset-y-0 z-10 flex items-center justify-end pointer-events-none"
+}, ie = {
+  key: 0,
+  class: "flex items-center gap-4 p-4 bg-muted/20 border-t border-border"
+}, ce = ["src", "alt"], ue = { class: "flex-1 min-w-0" }, de = { class: "font-semibold text-foreground text-sm truncate" }, fe = {
+  key: 0,
+  class: "text-xs text-muted-foreground mt-1 line-clamp-2"
+}, Ce = /* @__PURE__ */ H({
+  __name: "CategoryMenuVariant2",
+  props: {
+    items: {},
+    maxDepth: {},
+    showIcons: { type: Boolean },
+    showImages: { type: Boolean },
+    showDescriptions: { type: Boolean },
+    megaColumns: {},
+    activeId: {},
+    routePrefix: {},
+    class: {},
+    menuStyles: {}
+  },
+  emits: ["select"],
+  setup(u, { emit: A }) {
+    const r = u, b = A, w = h(() => r.items || []), m = d(null), C = d(!1), y = d(null), $ = d(null), I = d(!1), M = d(!1), n = h(
+      () => w.value.find((t) => t.id === m.value) || null
+    ), B = h(
+      () => n.value?.children ? ee(n.value.children, r.routePrefix, [n.value]) : []
+    ), O = h(() => B.value.length > 0), k = (t) => {
+      m.value = t.id;
+    }, R = (t) => te(r.routePrefix, t), N = (t) => t ? "router-link" : "button", W = (t) => t ? { to: t } : { type: "button" }, _ = (t) => r.activeId ? t.id === r.activeId ? !0 : (t.children || []).some((o) => _(o)) : !1, j = (t) => {
+      const o = t.option?.data;
+      b("select", o || t);
+    }, E = h(() => Math.max(1, Math.min(6, r.megaColumns || 4))), v = () => {
+      const t = y.value;
+      t && (I.value = t.scrollLeft > 2, M.value = t.scrollLeft + t.clientWidth < t.scrollWidth - 2);
+    }, D = (t) => {
+      const o = y.value;
+      if (!o) return;
+      const e = o.clientWidth * 0.6;
+      o.scrollBy({ left: t === "right" ? e : -e, behavior: "smooth" });
+    };
+    return V(y, v), V($, v), q(
+      () => w.value,
+      () => L(v),
+      { deep: !0 }
+    ), G(async () => {
+      if (m.value === null) {
+        const t = w.value.find((o) => o.children && o.children.length > 0);
+        t && (m.value = t.id);
+      }
+      await L(), v();
+    }), (t, o) => (l(), a("nav", {
+      class: T(["relative w-full max-w-full min-w-0 overflow-hidden flex", r.class]),
+      role: "navigation",
+      "aria-label": "Categories"
+    }, [
+      i(J(Y), {
+        class: "block w-full min-w-0 max-w-full",
+        options: B.value,
+        disabled: !O.value,
+        layout: "grouped",
+        columns: E.value,
+        "close-on-select": !0,
+        searchable: !1,
+        "show-selected-label": !1,
+        "show-selected-icon": !1,
+        selectable: !0,
+        trigger: "hover",
+        "keep-alive": !0,
+        placement: "bottom-start",
+        offset: [0, 4],
+        maxHeight: "500px",
+        menuStyles: u.menuStyles,
+        "menu-id": "cat-menu-mega",
+        "nested-position": "right-start",
+        "nested-offset": [0, -5],
+        width: "w-full max-w-5xl",
+        onOnSelect: j,
+        onOnOpen: o[3] || (o[3] = (e) => C.value = !0),
+        onOnClose: o[4] || (o[4] = (e) => C.value = !1)
+      }, {
+        trigger: f(() => [
+          s("div", oe, [
+            i(z, { name: "fade-x" }, {
+              default: f(() => [
+                I.value ? (l(), a("div", ne, [
+                  o[5] || (o[5] = s("div", { class: "w-8 h-full bg-gradient-to-r from-background to-transparent" }, null, -1)),
+                  s("button", {
+                    type: "button",
+                    class: "pointer-events-auto absolute left-0 bg-background h-full px-1 flex items-center text-muted-foreground hover:text-foreground transition-colors",
+                    "aria-label": "Scroll left",
+                    tabindex: "-1",
+                    onClick: o[0] || (o[0] = F((e) => D("left"), ["stop", "prevent"]))
+                  }, [
+                    i(x, {
+                      icon: "lucide:chevron-left",
+                      class: "w-4 h-4"
+                    })
+                  ])
+                ])) : c("", !0)
+              ]),
+              _: 1
+            }),
+            s("div", {
+              ref_key: "scrollRef",
+              ref: y,
+              class: "flex-1 min-w-0 max-w-full overflow-x-auto category-mega-no-scrollbar scroll-smooth",
+              style: { "will-change": "transform", contain: "layout style" },
+              onScroll: v
+            }, [
+              s("div", {
+                ref_key: "scrollContentRef",
+                ref: $,
+                class: "flex w-max min-w-full items-center gap-1 py-2 px-1"
+              }, [
+                (l(!0), a(P, null, Q(w.value, (e) => (l(), a(P, {
+                  key: e.id
+                }, [
+                  e.children && e.children.length > 0 ? (l(), a("button", {
+                    key: 0,
+                    type: "button",
+                    tabindex: "0",
+                    class: T([
+                      "shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+                      _(e) || m.value === e.id && O.value && C.value ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                    ]),
+                    onMouseenter: (p) => k(e),
+                    onFocus: (p) => k(e),
+                    onClick: (p) => b("select", e)
+                  }, [
+                    r.showIcons && e.icon ? (l(), S(x, {
+                      key: 0,
+                      icon: e.icon,
+                      class: "w-3.5 h-3.5 shrink-0"
+                    }, null, 8, ["icon"])) : c("", !0),
+                    s("span", se, g(e.title || e.name), 1),
+                    i(x, {
+                      icon: "lucide:chevron-down",
+                      class: "w-3 h-3 opacity-60"
+                    })
+                  ], 42, le)) : (l(), S(U(N(R(e))), X({
+                    key: 1,
+                    ref_for: !0
+                  }, W(R(e)), {
+                    tabindex: "0",
+                    class: [
+                      "shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+                      _(e) ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                    ],
+                    onMouseenter: (p) => k(e),
+                    onFocus: (p) => k(e),
+                    onClick: (p) => b("select", e)
+                  }), {
+                    default: f(() => [
+                      r.showIcons && e.icon ? (l(), S(x, {
+                        key: 0,
+                        icon: e.icon,
+                        class: "w-3.5 h-3.5 shrink-0"
+                      }, null, 8, ["icon"])) : c("", !0),
+                      s("span", re, g(e.title || e.name), 1)
+                    ]),
+                    _: 2
+                  }, 1040, ["class", "onMouseenter", "onFocus", "onClick"]))
+                ], 64))), 128))
+              ], 512)
+            ], 544),
+            i(z, { name: "fade-x" }, {
+              default: f(() => [
+                M.value ? (l(), a("div", ae, [
+                  o[6] || (o[6] = s("div", { class: "w-8 h-full bg-gradient-to-l from-background to-transparent" }, null, -1)),
+                  s("button", {
+                    type: "button",
+                    class: "pointer-events-auto absolute right-0 h-full px-1 flex items-center text-muted-foreground hover:text-foreground transition-colors bg-background",
+                    "aria-label": "Scroll right",
+                    tabindex: "-1",
+                    onClick: o[1] || (o[1] = F((e) => D("right"), ["stop", "prevent"]))
+                  }, [
+                    i(x, {
+                      icon: "lucide:chevron-right",
+                      class: "w-4 h-4"
+                    })
+                  ])
+                ])) : c("", !0)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        footer: f(() => [
+          n.value && (u.showImages && n.value.image || u.showDescriptions && n.value.description) ? (l(), a("div", ie, [
+            u.showImages && n.value.image ? (l(), a("img", {
+              key: 0,
+              src: n.value.image,
+              alt: n.value.title || "Category",
+              class: "w-24 h-16 object-cover rounded-md shadow-sm border border-border"
+            }, null, 8, ce)) : c("", !0),
+            s("div", ue, [
+              s("h4", de, g(n.value.title || n.value.name), 1),
+              u.showDescriptions && n.value.description ? (l(), a("p", fe, g(n.value.description), 1)) : c("", !0)
+            ]),
+            i(Z, {
+              variant: "outline",
+              size: "sm",
+              class: "shrink-0",
+              "icon-right": "lucide:arrow-right",
+              onClick: o[2] || (o[2] = (e) => b("select", n.value))
+            }, {
+              default: f(() => [
+                K(" Shop All " + g(n.value.title || n.value.name), 1)
+              ]),
+              _: 1
+            })
+          ])) : c("", !0)
+        ]),
+        _: 1
+      }, 8, ["options", "disabled", "columns", "menuStyles"])
+    ], 2));
+  }
+});
 export {
-  f as default
+  Ce as default
 };

package/components/CategoryMenu/types.d.ts

@@ -1,9 +1,11 @@
-import { CategoryItem } from '../CategoryManager/types';
-export type CategoryMenuVariant = 'tabs' | 'mega' | 'sidebar';
+import { CategoryItem, RawCategoryItem } from '../CategoryManager/types';
+export type CategoryMenuVariant = 'tabs' | 'mega' | 'sidebar' | 'inline';
 export type CategoryMenuItem = CategoryItem;
 export interface CategoryMenuProps {
     /** Hierarchical category tree. Accepts the same shape as `CategoryManager`. */
     items?: CategoryMenuItem[];
+    /** Flat array of category items to auto-build into a nested tree. Allows the Menu to be directly fed raw API results. */
+    rawData?: RawCategoryItem[];
     /** Layout variant. See {@link CategoryMenuVariant}. */
     variant?: CategoryMenuVariant;
     /** Maximum depth to render. `1` = top-level only. Defaults to `2`. */
@@ -29,4 +31,5 @@ export interface CategoryMenuProps {
     /** Whether to render the description in mega-menu columns. */
     showDescriptions?: boolean;
     class?: string;
+    menuStyles?: any;
 }

package/components/Clipboard.vue.d.ts

@@ -27,11 +27,11 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<ClipboardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    copy: (text: string) => any;
     error: (err: Error) => any;
+    copy: (text: string) => any;
 }, string, import('vue').PublicProps, Readonly<ClipboardProps> & Readonly<{
-    onCopy?: (text: string) => any;
     onError?: (err: Error) => any;
+    onCopy?: (text: string) => any;
 }>, {
     variant: ButtonVariant;
     size: ButtonSize;

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

@@ -21,6 +21,7 @@ type __VLS_Props = {
     minWidth?: string;
     ignoreClickOutside?: string[];
     menuId?: string;
+    menuStyles?: object;
     nestedPosition?: TooltTipPlacement;
     nestedOffset?: [number, number];
     showSelectedLabel?: boolean;

package/components/Dropdown/Dropdown.vue.js

@@ -1,11 +1,11 @@
 import { defineComponent as ae, ref as a, computed as f, inject as ie, onMounted as se, onUnmounted as re, watch as x, provide as L, reactive as de, toRefs as ue, openBlock as R, createElementBlock as ce, normalizeStyle as fe, createVNode as N, unref as u, withCtx as m, createBlock as me, normalizeClass as ve, createSlots as he, renderSlot as v, normalizeProps as z, guardReactiveProps as j, createCommentVNode as ye, createElementVNode as ge } from "vue";
 import be from "v-tooltip-lite";
 import "v-tooltip-lite/style.css";
-import pe from "./DropdownMenu.vue.js";
-import Ce from "./DropdownTrigger.vue.js";
-import we from "../ConfirmationModal.vue.js";
-import { useDropdownIds as Oe } from "./composables/useDropdownIds.js";
-import { useDropdownSelection as Se } from "./composables/useDropdownSelection.js";
+import Ce from "./DropdownMenu.vue.js";
+import pe from "./DropdownTrigger.vue.js";
+import Se from "../ConfirmationModal.vue.js";
+import { useDropdownIds as we } from "./composables/useDropdownIds.js";
+import { useDropdownSelection as Oe } from "./composables/useDropdownSelection.js";
 import { useDropdownHydration as $e } from "./composables/useDropdownHydration.js";
 const He = /* @__PURE__ */ ae({
   __name: "Dropdown",
@@ -30,6 +30,7 @@ const He = /* @__PURE__ */ ae({
     minWidth: { default: "140px" },
     ignoreClickOutside: {},
     menuId: {},
+    menuStyles: {},
     nestedPosition: {},
     nestedOffset: {},
     showSelectedLabel: { type: Boolean, default: !0 },
@@ -60,9 +61,9 @@ const He = /* @__PURE__ */ ae({
       confirmText: "Confirm",
       cancelText: "Cancel",
       variant: "primary"
-    }), q = f(() => l.position ? l.position : l.direction === "rtl" ? "bottom-end" : "bottom-start"), F = f(() => l.nestedPosition ? l.nestedPosition : l.direction === "rtl" ? "left-start" : "right-start"), p = a(l.isOpen || !1), C = a(0), G = a(null), S = a(null), $ = () => {
-      S.value && setTimeout(() => {
-        S.value?.focus({ preventScroll: !0 });
+    }), q = f(() => l.position ? l.position : l.direction === "rtl" ? "bottom-end" : "bottom-start"), F = f(() => l.nestedPosition ? l.nestedPosition : l.direction === "rtl" ? "left-start" : "right-start"), C = a(l.isOpen || !1), p = a(0), G = a(null), O = a(null), $ = () => {
+      O.value && setTimeout(() => {
+        O.value?.focus({ preventScroll: !0 });
       }, 10);
     }, J = `dropdown-${Math.random().toString(36).substring(2, 9)}`, I = f(() => l.menuId || J), g = a([]), s = ie("dropdown-context", null), K = (e) => {
       g.value.includes(e) || g.value.push(e), s?.registerChildId?.(e);
@@ -78,41 +79,41 @@ const He = /* @__PURE__ */ ae({
       (e) => {
         if (e !== void 0) {
           if ((l.disabled || l.readonly) && e) return;
-          p.value = e;
+          C.value = e;
         }
       }
     );
     const A = (e) => {
       if (l.disabled || l.readonly) {
-        p.value = !1, h("update:isOpen", !1);
+        C.value = !1, h("update:isOpen", !1);
         return;
       }
-      p.value = e, h("update:isOpen", e), h(e ? "onOpen" : "onClose"), s?.onChildToggle?.(e);
-    }, w = () => {
+      C.value = e, h("update:isOpen", e), h(e ? "onOpen" : "onClose"), s?.onChildToggle?.(e);
+    }, S = () => {
       A(!1);
     }, X = (e) => {
-      e ? C.value++ : C.value = Math.max(0, C.value - 1);
+      e ? p.value++ : p.value = Math.max(0, p.value - 1);
     };
     L("dropdown-context", {
-      close: w,
+      close: S,
       onChildToggle: (e) => {
         X(e), s?.onChildToggle?.(e);
       },
       registerChildId: K,
       unregisterChildId: Q
     }), L("modal-context", null);
-    const k = f(() => l.options ? l.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), O = a([]), E = a(!1), T = a(!1);
+    const k = f(() => l.options ? l.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), w = a([]), E = a(!1), T = a(!1);
     x(
       k,
       (e) => {
         if (e) {
           if (l.remote) {
-            const o = [...O.value];
+            const o = [...w.value];
             e.forEach((n) => {
               o.some((i) => i.value !== void 0 && n.value !== void 0 ? typeof i.value == "object" && i.key && n.key ? i.key === n.key && i.value[i.key] === n.value[n.key] : i.value === n.value : i.label === n.label) || o.push(n);
-            }), O.value = o;
+            }), w.value = o;
           } else
-            O.value = e;
+            w.value = e;
           !E.value && e.length > 0 && (E.value = !0, setTimeout(() => {
             T.value = !0, H(M.value);
           }, 10));
@@ -121,7 +122,7 @@ const He = /* @__PURE__ */ ae({
       { immediate: !0 }
     );
     const c = f(() => {
-      const e = [...O.value], o = new Set(e.map((n) => n.value ?? n.label));
+      const e = [...w.value], o = new Set(e.map((n) => n.value ?? n.label));
       return B.value.forEach((n, d) => {
         o.has(d) || (e.unshift(n), o.add(d));
       }), e;
@@ -129,10 +130,10 @@ const He = /* @__PURE__ */ ae({
       fetchSelected: l.fetchSelected,
       getAvailableOptions: () => c.value,
       isReady: () => T.value
-    }), { getAllRecursiveIds: Z } = Oe(), _ = de({
+    }), { getAllRecursiveIds: Z } = we(), _ = de({
       ...ue(l),
       options: c
-    }), { currentValue: M, selectedLabel: V, selectedIcon: W, selectOption: ee } = Se(
+    }), { currentValue: M, selectedLabel: V, selectedIcon: W, selectOption: ee } = Oe(
       _,
       h
     ), te = f(() => {
@@ -160,7 +161,7 @@ const He = /* @__PURE__ */ ae({
         confirmText: "Confirm",
         cancelText: "Cancel",
         variant: "primary"
-      }, b.value = !0, w()) : (D(e), l.closeOnSelect && (w(), $()));
+      }, b.value = !0, S()) : (D(e), l.closeOnSelect && (S(), $()));
     }, D = (e) => {
       if (l.disabled || l.readonly || e.disabled) return;
       const o = e.value ?? e.label;
@@ -196,8 +197,8 @@ const He = /* @__PURE__ */ ae({
         teleport: t.teleport,
         offset: t.offset,
         placement: q.value,
-        isOpen: p.value,
-        keepAlive: C.value > 0,
+        isOpen: C.value,
+        keepAlive: p.value > 0,
         menuId: I.value,
         ignoreClickOutside: te.value,
         class: "w-full flex!",
@@ -207,6 +208,7 @@ const He = /* @__PURE__ */ ae({
         "onUpdate:isOpen": A,
         triggerClass: "w-full flex items-center",
         styles: {
+          ...t.menuStyles || {},
           padding: "0",
           ...t.width ? { width: t.width, maxWidth: t.width } : {},
           ...t.minWidth ? { minWidth: t.minWidth } : {},
@@ -219,7 +221,7 @@ const He = /* @__PURE__ */ ae({
             selectedIcon: t.showSelectedIcon ? u(W) : void 0,
             isOpen: n
           })), () => [
-            N(Ce, {
+            N(pe, {
               "selected-label": u(V),
               "selected-icon": t.showSelectedIcon ? u(W) : void 0,
               "is-open": n,
@@ -232,7 +234,7 @@ const He = /* @__PURE__ */ ae({
           ])
         ]),
         default: m(() => [
-          !(t.disabled || t.readonly) && (k.value.length || c.value.length || e.$slots.menu || e.$slots.item || e.$slots.default || t.remote || t.searchable) ? (R(), me(pe, {
+          !(t.disabled || t.readonly) && (k.value.length || c.value.length || e.$slots.menu || e.$slots.item || e.$slots.default || t.remote || t.searchable) ? (R(), me(Ce, {
             key: 0,
             options: k.value,
             cachedOptions: c.value,
@@ -256,7 +258,7 @@ const He = /* @__PURE__ */ ae({
             debounceTime: t.debounceTime,
             trigger: t.trigger,
             onSelect: le,
-            onClose: w,
+            onClose: S,
             onLoadMore: o[0] || (o[0] = (n) => e.$emit("load-more")),
             onSearch: o[1] || (o[1] = (n) => e.$emit("search", n))
           }, he({ _: 2 }, [
@@ -293,7 +295,7 @@ const He = /* @__PURE__ */ ae({
         ]),
         _: 3
       }, 8, ["trigger", "disabled", "teleport", "offset", "placement", "isOpen", "keepAlive", "menuId", "ignoreClickOutside", "className", "styles"]),
-      N(we, {
+      N(Se, {
         show: b.value,
         title: r.value.title,
         description: r.value.description,
@@ -305,7 +307,7 @@ const He = /* @__PURE__ */ ae({
       }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text", "variant"]),
       ge("span", {
         ref_key: "focusTrapAfter",
-        ref: S,
+        ref: O,
         tabindex: "-1",
         class: "outline-none pointer-events-none absolute opacity-0 w-0 h-0",
         "aria-hidden": "true"

package/components/FilePicker/FilePicker.vue.d.ts

@@ -41,12 +41,12 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    change: (value: FilePickerValue | FilePickerValue[]) => any;
     error: (error: string) => any;
+    change: (value: FilePickerValue | FilePickerValue[]) => any;
     "update:modelValue": (value: FilePickerValue | FilePickerValue[]) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    onChange?: (value: FilePickerValue | FilePickerValue[]) => any;
     onError?: (error: string) => any;
+    onChange?: (value: FilePickerValue | FilePickerValue[]) => any;
     "onUpdate:modelValue"?: (value: FilePickerValue | FilePickerValue[]) => any;
 }>, {
     variant: "dropzone" | "input";