vlite3 0.7.7 → 0.7.9

package/components/MultiSelect/MultiSelect.vue.js

@@ -1,13 +1,14 @@
-import { defineComponent as P, ref as g, computed as r, watch as U, openBlock as s, createBlock as m, unref as y, withCtx as v, createVNode as x, createElementVNode as d, normalizeClass as M, createElementBlock as h, toDisplayString as w, Fragment as I, renderList as q, withModifiers as T, createCommentVNode as V, createTextVNode as G } from "vue";
-import S from "../Icon.vue.js";
-import J from "../Dropdown/Dropdown.vue.js";
-import K from "../Dropdown/DropdownMenu.vue.js";
-import { $t as k } from "../../utils/i18n.js";
+import { defineComponent as F, ref as x, computed as r, watch as $, openBlock as s, createBlock as f, unref as v, withCtx as p, createVNode as V, createElementVNode as d, normalizeClass as M, createElementBlock as h, toDisplayString as w, Fragment as I, renderList as P, withModifiers as T, createCommentVNode as S, createTextVNode as R } from "vue";
+import k from "../Icon.vue.js";
+import U from "../Dropdown/Dropdown.vue.js";
+import q from "../Dropdown/DropdownMenu.vue.js";
+import { $t as O } from "../../utils/i18n.js";
 import z from "../Badge.vue.js";
-const Q = { class: "flex flex-wrap gap-1.5 items-center flex-1 min-w-0 py-0.5" }, R = {
+import { useMultiSelectHydration as G } from "./composables/useMultiSelectHydration.js";
+const J = { class: "flex flex-wrap gap-1.5 items-center flex-1 min-w-0 py-0.5" }, K = {
   key: 0,
   class: "text-muted-foreground pl-1"
-}, W = { class: "truncate" }, X = ["onClick"], Y = { class: "flex items-center gap-2 pl-2 shrink-0 text-muted-foreground" }, ne = /* @__PURE__ */ P({
+}, Q = { class: "truncate" }, W = ["onClick"], X = { class: "flex items-center gap-2 pl-2 shrink-0 text-muted-foreground" }, oe = /* @__PURE__ */ F({
   __name: "MultiSelect",
   props: {
     modelValue: { default: () => [] },
@@ -27,139 +28,136 @@ const Q = { class: "flex flex-wrap gap-1.5 items-center flex-1 min-w-0 py-0.5" }
     layout: { default: "default" }
   },
   emits: ["update:modelValue", "change", "load-more", "search"],
-  setup(o, { emit: E }) {
-    const a = o, i = E, c = g(!1), N = r(() => {
-      if (a.placeholderI18n) return k(a.placeholderI18n);
-      if (a.placeholder) return a.placeholder;
-      const e = k("vlite.multiSelect.placeholder");
+  setup(n, { emit: L }) {
+    const l = n, i = L, c = x(!1), N = r(() => {
+      if (l.placeholderI18n) return O(l.placeholderI18n);
+      if (l.placeholder) return l.placeholder;
+      const e = O("vlite.multiSelect.placeholder");
       return e !== "vlite.multiSelect.placeholder" ? e : "Select items...";
-    }), p = r(() => a.options ? a.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), u = g(/* @__PURE__ */ new Map()), b = g(!1), j = async (e) => {
-      if (!a.fetchSelected || !e?.length) return;
-      const t = e.filter((l) => {
-        const n = u.value.has(l), C = p.value.some(($) => ($.value ?? $.label) === l);
-        return !n && !C;
-      });
-      if (t.length) {
-        b.value = !0;
-        try {
-          (await a.fetchSelected(t)).forEach((n) => {
-            u.value.set(n.value ?? n.label, n);
-          });
-        } catch (l) {
-          console.error("[MultiSelect] Hydration failed:", l);
-        } finally {
-          b.value = !1;
-        }
-      }
-    };
-    U(
-      () => a.modelValue,
+    }), b = r(() => l.options ? l.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), B = x(!1), g = x(!1);
+    $(
+      b,
       (e) => {
-        j(e || []);
+        !B.value && e.length > 0 && (B.value = !0, setTimeout(() => {
+          g.value = !0, u.hydrateSelected(l.modelValue || []);
+        }, 10));
       },
-      { immediate: !0, deep: !0 }
+      { immediate: !0 }
     );
-    const O = r(() => {
-      const e = [...p.value], t = new Set(e.map((l) => l.value ?? l.label));
-      return u.value.forEach((l, n) => {
-        t.has(n) || (e.unshift(l), t.add(n));
+    const y = r(() => {
+      const e = [...b.value], t = new Set(e.map((a) => a.value ?? a.label));
+      return u.selectedBuffer.value.forEach((a, o) => {
+        t.has(o) || (e.unshift(a), t.add(o));
       }), e;
-    }), f = r(() => O.value.filter((e) => {
+    }), u = G({
+      fetchSelected: l.fetchSelected,
+      getValues: () => l.modelValue || [],
+      getOptions: () => y.value,
+      isInitialLoadDone: () => g.value
+    });
+    $(
+      () => l.modelValue,
+      (e) => {
+        g.value && u.hydrateSelected(e || []);
+      },
+      { deep: !0 }
+    );
+    const m = r(() => y.value.filter((e) => {
       const t = e.value ?? e.label;
-      return a.modelValue.includes(t);
-    })), H = r(() => f.value.slice(0, a.maxVisible)), B = r(() => f.value.length - a.maxVisible), L = (e) => {
+      return l.modelValue.includes(t);
+    })), E = r(() => m.value.slice(0, l.maxVisible)), C = r(() => m.value.length - l.maxVisible), j = (e) => {
       const t = e.value ?? e.label;
-      u.value.has(t) || u.value.set(t, e);
-      const l = [...a.modelValue], n = l.indexOf(t);
-      n === -1 ? l.push(t) : l.splice(n, 1), i("update:modelValue", l), i("change", l);
-    }, A = (e) => {
-      const t = a.modelValue.filter((l) => l !== e);
+      u.selectedBuffer.value.has(t) || u.selectedBuffer.value.set(t, e);
+      const a = [...l.modelValue], o = a.indexOf(t);
+      o === -1 ? a.push(t) : a.splice(o, 1), i("update:modelValue", a), i("change", a);
+    }, D = (e) => {
+      const t = l.modelValue.filter((a) => a !== e);
       i("update:modelValue", t), i("change", t);
-    }, D = () => {
+    }, H = () => {
       i("update:modelValue", []), i("change", []);
-    }, F = r(() => [
+    }, A = r(() => [
       "flex items-center justify-between w-full px-3 py-1.5 rounded-md border text-sm transition-colors cursor-pointer",
-      a.disabled ? "opacity-50 cursor-not-allowed bg-muted" : a.variant === "floating" ? "bg-transparent text-foreground" : "bg-background hover:bg-gray-50/70",
-      a.variant === "outline" || a.variant === "floating" ? "border-input" : "border-transparent bg-muted",
+      l.disabled ? "opacity-50 cursor-not-allowed bg-muted" : l.variant === "floating" ? "bg-transparent text-foreground" : "bg-background hover:bg-gray-50/70",
+      l.variant === "outline" || l.variant === "floating" ? "border-input" : "border-transparent bg-muted",
       c.value ? "border-primary/20" : ""
     ].join(" "));
-    return r(() => a.size === "sm" ? "xs" : "sm"), (e, t) => (s(), m(y(J), {
+    return r(() => l.size === "sm" ? "xs" : "sm"), (e, t) => (s(), f(v(U), {
       isOpen: c.value,
-      "onUpdate:isOpen": t[3] || (t[3] = (l) => c.value = l),
+      "onUpdate:isOpen": t[3] || (t[3] = (a) => c.value = a),
       "close-on-select": !1,
       selectable: !0,
-      disabled: o.disabled
+      disabled: n.disabled
     }, {
-      trigger: v(({ isOpen: l }) => [
+      trigger: p(({ isOpen: a }) => [
         d("div", {
-          class: M(F.value)
+          class: M(A.value)
         }, [
-          d("div", Q, [
-            f.value.length === 0 ? (s(), h("span", R, w(N.value), 1)) : (s(), h(I, { key: 1 }, [
-              (s(!0), h(I, null, q(H.value, (n) => (s(), m(z, {
-                key: n.value,
+          d("div", J, [
+            m.value.length === 0 ? (s(), h("span", K, w(N.value), 1)) : (s(), h(I, { key: 1 }, [
+              (s(!0), h(I, null, P(E.value, (o) => (s(), f(z, {
+                key: o.value,
                 variant: "secondary",
                 class: "gap-1 pr-1 truncate max-w-[150px]"
               }, {
-                default: v(() => [
-                  d("span", W, w(n.labelI18n ? y(k)(n.labelI18n) : n.label), 1),
-                  o.disabled ? V("", !0) : (s(), h("button", {
+                default: p(() => [
+                  d("span", Q, w(o.labelI18n ? v(O)(o.labelI18n) : o.label), 1),
+                  n.disabled ? S("", !0) : (s(), h("button", {
                     key: 0,
                     type: "button",
-                    onClick: T((C) => A(n.value), ["stop"]),
+                    onClick: T((Y) => D(o.value), ["stop"]),
                     class: "hover:bg-destructive/10 hover:text-destructive rounded-full p-0.5 transition-colors"
                   }, [
-                    x(S, {
+                    V(k, {
                       icon: "lucide:x",
                       class: "w-3 h-3"
                     })
-                  ], 8, X))
+                  ], 8, W))
                 ]),
                 _: 2
               }, 1024))), 128)),
-              B.value > 0 ? (s(), m(z, {
+              C.value > 0 ? (s(), f(z, {
                 key: 0,
                 variant: "secondary",
                 class: "font-normal text-muted-foreground"
               }, {
-                default: v(() => [
-                  G(" +" + w(B.value), 1)
+                default: p(() => [
+                  R(" +" + w(C.value), 1)
                 ]),
                 _: 1
-              })) : V("", !0)
+              })) : S("", !0)
             ], 64))
           ]),
-          d("div", Y, [
-            f.value.length > 0 && !o.disabled ? (s(), m(S, {
+          d("div", X, [
+            m.value.length > 0 && !n.disabled ? (s(), f(k, {
               key: 0,
               icon: "lucide:x",
               class: "w-4 h-4 hover:text-foreground transition-colors",
-              onClick: T(D, ["stop"])
-            })) : V("", !0),
+              onClick: T(H, ["stop"])
+            })) : S("", !0),
             t[4] || (t[4] = d("div", { class: "w-px h-4 bg-border mx-0.5" }, null, -1)),
-            x(S, {
+            V(k, {
               icon: "lucide:chevron-down",
-              class: M(["w-4 h-4 transition-transform duration-200", { "rotate-180": l }])
+              class: M(["w-4 h-4 transition-transform duration-200", { "rotate-180": a }])
             }, null, 8, ["class"])
           ])
         ], 2)
       ]),
-      default: v(() => [
-        x(y(K), {
-          options: p.value,
-          cachedOptions: O.value,
-          selected: o.modelValue,
+      default: p(() => [
+        V(v(q), {
+          options: b.value,
+          cachedOptions: y.value,
+          selected: n.modelValue,
           class: "min-w-[300px]",
-          loading: o.loading || b.value,
-          hasMore: o.hasMore,
-          searchable: o.searchable,
-          remote: o.remote,
-          debounceTime: o.debounceTime,
-          layout: o.layout,
-          onSelect: L,
-          onClose: t[0] || (t[0] = (l) => c.value = !1),
-          onLoadMore: t[1] || (t[1] = (l) => e.$emit("load-more")),
-          onSearch: t[2] || (t[2] = (l) => e.$emit("search", l))
+          loading: n.loading || v(u).isHydrating.value,
+          hasMore: n.hasMore,
+          searchable: n.searchable,
+          remote: n.remote,
+          debounceTime: n.debounceTime,
+          layout: n.layout,
+          onSelect: j,
+          onClose: t[0] || (t[0] = (a) => c.value = !1),
+          onLoadMore: t[1] || (t[1] = (a) => e.$emit("load-more")),
+          onSearch: t[2] || (t[2] = (a) => e.$emit("search", a))
         }, null, 8, ["options", "cachedOptions", "selected", "loading", "hasMore", "searchable", "remote", "debounceTime", "layout"])
       ]),
       _: 1
@@ -167,5 +165,5 @@ const Q = { class: "flex flex-wrap gap-1.5 items-center flex-1 min-w-0 py-0.5" }
   }
 });
 export {
-  ne as default
+  oe as default
 };

package/components/MultiSelect/composables/useMultiSelectHydration.d.ts

@@ -0,0 +1,97 @@
+import { IDropdownOption } from '../../../types';
+interface UseMultiSelectHydrationOptions {
+    getValues: () => any[];
+    getOptions: () => IDropdownOption[];
+    fetchSelected?: (ids: any[]) => Promise<IDropdownOption[]>;
+    isInitialLoadDone: () => boolean;
+}
+/**
+ * Handles hydration of selected values that are not present in the current options list.
+ * Waits until initial options load is complete before checking for missing IDs.
+ */
+export declare function useMultiSelectHydration(opts: UseMultiSelectHydrationOptions): {
+    selectedBuffer: import('vue').Ref<Map<any, {
+        label: string;
+        labelI18n?: string;
+        value?: any;
+        subtitle?: string;
+        subtitleI18n?: string;
+        description?: string;
+        descriptionI18n?: string;
+        icon?: string;
+        emoji?: string;
+        disabled?: {
+            valueOf: () => boolean;
+        };
+        iconClass?: string;
+        iconStyle?: any;
+        length?: number;
+        values?: any;
+        data?: any;
+        class?: string;
+        triggerClass?: string;
+        children?: /*elided*/ any[];
+        key?: string;
+        position?: any;
+        offset?: [number, number];
+        showChevron?: boolean;
+        confirmation?: boolean | {
+            title?: string;
+            description?: string;
+            confirmText?: string;
+            cancelText?: string;
+            variant?: "danger" | "primary" | "warning" | "success" | "info";
+        };
+        onSelect?: (payload: {
+            value: any;
+            option: IDropdownOption;
+            data: IDropdownOption[];
+            values?: any;
+        }) => void;
+        _originalOption?: /*elided*/ any;
+        _path?: /*elided*/ any[];
+    }> & Omit<Map<any, IDropdownOption>, keyof Map<any, any>>, Map<any, IDropdownOption> | (Map<any, {
+        label: string;
+        labelI18n?: string;
+        value?: any;
+        subtitle?: string;
+        subtitleI18n?: string;
+        description?: string;
+        descriptionI18n?: string;
+        icon?: string;
+        emoji?: string;
+        disabled?: {
+            valueOf: () => boolean;
+        };
+        iconClass?: string;
+        iconStyle?: any;
+        length?: number;
+        values?: any;
+        data?: any;
+        class?: string;
+        triggerClass?: string;
+        children?: /*elided*/ any[];
+        key?: string;
+        position?: any;
+        offset?: [number, number];
+        showChevron?: boolean;
+        confirmation?: boolean | {
+            title?: string;
+            description?: string;
+            confirmText?: string;
+            cancelText?: string;
+            variant?: "danger" | "primary" | "warning" | "success" | "info";
+        };
+        onSelect?: (payload: {
+            value: any;
+            option: IDropdownOption;
+            data: IDropdownOption[];
+            values?: any;
+        }) => void;
+        _originalOption?: /*elided*/ any;
+        _path?: /*elided*/ any[];
+    }> & Omit<Map<any, IDropdownOption>, keyof Map<any, any>>)>;
+    isHydrating: import('vue').Ref<boolean, boolean>;
+    hydrateSelected: (values: any[]) => Promise<void>;
+};
+export {};

package/components/MultiSelect/composables/useMultiSelectHydration.js

@@ -0,0 +1,30 @@
+import { ref as s } from "vue";
+function h(n) {
+  const r = s(/* @__PURE__ */ new Map()), l = s(!1);
+  return {
+    selectedBuffer: r,
+    isHydrating: l,
+    hydrateSelected: async (c) => {
+      if (!n.fetchSelected || !c?.length || !n.isInitialLoadDone()) return;
+      const f = n.getOptions(), a = c.filter((e) => {
+        const t = r.value.has(e), o = f.some((i) => (i.value ?? i.label) === e);
+        return !t && !o;
+      });
+      if (a.length) {
+        l.value = !0;
+        try {
+          (await n.fetchSelected(a)).forEach((t) => {
+            r.value.set(t.value ?? t.label, t);
+          });
+        } catch (e) {
+          console.error("[MultiSelect] Hydration failed:", e);
+        } finally {
+          l.value = !1;
+        }
+      }
+    }
+  };
+}
+export {
+  h as useMultiSelectHydration
+};

package/components/MultiSelect/index.d.ts

@@ -1 +1,2 @@
 export { default as MultiSelect } from './MultiSelect.vue';
+export * from './composables/useMultiSelectHydration';

package/components/Screen/ScreenFilter.vue.js

@@ -11,7 +11,7 @@ import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
-/* empty css                          */
+/* empty css                           */
 import "iconify-icon-picker";
 import "iconify-icon-picker/style.css";
 /* empty css                        */