vlite3 1.1.2 → 1.1.4

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.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 $ 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 = {
@@ -35,64 +35,64 @@ const Q = ["tabindex"], W = {
   },
   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);
-      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 t = l, i = j, o = k(!1), D = s(() => {
+      if (t.placeholderI18n) return C(t.placeholderI18n);
+      if (t.placeholder) return t.placeholder;
+      const e = C("vlite.multiSelect.placeholder");
+      return e !== "vlite.multiSelect.placeholder" ? e : "Select items...";
+    }), x = s(() => t.options ? t.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), 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 || []);
+      (e) => {
+        !B.value && e.length > 0 && (B.value = !0, setTimeout(() => {
+          w.value = !0, d.hydrateSelected(t.modelValue || []);
         }, 10));
       },
       { immediate: !0 }
     );
     const V = s(() => {
-      const t = [...x.value], a = new Set(t.map((n) => n.value ?? n.label));
+      const e = [...x.value], a = new Set(e.map((n) => n.value ?? n.label));
       return d.selectedBuffer.value.forEach((n, u) => {
-        a.has(u) || (t.unshift(n), a.add(u));
-      }), t;
+        a.has(u) || (e.unshift(n), a.add(u));
+      }), e;
     }), d = J({
-      fetchSelected: e.fetchSelected,
-      getValues: () => e.modelValue || [],
+      fetchSelected: t.fetchSelected,
+      getValues: () => t.modelValue || [],
       getOptions: () => V.value,
       isInitialLoadDone: () => w.value
     });
     M(
-      () => e.modelValue,
-      (t) => {
-        w.value && d.hydrateSelected(t || []);
+      () => t.modelValue,
+      (e) => {
+        w.value && d.hydrateSelected(e || []);
       },
       { 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);
+    const b = s(() => V.value.filter((e) => {
+      const a = e.value ?? e.label;
+      return t.modelValue.includes(a);
+    })), E = s(() => b.value.slice(0, t.maxVisible)), O = s(() => b.value.length - t.maxVisible), H = (e) => {
+      if (t.disabled) return;
+      const a = e.value ?? e.label;
+      d.selectedBuffer.value.has(a) || d.selectedBuffer.value.set(a, e);
+      const n = [...t.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);
+    }, K = (e) => {
+      if (t.disabled) return;
+      const a = t.modelValue.filter((n) => n !== e);
       i("update:modelValue", a), i("change", a);
     }, A = () => {
-      e.disabled || (i("update:modelValue", []), i("change", []));
+      t.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]";
+      const e = t.rounded === "none" ? "rounded-none" : `rounded-${t.rounded}`, a = t.variant === "transparent" ? "px-2 py-0" : "px-3 py-1.5", n = t.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",
-        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" : ""
+        `flex items-center justify-between w-full ${a} ${n} ${e} border text-sm transition-colors cursor-pointer outline-none`,
+        t.disabled ? "opacity-50 cursor-not-allowed bg-muted" : t.variant === "floating" || t.variant === "transparent" ? "bg-transparent text-foreground" : "bg-background hover:bg-gray-50/70",
+        t.variant === "outline" || t.variant === "floating" ? "border-input focus-visible:ring-1 focus-visible:ring-primary" : t.variant === "transparent" ? "border-transparent" : "border-transparent bg-muted",
+        o.value && t.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 = s(() => t.size === "sm" ? "xs" : "sm");
+    return (e, a) => (r(), m(h(q), {
       isOpen: o.value,
       "onUpdate:isOpen": a[5] || (a[5] = (n) => o.value = n),
       "close-on-select": !1,
@@ -106,7 +106,8 @@ const Q = ["tabindex"], W = {
           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"]))
-          ]
+          ],
+          "data-testid": e.$attrs["data-testid"] || (e.$attrs.name ? `multiselect-${e.$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"]])
@@ -123,7 +124,7 @@ const Q = ["tabindex"], W = {
                 ]])
               }, {
                 default: p(() => [
-                  g("span", X, S(n.labelI18n ? h($)(n.labelI18n) : n.label), 1),
+                  g("span", X, S(n.labelI18n ? h(C)(n.labelI18n) : n.label), 1),
                   l.disabled ? f("", !0) : (r(), v("button", {
                     key: 0,
                     type: "button",
@@ -133,7 +134,7 @@ const Q = ["tabindex"], W = {
                       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"
                     ])
                   }, [
-                    L(C, {
+                    L($, {
                       icon: "lucide:x",
                       class: "w-3 h-3"
                     })
@@ -159,14 +160,14 @@ const Q = ["tabindex"], W = {
             ], 64))
           ], 2),
           l.showControls ? (r(), v("div", Z, [
-            b.value.length > 0 && !l.disabled ? (r(), m(C, {
+            b.value.length > 0 && !l.disabled ? (r(), m($, {
               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, {
+            L($, {
               icon: "lucide:chevron-down",
               class: c(["w-4 h-4 transition-transform duration-200", { "rotate-180": o.value }])
             }, null, 8, ["class"])
@@ -188,8 +189,8 @@ const Q = ["tabindex"], W = {
           layout: l.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))
+          onLoadMore: a[3] || (a[3] = (n) => e.$emit("load-more")),
+          onSearch: a[4] || (a[4] = (n) => e.$emit("search", n))
         }, 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/NavbarCommandPalette.vue.js

@@ -3,7 +3,7 @@ import L from "./Icon.vue.js";
 import v from "./Modal.vue.js";
 import N from "./CommandPalette/CommandPaletteContent.vue.js";
 import { $t as U } from "../utils/i18n.js";
-/* empty css                                       */
+/* empty css                                      */
 const V = { class: "block truncate -text-fs-1.5" }, S = { class: "ml-auto inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-mono font-medium border border-border/80 bg-background text-muted-foreground ml-1" }, A = /* @__PURE__ */ x({
   __name: "NavbarCommandPalette",
   props: {

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-dc6c26b4"]]);
 export {
-  a as default
+  c as default
 };