@lavalogic/scoria 0.33.0 → 0.35.0

package/dist/Components/DatePicker.svelte

@@ -1,314 +1,314 @@
-<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">
+	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>
+
 <style>.touch-date-wrapper {
   display: flex;
   justify-content: center;
@@ -328,4 +328,4 @@
 
 .day-line {
   margin: 2px;
-}</style>
+}</style>