vlite3 0.5.6 → 0.5.7

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,32 +1,33 @@
-import { defineComponent as Z, defineAsyncComponent as ee, ref as j, computed as h, watch as T, onMounted as te, onBeforeUnmount as le, openBlock as n, createElementBlock as c, createVNode as S, createCommentVNode as u, renderSlot as b, unref as o, normalizeStyle as se, normalizeClass as _, toDisplayString as D, createBlock as v, Fragment as E, renderList as ne, withCtx as N, createElementVNode as $, createSlots as oe, mergeProps as re, nextTick as ae } from "vue";
-import I from "../Icon.vue.js";
+import { defineComponent as ee, ref as B, computed as v, watch as C, onMounted as te, onBeforeUnmount as le, openBlock as n, createElementBlock as c, createVNode as j, createCommentVNode as d, renderSlot as b, unref as r, normalizeStyle as se, normalizeClass as T, toDisplayString as E, createBlock as m, Fragment as N, renderList as ne, withCtx as P, createElementVNode as S, createSlots as oe, mergeProps as re, nextTick as ae } from "vue";
+import O from "../Icon.vue.js";
 import ce from "../Input.vue.js";
 /* empty css            */
-import de from "./DropdownItem.vue.js";
-import ie from "./DropdownBooleanItem.vue.js";
+import ie from "./DropdownItem.vue.js";
+import de from "./DropdownBooleanItem.vue.js";
 import ue from "./DropdownGroupedLayout.vue.js";
 import { useDropdownNavigation as fe } from "./composables/useDropdownNavigation.js";
 import { useDropdownIds as me } from "./composables/useDropdownIds.js";
-import { $t as M } from "../../utils/i18n.js";
-const he = ["dir"], ve = {
+import { $t as $ } from "../../utils/i18n.js";
+import he from "./Dropdown.vue.js";
+const ve = ["dir"], ye = {
   key: 0,
   class: "bg-body border-b z-10 rounded-t-md shrink-0"
-}, ye = {
+}, ge = {
   key: 1,
   class: "shrink-0"
-}, ge = {
+}, be = {
   key: 0,
   class: "px-2 py-6 text-center text-sm text-muted-foreground"
-}, be = {
+}, ke = {
   key: 0,
   class: "h-px bg-border my-1 mx-1"
-}, ke = ["onMouseenter"], we = { class: "flex items-center gap-2 flex-1 min-w-0" }, pe = { class: "truncate" }, xe = {
+}, we = ["onMouseenter"], pe = { class: "flex items-center gap-2 flex-1 min-w-0" }, xe = { class: "truncate" }, Se = {
   key: 3,
   class: "flex justify-center py-2"
-}, Se = {
+}, Oe = {
   key: 3,
   class: "shrink-0"
-}, Ee = /* @__PURE__ */ Z({
+}, Ve = /* @__PURE__ */ ee({
   __name: "DropdownMenu",
   props: {
     options: { default: () => [] },
@@ -48,21 +49,21 @@ const he = ["dir"], ve = {
     direction: { default: "ltr" }
   },
   emits: ["select", "close", "load-more", "search"],
-  setup(r, { emit: V }) {
-    const P = ee(() => import("./Dropdown.vue2.js")), t = r, f = V, O = j(null), m = j(""), { getMenuId: z, getAllRecursiveIds: H } = me(), A = h(() => {
-      const e = M("vlite.dropdown.empty");
+  setup(a, { emit: V }) {
+    const t = a, f = V, _ = B(null), h = B(""), { getMenuId: D, getAllRecursiveIds: z } = me(), H = v(() => {
+      const e = $("vlite.dropdown.empty");
       return e !== "vlite.dropdown.empty" ? e : "No options found";
-    }), L = h(() => {
-      const e = M("vlite.dropdown.search");
+    }), L = v(() => {
+      const e = $("vlite.dropdown.search");
       return e !== "vlite.dropdown.search" ? e : "Search...";
-    }), d = h(() => t.options ? t.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), R = h(() => t.remote ? t.searchable : t.searchable && (d.value.length || 0) > 9);
+    }), u = v(() => t.options ? t.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), R = v(() => t.remote ? t.searchable : t.searchable && (u.value.length || 0) > 9);
     let k = null;
-    T(m, (e) => {
+    C(h, (e) => {
       t.remote && (k && clearTimeout(k), k = setTimeout(() => {
         e !== void 0 && f("search", e);
       }, t.debounceTime));
     });
-    const F = (e) => {
+    const A = (e) => {
       const s = e.target;
       s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && t.hasMore && !t.loading && f("load-more");
     }, w = (e, s) => {
@@ -70,63 +71,67 @@ const he = ["dir"], ve = {
     }, {
       focusedIndex: y,
       isKeyboardMode: p,
-      filteredOptions: K,
-      handleKeyDown: B,
-      handleMouseMove: C,
+      filteredOptions: F,
+      handleKeyDown: I,
+      handleMouseMove: M,
       onMouseEnterItem: x,
-      scrollToIndex: U
+      scrollToIndex: K
     } = fe({
-      options: d,
-      searchQuery: m,
-      containerRef: O,
+      options: u,
+      searchQuery: h,
+      containerRef: _,
       emit: (e, ...s) => f(e, ...s),
       handleSelect: (e, s) => w(e)
-    }), g = h(() => t.remote ? m.value ? d.value : t.cachedOptions.length ? t.cachedOptions : d.value : K.value), q = (e) => {
+    }), g = v(() => t.remote ? h.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];
-    }, 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, J = (e) => !e.key || !t.selected || typeof t.selected != "object" ? !1 : !!t.selected[e.key], Q = (e, s) => {
+    }, 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) => {
       if (!s.key) return;
       const l = {
         label: s.label,
         value: e,
         key: s.key,
-        data: s.data
+        data: s.data,
+        _originalOption: s,
+        _path: [s]
       };
       f("select", l);
-    }, W = (e, s) => {
+    }, Q = (e, s) => {
       let l = s.value;
       e.key && (l = { [e.key]: l });
-      const a = {
+      const o = s.option, i = o?._path || [o?._originalOption || o].filter(Boolean), Z = {
         label: e.label,
         value: l,
         data: s.data,
-        key: e.key
+        key: e.key,
+        _originalOption: o?._originalOption || o,
+        _path: [e, ...i]
       };
-      f("select", a);
-    }, X = async () => {
+      f("select", Z);
+    }, W = async () => {
       await ae();
       let e = -1;
-      t.layout !== "grouped" && (t.selectedIndex !== null && t.selectedIndex >= 0 ? e = t.selectedIndex : t.selected !== void 0 && typeof t.selected != "object" && (e = d.value.findIndex((s) => s.value === t.selected)), e !== -1 && U(e));
+      t.layout !== "grouped" && (t.selectedIndex !== null && t.selectedIndex >= 0 ? e = t.selectedIndex : t.selected !== void 0 && typeof t.selected != "object" && (e = u.value.findIndex((s) => s.value === t.selected)), e !== -1 && K(e));
     };
-    T(
+    C(
       () => g.value,
       () => {
         y.value = -1;
       }
     ), te(() => {
-      X(), window.addEventListener("keydown", B);
+      W(), window.addEventListener("keydown", I);
     }), le(() => {
-      window.removeEventListener("keydown", B);
+      window.removeEventListener("keydown", I);
     });
-    const Y = (e) => e.labelI18n ? M(e.labelI18n) : e.label;
+    const X = (e) => e.labelI18n ? $(e.labelI18n) : e.label, Y = (e) => e.showChevron !== !1;
     return (e, s) => (n(), c("div", {
       class: "dropdown-menu w-full min-w-[150px] flex flex-col",
-      dir: r.direction
+      dir: a.direction
     }, [
-      R.value ? (n(), c("div", ve, [
-        S(ce, {
-          modelValue: m.value,
-          "onUpdate:modelValue": s[0] || (s[0] = (l) => m.value = l),
+      R.value ? (n(), c("div", ye, [
+        j(ce, {
+          modelValue: h.value,
+          "onUpdate:modelValue": s[0] || (s[0] = (l) => h.value = l),
           placeholder: L.value,
           icon: "lucide:search",
           size: "sm",
@@ -136,115 +141,118 @@ const he = ["dir"], ve = {
           "icon-class": "h-3.5! w-3.5!",
           "show-clear-button": !1
         }, null, 8, ["modelValue", "placeholder"])
-      ])) : u("", !0),
-      e.$slots.header ? (n(), c("div", ye, [
+      ])) : d("", !0),
+      e.$slots.header ? (n(), c("div", ge, [
         b(e.$slots, "header")
-      ])) : u("", !0),
-      d.value.length > 0 || e.$slots.menu ? (n(), c("div", {
+      ])) : d("", !0),
+      u.value.length > 0 || e.$slots.menu ? (n(), c("div", {
         key: 2,
         ref_key: "containerRef",
-        ref: O,
+        ref: _,
         tabindex: "0",
         role: "menu",
-        class: _([
+        class: T([
           "w-full p-1 space-y-0.5 overflow-y-auto overflow-x-hidden focus:outline-none flex-1",
           t.class
         ]),
         style: se({ maxHeight: t.maxHeight }),
         onMousemove: s[1] || (s[1] = //@ts-ignore
-        (...l) => o(C) && o(C)(...l)),
-        onScroll: F
+        (...l) => r(M) && r(M)(...l)),
+        onScroll: A
       }, [
-        g.value.length === 0 && d.value.length > 0 && !r.loading ? (n(), c("div", ge, D(A.value), 1)) : u("", !0),
-        r.layout === "grouped" ? (n(), v(ue, {
+        g.value.length === 0 && u.value.length > 0 && !a.loading ? (n(), c("div", be, E(H.value), 1)) : d("", !0),
+        a.layout === "grouped" ? (n(), m(ue, {
           key: 1,
           options: g.value,
-          selected: r.selected,
-          selectable: r.selectable,
-          columns: r.columns,
+          selected: a.selected,
+          selectable: a.selectable,
+          columns: a.columns,
           onSelect: w
-        }, null, 8, ["options", "selected", "selectable", "columns"])) : (n(!0), c(E, { key: 2 }, ne(g.value, (l, a) => (n(), c(E, { key: a }, [
-          l.label === "---" ? (n(), c("div", be)) : l.data?.isBoolean ? (n(), v(ie, {
+        }, null, 8, ["options", "selected", "selectable", "columns"])) : (n(!0), c(N, { key: 2 }, ne(g.value, (l, o) => (n(), c(N, { key: o }, [
+          l.label === "---" ? (n(), c("div", ke)) : l.data?.isBoolean ? (n(), m(de, {
             key: 1,
             option: l,
-            value: J(l),
-            focused: o(p) && o(y) === a,
-            onChange: Q,
-            onMouseenter: (i) => o(x)(a)
-          }, null, 8, ["option", "value", "focused", "onMouseenter"])) : l.children && l.children.length > 0 ? (n(), v(o(P), {
+            value: G(l),
+            focused: r(p) && r(y) === o,
+            onChange: J,
+            onMouseenter: (i) => r(x)(o)
+          }, null, 8, ["option", "value", "focused", "onMouseenter"])) : l.children && l.children.length > 0 ? (n(), m(he, {
             key: 2,
+            "is-nested": !0,
             position: l.position || t.nestedPosition,
             offset: l.offset || t.nestedOffset,
             class: "w-full",
             options: l.children,
-            selected: q(l),
-            menuId: o(z)(l),
+            selected: U(l),
+            menuId: r(D)(l),
             nestedPosition: t.nestedPosition,
             nestedOffset: t.nestedOffset,
             selectable: t.selectable,
-            ignoreClickOutside: o(H)(l.children),
-            direction: r.direction,
-            onOnSelect: (i) => W(l, i)
+            ignoreClickOutside: r(z)(l.children),
+            direction: a.direction,
+            onOnSelect: (i) => Q(l, i)
           }, {
-            trigger: N(() => [
-              $("div", {
+            trigger: P(() => [
+              S("div", {
                 tabindex: 0,
                 "data-dropdown-item": "",
-                class: _(["relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none transition-colors justify-between w-full focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-1", [
-                  o(p) && o(y) === a ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
-                  l.disabled ? "opacity-50 cursor-not-allowed" : ""
+                class: T(["relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none transition-colors justify-between w-full focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-1", [
+                  r(p) && r(y) === o ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
+                  l.disabled ? "opacity-50 cursor-not-allowed" : "",
+                  l.triggerClass || l.class || ""
                 ]]),
-                onMouseenter: (i) => o(x)(a)
+                onMouseenter: (i) => r(x)(o)
               }, [
-                $("div", we, [
-                  l.icon || l.emoji ? (n(), v(I, {
+                S("div", pe, [
+                  l.icon || l.emoji ? (n(), m(O, {
                     key: 0,
                     icon: l.icon,
                     emoji: l.emoji,
                     class: "mr-2 h-4 w-4 shrink-0 mt-0.5"
-                  }, null, 8, ["icon", "emoji"])) : u("", !0),
-                  $("span", pe, D(Y(l)), 1)
+                  }, null, 8, ["icon", "emoji"])) : d("", !0),
+                  S("span", xe, E(X(l)), 1)
                 ]),
-                S(I, {
-                  icon: r.direction === "rtl" ? "lucide:chevron-left" : "lucide:chevron-right",
+                Y(l) ? (n(), m(O, {
+                  key: 0,
+                  icon: a.direction === "rtl" ? "lucide:chevron-left" : "lucide:chevron-right",
                   class: "h-4 w-4 text-muted-foreground shrink-0 ml-2"
-                }, null, 8, ["icon"])
-              ], 42, ke)
+                }, null, 8, ["icon"])) : d("", !0)
+              ], 42, we)
             ]),
             _: 2
-          }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (n(), v(de, {
+          }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (n(), m(ie, {
             key: 3,
             option: l,
-            index: a,
-            selected: G(l),
-            focused: o(p) && o(y) === a,
-            selectable: r.selectable,
+            index: o,
+            selected: q(l),
+            focused: r(p) && r(y) === o,
+            selectable: a.selectable,
             onClick: (i) => w(l),
-            onMouseenter: (i) => o(x)(a)
+            onMouseenter: (i) => r(x)(o)
           }, oe({ _: 2 }, [
             e.$slots.item ? {
               name: "default",
-              fn: N((i) => [
+              fn: P((i) => [
                 b(e.$slots, "item", re({ ref_for: !0 }, i))
               ]),
               key: "0"
             } : void 0
           ]), 1032, ["option", "index", "selected", "focused", "selectable", "onClick", "onMouseenter"]))
         ], 64))), 128)),
-        r.loading ? (n(), c("div", xe, [
-          S(I, {
+        a.loading ? (n(), c("div", Se, [
+          j(O, {
             icon: "lucide:loader-2",
             class: "w-4 h-4 animate-spin text-muted-foreground"
           })
-        ])) : u("", !0),
+        ])) : d("", !0),
         b(e.$slots, "menu")
-      ], 38)) : u("", !0),
-      e.$slots.footer ? (n(), c("div", Se, [
+      ], 38)) : d("", !0),
+      e.$slots.footer ? (n(), c("div", Oe, [
         b(e.$slots, "footer")
-      ])) : u("", !0)
-    ], 8, he));
+      ])) : d("", !0)
+    ], 8, ve));
   }
 });
 export {
-  Ee as default
+  Ve as default
 };

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

@@ -11,6 +11,6 @@ type EmitFn = (event: 'update:modelValue' | 'onSelect', ...args: any[]) => void;
 export declare function useDropdownSelection(props: UseDropdownSelectionProps, emit: EmitFn): {
     currentValue: import('vue').ComputedRef<any>;
     selectedLabel: import('vue').ComputedRef<string>;
-    selectOption: (option: IDropdownOption) => void;
+    selectOption: (option: IDropdownOption) => any;
 };
 export {};

package/components/Dropdown/composables/useDropdownSelection.js

@@ -1,40 +1,40 @@
-import { computed as f } from "vue";
-import { deepMerge as g } from "../../../utils/object.js";
-import { $t as k } from "../../../utils/i18n.js";
-function h(r, n) {
-  const u = f(() => r.modelValue !== void 0 ? r.modelValue : r.selected), o = (l = [], t) => {
-    for (const e of l) {
-      const a = e.labelI18n ? k(e.labelI18n) : e.label;
-      if (e.value === t) return a;
-      if (e.key && typeof t == "object" && t !== null && e.key in t) {
-        if (e.children) {
-          const c = o(e.children, t[e.key]);
-          if (c) return `${a} / ${c}`;
+import { computed as o } from "vue";
+import { deepMerge as v } from "../../../utils/object.js";
+import { $t as V } from "../../../utils/i18n.js";
+function h(r, c) {
+  const n = o(() => r.modelValue !== void 0 ? r.modelValue : r.selected), f = (e = [], a) => {
+    for (const l of e) {
+      const u = l.labelI18n ? V(l.labelI18n) : l.label;
+      if (l.value === a) return u;
+      if (l.key && typeof a == "object" && a !== null && l.key in a) {
+        if (l.children) {
+          const t = f(l.children, a[l.key]);
+          if (t) return `${u} / ${t}`;
         }
-        return e.value === t[e.key], a;
+        return l.value === a[l.key], u;
       }
     }
     return "";
-  }, i = f(() => !r.showSelectedLabel || !r.selectable || !r.options?.length ? "" : o(r.options, u.value));
+  }, i = o(() => !r.showSelectedLabel || !r.selectable || !r.options?.length ? "" : f(r.options, n.value));
   return {
-    currentValue: u,
+    currentValue: n,
     selectedLabel: i,
-    selectOption: (l) => {
-      if (typeof l != "string" && l?.disabled) return;
-      const t = u.value;
-      let e = l?.value ?? l?.label;
-      const a = l.data;
-      if (l.key && (typeof e == "object" && e !== null && l.key in e || (e = { [l.key]: e })), t && typeof t == "object" && !Array.isArray(t) && l.key) {
-        const c = l.key, y = l.value ?? l.label, b = t[c] === y;
+    selectOption: (e) => {
+      if (typeof e != "string" && e?.disabled) return;
+      const a = n.value;
+      let l = e?.value ?? e?.label;
+      const u = e.data;
+      let t;
+      if (e.key && (typeof l == "object" && l !== null && e.key in l || (l = { [e.key]: l })), a && typeof a == "object" && !Array.isArray(a) && e.key) {
+        const d = e.key, y = e.value ?? e.label, b = a[d] === y;
         if (r.toggleSelection && b) {
-          const d = { ...t };
-          delete d[c], n("update:modelValue", d), n("onSelect", { value: d, data: a });
-          return;
+          const s = { ...a };
+          return delete s[d], t = s, c("update:modelValue", t), c("onSelect", { value: t, data: u, option: e }), t;
         }
-        const s = g(t, e);
-        n("update:modelValue", s), n("onSelect", { value: s, data: a });
+        t = v(a, l), c("update:modelValue", t), c("onSelect", { value: t, data: u, option: e });
       } else
-        r.toggleSelection && t === (l.value ?? l.label) ? (n("update:modelValue", void 0), n("onSelect", { value: void 0, data: a })) : (n("update:modelValue", e), n("onSelect", { value: e, data: a }));
+        r.toggleSelection && a === (e.value ?? e.label) ? (t = void 0, c("update:modelValue", void 0), c("onSelect", { value: void 0, data: u, option: e })) : (t = l, c("update:modelValue", t), c("onSelect", { value: t, data: u, option: e }));
+      return t;
     }
   };
 }

package/components/NavbarCommandPalette.vue.d.ts

@@ -36,6 +36,7 @@ interface Props {
     maxResultsPerGroup?: number;
     /** Whether the palette is enabled at all — when false, nothing mounts or listens */
     enabled?: boolean;
+    triggerClass?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
     placeholder: string;

package/components/NavbarCommandPalette.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as h, ref as b, onMounted as y, onUnmounted as v, watch as x, computed as m, openBlock as w, createElementBlock as g, Fragment as k, createElementVNode as l, createVNode as u, toDisplayString as d, createCommentVNode as C } from "vue";
-import I from "./Icon.vue.js";
-import P from "./Modal.vue.js";
-import E from "./CommandPaletteContent.vue.js";
-import { $t as K } from "../utils/i18n.js";
-const M = { class: "hidden sm:block truncate max-w-[180px] -text-fs-1.5" }, G = { class: "hidden lg:inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-mono font-medium border border-border/80 bg-background text-muted-foreground ml-1" }, V = /* @__PURE__ */ h({
+import { defineComponent as h, ref as b, onMounted as y, onUnmounted as g, watch as v, computed as m, openBlock as x, createElementBlock as w, Fragment as k, createElementVNode as l, normalizeClass as C, createVNode as u, toDisplayString as d, createCommentVNode as I } from "vue";
+import P from "./Icon.vue.js";
+import E from "./Modal.vue.js";
+import K from "./CommandPaletteContent.vue.js";
+import { $t as M } from "../utils/i18n.js";
+const G = { class: "hidden sm:block truncate max-w-[180px] -text-fs-1.5" }, L = { class: "hidden ml-auto lg:inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-mono font-medium border border-border/80 bg-background text-muted-foreground ml-1" }, D = /* @__PURE__ */ h({
   __name: "NavbarCommandPalette",
   props: {
     items: { default: () => [] },
@@ -12,7 +12,8 @@ const M = { class: "hidden sm:block truncate max-w-[180px] -text-fs-1.5" }, G =
     placeholder: { default: "Search commands, pages, and actions..." },
     placeholderI18n: {},
     maxResultsPerGroup: { default: 10 },
-    enabled: { type: Boolean, default: !0 }
+    enabled: { type: Boolean, default: !0 },
+    triggerClass: {}
   },
   setup(t) {
     const n = t, o = b(!1), s = () => {
@@ -25,9 +26,9 @@ const M = { class: "hidden sm:block truncate max-w-[180px] -text-fs-1.5" }, G =
     };
     y(() => {
       n.enabled && window.addEventListener("keydown", a);
-    }), v(() => {
+    }), g(() => {
       window.removeEventListener("keydown", a);
-    }), x(
+    }), v(
       () => n.enabled,
       (e) => {
         e ? window.addEventListener("keydown", a) : (window.removeEventListener("keydown", a), o.value && i());
@@ -35,36 +36,36 @@ const M = { class: "hidden sm:block truncate max-w-[180px] -text-fs-1.5" }, G =
     );
     const c = m(() => {
       if (n.placeholderI18n) {
-        const e = K(n.placeholderI18n);
+        const e = M(n.placeholderI18n);
         if (e !== n.placeholderI18n) return e;
       }
       return n.placeholder;
     }), p = m(
       () => typeof navigator < "u" ? /mac/i.test(navigator.platform) : !0
     );
-    return (e, r) => t.enabled ? (w(), g(k, { key: 0 }, [
+    return (e, r) => t.enabled ? (x(), w(k, { key: 0 }, [
       l("button", {
         type: "button",
-        class: "command-palette-trigger hidden md:inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-muted-foreground bg-muted/60 hover:bg-muted border border-border/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 select-none cursor-pointer shrink-0",
+        class: C(["command-palette-trigger hidden md:inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-muted-foreground bg-muted/60 hover:bg-muted border border-border/60 focus-visible:outline-none justify-between focus-visible:ring-2 focus-visible:ring-primary/50 select-none cursor-pointer shrink-0", t.triggerClass]),
         "aria-label": "Open command palette",
         onClick: s
       }, [
-        u(I, {
+        u(P, {
           icon: "lucide:search",
           class: "w-3.5 h-3.5 shrink-0"
         }),
-        l("span", M, d(c.value.split(",")[0]) + "...", 1),
-        l("kbd", G, [
+        l("span", G, d(c.value.split(",")[0]) + "...", 1),
+        l("kbd", L, [
           l("span", null, d(p.value ? "⌘" : "Ctrl"), 1),
           l("span", null, d(t.shortcutKey.toUpperCase()), 1)
         ])
-      ]),
-      u(P, {
+      ], 2),
+      u(E, {
         show: o.value,
         "onUpdate:show": r[0] || (r[0] = (f) => o.value = f),
         maxWidth: "max-w-2xl",
         bodyClass: "!p-0 flex flex-col h-full",
-        body: E,
+        body: K,
         bodyProps: {
           items: t.items,
           menuItems: t.menuItems,
@@ -73,9 +74,9 @@ const M = { class: "hidden sm:block truncate max-w-[180px] -text-fs-1.5" }, G =
           maxResultsPerGroup: t.maxResultsPerGroup
         }
       }, null, 8, ["show", "bodyProps"])
-    ], 64)) : C("", !0);
+    ], 64)) : I("", !0);
   }
 });
 export {
-  V as default
+  D as default
 };

package/composables/useTheme.d.ts

@@ -1,4 +1,5 @@
 type Theme = 'light' | 'dark';
+export declare function initializeTheme(): void;
 export declare function useTheme(): {
     theme: import('vue').Ref<Theme, Theme>;
     toggleTheme: () => void;

package/composables/useTheme.js

@@ -1,32 +1,40 @@
-import { ref as o, watch as m, onMounted as d } from "vue";
-const t = o(i());
-function i() {
+import { ref as a, watch as d, onMounted as r } from "vue";
+const t = a(o());
+function o() {
+  if (typeof window > "u") return "light";
   const e = localStorage.getItem("builto-theme");
-  return e === "light" || e === "dark" ? e : window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return e === "light" || e === "dark" ? e : window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 function n(e) {
   document.documentElement.classList.remove("light", "dark"), document.documentElement.classList.add(e);
 }
+function l() {
+  typeof window > "u" || !window.matchMedia || window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+    localStorage.getItem("builto-theme") || (t.value = e.matches ? "dark" : "light", n(t.value));
+  });
+}
+function u() {
+  t.value = o(), n(t.value), l();
+}
 function c() {
-  m(
+  d(
     t,
-    (a) => {
-      localStorage.setItem("builto-theme", a), n(a);
+    (i) => {
+      localStorage.setItem("builto-theme", i), n(i);
     },
     { immediate: !0 }
-  ), window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (a) => {
-    localStorage.getItem("builto-theme") || (t.value = a.matches ? "dark" : "light");
+  ), r(() => {
+    document.documentElement.classList.add("bg-body");
   });
   function e() {
     t.value = t.value === "light" ? "dark" : "light";
   }
-  return d(() => {
-    document.documentElement.classList.add("bg-body");
-  }), {
+  return {
     theme: t,
     toggleTheme: e
   };
 }
 export {
+  u as initializeTheme,
   c as useTheme
 };