@indielayer/ui 1.18.1 → 2.1.0

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

@@ -0,0 +1,583 @@
+import { injectInputGroupKey as e } from "../../composables/keys.js";
+import { useColors as t } from "../../composables/useColors.js";
+import { useTheme as n } from "../../composables/useTheme.js";
+import { optionalBooleanProp as r } from "../../common/props.js";
+import { useCommon as i } from "../../composables/useCommon.js";
+import a from "../icon/Icon.js";
+import { checkIcon as ee, closeIcon as te, selectIcon as ne } from "../../common/icons.js";
+import { useInteractive as re } from "../../composables/useInteractive.js";
+import ie from "../spinner/Spinner.js";
+import { useInputtable as o } from "../../composables/useInputtable.js";
+import ae from "../inputFooter/InputFooter.js";
+import { useThrottleFn as oe } from "../../node_modules/.pnpm/@vueuse_shared@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
+import { useEventListener as se, useResizeObserver as ce } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import le from "../label/Label.js";
+import ue from "../input/Input.js";
+import de from "../menu/MenuItem.js";
+import fe from "../popover/Popover.js";
+import s from "../popover/PopoverContainer.js";
+import { useVirtualList as pe } from "../../composables/useVirtualList.js";
+import me from "../tag/Tag.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as he, createTextVNode as m, createVNode as h, defineComponent as g, inject as ge, mergeModels as _, mergeProps as v, nextTick as y, normalizeClass as b, normalizeStyle as _e, onUnmounted as ve, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, toHandlers as ye, unref as E, useModel as be, vModelSelect as xe, watch as D, withCtx as O, withDirectives as Se, withModifiers as Ce } from "vue";
+//#region src/components/select/Select.vue?vue&type=script&setup=true&lang.ts
+var we = { class: "relative" }, Te = {
+	key: 0,
+	class: "text-secondary-400 dark:text-secondary-500"
+}, Ee = { key: 1 }, De = {
+	key: 0,
+	class: "flex items-center"
+}, Oe = {
+	key: 0,
+	class: "mr-2 shrink-0"
+}, ke = { class: "flex-1 truncate" }, Ae = {
+	key: 1,
+	class: "ml-1 shrink-0"
+}, je = {
+	key: 0,
+	class: "flex items-center"
+}, Me = {
+	key: 0,
+	class: "mr-2 shrink-0"
+}, Ne = { class: "flex-1 truncate" }, Pe = {
+	key: 1,
+	class: "ml-1 shrink-0"
+}, Fe = {
+	key: 0,
+	class: "text-secondary-400 dark:text-secondary-500"
+}, Ie = { key: 1 }, Le = {
+	key: 0,
+	class: "p-2 text-center text-secondary-400"
+}, Re = {
+	key: 0,
+	class: "flex items-center"
+}, ze = {
+	key: 0,
+	class: "mr-2 shrink-0"
+}, Be = { class: "flex-1 truncate" }, Ve = {
+	key: 1,
+	class: "ml-1 shrink-0"
+}, He = [
+	"id",
+	"name",
+	"disabled",
+	"multiple",
+	"readonly"
+], Ue = ["value", "disabled"], k = {
+	...t.props("secondary"),
+	...i.props(),
+	...re.props(),
+	...o.props(),
+	placeholder: {
+		type: String,
+		description: "Placeholder shown when no option is selected."
+	},
+	options: {
+		type: Array,
+		description: "Available options (`value`, `label`, optional prefix/suffix/disabled)."
+	},
+	multiple: r("Allows selecting more than one option."),
+	multipleCheckbox: r("Multiple selection with checkbox-style items."),
+	truncate: r("Truncates selected labels when space is limited."),
+	flat: r("Removes elevation and border emphasis on the trigger."),
+	native: r("Renders a native HTML select instead of the custom popover."),
+	filterable: r("Shows a filter input inside the options list."),
+	clearable: r("Shows a clear control when a value is selected."),
+	filterPlaceholder: {
+		type: String,
+		default: "Filter by...",
+		description: "Placeholder for the filter input when `filterable` is enabled."
+	},
+	filterablePrefix: r("Includes option prefixes when filtering."),
+	filterableSuffix: r("Includes option suffixes when filtering."),
+	hideSelectedOptionSlots: r("Hides prefix/suffix slots on the selected value display."),
+	virtualList: r("Virtualizes the options list for large datasets."),
+	virtualListOffsetTop: {
+		type: Number,
+		description: "Extra top offset (px) for the virtual list viewport."
+	},
+	virtualListOffsetBottom: {
+		type: Number,
+		description: "Extra bottom offset (px) for the virtual list viewport."
+	},
+	virtualListItemHeight: {
+		type: Number,
+		default: 33,
+		description: "Estimated row height (px) used by the virtual list."
+	},
+	virtualListOverscan: {
+		type: Number,
+		default: 10,
+		description: "Extra rows rendered above/below the visible virtual list window."
+	},
+	placement: {
+		type: String,
+		description: "Popover placement for the options menu."
+	}
+}, A = /* @__PURE__ */ g({
+	name: "XSelect",
+	validators: { ...i.validators() },
+	docs: {
+		slots: {
+			prefix: "Prefix content for an option or the selected value (`item`).",
+			suffix: "Suffix content for an option or the selected value (`item`).",
+			label: "Custom label content for an option (`item`).",
+			input: "Custom trigger content (popover, selected value, disabled, label).",
+			"content-header": "Content above the options list (default includes the filter).",
+			"content-footer": "Content below the options list.",
+			icon: "Custom chevron/icon on the trigger."
+		},
+		emits: {
+			...o.emitDocs(),
+			open: "Emitted when the options popover opens.",
+			close: "Emitted when the options popover closes."
+		},
+		methods: { ...o.methodDocs() }
+	},
+	props: /* @__PURE__ */ _(k, {
+		filter: { default: "" },
+		filterModifiers: {}
+	}),
+	emits: /* @__PURE__ */ _([
+		...o.emits(),
+		"close",
+		"open"
+	], ["update:filter"]),
+	setup(t, { expose: r, emit: i }) {
+		let g = t, _ = i, k = l(() => g.multiple || g.multipleCheckbox), A = S(null), j = S(null), M = S(null), N = S(null), P = S(null), F = S(), I = be(t, "filter"), L = S(null), R = ge(e, {
+			registerChild: () => {},
+			unregisterChild: () => {},
+			registerInput: () => {},
+			unregisterInput: () => {},
+			getPosition: () => "only",
+			childOrder: l(() => []),
+			isInsideInputGroup: !1,
+			groupProps: {}
+		}), z = l(() => g.disabled || g.loading || g.readonly || !!R.groupProps?.disabled), We = l(() => !g.loading && !g.readonly && !g.disabled && g.clearable && !W(B.value)), B = l({
+			get() {
+				return k.value ? g.modelValue ? Array.isArray(g.modelValue) ? g.modelValue : [g.modelValue] : [] : g.modelValue;
+			},
+			set(e) {
+				_("update:modelValue", e);
+			}
+		}), Ge = l(() => g.options ? new Map(g.options.map((e) => [e.value, e])) : /* @__PURE__ */ new Map()), Ke = l(() => g.options ? new Map(g.options.map((e) => [e, {
+			label: e.label.toLowerCase(),
+			prefix: g.filterablePrefix && e.prefix ? e.prefix.toLowerCase() : void 0,
+			suffix: g.filterableSuffix && e.suffix ? e.suffix.toLowerCase() : void 0
+		}])) : /* @__PURE__ */ new Map());
+		function qe(e, t) {
+			let n = Ke.value.get(e);
+			return n ? n.label.includes(t) || n.prefix?.includes(t) || n.suffix?.includes(t) : !1;
+		}
+		let V = l(() => {
+			if (!g.options || g.options.length === 0) return [];
+			let e = I.value.toLowerCase(), t = I.value !== "", n = new Set(k.value && Array.isArray(B.value) ? B.value : []), r = k.value ? null : B.value;
+			return g.options.filter((n) => !t || qe(n, e)).map((e) => {
+				let t = k.value ? n.has(e.value) : e.value === r;
+				return {
+					value: e.value,
+					label: e.label,
+					active: t,
+					prefix: e.prefix,
+					suffix: e.suffix,
+					disabled: e.disabled,
+					iconRight: !g.multipleCheckbox && t ? ee : void 0,
+					keepOpenOnClick: e.keepOpenOnClick,
+					onClick: () => nt(e.value)
+				};
+			});
+		}), Je = l(() => V.value.filter((e) => !e.disabled)), { list: Ye, scrollTo: Xe, containerProps: Ze, wrapperProps: Qe } = pe(V, {
+			disabled: !g.virtualList,
+			itemHeight: g.virtualListItemHeight,
+			topOffset: g.virtualListOffsetTop || 0,
+			bottomOffset: g.virtualListOffsetBottom || 0,
+			overscan: g.virtualListOverscan
+		}), H = l(() => N.value?.isOpen), $e = l(() => !!E(H.value));
+		D(I, (e) => {
+			e && (F.value = void 0, U(-1));
+		}), D(H, (e) => {
+			e ? (et(), (k.value || F.value === void 0) && U(-1), setTimeout(() => {
+				requestAnimationFrame(() => {
+					tt(F.value || 0), g.filterable && L.value?.focus();
+				});
+			}, 50), _("open")) : (g.filterable && (I.value = ""), _("close"));
+		});
+		function et() {
+			if (k.value) {
+				if (Array.isArray(B.value) && B.value.length > 0) {
+					let e = V.value.findIndex((e) => e.value === B.value[0]);
+					e !== -1 && (F.value = e);
+				}
+			} else {
+				let e = V.value.findIndex((e) => e.value === B.value);
+				e !== -1 && (F.value = e);
+			}
+		}
+		function tt(e) {
+			g.virtualList ? Xe(e) : M.value && M.value[e]?.$el.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+		}
+		D(F, (e) => {
+			e !== void 0 && M.value && tt(e);
+		});
+		function U(e, t = "down") {
+			if (!Je.value || Je.value.length === 0) {
+				F.value = void 0;
+				return;
+			}
+			e === void 0 && (e = t === "down" ? -1 : 1);
+			let n = V.value.length, r = 0;
+			if (t === "down") {
+				let t = e + 1;
+				for (t > n - 1 && (t = 0); V.value[t].disabled;) if (++t > n - 1 && (t = 0), ++r >= n) {
+					F.value = void 0;
+					return;
+				}
+				F.value = t;
+			} else {
+				let t = e - 1;
+				for (t < 0 && (t = n - 1); V.value[t].disabled;) if (--t < 0 && (t = n - 1), ++r >= n) {
+					F.value = void 0;
+					return;
+				}
+				F.value = t;
+			}
+		}
+		function nt(e) {
+			let t = G(e);
+			if (!(!t || t.disabled)) if (t.onClick) t.onClick();
+			else {
+				if (k.value) {
+					if (Array.isArray(B.value)) {
+						let t = B.value.indexOf(e);
+						t === -1 ? B.value.push(e) : B.value.splice(t, 1);
+					} else B.value = [e];
+					_("update:modelValue", B.value), g.filterable && setTimeout(() => {
+						L.value?.focus();
+					});
+				} else B.value = e;
+				g.native || y(() => {
+					ut(), j.value?.$el.focus();
+				});
+			}
+		}
+		function W(e) {
+			return !!(e == null || e === "" || Array.isArray(e) && e.length === 0 || !Array.isArray(e) && typeof e == "object" && Object.keys(e).length === 0);
+		}
+		function rt(e, t) {
+			if (e.stopPropagation(), z.value || !Array.isArray(B.value)) return;
+			let n = B.value.indexOf(t);
+			n !== -1 && (B.value.splice(n, 1), _("update:modelValue", B.value));
+		}
+		function G(e) {
+			if (!Array.isArray(e)) return Ge.value.get(e);
+		}
+		function K(e) {
+			let t = G(e);
+			return t ? t.label?.toString() : e?.toString();
+		}
+		function q(e) {
+			return {
+				value: e?.toString() || "",
+				label: e?.toString() || ""
+			};
+		}
+		let { focus: it, blur: at } = re(A), { errorInternal: ot, hideFooterInternal: st, hideLabelInternal: ct, inputListeners: lt, reset: J, validate: ut, setError: dt, isFocused: ft, isInsideForm: pt, isInsideInputGroup: mt, inputGroupPosition: ht } = o(g, {
+			focus: it,
+			emit: _,
+			withListeners: !0
+		}), gt = l(() => R.groupProps?.size ?? g.size), _t = l(() => ct.value ? void 0 : g.label), vt = l(() => ({
+			...g,
+			size: gt.value,
+			disabled: z.value
+		})), yt = l(() => {
+			let { focus: e, blur: t } = E(lt);
+			return {
+				focus: e,
+				blur: t
+			};
+		}), Y = null;
+		D([ft, H], ([e, t]) => {
+			e || t ? Y ||= se(document, "keydown", bt) : Y &&= (Y(), null);
+		}, { immediate: !0 }), ve(() => {
+			Y && Y();
+		});
+		function bt(e) {
+			if (V.value.length !== 0) if (e.code === "ArrowDown") {
+				if (e.preventDefault(), !H.value) {
+					N.value?.show();
+					return;
+				}
+				U(F.value, "down");
+			} else if (e.code === "ArrowUp") {
+				if (e.preventDefault(), !H.value) {
+					N.value?.show();
+					return;
+				}
+				U(F.value, "up");
+			} else if (e.code === "Enter" || e.code === "Space") {
+				if (e.code === "Space" && g.filterable) return;
+				if (e.preventDefault(), e.stopPropagation(), !H.value) {
+					N.value?.show();
+					return;
+				}
+				if (F.value !== void 0 && V.value[F.value]) {
+					let e = V.value[F.value];
+					nt(e.value), !e.keepOpenOnClick && (!k.value || g.multipleCheckbox) && N.value?.hide();
+				}
+			} else e.code === "Tab" && H.value && (e.preventDefault(), N.value?.hide(), g.native || y(() => {
+				j.value?.$el.focus();
+			}));
+		}
+		let X = S(null), xt = S(null), Z = S(!1), Q = S(0), St = oe(() => {
+			k.value && g.truncate && y(() => {
+				let e = Ct();
+				e < B.value.length ? (Z.value = !0, Q.value = B.value.length - e) : (Z.value = !1, Q.value = 0);
+			});
+		}, 100, !0);
+		ce(X, () => {
+			St();
+		});
+		function Ct() {
+			if (!X.value) return 0;
+			let e = X.value.querySelectorAll(".x-tag"), t = Array.from(e), n = 0, r = 1, i = X.value.offsetWidth - 30;
+			for (let e = 0; e < t.length; e++) {
+				let a = t[e];
+				a.style.display = "flex", n += a.offsetWidth, e > 0 && (n < i ? r++ : a.style.display = "none");
+			}
+			return r;
+		}
+		D(B, (e) => {
+			St();
+		}, {
+			immediate: !0,
+			deep: !0
+		});
+		let { styles: wt, classes: $, className: Tt } = n("Select", {}, vt, {
+			errorInternal: ot,
+			isInsideInputGroup: mt,
+			inputGroupPosition: ht,
+			isPopoverOpen: $e
+		});
+		return r({
+			focus: it,
+			blur: at,
+			reset: J,
+			validate: ut,
+			setError: dt,
+			filterRef: L
+		}), (e, t) => (x(), u(le, v({
+			ref_key: "labelRef",
+			ref: j,
+			tabindex: "0",
+			class: ["group", [E(Tt), E($).wrapper]],
+			style: E(wt),
+			disabled: z.value,
+			required: e.required,
+			"is-inside-form": E(pt),
+			"is-inside-input-group": E(mt),
+			label: _t.value,
+			tooltip: e.tooltip
+		}, ye(yt.value)), {
+			default: O(() => [p("div", we, [
+				e.native && !k.value ? (x(), f("div", {
+					key: 0,
+					class: b(E($).box),
+					onClick: t[0] ||= (e) => A.value?.click()
+				}, [W(B.value) ? (x(), f(c, { key: 1 }, [e.placeholder ? (x(), f("div", Te, T(e.placeholder), 1)) : (x(), f("div", Ee, "\xA0"))], 64)) : (x(), f(c, { key: 0 }, [m(T(K(B.value)), 1)], 64))], 2)) : (x(), f(c, { key: 1 }, [h(fe, {
+					ref_key: "popoverRef",
+					ref: N,
+					disabled: z.value,
+					placement: e.placement
+				}, {
+					content: O(() => [h(s, { class: b(E($).content) }, {
+						default: O(() => [
+							w(e.$slots, "content-header", {}, () => [e.filterable ? (x(), f("div", {
+								key: 0,
+								class: b(E($).search)
+							}, [h(ue, {
+								ref_key: "filterRef",
+								ref: L,
+								modelValue: I.value,
+								"onUpdate:modelValue": t[2] ||= (e) => I.value = e,
+								placeholder: e.filterPlaceholder,
+								"skip-form-registry": "",
+								"data-1p-ignore": "",
+								size: "sm"
+							}, null, 8, ["modelValue", "placeholder"])], 2)) : d("", !0)]),
+							p("div", v(E(Ze), { class: E($).contentBody }), [p("div", v(E(Qe), { class: "space-y-0.5" }), [(x(!0), f(c, null, C(E(Ye), (t) => (x(), u(de, {
+								key: t.index,
+								ref_for: !0,
+								ref_key: "itemsRef",
+								ref: M,
+								item: t.data,
+								size: e.size,
+								disabled: t.data.disabled,
+								selected: t.index === F.value,
+								checkbox: e.multipleCheckbox && !t.data.keepOpenOnClick,
+								color: e.color,
+								filled: "",
+								onClick: () => !t.data.keepOpenOnClick && (!k.value || e.multipleCheckbox) && N.value?.hide()
+							}, he({
+								default: O(() => [w(e.$slots, "label", { item: t.data })]),
+								_: 2
+							}, [e.$slots.prefix || t.data.prefix ? {
+								name: "prefix",
+								fn: O(() => [w(e.$slots, "prefix", { item: t.data }, () => [m(T(t.data.prefix), 1)])]),
+								key: "0"
+							} : void 0, e.$slots.suffix || t.data.suffix ? {
+								name: "suffix",
+								fn: O(() => [w(e.$slots, "suffix", { item: t.data }, () => [m(T(t.data.suffix), 1)])]),
+								key: "1"
+							} : void 0]), 1032, [
+								"item",
+								"size",
+								"disabled",
+								"selected",
+								"checkbox",
+								"color",
+								"onClick"
+							]))), 128))], 16), E(Ye).length === 0 ? (x(), f("div", Le, " No options ")) : d("", !0)], 16),
+							w(e.$slots, "content-footer")
+						]),
+						_: 3
+					}, 8, ["class"])]),
+					default: O(() => [w(e.$slots, "input", {
+						popover: N.value,
+						selected: B.value,
+						disabled: z.value,
+						label: K(B.value)
+					}, () => [p("div", { class: b([E($).box]) }, [k.value && Array.isArray(B.value) && B.value.length > 0 ? (x(), f("div", {
+						key: 0,
+						ref_key: "tagsRef",
+						ref: X,
+						class: b(["flex gap-1 relative", {
+							"flex-wrap": !e.truncate,
+							"overflow-hidden": e.truncate
+						}])
+					}, [(x(!0), f(c, null, C(B.value, (t, n) => (x(), u(me, {
+						key: t,
+						size: "xs",
+						removable: "",
+						outlined: !(z.value || G(t)?.disabled),
+						disabled: z.value || G(t)?.disabled,
+						style: _e({ "max-width": n === 0 && P.value ? `calc(100% - ${P.value.offsetWidth + 6 + "px"})` : void 0 }),
+						onRemove: (e) => {
+							rt(e, t);
+						}
+					}, {
+						default: O(() => [e.hideSelectedOptionSlots ? (x(), f(c, { key: 1 }, [m(T(K(t)), 1)], 64)) : (x(), f("div", De, [
+							e.$slots.prefix || G(t)?.prefix ? (x(), f("span", Oe, [w(e.$slots, "prefix", { item: G(t) || q(t) }, () => [m(T(G(t)?.prefix), 1)])])) : d("", !0),
+							p("span", ke, T(K(t)), 1),
+							e.$slots.suffix || G(t)?.suffix ? (x(), f("span", Ae, [w(e.$slots, "suffix", { item: G(t) || q(t) }, () => [m(T(G(t)?.suffix), 1)])])) : d("", !0)
+						]))]),
+						_: 2
+					}, 1032, [
+						"outlined",
+						"disabled",
+						"style",
+						"onRemove"
+					]))), 128)), Z.value ? (x(), f("div", {
+						key: 0,
+						ref_key: "hiddenTagsCounterRef",
+						ref: P,
+						class: b(E($).truncateCounter),
+						onClick: t[1] ||= Ce((e) => xt.value?.toggle(), ["stop"])
+					}, "+" + T(Q.value), 3)) : d("", !0)], 2)) : !k.value && !W(B.value) && K(B.value) !== "" ? (x(), f(c, { key: 1 }, [e.hideSelectedOptionSlots ? (x(), f(c, { key: 1 }, [m(T(K(B.value)), 1)], 64)) : (x(), f("div", je, [
+						e.$slots.prefix || G(B.value)?.prefix ? (x(), f("span", Me, [w(e.$slots, "prefix", { item: G(B.value) || q(B.value) }, () => [m(T(G(B.value)?.prefix), 1)])])) : d("", !0),
+						p("span", Ne, T(K(B.value)), 1),
+						e.$slots.suffix || G(B.value)?.suffix ? (x(), f("span", Pe, [w(e.$slots, "suffix", { item: G(B.value) || q(B.value) }, () => [m(T(G(B.value)?.suffix), 1)])])) : d("", !0)
+					]))], 64)) : (x(), f(c, { key: 2 }, [e.placeholder ? (x(), f("div", Fe, T(e.placeholder), 1)) : (x(), f("div", Ie, "\xA0"))], 64))], 2)])]),
+					_: 3
+				}, 8, ["disabled", "placement"]), k.value && e.truncate && Z.value ? (x(), u(fe, {
+					key: 0,
+					ref_key: "multipleHiddenRef",
+					ref: xt,
+					"popper-show-triggers": [],
+					"popper-hide-triggers": [],
+					class: "inline-block !absolute right-0",
+					placement: "auto-start"
+				}, {
+					content: O(() => [h(s, { class: "p-2 flex gap-2 flex-wrap" }, {
+						default: O(() => [(x(!0), f(c, null, C(B.value?.slice(B.value.length - Q.value), (t) => (x(), u(me, {
+							key: t,
+							size: "xs",
+							removable: "",
+							outlined: !(z.value || G(t)?.disabled),
+							disabled: z.value || G(t)?.disabled,
+							onRemove: (e) => {
+								rt(e, t);
+							}
+						}, {
+							default: O(() => [e.hideSelectedOptionSlots ? (x(), f(c, { key: 1 }, [m(T(K(t)), 1)], 64)) : (x(), f("div", Re, [
+								e.$slots.prefix || G(t)?.prefix ? (x(), f("span", ze, [w(e.$slots, "prefix", { item: G(t) || q(t) }, () => [m(T(G(t)?.prefix), 1)])])) : d("", !0),
+								p("span", Be, T(K(t)), 1),
+								e.$slots.suffix || G(t)?.suffix ? (x(), f("span", Ve, [w(e.$slots, "suffix", { item: G(t) || q(t) }, () => [m(T(G(t)?.suffix), 1)])])) : d("", !0)
+							]))]),
+							_: 2
+						}, 1032, [
+							"outlined",
+							"disabled",
+							"onRemove"
+						]))), 128))]),
+						_: 3
+					})]),
+					_: 3
+				}, 512)) : d("", !0)], 64)),
+				Se(p("select", v({
+					id: e.id,
+					ref_key: "elRef",
+					ref: A,
+					"onUpdate:modelValue": t[3] ||= (e) => B.value = e,
+					tabindex: "-1",
+					class: e.native && !k.value ? "absolute inset-0 w-full h-full cursor-pointer opacity-0" : "hidden",
+					name: e.name,
+					disabled: e.disabled || e.loading,
+					multiple: k.value,
+					readonly: e.readonly
+				}, ye(E(lt), !0)), [e.native ? (x(!0), f(c, { key: 0 }, C(e.options, (e, t) => (x(), f("option", {
+					key: t,
+					value: e.value,
+					disabled: e.disabled
+				}, T(e.label), 9, Ue))), 128)) : d("", !0)], 16, He), [[xe, B.value]]),
+				We.value ? (x(), f("button", {
+					key: 2,
+					type: "button",
+					"aria-label": "Clean value",
+					class: b(E($).clearButton),
+					onClick: t[4] ||= (...e) => E(J) && E(J)(...e)
+				}, [h(a, {
+					icon: E(te),
+					class: b([E($).icon, "cursor-pointer"])
+				}, null, 8, ["icon", "class"])], 2)) : d("", !0),
+				e.$slots.input ? d("", !0) : (x(), f("div", {
+					key: 3,
+					class: b(E($).iconWrapper)
+				}, [e.loading ? (x(), u(ie, {
+					key: 0,
+					size: e.size
+				}, null, 8, ["size"])) : w(e.$slots, "icon", { key: 1 }, () => [h(a, {
+					icon: E(ne),
+					class: b(E($).icon)
+				}, null, 8, ["icon", "class"])])], 2))
+			]), E(st) ? d("", !0) : (x(), u(ae, {
+				key: 0,
+				error: E(ot),
+				helper: e.helper
+			}, null, 8, ["error", "helper"]))]),
+			_: 3
+		}, 16, [
+			"style",
+			"disabled",
+			"required",
+			"is-inside-form",
+			"is-inside-input-group",
+			"label",
+			"class",
+			"tooltip"
+		]));
+	}
+});
+//#endregion
+export { A as default };

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

@@ -1,26 +1,27 @@
-const s = {
-  classes: {
-    wrapper: "",
-    box: ({ props: e, data: t }) => {
-      const r = ["w-full border border-secondary-300 dark:border-secondary-700 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm"];
-      return !t.errorInternal && !e.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), e.size === "xs" ? r.push("px-2 py-1 text-xs") : e.size === "sm" ? r.push("px-2 py-1.5 text-sm") : e.size === "lg" ? r.push("px-4 py-3 text-lg") : e.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), e.disabled ? r.push("bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed") : r.push("bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), t.errorInternal ? r.push("border-error-500 dark:border-error-400 group-focus:outline-error-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), !e.multiple && !e.multipleCheckbox && r.push("truncate"), e.clearable ? r.push("pr-14") : r.push("pr-8"), r;
-    },
-    truncateCounter: "absolute right-0 cursor-pointer hover:bg-secondary-200 bg-secondary-100 text-secondary-800 rounded px-1 py-0.5 text-xs",
-    content: "p-1",
-    search: "p-1 mb-0.5",
-    contentBody: "overflow-y-auto max-h-64 min-w-[280px]",
-    iconWrapper: "absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none",
-    clearButton: "absolute top-1/2 -translate-y-1/2 right-5 flex items-center p-2",
-    icon: ({ props: e }) => {
-      const t = [];
-      return e.size === "sm" || e.size === "xs" ? t.push("h-3 w-3") : e.size === "lg" || e.size === "xl" ? t.push("h-5 w-5") : t.push("h-4 w-4"), e.disabled ? t.push("text-secondary-300 dark:text-secondary-500") : t.push("text-secondary-500 dark:text-secondary-400"), t;
-    }
-  },
-  styles: ({ colors: e, css: t }) => {
-    const r = e.getPalette("primary");
-    return t.get("border", r[500]);
-  }
-}, o = s;
-export {
-  o as default
+import { inputGroupRadiusClasses as e } from "../../../common/inputGroupRadius.js";
+//#region src/components/select/theme/Select.base.theme.ts
+var t = {
+	classes: {
+		wrapper: "",
+		box: ({ props: t, data: n }) => {
+			let r = ["w-full border border-secondary-300 dark:border-secondary-700 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out shadow-xs"];
+			return n.isInsideInputGroup ? r.push(...e(n.inputGroupPosition)) : r.push("rounded-md"), !n.errorInternal && !t.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), t.size === "xs" ? r.push("px-2 py-1 text-xs") : t.size === "sm" ? r.push("px-2 py-1.5 text-sm") : t.size === "lg" ? r.push("px-4 py-3 text-lg") : t.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), t.disabled ? r.push("bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed") : r.push("bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), n.errorInternal ? (r.push("border-error-500 dark:border-error-400 group-focus:outline-error-500"), n.isPopoverOpen && r.push("outline-error-500!")) : t.disabled || (r.push("group-focus:outline-[color:var(--x-select-border)]"), n.isPopoverOpen && r.push("outline-[color:var(--x-select-border)]!")), !t.multiple && !t.multipleCheckbox && r.push("truncate"), t.clearable ? r.push("pr-14") : r.push("pr-8"), r;
+		},
+		truncateCounter: "absolute right-0 cursor-pointer hover:bg-secondary-200 bg-secondary-100 text-secondary-800 rounded px-1 py-0.5 text-xs",
+		content: "p-1",
+		search: "p-1 mb-0.5",
+		contentBody: "overflow-y-auto max-h-64 min-w-[280px]",
+		iconWrapper: "absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none",
+		clearButton: "absolute top-1/2 -translate-y-1/2 right-5 flex items-center p-2",
+		icon: ({ props: e }) => {
+			let t = [];
+			return e.size === "sm" || e.size === "xs" ? t.push("h-3 w-3") : e.size === "lg" || e.size === "xl" ? t.push("h-5 w-5") : t.push("h-4 w-4"), e.disabled ? t.push("text-secondary-300 dark:text-secondary-500") : t.push("text-secondary-500 dark:text-secondary-400"), t;
+		}
+	},
+	styles: ({ colors: e, css: t }) => {
+		let n = e.getPalette("primary");
+		return t.get("border", n[500]);
+	}
 };
+//#endregion
+export { t as default };