@vielzeug/refine 1.3.1 → 1.4.1

package/dist/combobox.js

@@ -8,77 +8,81 @@ import "./ore/dist/forms.js";
 import { FORM_CTX as ne, useFormContext as re } from "./inputs/shared/form-context.js";
 import { filterOptions as a, getCreatableLabel as ie, makeCreatableValue as ae, parseSlottedOptions as oe } from "./inputs/combobox/combobox-options.js";
 import o from "./inputs/combobox/combobox.css.js";
-import { bind as se, define as s, getHost as ce, html as c, inject as le, onCleanup as ue, onElement as de, prop as l, ref as fe, useEmit as pe, watchEffect as me } from "@vielzeug/ore";
-import { computed as u, signal as d } from "@vielzeug/ripple";
+import { bind as se, define as s, getHost as ce, html as c, inject as le, onCleanup as l, onElement as ue, prop as u, ref as de, useEmit as fe, watchEffect as pe } from "@vielzeug/ore";
+import { computed as d, signal as f } from "@vielzeug/ripple";
 //#region src/inputs/combobox/combobox.ts
-var f = "ore-combobox";
-s(f, {
+var p = "ore-combobox";
+s(p, {
 	formAssociated: !0,
 	props: {
-		autoclose: l.bool(!1),
-		color: l.string(),
-		creatable: l.bool(!1),
-		disabled: l.bool(!1),
-		error: l.string(),
-		fullwidth: l.bool(!1),
-		helper: l.string(),
-		label: l.string(),
-		"label-placement": l.oneOf(["inset", "outside"], "inset"),
-		loading: l.bool(!1),
-		multiple: l.bool(!1),
-		name: l.string(),
-		"no-filter": l.bool(!1),
-		options: l.data(),
-		placeholder: l.string("Select..."),
-		rounded: l.string(),
-		size: l.string(),
-		value: l.string(),
-		variant: l.string()
+		autoclose: u.bool(!1),
+		color: u.string(),
+		creatable: u.bool(!1),
+		disabled: u.bool(!1),
+		error: u.string(),
+		fullwidth: u.bool(!1),
+		helper: u.string(),
+		label: u.string(),
+		"label-placement": u.oneOf(["inset", "outside"], "inset"),
+		loading: u.bool(!1),
+		multiple: u.bool(!1),
+		name: u.string(),
+		"no-filter": u.bool(!1),
+		options: u.data(),
+		placeholder: u.string("Select..."),
+		required: u.bool(!1),
+		rounded: u.string(),
+		size: u.string(),
+		value: u.string(),
+		variant: u.string()
 	},
 	setup(e) {
-		let t = ce(), o = pe(), s = me, l = le(ne), f = re(e, l), p = d(""), m = null, h = null, g = null, _ = null, v = fe(), y = n(ue), b = null, x = r({
-			disabled: f.disabled,
+		let t = ce(), o = fe(), s = pe, u = le(ne), p = re(e, u), m = f(""), h = null, g = null, _ = null, v = null, y = de(), b = n(l), x = r({
+			disabled: p.disabled,
 			error: e.error,
-			getFormField: () => b,
 			helper: e.helper,
 			label: e.label,
 			labelPlacement: e["label-placement"],
 			multiple: e.multiple,
 			prefix: "combobox",
-			signal: y,
-			validateOn: l?.validateOn,
+			required: e.required,
+			signal: b,
+			validateOn: u?.validateOn,
 			value: e.value
-		}), S = d([]), C = ee({
+		}), S = f([]), C = ee({
 			getBoundary: () => t,
-			getFocusedOptionElement: () => g?.querySelector("[data-focused]") ?? null,
+			getFocusedOptionElement: () => _?.querySelector("[data-focused]") ?? null,
 			getItems: () => S.value,
 			getOptionId: (e) => `${x.fieldId}-opt-${e}`,
-			getPanel: () => g,
-			getReference: () => h,
-			getTrigger: () => m,
+			getPanel: () => _,
+			getReference: () => g,
+			getTrigger: () => h,
 			isDisabled: () => x.disabled.value,
 			onClose: (e) => {
-				o("close", { reason: e }), y.aborted || Te(), x.triggerValidation("blur");
+				o("close", { reason: e }), b.aborted || Te(), x.triggerValidation("blur");
 			},
 			onOpen: (e) => o("open", { reason: e }),
 			restoreFocus: !1,
-			signal: y
+			signal: b
 		}), { disabled: w, fieldId: T, selectedValues: E, triggerValidation: D } = x;
-		b = te({
+		x.attachFormField(te({
 			disabled: x.disabled,
+			onReset: x.reset,
 			toFormValue: (e) => e,
+			validationMessage: x.validationMessage,
+			validity: x.validity,
 			value: x.formValue
-		});
-		let { focusedIndex: O, isOpen: k, scrollFocusedIntoView: he, updatePosition: ge } = C, A = () => !!e.multiple.value, _e = () => !!e.creatable.value, j = () => !!e["no-filter"].value;
+		}));
+		let { focusedIndex: O, isOpen: k, scrollFocusedIntoView: me, updatePosition: he } = C, A = () => !!e.multiple.value, ge = () => !!e.creatable.value, _e = () => !!e["no-filter"].value;
 		se({ attr: {
 			open: () => k.value ? !0 : void 0,
-			size: f.size,
-			variant: f.variant
+			size: p.size,
+			variant: p.variant
 		} });
-		let M = null, N = !1, P = u(() => E.value[0] ?? "");
+		let j = null, M = !1, N = d(() => E.value[0] ?? "");
 		Object.defineProperty(t, "value", {
 			configurable: !0,
-			get: () => A() ? E.value : P.value,
+			get: () => A() ? E.value : N.value,
 			set: (e) => {
 				let t = e;
 				if (Array.isArray(t)) {
@@ -93,10 +97,10 @@ s(f, {
 			}
 		});
 		let ve = () => E.value.length > 0;
-		function F() {
-			m?.focus();
+		function P() {
+			h?.focus();
 		}
-		let I = d([]), L = d([]), ye = () => !!e.loading.value;
+		let F = f([]), I = f([]), ye = () => !!e.loading.value;
 		function be(e) {
 			return {
 				disabled: !!e.disabled,
@@ -105,10 +109,10 @@ s(f, {
 				value: e.value
 			};
 		}
-		let R = u(() => {
-			let t = e.options.value, n = Array.isArray(t) ? t.map(be) : I.value;
-			return L.value.length === 0 ? n : [...n, ...L.value];
-		}), z = {
+		let L = d(() => {
+			let t = e.options.value, n = Array.isArray(t) ? t.map(be) : F.value;
+			return I.value.length === 0 ? n : [...n, ...I.value];
+		}), R = {
 			clear: () => {
 				x.clear();
 			},
@@ -122,18 +126,18 @@ s(f, {
 				x.toggleValue(e);
 			}
 		};
-		function B(e = Array.from(t.children)) {
-			if (I.value = oe(e), !A()) {
-				let e = R.value.find((e) => e.value === P.value);
-				p.value = e?.label ?? P.value;
+		function z(e = Array.from(t.children)) {
+			if (F.value = oe(e), !A()) {
+				let e = L.value.find((e) => e.value === N.value);
+				m.value = e?.label ?? N.value;
 			}
 		}
-		B(), s(() => {
-			let e = a(R.value, p.value, j());
+		z(), s(() => {
+			let e = a(L.value, m.value, _e());
 			S.value = A() ? e.filter((e) => !E.value.includes(e.value)) : e;
 		});
-		let V = u(() => ie(p.value, _e(), S.value)), xe = () => A() && E.value.length > 0 ? "" : e.placeholder.value || "", Se = u(() => E.value), Ce = u(() => E.value.map((e) => R.value.find((t) => t.value === e)?.label ?? e));
-		function H(e) {
+		let B = d(() => ie(m.value, ge(), S.value)), xe = () => A() && E.value.length > 0 ? "" : e.placeholder.value || "", Se = d(() => E.value), Ce = d(() => E.value.map((e) => L.value.find((t) => t.value === e)?.label ?? e));
+		function V(e) {
 			o("change", {
 				labels: Ce.value,
 				originalEvent: e,
@@ -143,53 +147,53 @@ s(f, {
 		function we(e) {
 			e.stopPropagation();
 			let t = e.detail?.value;
-			t !== void 0 && (z.remove(t), H(e), D("change"));
+			t !== void 0 && (R.remove(t), V(e), D("change"));
 		}
 		function Te() {
 			if (!A()) {
-				let e = R.value.find((e) => e.value === P.value);
-				N = !0, p.value = e?.label ?? "", Promise.resolve().then(() => {
-					N = !1;
+				let e = L.value.find((e) => e.value === N.value);
+				M = !0, m.value = e?.label ?? "", Promise.resolve().then(() => {
+					M = !1;
 				});
 				return;
 			}
-			p.value = "";
+			m.value = "";
 		}
 		s(() => {
-			if (k.value && !A() && P.value && O.value === -1 && p.value === "") {
-				let e = S.value.findIndex((e) => e.value === P.value);
+			if (k.value && !A() && N.value && O.value === -1 && m.value === "") {
+				let e = S.value.findIndex((e) => e.value === N.value);
 				e >= 0 && C.set(e);
 			}
 		});
-		function U(e = !0, t = "programmatic") {
-			if (e && (M = p.value, p.value = ""), !A() && P.value) {
-				let e = a(R.value, "", j()).findIndex((e) => e.value === P.value);
+		function H(e = !0, t = "programmatic") {
+			if (e && (j = m.value, m.value = ""), !A() && N.value) {
+				let e = a(L.value, "", _e()).findIndex((e) => e.value === N.value);
 				e >= 0 && C.set(e);
 			}
-			C.open(t), !A() && P.value && O.value >= 0 && requestAnimationFrame(() => {
-				he();
+			C.open(t), !A() && N.value && O.value >= 0 && requestAnimationFrame(() => {
+				me();
 			});
 		}
-		function W(e = "programmatic") {
+		function U(e = "programmatic") {
 			C.close(e);
 		}
 		let Ee = i({
 			disabled: w,
 			onPress: () => {
-				k.value || U(!0, "click"), F();
+				k.value || H(!0, "click"), P();
 			}
 		}), De = i({
 			disabled: w,
 			keys: ["Enter"],
 			onPress: (e) => {
 				let t = S.value;
-				k.value && O.value >= 0 && O.value < t.length ? G(t[O.value], e) : k.value && O.value === -1 && V.value ? X(p.value, e) : k.value || U(!0, "keyboard");
+				k.value && O.value >= 0 && O.value < t.length ? W(t[O.value], e) : k.value && O.value === -1 && B.value ? Y(m.value, e) : k.value || H(!0, "keyboard");
 			}
 		});
-		function G(t, n) {
-			t.disabled || (A() ? (z.toggle(t.value), p.value = "", H(n), D("change"), e.autoclose.value && W(), F(), requestAnimationFrame(() => F())) : (z.select(t.value), p.value = t.label, H(n), D("change"), W(), F()));
+		function W(t, n) {
+			t.disabled || (A() ? (R.toggle(t.value), m.value = "", V(n), D("change"), e.autoclose.value && U(), P(), requestAnimationFrame(() => P())) : (R.select(t.value), m.value = t.label, V(n), D("change"), U(), P()));
 		}
-		function K(e) {
+		function G(e) {
 			let t = e.getAttribute("data-option-index"), n = t ? Number(t) : -1;
 			if (Number.isInteger(n) && n >= 0 && n < S.value.length) return S.value[n] ?? null;
 			let r = e.getAttribute("data-option-value");
@@ -201,40 +205,40 @@ s(f, {
 			return i ? S.value.find((e) => e.label === i || e.value === i) ?? null : null;
 		}
 		function Oe(e) {
-			e.stopPropagation(), z.clear(), p.value = "", H(e), D("change"), F();
+			e.stopPropagation(), R.clear(), m.value = "", V(e), D("change"), P();
 		}
-		function q(e) {
+		function K(e) {
 			let t = e.target, n = t.value;
-			if (!N && n !== p.value) {
-				if (p.value = n, !A()) {
-					let e = E.value[0], t = e ? R.value.find((t) => t.value === e)?.label ?? e : "";
-					n === "" && M === t && (M = null);
+			if (!M && n !== m.value) {
+				if (m.value = n, !A()) {
+					let e = E.value[0], t = e ? L.value.find((t) => t.value === e)?.label ?? e : "";
+					n === "" && j === t && (j = null);
 				}
-				C.navigate("first"), k.value || U(!1, "keyboard"), o("search", { query: t.value });
+				C.navigate("first"), k.value || H(!1, "keyboard"), o("search", { query: t.value });
 			}
 		}
-		function J() {}
-		function Y(e) {
+		function q() {}
+		function J(e) {
 			if (!w.value && !C.handleKeydown(e)) switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), k.value ? C.navigate("next") : (U(!0, "keyboard"), C.navigate("first"));
+					e.preventDefault(), k.value ? C.navigate("next") : (H(!0, "keyboard"), C.navigate("first"));
 					break;
 				case "ArrowUp":
-					e.preventDefault(), k.value ? C.navigate("prev") : U(!0, "keyboard");
+					e.preventDefault(), k.value ? C.navigate("prev") : H(!0, "keyboard");
 					break;
 				case "Backspace":
-					A() && !p.value && E.value.length > 0 && (x.removeValue(E.value[E.value.length - 1] ?? ""), H(e), D("change"));
+					A() && !m.value && E.value.length > 0 && (x.removeValue(E.value[E.value.length - 1] ?? ""), V(e), D("change"));
 					break;
 				case "Enter":
 					De.handleKeydown(e);
 					break;
 				case "Tab":
-					W("programmatic");
+					U("programmatic");
 					break;
 				default: break;
 			}
 		}
-		function X(e, t) {
+		function Y(e, t) {
 			let n = e.trim();
 			if (!n) return;
 			let r = {
@@ -243,11 +247,11 @@ s(f, {
 				label: n,
 				value: ae(n)
 			};
-			L.value = [...L.value, r], G(r, t);
+			I.value = [...I.value, r], W(r, t);
 		}
 		let ke = (() => {
 			let e = new MutationObserver(() => {
-				B();
+				z();
 			});
 			return e.observe(t, {
 				attributeFilter: [
@@ -259,36 +263,36 @@ s(f, {
 				childList: !0,
 				subtree: !0
 			}), () => e.disconnect();
-		})(), Ae = (e) => {
+		})(), X = (e) => {
 			let t = e.target;
 			if (!(t instanceof Element)) return;
 			let n = t.closest(".option");
 			if (!n) return;
-			let r = K(n);
+			let r = G(n);
 			if (!r || r.disabled) return;
 			let i = S.value.findIndex((e) => e.value === r.value);
 			i >= 0 && C.set(i);
 		}, Z = t.shadowRoot;
-		Z && Z.addEventListener("pointermove", Ae);
-		let je = (e) => {
+		Z && Z.addEventListener("pointermove", X);
+		let Ae = (e) => {
 			let t = (e) => {
 				let t = e.target;
 				if (!(t instanceof Element)) return;
 				if (t.closest(".no-results-create")) {
-					e.preventDefault(), e.stopPropagation(), X(p.value, e);
+					e.preventDefault(), e.stopPropagation(), Y(m.value, e);
 					return;
 				}
 				let n = t.closest(".option");
 				if (!n) return;
 				e.preventDefault(), e.stopPropagation();
-				let r = K(n);
-				r && G(r, e);
+				let r = G(n);
+				r && W(r, e);
 			}, n = (e) => {
 				let t = e.target;
 				if (!(t instanceof Element)) return;
 				let n = t.closest(".option");
 				if (!n) return;
-				let r = K(n);
+				let r = G(n);
 				if (!r) return;
 				let i = S.value.findIndex((e) => e.value === r.value);
 				i >= 0 && C.set(i);
@@ -296,45 +300,45 @@ s(f, {
 			return e.addEventListener("click", t), e.addEventListener("pointermove", n), () => {
 				e.removeEventListener("click", t), e.removeEventListener("pointermove", n);
 			};
-		}, Q = null, $ = null, Me = (e) => {
-			_ = e, $ !== e && (Q?.(), Q = null, $ = null, e && (Q = je(e), $ = e));
-		}, Ne = () => {
-			_ && ($ === _ && Q || (Q?.(), Q = je(_), $ = _));
+		}, Q = null, $ = null, je = (e) => {
+			v = e, $ !== e && (Q?.(), Q = null, $ = null, e && (Q = Ae(e), $ = e));
+		}, Me = () => {
+			v && ($ === v && Q || (Q?.(), Q = Ae(v), $ = v));
 		};
 		return s(() => {
-			Ne(), k.value ? (g && "showPopover" in g && !g.matches(":popover-open") && g.showPopover(), ge()) : g && "hidePopover" in g && g.matches(":popover-open") && g.hidePopover();
-		}), de(v, (e) => {
-			h = e;
+			Me(), k.value ? (_ && "showPopover" in _ && !_.matches(":popover-open") && _.showPopover(), he()) : _ && "hidePopover" in _ && _.matches(":popover-open") && _.hidePopover();
+		}), ue(y, (e) => {
+			g = e;
 			let t = e.shadowRoot?.querySelector("input") ?? null;
 			if (!t) return;
-			m = t, t.setAttribute("role", "combobox"), t.setAttribute("autocomplete", "off"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-haspopup", "listbox"), t.setAttribute("spellcheck", "false"), t.setAttribute("aria-controls", `${T}-listbox`);
+			h = t, t.setAttribute("role", "combobox"), t.setAttribute("autocomplete", "off"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-haspopup", "listbox"), t.setAttribute("spellcheck", "false"), t.setAttribute("aria-controls", `${T}-listbox`);
 			let n = () => {
-				k.value || U(!0, "click"), F();
+				k.value || H(!0, "click"), P();
 			};
-			return t.addEventListener("input", q), t.addEventListener("keydown", Y), t.addEventListener("focus", J), t.addEventListener("click", n), () => {
-				m = null, h = null, t.removeEventListener("input", q), t.removeEventListener("keydown", Y), t.removeEventListener("focus", J), t.removeEventListener("click", n);
+			return t.addEventListener("input", K), t.addEventListener("keydown", J), t.addEventListener("focus", q), t.addEventListener("click", n), () => {
+				h = null, g = null, t.removeEventListener("input", K), t.removeEventListener("keydown", J), t.removeEventListener("focus", q), t.removeEventListener("click", n);
 			};
 		}), s(() => {
-			if (!v.value) return;
-			let t = m;
+			if (!y.value) return;
+			let t = h;
 			t && (t.setAttribute("aria-expanded", String(k.value)), w.value ? t.setAttribute("aria-disabled", "true") : t.removeAttribute("aria-disabled"), e.error.value ? (t.setAttribute("aria-invalid", "true"), t.setAttribute("aria-errormessage", `${T}-error`)) : (t.removeAttribute("aria-invalid"), t.removeAttribute("aria-errormessage")));
 		}), s(() => {
-			if (!v.value) return;
-			let e = m;
-			e && e.value !== p.value && (e.value = p.value);
-		}), ue(() => {
-			Z?.removeEventListener("pointermove", Ae), Q?.(), Q = null, $ = null, ke();
+			if (!y.value) return;
+			let e = h;
+			e && e.value !== m.value && (e.value = m.value);
+		}), l(() => {
+			Z?.removeEventListener("pointermove", X), Q?.(), Q = null, $ = null, ke();
 		}), c`
       <slot></slot>
       <ore-input
         class="trigger"
-        ref=${v}
+        ref=${y}
         :label="${() => e.label.value ?? ""}"
         :placeholder="${xe}"
         :label-placement="${() => e["label-placement"].value ?? "inset"}"
         :color="${() => e.color?.value ?? void 0}"
-        :size="${() => f.size?.value ?? void 0}"
-        :variant="${() => f.variant?.value ?? void 0}"
+        :size="${() => p.size?.value ?? void 0}"
+        :variant="${() => p.variant?.value ?? void 0}"
         :rounded="${() => e.rounded?.value ?? void 0}"
         :helper="${() => e.helper.value ?? ""}"
         :error="${() => e.error.value ?? ""}"
@@ -352,13 +356,13 @@ s(f, {
             ${() => (A() ? E.value : []).map((t) => c`
                   <ore-chip
                     value=${t}
-                    label=${R.value.find((e) => e.value === t)?.label ?? t}
+                    label=${L.value.find((e) => e.value === t)?.label ?? t}
                     mode="removable"
                     variant="flat"
                     size="sm"
                     color="${e.color}"
                     @remove=${we}>
-                    ${R.value.find((e) => e.value === t)?.label ?? t}
+                    ${L.value.find((e) => e.value === t)?.label ?? t}
                   </ore-chip>
                 `)}
           </span>
@@ -397,7 +401,7 @@ s(f, {
         popover="manual"
         ?data-open=${() => k.value}
         ref=${(e) => {
-			g = e;
+			_ = e;
 		}}>
         <div
           role="listbox"
@@ -405,24 +409,24 @@ s(f, {
           :style="${() => k.value && S.value.length > 0 ? `height:${S.value.length * 36}px;` : ""}"
           aria-label="${() => e.label.value || e.placeholder.value || "Options"}"
           ref=${(e) => {
-			Me(e);
+			je(e);
 		}}>
-          ${() => k.value ? ye() ? c`<div class="dropdown-loading">Loading...</div>` : S.value.length === 0 ? V.value ? c`<button
+          ${() => k.value ? ye() ? c`<div class="dropdown-loading">Loading...</div>` : S.value.length === 0 ? B.value ? c`<button
                   type="button"
                   class="no-results-create"
                   ?data-focused=${() => O.value === -1}>
-                  ${V.value}
+                  ${B.value}
                 </button>` : c`<div class="no-results" role="presentation">No results found</div>` : S.value.map((e, t) => c`<div
                 class="option"
                 role="option"
                 id="${`${T}-opt-${t}`}"
                 data-option-index="${t}"
                 data-option-value="${e.value}"
-                :aria-selected="${() => String(A() ? E.value.includes(e.value) : P.value === e.value)}"
+                :aria-selected="${() => String(A() ? E.value.includes(e.value) : N.value === e.value)}"
                 aria-disabled="${String(e.disabled)}"
                 style="${`position:absolute;top:0;left:0;right:0;transform:translateY(${t * 36}px);`}"
                 ?data-focused=${() => O.value === t}
-                ?data-selected=${() => A() ? E.value.includes(e.value) : P.value === e.value}
+                ?data-selected=${() => A() ? E.value.includes(e.value) : N.value === e.value}
                 ?data-disabled=${e.disabled}>
                 <span>${e.label}</span>
                 <span class="option-check" aria-hidden="true"
@@ -441,6 +445,6 @@ s(f, {
 	]
 });
 //#endregion
-export { f as COMBOBOX_TAG };
+export { p as COMBOBOX_TAG };
 
 //# sourceMappingURL=combobox.js.map