@lavalogic/scoria 0.40.0 → 0.40.2

package/dist/Components/DatePicker.svelte

@@ -1,302 +1,302 @@
-<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>
-
+<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;
@@ -316,4 +316,4 @@
 
 .day-line {
   margin: 2px;
-}</style>
+}</style>