vlite3 0.8.11 → 0.9.2

package/components/MultiSelect/MultiSelect.vue.js

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