vlite3 0.7.8 → 0.7.9

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])];
     });
-    $(
-      () => 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
+};

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/index.js

@@ -2,14 +2,14 @@ import { default as f } from "vue3-google-signin";
 import { deepMerge as l } from "./utils/object.js";
 import { camelCase as p, capitalize as d, copyToClipboard as u, debounce as x, delay as i, downloadFile as n, flattenArray as c, formatCurrency as T, getUniqueId as S, isAppleDevice as b, isEmpty as g, randomNumber as P, removeExtraProperties as C, slugify as I, throttle as D, truncate as v } from "./utils/functions.js";
 import { lazySearch as h, resetSearchIndex as A, search as B } from "./utils/search.util.js";
-import { env as k } from "./utils/env.js";
-import { $t as y } from "./utils/i18n.js";
+import { env as y } from "./utils/env.js";
+import { $t as k } from "./utils/i18n.js";
 import { default as E } from "./components/Chip/Chip.vue.js";
 import { default as R } from "./components/Form/Form.vue.js";
 import { default as O } from "./components/Form/FormField.vue.js";
 import { default as G } from "./components/Form/FormFields.vue.js";
 import { default as _ } from "./components/Form/CustomFields.vue.js";
-import { useForm as H } from "./components/Form/composables/useForm.js";
+import { useForm as V } from "./components/Form/composables/useForm.js";
 import { useFileUpload as j } from "./components/Form/composables/useFileUpload.js";
 import { default as Q } from "./components/Tabes/Tabes.vue.js";
 import { default as X } from "./components/Stats/Stats.vue.js";
@@ -30,14 +30,14 @@ import { MASONRY_BREAKPOINTS as Ie } from "./components/Masonry/types.js";
 import { default as ve } from "./components/Spinner/Spinner.vue.js";
 import { default as he } from "./components/Barcode/Barcode.vue.js";
 import { barcodesConstants as Be } from "./components/Barcode/types.js";
-import { default as ke } from "./components/Carousel/Carousel.vue.js";
-import { default as ye } from "./components/Dropdown/Dropdown.vue.js";
+import { default as ye } from "./components/Carousel/Carousel.vue.js";
+import { default as ke } from "./components/Dropdown/Dropdown.vue.js";
 import { default as Ee } from "./components/Dropdown/DropdownMenu.vue.js";
 import { default as Re } from "./components/Dropdown/DropdownTrigger.vue.js";
 import { default as Oe } from "./components/Dropdown/DropdownItem.vue.js";
 import { useDropdownSelection as Ge } from "./components/Dropdown/composables/useDropdownSelection.js";
 import { useDropdownIds as _e } from "./components/Dropdown/composables/useDropdownIds.js";
-import { default as He } from "./components/Breadcrumb/Breadcrumb.vue.js";
+import { default as Ve } from "./components/Breadcrumb/Breadcrumb.vue.js";
 import { default as je } from "./components/Breadcrumb/BreadcrumbItem.vue.js";
 import { default as Qe } from "./components/FileTree/FileTree.vue.js";
 import { default as Xe } from "./components/FileTree/FileTreeNode.vue.js";
@@ -55,98 +55,99 @@ import { default as Do } from "./components/Accordion/AccordionItem.vue.js";
 import { default as No } from "./components/Accordion/AccordionTrigger.vue.js";
 import { default as Ao } from "./components/Accordion/AccordionContent.vue.js";
 import { default as Fo } from "./components/ChoiceBox/ChoiceBox.vue.js";
-import { default as wo } from "./components/DataTable/DataTable.vue.js";
-import { default as Mo } from "./components/DataTable/DataTableHeader.vue.js";
+import { default as Mo } from "./components/DataTable/DataTable.vue.js";
+import { default as wo } from "./components/DataTable/DataTableHeader.vue.js";
 import { default as Lo } from "./components/DataTable/DataTableRow.vue.js";
 import { SCREEN_CONTEXT_KEY as Ko } from "./components/DataTable/types.js";
 import { initializeTheme as zo, useTheme as Go } from "./composables/useTheme.js";
 import { default as _o } from "./components/FilePicker/FilePicker.vue.js";
-import { default as Ho } from "./components/Pagination/Pagination.vue.js";
+import { default as Vo } from "./components/Pagination/Pagination.vue.js";
 import { default as jo } from "./components/ExportData/ExportData.vue.js";
 import { default as Qo } from "./components/ImportData/ImportData.vue.js";
 import { default as Xo } from "./components/MultiSelect/MultiSelect.vue.js";
-import { default as Jo } from "./components/PricingPlan/PricingPlan.vue.js";
-import { default as er } from "./components/PricingPlan/PricingPlanItem.vue.js";
-import { default as rr } from "./components/SidebarMenu/SidebarMenu.vue.js";
-import { default as ar } from "./components/SidebarMenu/SidebarMenuItem.vue.js";
+import { useMultiSelectHydration as Jo } from "./components/MultiSelect/composables/useMultiSelectHydration.js";
+import { default as er } from "./components/PricingPlan/PricingPlan.vue.js";
+import { default as rr } from "./components/PricingPlan/PricingPlanItem.vue.js";
+import { default as ar } from "./components/SidebarMenu/SidebarMenu.vue.js";
+import { default as mr } from "./components/SidebarMenu/SidebarMenuItem.vue.js";
 /* empty css                                            */
-import { default as mr } from "./components/ProgressBar/ProgressBar.vue.js";
-import { default as sr } from "./components/PermissionMatrix/PermissionMatrix.vue.js";
-import { default as dr } from "./components/PermissionMatrix/PermissionEditor.vue.js";
-import { useAdvancedKeyStroke as xr, useKeyStroke as ir } from "./composables/useKeyStroke.js";
-import { vScrollReveal as cr } from "./directives/vScrollReveal.js";
-import { default as Sr } from "./components/AvatarUploader/AvatarUploader.vue.js";
-import { configure as gr, pauseTimers as Pr, removeToast as Cr, resumeTimers as Ir, showToast as Dr, toast as vr, useNotifications as Nr } from "./composables/useNotifications.js";
-import { default as Ar } from "./components/Timeline/Timeline.vue.js";
-import { default as Fr } from "./components/Timeline/TimelineItem.vue.js";
+import { default as sr } from "./components/ProgressBar/ProgressBar.vue.js";
+import { default as dr } from "./components/PermissionMatrix/PermissionMatrix.vue.js";
+import { default as xr } from "./components/PermissionMatrix/PermissionEditor.vue.js";
+import { useAdvancedKeyStroke as nr, useKeyStroke as cr } from "./composables/useKeyStroke.js";
+import { vScrollReveal as Sr } from "./directives/vScrollReveal.js";
+import { default as gr } from "./components/AvatarUploader/AvatarUploader.vue.js";
+import { configure as Cr, pauseTimers as Ir, removeToast as Dr, resumeTimers as vr, showToast as Nr, toast as hr, useNotifications as Ar } from "./composables/useNotifications.js";
+import { default as Fr } from "./components/Timeline/Timeline.vue.js";
+import { default as Mr } from "./components/Timeline/TimelineItem.vue.js";
 import { default as wr } from "./components/Timeline/TimelineIndicator.vue.js";
-import { default as Mr } from "./components/Icon.vue.js";
-import { default as Lr } from "./components/Logo.vue.js";
-import { default as Kr } from "./components/Alert.vue.js";
-import { default as zr } from "./components/Badge.vue.js";
-import { default as Ur } from "./components/Input.vue.js";
+import { default as Lr } from "./components/Icon.vue.js";
+import { default as Kr } from "./components/Logo.vue.js";
+import { default as zr } from "./components/Alert.vue.js";
+import { default as Ur } from "./components/Badge.vue.js";
+import { default as Hr } from "./components/Input.vue.js";
 /* empty css                      */
-import { default as Vr } from "./components/Label.vue.js";
-import { default as Yr } from "./components/Modal.vue.js";
-import { default as qr } from "./components/Avatar.vue.js";
-import { default as Wr } from "./components/Button.vue.js";
-import { default as $r } from "./components/BackButton.vue.js";
-import { default as Zr } from "./components/Slider.vue.js";
-import { default as ot } from "./components/Switch.vue.js";
-import { default as tt } from "./components/Tooltip.vue.js";
-import { default as ft } from "./components/CheckBox.vue.js";
-import { default as lt } from "./components/Textarea.vue.js";
-import { default as pt } from "./components/SidePanel.vue.js";
-import { default as ut } from "./components/DatePicker.vue.js";
-import { default as it } from "./components/IconPicker.vue.js";
-import { default as ct } from "./components/ButtonGroup.vue.js";
-import { default as St } from "./components/NumberInput.vue.js";
-import { default as gt } from "./components/ThemeToggle.vue.js";
-import { default as Ct } from "./components/GoogleLogin.vue.js";
-import { default as Dt } from "./components/ColorPicker/ColorPicker.vue.js";
-import { default as Nt } from "./components/ConfirmationModal.vue.js";
-import { default as At } from "./components/ToastNotification.vue.js";
-import { default as Ft } from "./components/CommandPaletteContent.vue.js";
+import { default as Yr } from "./components/Label.vue.js";
+import { default as qr } from "./components/Modal.vue.js";
+import { default as Wr } from "./components/Avatar.vue.js";
+import { default as $r } from "./components/Button.vue.js";
+import { default as Zr } from "./components/BackButton.vue.js";
+import { default as ot } from "./components/Slider.vue.js";
+import { default as tt } from "./components/Switch.vue.js";
+import { default as ft } from "./components/Tooltip.vue.js";
+import { default as lt } from "./components/CheckBox.vue.js";
+import { default as pt } from "./components/Textarea.vue.js";
+import { default as ut } from "./components/SidePanel.vue.js";
+import { default as it } from "./components/DatePicker.vue.js";
+import { default as ct } from "./components/IconPicker.vue.js";
+import { default as St } from "./components/ButtonGroup.vue.js";
+import { default as gt } from "./components/NumberInput.vue.js";
+import { default as Ct } from "./components/ThemeToggle.vue.js";
+import { default as Dt } from "./components/GoogleLogin.vue.js";
+import { default as Nt } from "./components/ColorPicker/ColorPicker.vue.js";
+import { default as At } from "./components/ConfirmationModal.vue.js";
+import { default as Ft } from "./components/ToastNotification.vue.js";
+import { default as Mt } from "./components/CommandPaletteContent.vue.js";
 import { default as wt } from "./components/NavbarCommandPalette.vue.js";
-import { default as Mt } from "./components/DateRangePicker.vue.js";
-import { createVLite as Lt } from "./core/index.js";
-import { default as Kt } from "./components/StatusChip/StatusChip.vue.js";
-import { STATUS_MAP as zt, normalizeStatus as Gt, resolveStatus as Ut } from "./components/StatusChip/status-map.js";
-import { default as Vt } from "./components/Price/Price.vue.js";
-import { default as Yt } from "./components/Date/Date.vue.js";
-import { useVLiteConfig as qt } from "./core/config.js";
+import { default as Lt } from "./components/DateRangePicker.vue.js";
+import { createVLite as Kt } from "./core/index.js";
+import { default as zt } from "./components/StatusChip/StatusChip.vue.js";
+import { STATUS_MAP as Ut, normalizeStatus as _t, resolveStatus as Ht } from "./components/StatusChip/status-map.js";
+import { default as Yt } from "./components/Price/Price.vue.js";
+import { default as qt } from "./components/Date/Date.vue.js";
+import { useVLiteConfig as Wt } from "./core/config.js";
 export {
-  y as $t,
+  k as $t,
   Co as Accordion,
   Ao as AccordionContent,
   Do as AccordionItem,
   No as AccordionTrigger,
-  Kr as Alert,
-  qr as Avatar,
-  Sr as AvatarUploader,
-  $r as BackButton,
-  zr as Badge,
+  zr as Alert,
+  Wr as Avatar,
+  gr as AvatarUploader,
+  Zr as BackButton,
+  Ur as Badge,
   he as Barcode,
-  He as Breadcrumb,
+  Ve as Breadcrumb,
   je as BreadcrumbItem,
-  Wr as Button,
-  ct as ButtonGroup,
-  ke as Carousel,
-  ft as CheckBox,
+  $r as Button,
+  St as ButtonGroup,
+  ye as Carousel,
+  lt as CheckBox,
   E as Chip,
   Fo as ChoiceBox,
-  Dt as ColorPicker,
-  Ft as CommandPaletteContent,
-  Nt as ConfirmationModal,
+  Nt as ColorPicker,
+  Mt as CommandPaletteContent,
+  At as ConfirmationModal,
   _ as CustomFields,
   mo as DataList,
-  wo as DataTable,
-  Mo as DataTableHeader,
+  Mo as DataTable,
+  wo as DataTableHeader,
   Lo as DataTableRow,
-  Yt as Date,
-  ut as DatePicker,
-  Mt as DateRangePicker,
-  ye as Dropdown,
+  qt as Date,
+  it as DatePicker,
+  Lt as DateRangePicker,
+  ke as Dropdown,
   Oe as DropdownItem,
   Ee as DropdownMenu,
   Re as DropdownTrigger,
@@ -158,71 +159,71 @@ export {
   R as Form,
   O as FormField,
   G as FormFields,
-  Ct as GoogleLogin,
+  Dt as GoogleLogin,
   f as GoogleSignInPlugin,
   be as Heatmap,
-  Mr as Icon,
-  it as IconPicker,
+  Lr as Icon,
+  ct as IconPicker,
   Qo as ImportData,
-  Ur as Input,
+  Hr as Input,
   J as Kanban,
   ee as KanbanBoard,
-  Vr as Label,
+  Yr as Label,
   so as List,
   uo as ListFieldRow,
-  Lr as Logo,
+  Kr as Logo,
   Ie as MASONRY_BREAKPOINTS,
   Pe as Masonry,
-  Yr as Modal,
+  qr as Modal,
   Xo as MultiSelect,
   ae as Navbar,
   wt as NavbarCommandPalette,
   se as NavbarGroup,
   me as NavbarItem,
   de as NavbarTabs,
-  St as NumberInput,
+  gt as NumberInput,
   eo as OTPInput,
-  Ho as Pagination,
-  dr as PermissionEditor,
-  sr as PermissionMatrix,
-  Vt as Price,
-  Jo as PricingPlan,
-  er as PricingPlanItem,
-  mr as ProgressBar,
+  Vo as Pagination,
+  xr as PermissionEditor,
+  dr as PermissionMatrix,
+  Yt as Price,
+  er as PricingPlan,
+  rr as PricingPlanItem,
+  sr as ProgressBar,
   xe as QRCode,
   Ko as SCREEN_CONTEXT_KEY,
-  zt as STATUS_MAP,
+  Ut as STATUS_MAP,
   ne as Screen,
   Te as ScreenFilter,
   ao as Sheet,
-  pt as SidePanel,
-  rr as SidebarMenu,
-  ar as SidebarMenuItem,
-  Zr as Slider,
+  ut as SidePanel,
+  ar as SidebarMenu,
+  mr as SidebarMenuItem,
+  ot as Slider,
   ve as Spinner,
   X as Stats,
-  Kt as StatusChip,
-  ot as Switch,
+  zt as StatusChip,
+  tt as Switch,
   Q as Tabes,
-  lt as Textarea,
-  gt as ThemeToggle,
-  Ar as Timeline,
+  pt as Textarea,
+  Ct as ThemeToggle,
+  Fr as Timeline,
   wr as TimelineIndicator,
-  Fr as TimelineItem,
-  At as ToastNotification,
-  tt as Tooltip,
+  Mr as TimelineItem,
+  Ft as ToastNotification,
+  ft as Tooltip,
   ro as Workbook,
   Be as barcodesConstants,
   p as camelCase,
   d as capitalize,
-  gr as configure,
+  Cr as configure,
   u as copyToClipboard,
-  Lt as createVLite,
+  Kt as createVLite,
   x as debounce,
   l as deepMerge,
   i as delay,
   n as downloadFile,
-  k as env,
+  y as env,
   c as flattenArray,
   T as formatCurrency,
   io as formatDate,
@@ -235,30 +236,31 @@ export {
   b as isAppleDevice,
   g as isEmpty,
   h as lazySearch,
-  Gt as normalizeStatus,
-  Pr as pauseTimers,
+  _t as normalizeStatus,
+  Ir as pauseTimers,
   P as randomNumber,
   C as removeExtraProperties,
-  Cr as removeToast,
+  Dr as removeToast,
   A as resetSearchIndex,
-  Ut as resolveStatus,
-  Ir as resumeTimers,
+  Ht as resolveStatus,
+  vr as resumeTimers,
   B as search,
-  Dr as showToast,
+  Nr as showToast,
   I as slugify,
   D as throttle,
-  vr as toast,
+  hr as toast,
   v as truncate,
-  xr as useAdvancedKeyStroke,
+  nr as useAdvancedKeyStroke,
   _e as useDropdownIds,
   Ge as useDropdownSelection,
   j as useFileUpload,
-  H as useForm,
+  V as useForm,
   re as useKanbanBoard,
-  ir as useKeyStroke,
-  Nr as useNotifications,
+  cr as useKeyStroke,
+  Jo as useMultiSelectHydration,
+  Ar as useNotifications,
   Go as useTheme,
   Je as useTreeSelection,
-  qt as useVLiteConfig,
-  cr as vScrollReveal
+  Wt as useVLiteConfig,
+  Sr as vScrollReveal
 };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "type": "module",
   "main": "index.js",
   "module": "index.js",