@indielayer/ui 1.11.0 → 1.12.0

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

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