@vielzeug/refine 1.7.0 → 2.0.0

package/dist/date-picker.js

@@ -1,113 +1,120 @@
 import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
 import { colorThemeMixin as t } from "./styles/mixins/theme.css.js";
-import { disablableBundle as n, roundableBundle as r, sizableBundle as i, themableBundle as a } from "./shared/prop-bundles.js";
-import { createDropdownPositioner as o } from "./headless/positioner.js";
-import { createDatePickerControl as s, formatDisplayDate as c, parseIso as l, toIsoString as u } from "./headless/date-picker.js";
-import { FORM_CTX as d, useFormContext as f } from "./inputs/shared/form-context.js";
-import p from "./inputs/date-picker/date-picker.css.js";
-import { bind as ee, define as m, getHost as h, html as g, inject as _, onMounted as v, prop as y, ref as b, useEmit as x } from "@vielzeug/ore";
-import { computed as S, signal as C } from "@vielzeug/ripple";
-import { Temporal as w, format as te } from "@vielzeug/tempo";
-import { useField as T } from "@vielzeug/ore/forms";
+import { createDatePickerControl as n, formatDisplayDate as r, parseIso as i, toIsoString as a } from "./core/date-picker.js";
+import { createDropdownPositioner as o } from "./core/positioner.js";
+import { disablableBundle as s, roundableBundle as c, sizableBundle as l, themableBundle as u } from "./shared/prop-bundles.js";
+import { defineFieldValue as d, dispatchNativeFieldEvent as f, setFieldValue as p } from "./inputs/shared/native-field-event.js";
+import m from "./inputs/date-picker/date-picker.css.js";
+import { bind as h, define as g, getHost as _, html as v, onMounted as y, prop as b, ref as x, useField as S } from "@vielzeug/ore";
+import { computed as C, signal as w } from "@vielzeug/ripple";
+import { Temporal as T, format as ee } from "@vielzeug/tempo";
 //#region src/inputs/date-picker/date-picker.ts
 var E = "ore-date-picker";
-m(E, {
+g(E, {
 	formAssociated: !0,
 	props: {
-		...a,
-		...i,
-		...n,
-		...r,
-		error: y.string(),
-		fullwidth: y.bool(!1),
-		helper: y.string(),
-		label: y.string(),
-		"label-placement": y.oneOf(["inset", "outside"], "inset"),
-		locale: y.string(),
-		max: y.string(),
-		min: y.string(),
-		name: y.string(),
-		placeholder: y.string(),
-		required: y.bool(!1),
-		success: y.bool(!1),
-		value: y.string(),
-		variant: y.string(),
-		"weekend-days": y.json([])
+		...u,
+		...l,
+		...s,
+		...c,
+		error: b.string(),
+		fullwidth: b.bool(!1),
+		helper: b.string(),
+		label: b.string(),
+		"label-placement": b.oneOf(["inset", "outside"], "inset"),
+		locale: b.string(),
+		max: b.string(),
+		min: b.string(),
+		name: b.string(),
+		placeholder: b.string(),
+		required: b.bool(!1),
+		success: b.bool(!1),
+		value: b.string(),
+		variant: b.string(),
+		"weekend-days": b.json([])
 	},
 	setup(e) {
-		let t = h(), n = x(), r = C(!1), i = C(void 0), a = S(() => i.value === void 0 ? l(e.value.value) : i.value), p = f(e, _(d)), m = p.disabled, y = S(() => e.locale.value || (typeof navigator < "u" ? navigator.language : "en")), E = s({
+		let t = _(), s = w(!1), c = w(void 0), l = C(() => c.value === void 0 ? i(e.value.value) : c.value);
+		d(t, () => a(l.value) ?? "", (e) => {
+			c.value = i(e);
+		});
+		let u = C(() => !!e.disabled.value), m = C(() => e.locale.value || (typeof navigator < "u" ? navigator.language : "en")), g = n({
 			get locale() {
-				return y.value;
+				return m.value;
 			},
 			get max() {
-				return l(e.max.value);
+				return i(e.max.value);
 			},
 			get min() {
-				return l(e.min.value);
+				return i(e.min.value);
 			},
 			onChange(e) {
-				i.value = e, r.value = !1, E.setView("day"), D.value = "day", O.value = E.displayYear(), k.value = E.displayMonth(), n("change", { isoValue: u(e) });
+				c.value = e, s.value = !1, g.setView("day"), b.value = "day", E.value = g.displayYear(), D.value = g.displayMonth(), p(t, a(e) ?? ""), f(t, "input"), f(t, "change");
 			},
 			get value() {
-				return a.value;
+				return l.value;
 			},
 			get weekendDays() {
 				return e["weekend-days"].value ?? [];
 			}
-		}), D = C("day"), O = C(E.displayYear()), k = C(E.displayMonth());
-		T({
-			disabled: m,
+		}), b = w("day"), E = w(g.displayYear()), D = w(g.displayMonth());
+		S({
+			disabled: u,
 			toFormValue: (e) => e || null,
-			value: S(() => u(a.value) ?? "")
+			value: C(() => a(l.value) ?? "")
 		});
-		let A = `date-picker-${Math.random().toString(36).slice(2, 9)}-calendar`, j = b(), M = b(), N = o({
-			getFloating: () => M.value ?? null,
-			getReference: () => j.value ?? null,
+		let O = `date-picker-${Math.random().toString(36).slice(2, 9)}-calendar`, k = x(), A = x(), j = o({
+			getFloating: () => A.value ?? null,
+			getReference: () => k.value ?? null,
 			matchWidth: !1,
 			offsetPx: 4
-		}), P = null, ne = S(() => a.value ? c(a.value, y.value) : e.placeholder.value || ""), F = S(() => te(w.PlainDate.from({
-			day: 1,
-			month: k.value,
-			year: O.value
-		}), {
-			intl: { month: "long" },
-			locale: y.value,
-			tz: "UTC"
-		})), I = S(() => String(O.value)), L = S(() => `${F.value} ${I.value}`), R = S(() => (O.value, k.value, a.value, E.dayCells())), z = S(() => (O.value, E.monthCells())), B = S(() => (O.value, E.yearCells())), V = S(() => E.weekdayLabels()), H = () => m.value ? "-1" : "0";
+		}), M = null, N = C(() => l.value ? r(l.value, m.value) : e.placeholder.value || ""), P = C(() => {
+			let e = T.PlainDate.from({
+				day: 1,
+				month: D.value,
+				year: E.value
+			});
+			return ee(e, {
+				intl: { month: "long" },
+				locale: m.value,
+				tz: "UTC"
+			});
+		}), F = C(() => String(E.value)), I = C(() => `${P.value} ${F.value}`), L = C(() => (E.value, D.value, l.value, g.dayCells())), R = C(() => (E.value, g.monthCells())), z = C(() => (E.value, g.yearCells())), B = C(() => g.weekdayLabels()), V = () => u.value ? "-1" : "0";
+		function H() {
+			b.value === "day" ? g.prevMonth() : g.prevYear(), E.value = g.displayYear(), D.value = g.displayMonth();
+		}
 		function U() {
-			D.value === "day" ? E.prevMonth() : E.prevYear(), O.value = E.displayYear(), k.value = E.displayMonth();
+			b.value === "day" ? g.nextMonth() : g.nextYear(), E.value = g.displayYear(), D.value = g.displayMonth();
 		}
 		function W() {
-			D.value === "day" ? E.nextMonth() : E.nextYear(), O.value = E.displayYear(), k.value = E.displayMonth();
-		}
-		function G() {
 			let e = [
 				"day",
 				"month",
 				"year"
-			], t = e[(e.indexOf(D.value) + 1) % e.length];
-			E.setView(t), D.value = t;
+			], t = e[(e.indexOf(b.value) + 1) % e.length];
+			g.setView(t), b.value = t;
+		}
+		function G(e) {
+			g.goTo(g.displayYear(), e), g.setView("day"), E.value = g.displayYear(), D.value = g.displayMonth(), b.value = "day";
 		}
 		function K(e) {
-			E.goTo(E.displayYear(), e), E.setView("day"), O.value = E.displayYear(), k.value = E.displayMonth(), D.value = "day";
+			g.goTo(e, g.displayMonth()), g.setView("month"), E.value = g.displayYear(), b.value = "month";
 		}
 		function q(e) {
-			E.goTo(e, E.displayMonth()), E.setView("month"), O.value = E.displayYear(), D.value = "month";
+			let t = i(e);
+			t && g.select(t);
 		}
 		function J(e) {
-			let t = l(e);
-			t && E.select(t);
-		}
-		function Y(e) {
 			let t = e.currentTarget, n = t.closest(".cal-grid-days");
 			if (!n) return;
 			let r = Array.from(n.querySelectorAll(".cal-cell-day")), i = r.indexOf(t);
 			if (i === -1) return;
 			let a;
 			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault(), J(t.dataset.iso ?? "");
+				e.preventDefault(), q(t.dataset.iso ?? "");
 				return;
-			} else if (e.key === "ArrowRight") a = r[i + 1];
+			}
+			if (e.key === "ArrowRight") a = r[i + 1];
 			else if (e.key === "ArrowLeft") a = r[i - 1];
 			else if (e.key === "ArrowDown") a = r[i + 7];
 			else if (e.key === "ArrowUp") a = r[i - 7];
@@ -116,7 +123,7 @@ m(E, {
 			else return;
 			e.preventDefault(), a?.focus();
 		}
-		function X(e, t, n, r) {
+		function Y(e, t, n, r) {
 			let i = e.currentTarget, a = i.closest(".cal-grid");
 			if (!a) return;
 			let o = Array.from(a.querySelectorAll(t)), s = o.indexOf(i);
@@ -125,7 +132,8 @@ m(E, {
 			if (e.key === "Enter" || e.key === " ") {
 				e.preventDefault(), r();
 				return;
-			} else if (e.key === "ArrowRight") c = o[s + 1];
+			}
+			if (e.key === "ArrowRight") c = o[s + 1];
 			else if (e.key === "ArrowLeft") c = o[s - 1];
 			else if (e.key === "ArrowDown") c = o[s + n];
 			else if (e.key === "ArrowUp") c = o[s - n];
@@ -134,84 +142,85 @@ m(E, {
 			else return;
 			e.preventDefault(), c?.focus();
 		}
-		function re() {
-			if (m.value) return;
-			r.value = !0, E.setView("day"), D.value = "day";
-			let e = a.value;
-			e && (E.goTo(e.year, e.month), O.value = E.displayYear(), k.value = E.displayMonth()), N.update(), P = N.startAutoUpdate?.() ?? null;
+		function X() {
+			if (u.value) return;
+			s.value = !0, g.setView("day"), b.value = "day";
+			let e = l.value;
+			e && (g.goTo(e.year, e.month), E.value = g.displayYear(), D.value = g.displayMonth()), j.update(), M = j.startAutoUpdate?.() ?? null;
 		}
 		function Z() {
-			r.value = !1, E.setView("day"), D.value = "day", P?.(), P = null;
+			s.value = !1, g.setView("day"), b.value = "day", M?.(), M = null;
 		}
 		function Q() {
-			r.value ? Z() : re();
+			s.value ? Z() : X();
 		}
-		function ie(e) {
-			m.value || (e.key === "Enter" || e.key === " " ? (e.preventDefault(), Q()) : e.key === "Escape" && r.value && (e.preventDefault(), Z()));
+		function te(e) {
+			u.value || (e.key === "Enter" || e.key === " " ? (e.preventDefault(), Q()) : e.key === "Escape" && s.value && (e.preventDefault(), Z()));
 		}
-		function ae(e) {
+		function ne(e) {
 			e.key === "Escape" && (e.preventDefault(), Z());
 		}
 		function $(e) {
-			r.value && (e.composedPath().includes(t) || Z());
+			s.value && (e.composedPath().includes(t) || Z());
 		}
-		return v(() => (document.addEventListener("pointerdown", $, { capture: !0 }), () => {
-			document.removeEventListener("pointerdown", $, { capture: !0 }), P?.(), P = null;
-		})), ee({ attr: { open: () => r.value ? !0 : void 0 } }), g`
+		return y(() => (document.addEventListener("pointerdown", $, { capture: !0 }), () => {
+			document.removeEventListener("pointerdown", $, { capture: !0 }), M?.(), M = null;
+		})), h({ attr: { open: () => s.value ? !0 : void 0 } }), v`
       <!-- Trigger: ore-input in readonly display mode -->
       <ore-input
         class="trigger"
-        ref="${j}"
+        ref="${k}"
         readonly
-        tabindex="${H}"
+        tabindex="${V}"
         role="combobox"
         aria-haspopup="dialog"
-        aria-controls="${A}"
-        :aria-expanded="${() => String(r.value)}"
-        :aria-disabled="${() => m.value ? "true" : null}"
-        :value="${() => ne.value}"
-        :label="${() => e.label.value ?? ""}"
-        :placeholder="${() => e.placeholder.value ?? ""}"
-        :label-placement="${() => e["label-placement"].value ?? "inset"}"
-        :color="${() => e.color?.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 ?? ""}"
-        ?disabled="${() => m.value ? !0 : void 0}"
+        aria-controls="${O}"
+        aria-expanded="${() => String(s.value)}"
+        aria-disabled="${() => u.value ? "true" : null}"
+        value="${() => N.value}"
+        label="${() => e.label.value ?? ""}"
+        placeholder="${() => e.placeholder.value ?? ""}"
+        label-placement="${() => e["label-placement"].value ?? "inset"}"
+        color="${() => e.color?.value ?? void 0}"
+        size="${() => e.size?.value ?? void 0}"
+        variant="${() => e.variant?.value ?? void 0}"
+        rounded="${() => e.rounded?.value ?? void 0}"
+        helper="${() => e.helper.value ?? ""}"
+        error="${() => e.error.value ?? ""}"
+        ?disabled="${() => u.value ? !0 : void 0}"
         ?required="${() => e.required.value ? !0 : void 0}"
         ?fullwidth="${() => e.fullwidth.value ? !0 : void 0}"
         ?success="${() => e.success.value}"
         @click="${Q}"
-        @keydown="${ie}">
+        @keydown="${te}">
         <ore-icon slot="suffix" name="calendar" size="16" stroke-width="1.75" aria-hidden="true"></ore-icon>
       </ore-input>
 
       <!-- Calendar popup -->
       <div
         class="calendar"
-        ref="${M}"
-        id="${A}"
+        ref="${A}"
+        id="${O}"
         role="dialog"
         aria-modal="true"
-        :aria-label="${() => `Choose date — ${L.value}`}"
-        ?data-open="${r}"
-        @keydown="${ae}">
+        aria-label="${() => `Choose date — ${I.value}`}"
+        ?data-open="${s}"
+        @keydown="${ne}">
         <!-- Calendar header -->
         <div class="cal-header" part="header">
-          <button class="nav-btn" type="button" aria-label="Previous" @click="${U}">
+          <button class="nav-btn" type="button" aria-label="Previous" @click="${H}">
             <ore-icon name="chevron-left" size="16" stroke-width="2" aria-hidden="true"></ore-icon>
           </button>
           <button
             class="cal-label-btn"
             type="button"
-            :aria-label="${() => `Switch to ${D.value === "day" ? "month" : D.value === "month" ? "year" : "day"} view`}"
-            @click="${G}">
-            <span class="cal-label-month">${F}</span><span class="cal-label-sep" aria-hidden="true">/</span
-            ><span class="cal-label-year">${I}</span>
+            aria-label="${() => `Switch to ${b.value === "day" ? "month" : b.value === "month" ? "year" : "day"} view`}"
+            @click="${W}">
+            <span class="cal-label-month">${P}</span>
+            <span class="cal-label-sep" aria-hidden="true">/</span>
+            <span class="cal-label-year">${F}</span>
           </button>
-          <button class="nav-btn" type="button" aria-label="Next" @click="${W}">
+          <button class="nav-btn" type="button" aria-label="Next" @click="${U}">
             <ore-icon name="chevron-right" size="16" stroke-width="2" aria-hidden="true"></ore-icon>
           </button>
         </div>
@@ -221,33 +230,39 @@ m(E, {
           class="cal-grid cal-grid-days"
           role="grid"
           part="grid"
-          :aria-label="${() => L.value}"
-          ?hidden="${() => D.value !== "day"}">
+          aria-label="${() => I.value}"
+          ?hidden="${() => b.value !== "day"}">
           <div role="row" class="cal-grid-row">
-            ${() => V.value.map((e) => g`<div class="cal-cell cal-cell-head" role="columnheader" aria-label="${e}">${e}</div>`)}
+            ${() => B.value.map((e) => v`
+                  <div class="cal-cell cal-cell-head" role="columnheader" aria-label="${e}">${e}</div>
+                `)}
           </div>
           ${() => {
-			let e = R.value, t = [];
+			let e = L.value, t = [];
 			for (let n = 0; n < e.length; n += 7) t.push(e.slice(n, n + 7));
-			return t.map((e) => g`<div role="row" class="cal-grid-row">
-                  ${e.map((e) => g`<div
+			return t.map((e) => v`
+                <div role="row" class="cal-grid-row">
+                  ${e.map((e) => v`
+                      <div
                         class="cal-cell cal-cell-day"
                         role="gridcell"
                         part="day"
-                        :aria-selected="${() => String(e.isSelected)}"
-                        :aria-disabled="${() => String(e.isDisabled)}"
-                        :aria-current="${() => e.isToday ? "date" : null}"
+                        aria-selected="${() => String(e.isSelected)}"
+                        aria-disabled="${() => String(e.isDisabled)}"
+                        aria-current="${() => e.isToday ? "date" : null}"
                         ?data-selected="${() => e.isSelected}"
                         ?data-today="${() => e.isToday}"
                         ?data-outside="${() => e.isOutsideMonth}"
                         ?data-disabled="${() => e.isDisabled}"
                         data-iso="${e.iso}"
                         tabindex="${() => e.isDisabled ? "-1" : "0"}"
-                        @click="${() => J(e.iso)}"
-                        @keydown="${Y}">
+                        @click="${() => q(e.iso)}"
+                        @keydown="${J}">
                         ${String(e.day)}
-                      </div>`)}
-                </div>`);
+                      </div>
+                    `)}
+                </div>
+              `);
 		}}
         </div>
 
@@ -255,29 +270,33 @@ m(E, {
         <div
           class="cal-grid cal-grid-months"
           role="grid"
-          :aria-label="${() => I.value}"
-          ?hidden="${() => D.value !== "month"}">
+          aria-label="${() => F.value}"
+          ?hidden="${() => b.value !== "month"}">
           ${() => {
-			let e = z.value, t = [];
+			let e = R.value, t = [];
 			for (let n = 0; n < e.length; n += 4) t.push(e.slice(n, n + 4));
-			return t.map((e) => g`<div role="row">
-                  ${e.map((e) => g`<div
+			return t.map((e) => v`
+                <div role="row">
+                  ${e.map((e) => v`
+                      <div
                         class="cal-cell cal-cell-month"
                         role="gridcell"
-                        :aria-selected="${() => String(e.isSelected)}"
-                        :aria-disabled="${() => String(e.isDisabled)}"
+                        aria-selected="${() => String(e.isSelected)}"
+                        aria-disabled="${() => String(e.isDisabled)}"
                         ?data-selected="${() => e.isSelected}"
                         ?data-disabled="${() => e.isDisabled}"
                         tabindex="${() => e.isDisabled ? "-1" : "0"}"
                         @click="${() => {
-				e.isDisabled || K(e.month);
+				e.isDisabled || G(e.month);
 			}}"
-                        @keydown="${(t) => X(t, ".cal-cell-month", 4, () => {
-				e.isDisabled || K(e.month);
+                        @keydown="${(t) => Y(t, ".cal-cell-month", 4, () => {
+				e.isDisabled || G(e.month);
 			})}">
                         ${e.shortLabel}
-                      </div>`)}
-                </div>`);
+                      </div>
+                    `)}
+                </div>
+              `);
 		}}
         </div>
 
@@ -286,28 +305,32 @@ m(E, {
           class="cal-grid cal-grid-years"
           role="grid"
           aria-label="Select year"
-          ?hidden="${() => D.value !== "year"}">
+          ?hidden="${() => b.value !== "year"}">
           ${() => {
-			let e = B.value, t = [];
+			let e = z.value, t = [];
 			for (let n = 0; n < e.length; n += 4) t.push(e.slice(n, n + 4));
-			return t.map((e) => g`<div role="row">
-                  ${e.map((e) => g`<div
+			return t.map((e) => v`
+                <div role="row">
+                  ${e.map((e) => v`
+                      <div
                         class="cal-cell cal-cell-year"
                         role="gridcell"
-                        :aria-selected="${() => String(e.isSelected)}"
-                        :aria-disabled="${() => String(e.isDisabled)}"
+                        aria-selected="${() => String(e.isSelected)}"
+                        aria-disabled="${() => String(e.isDisabled)}"
                         ?data-selected="${() => e.isSelected}"
                         ?data-disabled="${() => e.isDisabled}"
                         tabindex="${() => e.isDisabled ? "-1" : "0"}"
                         @click="${() => {
-				e.isDisabled || q(e.year);
+				e.isDisabled || K(e.year);
 			}}"
-                        @keydown="${(t) => X(t, ".cal-cell-year", 4, () => {
-				e.isDisabled || q(e.year);
+                        @keydown="${(t) => Y(t, ".cal-cell-year", 4, () => {
+				e.isDisabled || K(e.year);
 			})}">
                         ${String(e.year)}
-                      </div>`)}
-                </div>`);
+                      </div>
+                    `)}
+                </div>
+              `);
 		}}
         </div>
       </div>
@@ -317,7 +340,7 @@ m(E, {
 	styles: [
 		t,
 		e,
-		p
+		m
 	]
 });
 //#endregion