@indielayer/ui 1.9.2 → 1.10.0

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

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