@indielayer/ui 1.10.4 → 1.11.0

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

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