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

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

@@ -0,0 +1,260 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/date-input/date-input.state.ts
+const FIELD_LIMITS = {
+	year: {
+		min: 1,
+		max: 9999
+	},
+	month: {
+		min: 1,
+		max: 12
+	},
+	day: {
+		min: 1,
+		max: 31
+	},
+	hour: {
+		min: 1,
+		max: 12
+	},
+	minute: {
+		min: 0,
+		max: 59
+	},
+	second: {
+		min: 0,
+		max: 59
+	},
+	dayPeriod: {
+		min: 0,
+		max: 1
+	}
+};
+const MONTH_LENGTHS = [
+	31,
+	28,
+	31,
+	30,
+	31,
+	30,
+	31,
+	31,
+	30,
+	31,
+	30,
+	31
+];
+function isLeapYear(year) {
+	return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+}
+function daysInMonth(year, month) {
+	if (month === null || month < 1 || month > 12) return 31;
+	if (month !== 2) return MONTH_LENGTHS[month - 1] ?? 31;
+	if (year === null) return 29;
+	return isLeapYear(year) ? 29 : 28;
+}
+function clampField(field, value, year, month) {
+	if (field === "day") {
+		const max = daysInMonth(year, month);
+		return Math.min(Math.max(value, 1), max);
+	}
+	const limits = FIELD_LIMITS[field];
+	return Math.min(Math.max(value, limits.min), limits.max);
+}
+const emptyFields = () => ({
+	year: null,
+	month: null,
+	day: null,
+	hour: null,
+	minute: null,
+	second: null,
+	dayPeriod: null
+});
+const GRANULARITY_FIELDS = {
+	day: [
+		"month",
+		"day",
+		"year"
+	],
+	hour: [
+		"month",
+		"day",
+		"year",
+		"hour",
+		"dayPeriod"
+	],
+	minute: [
+		"month",
+		"day",
+		"year",
+		"hour",
+		"minute",
+		"dayPeriod"
+	],
+	second: [
+		"month",
+		"day",
+		"year",
+		"hour",
+		"minute",
+		"second",
+		"dayPeriod"
+	]
+};
+const isGranularity = (raw) => raw === "day" || raw === "hour" || raw === "minute" || raw === "second";
+const isHourCycle = (raw) => raw === 12 || raw === 24;
+const asIso = (raw) => typeof raw === "string" && raw.length > 0 ? raw : null;
+function initial(args, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const granularity = written("granularity") ? isGranularity(args.granularity) ? args.granularity : "day" : "day";
+	const hourCycle = written("hourCycle") ? isHourCycle(args.hourCycle) ? args.hourCycle : 12 : 12;
+	const min = written("min") ? asIso(args.min) : null;
+	const max = written("max") ? asIso(args.max) : null;
+	const value = written("value") ? clampValue(parseValue(args.value), min, max) : null;
+	return {
+		value,
+		fields: dateToFields(value, hourCycle),
+		activeSegment: -1,
+		enteredKeys: "",
+		granularity,
+		hourCycle,
+		min,
+		max,
+		dir: args.dir === "rtl" ? "rtl" : "ltr",
+		disabled: args.disabled === true,
+		readOnly: args.readOnly === true,
+		invalid: authored("invalid") ? args.invalid === true : void 0,
+		required: args.required === true,
+		name: typeof args.name === "string" && args.name.length > 0 ? args.name : void 0,
+		form: typeof args.form === "string" && args.form.length > 0 ? args.form : void 0
+	};
+}
+function parseValue(raw) {
+	if (typeof raw !== "string" || raw.length === 0) return null;
+	const time = Date.parse(raw);
+	if (Number.isNaN(time)) return null;
+	const at = new Date(time);
+	return {
+		year: at.getUTCFullYear(),
+		month: at.getUTCMonth() + 1,
+		day: at.getUTCDate(),
+		hour: 0,
+		minute: 0,
+		second: 0
+	};
+}
+function segmentFields(granularity) {
+	return GRANULARITY_FIELDS[granularity] ?? GRANULARITY_FIELDS["day"];
+}
+function valueAsString(value) {
+	if (value === null) return "";
+	const date = new Date(Date.UTC(value.year, value.month - 1, value.day, value.hour, value.minute, value.second));
+	if (Number.isNaN(date.getTime())) return "";
+	return date.toISOString().slice(0, 10);
+}
+function fieldsToDate(fields, hourCycle) {
+	const { year, month, day } = fields;
+	if (year === null || month === null || day === null) return null;
+	let hour = fields.hour ?? 0;
+	if (hourCycle === 12) {
+		if (fields.dayPeriod === 1) hour = hour === 12 ? 12 : hour + 12;
+		else hour = hour === 12 ? 0 : hour;
+	}
+	return {
+		year,
+		month,
+		day,
+		hour,
+		minute: fields.minute ?? 0,
+		second: fields.second ?? 0
+	};
+}
+function dateToFields(value, hourCycle) {
+	const fields = emptyFields();
+	if (value === null) return fields;
+	fields.year = value.year;
+	fields.month = value.month;
+	fields.day = value.day;
+	if (hourCycle === 12) {
+		const period = value.hour >= 12 ? 1 : 0;
+		fields.hour = value.hour % 12 === 0 ? 12 : value.hour % 12;
+		fields.dayPeriod = period;
+	} else fields.hour = value.hour;
+	fields.minute = value.minute;
+	fields.second = value.second;
+	return fields;
+}
+function boundDay(bound) {
+	if (bound === null || bound.length === 0) return null;
+	const time = Date.parse(bound);
+	return Number.isNaN(time) ? null : time;
+}
+function clampValue(value, min, max) {
+	if (value === null) return null;
+	const day = Date.parse(valueAsString(value));
+	const floor = boundDay(min);
+	if (floor !== null && day < floor) {
+		const at = new Date(floor);
+		return {
+			year: at.getUTCFullYear(),
+			month: at.getUTCMonth() + 1,
+			day: at.getUTCDate(),
+			hour: 0,
+			minute: 0,
+			second: 0
+		};
+	}
+	const ceiling = boundDay(max);
+	if (ceiling !== null && day > ceiling) {
+		const at = new Date(ceiling);
+		return {
+			year: at.getUTCFullYear(),
+			month: at.getUTCMonth() + 1,
+			day: at.getUTCDate(),
+			hour: 0,
+			minute: 0,
+			second: 0
+		};
+	}
+	return value;
+}
+function fieldWidth(field) {
+	switch (field) {
+		case "year": return 4;
+		case "dayPeriod": return 1;
+		default: return 2;
+	}
+}
+function periodOf(input) {
+	const letter = input.toLowerCase();
+	if (letter === "a") return 0;
+	if (letter === "p") return 1;
+	return null;
+}
+function commit(next, ctx) {
+	const value = clampValue(fieldsToDate(next, ctx.hourCycle), ctx.min, ctx.max);
+	if (value === null) return {
+		fields: next,
+		enteredKeys: ""
+	};
+	return {
+		fields: dateToFields(value, ctx.hourCycle),
+		value,
+		enteredKeys: ""
+	};
+}
+function advance(next, ctx, index, fields) {
+	return {
+		...commit(next, ctx),
+		activeSegment: Math.min(index + 1, fields.length - 1)
+	};
+}
+const setActiveSegment = (_ctx, e) => {
+	if (e.type !== "SEGMENT.FOCUS") return {};
+	return { activeSegment: e.index };
+};
+const clearEnteredKeys = () => ({ enteredKeys: "" });
+const setPrevSegment = (ctx) => ({ activeSegment: Math.max(0, ctx.activeSegment - 1) });
+export { FIELD_LIMITS, advance, clampField, clampValue, clearEnteredKeys, commit, dateToFields, daysInMonth, emptyFields, fieldWidth, fieldsToDate, initial, isLeapYear, parseValue, periodOf, segmentFields, setActiveSegment, setPrevSegment, valueAsString };
+
+//# sourceMappingURL=date-input.state.js.map

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

@@ -0,0 +1,22 @@
+import { DateInputContext } from "./date-input.state.js";
+import { DateInputEvents } from "./date-input.events.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type DateInputAssign<K extends keyof DateInputEvents = keyof DateInputEvents> = AssignFor<DateInputContext, DateInputEvents, K>;
+export declare const setValue: DateInputAssign<"VALUE.SET">;
+export declare const clearValue: DateInputAssign<"VALUE.CLEAR">;
+export declare const setHourCycle: DateInputAssign<"HOUR_CYCLE.SET">;
+export declare const focusSegment: DateInputAssign<"SEGMENT.FOCUS">;
+export declare const isSameSegmentFocus: GuardFor<DateInputContext, DateInputEvents>;
+export declare const blurSegment: DateInputAssign<"SEGMENT.BLUR">;
+export declare const inputSegment: DateInputAssign<"SEGMENT.INPUT">;
+export declare const adjustSegment: DateInputAssign<"SEGMENT.ADJUST">;
+export declare const arrowLeft: DateInputAssign<"SEGMENT.ARROW_LEFT">;
+export declare const arrowRight: DateInputAssign<"SEGMENT.ARROW_RIGHT">;
+export declare const backspaceEmpty: GuardFor<DateInputContext, DateInputEvents>;
+export declare const backspacePrev: DateInputAssign<"SEGMENT.BACKSPACE">;
+export declare const backspaceClear: DateInputAssign<"SEGMENT.BACKSPACE">;
+export declare const homeSegment: DateInputAssign<"SEGMENT.HOME">;
+export declare const endSegment: DateInputAssign<"SEGMENT.END">;
+export declare const pasteSegment: DateInputAssign<"SEGMENT.PASTE">;
+export {};
+//# sourceMappingURL=date-input.transitions.d.ts.map

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

@@ -0,0 +1,166 @@
+import { FIELD_LIMITS, advance, clampField, clampValue, commit, dateToFields, daysInMonth, emptyFields, fieldWidth, fieldsToDate, parseValue, periodOf, segmentFields, setActiveSegment, valueAsString } from "./date-input.state.js";
+// src/date-input/date-input.transitions.ts
+const setValue = (ctx, e) => {
+	const named = typeof e.value === "string" ? parseValue(e.value) : e.value === null ? null : e.value;
+	if (typeof e.value === "string" && valueAsString(ctx.value) === valueAsString(named)) return {};
+	const value = clampValue(named, ctx.min, ctx.max);
+	return {
+		value,
+		fields: dateToFields(value, ctx.hourCycle),
+		enteredKeys: ""
+	};
+};
+const clearValue = () => ({
+	value: null,
+	fields: emptyFields(),
+	enteredKeys: ""
+});
+const setHourCycle = (ctx, e) => ({
+	hourCycle: e.hourCycle,
+	fields: dateToFields(ctx.value, e.hourCycle)
+});
+const focusSegment = setActiveSegment;
+const isSameSegmentFocus = (ctx, e) => e.type === "SEGMENT.FOCUS" && e.index === ctx.activeSegment;
+const blurSegment = (ctx) => {
+	const value = clampValue(fieldsToDate(ctx.fields, ctx.hourCycle), ctx.min, ctx.max);
+	if (value === null) return {
+		activeSegment: -1,
+		enteredKeys: ""
+	};
+	return {
+		activeSegment: -1,
+		enteredKeys: "",
+		value,
+		fields: dateToFields(value, ctx.hourCycle)
+	};
+};
+const inputSegment = (ctx, e) => {
+	const fields = segmentFields(ctx.granularity);
+	const field = fields[e.index];
+	if (field === void 0) return {};
+	if (field === "dayPeriod") {
+		const period = periodOf(e.input);
+		if (period === null) return {};
+		return advance({
+			...ctx.fields,
+			dayPeriod: period
+		}, ctx, e.index, fields);
+	}
+	if (!/^[0-9]$/.test(e.input)) return {};
+	const width = fieldWidth(field);
+	const keys = `${ctx.enteredKeys}${e.input}`.slice(-width);
+	const numeric = Number.parseInt(keys, 10);
+	if (Number.isNaN(numeric)) return {};
+	const next = {
+		...ctx.fields,
+		[field]: clampField(field, numeric, ctx.fields.year, ctx.fields.month)
+	};
+	if (keys.length < width) return {
+		fields: next,
+		enteredKeys: keys
+	};
+	if (keys.length === width && keys.startsWith("0") && field !== "year") {
+		const short = Number.parseInt(keys.slice(1), 10);
+		if (!Number.isNaN(short)) return {
+			fields: {
+				...next,
+				[field]: short
+			},
+			enteredKeys: keys
+		};
+	}
+	return advance(next, ctx, e.index, fields);
+};
+const adjustSegment = (ctx, e) => {
+	const field = segmentFields(ctx.granularity)[e.index];
+	if (field === void 0) return {};
+	const limits = field === "day" ? {
+		min: 1,
+		max: daysInMonth(ctx.fields.year, ctx.fields.month)
+	} : FIELD_LIMITS[field];
+	const at = ctx.fields[field] ?? (e.amount > 0 ? limits.max : limits.min);
+	const span = limits.max - limits.min + 1;
+	const cycled = limits.min + ((at - limits.min + e.amount) % span + span) % span;
+	const next = {
+		...ctx.fields,
+		[field]: clampField(field, cycled, ctx.fields.year, ctx.fields.month)
+	};
+	return {
+		...commit(next, ctx),
+		enteredKeys: ""
+	};
+};
+const arrowLeft = (ctx) => ({
+	activeSegment: Math.max(0, ctx.activeSegment - 1),
+	enteredKeys: ""
+});
+const arrowRight = (ctx) => ({
+	activeSegment: Math.min(segmentFields(ctx.granularity).length - 1, ctx.activeSegment + 1),
+	enteredKeys: ""
+});
+const backspaceEmpty = (ctx) => {
+	if (ctx.enteredKeys !== "") return false;
+	const field = segmentFields(ctx.granularity)[ctx.activeSegment];
+	return field === void 0 || ctx.fields[field] === null;
+};
+const backspacePrev = (ctx) => ({
+	activeSegment: Math.max(0, ctx.activeSegment - 1),
+	enteredKeys: ""
+});
+const backspaceClear = (ctx) => {
+	const field = segmentFields(ctx.granularity)[ctx.activeSegment];
+	if (field === void 0) return {};
+	return {
+		...commit({
+			...ctx.fields,
+			[field]: null
+		}, ctx),
+		enteredKeys: ""
+	};
+};
+const homeSegment = (ctx) => {
+	const field = segmentFields(ctx.granularity)[ctx.activeSegment];
+	if (field === void 0) return {};
+	const value = field === "day" ? 1 : FIELD_LIMITS[field].min;
+	return {
+		...commit({
+			...ctx.fields,
+			[field]: clampField(field, value, ctx.fields.year, ctx.fields.month)
+		}, ctx),
+		enteredKeys: ""
+	};
+};
+const endSegment = (ctx) => {
+	const field = segmentFields(ctx.granularity)[ctx.activeSegment];
+	if (field === void 0) return {};
+	const value = field === "day" ? daysInMonth(ctx.fields.year, ctx.fields.month) : FIELD_LIMITS[field].max;
+	return {
+		...commit({
+			...ctx.fields,
+			[field]: clampField(field, value, ctx.fields.year, ctx.fields.month)
+		}, ctx),
+		enteredKeys: ""
+	};
+};
+const pasteSegment = (ctx, e) => {
+	const time = Date.parse(e.value);
+	if (Number.isNaN(time)) return {};
+	const at = new Date(time);
+	const value = {
+		year: at.getUTCFullYear(),
+		month: at.getUTCMonth() + 1,
+		day: at.getUTCDate(),
+		hour: 0,
+		minute: 0,
+		second: 0
+	};
+	const clamped = clampValue(value, ctx.min, ctx.max);
+	return {
+		value: clamped,
+		fields: dateToFields(clamped, ctx.hourCycle),
+		enteredKeys: ""
+	};
+};
+export { adjustSegment, arrowLeft, arrowRight, backspaceClear, backspaceEmpty, backspacePrev, blurSegment, clearValue, endSegment, focusSegment, homeSegment, inputSegment, isSameSegmentFocus, pasteSegment, setHourCycle, setValue };
+
+//# sourceMappingURL=date-input.transitions.js.map

package/dist/date-input/examples/basic.html

@@ -0,0 +1,18 @@
+<script lang="ts">
+import { dateInput } from "../date-input.presentation.js";
+
+const machine = dateInput({});
+</script>
+
+<div class="w-fit max-w-full" {...machine.getRootProps()}>
+  <label class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]} {...machine.getLabelProps()}>Date</label>
+  <div class={["flex h-7 items-center gap-1 rounded-md border border-solid border-border bg-surface px-2 text-sm text-text shadow-sm transition-colors duration-fast ease-decelerate", { "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]} {...machine.getControlProps()}>
+    <template for={machine.getSegments()} as={row} key={row.index}>
+      <span
+        class={["rounded-sm px-1 tabular-nums outline-none transition-colors duration-fast ease-decelerate", { "bg-primary text-on-primary": machine.activeSegment === row.fieldIndex, "text-text-muted": row.placeholder }]}
+        {...machine.getSegmentProps(row.fieldIndex)}
+      >{row.text}</span>
+    </template>
+  </div>
+  <input {...machine.getHiddenInputProps()} />
+</div>

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

@@ -0,0 +1,42 @@
+import { DatePickerValue, DatePickerView } from "./date-picker.state.js";
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface DatePickerValueChange {
+  readonly value: readonly DatePickerValue[];
+  readonly valueAsString: readonly string[];
+}
+export interface DatePickerFocusChange {
+  readonly focusedValue: DatePickerValue;
+  readonly view: DatePickerView;
+  readonly valueAsString: readonly string[];
+}
+export interface DatePickerViewChange {
+  readonly view: DatePickerView;
+}
+export interface DatePickerEvents {
+  "OPEN": {};
+  "CLOSE": {};
+  "CLOSE.OUTSIDE": {};
+  "VALUE.SET": {
+    value: readonly DatePickerValue[] | string;
+  };
+  "VALUE.CLEAR": {};
+  "FOCUS.SET": {
+    focusedValue: DatePickerValue | string;
+  };
+  "VIEW.SET": {
+    view: DatePickerView;
+  };
+  "CELL.CLICK": {
+    value: DatePickerValue;
+  };
+  "CELL.POINTER_MOVE": {
+    value: DatePickerValue;
+  };
+  "TABLE.POINTER_LEAVE": {};
+  "TABLE.ENTER": {
+    value: DatePickerValue;
+  };
+  "TABLE.ESCAPE": {};
+}
+export type DatePickerEvent = EventUnion<DatePickerEvents>;
+//# sourceMappingURL=date-picker.events.d.ts.map

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

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

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

@@ -0,0 +1,6 @@
+import { DatePickerArgs, DatePickerContext, DatePickerSelectionMode, DatePickerState, DatePickerValue, DatePickerView, daysOf, normalizeDays } from "./date-picker.state.js";
+import { DatePickerEvents } from "./date-picker.events.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function datePicker(args: DatePickerArgs | undefined, authored: (name: string) => boolean): Machine<DatePickerContext, DatePickerEvents, DatePickerState>;
+export { type DatePickerArgs, type DatePickerContext, type DatePickerEvents, type DatePickerSelectionMode, type DatePickerState, type DatePickerValue, type DatePickerView, daysOf, normalizeDays };
+//# sourceMappingURL=date-picker.machine.d.ts.map

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

@@ -0,0 +1,102 @@
+import { daysOf, initial, normalizeDays } from "./date-picker.state.js";
+import { clearHover, clearValue, drillIntoView, hoverRangeDay, isAboveDayView, isDayView, isMultiPicker, isRangePicker, isSelfClosingSelection, resetView, selectRangeDay, selectSingleDay, setFocusAboveDay, setFocusDay, setValue, setView, toggleMultiDay } from "./date-picker.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/date-picker/date-picker.machine.ts
+function datePicker(args = {}, authored) {
+	return createMachine({
+		id: "date-picker",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			value: { event: "VALUE.SET" },
+			focusedValue: { event: "FOCUS.SET" },
+			view: { event: "VIEW.SET" },
+			selectionMode: {},
+			numOfMonths: {},
+			min: {},
+			max: {},
+			closeOnSelect: {},
+			disabled: {},
+			readOnly: {},
+			invalid: {},
+			startOfWeek: {},
+			dir: {},
+			label: {},
+			locale: {},
+			placeholder: {},
+			format: {}
+		},
+		on: {
+			"VALUE.SET": { assign: (ctx, e) => setValue(ctx, e) },
+			"VALUE.CLEAR": { assign: clearValue },
+			"FOCUS.SET": [{
+				cond: isDayView,
+				assign: (ctx, e) => setFocusDay(ctx, e)
+			}, { assign: (ctx, e) => setFocusAboveDay(ctx, e) }],
+			"VIEW.SET": { assign: (ctx, e) => setView(ctx, e) }
+		},
+		states: {
+			idle: { on: { "OPEN": [{
+				target: "open",
+				assign: resetView
+			}] } },
+			focused: { on: { "OPEN": [{
+				target: "open",
+				assign: resetView
+			}] } },
+			open: { on: {
+				"CLOSE": [{ target: "focused" }],
+				"CLOSE.OUTSIDE": [{ target: "idle" }],
+				"CELL.CLICK": [
+					{
+						cond: isAboveDayView,
+						assign: (ctx, e) => drillIntoView(ctx, e)
+					},
+					{
+						cond: isRangePicker,
+						assign: (ctx, e) => selectRangeDay(ctx, e)
+					},
+					{
+						cond: isMultiPicker,
+						assign: (ctx, e) => toggleMultiDay(ctx, e)
+					},
+					{
+						cond: isSelfClosingSelection,
+						target: "focused",
+						assign: (ctx, e) => selectSingleDay(ctx, e)
+					},
+					{ assign: (ctx, e) => selectSingleDay(ctx, e) }
+				],
+				"CELL.POINTER_MOVE": [{
+					cond: isRangePicker,
+					assign: (ctx, e) => hoverRangeDay(ctx, e)
+				}],
+				"TABLE.POINTER_LEAVE": [{ assign: clearHover }],
+				"TABLE.ENTER": [
+					{
+						cond: isAboveDayView,
+						assign: (ctx, e) => drillIntoView(ctx, e)
+					},
+					{
+						cond: isRangePicker,
+						assign: (ctx, e) => selectRangeDay(ctx, e)
+					},
+					{
+						cond: isMultiPicker,
+						assign: (ctx, e) => toggleMultiDay(ctx, e)
+					},
+					{
+						cond: isSelfClosingSelection,
+						target: "focused",
+						assign: (ctx, e) => selectSingleDay(ctx, e)
+					},
+					{ assign: (ctx, e) => selectSingleDay(ctx, e) }
+				],
+				"TABLE.ESCAPE": [{ target: "focused" }]
+			} }
+		}
+	});
+}
+export { datePicker, daysOf, normalizeDays };
+
+//# sourceMappingURL=date-picker.machine.js.map