@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/DatePicker.svelte

@@ -1,314 +1,302 @@
-<svelte:options runes />
-
-<script module lang="ts">
-	const WEEKDAY = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-	const MONTHS_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-	const MONTHS_LABELS_NUMBERED = [
-		'01',
-		'02',
-		'03',
-		'04',
-		'05',
-		'06',
-		'07',
-		'08',
-		'09',
-		'10',
-		'11',
-		'12'
-	];
-	const MONTHS_LABELS_NAMED = [
-		'Jan',
-		'Feb',
-		'Mar',
-		'Apr',
-		'May',
-		'Jun',
-		'July',
-		'Aug',
-		'Sept',
-		'Oct',
-		'Nov',
-		'Dec'
-	];
-</script>
-
-<script lang="ts">
-	import { devCatch, generateShortUUID } from '../Helpers/Helpers.svelte.js';
-	import type { DateChange } from '../Types/Internal/DateChange.js';
-	import { DatePickerType } from '../Types/Internal/DatePickerType.js';
-	import { onMount, tick } from 'svelte';
-	import type { DatePickerProps } from './DatePickerProps.js';
-	import Dial from './Dial.svelte';
-
-	let {
-		date = $bindable(new Date()),
-		years_map = [2000, 2100],
-		autofocus = false,
-		namedMonths,
-		showTime,
-		onsubmit
-	}: DatePickerProps = $props();
-
-	let focusableElements: Array<HTMLDivElement> = [];
-
-	let dayRef = $state<HTMLDivElement | undefined>();
-	let monthRef = $state<HTMLDivElement | undefined>();
-	let yearRef = $state<HTMLDivElement | undefined>();
-	let hoursRef = $state<HTMLDivElement | undefined>();
-	let minutesRef = $state<HTMLDivElement | undefined>();
-	let secondsRef = $state<HTMLDivElement | undefined>();
-
-	const id = $state(generateShortUUID());
-
-	$effect(() => {
-		if (showTime) {
-			if (dayRef && monthRef && yearRef && hoursRef && minutesRef && secondsRef) {
-				focusableElements = [dayRef, monthRef, yearRef, hoursRef, minutesRef, secondsRef];
-			}
-		} else {
-			if (dayRef && monthRef && yearRef) {
-				focusableElements = [dayRef, monthRef, yearRef];
-			}
-		}
-	});
-	const years_count = $derived(years_map[1] - years_map[0] + 1);
-
-	//js months are zero-indexed
-
-	const YEARS = $derived(
-		new Array<number>(years_count).fill(years_map[0]).map((value, index) => value + index)
-	);
-
-	const DAYS = $derived(
-		new Array<number>(new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate())
-			.fill(1)
-			.map((value, index) => value + index)
-	);
-
-	const HOURS = $derived(new Array<number>(24).fill(0).map((value, index) => value + index));
-	const MINUTES_SECONDS = $derived(
-		new Array<number>(60).fill(0).map((value, index) => value + index)
-	);
-
-	const dateChanged = ({ type, changedData }: DateChange<number>) => {
-		const newDate = (() => {
-			if (type === DatePickerType.Day) {
-				return new Date(
-					date.getFullYear(),
-					date.getMonth(),
-					changedData,
-					date.getHours(),
-					date.getMinutes(),
-					date.getSeconds()
-				);
-			} else if (type === DatePickerType.Month) {
-				const maxDayInSelectedMonth = new Date(date.getFullYear(), changedData + 1, 0).getDate();
-				const day = Math.min(date.getDate(), maxDayInSelectedMonth);
-				return new Date(
-					date.getFullYear(),
-					changedData,
-					day,
-					date.getHours(),
-					date.getMinutes(),
-					date.getSeconds()
-				);
-			} else if (type === DatePickerType.Year) {
-				const maxDayInSelectedMonth = new Date(changedData, date.getMonth() + 1, 0).getDate();
-				const day = Math.min(date.getDate(), maxDayInSelectedMonth);
-				return new Date(
-					changedData,
-					date.getMonth(),
-					day,
-					date.getHours(),
-					date.getMinutes(),
-					date.getSeconds()
-				);
-			} else if (type === DatePickerType.Hours) {
-				return new Date(
-					date.getFullYear(),
-					date.getMonth(),
-					date.getDate(),
-					changedData,
-					date.getMinutes(),
-					date.getSeconds()
-				);
-			} else if (type === DatePickerType.Minutes) {
-				return new Date(
-					date.getFullYear(),
-					date.getMonth(),
-					date.getDate(),
-					date.getHours(),
-					changedData,
-					date.getSeconds()
-				);
-			} else {
-				return new Date(
-					date.getFullYear(),
-					date.getMonth(),
-					date.getDate(),
-					date.getHours(),
-					date.getMinutes(),
-					changedData
-				);
-			}
-		})();
-
-		date = newDate;
-	};
-
-	function onNext(type: DatePickerType) {
-		switch (type) {
-			case DatePickerType.Day:
-				focusableElements[1]?.focus();
-				return;
-			case DatePickerType.Month:
-				focusableElements[2]?.focus();
-				return;
-			case DatePickerType.Year: {
-				if (showTime) {
-					focusableElements[3]?.focus();
-				}
-				return;
-			}
-			case DatePickerType.Hours:
-				focusableElements[4]?.focus();
-				return;
-			case DatePickerType.Minutes:
-				focusableElements[5]?.focus();
-				return;
-			case DatePickerType.Seconds:
-				return;
-		}
-	}
-
-	function onPrevious(type: DatePickerType) {
-		switch (type) {
-			case DatePickerType.Day:
-				return;
-			case DatePickerType.Month:
-				focusableElements[0]?.focus();
-				return;
-			case DatePickerType.Year:
-				focusableElements[1]?.focus();
-				return;
-			case DatePickerType.Hours:
-				focusableElements[2]?.focus();
-				return;
-			case DatePickerType.Minutes:
-				focusableElements[3]?.focus();
-				return;
-			case DatePickerType.Seconds:
-				focusableElements[4]?.focus();
-				return;
-		}
-	}
-
-	onMount(() => {
-		tick()
-			.then(() => {
-				if (autofocus) {
-					dayRef?.focus();
-				}
-			})
-			.catch(devCatch);
-	});
-</script>
-
-<div>
-	<div class="touch-date-wrapper">
-		<div class="date-line">
-			{date.getDate()}
-			{MONTHS_LABELS_NAMED[date.getMonth()]}
-			{date.getFullYear()}
-		</div>
-		<p class="day-line">{WEEKDAY[date.getDay()]}</p>
-		<div class="touch-date-picker">
-			{#key `${id}-day`}
-				<Dial
-					type={DatePickerType.Day}
-					bind:ref={dayRef}
-					values={DAYS}
-					labels={DAYS}
-					selected={date.getDate()}
-					onchange={dateChanged}
-					{onsubmit}
-					{onPrevious}
-					{onNext}
-				/>
-			{/key}
-			{#key `${id}-month`}
-				<Dial
-					type={DatePickerType.Month}
-					bind:ref={monthRef}
-					values={MONTHS_VALUES}
-					labels={namedMonths ? MONTHS_LABELS_NAMED : MONTHS_LABELS_NUMBERED}
-					selected={date.getMonth()}
-					onchange={dateChanged}
-					{onsubmit}
-					{onPrevious}
-					{onNext}
-				/>
-			{/key}
-			{#key `${id}-year`}
-				<Dial
-					bind:ref={yearRef}
-					type={DatePickerType.Year}
-					values={YEARS}
-					labels={YEARS}
-					selected={date.getFullYear()}
-					onchange={dateChanged}
-					{onsubmit}
-					{onPrevious}
-					{onNext}
-				/>
-			{/key}
-
-			{#if showTime}
-				{#key `${id}-hours`}
-					<Dial
-						bind:ref={hoursRef}
-						type={DatePickerType.Hours}
-						values={HOURS}
-						labels={HOURS}
-						selected={date.getHours()}
-						onchange={dateChanged}
-						{onsubmit}
-						{onPrevious}
-						{onNext}
-					/>
-				{/key}
-				{#key `${id}-minutes`}
-					<Dial
-						bind:ref={minutesRef}
-						type={DatePickerType.Minutes}
-						values={MINUTES_SECONDS}
-						labels={MINUTES_SECONDS}
-						selected={date.getMinutes()}
-						onchange={dateChanged}
-						{onsubmit}
-						{onPrevious}
-						{onNext}
-					/>
-				{/key}
-				{#key `${id}-seconds`}
-					<Dial
-						bind:ref={secondsRef}
-						type={DatePickerType.Seconds}
-						values={MINUTES_SECONDS}
-						labels={MINUTES_SECONDS}
-						selected={date.getSeconds()}
-						onchange={dateChanged}
-						{onsubmit}
-						{onPrevious}
-						{onNext}
-					/>
-				{/key}
-			{/if}
-		</div>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	module
+	lang="ts"
+>
+	// Use Intl.DateTimeFormat with en-GB locale for weekday and month names.
+	const WEEKDAY_FMT = new Intl.DateTimeFormat('en-GB', { weekday: 'long' });
+	const MONTH_FULL_FMT = new Intl.DateTimeFormat('en-GB', { month: 'short' });
+	const WEEKDAY = Object.freeze(
+		Array.from({ length: 7 }, (_, i) =>
+			// 2024-01-07 was a Sunday in UTC, so we walk days 7..13 starting Sunday.
+			WEEKDAY_FMT.format(new Date(Date.UTC(2024, 0, 7 + i)))
+		)
+	);
+	const MONTHS_VALUES = Object.freeze([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
+	const MONTHS_LABELS_NUMBERED = Object.freeze([
+		'01',
+		'02',
+		'03',
+		'04',
+		'05',
+		'06',
+		'07',
+		'08',
+		'09',
+		'10',
+		'11',
+		'12',
+	]);
+	const MONTHS_LABELS_NAMED = Object.freeze(
+		Array.from({ length: 12 }, (_, i) => MONTH_FULL_FMT.format(new Date(Date.UTC(2024, i, 1))))
+	);
+	// HOURS and MINUTES_SECONDS are constants. Frozen at module scope so they are
+	// not reallocated on every $derived read.
+	const HOURS = Object.freeze(Array.from({ length: 24 }, (_, i) => i));
+	const MINUTES_SECONDS = Object.freeze(Array.from({ length: 60 }, (_, i) => i));
+</script>
+
+<script lang="ts">
+	import { devCatch } from '../Helpers/Helpers.svelte.js';
+	import type { DateChange } from '../Types/Internal/DateChange.js';
+	import { DatePickerType } from '../Types/Internal/DatePickerType.js';
+	import { onMount, tick } from 'svelte';
+	import type { DatePickerProps } from './DatePickerProps.js';
+	import Dial from './Dial.svelte';
+
+	let {
+		date = $bindable(new Date()),
+		yearsRange = { min: 2000, max: 2100 },
+		autofocus = false,
+		namedMonths,
+		showTime,
+		onsubmit,
+	}: DatePickerProps = $props();
+
+	let focusableElements: Array<HTMLDivElement> = [];
+
+	let dayRef = $state<HTMLDivElement | undefined>();
+	let monthRef = $state<HTMLDivElement | undefined>();
+	let yearRef = $state<HTMLDivElement | undefined>();
+	let hoursRef = $state<HTMLDivElement | undefined>();
+	let minutesRef = $state<HTMLDivElement | undefined>();
+	let secondsRef = $state<HTMLDivElement | undefined>();
+
+	$effect(() => {
+		if (showTime) {
+			if (dayRef && monthRef && yearRef && hoursRef && minutesRef && secondsRef) {
+				focusableElements = [dayRef, monthRef, yearRef, hoursRef, minutesRef, secondsRef];
+			}
+		} else {
+			if (dayRef && monthRef && yearRef) {
+				focusableElements = [dayRef, monthRef, yearRef];
+			}
+		}
+	});
+	const yearsCount = $derived(yearsRange.max - yearsRange.min + 1);
+
+	const YEARS = $derived(Array.from({ length: yearsCount }, (_, index) => yearsRange.min + index));
+
+	const year = $derived(date.getFullYear());
+	const month = $derived(date.getMonth());
+	const DAYS = $derived.by(() =>
+		Array.from({ length: new Date(year, month + 1, 0).getDate() }, (_, index) => index + 1)
+	);
+
+	// Construct DialEntry arrays once per derivation. The label types
+	// match the prior `string | number` union; numeric ranges (days,
+	// years, hours, minutes/seconds) reuse the value as the label.
+	const dayEntries = $derived(DAYS.map((d) => ({ value: d, label: d })));
+	const monthEntries = $derived(
+		MONTHS_VALUES.map((v, i) => ({
+			value: v,
+			label: (namedMonths ? MONTHS_LABELS_NAMED : MONTHS_LABELS_NUMBERED)[i],
+		}))
+	);
+	const yearEntries = $derived(YEARS.map((y) => ({ value: y, label: y })));
+	const hourEntries = HOURS.map((h) => ({ value: h, label: h }));
+	const minuteSecondEntries = MINUTES_SECONDS.map((s) => ({ value: s, label: s }));
+
+	const dateChanged = ({ type, changedData }: DateChange<number>) => {
+		const newDate = (() => {
+			if (type === DatePickerType.Day) {
+				return new Date(
+					date.getFullYear(),
+					date.getMonth(),
+					changedData,
+					date.getHours(),
+					date.getMinutes(),
+					date.getSeconds()
+				);
+			} else if (type === DatePickerType.Month) {
+				const maxDayInSelectedMonth = new Date(date.getFullYear(), changedData + 1, 0).getDate();
+				const day = Math.min(date.getDate(), maxDayInSelectedMonth);
+				return new Date(
+					date.getFullYear(),
+					changedData,
+					day,
+					date.getHours(),
+					date.getMinutes(),
+					date.getSeconds()
+				);
+			} else if (type === DatePickerType.Year) {
+				const maxDayInSelectedMonth = new Date(changedData, date.getMonth() + 1, 0).getDate();
+				const day = Math.min(date.getDate(), maxDayInSelectedMonth);
+				return new Date(
+					changedData,
+					date.getMonth(),
+					day,
+					date.getHours(),
+					date.getMinutes(),
+					date.getSeconds()
+				);
+			} else if (type === DatePickerType.Hours) {
+				return new Date(
+					date.getFullYear(),
+					date.getMonth(),
+					date.getDate(),
+					changedData,
+					date.getMinutes(),
+					date.getSeconds()
+				);
+			} else if (type === DatePickerType.Minutes) {
+				return new Date(
+					date.getFullYear(),
+					date.getMonth(),
+					date.getDate(),
+					date.getHours(),
+					changedData,
+					date.getSeconds()
+				);
+			} else {
+				return new Date(
+					date.getFullYear(),
+					date.getMonth(),
+					date.getDate(),
+					date.getHours(),
+					date.getMinutes(),
+					changedData
+				);
+			}
+		})();
+
+		date = newDate;
+	};
+
+	function onNext(type: DatePickerType) {
+		switch (type) {
+			case DatePickerType.Day:
+				focusableElements[1]?.focus();
+				return;
+			case DatePickerType.Month:
+				focusableElements[2]?.focus();
+				return;
+			case DatePickerType.Year: {
+				if (showTime) {
+					focusableElements[3]?.focus();
+				}
+				return;
+			}
+			case DatePickerType.Hours:
+				focusableElements[4]?.focus();
+				return;
+			case DatePickerType.Minutes:
+				focusableElements[5]?.focus();
+				return;
+			case DatePickerType.Seconds:
+				return;
+		}
+	}
+
+	function onPrevious(type: DatePickerType) {
+		switch (type) {
+			case DatePickerType.Day:
+				return;
+			case DatePickerType.Month:
+				focusableElements[0]?.focus();
+				return;
+			case DatePickerType.Year:
+				focusableElements[1]?.focus();
+				return;
+			case DatePickerType.Hours:
+				focusableElements[2]?.focus();
+				return;
+			case DatePickerType.Minutes:
+				focusableElements[3]?.focus();
+				return;
+			case DatePickerType.Seconds:
+				focusableElements[4]?.focus();
+				return;
+		}
+	}
+
+	onMount(() => {
+		(async () => {
+			await tick();
+			if (autofocus) {
+				dayRef?.focus();
+			}
+		})().catch(devCatch);
+	});
+</script>
+
+<div>
+	<div class="touch-date-wrapper">
+		<div class="date-line">
+			{date.getDate()}
+			{MONTHS_LABELS_NAMED[date.getMonth()]}
+			{date.getFullYear()}
+		</div>
+		<p class="day-line">{WEEKDAY[date.getDay()]}</p>
+		<div class="touch-date-picker">
+			<Dial
+				type={DatePickerType.Day}
+				bind:ref={dayRef}
+				entries={dayEntries}
+				selected={date.getDate()}
+				onchange={dateChanged}
+				{onsubmit}
+				{onPrevious}
+				{onNext}
+			/>
+			<Dial
+				type={DatePickerType.Month}
+				bind:ref={monthRef}
+				entries={monthEntries}
+				selected={date.getMonth()}
+				onchange={dateChanged}
+				{onsubmit}
+				{onPrevious}
+				{onNext}
+			/>
+			<Dial
+				bind:ref={yearRef}
+				type={DatePickerType.Year}
+				entries={yearEntries}
+				selected={date.getFullYear()}
+				onchange={dateChanged}
+				{onsubmit}
+				{onPrevious}
+				{onNext}
+			/>
+
+			{#if showTime}
+				<Dial
+					bind:ref={hoursRef}
+					type={DatePickerType.Hours}
+					entries={hourEntries}
+					selected={date.getHours()}
+					onchange={dateChanged}
+					{onsubmit}
+					{onPrevious}
+					{onNext}
+				/>
+				<Dial
+					bind:ref={minutesRef}
+					type={DatePickerType.Minutes}
+					entries={minuteSecondEntries}
+					selected={date.getMinutes()}
+					onchange={dateChanged}
+					{onsubmit}
+					{onPrevious}
+					{onNext}
+				/>
+				<Dial
+					bind:ref={secondsRef}
+					type={DatePickerType.Seconds}
+					entries={minuteSecondEntries}
+					selected={date.getSeconds()}
+					onchange={dateChanged}
+					{onsubmit}
+					{onPrevious}
+					{onNext}
+				/>
+			{/if}
+		</div>
+	</div>
+</div>
+
 <style>.touch-date-wrapper {
   display: flex;
   justify-content: center;
@@ -322,10 +310,10 @@
 }
 
 .date-line {
-  font-size: 30px;
+  font-size: 2rem;
   font-weight: 300;
 }
 
 .day-line {
   margin: 2px;
-}</style>
+}</style>

package/dist/Components/DatePickerProps.d.ts

@@ -1,8 +1,25 @@
 export interface DatePickerProps {
+    /** Whether the month dial shows full month names or numbers. */
     namedMonths: boolean;
+    /** Submit handler invoked when the user presses Enter. */
     onsubmit: (e?: SubmitEvent) => void;
+    /** Focus the day dial on mount. */
     autofocus?: boolean;
+    /**
+     * Bindable selected date. Consumers wanting full reactivity should bind
+     * a `SvelteDate` from `svelte/reactivity` (assignable to `Date`).
+     * Workorder DatePicker P1 (SvelteDate prop type) is deferred because
+     * `DateModal` and other consumers currently pass bare `Date`.
+     */
     date?: Date;
+    /** When true, hour/minute/second dials are shown. */
     showTime: boolean;
-    years_map?: [number, number];
+    /**
+     * Inclusive min/max years rendered on the year dial. Replaces the
+     * legacy `years_map: [number, number]` tuple.
+     */
+    yearsRange?: {
+        min: number;
+        max: number;
+    };
 }