@indielayer/ui 1.7.2 → 1.7.4

package/lib/components/select/Select.vue.js

@@ -1,85 +1,85 @@
-import { defineComponent as pe, ref as A, computed as I, watch as O, nextTick as U, unref as s, openBlock as o, createBlock as c, mergeProps as X, toHandlers as H, withCtx as b, createElementVNode as C, createElementBlock as a, normalizeClass as R, Fragment as v, renderList as E, createTextVNode as z, toDisplayString as m, createVNode as K, withDirectives as ve, vModelSelect as ce, renderSlot as me, createCommentVNode as ye } from "vue";
+import { defineComponent as pe, ref as g, computed as w, watch as O, nextTick as X, unref as s, onUnmounted as ve, openBlock as n, createBlock as c, mergeProps as H, toHandlers as K, withCtx as h, createElementVNode as _, createElementBlock as a, normalizeClass as A, Fragment as p, renderList as $, createTextVNode as C, toDisplayString as m, createVNode as W, withDirectives as ce, vModelSelect as me, renderSlot as ye, createCommentVNode as be } from "vue";
 import { useEventListener as he } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
-import { useColors as be } from "../../composables/useColors.js";
-import { useCommon as G } from "../../composables/useCommon.js";
+import { useColors as ke } from "../../composables/useColors.js";
+import { useCommon as J } from "../../composables/useCommon.js";
 import { useInputtable as D } from "../../composables/useInputtable.js";
-import { useInteractive as J } from "../../composables/useInteractive.js";
-import { useTheme as ke } from "../../composables/useTheme.js";
-import { checkIcon as ge, selectIcon as we } from "../../common/icons.js";
-import Ae from "../label/Label.vue.js";
-import W from "../tag/Tag.vue.js";
-import Ie from "../icon/Icon.vue.js";
-import Re from "../menu/MenuItem.vue.js";
-import Ve from "../spinner/Spinner.vue.js";
-import _e from "../popover/Popover.vue.js";
+import { useInteractive as Q } from "../../composables/useInteractive.js";
+import { useTheme as ge } from "../../composables/useTheme.js";
+import { checkIcon as we, selectIcon as Ae } from "../../common/icons.js";
+import Ie from "../label/Label.vue.js";
+import G from "../tag/Tag.vue.js";
+import Re from "../icon/Icon.vue.js";
+import Ve from "../menu/MenuItem.vue.js";
+import _e from "../spinner/Spinner.vue.js";
+import $e from "../popover/Popover.vue.js";
 import "../popover/Popover.vue3.js";
-import $e from "../popover/PopoverContainer.vue.js";
-import Ce from "../inputFooter/InputFooter.vue.js";
-const Ee = { class: "relative" }, ze = {
+import Ce from "../popover/PopoverContainer.vue.js";
+import ze from "../inputFooter/InputFooter.vue.js";
+const Se = { class: "relative" }, Ne = {
   key: 0,
   class: "flex gap-1 flex-wrap"
-}, Se = {
+}, Oe = {
   key: 0,
   class: "text-secondary-400 dark:text-secondary-500"
-}, Ne = { key: 1 }, Oe = {
+}, De = { key: 1 }, Le = {
   key: 0,
   class: "flex gap-1 flex-wrap"
-}, De = {
+}, Be = {
   key: 0,
   class: "text-secondary-400 dark:text-secondary-500"
-}, Le = { key: 1 }, Be = {
+}, Ee = { key: 1 }, Te = {
   key: 1,
   class: "px-2 text-center text-secondary-400"
-}, Te = ["id", "name", "disabled", "multiple", "readonly"], Fe = ["value", "disabled"], Pe = {
-  ...be.props("primary"),
-  ...G.props(),
+}, Fe = ["id", "name", "disabled", "multiple", "readonly"], Pe = ["value", "disabled"], qe = {
+  ...ke.props("primary"),
   ...J.props(),
+  ...Q.props(),
   ...D.props(),
   placeholder: String,
   options: Array,
   multiple: Boolean,
   flat: Boolean,
   native: Boolean
-}, qe = {
+}, Ue = {
   name: "XSelect",
   validators: {
-    ...G.validators()
+    ...J.validators()
   }
 }, nl = /* @__PURE__ */ pe({
-  ...qe,
-  props: Pe,
+  ...Ue,
+  props: qe,
   emits: D.emits(),
-  setup(Q, { expose: Y, emit: Z }) {
-    const r = Q, V = Z, k = A(null), S = A(null), _ = A(null), f = A(null), u = A(), t = I({
+  setup(Y, { expose: Z, emit: ee }) {
+    const r = Y, I = ee, z = g(null), S = g(null), R = g(null), f = g(null), u = g(), t = w({
       get() {
         return r.multiple ? r.modelValue ? Array.isArray(r.modelValue) ? r.modelValue : [r.modelValue] : [] : r.modelValue;
       },
       set(e) {
-        V("update:modelValue", e);
+        I("update:modelValue", e);
       }
-    }), d = I(() => !r.options || r.options.length === 0 ? [] : r.options.map((e) => {
+    }), d = w(() => !r.options || r.options.length === 0 ? [] : r.options.map((e) => {
       let i = !1;
       return r.multiple && Array.isArray(t.value) ? i = t.value.includes(e.value) : i = e.value === t.value, {
         value: e.value,
         label: e.label,
         active: i,
         disabled: e.disabled,
-        iconRight: i ? ge : void 0,
-        onClick: () => T(e.value)
+        iconRight: i ? we : void 0,
+        onClick: () => E(e.value)
       };
-    })), L = I(() => {
+    })), L = w(() => {
       var e;
       return (e = r.options) == null ? void 0 : e.filter((i) => !i.disabled);
-    }), y = I(() => {
+    }), y = w(() => {
       var e;
       return (e = f.value) == null ? void 0 : e.isOpen;
     });
     O(y, (e) => {
-      e && (ee(), setTimeout(() => {
+      e && (le(), setTimeout(() => {
         B(u.value || 0);
       }, 50), (r.multiple || typeof u.value > "u") && N(-1));
     });
-    function ee() {
+    function le() {
       if (r.multiple) {
         if (Array.isArray(t.value) && t.value.length > 0) {
           const e = d.value.findIndex((i) => i.value === t.value[0]);
@@ -92,10 +92,10 @@ const Ee = { class: "relative" }, ze = {
     }
     function B(e) {
       var i;
-      _.value && ((i = _.value[e]) == null || i.$el.scrollIntoView({ block: "nearest", inline: "nearest" }));
+      R.value && ((i = R.value[e]) == null || i.$el.scrollIntoView({ block: "nearest", inline: "nearest" }));
     }
     O(u, (e) => {
-      typeof e < "u" && _.value && B(e);
+      typeof e < "u" && R.value && B(e);
     });
     function N(e, i = "down") {
       if (!L.value || L.value.length === 0) {
@@ -114,61 +114,63 @@ const Ee = { class: "relative" }, ze = {
         u.value = l;
       }
     }
-    function T(e) {
+    function E(e) {
       var l;
-      const i = (l = r.options) == null ? void 0 : l.find((n) => n.value === e);
+      const i = (l = r.options) == null ? void 0 : l.find((o) => o.value === e);
       if (!(!i || i.disabled)) {
         if (r.multiple)
           if (Array.isArray(t.value)) {
-            const n = t.value.indexOf(e);
-            n !== -1 ? t.value.splice(n, 1) : (t.value.push(e), V("update:modelValue", t.value));
+            const o = t.value.indexOf(e);
+            o !== -1 ? t.value.splice(o, 1) : (t.value.push(e), I("update:modelValue", t.value));
           } else
             t.value = [e];
         else
           t.value = e;
-        r.native || U(() => {
-          var n, p, w;
-          (n = k.value) == null || n.dispatchEvent(new Event("input")), (p = k.value) == null || p.dispatchEvent(new Event("change")), (w = S.value) == null || w.$el.focus();
+        r.native || X(() => {
+          var o;
+          j(), (o = S.value) == null || o.$el.focus();
         });
       }
     }
-    function F(e) {
+    function T(e) {
       return !!(typeof e > "u" || e === null || e === "" || Array.isArray(e) && e.length === 0 || !Array.isArray(e) && typeof e == "object" && Object.keys(e).length === 0);
     }
-    function P(e, i) {
+    function F(e, i) {
       e.stopPropagation();
       const l = t.value.indexOf(i);
-      l !== -1 && (t.value.splice(l, 1), V("update:modelValue", t.value));
+      l !== -1 && (t.value.splice(l, 1), I("update:modelValue", t.value));
     }
-    function $(e) {
+    function V(e) {
       var l;
-      const i = (l = r.options) == null ? void 0 : l.find((n) => n.value === e);
+      const i = (l = r.options) == null ? void 0 : l.find((o) => o.value === e);
       return i ? i.label : "";
     }
-    const { focus: q, blur: le } = J(k), {
-      errorInternal: j,
-      hideFooterInternal: ie,
-      inputListeners: x,
-      reset: te,
-      validate: ne,
-      setError: oe,
+    const { focus: P, blur: ie } = Q(z), {
+      errorInternal: q,
+      hideFooterInternal: te,
+      inputListeners: U,
+      reset: oe,
+      validate: j,
+      setError: ne,
       isFocused: re,
       isInsideForm: ae
-    } = D(r, { focus: q, emit: V, withListeners: !0 }), se = I(() => {
-      const { focus: e, blur: i } = s(x);
+    } = D(r, { focus: P, emit: I, withListeners: !0 }), se = w(() => {
+      const { focus: e, blur: i } = s(U);
       return {
         focus: e,
         blur: i
       };
     });
-    let g = null;
+    let v = null;
     O([re, y], ([e, i]) => {
-      e || i ? g || (g = he(document, "keydown", ue)) : g && (g(), g = null);
+      e || i ? v || (v = he(document, "keydown", ue)) : v && (v(), v = null);
     }, {
       immediate: !0
+    }), ve(() => {
+      v && v();
     });
     function ue(e) {
-      var i, l, n, p, w;
+      var i, l, o, k, x;
       if (d.value.length !== 0)
         if (e.code === "ArrowDown") {
           if (e.preventDefault(), !y.value) {
@@ -184,24 +186,24 @@ const Ee = { class: "relative" }, ze = {
           N(u.value, "up");
         } else if (e.code === "Enter" || e.code === "Space") {
           if (e.preventDefault(), e.stopPropagation(), !y.value) {
-            (n = f.value) == null || n.show();
+            (o = f.value) == null || o.show();
             return;
           }
-          typeof u.value < "u" && (T(d.value[u.value].value), r.multiple || (p = f.value) == null || p.hide());
+          typeof u.value < "u" && (E(d.value[u.value].value), r.multiple || (k = f.value) == null || k.hide());
         } else
-          e.code === "Tab" && y.value && (e.preventDefault(), (w = f.value) == null || w.hide(), r.native || U(() => {
+          e.code === "Tab" && y.value && (e.preventDefault(), (x = f.value) == null || x.hide(), r.native || X(() => {
             var M;
             (M = S.value) == null || M.$el.focus();
           }));
     }
-    const { styles: de, classes: h, className: fe } = ke("Select", {}, r, { errorInternal: j });
-    return Y({ focus: q, blur: le, reset: te, validate: ne, setError: oe }), (e, i) => (o(), c(Ae, X({
+    const { styles: de, classes: b, className: fe } = ge("Select", {}, r, { errorInternal: q });
+    return Z({ focus: P, blur: ie, reset: oe, validate: j, setError: ne }), (e, i) => (n(), c(Ie, H({
       ref_key: "labelRef",
       ref: S,
       tabindex: "0",
       class: ["group", [
         s(fe),
-        s(h).wrapper
+        s(b).wrapper
       ]],
       style: s(de),
       disabled: e.disabled,
@@ -209,100 +211,100 @@ const Ee = { class: "relative" }, ze = {
       "is-inside-form": s(ae),
       label: e.label,
       tooltip: e.tooltip
-    }, H(se.value)), {
-      default: b(() => [
-        C("div", Ee, [
-          e.native && !e.multiple ? (o(), a("div", {
+    }, K(se.value)), {
+      default: h(() => [
+        _("div", Se, [
+          e.native && !e.multiple ? (n(), a("div", {
             key: 0,
-            class: R(s(h).box),
+            class: A(s(b).box),
             onClick: i[0] || (i[0] = (l) => {
-              var n;
-              return (n = k.value) == null ? void 0 : n.click();
+              var o;
+              return (o = z.value) == null ? void 0 : o.click();
             })
           }, [
-            e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (o(), a("div", ze, [
-              (o(!0), a(v, null, E(t.value, (l) => (o(), c(W, {
+            e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (n(), a("div", Ne, [
+              (n(!0), a(p, null, $(t.value, (l) => (n(), c(G, {
                 key: l,
                 size: "xs",
                 outlined: "",
                 removable: "",
-                onRemove: (n) => {
-                  P(n, l);
+                onRemove: (o) => {
+                  F(o, l);
                 }
               }, {
-                default: b(() => [
-                  z(m($(l)), 1)
+                default: h(() => [
+                  C(m(V(l)), 1)
                 ]),
                 _: 2
               }, 1032, ["onRemove"]))), 128))
-            ])) : !e.multiple && !F(t.value) ? (o(), a(v, { key: 1 }, [
-              z(m($(t.value)), 1)
-            ], 64)) : (o(), a(v, { key: 2 }, [
-              e.placeholder ? (o(), a("div", Se, m(e.placeholder), 1)) : (o(), a("div", Ne, " "))
+            ])) : !e.multiple && !T(t.value) ? (n(), a(p, { key: 1 }, [
+              C(m(V(t.value)), 1)
+            ], 64)) : (n(), a(p, { key: 2 }, [
+              e.placeholder ? (n(), a("div", Oe, m(e.placeholder), 1)) : (n(), a("div", De, " "))
             ], 64))
-          ], 2)) : (o(), c(_e, {
+          ], 2)) : (n(), c($e, {
             key: 1,
             ref_key: "popoverRef",
             ref: f,
             disabled: e.disabled || e.loading || e.readonly
           }, {
-            content: b(() => [
-              K($e, {
-                class: R(s(h).content)
+            content: h(() => [
+              W(Ce, {
+                class: A(s(b).content)
               }, {
-                default: b(() => [
-                  d.value.length > 0 ? (o(!0), a(v, { key: 0 }, E(d.value, (l, n) => (o(), c(Re, {
-                    key: n,
+                default: h(() => [
+                  d.value.length > 0 ? (n(!0), a(p, { key: 0 }, $(d.value, (l, o) => (n(), c(Ve, {
+                    key: o,
                     ref_for: !0,
                     ref_key: "itemsRef",
-                    ref: _,
+                    ref: R,
                     item: l,
                     size: e.size,
                     disabled: l.disabled,
-                    selected: n === u.value,
+                    selected: o === u.value,
                     color: e.color,
                     filled: "",
                     onClick: i[1] || (i[1] = () => {
-                      var p;
-                      return !e.multiple && ((p = f.value) == null ? void 0 : p.hide());
+                      var k;
+                      return !e.multiple && ((k = f.value) == null ? void 0 : k.hide());
                     })
-                  }, null, 8, ["item", "size", "disabled", "selected", "color"]))), 128)) : (o(), a("div", Be, " No options "))
+                  }, null, 8, ["item", "size", "disabled", "selected", "color"]))), 128)) : (n(), a("div", Te, " No options "))
                 ]),
                 _: 1
               }, 8, ["class"])
             ]),
-            default: b(() => [
-              C("div", {
-                class: R([s(h).box])
+            default: h(() => [
+              _("div", {
+                class: A([s(b).box])
               }, [
-                e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (o(), a("div", Oe, [
-                  (o(!0), a(v, null, E(t.value, (l) => (o(), c(W, {
+                e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (n(), a("div", Le, [
+                  (n(!0), a(p, null, $(t.value, (l) => (n(), c(G, {
                     key: l,
                     size: "xs",
                     outlined: "",
                     removable: "",
-                    onRemove: (n) => {
-                      P(n, l);
+                    onRemove: (o) => {
+                      F(o, l);
                     }
                   }, {
-                    default: b(() => [
-                      z(m($(l)), 1)
+                    default: h(() => [
+                      C(m(V(l)), 1)
                     ]),
                     _: 2
                   }, 1032, ["onRemove"]))), 128))
-                ])) : !e.multiple && !F(t.value) ? (o(), a(v, { key: 1 }, [
-                  z(m($(t.value)), 1)
-                ], 64)) : (o(), a(v, { key: 2 }, [
-                  e.placeholder ? (o(), a("div", De, m(e.placeholder), 1)) : (o(), a("div", Le, " "))
+                ])) : !e.multiple && !T(t.value) ? (n(), a(p, { key: 1 }, [
+                  C(m(V(t.value)), 1)
+                ], 64)) : (n(), a(p, { key: 2 }, [
+                  e.placeholder ? (n(), a("div", Be, m(e.placeholder), 1)) : (n(), a("div", Ee, " "))
                 ], 64))
               ], 2)
             ]),
             _: 1
           }, 8, ["disabled"])),
-          ve(C("select", X({
+          ce(_("select", H({
             id: e.id,
             ref_key: "elRef",
-            ref: k,
+            ref: z,
             "onUpdate:modelValue": i[2] || (i[2] = (l) => t.value = l),
             tabindex: "-1",
             class: e.native && !e.multiple ? "absolute inset-0 w-full h-full cursor-pointer opacity-0" : "hidden",
@@ -310,32 +312,32 @@ const Ee = { class: "relative" }, ze = {
             disabled: e.disabled || e.loading,
             multiple: e.multiple,
             readonly: e.readonly
-          }, H(s(x), !0)), [
-            (o(!0), a(v, null, E(e.options, (l, n) => (o(), a("option", {
-              key: n,
+          }, K(s(U), !0)), [
+            (n(!0), a(p, null, $(e.options, (l, o) => (n(), a("option", {
+              key: o,
               value: l.value,
               disabled: l.disabled
-            }, m(l.label), 9, Fe))), 128))
-          ], 16, Te), [
-            [ce, t.value]
+            }, m(l.label), 9, Pe))), 128))
+          ], 16, Fe), [
+            [me, t.value]
           ]),
-          C("div", {
-            class: R(s(h).iconWrapper)
+          _("div", {
+            class: A(s(b).iconWrapper)
           }, [
-            e.loading ? (o(), c(Ve, {
+            e.loading ? (n(), c(_e, {
               key: 0,
               size: e.size
-            }, null, 8, ["size"])) : me(e.$slots, "icon", { key: 1 }, () => [
-              K(Ie, {
-                icon: s(we),
-                class: R([s(h).icon])
+            }, null, 8, ["size"])) : ye(e.$slots, "icon", { key: 1 }, () => [
+              W(Re, {
+                icon: s(Ae),
+                class: A([s(b).icon])
               }, null, 8, ["icon", "class"])
             ])
           ], 2)
         ]),
-        s(ie) ? ye("", !0) : (o(), c(Ce, {
+        s(te) ? be("", !0) : (n(), c(ze, {
           key: 0,
-          error: s(j),
+          error: s(q),
           helper: e.helper
         }, null, 8, ["error", "helper"]))
       ]),