vlite3 1.1.2 → 1.1.5

package/components/Modal.vue2.js

@@ -1,14 +1,14 @@
-import { defineComponent as P, ref as c, inject as R, computed as h, markRaw as V, watch as T, provide as W, nextTick as K, onMounted as A, onUnmounted as U, openBlock as s, createElementBlock as r, Fragment as q, mergeProps as B, withModifiers as I, renderSlot as m, createCommentVNode as a, createBlock as S, Teleport as G, normalizeClass as i, createElementVNode as b, toDisplayString as F, createVNode as H, resolveDynamicComponent as J } from "vue";
-import L from "./Button.vue.js";
+import { defineComponent as P, ref as f, inject as R, computed as h, markRaw as V, watch as T, provide as W, nextTick as K, onMounted as L, onUnmounted as A, openBlock as s, createElementBlock as d, Fragment as U, mergeProps as B, withModifiers as S, renderSlot as v, createCommentVNode as n, createBlock as I, Teleport as q, normalizeClass as i, createElementVNode as b, toDisplayString as z, createVNode as G, resolveDynamicComponent as H } from "vue";
+import J from "./Button.vue.js";
 import { useKeyStroke as Q } from "../composables/useKeyStroke.js";
-import { $t as O } from "../utils/i18n.js";
-const X = {
+import { $t as F } from "../utils/i18n.js";
+const X = ["data-testid"], Y = ["data-testid"], Z = {
   key: 0,
   class: "flex-none flex flex-col space-y-1.5 pb-0 border-b border-border/90"
-}, Y = { class: "text-lg font-semibold leading-none tracking-tight" }, Z = {
+}, _ = { class: "text-lg font-semibold leading-none tracking-tight" }, ee = {
   key: 0,
   class: "text-sm text-muted-foreground mb-3.5"
-}, le = /* @__PURE__ */ P({
+}, ae = /* @__PURE__ */ P({
   inheritAttrs: !1,
   __name: "Modal",
   props: {
@@ -28,107 +28,113 @@ const X = {
     bodyProps: {}
   },
   emits: ["close", "update:show", "onOpen"],
-  setup(t, { emit: j }) {
-    const o = t, d = j, l = c(o.show), g = c(!1), v = c(!1), k = c(null);
-    let u = null;
-    const y = c(!1), n = R("dropdown-context", null), C = h(() => o.body ? V(o.body) : void 0);
+  setup(t, { emit: O }) {
+    const o = t, u = O, l = f(o.show), k = f(!1), g = f(!1), C = f(null);
+    let c = null;
+    const y = f(!1), a = R("dropdown-context", null), w = h(() => o.body ? V(o.body) : void 0);
     T(
       () => o.show,
       (e) => {
-        l.value = e, e && (d("onOpen"), n?.close());
+        l.value = e, e && (u("onOpen"), a?.close());
       }
     );
-    const z = () => {
-      l.value = !0, n?.close();
+    const j = () => {
+      l.value = !0, a?.close();
     }, D = (e) => {
-      g.value = e;
+      k.value = e;
     }, E = (e) => {
       y.value = e;
-    }, f = () => {
-      if (g.value) {
-        v.value = !0, u && clearTimeout(u), u = setTimeout(() => {
-          v.value = !1;
+    }, m = () => {
+      if (k.value) {
+        g.value = !0, c && clearTimeout(c), c = setTimeout(() => {
+          g.value = !1;
         }, 1e3);
         return;
       }
-      l.value = !1, d("update:show", !1), d("close");
+      l.value = !1, u("update:show", !1), u("close");
     }, p = () => {
-      l.value = !1, d("update:show", !1), d("close");
+      l.value = !1, u("update:show", !1), u("close");
     };
-    W("modal-context", { close: f, setSubmitting: D, registerFormFooter: E });
+    W("modal-context", { close: m, setSubmitting: D, registerFormFooter: E });
     const M = () => {
-      o.closeOutside && f();
+      o.closeOutside && m();
     }, { onKeyStroke: N } = Q();
-    N("Escape", f), T(l, async (e) => {
-      e ? (n?.onChildToggle?.(!0), document.body.style.overflow = "hidden", await K(), k.value?.focus()) : (document.body.style.overflow = "", n?.onChildToggle?.(!1), y.value = !1);
+    N("Escape", m), T(l, async (e) => {
+      e ? (a?.onChildToggle?.(!0), document.body.style.overflow = "hidden", await K(), C.value?.focus()) : (document.body.style.overflow = "", a?.onChildToggle?.(!1), y.value = !1);
+    }), L(() => {
+      l.value && a?.onChildToggle?.(!0);
     }), A(() => {
-      l.value && n?.onChildToggle?.(!0);
-    }), U(() => {
-      l.value && n?.onChildToggle?.(!1), document.body.style.overflow = "", u && clearTimeout(u);
+      l.value && a?.onChildToggle?.(!1), document.body.style.overflow = "", c && clearTimeout(c);
     });
-    const x = h(() => o.titleI18n ? O(o.titleI18n) : o.title), w = h(
-      () => o.descriptionI18n ? O(o.descriptionI18n) : o.description
+    const r = h(() => o.titleI18n ? F(o.titleI18n) : o.title), x = h(
+      () => o.descriptionI18n ? F(o.descriptionI18n) : o.description
     );
-    return (e, $) => (s(), r(q, null, [
-      e.$slots?.trigger || e.$slots?.default ? (s(), r("span", B({
+    return (e, $) => (s(), d(U, null, [
+      e.$slots?.trigger || e.$slots?.default ? (s(), d("span", B({
         key: 0,
-        onClick: I(z, ["stop"]),
+        onClick: S(j, ["stop"]),
         class: `${t.triggerClass}`
-      }, e.$attrs), [
-        m(e.$slots, "trigger", {}, () => [
-          t.body ? m(e.$slots, "default", { key: 0 }, void 0, !0) : a("", !0)
+      }, e.$attrs, {
+        "data-testid": e.$attrs["data-testid"] ? `${e.$attrs["data-testid"]}-trigger` : r.value ? `modal-trigger-${r.value.toString().toLowerCase().replace(/[^a-z0-9]+/g, "-")}` : "modal-trigger"
+      }), [
+        v(e.$slots, "trigger", {}, () => [
+          t.body ? v(e.$slots, "default", { key: 0 }, void 0, !0) : n("", !0)
         ], !0)
-      ], 16)) : a("", !0),
-      (s(), S(G, { to: "body" }, [
-        l.value ? (s(), r("div", {
+      ], 16, X)) : n("", !0),
+      (s(), I(q, { to: "body" }, [
+        l.value ? (s(), d("div", {
           key: 0,
           class: i(["fixed inset-0 z-50 flex items-center justify-center p-4 v-modal-overlay", t.backdrop ? "v-modal-backdrop" : ""]),
           onClick: M
         }, [
           b("div", {
             ref_key: "modalRef",
-            ref: k,
+            ref: C,
             tabindex: "-1",
+            role: "dialog",
+            "aria-modal": "true",
             class: i(["modal-body relative w-full rounded border border-border/60 bg-body shadow-lg text-foreground flex flex-col max-h-[85vh] sm:max-h-[90vh] focus:outline-none", [t.maxWidth]]),
-            onClick: $[0] || ($[0] = I(() => {
+            "data-testid": e.$attrs["data-testid"] || (r.value ? `modal-${r.value.toString().toLowerCase().replace(/[^a-z0-9]+/g, "-")}` : "modal"),
+            onClick: $[0] || ($[0] = S(() => {
             }, ["stop"]))
           }, [
-            x.value ? (s(), r("div", X, [
+            r.value ? (s(), d("div", Z, [
               b("div", {
                 class: i(["flex items-center justify-between py-2 px-4 rounded-t-md", t.headerClass])
               }, [
-                b("h3", Y, F(x.value), 1),
-                H(L, {
+                b("h3", _, z(r.value), 1),
+                G(J, {
                   rounded: "full",
                   size: "sm",
                   icon: "lucide:x",
                   variant: "ghost",
-                  class: i(["hover:bg-gray-250/25!", { "blink-bg": v.value }]),
-                  onClick: f
+                  class: i(["hover:bg-gray-250/25!", { "blink-bg": g.value }]),
+                  "data-testid": "modal-close-btn",
+                  onClick: m
                 }, null, 8, ["class"])
               ], 2)
-            ])) : a("", !0),
+            ])) : n("", !0),
             b("div", {
               class: i(["flex-1 overflow-y-auto px-4 pt-4 min-h-0 scrollbar-thin scrollbar-stable", [y.value ? "pb-0" : "pb-3.5", t.bodyClass]])
             }, [
-              w.value ? (s(), r("p", Z, F(w.value), 1)) : a("", !0),
-              C.value ? (s(), S(J(C.value), B({ key: 1 }, { ...t.bodyProps, ...e.$attrs }, { close: p }), null, 16)) : m(e.$slots, "default", {
+              x.value ? (s(), d("p", ee, z(x.value), 1)) : n("", !0),
+              w.value ? (s(), I(H(w.value), B({ key: 1 }, { ...t.bodyProps, ...e.$attrs }, { close: p }), null, 16)) : v(e.$slots, "default", {
                 key: 2,
                 close: p
               }, void 0, !0)
             ], 2),
-            e.$slots.footer ? (s(), r("div", {
+            e.$slots.footer ? (s(), d("div", {
               key: 1,
               class: i([t.footerClass, "flex-none flex items-center px-4 py-3 border-t border-border/75 rounded-b-xl bg-body"])
             }, [
-              m(e.$slots, "footer", { close: p }, void 0, !0)
-            ], 2)) : a("", !0)
-          ], 2)
-        ], 2)) : a("", !0)
+              v(e.$slots, "footer", { close: p }, void 0, !0)
+            ], 2)) : n("", !0)
+          ], 10, Y)
+        ], 2)) : n("", !0)
       ]))
     ], 64));
   }
 });
 export {
-  le as default
+  ae as default
 };

package/components/MultiSelect/MultiSelect.vue.d.ts

@@ -5,6 +5,7 @@ interface Props {
     placeholder?: string;
     placeholderI18n?: string;
     disabled?: boolean;
+    readonly?: boolean;
     searchable?: boolean;
     variant?: 'default' | 'outline' | 'solid' | 'floating' | string;
     size?: 'sm' | 'md' | 'lg';
@@ -34,6 +35,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     size: "sm" | "md" | "lg";
     rounded: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | string;
     loading: boolean;
+    readonly: boolean;
     disabled: boolean;
     modelValue: any[];
     options: (IDropdownOption | string | number)[];

package/components/MultiSelect/MultiSelect.vue.js

@@ -1,11 +1,11 @@
-import { defineComponent as P, ref as k, computed as s, watch as M, openBlock as r, createBlock as m, unref as h, withCtx as p, createCommentVNode as f, createElementVNode as g, withKeys as I, withModifiers as y, normalizeClass as c, createElementBlock as v, toDisplayString as S, Fragment as T, renderList as R, createVNode as L, createTextVNode as U } from "vue";
-import C from "../Icon.vue.js";
+import { defineComponent as P, ref as k, computed as d, watch as M, openBlock as r, createBlock as f, unref as h, withCtx as g, createCommentVNode as m, createElementVNode as y, withKeys as I, withModifiers as p, normalizeClass as c, createElementBlock as v, toDisplayString as $, Fragment as T, renderList as R, createVNode as L, createTextVNode as U } from "vue";
+import S from "../Icon.vue.js";
 import q from "../Dropdown/Dropdown.vue.js";
 import G from "../Dropdown/DropdownMenu.vue.js";
-import { $t as $ } from "../../utils/i18n.js";
+import { $t as C } from "../../utils/i18n.js";
 import N from "../Badge.vue.js";
 import { useMultiSelectHydration as J } from "./composables/useMultiSelectHydration.js";
-const Q = ["tabindex"], W = {
+const Q = ["tabindex", "data-testid"], W = {
   key: 0,
   class: "text-muted-foreground pl-0.5 truncate"
 }, X = { class: "truncate min-w-0" }, Y = ["onClick"], Z = {
@@ -19,6 +19,7 @@ const Q = ["tabindex"], W = {
     placeholder: {},
     placeholderI18n: {},
     disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
     searchable: { type: Boolean, default: !0 },
     variant: { default: "outline" },
     size: { default: "md" },
@@ -34,28 +35,28 @@ const Q = ["tabindex"], W = {
     rounded: { default: "md" }
   },
   emits: ["update:modelValue", "change", "load-more", "search"],
-  setup(l, { emit: j }) {
-    const e = l, i = j, o = k(!1), D = s(() => {
-      if (e.placeholderI18n) return $(e.placeholderI18n);
+  setup(t, { emit: j }) {
+    const e = t, i = j, o = k(!1), D = d(() => {
+      if (e.placeholderI18n) return C(e.placeholderI18n);
       if (e.placeholder) return e.placeholder;
-      const t = $("vlite.multiSelect.placeholder");
-      return t !== "vlite.multiSelect.placeholder" ? t : "Select items...";
-    }), x = s(() => e.options ? e.options.map((t) => typeof t == "string" || typeof t == "number" ? { label: String(t), value: String(t) } : t) : []), B = k(!1), w = k(!1);
+      const a = C("vlite.multiSelect.placeholder");
+      return a !== "vlite.multiSelect.placeholder" ? a : "Select items...";
+    }), x = d(() => e.options ? e.options.map((a) => typeof a == "string" || typeof a == "number" ? { label: String(a), value: String(a) } : a) : []), B = k(!1), w = k(!1);
     M(
       x,
-      (t) => {
-        !B.value && t.length > 0 && (B.value = !0, setTimeout(() => {
-          w.value = !0, d.hydrateSelected(e.modelValue || []);
+      (a) => {
+        !B.value && a.length > 0 && (B.value = !0, setTimeout(() => {
+          w.value = !0, s.hydrateSelected(e.modelValue || []);
         }, 10));
       },
       { immediate: !0 }
     );
-    const V = s(() => {
-      const t = [...x.value], a = new Set(t.map((n) => n.value ?? n.label));
-      return d.selectedBuffer.value.forEach((n, u) => {
-        a.has(u) || (t.unshift(n), a.add(u));
-      }), t;
-    }), d = J({
+    const V = d(() => {
+      const a = [...x.value], n = new Set(a.map((l) => l.value ?? l.label));
+      return s.selectedBuffer.value.forEach((l, u) => {
+        n.has(u) || (a.unshift(l), n.add(u));
+      }), a;
+    }), s = J({
       fetchSelected: e.fetchSelected,
       getValues: () => e.modelValue || [],
       getOptions: () => V.value,
@@ -63,77 +64,78 @@ const Q = ["tabindex"], W = {
     });
     M(
       () => e.modelValue,
-      (t) => {
-        w.value && d.hydrateSelected(t || []);
+      (a) => {
+        w.value && s.hydrateSelected(a || []);
       },
       { deep: !0 }
     );
-    const b = s(() => V.value.filter((t) => {
-      const a = t.value ?? t.label;
-      return e.modelValue.includes(a);
-    })), E = s(() => b.value.slice(0, e.maxVisible)), O = s(() => b.value.length - e.maxVisible), H = (t) => {
-      if (e.disabled) return;
-      const a = t.value ?? t.label;
-      d.selectedBuffer.value.has(a) || d.selectedBuffer.value.set(a, t);
-      const n = [...e.modelValue], u = n.indexOf(a);
-      u === -1 ? n.push(a) : n.splice(u, 1), i("update:modelValue", n), i("change", n);
-    }, K = (t) => {
-      if (e.disabled) return;
-      const a = e.modelValue.filter((n) => n !== t);
-      i("update:modelValue", a), i("change", a);
+    const b = d(() => V.value.filter((a) => {
+      const n = a.value ?? a.label;
+      return e.modelValue.includes(n);
+    })), E = d(() => b.value.slice(0, e.maxVisible)), O = d(() => b.value.length - e.maxVisible), H = (a) => {
+      if (e.disabled || e.readonly) return;
+      const n = a.value ?? a.label;
+      s.selectedBuffer.value.has(n) || s.selectedBuffer.value.set(n, a);
+      const l = [...e.modelValue], u = l.indexOf(n);
+      u === -1 ? l.push(n) : l.splice(u, 1), i("update:modelValue", l), i("change", l);
+    }, K = (a) => {
+      if (e.disabled || e.readonly) return;
+      const n = e.modelValue.filter((l) => l !== a);
+      i("update:modelValue", n), i("change", n);
     }, A = () => {
-      e.disabled || (i("update:modelValue", []), i("change", []));
-    }, F = s(() => {
-      const t = e.rounded === "none" ? "rounded-none" : `rounded-${e.rounded}`, a = e.variant === "transparent" ? "px-2 py-0" : "px-3 py-1.5", n = e.variant === "transparent" ? "h-full min-h-[40px]" : "min-h-[40px]";
+      e.disabled || e.readonly || (i("update:modelValue", []), i("change", []));
+    }, F = d(() => {
+      const a = e.rounded === "none" ? "rounded-none" : `rounded-${e.rounded}`, n = e.variant === "transparent" ? "px-2 py-0" : "px-3 py-1.5", l = e.variant === "transparent" ? "h-full min-h-[40px]" : "min-h-[40px]";
       return [
-        `flex items-center justify-between w-full ${a} ${n} ${t} border text-sm transition-colors cursor-pointer outline-none`,
-        e.disabled ? "opacity-50 cursor-not-allowed bg-muted" : e.variant === "floating" || e.variant === "transparent" ? "bg-transparent text-foreground" : "bg-background hover:bg-gray-50/70",
+        `flex items-center justify-between w-full ${n} ${l} ${a} border text-sm transition-colors outline-none`,
+        e.disabled ? "opacity-50 cursor-not-allowed bg-muted" : e.readonly ? `cursor-default ${e.variant === "transparent" || e.variant === "floating" ? "bg-transparent text-foreground" : "bg-background"}` : `cursor-pointer ${e.variant === "floating" || e.variant === "transparent" ? "bg-transparent text-foreground" : "bg-background hover:bg-gray-50/70"}`,
         e.variant === "outline" || e.variant === "floating" ? "border-input focus-visible:ring-1 focus-visible:ring-primary" : e.variant === "transparent" ? "border-transparent" : "border-transparent bg-muted",
         o.value && e.variant !== "transparent" ? "border-primary/20 ring-1 ring-primary/20" : ""
       ].join(" ");
-    }), z = s(() => e.size === "sm" ? "xs" : "sm");
-    return (t, a) => (r(), m(h(q), {
+    }), z = d(() => e.size === "sm" ? "xs" : "sm");
+    return (a, n) => (r(), f(h(q), {
       isOpen: o.value,
-      "onUpdate:isOpen": a[5] || (a[5] = (n) => o.value = n),
+      "onUpdate:isOpen": n[5] || (n[5] = (l) => o.value = l),
       "close-on-select": !1,
       selectable: !0,
-      disabled: l.disabled
+      disabled: t.disabled || t.readonly
     }, {
-      trigger: p(() => [
-        g("div", {
+      trigger: g(() => [
+        y("div", {
           class: c(F.value),
-          tabindex: l.disabled ? -1 : 0,
+          tabindex: t.disabled || t.readonly ? -1 : 0,
           onKeydown: [
-            a[0] || (a[0] = I(y((n) => !l.disabled && (o.value = !o.value), ["prevent"]), ["enter"])),
-            a[1] || (a[1] = I(y((n) => !l.disabled && (o.value = !o.value), ["prevent"]), ["space"]))
-          ]
+            n[0] || (n[0] = I(p((l) => !(t.disabled || t.readonly) && (o.value = !o.value), ["prevent"]), ["enter"])),
+            n[1] || (n[1] = I(p((l) => !(t.disabled || t.readonly) && (o.value = !o.value), ["prevent"]), ["space"]))
+          ],
+          "data-testid": a.$attrs["data-testid"] || (a.$attrs.name ? `multiselect-${a.$attrs.name}` : "multiselect")
         }, [
-          g("div", {
-            class: c(["flex gap-1.5 items-center flex-1 min-w-0", [l.wrap ? "flex-wrap py-0.5" : "flex-nowrap overflow-hidden py-1"]])
+          y("div", {
+            class: c(["flex gap-1.5 items-center flex-1 min-w-0", [t.wrap ? "flex-wrap py-0.5" : "flex-nowrap overflow-hidden py-1"]])
           }, [
-            b.value.length === 0 ? (r(), v("span", W, S(D.value), 1)) : (r(), v(T, { key: 1 }, [
-              (r(!0), v(T, null, R(E.value, (n) => (r(), m(N, {
-                key: n.value,
-                variant: l.variant === "transparent" ? "outline" : "secondary",
+            b.value.length === 0 ? (r(), v("span", W, $(D.value), 1)) : (r(), v(T, { key: 1 }, [
+              (r(!0), v(T, null, R(E.value, (l) => (r(), f(N, {
+                key: l.value,
+                variant: t.variant === "transparent" ? "outline" : "secondary",
                 size: z.value,
-                rounded: l.rounded === "none" ? "sm" : "full",
+                rounded: t.rounded === "none" ? "sm" : "full",
                 class: c(["gap-1 pr-1 truncate min-w-0 shrink", [
-                  l.wrap ? "max-w-[150px]" : "",
-                  l.variant === "transparent" ? "border-transparent bg-muted/50 text-foreground font-medium shadow-none" : ""
+                  t.wrap ? "max-w-[150px]" : "",
+                  t.variant === "transparent" ? "border-transparent bg-muted/50 text-foreground font-medium shadow-none" : ""
                 ]])
               }, {
-                default: p(() => [
-                  g("span", X, S(n.labelI18n ? h($)(n.labelI18n) : n.label), 1),
-                  l.disabled ? f("", !0) : (r(), v("button", {
+                default: g(() => [
+                  y("span", X, $(l.labelI18n ? h(C)(l.labelI18n) : l.label), 1),
+                  t.disabled || t.readonly ? m("", !0) : (r(), v("button", {
                     key: 0,
                     type: "button",
-                    onClick: y((u) => K(n.value), ["stop"]),
+                    onClick: p((u) => K(l.value), ["stop"]),
                     class: c([
                       "rounded transition-colors shrink-0 flex items-center justify-center p-px",
-                      l.variant === "transparent" ? "text-muted-foreground hover:bg-black/10 hover:text-foreground" : "hover:bg-destructive/10 hover:text-destructive p-0.5 rounded-full"
+                      t.variant === "transparent" ? "text-muted-foreground hover:bg-black/10 hover:text-foreground" : "hover:bg-destructive/10 hover:text-destructive p-0.5 rounded-full"
                     ])
                   }, [
-                    L(C, {
+                    L(S, {
                       icon: "lucide:x",
                       class: "w-3 h-3"
                     })
@@ -141,55 +143,55 @@ const Q = ["tabindex"], W = {
                 ]),
                 _: 2
               }, 1032, ["variant", "size", "rounded", "class"]))), 128)),
-              O.value > 0 ? (r(), m(N, {
+              O.value > 0 ? (r(), f(N, {
                 key: 0,
-                variant: l.variant === "transparent" ? "outline" : "secondary",
+                variant: t.variant === "transparent" ? "outline" : "secondary",
                 size: z.value,
-                rounded: l.rounded === "none" ? "sm" : "full",
+                rounded: t.rounded === "none" ? "sm" : "full",
                 class: c([
                   "shrink-0",
-                  l.variant === "transparent" ? "border-transparent bg-muted/50 text-muted-foreground font-medium shadow-none" : ""
+                  t.variant === "transparent" ? "border-transparent bg-muted/50 text-muted-foreground font-medium shadow-none" : ""
                 ])
               }, {
-                default: p(() => [
-                  U(" +" + S(O.value), 1)
+                default: g(() => [
+                  U(" +" + $(O.value), 1)
                 ]),
                 _: 1
-              }, 8, ["variant", "size", "rounded", "class"])) : f("", !0)
+              }, 8, ["variant", "size", "rounded", "class"])) : m("", !0)
             ], 64))
           ], 2),
-          l.showControls ? (r(), v("div", Z, [
-            b.value.length > 0 && !l.disabled ? (r(), m(C, {
+          t.showControls && !(t.disabled || t.readonly) ? (r(), v("div", Z, [
+            b.value.length > 0 && !(t.disabled || t.readonly) ? (r(), f(S, {
               key: 0,
               icon: "lucide:x",
               class: "w-4 h-4 hover:text-foreground transition-colors",
-              onClick: y(A, ["stop"])
-            })) : f("", !0),
-            a[6] || (a[6] = g("div", { class: "w-px h-4 bg-border mx-0.5" }, null, -1)),
-            L(C, {
+              onClick: p(A, ["stop"])
+            })) : m("", !0),
+            n[6] || (n[6] = y("div", { class: "w-px h-4 bg-border mx-0.5" }, null, -1)),
+            L(S, {
               icon: "lucide:chevron-down",
               class: c(["w-4 h-4 transition-transform duration-200", { "rotate-180": o.value }])
             }, null, 8, ["class"])
-          ])) : f("", !0)
+          ])) : m("", !0)
         ], 42, Q)
       ]),
-      default: p(() => [
-        l.disabled ? f("", !0) : (r(), m(h(G), {
+      default: g(() => [
+        t.disabled || t.readonly ? m("", !0) : (r(), f(h(G), {
           key: 0,
           options: x.value,
           cachedOptions: V.value,
-          selected: l.modelValue,
+          selected: t.modelValue,
           class: "min-w-[300px]",
-          loading: l.loading || h(d).isHydrating.value,
-          hasMore: l.hasMore,
-          searchable: l.searchable,
-          remote: l.remote,
-          debounceTime: l.debounceTime,
-          layout: l.layout,
+          loading: t.loading || h(s).isHydrating.value,
+          hasMore: t.hasMore,
+          searchable: t.searchable,
+          remote: t.remote,
+          debounceTime: t.debounceTime,
+          layout: t.layout,
           onSelect: H,
-          onClose: a[2] || (a[2] = (n) => o.value = !1),
-          onLoadMore: a[3] || (a[3] = (n) => t.$emit("load-more")),
-          onSearch: a[4] || (a[4] = (n) => t.$emit("search", n))
+          onClose: n[2] || (n[2] = (l) => o.value = !1),
+          onLoadMore: n[3] || (n[3] = (l) => a.$emit("load-more")),
+          onSearch: n[4] || (n[4] = (l) => a.$emit("search", l))
         }, null, 8, ["options", "cachedOptions", "selected", "loading", "hasMore", "searchable", "remote", "debounceTime", "layout"]))
       ]),
       _: 1

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

@@ -19,6 +19,7 @@ export declare function useMultiSelectHydration(opts: UseMultiSelectHydrationOpt
         description?: string;
         descriptionI18n?: string;
         icon?: string;
+        badge?: string;
         emoji?: string;
         disabled?: {
             valueOf: () => boolean;
@@ -59,6 +60,7 @@ export declare function useMultiSelectHydration(opts: UseMultiSelectHydrationOpt
         description?: string;
         descriptionI18n?: string;
         icon?: string;
+        badge?: string;
         emoji?: string;
         disabled?: {
             valueOf: () => boolean;

package/components/NumberInput.vue.js

@@ -1,7 +1,7 @@
 import o from "./NumberInput.vue2.js";
 /* empty css                 */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-651a2b21"]]);
+const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-cce64dd9"]]);
 export {
-  a as default
+  c as default
 };