@indielayer/ui 1.8.4 → 1.9.0

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

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

package/lib/components/select/theme/Select.base.theme.js

@@ -7,7 +7,7 @@ const t = {
     },
     content: "p-1",
     search: "p-1 mb-0.5",
-    contentBody: "overflow-y-auto max-h-64",
+    contentBody: "overflow-y-auto max-h-64 min-w-[280px]",
     iconWrapper: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2",
     icon: ({ props: e }) => {
       const s = [""];