@lavalogic/scoria 0.40.14 → 0.40.15

package/dist/Components/DatePicker.svelte

@@ -1,302 +1,263 @@
-<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];
-			}
+<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) => 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 { DatePickerType } from "../Types/Internal/DatePickerType.js";
+import { onMount, tick } from "svelte";
+import Dial from "./Dial.svelte";
+let { date = $bindable(new Date()), yearsRange = {
+	min: 2e3,
+	max: 2100
+}, autofocus = false, namedMonths, showTime, onsubmit } = $props();
+let focusableElements = [];
+let dayRef = $state();
+let monthRef = $state();
+let yearRef = $state();
+let hoursRef = $state();
+let minutesRef = $state();
+let secondsRef = $state();
+$effect(() => {
+	if (showTime) {
+		if (dayRef && monthRef && yearRef && hoursRef && minutesRef && secondsRef) {
+			focusableElements = [
+				dayRef,
+				monthRef,
+				yearRef,
+				hoursRef,
+				minutesRef,
+				secondsRef
+			];
 		}
-	});
-	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;
+	} else {
+		if (dayRef && monthRef && yearRef) {
+			focusableElements = [
+				dayRef,
+				monthRef,
+				yearRef
+			];
 		}
 	}
-
-	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:
+});
+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 }) => {
+	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) {
+	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.Seconds:
-				focusableElements[4]?.focus();
-				return;
+			}
+			return;
 		}
+		case DatePickerType.Hours:
+			focusableElements[4]?.focus();
+			return;
+		case DatePickerType.Minutes:
+			focusableElements[5]?.focus();
+			return;
+		case DatePickerType.Seconds: 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>
-
+}
+function onPrevious(type) {
+	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;
@@ -316,4 +277,4 @@
 
 .day-line {
   margin: 2px;
-}</style>
+}</style>