vlite3 0.7.8 → 0.7.10

package/components/ColorPicker/ColorIro.vue3.js

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

package/components/ColorPicker/ColorPicker.vue.js

@@ -5,8 +5,8 @@ import O from "../Input.vue.js";
 /* empty css            */
 import "../../core/config.js";
 import y from "../Button.vue.js";
-import E from "./ColorIro.vue.js";
-/* empty css              */
+import E from "./ColorIro.vue2.js";
+/* empty css             */
 import { useEyeDropper as P } from "@vueuse/core";
 const I = {
   key: 0,

package/components/Dropdown/Dropdown.vue.js

@@ -1,12 +1,13 @@
-import { defineComponent as J, ref as s, computed as y, watch as $, provide as K, reactive as Q, toRefs as W, openBlock as A, createElementBlock as X, normalizeStyle as Y, createVNode as T, unref as O, withCtx as u, renderSlot as d, createBlock as Z, normalizeClass as _, createSlots as ee, normalizeProps as M, guardReactiveProps as H, createCommentVNode as te } from "vue";
-import le from "v-tooltip-lite";
+import { defineComponent as K, ref as i, computed as m, watch as T, provide as Q, reactive as W, toRefs as X, openBlock as H, createElementBlock as Y, normalizeStyle as Z, createVNode as B, unref as v, withCtx as c, renderSlot as d, createBlock as _, normalizeClass as ee, createSlots as te, normalizeProps as M, guardReactiveProps as L, createCommentVNode as le } from "vue";
+import oe from "v-tooltip-lite";
 import "v-tooltip-lite/style.css";
 import ne from "./DropdownMenu.vue.js";
-import oe from "./DropdownTrigger.vue.js";
-import ae from "../ConfirmationModal.vue.js";
-import { useDropdownIds as ie } from "./composables/useDropdownIds.js";
-import { useDropdownSelection as se } from "./composables/useDropdownSelection.js";
-const pe = /* @__PURE__ */ J({
+import ae from "./DropdownTrigger.vue.js";
+import ie from "../ConfirmationModal.vue.js";
+import { useDropdownIds as se } from "./composables/useDropdownIds.js";
+import { useDropdownSelection as re } from "./composables/useDropdownSelection.js";
+import { useDropdownHydration as ue } from "./composables/useDropdownHydration.js";
+const be = /* @__PURE__ */ K({
   __name: "Dropdown",
   props: {
     selected: {},
@@ -45,228 +46,216 @@ const pe = /* @__PURE__ */ J({
     isNested: { type: Boolean, default: !1 }
   },
   emits: ["onSelect", "update:modelValue", "onOpen", "onClose", "update:isOpen", "load-more", "search"],
-  setup(n, { emit: V }) {
-    const o = n, p = V, g = s(!1), f = s(null), r = s({
+  setup(l, { emit: V }) {
+    const n = l, p = V, h = i(!1), f = i(null), s = i({
       title: "Confirm Selection",
       description: "Are you sure you want to select this option?",
       confirmText: "Confirm",
       cancelText: "Cancel",
       variant: "primary"
-    }), E = y(() => o.position ? o.position : o.direction === "rtl" ? "bottom-end" : "bottom-start"), L = y(() => o.nestedPosition ? o.nestedPosition : o.direction === "rtl" ? "left-start" : "right-start"), S = s(o.isOpen || !1), b = s(0);
-    $(
-      () => o.isOpen,
+    }), R = m(() => n.position ? n.position : n.direction === "rtl" ? "bottom-end" : "bottom-start"), z = m(() => n.nestedPosition ? n.nestedPosition : n.direction === "rtl" ? "left-start" : "right-start"), O = i(n.isOpen || !1), y = i(0);
+    T(
+      () => n.isOpen,
       (e) => {
-        e !== void 0 && (S.value = e);
+        e !== void 0 && (O.value = e);
       }
     );
-    const B = (e) => {
-      S.value = e, p("update:isOpen", e), p(e ? "onOpen" : "onClose");
-    }, C = () => {
-      B(!1);
+    const P = (e) => {
+      O.value = e, p("update:isOpen", e), p(e ? "onOpen" : "onClose");
+    }, g = () => {
+      P(!1);
     };
-    K("dropdown-context", {
-      close: C,
+    Q("dropdown-context", {
+      close: g,
       onChildToggle: (e) => {
-        e ? b.value++ : b.value = Math.max(0, b.value - 1);
+        e ? y.value++ : y.value = Math.max(0, y.value - 1);
       }
     });
-    const w = y(() => o.options ? o.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), m = s([]);
-    $(
-      w,
+    const b = m(() => n.options ? n.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), C = i([]), I = i(!1), S = i(!1);
+    T(
+      b,
       (e) => {
-        if (e)
-          if (o.remote) {
-            const l = [...m.value];
+        if (e) {
+          if (n.remote) {
+            const o = [...C.value];
             e.forEach((t) => {
-              l.some((a) => a.value !== void 0 && t.value !== void 0 ? typeof a.value == "object" && a.key && t.key ? a.key === t.key && a.value[a.key] === t.value[t.key] : a.value === t.value : a.label === t.label) || l.push(t);
-            }), m.value = l;
+              o.some((a) => a.value !== void 0 && t.value !== void 0 ? typeof a.value == "object" && a.key && t.key ? a.key === t.key && a.value[a.key] === t.value[t.key] : a.value === t.value : a.label === t.label) || o.push(t);
+            }), C.value = o;
           } else
-            m.value = e;
+            C.value = e;
+          !I.value && e.length > 0 && (I.value = !0, setTimeout(() => {
+            S.value = !0, N($.value);
+          }, 10));
+        }
       },
       { immediate: !0 }
       // Performance fix: Removed deep: true to prevent heavy recursion mapping
     );
-    const v = s(/* @__PURE__ */ new Map()), k = s(!1), j = async (e) => {
-      if (!o.fetchSelected || e === void 0 || e === null) return;
-      let l = [];
-      Array.isArray(e) ? l = e : typeof e == "object" ? l = Object.values(e) : l = [e];
-      const t = l.filter((i) => {
-        const a = v.value.has(i), x = m.value.some((c) => (c.value ?? c.label) === i);
-        return !a && !x;
-      });
-      if (t.length) {
-        k.value = !0;
-        try {
-          (await o.fetchSelected(t)).forEach((a) => {
-            v.value.set(a.value ?? a.label, a);
-          });
-        } catch (i) {
-          console.error("[Dropdown] Hydration failed:", i);
-        } finally {
-          k.value = !1;
-        }
-      }
-    }, h = y(() => {
-      const e = [...m.value], l = new Set(e.map((t) => t.value ?? t.label));
-      return v.value.forEach((t, i) => {
-        l.has(i) || (e.unshift(t), l.add(i));
+    const u = m(() => {
+      const e = [...C.value], o = new Set(e.map((t) => t.value ?? t.label));
+      return k.value.forEach((t, r) => {
+        o.has(r) || (e.unshift(t), o.add(r));
       }), e;
-    }), { getAllRecursiveIds: z } = ie(), D = Q({
-      ...W(o),
-      options: h
-    }), { currentValue: P, selectedLabel: I, selectOption: R } = se(
-      D,
+    }), { selectedBuffer: k, isHydrating: D, hydrateSelected: N } = ue({
+      fetchSelected: n.fetchSelected,
+      getAvailableOptions: () => u.value,
+      isReady: () => S.value
+    }), { getAllRecursiveIds: E } = se(), j = W({
+      ...X(n),
+      options: u
+    }), { currentValue: $, selectedLabel: x, selectOption: U } = re(
+      j,
       p
-    ), F = y(() => {
-      const e = o.ignoreClickOutside || [], l = z(h.value);
-      return [.../* @__PURE__ */ new Set([...e, ...l])];
+    ), q = m(() => {
+      const e = n.ignoreClickOutside || [], o = E(u.value);
+      return [.../* @__PURE__ */ new Set([...e, ...o, ".tooltip-container"])];
     });
-    $(
-      () => P.value,
+    T(
+      () => $.value,
       (e) => {
-        j(e);
+        S.value && N(e);
       },
-      { immediate: !0, deep: !0 }
+      { deep: !0 }
     );
-    const U = (e) => {
-      o.doubleConfirmation || !!e.confirmation ? (f.value = e, typeof e.confirmation == "object" ? r.value = {
+    const F = (e) => {
+      n.doubleConfirmation || !!e.confirmation ? (f.value = e, typeof e.confirmation == "object" ? s.value = {
         title: e.confirmation.title || "Confirm Selection",
         description: e.confirmation.description || "Are you sure you want to select this option?",
         confirmText: e.confirmation.confirmText || "Confirm",
         cancelText: e.confirmation.cancelText || "Cancel",
         variant: e.confirmation.variant || "primary"
-      } : r.value = {
+      } : s.value = {
         title: "Confirm Selection",
         description: `Are you sure you want to select "${e.label}"?`,
         confirmText: "Confirm",
         cancelText: "Cancel",
         variant: "primary"
-      }, g.value = !0, C()) : (N(e), o.closeOnSelect && C());
-    }, N = (e) => {
-      const l = e.value ?? e.label;
-      v.value.has(l) || v.value.set(l, e);
-      const t = R(e);
-      if (!o.isNested) {
-        const i = e._originalOption || e, a = i.value ?? i.label;
-        (e._path || [i]).forEach((c) => {
-          typeof c.onSelect == "function" && c.onSelect({
+      }, h.value = !0, g()) : (A(e), n.closeOnSelect && g());
+    }, A = (e) => {
+      const o = e.value ?? e.label;
+      k.value.has(o) || k.value.set(o, e);
+      const t = U(e);
+      if (!n.isNested) {
+        const r = e._originalOption || e, a = r.value ?? r.label;
+        (e._path || [r]).forEach((w) => {
+          typeof w.onSelect == "function" && w.onSelect({
             value: a,
-            option: c,
-            data: h.value || [],
+            option: w,
+            data: u.value || [],
             values: t
           });
         });
       }
-    }, q = () => {
-      f.value && (N(f.value), f.value = null, g.value = !1);
     }, G = () => {
-      f.value = null, g.value = !1;
+      f.value && (A(f.value), f.value = null, h.value = !1);
+    }, J = () => {
+      f.value = null, h.value = !1;
     };
-    return (e, l) => (A(), X("div", {
+    return (e, o) => (H(), Y("div", {
       class: "relative inline-block text-left",
-      style: Y({ direction: n.direction })
+      style: Z({ direction: l.direction })
     }, [
-      T(O(le), {
+      B(v(oe), {
         content: "",
         trigger: "click",
         arrow: !1,
-        teleport: n.teleport,
-        offset: n.offset,
-        placement: E.value,
-        isOpen: S.value,
-        keepAlive: b.value > 0,
-        menuId: n.menuId,
-        ignoreClickOutside: F.value,
+        teleport: l.teleport,
+        offset: l.offset,
+        placement: R.value,
+        isOpen: O.value,
+        keepAlive: y.value > 0,
+        menuId: l.menuId,
+        ignoreClickOutside: q.value,
         class: "w-full",
-        className: "dropdown " + (n.className || ""),
-        onOnShow: l[2] || (l[2] = (t) => e.$emit("onOpen")),
-        onOnHide: l[3] || (l[3] = (t) => e.$emit("onClose")),
-        "onUpdate:isOpen": B,
+        className: "dropdown " + (l.className || ""),
+        onOnShow: o[2] || (o[2] = (t) => e.$emit("onOpen")),
+        onOnHide: o[3] || (o[3] = (t) => e.$emit("onClose")),
+        "onUpdate:isOpen": P,
         triggerClass: "w-full",
         styles: { padding: "0" }
       }, {
-        trigger: u(({ isOpen: t }) => [
-          d(e.$slots, "trigger", M(H({ selectedLabel: O(I), isOpen: t })), () => [
-            T(oe, {
-              "selected-label": O(I),
+        trigger: c(({ isOpen: t }) => [
+          d(e.$slots, "trigger", M(L({ selectedLabel: v(x), isOpen: t })), () => [
+            B(ae, {
+              "selected-label": v(x),
               "is-open": t,
-              direction: n.direction,
-              triggerProps: n.triggerProps,
+              direction: l.direction,
+              triggerProps: l.triggerProps,
               class: "w-full"
             }, null, 8, ["selected-label", "is-open", "direction", "triggerProps"])
           ])
         ]),
-        default: u(() => [
+        default: c(() => [
           d(e.$slots, "default"),
-          w.value.length || h.value.length || e.$slots.menu || e.$slots.item || n.remote || n.searchable ? (A(), Z(ne, {
+          b.value.length || u.value.length || e.$slots.menu || e.$slots.item || l.remote || l.searchable ? (H(), _(ne, {
             key: 0,
-            options: w.value,
-            cachedOptions: h.value,
-            class: _(n.className),
-            selected: O(P),
-            selectedIndex: n.selectedIndex,
-            maxHeight: n.maxHeight,
-            nestedPosition: L.value,
-            nestedOffset: n.nestedOffset,
-            selectable: n.selectable,
-            direction: n.direction,
-            layout: n.layout,
-            columns: n.columns,
-            loading: n.loading || k.value,
-            hasMore: n.hasMore,
-            searchable: n.searchable,
-            remote: n.remote,
-            debounceTime: n.debounceTime,
-            onSelect: U,
-            onClose: C,
-            onLoadMore: l[0] || (l[0] = (t) => e.$emit("load-more")),
-            onSearch: l[1] || (l[1] = (t) => e.$emit("search", t))
-          }, ee({ _: 2 }, [
+            options: b.value,
+            cachedOptions: u.value,
+            class: ee(l.className),
+            selected: v($),
+            selectedIndex: l.selectedIndex,
+            maxHeight: l.maxHeight,
+            nestedPosition: z.value,
+            nestedOffset: l.nestedOffset,
+            selectable: l.selectable,
+            direction: l.direction,
+            layout: l.layout,
+            columns: l.columns,
+            loading: l.loading || v(D),
+            hasMore: l.hasMore,
+            searchable: l.searchable,
+            remote: l.remote,
+            debounceTime: l.debounceTime,
+            onSelect: F,
+            onClose: g,
+            onLoadMore: o[0] || (o[0] = (t) => e.$emit("load-more")),
+            onSearch: o[1] || (o[1] = (t) => e.$emit("search", t))
+          }, te({ _: 2 }, [
             e.$slots.menu ? {
               name: "menu",
-              fn: u(() => [
+              fn: c(() => [
                 d(e.$slots, "menu")
               ]),
               key: "0"
             } : void 0,
             e.$slots.item ? {
               name: "item",
-              fn: u((t) => [
-                d(e.$slots, "item", M(H(t)))
+              fn: c((t) => [
+                d(e.$slots, "item", M(L(t)))
               ]),
               key: "1"
             } : void 0,
             e.$slots.header ? {
               name: "header",
-              fn: u(() => [
+              fn: c(() => [
                 d(e.$slots, "header")
               ]),
               key: "2"
             } : void 0,
             e.$slots.footer ? {
               name: "footer",
-              fn: u(() => [
+              fn: c(() => [
                 d(e.$slots, "footer")
               ]),
               key: "3"
             } : void 0
-          ]), 1032, ["options", "cachedOptions", "class", "selected", "selectedIndex", "maxHeight", "nestedPosition", "nestedOffset", "selectable", "direction", "layout", "columns", "loading", "hasMore", "searchable", "remote", "debounceTime"])) : te("", !0)
+          ]), 1032, ["options", "cachedOptions", "class", "selected", "selectedIndex", "maxHeight", "nestedPosition", "nestedOffset", "selectable", "direction", "layout", "columns", "loading", "hasMore", "searchable", "remote", "debounceTime"])) : le("", !0)
         ]),
         _: 3
       }, 8, ["teleport", "offset", "placement", "isOpen", "keepAlive", "menuId", "ignoreClickOutside", "className"]),
-      T(ae, {
-        show: g.value,
-        title: r.value.title,
-        description: r.value.description,
-        "confirm-text": r.value.confirmText,
-        "cancel-text": r.value.cancelText,
-        variant: r.value.variant,
-        onConfirm: q,
-        onCancel: G
+      B(ie, {
+        show: h.value,
+        title: s.value.title,
+        description: s.value.description,
+        "confirm-text": s.value.confirmText,
+        "cancel-text": s.value.cancelText,
+        variant: s.value.variant,
+        onConfirm: G,
+        onCancel: J
       }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text", "variant"])
     ], 4));
   }
 });
 export {
-  pe as default
+  be as default
 };

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

@@ -0,0 +1,105 @@
+import { IDropdownOption } from '../../../types';
+interface UseDropdownHydrationOptions {
+    fetchSelected?: (ids: any[]) => Promise<IDropdownOption[]>;
+    /**
+     * Returns the current set of options that are already available.
+     * Hydration will skip IDs found here.
+     */
+    getAvailableOptions: () => IDropdownOption[];
+    /**
+     * Must return true before hydration is allowed to run.
+     * Use this to gate hydration until the initial options fetch + delay is done.
+     */
+    isReady: () => boolean;
+}
+/**
+ * Manages hydration of selected values whose labels are not yet in the option list.
+ * Defers fetching until isReady() returns true, so it never fires for IDs already
+ * present in the initial options batch.
+ */
+export declare function useDropdownHydration(opts: UseDropdownHydrationOptions): {
+    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: (val: any) => Promise<void>;
+};
+export {};

package/components/Dropdown/composables/useDropdownHydration.js

@@ -0,0 +1,32 @@
+import { ref as f } from "vue";
+function h(n) {
+  const l = f(/* @__PURE__ */ new Map()), c = f(!1);
+  return {
+    selectedBuffer: l,
+    isHydrating: c,
+    hydrateSelected: async (e) => {
+      if (!n.fetchSelected || e === void 0 || e === null || !n.isReady()) return;
+      let a = [];
+      Array.isArray(e) ? a = e : typeof e == "object" ? a = Object.values(e) : a = [e];
+      const o = n.getAvailableOptions(), i = a.filter((t) => {
+        const r = l.value.has(t), d = o.some((s) => (s.value ?? s.label) === t);
+        return !r && !d;
+      });
+      if (i.length) {
+        c.value = !0;
+        try {
+          (await n.fetchSelected(i)).forEach((r) => {
+            l.value.set(r.value ?? r.label, r);
+          });
+        } catch (t) {
+          console.error("[Dropdown] Hydration failed:", t);
+        } finally {
+          c.value = !1;
+        }
+      }
+    }
+  };
+}
+export {
+  h as useDropdownHydration
+};