@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/DatePicker.svelte

@@ -1,9 +1,20 @@
 <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 = [
+<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',
@@ -15,26 +26,19 @@
 		'09',
 		'10',
 		'11',
-		'12'
-	];
-	const MONTHS_LABELS_NAMED = [
-		'Jan',
-		'Feb',
-		'Mar',
-		'Apr',
-		'May',
-		'Jun',
-		'July',
-		'Aug',
-		'Sept',
-		'Oct',
-		'Nov',
-		'Dec'
-	];
+		'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, generateShortUUID } from '../Helpers/Helpers.svelte.js';
+	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';
@@ -43,11 +47,11 @@
 
 	let {
 		date = $bindable(new Date()),
-		years_map = [2000, 2100],
+		yearsRange = { min: 2000, max: 2100 },
 		autofocus = false,
 		namedMonths,
 		showTime,
-		onsubmit
+		onsubmit,
 	}: DatePickerProps = $props();
 
 	let focusableElements: Array<HTMLDivElement> = [];
@@ -59,8 +63,6 @@
 	let minutesRef = $state<HTMLDivElement | undefined>();
 	let secondsRef = $state<HTMLDivElement | undefined>();
 
-	const id = $state(generateShortUUID());
-
 	$effect(() => {
 		if (showTime) {
 			if (dayRef && monthRef && yearRef && hoursRef && minutesRef && secondsRef) {
@@ -72,24 +74,29 @@
 			}
 		}
 	});
-	const years_count = $derived(years_map[1] - years_map[0] + 1);
+	const yearsCount = $derived(yearsRange.max - yearsRange.min + 1);
 
-	//js months are zero-indexed
+	const YEARS = $derived(Array.from({ length: yearsCount }, (_, index) => yearsRange.min + index));
 
-	const YEARS = $derived(
-		new Array<number>(years_count).fill(years_map[0]).map((value, index) => value + 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)
 	);
 
-	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)
+	// 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 = (() => {
@@ -205,13 +212,12 @@
 	}
 
 	onMount(() => {
-		tick()
-			.then(() => {
-				if (autofocus) {
-					dayRef?.focus();
-				}
-			})
-			.catch(devCatch);
+		(async () => {
+			await tick();
+			if (autofocus) {
+				dayRef?.focus();
+			}
+		})().catch(devCatch);
 	});
 </script>
 
@@ -224,86 +230,68 @@
 		</div>
 		<p class="day-line">{WEEKDAY[date.getDay()]}</p>
 		<div class="touch-date-picker">
-			{#key `${id}-day`}
+			<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
-					type={DatePickerType.Day}
-					bind:ref={dayRef}
-					values={DAYS}
-					labels={DAYS}
-					selected={date.getDate()}
+					bind:ref={hoursRef}
+					type={DatePickerType.Hours}
+					entries={hourEntries}
+					selected={date.getHours()}
 					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()}
+					bind:ref={minutesRef}
+					type={DatePickerType.Minutes}
+					entries={minuteSecondEntries}
+					selected={date.getMinutes()}
 					onchange={dateChanged}
 					{onsubmit}
 					{onPrevious}
 					{onNext}
 				/>
-			{/key}
-			{#key `${id}-year`}
 				<Dial
-					bind:ref={yearRef}
-					type={DatePickerType.Year}
-					values={YEARS}
-					labels={YEARS}
-					selected={date.getFullYear()}
+					bind:ref={secondsRef}
+					type={DatePickerType.Seconds}
+					entries={minuteSecondEntries}
+					selected={date.getSeconds()}
 					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>
@@ -322,7 +310,7 @@
 }
 
 .date-line {
-  font-size: 30px;
+  font-size: 2rem;
   font-weight: 300;
 }
 

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;
+    };
 }

package/dist/Components/DateTimeInputProps.d.ts

@@ -1,21 +1,46 @@
 import type { InputVariant } from '../Types/Internal/InputVariant.js';
 import type { InputDateWithTime } from '../Types/Internal/Misc.js';
 import type { PartialIconProps } from './PartialIconProps.js';
+/**
+ * Props for the `datetime-local` variant of {@link DateInput}.
+ *
+ * The `type` discriminator is required to keep the union with
+ * {@link DateOnlyInputProps} fully discriminable. `value` is branded
+ * with {@link InputDateWithTime}.
+ */
 export interface DateTimeInputProps {
-    value?: InputDateWithTime | null;
+    /** Discriminator. Must be the literal `'datetime-local'`. */
+    type: 'datetime-local';
+    /** Bindable datetime value. `''` represents "no value selected". */
+    value?: InputDateWithTime | '';
+    /** Label rendered above the input. */
     label?: string;
+    /** Native `placeholder` attribute. */
     placeholder?: string;
+    /** Native `required` attribute. */
     required?: boolean;
-    variant?: InputVariant;
-    min?: string;
-    max?: string;
+    /** Render the "- optional" suffix next to `label`. */
     optional?: boolean;
-    type?: 'datetime-local';
+    /** Render variant. See {@link InputVariant}. */
+    variant?: InputVariant;
+    /** Native `min` constraint. */
+    min?: InputDateWithTime;
+    /** Native `max` constraint. */
+    max?: InputDateWithTime;
+    /** Native `disabled` attribute. */
     disabled?: boolean;
+    /** Icon rendered on the left of the input. */
     leftIcon?: PartialIconProps;
+    /** Icon rendered on the right of the input. */
     rightIcon?: PartialIconProps;
+    /** Bindable reference to the underlying `<input>` element. */
     inputRef?: HTMLInputElement;
+    /** Force the invalid visual state. */
     invalid?: boolean;
+    /** Blur handler. */
     onblur?: (e: FocusEvent) => void;
+    /** Focus handler. */
     onfocus?: (e: FocusEvent) => void;
+    /** Change handler. May return `void` or `Promise<void>`. */
+    onchange?: (value: InputDateWithTime | null) => void | Promise<void>;
 }

package/dist/Components/DesktopModal.svelte

@@ -7,9 +7,7 @@
 	import LoadingOverlay from './LoadingOverlay.svelte';
 	import Modal from './Modal.svelte';
 
-	// testing modal
-
-	let {
+	const {
 		onclose,
 		onsubmit,
 		noscroll,
@@ -56,38 +54,24 @@
 				{/if}
 			</div>
 			<div class="spacer"></div>
-
-			<!-- <div class="orders">
-				<div class="column">
-					<span>Orders Selected</span>
-					<span class="big-number">{allocationContext.orders.length}</span>
-				</div>
-				<Icon name="paper" size={Size.TripleXLarge} colour={Colour.$main} />
-			</div>
-			<div class="warehouses">
-				<div class="column">
-					<span>Possible Warehouses</span>
-					<span class="big-number">{allocationContext.currentOrderWarehouses.length}</span>
-				</div>
-				<Icon name="warehouse" size={Size.TripleXLarge} colour={Colour.$main} />
-			</div> -->
 		</div>
 	{/snippet}
 
 	{#snippet footer()}
 		<div class="footer">
-			{#each buttons as button (button)}
-				<div class:left={button.left}>
-					<Button
-						type={button.type}
-						disabled={button.disabled}
-						onclick={button.callback}
-						colourSet={(button.colourSet ?? button.type === 'submit')
-							? ColourSet.Primary
-							: undefined}>{button.label}</Button
-					>
-				</div>
-			{/each}
+			{#if buttons.length}
+				{#each buttons as button (button.label)}
+					<div class:left={button.left}>
+						<Button
+							type={button.type}
+							disabled={button.disabled}
+							onclick={button.callback}
+							colourSet={button.colourSet ??
+								(button.type === 'submit' ? ColourSet.Primary : undefined)}>{button.label}</Button
+						>
+					</div>
+				{/each}
+			{/if}
 		</div>
 	{/snippet}
 
@@ -200,17 +184,4 @@
 }
 .outer .spacer {
   flex-grow: 1;
-}
-.outer .orders,
-.outer .warehouses {
-  display: flex;
-  flex-flow: row nowrap;
-  height: 100%;
-  gap: 0.5rem;
-}
-.outer .orders .column,
-.outer .warehouses .column {
-  display: flex;
-  gap: 0rem;
-  flex-flow: column nowrap;
 }</style>

package/dist/Components/DesktopModalProps.d.ts

@@ -1,4 +1,5 @@
 import type { CallbackButton } from '../Types/Internal/CallbackButton.js';
+import type { CssLength } from '../Types/Internal/Misc.js';
 import type { Snippet } from 'svelte';
 export interface DesktopModalProps {
     onclose: () => void;
@@ -13,8 +14,8 @@ export interface DesktopModalProps {
     loadingMessage?: string;
     staticHeight?: boolean;
     staticWidth?: boolean;
-    minWidth?: string;
-    minHeight?: string;
-    width?: string;
-    height?: string;
+    minWidth?: CssLength;
+    minHeight?: CssLength;
+    width?: CssLength;
+    height?: CssLength;
 }