@indielayer/ui 1.12.0 → 1.13.0

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

@@ -1,37 +1,37 @@
-import { defineComponent as Ne, mergeModels as ue, computed as R, ref as h, useModel as ze, watch as D, nextTick as G, unref as r, onUnmounted as De, openBlock as s, createBlock as x, mergeProps as U, toHandlers as de, withCtx as p, createElementVNode as M, createElementBlock as n, normalizeClass as A, Fragment as w, createTextVNode as S, toDisplayString as k, createVNode as P, renderSlot as O, createCommentVNode as I, renderList as j, createSlots as Me, withModifiers as Pe, withDirectives as Fe, vModelSelect as Ee } from "vue";
-import { useEventListener as He, useResizeObserver as qe } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
-import { useColors as We } from "../../composables/useColors.js";
-import { useCommon as ce } from "../../composables/useCommon.js";
-import { useInputtable as J } from "../../composables/useInputtable.js";
-import { useInteractive as me } from "../../composables/useInteractive.js";
-import { useTheme as Ue } from "../../composables/useTheme.js";
-import { useVirtualList as je } from "../../composables/useVirtualList.js";
-import { checkIcon as Xe, selectIcon as Ke } from "../../common/icons.js";
-import Ge from "../label/Label.vue.js";
-import fe from "../tag/Tag.vue.js";
-import Je from "../icon/Icon.vue.js";
-import Qe from "../menu/MenuItem.vue.js";
-import Ye from "../spinner/Spinner.vue.js";
-import ve from "../popover/Popover.vue.js";
+import { defineComponent as Me, mergeModels as ve, computed as R, ref as b, useModel as Pe, watch as M, nextTick as Z, unref as r, onUnmounted as Fe, openBlock as s, createBlock as L, mergeProps as U, toHandlers as ce, withCtx as m, createElementVNode as P, createElementBlock as n, normalizeClass as k, Fragment as w, createTextVNode as T, toDisplayString as g, createVNode as B, renderSlot as O, createCommentVNode as x, renderList as j, createSlots as Ee, normalizeStyle as He, withModifiers as We, withDirectives as qe, vModelSelect as Ue } from "vue";
+import { useEventListener as je, useResizeObserver as Xe } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useColors as Ke } from "../../composables/useColors.js";
+import { useCommon as he } from "../../composables/useCommon.js";
+import { useInputtable as _ } from "../../composables/useInputtable.js";
+import { useInteractive as ke } from "../../composables/useInteractive.js";
+import { useTheme as Ge } from "../../composables/useTheme.js";
+import { useVirtualList as Je } from "../../composables/useVirtualList.js";
+import { checkIcon as Qe, closeIcon as Ye, selectIcon as Ze } from "../../common/icons.js";
+import _e from "../label/Label.vue.js";
+import pe from "../tag/Tag.vue.js";
+import me from "../icon/Icon.vue.js";
+import el from "../menu/MenuItem.vue.js";
+import ll from "../spinner/Spinner.vue.js";
+import ye from "../popover/Popover.vue.js";
 import "../popover/Popover.vue3.js";
-import pe from "../popover/PopoverContainer.vue.js";
-import Ze from "../inputFooter/InputFooter.vue.js";
-import _e from "../input/Input.vue.js";
-import { useThrottleFn as el } from "../../node_modules/.pnpm/@vueuse_shared@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
-const ll = { class: "relative" }, tl = {
+import be from "../popover/PopoverContainer.vue.js";
+import tl from "../inputFooter/InputFooter.vue.js";
+import al from "../input/Input.vue.js";
+import { useThrottleFn as il } from "../../node_modules/.pnpm/@vueuse_shared@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
+const ol = { class: "relative" }, sl = {
   key: 0,
   class: "text-secondary-400 dark:text-secondary-500"
-}, al = { key: 1 }, il = {
+}, rl = { key: 1 }, nl = {
   key: 0,
   class: "text-secondary-400 dark:text-secondary-500"
-}, ol = { key: 1 }, sl = {
+}, ul = { key: 1 }, dl = {
   key: 0,
   class: "p-2 text-center text-secondary-400"
-}, rl = ["id", "name", "disabled", "multiple", "readonly"], nl = ["value", "disabled"], ul = {
-  ...We.props("secondary"),
-  ...ce.props(),
-  ...me.props(),
-  ...J.props(),
+}, fl = ["id", "name", "disabled", "multiple", "readonly"], vl = ["value", "disabled"], cl = {
+  ...Ke.props("secondary"),
+  ...he.props(),
+  ...ke.props(),
+  ..._.props(),
   placeholder: String,
   options: Array,
   multiple: Boolean,
@@ -40,6 +40,7 @@ const ll = { class: "relative" }, tl = {
   flat: Boolean,
   native: Boolean,
   filterable: Boolean,
+  clearable: Boolean,
   filterPlaceholder: {
     type: String,
     default: "Filter by..."
@@ -56,281 +57,281 @@ const ll = { class: "relative" }, tl = {
     default: 5
   },
   placement: String
-}, dl = {
+}, pl = {
   name: "XSelect",
   validators: {
-    ...ce.validators()
+    ...he.validators()
   }
-}, Tl = /* @__PURE__ */ Ne({
-  ...dl,
-  props: /* @__PURE__ */ ue(ul, {
+}, Nl = /* @__PURE__ */ Me({
+  ...pl,
+  props: /* @__PURE__ */ ve(cl, {
     filter: { default: "" },
     filterModifiers: {}
   }),
-  emits: /* @__PURE__ */ ue([...J.emits(), "close"], ["update:filter"]),
-  setup(Q, { expose: ye, emit: be }) {
-    const o = Q, B = be, f = R(() => o.multiple || o.multipleCheckbox), X = h(null), K = h(null), F = h(null), g = h(null), u = h(), V = ze(Q, "filter"), E = h(null), $ = R(() => o.disabled || o.loading || o.readonly), i = R({
+  emits: /* @__PURE__ */ ve([..._.emits(), "close"], ["update:filter"]),
+  setup(ee, { expose: ge, emit: Ce }) {
+    const i = ee, S = Ce, v = R(() => i.multiple || i.multipleCheckbox), X = b(null), K = b(null), F = b(null), C = b(null), G = b(null), d = b(), I = Pe(ee, "filter"), E = b(null), $ = R(() => i.disabled || i.loading || i.readonly), we = R(() => !i.loading && !i.readonly && !i.disabled && i.clearable && !J(o.value)), o = R({
       get() {
-        return f.value ? o.modelValue ? Array.isArray(o.modelValue) ? o.modelValue : [o.modelValue] : [] : o.modelValue;
+        return v.value ? i.modelValue ? Array.isArray(i.modelValue) ? i.modelValue : [i.modelValue] : [] : i.modelValue;
       },
       set(e) {
-        B("update:modelValue", e);
+        S("update:modelValue", e);
       }
-    }), v = R(() => !o.options || o.options.length === 0 ? [] : o.options.filter((e) => V.value === "" || e.label.toLowerCase().includes(V.value.toLowerCase())).map((e) => {
+    }), c = R(() => !i.options || i.options.length === 0 ? [] : i.options.filter((e) => I.value === "" || e.label.toLowerCase().includes(I.value.toLowerCase())).map((e) => {
       let t = !1;
-      return f.value && Array.isArray(i.value) ? t = i.value.includes(e.value) : t = e.value === i.value, {
+      return v.value && Array.isArray(o.value) ? t = o.value.includes(e.value) : t = e.value === o.value, {
         value: e.value,
         label: e.label,
         active: t,
         prefix: e.prefix,
         suffix: e.suffix,
         disabled: e.disabled,
-        iconRight: !o.multipleCheckbox && t ? Xe : void 0,
+        iconRight: !i.multipleCheckbox && t ? Qe : void 0,
         keepOpenOnClick: e.keepOpenOnClick,
-        onClick: () => ee(e.value)
+        onClick: () => ie(e.value)
       };
-    })), Y = R(() => v.value.filter((e) => !e.disabled)), { list: Z, scrollTo: he, containerProps: ke, wrapperProps: ge } = je(
-      v,
+    })), le = R(() => c.value.filter((e) => !e.disabled)), { list: te, scrollTo: Oe, containerProps: $e, wrapperProps: Re } = Je(
+      c,
       {
-        disabled: !o.virtualList,
-        itemHeight: o.virtualListItemHeight,
-        topOffset: o.virtualListOffsetTop || 0,
-        bottomOffset: o.virtualListOffsetBottom || 0,
-        overscan: o.virtualListOverscan
+        disabled: !i.virtualList,
+        itemHeight: i.virtualListItemHeight,
+        topOffset: i.virtualListOffsetTop || 0,
+        bottomOffset: i.virtualListOffsetBottom || 0,
+        overscan: i.virtualListOverscan
       }
-    ), T = R(() => {
+    ), V = R(() => {
       var e;
-      return (e = g.value) == null ? void 0 : e.isOpen;
+      return (e = C.value) == null ? void 0 : e.isOpen;
     });
-    D(V, (e) => {
-      e && (u.value = void 0, H(-1));
-    }), D(T, (e) => {
-      e ? (Ce(), (f.value || typeof u.value > "u") && H(-1), setTimeout(() => {
+    M(I, (e) => {
+      e && (d.value = void 0, H(-1));
+    }), M(V, (e) => {
+      e ? (xe(), (v.value || typeof d.value > "u") && H(-1), setTimeout(() => {
         requestAnimationFrame(() => {
           var t;
-          _(u.value || 0), o.filterable && ((t = E.value) == null || t.focus());
+          ae(d.value || 0), i.filterable && ((t = E.value) == null || t.focus());
         });
-      }, 50)) : (o.filterable && (V.value = ""), B("close"));
+      }, 50)) : (i.filterable && (I.value = ""), S("close"));
     });
-    function Ce() {
-      if (f.value) {
-        if (Array.isArray(i.value) && i.value.length > 0) {
-          const e = v.value.findIndex((t) => t.value === i.value[0]);
-          e !== -1 && (u.value = e);
+    function xe() {
+      if (v.value) {
+        if (Array.isArray(o.value) && o.value.length > 0) {
+          const e = c.value.findIndex((t) => t.value === o.value[0]);
+          e !== -1 && (d.value = e);
         }
       } else {
-        const e = v.value.findIndex((t) => t.value === i.value);
-        e !== -1 && (u.value = e);
+        const e = c.value.findIndex((t) => t.value === o.value);
+        e !== -1 && (d.value = e);
       }
     }
-    function _(e) {
+    function ae(e) {
       var t;
-      o.virtualList ? he(e) : F.value && ((t = F.value[e]) == null || t.$el.scrollIntoView({ block: "nearest", inline: "nearest" }));
+      i.virtualList ? Oe(e) : F.value && ((t = F.value[e]) == null || t.$el.scrollIntoView({ block: "nearest", inline: "nearest" }));
     }
-    D(u, (e) => {
-      typeof e < "u" && F.value && _(e);
+    M(d, (e) => {
+      typeof e < "u" && F.value && ae(e);
     });
     function H(e, t = "down") {
-      if (!Y.value || Y.value.length === 0) {
-        u.value = void 0;
+      if (!le.value || le.value.length === 0) {
+        d.value = void 0;
         return;
       }
       if (typeof e > "u" && (e = t === "down" ? -1 : 1), t === "down") {
         let l = e + 1;
-        for (l > v.value.length - 1 && (l = 0); v.value[l].disabled; )
-          ++l > v.value.length - 1 && (l = 0);
-        u.value = l;
+        for (l > c.value.length - 1 && (l = 0); c.value[l].disabled; )
+          ++l > c.value.length - 1 && (l = 0);
+        d.value = l;
       } else {
         let l = e - 1;
-        for (l < 0 && (l = v.value.length - 1); v.value[l].disabled; )
-          --l < 0 && (l = v.value.length - 1);
-        u.value = l;
+        for (l < 0 && (l = c.value.length - 1); c.value[l].disabled; )
+          --l < 0 && (l = c.value.length - 1);
+        d.value = l;
       }
     }
-    function ee(e) {
+    function ie(e) {
       var l;
-      const t = (l = o.options) == null ? void 0 : l.find((a) => a.value === e);
+      const t = (l = i.options) == null ? void 0 : l.find((a) => a.value === e);
       if (!(!t || t.disabled))
         if (t.onClick)
           t.onClick();
         else {
-          if (f.value) {
-            if (Array.isArray(i.value)) {
-              const a = i.value.indexOf(e);
-              a !== -1 ? i.value.splice(a, 1) : i.value.push(e);
+          if (v.value) {
+            if (Array.isArray(o.value)) {
+              const a = o.value.indexOf(e);
+              a !== -1 ? o.value.splice(a, 1) : o.value.push(e);
             } else
-              i.value = [e];
-            B("update:modelValue", i.value), o.filterable && setTimeout(() => {
+              o.value = [e];
+            S("update:modelValue", o.value), i.filterable && setTimeout(() => {
               var a;
               (a = E.value) == null || a.focus();
             });
           } else
-            i.value = e;
-          o.native || G(() => {
+            o.value = e;
+          i.native || Z(() => {
             var a;
-            se(), (a = K.value) == null || a.$el.focus();
+            ue(), (a = K.value) == null || a.$el.focus();
           });
         }
     }
-    function le(e) {
+    function J(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 te(e, t) {
+    function oe(e, t) {
       if (e.stopPropagation(), $.value)
         return;
-      const l = i.value.indexOf(t);
-      l !== -1 && (i.value.splice(l, 1), B("update:modelValue", i.value));
+      const l = o.value.indexOf(t);
+      l !== -1 && (o.value.splice(l, 1), S("update:modelValue", o.value));
     }
-    function N(e) {
+    function z(e) {
       var l;
-      const t = (l = o.options) == null ? void 0 : l.find((a) => a.value === e);
+      const t = (l = i.options) == null ? void 0 : l.find((a) => a.value === e);
       return t ? t.label : "";
     }
-    const { focus: ae, blur: we } = me(X), {
-      errorInternal: ie,
-      hideFooterInternal: Oe,
-      inputListeners: oe,
-      reset: $e,
-      validate: se,
-      setError: Ae,
-      isFocused: Le,
-      isInsideForm: Re
-    } = J(o, { focus: ae, emit: B, withListeners: !0 }), xe = R(() => {
-      const { focus: e, blur: t } = r(oe);
+    const { focus: se, blur: Ae } = ke(X), {
+      errorInternal: re,
+      hideFooterInternal: Le,
+      inputListeners: ne,
+      reset: Q,
+      validate: ue,
+      setError: Ie,
+      isFocused: Ve,
+      isInsideForm: Te
+    } = _(i, { focus: se, emit: S, withListeners: !0 }), Be = R(() => {
+      const { focus: e, blur: t } = r(ne);
       return {
         focus: e,
         blur: t
       };
     });
-    let L = null;
-    D([Le, T], ([e, t]) => {
-      e || t ? L || (L = He(document, "keydown", Ie)) : L && (L(), L = null);
+    let A = null;
+    M([Ve, V], ([e, t]) => {
+      e || t ? A || (A = je(document, "keydown", Se)) : A && (A(), A = null);
     }, {
       immediate: !0
-    }), De(() => {
-      L && L();
+    }), Fe(() => {
+      A && A();
     });
-    function Ie(e) {
-      var t, l, a, y, c;
-      if (v.value.length !== 0)
+    function Se(e) {
+      var t, l, a, h, p;
+      if (c.value.length !== 0)
         if (e.code === "ArrowDown") {
-          if (e.preventDefault(), !T.value) {
-            (t = g.value) == null || t.show();
+          if (e.preventDefault(), !V.value) {
+            (t = C.value) == null || t.show();
             return;
           }
-          H(u.value, "down");
+          H(d.value, "down");
         } else if (e.code === "ArrowUp") {
-          if (e.preventDefault(), !T.value) {
-            (l = g.value) == null || l.show();
+          if (e.preventDefault(), !V.value) {
+            (l = C.value) == null || l.show();
             return;
           }
-          H(u.value, "up");
+          H(d.value, "up");
         } else if (e.code === "Enter" || e.code === "Space") {
-          if (e.code === "Space" && o.filterable)
+          if (e.code === "Space" && i.filterable)
             return;
-          if (e.preventDefault(), e.stopPropagation(), !T.value) {
-            (a = g.value) == null || a.show();
+          if (e.preventDefault(), e.stopPropagation(), !V.value) {
+            (a = C.value) == null || a.show();
             return;
           }
-          if (typeof u.value < "u" && v.value[u.value]) {
-            const d = v.value[u.value];
-            ee(d.value), !d.keepOpenOnClick && (!f.value || o.multipleCheckbox) && ((y = g.value) == null || y.hide());
+          if (typeof d.value < "u" && c.value[d.value]) {
+            const f = c.value[d.value];
+            ie(f.value), !f.keepOpenOnClick && (!v.value || i.multipleCheckbox) && ((h = C.value) == null || h.hide());
           }
         } else
-          e.code === "Tab" && T.value && (e.preventDefault(), (c = g.value) == null || c.hide(), o.native || G(() => {
-            var d;
-            (d = K.value) == null || d.$el.focus();
+          e.code === "Tab" && V.value && (e.preventDefault(), (p = C.value) == null || p.hide(), i.native || Z(() => {
+            var f;
+            (f = K.value) == null || f.$el.focus();
           }));
     }
-    const z = h(null), re = h(null), q = h(!1), W = h(0), ne = el(() => {
-      f.value && o.truncate && G(() => {
-        const e = Ve();
-        e < i.value.length ? (q.value = !0, W.value = i.value.length - e) : (q.value = !1, W.value = 0);
+    const N = b(null), de = b(null), W = b(!1), q = b(0), fe = il(() => {
+      v.value && i.truncate && Z(() => {
+        const e = ze();
+        e < o.value.length ? (W.value = !0, q.value = o.value.length - e) : (W.value = !1, q.value = 0);
       });
     }, 100, !0);
-    qe(z, () => {
-      ne();
+    Xe(N, () => {
+      fe();
     });
-    function Ve() {
-      if (!z.value)
+    function ze() {
+      if (!N.value)
         return 0;
-      const e = z.value.querySelectorAll(".x-tag"), t = Array.from(e);
+      const e = N.value.querySelectorAll(".x-tag"), t = Array.from(e);
       let l = 0, a = 0;
-      const y = z.value.offsetWidth - 30;
-      for (let c = 0; c < t.length; c++) {
-        const d = t[c];
-        d.style.display = "flex", l += d.offsetWidth, l < y ? a++ : d.style.display = "none";
+      const h = N.value.offsetWidth - 30;
+      for (let p = 0; p < t.length; p++) {
+        const f = t[p];
+        f.style.display = "flex", l += f.offsetWidth, p > 0 && (l < h ? a++ : f.style.display = "none");
       }
       return a;
     }
-    D(i, (e) => {
-      ne();
+    M(o, (e) => {
+      fe();
     }, { immediate: !0, deep: !0 });
-    const { styles: Te, classes: C, className: Se } = Ue("Select", {}, o, { errorInternal: ie });
-    return ye({ focus: ae, blur: we, reset: $e, validate: se, setError: Ae, filterRef: E }), (e, t) => (s(), x(Ge, U({
+    const { styles: Ne, classes: y, className: De } = Ge("Select", {}, i, { errorInternal: re });
+    return ge({ focus: se, blur: Ae, reset: Q, validate: ue, setError: Ie, filterRef: E }), (e, t) => (s(), L(_e, U({
       ref_key: "labelRef",
       ref: K,
       tabindex: "0",
       class: ["group", [
-        r(Se),
-        r(C).wrapper
+        r(De),
+        r(y).wrapper
       ]],
-      style: r(Te),
+      style: r(Ne),
       disabled: $.value,
       required: e.required,
-      "is-inside-form": r(Re),
+      "is-inside-form": r(Te),
       label: e.label,
       tooltip: e.tooltip
-    }, de(xe.value)), {
-      default: p(() => [
-        M("div", ll, [
-          e.native && !f.value ? (s(), n("div", {
+    }, ce(Be.value)), {
+      default: m(() => [
+        P("div", ol, [
+          e.native && !v.value ? (s(), n("div", {
             key: 0,
-            class: A(r(C).box),
+            class: k(r(y).box),
             onClick: t[0] || (t[0] = (l) => {
               var a;
               return (a = X.value) == null ? void 0 : a.click();
             })
           }, [
-            le(i.value) ? (s(), n(w, { key: 1 }, [
-              e.placeholder ? (s(), n("div", tl, k(e.placeholder), 1)) : (s(), n("div", al, " "))
+            J(o.value) ? (s(), n(w, { key: 1 }, [
+              e.placeholder ? (s(), n("div", sl, g(e.placeholder), 1)) : (s(), n("div", rl, " "))
             ], 64)) : (s(), n(w, { key: 0 }, [
-              S(k(N(i.value)), 1)
+              T(g(z(o.value)), 1)
             ], 64))
           ], 2)) : (s(), n(w, { key: 1 }, [
-            P(ve, {
+            B(ye, {
               ref_key: "popoverRef",
-              ref: g,
+              ref: C,
               disabled: $.value,
               placement: e.placement
             }, {
-              content: p(() => [
-                P(pe, {
-                  class: A(r(C).content)
+              content: m(() => [
+                B(be, {
+                  class: k(r(y).content)
                 }, {
-                  default: p(() => [
+                  default: m(() => [
                     O(e.$slots, "content-header", {}, () => [
                       e.filterable ? (s(), n("div", {
                         key: 0,
-                        class: A(r(C).search)
+                        class: k(r(y).search)
                       }, [
-                        P(_e, {
+                        B(al, {
                           ref_key: "filterRef",
                           ref: E,
-                          modelValue: V.value,
-                          "onUpdate:modelValue": t[2] || (t[2] = (l) => V.value = l),
+                          modelValue: I.value,
+                          "onUpdate:modelValue": t[2] || (t[2] = (l) => I.value = l),
                           placeholder: e.filterPlaceholder,
                           "skip-form-registry": "",
                           "data-1p-ignore": "",
                           size: "sm"
                         }, null, 8, ["modelValue", "placeholder"])
-                      ], 2)) : I("", !0)
+                      ], 2)) : x("", !0)
                     ]),
-                    M("div", U(r(ke), {
-                      class: r(C).contentBody
+                    P("div", U(r($e), {
+                      class: r(y).contentBody
                     }), [
-                      M("div", U(r(ge), { class: "space-y-0.5" }), [
-                        (s(!0), n(w, null, j(r(Z), (l) => (s(), x(Qe, {
+                      P("div", U(r(Re), { class: "space-y-0.5" }), [
+                        (s(!0), n(w, null, j(r(te), (l) => (s(), L(el, {
                           key: l.index,
                           ref_for: !0,
                           ref_key: "itemsRef",
@@ -338,16 +339,16 @@ const ll = { class: "relative" }, tl = {
                           item: l.data,
                           size: e.size,
                           disabled: l.data.disabled,
-                          selected: l.index === u.value,
+                          selected: l.index === d.value,
                           checkbox: e.multipleCheckbox && !l.data.keepOpenOnClick,
                           color: e.color,
                           filled: "",
                           onClick: () => {
                             var a;
-                            return !l.data.keepOpenOnClick && (!f.value || e.multipleCheckbox) && ((a = g.value) == null ? void 0 : a.hide());
+                            return !l.data.keepOpenOnClick && (!v.value || e.multipleCheckbox) && ((a = C.value) == null ? void 0 : a.hide());
                           }
-                        }, Me({
-                          default: p(() => [
+                        }, Ee({
+                          default: m(() => [
                             O(e.$slots, "label", {
                               item: l.data
                             })
@@ -356,134 +357,137 @@ const ll = { class: "relative" }, tl = {
                         }, [
                           e.$slots.prefix || l.data.prefix ? {
                             name: "prefix",
-                            fn: p(() => [
+                            fn: m(() => [
                               O(e.$slots, "prefix", {
                                 item: l.data
                               }, () => [
-                                S(k(l.data.prefix), 1)
+                                T(g(l.data.prefix), 1)
                               ])
                             ]),
                             key: "0"
                           } : void 0,
                           e.$slots.suffix || l.data.suffix ? {
                             name: "suffix",
-                            fn: p(() => [
+                            fn: m(() => [
                               O(e.$slots, "suffix", {
                                 item: l.data
                               }, () => [
-                                S(k(l.data.suffix), 1)
+                                T(g(l.data.suffix), 1)
                               ])
                             ]),
                             key: "1"
                           } : void 0
                         ]), 1032, ["item", "size", "disabled", "selected", "checkbox", "color", "onClick"]))), 128))
                       ], 16),
-                      r(Z).length === 0 ? (s(), n("div", sl, " No options ")) : I("", !0)
+                      r(te).length === 0 ? (s(), n("div", dl, " No options ")) : x("", !0)
                     ], 16),
                     O(e.$slots, "content-footer")
                   ]),
                   _: 3
                 }, 8, ["class"])
               ]),
-              default: p(() => [
+              default: m(() => [
                 O(e.$slots, "input", {
-                  popover: g.value,
-                  selected: i.value,
+                  popover: C.value,
+                  selected: o.value,
                   disabled: $.value,
-                  label: N(i.value)
+                  label: z(o.value)
                 }, () => [
-                  M("div", {
-                    class: A([r(C).box])
+                  P("div", {
+                    class: k([r(y).box])
                   }, [
-                    f.value && Array.isArray(i.value) && i.value.length > 0 ? (s(), n("div", {
+                    v.value && Array.isArray(o.value) && o.value.length > 0 ? (s(), n("div", {
                       key: 0,
                       ref_key: "tagsRef",
-                      ref: z,
-                      class: A(["flex gap-1 relative", {
+                      ref: N,
+                      class: k(["flex gap-1 relative", {
                         "flex-wrap": !e.truncate,
                         "overflow-hidden": e.truncate
                       }])
                     }, [
-                      (s(!0), n(w, null, j(i.value, (l) => {
-                        var a, y, c, d;
-                        return s(), x(fe, {
+                      (s(!0), n(w, null, j(o.value, (l, a) => {
+                        var h, p, f, D;
+                        return s(), L(pe, {
                           key: l,
                           size: "xs",
                           removable: "",
-                          outlined: !($.value || (y = (a = e.options) == null ? void 0 : a.find((m) => m.value === l)) != null && y.disabled),
-                          disabled: $.value || ((d = (c = e.options) == null ? void 0 : c.find((m) => m.value === l)) == null ? void 0 : d.disabled),
-                          onRemove: (m) => {
-                            te(m, l);
+                          outlined: !($.value || (p = (h = e.options) == null ? void 0 : h.find((u) => u.value === l)) != null && p.disabled),
+                          disabled: $.value || ((D = (f = e.options) == null ? void 0 : f.find((u) => u.value === l)) == null ? void 0 : D.disabled),
+                          style: He({ "max-width": a === 0 && G.value ? `calc(100% - ${G.value.offsetWidth + 6 + "px"})` : void 0 }),
+                          onRemove: (u) => {
+                            oe(u, l);
                           }
                         }, {
-                          prefix: p(() => {
-                            var m;
+                          prefix: m(() => {
+                            var u;
                             return [
                               O(e.$slots, "tag-prefix", {
-                                item: (m = e.options) == null ? void 0 : m.find((b) => b.value === l)
+                                item: (u = e.options) == null ? void 0 : u.find((Y) => Y.value === l)
                               })
                             ];
                           }),
-                          default: p(() => [
-                            S(" " + k(N(l)), 1)
+                          default: m(() => [
+                            T(" " + g(z(l)), 1)
                           ]),
                           _: 2
-                        }, 1032, ["outlined", "disabled", "onRemove"]);
+                        }, 1032, ["outlined", "disabled", "style", "onRemove"]);
                       }), 128)),
-                      q.value ? (s(), n("div", {
+                      W.value ? (s(), n("div", {
                         key: 0,
-                        class: A(r(C).truncateCounter),
-                        onClick: t[1] || (t[1] = Pe((l) => {
+                        ref_key: "hiddenTagsCounterRef",
+                        ref: G,
+                        class: k(r(y).truncateCounter),
+                        onClick: t[1] || (t[1] = We((l) => {
                           var a;
-                          return (a = re.value) == null ? void 0 : a.toggle();
+                          return (a = de.value) == null ? void 0 : a.toggle();
                         }, ["stop"]))
-                      }, "+" + k(W.value), 3)) : I("", !0)
-                    ], 2)) : !f.value && !le(i.value) ? (s(), n(w, { key: 1 }, [
-                      S(k(N(i.value)), 1)
+                      }, "+" + g(q.value), 3)) : x("", !0)
+                    ], 2)) : !v.value && !J(o.value) ? (s(), n(w, { key: 1 }, [
+                      T(g(z(o.value)), 1)
                     ], 64)) : (s(), n(w, { key: 2 }, [
-                      e.placeholder ? (s(), n("div", il, k(e.placeholder), 1)) : (s(), n("div", ol, " "))
+                      e.placeholder ? (s(), n("div", nl, g(e.placeholder), 1)) : (s(), n("div", ul, " "))
                     ], 64))
                   ], 2)
                 ])
               ]),
               _: 3
             }, 8, ["disabled", "placement"]),
-            f.value && e.truncate && q.value ? (s(), x(ve, {
+            v.value && e.truncate && W.value ? (s(), L(ye, {
               key: 0,
               ref_key: "multipleHiddenRef",
-              ref: re,
+              ref: de,
               "popper-show-triggers": [],
               "popper-hide-triggers": [],
               class: "inline-block !absolute right-0",
               placement: "auto-start"
             }, {
-              content: p(() => [
-                P(pe, { class: "p-2 flex gap-2 flex-wrap" }, {
-                  default: p(() => {
+              content: m(() => [
+                B(be, { class: "p-2 flex gap-2 flex-wrap" }, {
+                  default: m(() => {
                     var l;
                     return [
-                      (s(!0), n(w, null, j((l = i.value) == null ? void 0 : l.slice(i.value.length - W.value), (a) => {
-                        var y, c, d, m;
-                        return s(), x(fe, {
+                      (s(!0), n(w, null, j((l = o.value) == null ? void 0 : l.slice(o.value.length - q.value), (a) => {
+                        var h, p, f, D;
+                        return s(), L(pe, {
                           key: a,
                           size: "xs",
                           removable: "",
-                          outlined: !($.value || (c = (y = e.options) == null ? void 0 : y.find((b) => b.value === a)) != null && c.disabled),
-                          disabled: $.value || ((m = (d = e.options) == null ? void 0 : d.find((b) => b.value === a)) == null ? void 0 : m.disabled),
-                          onRemove: (b) => {
-                            te(b, a);
+                          outlined: !($.value || (p = (h = e.options) == null ? void 0 : h.find((u) => u.value === a)) != null && p.disabled),
+                          disabled: $.value || ((D = (f = e.options) == null ? void 0 : f.find((u) => u.value === a)) == null ? void 0 : D.disabled),
+                          onRemove: (u) => {
+                            oe(u, a);
                           }
                         }, {
-                          prefix: p(() => {
-                            var b;
+                          prefix: m(() => {
+                            var u;
                             return [
                               O(e.$slots, "tag-prefix", {
-                                item: (b = e.options) == null ? void 0 : b.find((Be) => Be.value === a)
+                                item: (u = e.options) == null ? void 0 : u.find((Y) => Y.value === a)
                               })
                             ];
                           }),
-                          default: p(() => [
-                            S(" " + k(N(a)), 1)
+                          default: m(() => [
+                            T(" " + g(z(a)), 1)
                           ]),
                           _: 2
                         }, 1032, ["outlined", "disabled", "onRemove"]);
@@ -494,46 +498,59 @@ const ll = { class: "relative" }, tl = {
                 })
               ]),
               _: 3
-            }, 512)) : I("", !0)
+            }, 512)) : x("", !0)
           ], 64)),
-          Fe(M("select", U({
+          qe(P("select", U({
             id: e.id,
             ref_key: "elRef",
             ref: X,
-            "onUpdate:modelValue": t[3] || (t[3] = (l) => i.value = l),
+            "onUpdate:modelValue": t[3] || (t[3] = (l) => o.value = l),
             tabindex: "-1",
-            class: e.native && !f.value ? "absolute inset-0 w-full h-full cursor-pointer opacity-0" : "hidden",
+            class: e.native && !v.value ? "absolute inset-0 w-full h-full cursor-pointer opacity-0" : "hidden",
             name: e.name,
             disabled: e.disabled || e.loading,
-            multiple: f.value,
+            multiple: v.value,
             readonly: e.readonly
-          }, de(r(oe), !0)), [
+          }, ce(r(ne), !0)), [
             e.native ? (s(!0), n(w, { key: 0 }, j(e.options, (l, a) => (s(), n("option", {
               key: a,
               value: l.value,
               disabled: l.disabled
-            }, k(l.label), 9, nl))), 128)) : I("", !0)
-          ], 16, rl), [
-            [Ee, i.value]
+            }, g(l.label), 9, vl))), 128)) : x("", !0)
+          ], 16, fl), [
+            [Ue, o.value]
           ]),
-          e.$slots.input ? I("", !0) : (s(), n("div", {
+          we.value ? (s(), n("button", {
             key: 2,
-            class: A(r(C).iconWrapper)
+            type: "button",
+            "aria-label": "Clean value",
+            class: k(r(y).clearButton),
+            onClick: t[4] || (t[4] = //@ts-ignore
+            (...l) => r(Q) && r(Q)(...l))
+          }, [
+            B(me, {
+              icon: r(Ye),
+              class: k([r(y).icon, "cursor-pointer"])
+            }, null, 8, ["icon", "class"])
+          ], 2)) : x("", !0),
+          e.$slots.input ? x("", !0) : (s(), n("div", {
+            key: 3,
+            class: k(r(y).iconWrapper)
           }, [
-            e.loading ? (s(), x(Ye, {
+            e.loading ? (s(), L(ll, {
               key: 0,
               size: e.size
             }, null, 8, ["size"])) : O(e.$slots, "icon", { key: 1 }, () => [
-              P(Je, {
-                icon: r(Ke),
-                class: A([r(C).icon])
+              B(me, {
+                icon: r(Ze),
+                class: k(r(y).icon)
               }, null, 8, ["icon", "class"])
             ])
           ], 2))
         ]),
-        r(Oe) ? I("", !0) : (s(), x(Ze, {
+        r(Le) ? x("", !0) : (s(), L(tl, {
           key: 0,
-          error: r(ie),
+          error: r(re),
           helper: e.helper
         }, null, 8, ["error", "helper"]))
       ]),
@@ -542,5 +559,5 @@ const ll = { class: "relative" }, tl = {
   }
 });
 export {
-  Tl as default
+  Nl as default
 };