vlite3 1.4.1 → 1.4.2

package/components/CategoryMenu/CategoryMenuVariant1.vue.js

@@ -0,0 +1,146 @@
+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 bg-card", 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));
+  }
+});
+export {
+  ee as default
+};

package/components/CategoryMenu/CategoryMenuVariant1.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CategoryMenuVariant1.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,18 @@
+import { CategoryMenuItem } from './types';
+interface Props {
+    items: CategoryMenuItem[];
+    maxDepth: number;
+    showIcons: boolean;
+    showImages: boolean;
+    showDescriptions: boolean;
+    megaColumns: number;
+    activeId: string | number | null | undefined;
+    routePrefix?: string;
+    class?: string;
+}
+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>;
+export default _default;

package/components/CategoryMenu/CategoryMenuVariant2.vue.js

@@ -0,0 +1,162 @@
+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));
+  }
+});
+export {
+  ce as default
+};

package/components/CategoryMenu/CategoryMenuVariant2.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CategoryMenuVariant2.vue.js";
+export {
+  f as default
+};

package/components/CategoryMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CategoryMenu } from './CategoryMenu.vue';
+export type { CategoryMenuProps, CategoryMenuVariant, CategoryMenuItem, } from './types';

package/components/CategoryMenu/types.d.ts

@@ -0,0 +1,32 @@
+import { CategoryItem } from '../CategoryManager/types';
+export type CategoryMenuVariant = 'tabs' | 'mega' | 'sidebar';
+export type CategoryMenuItem = CategoryItem;
+export interface CategoryMenuProps {
+    /** Hierarchical category tree. Accepts the same shape as `CategoryManager`. */
+    items?: CategoryMenuItem[];
+    /** Layout variant. See {@link CategoryMenuVariant}. */
+    variant?: CategoryMenuVariant;
+    /** Maximum depth to render. `1` = top-level only. Defaults to `2`. */
+    maxDepth?: number;
+    /** Whether to render the icon prefix on each item. Defaults to `true`. */
+    showIcons?: boolean;
+    /** Show an "All" / "Shop all" pseudo-item at the start. */
+    showAllItem?: boolean;
+    /** Label for the "All" item (only used when `showAllItem` is true). */
+    allItemLabel?: string;
+    /** When `true`, multiple parent categories can be open at once (sidebar/accordion). */
+    multiExpand?: boolean;
+    /** Active category id (highlights the matching node). */
+    activeId?: string | number | null;
+    /** Route prefix used to auto-generate Vue Router links for every category. */
+    routePrefix?: string;
+    /** Tailwind breakpoint where the desktop mega menu collapses to mobile. */
+    mobileBreakpoint?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Number of columns in the mega menu. Defaults to `4`. */
+    megaColumns?: number;
+    /** Whether to render the category image in mega-menu columns. */
+    showImages?: boolean;
+    /** Whether to render the description in mega-menu columns. */
+    showDescriptions?: boolean;
+    class?: string;
+}

package/components/CategoryMenu/utils.d.ts

@@ -0,0 +1,16 @@
+import { IDropdownOption } from '../../types';
+import { CategoryMenuItem } from './types';
+export declare const CATEGORY_MENU_ROUTE_PREFIX_KEY: unique symbol;
+export declare function slugifyCategorySegment(value: unknown): string;
+export declare function normalizeRoutePrefix(prefix?: string | null): string;
+export declare function buildCategoryRoute(routePrefix: string | undefined | null, item: CategoryMenuItem, ancestors?: CategoryMenuItem[]): string | undefined;
+/**
+ * Convert a single CategoryMenuItem into an IDropdownOption.
+ * Preserves the original item on `option.data` so consumers can recover
+ * it from `@on-select` payloads.
+ */
+export declare function categoryToDropdownOption(item: CategoryMenuItem, routePrefix?: string, ancestors?: CategoryMenuItem[]): IDropdownOption;
+/**
+ * Convert a CategoryMenuItem[] tree to an IDropdownOption[] list.
+ */
+export declare function categoriesToDropdownOptions(items: CategoryMenuItem[], routePrefix?: string, ancestors?: CategoryMenuItem[]): IDropdownOption[];

package/components/CategoryMenu/utils.js

@@ -0,0 +1,45 @@
+const d = /* @__PURE__ */ Symbol("category-menu-route-prefix"), i = (n) => String(n.slug || n.title || n.name || n.label || n.id || "category");
+function c(n) {
+  return String(n ?? "").normalize("NFKD").replace(/[\u0300-\u036f]/g, "").replace(/&/g, " and ").toLowerCase().trim().replace(/['"]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function g(n) {
+  if (!n) return "";
+  const r = n.trim();
+  return r ? (r.startsWith("/") ? r : `/${r}`).replace(/\/+$/g, "") : "";
+}
+function u(n, r, e = []) {
+  const o = g(n);
+  if (!o) return;
+  const t = [...e, r].map((l) => c(i(l))).filter(Boolean).join("-");
+  return t ? `${o}/${t}` : o;
+}
+function a(n, r, e = []) {
+  return {
+    label: n.title || n.name || "Untitled",
+    to: u(r, n, e),
+    value: n.id,
+    icon: n.icon,
+    description: n.description,
+    badge: n.badge,
+    // Preserve any consumer-specific fields by attaching the original item.
+    // The Dropdown passes `option` through `@on-select`, so the consumer
+    // can do `option.data` to recover the original CategoryMenuItem.
+    data: n,
+    // Recursively convert children — Dropdown's nested-Dropdown machinery
+    // picks these up automatically and renders them in a side popover.
+    children: n.children && n.children.length > 0 ? n.children.map(
+      (o) => a(o, r, [...e, n])
+    ) : void 0
+  };
+}
+function p(n, r, e = []) {
+  return (n || []).map((o) => a(o, r, e));
+}
+export {
+  d as CATEGORY_MENU_ROUTE_PREFIX_KEY,
+  u as buildCategoryRoute,
+  p as categoriesToDropdownOptions,
+  a as categoryToDropdownOption,
+  g as normalizeRoutePrefix,
+  c as slugifyCategorySegment
+};

package/components/ColorPicker/ColorIro.vue3.js

@@ -1,5 +1,5 @@
-import o from "./ColorIro.vue2.js";
-/* empty css             */
+import o from "./ColorIro.vue.js";
+/* empty css              */
 export {
   o as default
 };

package/components/ColorPicker/ColorPicker.vue.d.ts

@@ -1,9 +1,11 @@
 import { TooltTipPlacement } from 'v-tooltip-lite/types';
-import { ButtonProps } from '../../types';
+import { ButtonProps, InputSize, InputVariant, InputRounded } from '../../types';
 interface Props {
     modelValue?: string;
     disabled?: boolean;
-    size?: 'sm' | 'md' | 'lg';
+    size?: InputSize;
+    variant?: InputVariant;
+    rounded?: InputRounded;
     position?: TooltTipPlacement;
     btnProps?: ButtonProps;
     showInput?: boolean;
@@ -15,7 +17,9 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     onChange?: (value: string) => any;
     "onUpdate:modelValue"?: (value: string) => any;
 }>, {
-    size: "sm" | "md" | "lg";
+    variant: InputVariant;
+    size: InputSize;
+    rounded: InputRounded;
     disabled: boolean;
     modelValue: string;
     position: TooltTipPlacement;

package/components/ColorPicker/ColorPicker.vue.js

@@ -1,97 +1,111 @@
-import { defineComponent as z, ref as p, watch as i, openBlock as a, createBlock as f, unref as v, withCtx as u, createElementBlock as h, createVNode as m, createCommentVNode as c, createElementVNode as $, mergeProps as w } from "vue";
-import B from "../Dropdown/Dropdown.vue.js";
+import { defineComponent as C, ref as p, watch as d, openBlock as s, createBlock as v, unref as b, withCtx as u, createElementBlock as h, createVNode as c, createCommentVNode as m, createElementVNode as n, normalizeClass as $, normalizeStyle as B } from "vue";
+import O from "../Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
-import O from "../Input.vue.js";
+import y from "../Input.vue.js";
 /* empty css            */
 import "../../core/config.js";
+/* empty css                                    */
 /* empty css                            */
-import y from "../Button.vue.js";
-import E from "./ColorIro.vue2.js";
-/* empty css             */
-import { useEyeDropper as P } from "@vueuse/core";
-const I = {
+import E from "../Button.vue.js";
+import _ from "./ColorIro.vue.js";
+/* empty css              */
+import { useEyeDropper as I } from "@vueuse/core";
+const N = { class: "absolute left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center z-20 pointer-events-none" }, j = {
   key: 0,
   class: "p-1 w-max flex flex-col justify-center"
-}, N = {
+}, D = {
   key: 0,
   class: "flex items-center gap-1.5 w-full"
-}, D = { class: "w-32" }, L = /* @__PURE__ */ z({
+}, P = { class: "w-32" }, T = /* @__PURE__ */ C({
   __name: "ColorPicker",
   props: {
     modelValue: { default: "#000000" },
     disabled: { type: Boolean, default: !1 },
     size: { default: "md" },
+    variant: { default: "outline" },
+    rounded: { default: "md" },
     position: { default: "bottom" },
     btnProps: {},
     showInput: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue", "change"],
-  setup(o, { emit: V }) {
-    const r = o, d = V, n = p(!1), t = p(r.modelValue || "#000000"), { isSupported: b, open: g, sRGBHex: k } = P();
-    i(k, (e) => {
+  setup(o, { emit: x }) {
+    const i = o, f = x, r = p(!1), t = p(i.modelValue || "#000000"), { isSupported: V, open: g, sRGBHex: k } = I();
+    d(k, (e) => {
       e && (t.value = e);
     });
-    const x = async () => {
+    const z = async () => {
       try {
         await g();
       } catch (e) {
         console.error("Error opening eyedropper:", e);
       }
     };
-    i(
-      () => r.modelValue,
+    d(
+      () => i.modelValue,
       (e) => {
         e && e !== t.value && (t.value = e);
       }
-    ), i(t, (e) => {
-      /^#([0-9A-F]{3,8})$/i.test(e) && e !== r.modelValue && (d("update:modelValue", e), d("change", e));
+    ), d(t, (e) => {
+      /^#([0-9A-F]{3,8})$/i.test(e) && e !== i.modelValue && (f("update:modelValue", e), f("change", e));
     });
-    const C = (e) => {
+    const w = (e) => {
       t.value = e;
     };
-    return (e, l) => (a(), f(v(B), {
+    return (e, l) => (s(), v(b(O), {
       disabled: o.disabled,
-      class: "w-auto",
+      class: "w-full",
       position: o.position,
       offset: [0, 8],
       searchable: !1,
       "close-on-select": !1,
-      onOnOpen: l[1] || (l[1] = (s) => n.value = !0),
-      onOnClose: l[2] || (l[2] = (s) => n.value = !1)
+      onOnOpen: l[1] || (l[1] = (a) => r.value = !0),
+      onOnClose: l[2] || (l[2] = (a) => r.value = !1)
     }, {
-      trigger: u(({ isOpen: s }) => [
-        m(y, w({
-          style: { backgroundColor: o.modelValue }
-        }, {
-          rounded: "full",
-          size: "xs",
-          icon: " ",
-          variant: "outline",
-          ...o.btnProps || {}
-        }), null, 16, ["style"])
+      trigger: u(({ isOpen: a }) => [
+        n("div", {
+          class: $(["w-full relative cursor-pointer", [o.disabled ? "opacity-50 pointer-events-none" : ""]])
+        }, [
+          c(y, {
+            "model-value": o.modelValue,
+            readonly: "",
+            disabled: o.disabled,
+            size: o.size,
+            variant: o.variant,
+            rounded: o.rounded,
+            class: "pointer-events-none",
+            "input-class": "pl-9 font-mono uppercase cursor-pointer"
+          }, null, 8, ["model-value", "disabled", "size", "variant", "rounded"]),
+          n("div", N, [
+            n("div", {
+              class: "w-4 h-4 rounded-full shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]",
+              style: B({ backgroundColor: o.modelValue })
+            }, null, 4)
+          ])
+        ], 2)
       ]),
       default: u(() => [
-        n.value ? (a(), h("div", I, [
-          m(E, {
+        r.value ? (s(), h("div", j, [
+          c(_, {
             color: o.modelValue,
             "show-header": !1,
             size: o.size,
-            "onUpdate:color": C
+            "onUpdate:color": w
           }, {
             bottom: u(() => [
-              o.showInput ? (a(), h("div", N, [
-                v(b) ? (a(), f(y, {
+              o.showInput ? (s(), h("div", D, [
+                b(V) ? (s(), v(E, {
                   key: 0,
-                  onClick: x,
+                  onClick: z,
                   icon: "pepicons-pop:color-picker",
                   variant: "outline",
                   size: "sm",
                   class: "px-2 shrink-0"
-                })) : c("", !0),
-                $("div", D, [
-                  m(O, {
+                })) : m("", !0),
+                n("div", P, [
+                  c(y, {
                     modelValue: t.value,
-                    "onUpdate:modelValue": l[0] || (l[0] = (s) => t.value = s),
+                    "onUpdate:modelValue": l[0] || (l[0] = (a) => t.value = a),
                     size: "sm",
                     "show-clear-button": !1,
                     placeholder: "#000000",
@@ -99,16 +113,16 @@ const I = {
                     "input-class": "font-mono text-xs uppercase "
                   }, null, 8, ["modelValue"])
                 ])
-              ])) : c("", !0)
+              ])) : m("", !0)
             ]),
             _: 1
           }, 8, ["color", "size"])
-        ])) : c("", !0)
+        ])) : m("", !0)
       ]),
       _: 1
     }, 8, ["disabled", "position"]));
   }
 });
 export {
-  L as default
+  T as default
 };

package/components/CommandPalette/CommandPaletteContent.vue2.js

@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
 import { $t as E } from "../../utils/i18n.js";
 import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
 import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
-import ee from "./CommandPaletteItem.vue2.js";
+import ee from "./CommandPaletteItem.vue.js";
 const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/80 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
   key: 0,
   class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",