vlite3 1.4.3 → 1.4.5

package/components/CategoryManager/utils.d.ts

@@ -0,0 +1,3 @@
+import { CategoryItem, RawCategoryItem } from './types';
+export declare const ensureMeta: (list: CategoryItem[], parentId?: string | number | null) => void;
+export declare const buildTreeFromRaw: (items: RawCategoryItem[]) => CategoryItem[];

package/components/CategoryManager/utils.js

@@ -0,0 +1,31 @@
+const d = (t, c = null) => {
+  t.forEach((r, e) => {
+    r.parentId = c, r.position = e, r.children || (r.children = []), d(r.children, r.id);
+  });
+}, i = (t) => {
+  const c = /* @__PURE__ */ new Map(), r = [];
+  t.forEach((n) => {
+    c.set(n.id, {
+      ...n,
+      id: n.id,
+      title: n.name || n.title || "Untitled",
+      icon: n.icon,
+      parentId: n.parentId || null,
+      position: n.position ?? 0,
+      children: []
+    });
+  }), t.forEach((n) => {
+    const o = c.get(n.id);
+    o && (n.parentId && c.has(n.parentId) ? c.get(n.parentId).children.push(o) : r.push(o));
+  });
+  const e = (n) => {
+    n.sort((o, s) => (o.position ?? 0) - (s.position ?? 0)), n.forEach((o) => {
+      o.children && e(o.children);
+    });
+  };
+  return e(r), r;
+};
+export {
+  i as buildTreeFromRaw,
+  d as ensureMeta
+};

package/components/CategoryMenu/CategoryMenu.vue.d.ts

@@ -6,7 +6,9 @@ declare const _default: import('vue').DefineComponent<CategoryMenuProps, {}, {},
 }>, {
     class: string;
     variant: import('./types').CategoryMenuVariant;
+    menuStyles: any;
     items: CategoryMenuItem[];
+    rawData: import('../CategoryManager').RawCategoryItem[];
     mobileBreakpoint: "sm" | "md" | "lg" | "xl";
     maxDepth: number;
     showIcons: boolean;

package/components/CategoryMenu/CategoryMenu.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as y, computed as i, markRaw as r, inject as C, openBlock as m, createElementBlock as B, createBlock as p, unref as E, normalizeClass as f, resolveDynamicComponent as k } from "vue";
-import h from "./CategoryMenuVariant1.vue.js";
-import R from "./CategoryMenuVariant2.vue.js";
-import { CATEGORY_MENU_ROUTE_PREFIX_KEY as A, buildCategoryRoute as D } from "./utils.js";
+import { defineComponent as C, computed as i, markRaw as u, inject as B, openBlock as m, createElementBlock as D, createBlock as f, unref as E, normalizeClass as h, resolveDynamicComponent as S } from "vue";
+import v from "./CategoryMenuVariant1.vue.js";
+import k from "./CategoryMenuVariant2.vue.js";
+import { CATEGORY_MENU_ROUTE_PREFIX_KEY as R, buildCategoryRoute as A } from "./utils.js";
 import P from "../SidebarMenu/SidebarMenu.vue.js";
 /* empty css                              */
 import "vue-router";
@@ -14,15 +14,17 @@ import "../../core/config.js";
 /* empty css                            */
 /* empty css            */
 /* empty css                                  */
-const S = {
+import { buildTreeFromRaw as j } from "../CategoryManager/utils.js";
+const L = {
   key: 0,
   class: "w-full text-center text-xs text-muted-foreground py-3"
-}, j = {
+}, M = {
   name: "CategoryMenu"
-}, Q = /* @__PURE__ */ y({
-  ...j,
+}, Z = /* @__PURE__ */ C({
+  ...M,
   props: {
     items: { default: () => [] },
+    rawData: { default: void 0 },
     variant: { default: "tabs" },
     maxDepth: { default: 2 },
     showIcons: { type: Boolean, default: !0 },
@@ -35,72 +37,76 @@ const S = {
     megaColumns: { default: 4 },
     showImages: { type: Boolean, default: !0 },
     showDescriptions: { type: Boolean, default: !0 },
-    class: { default: "" }
+    class: { default: "" },
+    menuStyles: { default: {} }
   },
   emits: ["select"],
-  setup(v, { emit: w }) {
-    const e = v, s = w, x = i(() => {
+  setup(w, { emit: g }) {
+    const e = w, n = g, l = i(() => e.rawData && e.rawData.length > 0 ? j(e.rawData) : e.items || []);
+    console.log(l.value);
+    const x = i(() => {
       switch (e.variant) {
         case "tabs":
-          return r(h);
+          return u(v);
         case "mega":
-          return r(R);
+          return u(k);
         default:
-          return r(h);
+          return u(v);
       }
-    }), a = C(
-      A,
+    }), o = B(
+      R,
       void 0
-    ), o = i(() => {
-      const l = typeof a == "object" && a && "value" in a ? a.value : a;
-      return String(e.routePrefix || l || "");
-    }), g = i(() => {
+    ), s = i(() => {
+      const a = typeof o == "object" && o && "value" in o ? o.value : o;
+      return String(e.routePrefix || a || "");
+    }), y = i(() => {
       if (e.variant !== "sidebar") return [];
-      const l = (t, c = []) => {
-        const d = t.children && t.children.length > 0 ? t.children.map((b) => l(b, [...c, t])) : void 0, u = !!d?.length;
+      const a = (t, d = []) => {
+        const c = t.children && t.children.length > 0 ? t.children.map((_) => a(_, [...d, t])) : void 0, p = !!c?.length;
         return {
           id: t.id !== void 0 ? String(t.id) : void 0,
           label: t.title || t.name || "Untitled",
-          to: u ? void 0 : D(o.value, t, c),
+          to: p ? void 0 : A(s.value, t, d),
           icon: e.showIcons ? t.icon : void 0,
           badge: t.badge,
-          children: d,
+          children: c,
           // Parent nodes are expanders in tree/sidebar mode; leaves select/navigate.
-          action: u ? void 0 : () => s("select", t)
+          action: p ? void 0 : () => n("select", t)
         };
-      }, n = e.items.map((t) => l(t));
-      return e.showAllItem && n.unshift({
+      }, r = l.value.map((t) => a(t));
+      return e.showAllItem && r.unshift({
         id: "all",
         label: e.allItemLabel,
-        to: o.value ? o.value : void 0,
+        to: s.value ? s.value : void 0,
         icon: e.showIcons ? "lucide:layout-grid" : void 0,
-        action: () => s("select", { id: "all", title: e.allItemLabel })
-      }), n;
-    }), I = (l) => s("select", l), _ = i(() => !e.items || e.items.length === 0);
-    return (l, n) => _.value ? (m(), B("div", S, " No categories to display. ")) : e.variant === "sidebar" ? (m(), p(E(P), {
+        action: () => n("select", { id: "all", title: e.allItemLabel })
+      }), r;
+    }), I = (a) => n("select", a), b = i(() => !l.value || l.value.length === 0);
+    return (a, r) => b.value ? (m(), D("div", L, " No categories to display. ")) : e.variant === "sidebar" ? (m(), f(E(P), {
       key: 1,
-      items: g.value,
+      items: y.value,
       "allow-multiple": e.multiExpand,
       "default-expanded": e.activeId ? [String(e.activeId)] : [],
-      class: f(e.class)
-    }, null, 8, ["items", "allow-multiple", "default-expanded", "class"])) : (m(), p(k(x.value), {
+      class: h(e.class)
+    }, null, 8, ["items", "allow-multiple", "default-expanded", "class"])) : (m(), f(S(x.value), {
       key: 2,
-      items: e.items,
+      items: l.value,
       "max-depth": e.maxDepth,
       "show-icons": e.showIcons,
       "show-all-item": e.showAllItem,
       "all-item-label": e.allItemLabel,
       "multi-expand": e.multiExpand,
       "active-id": e.activeId,
-      "route-prefix": o.value,
+      "route-prefix": s.value,
       "mega-columns": e.megaColumns,
+      menuStyles: e.menuStyles,
       "show-images": e.showImages,
       "show-descriptions": e.showDescriptions,
-      class: f(e.class),
+      class: h(e.class),
       onSelect: I
-    }, null, 40, ["items", "max-depth", "show-icons", "show-all-item", "all-item-label", "multi-expand", "active-id", "route-prefix", "mega-columns", "show-images", "show-descriptions", "class"]));
+    }, null, 40, ["items", "max-depth", "show-icons", "show-all-item", "all-item-label", "multi-expand", "active-id", "route-prefix", "mega-columns", "menuStyles", "show-images", "show-descriptions", "class"]));
   }
 });
 export {
-  Q as default
+  Z as default
 };

package/components/CategoryMenu/CategoryMenuVariant1.vue.d.ts

@@ -8,10 +8,14 @@ interface Props {
     activeId: string | number | null | undefined;
     routePrefix?: string;
     class?: string;
+    menuStyles?: object;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     select: (item: import('../CategoryManager').CategoryItem) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onSelect?: (item: import('../CategoryManager').CategoryItem) => any;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    scrollRef: HTMLDivElement;
+    scrollContentRef: HTMLDivElement;
+}, HTMLElement>;
 export default _default;

package/components/CategoryMenu/CategoryMenuVariant1.vue.js

@@ -1,146 +1,7 @@
-import { defineComponent as R, computed as L, ref as V, openBlock as t, createElementBlock as s, normalizeClass as P, createElementVNode as a, createBlock as l, resolveDynamicComponent as v, mergeProps as k, withCtx as p, createTextVNode as E, toDisplayString as m, createCommentVNode as i, Fragment as d, renderList as _, unref as $ } from "vue";
-import N from "../Dropdown/Dropdown.vue.js";
-import h from "../Icon.vue.js";
-import "../../core/config.js";
-/* empty css            */
-/* empty css                                    */
-/* empty css                            */
-import { normalizeRoutePrefix as S, categoriesToDropdownOptions as z, buildCategoryRoute as O } from "./utils.js";
-const T = {
-  class: "flex items-center gap-1 overflow-x-auto py-2 -mx-1 px-1 scrollbar-thin",
-  style: { "will-change": "transform", contain: "layout style" }
-}, F = { class: "truncate max-w-[180px]" }, H = { class: "truncate max-w-[180px]" }, M = { class: "sm:hidden border-t border-border" }, j = {
-  key: 0,
-  class: "px-2 py-2 bg-muted/30"
-}, q = { class: "flex-1 truncate" }, ee = /* @__PURE__ */ R({
-  __name: "CategoryMenuVariant1",
-  props: {
-    items: {},
-    maxDepth: {},
-    showIcons: { type: Boolean },
-    showAllItem: { type: Boolean },
-    allItemLabel: {},
-    activeId: {},
-    routePrefix: {},
-    class: {}
-  },
-  emits: ["select"],
-  setup(B, { emit: A }) {
-    const o = B, f = A, w = L(() => o.items || []), b = V(null), C = L(() => S(o.routePrefix)), I = (n) => {
-      const c = n.option?.data;
-      f("select", c || n);
-    }, D = () => {
-      f("select", { id: "all", title: o.allItemLabel });
-    }, u = (n, c = []) => O(o.routePrefix, n, c), x = (n) => n ? "router-link" : "button", g = (n) => n ? { to: n } : { type: "button" }, y = (n) => o.activeId ? n.id === o.activeId || (n.children || []).some((c) => y(c)) : !1;
-    return (n, c) => (t(), s("nav", {
-      class: P(["relative w-full", o.class]),
-      role: "navigation",
-      "aria-label": "Categories"
-    }, [
-      a("div", T, [
-        o.showAllItem ? (t(), l(v(x(C.value)), k({ key: 0 }, g(C.value), {
-          class: "shrink-0 px-3 py-1.5 text-sm font-medium rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors",
-          onClick: D
-        }), {
-          default: p(() => [
-            E(m(o.allItemLabel), 1)
-          ]),
-          _: 1
-        }, 16)) : i("", !0),
-        (t(!0), s(d, null, _(w.value, (e) => (t(), s(d, {
-          key: e.id
-        }, [
-          e.children && e.children.length > 0 ? (t(), l($(N), {
-            key: 0,
-            options: $(z)(e.children, o.routePrefix, [e]),
-            maxHeight: "500px",
-            "close-on-select": !0,
-            searchable: !1,
-            "show-selected-label": !1,
-            "show-selected-icon": !1,
-            selectable: !0,
-            placement: "bottom-start",
-            offset: [0, 6],
-            "menu-id": `cat-menu-tabs-${e.id}`,
-            "nested-position": "right-start",
-            "nested-offset": [0, -5],
-            trigger: "hover",
-            class: "shrink-0",
-            onOnSelect: I
-          }, {
-            trigger: p(({ isOpen: r }) => [
-              a("button", {
-                type: "button",
-                class: P([
-                  "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
-                  y(e) || r ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-accent"
-                ])
-              }, [
-                o.showIcons && e.icon ? (t(), l(h, {
-                  key: 0,
-                  icon: e.icon,
-                  class: "w-3.5 h-3.5 shrink-0"
-                }, null, 8, ["icon"])) : i("", !0),
-                a("span", F, m(e.title || e.name), 1),
-                e.children && e.children.length > 0 ? (t(), l(h, {
-                  key: 1,
-                  icon: "lucide:chevron-down",
-                  class: "w-3 h-3 opacity-70 shrink-0"
-                })) : i("", !0)
-              ], 2)
-            ]),
-            _: 2
-          }, 1032, ["options", "menu-id"])) : (t(), l(v(x(u(e))), k({
-            key: 1,
-            ref_for: !0
-          }, g(u(e)), {
-            class: [
-              "shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
-              y(e) ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-accent"
-            ],
-            onClick: (r) => f("select", e)
-          }), {
-            default: p(() => [
-              o.showIcons && e.icon ? (t(), l(h, {
-                key: 0,
-                icon: e.icon,
-                class: "w-3.5 h-3.5 shrink-0"
-              }, null, 8, ["icon"])) : i("", !0),
-              a("span", H, m(e.title || e.name), 1)
-            ]),
-            _: 2
-          }, 1040, ["class", "onClick"]))
-        ], 64))), 128))
-      ]),
-      a("div", M, [
-        (t(!0), s(d, null, _(w.value, (e) => (t(), s(d, {
-          key: `m-${e.id}`
-        }, [
-          b.value === e.id && e.children ? (t(), s("div", j, [
-            (t(!0), s(d, null, _(e.children, (r) => (t(), l(v(x(u(r, [e]))), k({
-              key: r.id
-            }, { ref_for: !0 }, g(u(r, [e])), {
-              class: "w-full flex items-center gap-2 px-3 py-2 text-sm rounded-md text-foreground/90 hover:bg-accent text-left",
-              onClick: (G) => {
-                I({ value: r.id, option: { data: r } }), b.value = null;
-              }
-            }), {
-              default: p(() => [
-                o.showIcons && r.icon ? (t(), l(h, {
-                  key: 0,
-                  icon: r.icon,
-                  class: "w-4 h-4 shrink-0 opacity-80"
-                }, null, 8, ["icon"])) : i("", !0),
-                a("span", q, m(r.title || r.name), 1)
-              ]),
-              _: 2
-            }, 1040, ["onClick"]))), 128))
-          ])) : i("", !0)
-        ], 64))), 128))
-      ])
-    ], 2));
-  }
-});
+import o from "./CategoryMenuVariant1.vue2.js";
+/* empty css                          */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-4d803b88"]]);
 export {
-  ee as default
+  m as default
 };

package/components/CategoryMenu/CategoryMenuVariant1.vue2.js

@@ -1,4 +1,222 @@
-import f from "./CategoryMenuVariant1.vue.js";
+import { defineComponent as F, computed as D, ref as m, onMounted as H, nextTick as N, watch as q, openBlock as n, createElementBlock as a, normalizeClass as T, createElementVNode as s, createVNode as g, Transition as E, withCtx as u, createCommentVNode as i, createBlock as c, resolveDynamicComponent as C, mergeProps as S, createTextVNode as G, toDisplayString as v, Fragment as p, renderList as I, unref as O } from "vue";
+import { useResizeObserver as W } from "@vueuse/core";
+import J from "../Dropdown/Dropdown.vue.js";
+import d from "../Icon.vue.js";
+import "../../core/config.js";
+/* empty css            */
+/* empty css                                    */
+/* empty css                            */
+import { normalizeRoutePrefix as K, categoriesToDropdownOptions as Q, buildCategoryRoute as U } from "./utils.js";
+const X = { class: "relative w-full max-w-full min-w-0 overflow-hidden flex items-center group" }, Y = {
+  key: 0,
+  class: "absolute left-0 inset-y-0 z-10 flex items-center pointer-events-none"
+}, Z = { class: "truncate max-w-[180px]" }, ee = { class: "truncate max-w-[180px]" }, te = {
+  key: 0,
+  class: "absolute right-0 inset-y-0 z-10 flex items-center justify-end pointer-events-none"
+}, oe = { class: "sm:hidden border-t border-border" }, ne = {
+  key: 0,
+  class: "px-2 py-2 bg-muted/30"
+}, le = { class: "flex-1 truncate" }, he = /* @__PURE__ */ F({
+  __name: "CategoryMenuVariant1",
+  props: {
+    items: {},
+    maxDepth: {},
+    showIcons: { type: Boolean },
+    showAllItem: { type: Boolean },
+    allItemLabel: {},
+    activeId: {},
+    routePrefix: {},
+    class: {},
+    menuStyles: {}
+  },
+  emits: ["select"],
+  setup(L, { emit: M }) {
+    const l = L, y = M, b = D(() => l.items || []), R = m(null), $ = D(() => K(l.routePrefix)), h = m(null), B = m(null), P = m(!1), z = m(!1), f = () => {
+      const t = h.value;
+      t && (P.value = t.scrollLeft > 2, z.value = t.scrollLeft + t.clientWidth < t.scrollWidth - 2);
+    }, V = (t) => {
+      const o = h.value;
+      if (!o) return;
+      const e = o.clientWidth * 0.6;
+      o.scrollBy({ left: t === "right" ? e : -e, behavior: "smooth" });
+    };
+    W(h, f), W(B, f), H(async () => {
+      await N(), f();
+    }), q(
+      () => b.value,
+      () => N(f),
+      { deep: !0 }
+    );
+    const A = (t) => {
+      const o = t.option?.data;
+      y("select", o || t);
+    }, j = () => {
+      y("select", { id: "all", title: l.allItemLabel });
+    }, x = (t, o = []) => U(l.routePrefix, t, o), k = (t) => t ? "router-link" : "button", w = (t) => t ? { to: t } : { type: "button" }, _ = (t) => l.activeId ? t.id === l.activeId || (t.children || []).some((o) => _(o)) : !1;
+    return (t, o) => (n(), a("nav", {
+      class: T(["relative w-full max-w-full min-w-0 overflow-hidden", l.class]),
+      role: "navigation",
+      "aria-label": "Categories"
+    }, [
+      s("div", X, [
+        g(E, { name: "fade-x" }, {
+          default: u(() => [
+            P.value ? (n(), a("div", Y, [
+              o[2] || (o[2] = 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] = (e) => V("left"))
+              }, [
+                g(d, {
+                  icon: "lucide:chevron-left",
+                  class: "w-4 h-4"
+                })
+              ])
+            ])) : i("", !0)
+          ]),
+          _: 1
+        }),
+        s("div", {
+          ref_key: "scrollRef",
+          ref: h,
+          class: "flex-1 min-w-0 max-w-full overflow-x-auto category-tabs-no-scrollbar scroll-smooth",
+          style: { "will-change": "transform", contain: "layout style" },
+          onScroll: f
+        }, [
+          s("div", {
+            ref_key: "scrollContentRef",
+            ref: B,
+            class: "flex w-max min-w-full items-center gap-1 py-2 px-1"
+          }, [
+            l.showAllItem ? (n(), c(C(k($.value)), S({ key: 0 }, w($.value), {
+              class: "shrink-0 px-3 py-1.5 text-sm font-medium rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors",
+              onClick: j
+            }), {
+              default: u(() => [
+                G(v(l.allItemLabel), 1)
+              ]),
+              _: 1
+            }, 16)) : i("", !0),
+            (n(!0), a(p, null, I(b.value, (e) => (n(), a(p, {
+              key: e.id
+            }, [
+              e.children && e.children.length > 0 ? (n(), c(O(J), {
+                key: 0,
+                options: O(Q)(e.children, l.routePrefix, [e]),
+                maxHeight: "500px",
+                "close-on-select": !0,
+                searchable: !1,
+                "show-selected-label": !1,
+                "show-selected-icon": !1,
+                menuStyles: L.menuStyles,
+                selectable: !0,
+                placement: "bottom-start",
+                offset: [0, 6],
+                "menu-id": `cat-menu-tabs-${e.id}`,
+                "nested-position": "right-start",
+                "nested-offset": [0, -5],
+                trigger: "hover",
+                class: "shrink-0",
+                onOnSelect: A
+              }, {
+                trigger: u(({ isOpen: r }) => [
+                  s("button", {
+                    type: "button",
+                    class: T([
+                      "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+                      _(e) || r ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                    ])
+                  }, [
+                    l.showIcons && e.icon ? (n(), c(d, {
+                      key: 0,
+                      icon: e.icon,
+                      class: "w-3.5 h-3.5 shrink-0"
+                    }, null, 8, ["icon"])) : i("", !0),
+                    s("span", Z, v(e.title || e.name), 1),
+                    e.children && e.children.length > 0 ? (n(), c(d, {
+                      key: 1,
+                      icon: "lucide:chevron-down",
+                      class: "w-3 h-3 opacity-70 shrink-0"
+                    })) : i("", !0)
+                  ], 2)
+                ]),
+                _: 2
+              }, 1032, ["options", "menuStyles", "menu-id"])) : (n(), c(C(k(x(e))), S({
+                key: 1,
+                ref_for: !0
+              }, w(x(e)), {
+                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"
+                ],
+                onClick: (r) => y("select", e)
+              }), {
+                default: u(() => [
+                  l.showIcons && e.icon ? (n(), c(d, {
+                    key: 0,
+                    icon: e.icon,
+                    class: "w-3.5 h-3.5 shrink-0"
+                  }, null, 8, ["icon"])) : i("", !0),
+                  s("span", ee, v(e.title || e.name), 1)
+                ]),
+                _: 2
+              }, 1040, ["class", "onClick"]))
+            ], 64))), 128))
+          ], 512)
+        ], 544),
+        g(E, { name: "fade-x" }, {
+          default: u(() => [
+            z.value ? (n(), a("div", te, [
+              o[3] || (o[3] = 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] = (e) => V("right"))
+              }, [
+                g(d, {
+                  icon: "lucide:chevron-right",
+                  class: "w-4 h-4"
+                })
+              ])
+            ])) : i("", !0)
+          ]),
+          _: 1
+        })
+      ]),
+      s("div", oe, [
+        (n(!0), a(p, null, I(b.value, (e) => (n(), a(p, {
+          key: `m-${e.id}`
+        }, [
+          R.value === e.id && e.children ? (n(), a("div", ne, [
+            (n(!0), a(p, null, I(e.children, (r) => (n(), c(C(k(x(r, [e]))), S({
+              key: r.id
+            }, { ref_for: !0 }, w(x(r, [e])), {
+              class: "w-full flex items-center gap-2 px-3 py-2 text-sm rounded-md text-foreground/90 hover:bg-accent text-left",
+              onClick: (re) => {
+                A({ value: r.id, option: { data: r } }), R.value = null;
+              }
+            }), {
+              default: u(() => [
+                l.showIcons && r.icon ? (n(), c(d, {
+                  key: 0,
+                  icon: r.icon,
+                  class: "w-4 h-4 shrink-0 opacity-80"
+                }, null, 8, ["icon"])) : i("", !0),
+                s("span", le, v(r.title || r.name), 1)
+              ]),
+              _: 2
+            }, 1040, ["onClick"]))), 128))
+          ])) : i("", !0)
+        ], 64))), 128))
+      ])
+    ], 2));
+  }
+});
 export {
-  f as default
+  he as default
 };

package/components/CategoryMenu/CategoryMenuVariant2.vue.d.ts

@@ -9,10 +9,14 @@ interface Props {
     activeId: string | number | null | undefined;
     routePrefix?: string;
     class?: string;
+    menuStyles?: object;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     select: (item: import('../CategoryManager').CategoryItem) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onSelect?: (item: import('../CategoryManager').CategoryItem) => any;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    scrollRef: HTMLDivElement;
+    scrollContentRef: HTMLDivElement;
+}, HTMLElement>;
 export default _default;