vlite3 0.5.6 → 0.5.8

package/components/CommandPaletteContent.vue2.js

@@ -1,25 +1,25 @@
-import { defineComponent as X, computed as c, ref as _, watch as Y, onMounted as Z, nextTick as T, openBlock as i, createElementBlock as f, createElementVNode as l, createVNode as w, withDirectives as ee, vModelText as te, createTextVNode as I, toDisplayString as u, createCommentVNode as b, Fragment as M, renderList as j, normalizeClass as z, createBlock as oe } from "vue";
-import { useRouter as ne } from "vue-router";
+import { defineComponent as Z, computed as c, ref as _, watch as ee, onMounted as te, nextTick as G, openBlock as u, createElementBlock as f, createElementVNode as s, createVNode as w, withDirectives as oe, vModelText as ne, createTextVNode as I, toDisplayString as i, createCommentVNode as b, Fragment as P, renderList as O, normalizeClass as T, createBlock as re } from "vue";
+import { useRouter as le } from "vue-router";
 import h from "./Icon.vue.js";
 import { $t as C } from "../utils/i18n.js";
-const re = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, se = { class: "flex items-center gap-3 px-4 py-3.5 border-b border-border/60 shrink-0" }, le = ["placeholder", "aria-activedescendant"], ae = ["aria-label"], ce = {
+const se = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, ae = { class: "flex items-center gap-3 px-4 py-3.5 border-b border-border/60 shrink-0" }, ce = ["placeholder", "aria-activedescendant"], ie = ["aria-label"], de = {
   key: 0,
   class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",
   "aria-live": "polite"
-}, ue = { class: "text-sm font-medium text-muted-foreground" }, ie = { class: "text-foreground font-semibold" }, de = { class: "text-xs text-muted-foreground/60 mt-1" }, fe = ["aria-label"], pe = ["aria-label"], me = ["id", "aria-selected", "aria-disabled", "data-active", "onClick", "onMouseenter"], xe = { class: "flex-1 min-w-0" }, ve = { class: "block font-medium truncate text-inherit leading-tight" }, be = {
+}, ue = { class: "text-sm font-medium text-muted-foreground" }, fe = { class: "text-foreground font-semibold" }, pe = { class: "text-xs text-muted-foreground/60 mt-1" }, me = ["aria-label"], xe = ["aria-label"], ve = ["id", "aria-selected", "aria-disabled", "data-active", "onClick", "onMouseenter"], be = { class: "flex-1 min-w-0" }, he = { class: "block font-medium truncate text-inherit leading-tight" }, ge = {
   key: 0,
   class: "block text-xs text-muted-foreground/70 truncate mt-0.5"
-}, he = {
+}, ye = {
   key: 1,
   class: "shrink-0 hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-mono border border-border/60 bg-background/80 text-muted-foreground ml-1"
-}, ge = {
+}, ke = {
   key: 0,
   class: "my-1.5 mx-3 h-px bg-border/40",
   "aria-hidden": "true"
-}, ke = {
+}, _e = {
   class: "px-4 py-2.5 border-t border-border/40 flex items-center gap-4 shrink-0 bg-muted/30",
   "aria-hidden": "true"
-}, ye = { class: "flex items-center gap-1 text-[11px] text-muted-foreground/60" }, _e = { class: "flex items-center gap-1 text-[11px] text-muted-foreground/60" }, we = { class: "flex items-center gap-1 text-[11px] text-muted-foreground/60" }, Ie = { class: "ml-auto text-[11px] text-muted-foreground/50" }, Pe = /* @__PURE__ */ X({
+}, we = { class: "flex items-center gap-1 text-[11px] text-muted-foreground/60" }, Ie = { class: "flex items-center gap-1 text-[11px] text-muted-foreground/60" }, Ce = { class: "flex items-center gap-1 text-[11px] text-muted-foreground/60" }, Me = { class: "ml-auto text-[11px] text-muted-foreground/50" }, Be = /* @__PURE__ */ Z({
   __name: "CommandPaletteContent",
   props: {
     close: { type: Function },
@@ -27,85 +27,105 @@ const re = { class: "command-palette-content flex flex-col w-full h-full max-h-[
     menuItems: {},
     placeholder: {},
     placeholderI18n: {},
-    maxResultsPerGroup: {}
+    maxResultsPerGroup: {},
+    onOpenDynamicModal: { type: Function }
   },
-  setup(R) {
-    const d = R, p = (t, o) => {
+  setup(M) {
+    const d = M, p = (t, o) => {
       const n = C(t);
       return n !== t ? n : o;
-    }, B = c(() => {
+    }, j = c(() => {
       if (d.placeholderI18n) {
         const t = C(d.placeholderI18n);
         if (t !== d.placeholderI18n) return t;
       }
       return d.placeholder;
-    }), F = c(() => p("vlite.commandPalette.noResults", "No results for")), L = c(
+    }), z = c(() => p("vlite.commandPalette.noResults", "No results for")), L = c(
       () => p("vlite.commandPalette.noResultsDesc", "Try a different term or browse with arrow keys")
-    ), S = c(() => p("vlite.commandPalette.navigate", "Navigate")), K = c(() => p("vlite.commandPalette.open", "Open")), O = c(() => p("vlite.commandPalette.close", "Close")), N = c(() => p("vlite.commandPalette.result", "result")), P = c(() => p("vlite.commandPalette.results", "results"));
-    function D(t) {
+    ), K = c(() => p("vlite.commandPalette.navigate", "Navigate")), U = c(() => p("vlite.commandPalette.open", "Open")), W = c(() => p("vlite.commandPalette.close", "Close")), R = c(() => p("vlite.commandPalette.result", "result")), D = c(() => p("vlite.commandPalette.results", "results"));
+    function N(t) {
       if (t.labelI18n) {
         const o = C(t.labelI18n);
         if (o !== t.labelI18n) return o;
       }
       return t.label;
     }
-    function $(t) {
+    function B(t) {
       if (t.descriptionI18n) {
         const o = C(t.descriptionI18n);
         if (o !== t.descriptionI18n) return o;
       }
       return t.description ?? "";
     }
-    const v = _(""), a = _(0), E = _(null), V = _(null), U = ne();
+    const v = _(""), a = _(0), $ = _(null), S = _(null), H = le();
+    function E(t) {
+      return typeof t == "function" ? t() : t !== void 0 ? t : !0;
+    }
+    function V(t, o, n = 0) {
+      const r = [];
+      for (const e of t) {
+        if (!E(e.show)) continue;
+        const l = n === 0 ? e.label : o ?? "Navigation";
+        (e.to || e.href || e.action || e.modalBody) && r.push({
+          ...e,
+          id: e.id ?? e.to ?? e.label ?? Math.random().toString(),
+          group: e.group ?? l
+        }), e.children?.length && r.push(...V(e.children, l, n + 1));
+      }
+      return r;
+    }
     function q(t, o, n = 0) {
       const r = [];
       for (const e of t) {
-        const s = n === 0 ? e.label : o ?? "Navigation";
-        (e.to || e.href || e.action) && r.push({
-          id: e.id ?? (typeof e.to == "string" ? e.to : "") ?? e.label,
+        if (!E(e.show)) continue;
+        const l = n === 0 ? e.label : o ?? "Navigation";
+        (e.to || e.href || e.action || e.modalBody) && r.push({
+          id: e.id ?? (typeof e.to == "string" ? e.to : "") ?? e.label ?? Math.random().toString(),
           label: e.label,
           labelI18n: e.labelI18n,
           icon: e.icon,
-          group: s,
+          group: e.group ?? l,
           to: typeof e.to == "string" ? e.to : e.to?.path,
           href: e.href,
           action: e.action ? () => e.action(e) : void 0,
-          disabled: e.disabled
-        }), e.children?.length && r.push(...q(e.children, s, n + 1));
+          disabled: e.disabled,
+          modalBody: e.modalBody,
+          modalProps: e.modalProps
+        }), e.children?.length && r.push(...q(e.children, l, n + 1));
       }
       return r;
     }
-    const W = c(() => {
-      const t = q(d.menuItems), o = /* @__PURE__ */ new Set(), n = [];
-      for (const r of [...d.items, ...t])
-        o.has(r.id) || (o.add(r.id), n.push(r));
-      return n;
+    const J = c(() => {
+      const t = q(d.menuItems || []), o = V(d.items || []), n = /* @__PURE__ */ new Set(), r = [];
+      for (const e of [...o, ...t])
+        e.id && !n.has(e.id) && (n.add(e.id), r.push(e));
+      return r;
     });
     function g(t) {
       return t.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
     }
-    function H(t, o) {
-      const n = g(D(t)), r = g($(t)), e = (t.keywords ?? []).map(g).join(" "), s = g(o);
-      return n === s ? 100 : n.startsWith(s) ? 80 : n.includes(s) ? 60 : r.includes(s) || e.includes(s) ? 40 : 0;
+    function Q(t, o) {
+      const n = g(N(t)), r = g(B(t)), e = (t.keywords ?? []).map(g).join(" "), l = g(o);
+      return n === l ? 100 : n.startsWith(l) ? 80 : n.includes(l) ? 60 : r.includes(l) || e.includes(l) ? 40 : 0;
     }
-    const k = c(() => {
+    const y = c(() => {
       const t = v.value.trim();
-      let o = W.value.filter((e) => !e.disabled);
-      t && (o = o.map((e) => ({ item: e, s: H(e, t) })).filter(({ s: e }) => e > 0).sort((e, s) => s.s - e.s).map(({ item: e }) => e));
+      let o = J.value.filter((e) => !e.disabled);
+      t && (o = o.map((e) => ({ item: e, s: Q(e, t) })).filter(({ s: e }) => e > 0).sort((e, l) => l.s - e.s).map(({ item: e }) => e));
       const n = /* @__PURE__ */ new Map();
       for (const e of o) {
-        const s = e.group ?? "Actions";
-        n.has(s) || n.set(s, []), n.get(s).push(e);
+        const l = e.group ?? "Actions";
+        n.has(l) || n.set(l, []), n.get(l).push(e);
       }
       const r = [];
-      for (const [e, s] of n)
+      for (const [e, l] of n)
         r.push({
           key: e,
           label: e,
-          items: s.slice(0, d.maxResultsPerGroup)
+          items: l.slice(0, d.maxResultsPerGroup)
         });
       return r;
-    }), y = c(() => k.value.flatMap((t) => t.items)), m = c(() => y.value.length), J = (t) => {
+    }), k = c(() => y.value.flatMap((t) => t.items)), m = c(() => k.value.length), X = (t) => {
       if (t.key === "Escape") {
         d.close();
         return;
@@ -120,25 +140,29 @@ const re = { class: "command-palette-content flex flex-col w-full h-full max-h-[
       }
       if (t.key === "Enter") {
         t.preventDefault();
-        const o = y.value[a.value];
-        o && G(o);
+        const o = k.value[a.value];
+        o && F(o);
       }
     }, A = () => {
-      T(() => {
-        V.value?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
+      G(() => {
+        S.value?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
       });
     };
-    Y(v, () => {
+    ee(v, () => {
       a.value = 0;
     });
-    const G = (t) => {
+    const F = (t) => {
       if (!t.disabled) {
-        if (d.close(), t.action) {
+        if (d.close(), t.modalBody) {
+          d.onOpenDynamicModal(t.modalBody, t.modalProps);
+          return;
+        }
+        if (t.action) {
           t.action();
           return;
         }
         if (t.to) {
-          U.push(t.to).catch(() => {
+          H.push(t.to).catch(() => {
           });
           return;
         }
@@ -147,43 +171,43 @@ const re = { class: "command-palette-content flex flex-col w-full h-full max-h-[
     }, x = (t, o) => {
       let n = 0;
       for (let r = 0; r < t; r++)
-        n += k.value[r].items.length;
+        n += y.value[r].items.length;
       return n + o;
     };
-    return Z(() => {
-      T(() => {
-        E.value?.focus();
+    return te(() => {
+      G(() => {
+        $.value?.focus();
       });
-    }), (t, o) => (i(), f("div", re, [
-      l("div", se, [
+    }), (t, o) => (u(), f("div", se, [
+      s("div", ae, [
         w(h, {
           icon: "lucide:search",
           class: "w-4 h-4 text-muted-foreground shrink-0"
         }),
-        ee(l("input", {
+        oe(s("input", {
           ref_key: "inputRef",
-          ref: E,
+          ref: $,
           "onUpdate:modelValue": o[0] || (o[0] = (n) => v.value = n),
           type: "text",
           autocomplete: "off",
           autocorrect: "off",
           spellcheck: "false",
-          placeholder: B.value,
+          placeholder: j.value,
           class: "flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground/60 outline-none min-w-0",
           "aria-autocomplete": "list",
-          "aria-activedescendant": y.value[a.value] ? `cp-item-${y.value[a.value].id}` : void 0,
+          "aria-activedescendant": k.value[a.value] ? `cp-item-${k.value[a.value].id}` : void 0,
           "aria-controls": "cp-listbox",
-          onKeydown: J
-        }, null, 40, le), [
-          [te, v.value]
+          onKeydown: X
+        }, null, 40, ce), [
+          [ne, v.value]
         ]),
-        l("button", {
+        s("button", {
           type: "button",
           class: "shrink-0 p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
           "aria-label": "Close",
           tabindex: "-1",
           onClick: o[1] || (o[1] = //@ts-ignore
-          (...n) => R.close && R.close(...n))
+          (...n) => M.close && M.close(...n))
         }, [
           w(h, {
             icon: "lucide:x",
@@ -191,57 +215,57 @@ const re = { class: "command-palette-content flex flex-col w-full h-full max-h-[
           })
         ])
       ]),
-      l("div", {
+      s("div", {
         id: "cp-listbox",
         ref_key: "listRef",
-        ref: V,
+        ref: S,
         role: "listbox",
         class: "flex-1 overflow-y-auto py-2 scrollbar-thin",
-        "aria-label": `${m.value} ${m.value === 1 ? N.value : P.value}`
+        "aria-label": `${m.value} ${m.value === 1 ? R.value : D.value}`
       }, [
-        m.value === 0 ? (i(), f("div", ce, [
+        m.value === 0 ? (u(), f("div", de, [
           w(h, {
             icon: "lucide:search-x",
             class: "w-9 h-9 text-muted-foreground/40 mb-3"
           }),
-          l("p", ue, [
-            I(u(F.value) + " ", 1),
-            l("span", ie, '"' + u(v.value) + '"', 1)
+          s("p", ue, [
+            I(i(z.value) + " ", 1),
+            s("span", fe, '"' + i(v.value) + '"', 1)
           ]),
-          l("p", de, u(L.value), 1)
+          s("p", pe, i(L.value), 1)
         ])) : b("", !0),
-        (i(!0), f(M, null, j(k.value, (n, r) => (i(), f(M, {
+        (u(!0), f(P, null, O(y.value, (n, r) => (u(), f(P, {
           key: n.key
         }, [
-          l("div", {
+          s("div", {
             class: "px-4 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60 select-none",
             "aria-label": `Group: ${n.label}`
-          }, u(n.label), 9, fe),
-          l("div", {
+          }, i(n.label), 9, me),
+          s("div", {
             role: "group",
             "aria-label": n.label,
             class: "px-2"
           }, [
-            (i(!0), f(M, null, j(n.items, (e, s) => (i(), f("button", {
+            (u(!0), f(P, null, O(n.items, (e, l) => (u(), f("button", {
               key: e.id,
               id: `cp-item-${e.id}`,
               type: "button",
               role: "option",
-              "aria-selected": x(r, s) === a.value,
+              "aria-selected": x(r, l) === a.value,
               "aria-disabled": e.disabled || void 0,
-              "data-active": x(r, s) === a.value,
-              class: z(["command-palette-item w-full flex items-center gap-3 px-3! py-2.5 mx-1 rounded-lg text-sm transition-colors duration-100 text-left cursor-pointer select-none focus-visible:outline-none", [
-                x(r, s) === a.value ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-muted/70 hover:text-foreground",
+              "data-active": x(r, l) === a.value,
+              class: T(["command-palette-item w-full flex items-center gap-3 px-3! py-2.5 mx-1 rounded-lg text-sm transition-colors duration-100 text-left cursor-pointer select-none focus-visible:outline-none", [
+                x(r, l) === a.value ? "bg-gray-200 text-foreground" : "text-muted-foreground hover:bg-muted/70 hover:text-foreground",
                 e.disabled ? "opacity-40 cursor-not-allowed" : ""
               ]]),
               style: { width: "calc(100% - 8px)" },
-              onClick: (Q) => G(e),
-              onMouseenter: (Q) => a.value = x(r, s)
+              onClick: (Y) => F(e),
+              onMouseenter: (Y) => a.value = x(r, l)
             }, [
-              l("span", {
-                class: z([
+              s("span", {
+                class: T([
                   "shrink-0 flex items-center justify-center w-7 h-7 rounded-md",
-                  x(r, s) === a.value ? "bg-primary/20 text-primary" : "bg-muted/80 text-muted-foreground"
+                  x(r, l) === a.value ? "bg-gray-300 text-primary" : "bg-muted/80 text-muted-foreground"
                 ])
               }, [
                 w(h, {
@@ -249,39 +273,39 @@ const re = { class: "command-palette-content flex flex-col w-full h-full max-h-[
                   class: "w-3.5 h-3.5"
                 }, null, 8, ["icon"])
               ], 2),
-              l("span", xe, [
-                l("span", ve, u(D(e)), 1),
-                e.description || e.descriptionI18n ? (i(), f("span", be, u($(e)), 1)) : b("", !0)
+              s("span", be, [
+                s("span", he, i(N(e)), 1),
+                e.description || e.descriptionI18n ? (u(), f("span", ge, i(B(e)), 1)) : b("", !0)
               ]),
-              e.href ? (i(), oe(h, {
+              e.href ? (u(), re(h, {
                 key: 0,
                 icon: "lucide:external-link",
                 class: "shrink-0 w-3 h-3 text-muted-foreground/50"
               })) : b("", !0),
-              x(r, s) === a.value ? (i(), f("kbd", he, " ↵ ")) : b("", !0)
-            ], 42, me))), 128))
-          ], 8, pe),
-          r < k.value.length - 1 ? (i(), f("div", ge)) : b("", !0)
+              x(r, l) === a.value ? (u(), f("kbd", ye, " ↵ ")) : b("", !0)
+            ], 42, ve))), 128))
+          ], 8, xe),
+          r < y.value.length - 1 ? (u(), f("div", ke)) : b("", !0)
         ], 64))), 128))
-      ], 8, ae),
-      l("div", ke, [
-        l("span", ye, [
-          o[2] || (o[2] = l("kbd", { class: "px-1 rounded border border-border/60 bg-background text-[10px]" }, "↑↓", -1)),
-          I(" " + u(S.value), 1)
+      ], 8, ie),
+      s("div", _e, [
+        s("span", we, [
+          o[2] || (o[2] = s("kbd", { class: "px-1 rounded border border-border/60 bg-background text-[10px]" }, "↑↓", -1)),
+          I(" " + i(K.value), 1)
         ]),
-        l("span", _e, [
-          o[3] || (o[3] = l("kbd", { class: "px-1 rounded border border-border/60 bg-background text-[10px]" }, "↵", -1)),
-          I(" " + u(K.value), 1)
+        s("span", Ie, [
+          o[3] || (o[3] = s("kbd", { class: "px-1 rounded border border-border/60 bg-background text-[10px]" }, "↵", -1)),
+          I(" " + i(U.value), 1)
         ]),
-        l("span", we, [
-          o[4] || (o[4] = l("kbd", { class: "px-1 rounded border border-border/60 bg-background text-[10px]" }, "Esc", -1)),
-          I(" " + u(O.value), 1)
+        s("span", Ce, [
+          o[4] || (o[4] = s("kbd", { class: "px-1 rounded border border-border/60 bg-background text-[10px]" }, "Esc", -1)),
+          I(" " + i(W.value), 1)
         ]),
-        l("span", Ie, u(m.value) + " " + u(m.value === 1 ? N.value : P.value), 1)
+        s("span", Me, i(m.value) + " " + i(m.value === 1 ? R.value : D.value), 1)
       ])
     ]));
   }
 });
 export {
-  Pe as default
+  Be as default
 };

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

@@ -34,6 +34,7 @@ type __VLS_Props = {
     fetchSelected?: (ids: any[]) => Promise<IDropdownOption[]>;
     triggerProps?: ButtonProps;
     direction?: 'ltr' | 'rtl';
+    isNested?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -61,28 +62,38 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     onSelect: (payload: {
         value: any;
         data?: any;
+        option?: IDropdownOption;
     }) => any;
     "update:modelValue": (value: any) => any;
-    onOpen: () => any;
+    "load-more": () => any;
     onClose: () => any;
+    onOpen: () => any;
     "update:isOpen": (value: boolean) => any;
-    "load-more": () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSearch?: (query: string) => any;
     onOnSelect?: (payload: {
         value: any;
         data?: any;
+        option?: IDropdownOption;
     }) => any;
     "onUpdate:modelValue"?: (value: any) => any;
-    onOnOpen?: () => any;
+    "onLoad-more"?: () => any;
     onOnClose?: () => any;
+    onOnOpen?: () => any;
     "onUpdate:isOpen"?: (value: boolean) => any;
-    "onLoad-more"?: () => any;
 }>, {
     loading: boolean;
     selectable: boolean;
     options: (IDropdownOption | string | number)[];
     columns: number | string;
+    selectedIndex: number | null;
+    maxHeight: string;
+    layout: "default" | "grouped";
+    hasMore: boolean;
+    searchable: boolean;
+    remote: boolean;
+    debounceTime: number;
+    direction: "ltr" | "rtl";
     canCloseOutside: boolean;
     closeOnSelect: boolean;
     toggleSelection: boolean;
@@ -90,16 +101,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     offset: [number, number];
     isOpen: boolean;
     teleport: boolean;
-    selectedIndex: number | null;
-    maxHeight: string;
     showSelectedLabel: boolean;
     doubleConfirmation: boolean;
-    layout: "default" | "grouped";
-    hasMore: boolean;
-    searchable: boolean;
-    remote: boolean;
-    debounceTime: number;
-    direction: "ltr" | "rtl";
+    isNested: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;