@spinjs/components 0.0.0-stage → 0.1.0-preview.2

package/dist/date-input/date-input.events.d.ts

@@ -0,0 +1,37 @@
+import { DateValue } from "./date-input.state.js";
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface DateInputEvents {
+  "VALUE.SET": {
+    value: DateValue | null | string;
+  };
+  "VALUE.CLEAR": {};
+  "HOUR_CYCLE.SET": {
+    hourCycle: 12 | 24;
+  };
+  "SEGMENT.FOCUS": {
+    index: number;
+  };
+  "SEGMENT.BLUR": {};
+  "SEGMENT.INPUT": {
+    index: number;
+    input: string;
+  };
+  "SEGMENT.ADJUST": {
+    index: number;
+    amount: number;
+  };
+  "SEGMENT.ARROW_LEFT": {};
+  "SEGMENT.ARROW_RIGHT": {};
+  "SEGMENT.BACKSPACE": {};
+  "SEGMENT.HOME": {};
+  "SEGMENT.END": {};
+  "SEGMENT.PASTE": {
+    value: string;
+  };
+}
+export type DateInputEvent = EventUnion<DateInputEvents>;
+export type DateInputValueChange = {
+  readonly value: DateValue | null;
+  readonly valueAsString: string;
+};
+//# sourceMappingURL=date-input.events.d.ts.map

package/dist/date-input/date-input.events.js

@@ -0,0 +1 @@
+export {};

package/dist/date-input/date-input.machine.d.ts

@@ -0,0 +1,6 @@
+import { DateInputArgs, DateInputContext, DateInputState } from "./date-input.state.js";
+import { DateInputEvents } from "./date-input.events.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function dateInput(args?: DateInputArgs, authored?: (name: string) => boolean): Machine<DateInputContext, DateInputEvents, DateInputState>;
+export type { DateInputState };
+//# sourceMappingURL=date-input.machine.d.ts.map

package/dist/date-input/date-input.machine.js

@@ -0,0 +1,61 @@
+import { clearEnteredKeys, initial } from "./date-input.state.js";
+import { adjustSegment, arrowLeft, arrowRight, backspaceClear, backspaceEmpty, backspacePrev, blurSegment, clearValue, endSegment, focusSegment, homeSegment, inputSegment, isSameSegmentFocus, pasteSegment, setHourCycle, setValue } from "./date-input.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/date-input/date-input.machine.ts
+/** Date-input machine: the field values, the focused segment, and the keys typed into it. */
+function dateInput(args = {}, authored = () => false) {
+	return createMachine({
+		id: "date-input",
+		initial: "idle",
+		context: initial(args, authored),
+		on: {
+			"VALUE.SET": { assign: setValue },
+			"VALUE.CLEAR": { assign: clearValue },
+			"HOUR_CYCLE.SET": { assign: setHourCycle }
+		},
+		states: {
+			idle: { on: { "SEGMENT.FOCUS": {
+				target: "focused",
+				assign: focusSegment
+			} } },
+			focused: { on: {
+				"SEGMENT.FOCUS": [{
+					cond: isSameSegmentFocus,
+					assign: focusSegment
+				}, { assign: [focusSegment, clearEnteredKeys] }],
+				"SEGMENT.BLUR": {
+					target: "idle",
+					assign: blurSegment
+				},
+				"SEGMENT.INPUT": { assign: inputSegment },
+				"SEGMENT.ADJUST": { assign: [adjustSegment, clearEnteredKeys] },
+				"SEGMENT.ARROW_LEFT": { assign: [arrowLeft, clearEnteredKeys] },
+				"SEGMENT.ARROW_RIGHT": { assign: [arrowRight, clearEnteredKeys] },
+				"SEGMENT.BACKSPACE": [{
+					cond: backspaceEmpty,
+					assign: [backspacePrev, clearEnteredKeys]
+				}, { assign: backspaceClear }],
+				"SEGMENT.HOME": { assign: [homeSegment, clearEnteredKeys] },
+				"SEGMENT.END": { assign: [endSegment, clearEnteredKeys] },
+				"SEGMENT.PASTE": { assign: [pasteSegment, clearEnteredKeys] }
+			} }
+		},
+		fields: {
+			value: { event: "VALUE.SET" },
+			granularity: {},
+			hourCycle: {},
+			min: {},
+			max: {},
+			dir: {},
+			disabled: {},
+			readOnly: {},
+			invalid: {},
+			required: {},
+			name: {},
+			form: {}
+		}
+	});
+}
+export { dateInput };
+
+//# sourceMappingURL=date-input.machine.js.map

package/dist/date-input/date-input.presentation.d.ts

@@ -0,0 +1,133 @@
+import { DateInputArgs, DateInputContext, DateInputField, DateInputState, DateValue } from "./date-input.state.js";
+import { DateInputEvents, DateInputValueChange } from "./date-input.events.js";
+import { ApiOf, ViewFor } from "@spinjs/runtime";
+/** One rendered segment: a field the user edits, or a literal between them. */
+export interface DateSegmentView {
+  readonly index: number;
+  readonly fieldIndex: number;
+  readonly field: DateInputField | null;
+  readonly text: string;
+  readonly placeholder: boolean;
+}
+export declare const segmentText: (field: DateInputField, value: number | null, hourCycle: 12 | 24) => string;
+type ScopeLike = ViewFor<DateInputContext, DateInputEvents, DateInputState>;
+/** The component's public state: the names the markup may key on. */
+export declare const def: {
+  name: string;
+  machine: (args: DateInputArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<DateInputContext, DateInputEvents, DateInputState>;
+  start: "idle";
+  settled: ({ before, after, focus }: {
+    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly before: {
+      readonly context: DateInputContext;
+      readonly state: DateInputState;
+    };
+    readonly after: {
+      readonly context: DateInputContext;
+      readonly state: DateInputState;
+    };
+    readonly props: Record<string, unknown>;
+    readonly root: () => Element;
+    readonly id: (part: string, slot?: unknown) => string;
+    readonly focus: (part: string, slot?: unknown) => void;
+    readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+    readonly send: (event: import("@spinjs/runtime").AnyEvent) => void;
+  }) => void;
+  parts: {
+    segment: {
+      attrs: (scope: ScopeLike, arg?: unknown) => {};
+    };
+    root: {
+      attrs: (scope: ScopeLike) => {
+        dir: "ltr" | "rtl";
+      };
+    };
+    label: {
+      attrs: (scope: ScopeLike) => {
+        id: string;
+        htmlFor: string;
+      };
+    };
+    control: {
+      attrs: (scope: ScopeLike) => {
+        role: string;
+      };
+    };
+    hiddenInput: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        type: string;
+        name: string | undefined;
+        form: string | undefined;
+        disabled: boolean;
+        value: string;
+      };
+    };
+  };
+  commands: {
+    focus: {
+      view: ({ focus }: {
+        readonly args: readonly unknown[];
+        readonly id: (part: string, slot?: unknown) => string;
+        readonly focus: (part: string, slot?: unknown) => void;
+        readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+        readonly root: () => Element;
+      }) => void;
+    };
+    setValue: {
+      event: ([value]: [value: DateValue | null], context: DateInputContext) => {
+        type: "VALUE.SET";
+        value: DateValue | null;
+      };
+    };
+    clearValue: {
+      event: () => {
+        type: "VALUE.CLEAR";
+      };
+    };
+  };
+  readers: {
+    value: {
+      read: (context: DateInputContext) => DateValue | null;
+    };
+    valueAsString: {
+      read: (context: DateInputContext) => string;
+    };
+    focused: {
+      read: (_context: DateInputContext, state: DateInputState) => state is "focused";
+    };
+    activeSegment: {
+      read: (context: DateInputContext, state: DateInputState) => number;
+    };
+    disabled: {
+      read: (context: DateInputContext) => boolean;
+    };
+    readOnly: {
+      read: (context: DateInputContext) => boolean;
+    };
+    invalid: {
+      read: (context: DateInputContext) => boolean;
+    };
+  };
+  methods: {
+    getSegments: {
+      call: (context: DateInputContext, _state: DateInputState, _args: readonly unknown[], props: Record<string, unknown>, id: (part: string, slot?: unknown) => string) => DateSegmentView[];
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: DateInputContext) => string[];
+      detail: (_watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: DateInputContext) => {
+        value: DateValue | null;
+        valueAsString: string;
+      };
+    };
+  };
+};
+export type DateInputApi = ApiOf<typeof def>;
+export declare const dateInput: import("@spinjs/runtime").DefinedComponent<DateInputApi, DateInputArgs>;
+export type { DateInputValueChange, DateValue };
+//# sourceMappingURL=date-input.presentation.d.ts.map

package/dist/date-input/date-input.presentation.js

@@ -0,0 +1,328 @@
+import { FIELD_LIMITS, clampValue as clampValue$1, daysInMonth, segmentFields, valueAsString } from "./date-input.state.js";
+import { dateInput as dateInput$1 } from "./date-input.machine.js";
+import { ariaDisabled, ariaInvalid, ariaLabelledBy, ariaReadOnly, defineComponent, isRecord, sliderThumb } from "@spinjs/runtime";
+// src/date-input/date-input.presentation.ts
+const FIELD_LABELS = {
+	year: "Year",
+	month: "Month",
+	day: "Day",
+	hour: "Hour",
+	minute: "Minute",
+	second: "Second",
+	dayPeriod: "AM/PM"
+};
+const segmentText = (field, value, hourCycle) => {
+	if (value === null) return placeholderFor(field);
+	switch (field) {
+		case "year": return `${value}`.padStart(4, "0");
+		case "dayPeriod": return value === 1 ? "PM" : "AM";
+		case "hour": return hourCycle === 12 ? `${value}` : value < 10 ? `0${value}` : `${value}`;
+		default: return value < 10 ? `0${value}` : `${value}`;
+	}
+};
+const placeholderFor = (field) => {
+	switch (field) {
+		case "year": return "yyyy";
+		case "month": return "mm";
+		case "day": return "dd";
+		case "hour": return "hh";
+		case "minute": return "mm";
+		case "second": return "ss";
+		case "dayPeriod": return "AM/PM";
+	}
+};
+const partToField = (type, hourCycle) => {
+	switch (type) {
+		case "year": return "year";
+		case "month": return "month";
+		case "day": return "day";
+		case "hour": return "hour";
+		case "minute": return "minute";
+		case "second": return "second";
+		case "dayPeriod": return hourCycle === 12 ? "dayPeriod" : null;
+		default: return null;
+	}
+};
+/** The formatter is the locale's segment order: format a known date and
+* read the parts back. January 22 gives every part a distinct shape, so
+* each part maps to exactly one field. */
+const orderFields = (granularity, hourCycle) => {
+	const fields = segmentFields(granularity);
+	try {
+		const probe = new Date(Date.UTC(2024, 0, 22, 13, 44, 55));
+		const parts = new Intl.DateTimeFormat("en-US", {
+			year: "numeric",
+			month: "numeric",
+			day: "numeric",
+			...fields.includes("hour") ? {
+				hour: "numeric",
+				hour12: hourCycle === 12
+			} : {},
+			...fields.includes("minute") ? { minute: "2-digit" } : {},
+			...fields.includes("second") ? { second: "2-digit" } : {},
+			timeZone: "UTC"
+		}).formatToParts(probe);
+		const seen = [];
+		for (const part of parts) {
+			const field = partToField(part.type, hourCycle);
+			if (field !== null && fields.includes(field) && !seen.includes(field)) seen.push(field);
+		}
+		for (const field of fields) if (!seen.includes(field)) seen.push(field);
+		return seen;
+	} catch {
+		return fields;
+	}
+};
+const handlersByBridge = /* @__PURE__ */ new WeakMap();
+const handlersFor = (scope, index) => {
+	let byIndex = handlersByBridge.get(scope.id);
+	if (byIndex === void 0) {
+		byIndex = /* @__PURE__ */ new Map();
+		handlersByBridge.set(scope.id, byIndex);
+	}
+	const hit = byIndex.get(index);
+	if (hit !== void 0) return hit;
+	const made = {
+		onFocus: () => scope.send({
+			type: "SEGMENT.FOCUS",
+			index
+		}),
+		onBlur: (event) => {
+			const target = event.relatedTarget;
+			if (target instanceof Element && scope.root().contains(target)) return;
+			scope.send({ type: "SEGMENT.BLUR" });
+		},
+		onKeyDown: (event) => {
+			if (event.defaultPrevented) return;
+			if (event.isComposing === true || event.keyCode === 229) return;
+			if (event.ctrlKey || event.altKey || event.metaKey) return;
+			const key = event.key;
+			if (key.length === 1) return;
+			switch (key) {
+				case "ArrowUp":
+					event.preventDefault();
+					scope.send({
+						type: "SEGMENT.ADJUST",
+						index,
+						amount: 1
+					});
+					break;
+				case "ArrowDown":
+					event.preventDefault();
+					scope.send({
+						type: "SEGMENT.ADJUST",
+						index,
+						amount: -1
+					});
+					break;
+				case "ArrowLeft":
+					event.preventDefault();
+					scope.send({ type: scope.context.dir === "rtl" ? "SEGMENT.ARROW_RIGHT" : "SEGMENT.ARROW_LEFT" });
+					break;
+				case "ArrowRight":
+					event.preventDefault();
+					scope.send({ type: scope.context.dir === "rtl" ? "SEGMENT.ARROW_LEFT" : "SEGMENT.ARROW_RIGHT" });
+					break;
+				case "Backspace":
+					event.preventDefault();
+					scope.send({ type: "SEGMENT.BACKSPACE" });
+					break;
+				case "Home":
+					event.preventDefault();
+					scope.send({ type: "SEGMENT.HOME" });
+					break;
+				case "End":
+					event.preventDefault();
+					scope.send({ type: "SEGMENT.END" });
+			}
+		},
+		onBeforeInput: (event) => {
+			const data = "data" in event ? event.data : void 0;
+			if (typeof data !== "string" || data.length === 0) return;
+			event.preventDefault();
+			scope.send({
+				type: "SEGMENT.INPUT",
+				index,
+				input: data
+			});
+		},
+		onPaste: (event) => {
+			event.preventDefault();
+			const text = event.clipboardData?.getData("text/plain")?.trim() ?? "";
+			if (text.length > 0) scope.send({
+				type: "SEGMENT.PASTE",
+				value: text
+			});
+		}
+	};
+	byIndex.set(index, made);
+	return made;
+};
+const isDateValue = (raw) => {
+	if (!isRecord(raw)) return false;
+	return [
+		"year",
+		"month",
+		"day",
+		"hour",
+		"minute",
+		"second"
+	].every((key) => {
+		const field = raw[key];
+		return typeof field === "number" && Number.isFinite(field);
+	});
+};
+const isIdFn = (id) => typeof id === "function";
+const fallbackId = () => "";
+const segmentIndexOf = (arg) => typeof arg === "number" && Number.isInteger(arg) && arg >= 0 ? arg : -1;
+/** Stable holders the for-rows close over: the text effect a row compiles
+* reads `row.text` off the render-time object, so a fresh object per read
+* would freeze every segment at its first text. Rewritten in place; the
+* array is fresh each read so the `for` still syncs and bumps the rows. */
+const holdersByBridge = /* @__PURE__ */ new WeakMap();
+const holdersOf = (id) => {
+	let holders = holdersByBridge.get(id);
+	if (holders === void 0) {
+		holders = /* @__PURE__ */ new Map();
+		holdersByBridge.set(id, holders);
+	}
+	return holders;
+};
+/** The component's public state: the names the markup may key on. */
+const def = {
+	name: "date-input",
+	machine: (args, authored) => dateInput$1(args, authored),
+	start: "idle",
+	settled: ({ before, after, focus }) => {
+		const was = before.context.activeSegment;
+		const at = after.context.activeSegment;
+		if (at !== was && at >= 0) focus("segment", at);
+	},
+	parts: {
+		segment: { attrs: (scope, arg) => {
+			const ctx = scope.context;
+			const index = segmentIndexOf(arg);
+			const granularity = ctx.granularity;
+			const hourCycle = ctx.hourCycle;
+			const field = orderFields(granularity, hourCycle)[index];
+			if (field === void 0) return {};
+			const value = ctx.fields[field];
+			const limits = FIELD_LIMITS[field];
+			const maxDay = field === "day" ? daysInMonth(ctx.fields.year, ctx.fields.month) : limits.max;
+			const editable = !scope.context.disabled && !scope.context.readOnly;
+			return {
+				id: scope.id("segment", index),
+				role: "spinbutton",
+				tabIndex: scope.context.disabled ? void 0 : 0,
+				"aria-label": FIELD_LABELS[field],
+				...sliderThumb({
+					now: value ?? void 0,
+					text: value === null ? placeholderFor(field) : segmentText(field, value, hourCycle),
+					min: limits.min,
+					max: field === "day" ? maxDay : limits.max
+				}),
+				...ariaInvalid(scope.context.invalid === true ? true : void 0),
+				...ariaReadOnly(scope.context.readOnly === true ? true : void 0),
+				...ariaDisabled(scope.context.disabled === true ? true : void 0),
+				inputMode: field === "dayPeriod" ? void 0 : "numeric",
+				contentEditable: editable ? "true" : void 0,
+				spellcheck: editable ? "false" : void 0,
+				...handlersFor(scope, index)
+			};
+		} },
+		root: { attrs: (scope) => ({ dir: scope.context.dir }) },
+		label: { attrs: (scope) => ({
+			id: scope.id("label"),
+			htmlFor: scope.id("segment", 0)
+		}) },
+		control: { attrs: (scope) => ({
+			role: "group",
+			...ariaLabelledBy(scope, { part: "label" })
+		}) },
+		hiddenInput: {
+			id: "hidden",
+			attrs: (scope) => {
+				const ctx = scope.context;
+				return {
+					type: "hidden",
+					name: ctx.name,
+					form: ctx.form,
+					disabled: ctx.disabled,
+					value: valueAsString(ctx.value)
+				};
+			}
+		}
+	},
+	commands: {
+		focus: { view: ({ focus }) => focus("segment", 0) },
+		setValue: { event: ([value], context) => {
+			const shaped = isDateValue(value) ? value : null;
+			return {
+				type: "VALUE.SET",
+				value: clampValue$1(shaped, context.min, context.max)
+			};
+		} },
+		clearValue: { event: () => ({ type: "VALUE.CLEAR" }) }
+	},
+	readers: {
+		value: { read: (context) => context.value },
+		valueAsString: { read: (context) => valueAsString(context.value) },
+		focused: { read: (_context, state) => state === "focused" },
+		activeSegment: { read: (context, state) => state === "focused" ? context.activeSegment : -1 },
+		disabled: { read: (context) => context.disabled },
+		readOnly: { read: (context) => context.readOnly },
+		invalid: { read: (context) => context.invalid === true }
+	},
+	methods: { getSegments: { call: (context, _state, _args, props, id) => {
+		const ctx = context;
+		const granularity = ctx.granularity;
+		const hourCycle = ctx.hourCycle;
+		const ordered = orderFields(granularity, hourCycle);
+		const holders = holdersOf(isIdFn(id) ? id : fallbackId);
+		const views = [];
+		let fieldIndex = 0;
+		for (const field of ordered) {
+			if (views.length > 0) views.push({
+				index: views.length,
+				fieldIndex: -1,
+				field: null,
+				text: "/",
+				placeholder: true
+			});
+			const value = ctx.fields[field];
+			const at = views.length;
+			const holder = holders.get(at) ?? {
+				text: "",
+				placeholder: true
+			};
+			holder.text = segmentText(field, value, hourCycle);
+			holder.placeholder = value === null;
+			holders.set(at, holder);
+			views.push({
+				index: at,
+				fieldIndex,
+				field,
+				get text() {
+					return holders.get(at)?.text ?? "";
+				},
+				get placeholder() {
+					return holders.get(at)?.placeholder ?? true;
+				}
+			});
+			fieldIndex += 1;
+		}
+		return views;
+	} } },
+	events: { "value-change": {
+		prop: "onValueChange",
+		watch: (context) => [valueAsString(context.value)],
+		detail: (_watched, _event, _props, context) => ({
+			value: context.value,
+			valueAsString: valueAsString(context.value)
+		})
+	} }
+};
+const dateInput = defineComponent(def);
+export { dateInput, def, segmentText };
+
+//# sourceMappingURL=date-input.presentation.js.map

package/dist/date-input/date-input.state.d.ts

@@ -0,0 +1,77 @@
+import { DateInputEvent } from "./date-input.events.js";
+export type DateInputField = "year" | "month" | "day" | "hour" | "minute" | "second" | "dayPeriod";
+export interface DateFieldLimits {
+  readonly min: number;
+  readonly max: number;
+}
+export declare const FIELD_LIMITS: Readonly<Record<DateInputField, DateFieldLimits>>;
+export declare function isLeapYear(year: number): boolean;
+export declare function daysInMonth(year: number | null, month: number | null): number;
+export declare function clampField(field: DateInputField, value: number, year: number | null, month: number | null): number;
+export interface DateFields {
+  year: number | null;
+  month: number | null;
+  day: number | null;
+  hour: number | null;
+  minute: number | null;
+  second: number | null;
+  dayPeriod: number | null;
+}
+export declare const emptyFields: () => DateFields;
+export type DateGranularity = "day" | "hour" | "minute" | "second";
+export interface DateValue {
+  readonly year: number;
+  readonly month: number;
+  readonly day: number;
+  readonly hour: number;
+  readonly minute: number;
+  readonly second: number;
+}
+export interface DateInputContext {
+  value: DateValue | null;
+  fields: DateFields;
+  activeSegment: number;
+  enteredKeys: string;
+  granularity: DateGranularity;
+  hourCycle: 12 | 24;
+  min: string | null;
+  max: string | null;
+  dir: "ltr" | "rtl";
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean | undefined;
+  required: boolean;
+  name: string | undefined;
+  form: string | undefined;
+}
+export type DateInputState = "idle" | "focused";
+export interface DateInputArgs {
+  value?: string;
+  granularity?: string;
+  hourCycle?: number;
+  min?: string;
+  max?: string;
+  defaultMax?: string;
+  dir?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  name?: string;
+  form?: string;
+}
+export declare function initial(args: DateInputArgs, authored: (name: string) => boolean): DateInputContext;
+export declare function parseValue(raw: unknown): DateValue | null;
+export declare function segmentFields(granularity: DateGranularity): readonly DateInputField[];
+export declare function valueAsString(value: DateValue | null): string;
+export declare function fieldsToDate(fields: DateFields, hourCycle: 12 | 24): DateValue | null;
+export declare function dateToFields(value: DateValue | null, hourCycle: 12 | 24): DateFields;
+export declare function clampValue(value: DateValue | null, min: string | null, max: string | null): DateValue | null;
+export declare function fieldWidth(field: DateInputField): number;
+export declare function periodOf(input: string): number | null;
+export declare function commit(next: DateFields, ctx: DateInputContext): Partial<DateInputContext>;
+export declare function advance(next: DateFields, ctx: DateInputContext, index: number, fields: readonly DateInputField[]): Partial<DateInputContext>;
+export declare const setActiveSegment: (_ctx: DateInputContext, e: DateInputEvent) => Partial<DateInputContext>;
+export declare const clearEnteredKeys: () => Partial<DateInputContext>;
+export declare const setPrevSegment: (ctx: DateInputContext) => Partial<DateInputContext>;
+//# sourceMappingURL=date-input.state.d.ts.map