@indielayer/ui 1.16.0 → 1.18.0

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

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