@lavalogic/scoria 0.0.1

package/dist/Components/DatePicker.svelte

@@ -0,0 +1,346 @@
+<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'
+	];
+
+	export interface DatePickerProps {
+		namedMonths: boolean;
+		onsubmit: (e?: SubmitEvent) => void;
+		autofocus?: boolean;
+		date?: Date;
+		showTime: boolean;
+		years_map?: [number, number];
+	}
+</script>
+
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+	import { dev } from '$app/environment';
+	import { generateShortUUID } from '../Helpers/Helpers.svelte.js';
+	import { DatePickerType } from '../Types/Internal/DatePickerType.js';
+	import Dial from './Dial.svelte';
+	import type { DateChange } from '../Types/Internal/DateChange.js';
+
+	let {
+		date = $bindable(new Date()),
+		years_map = [2000, 2100],
+		autofocus = false,
+		namedMonths,
+		showTime,
+		onsubmit
+	}: DatePickerProps = $props();
+
+	let focusableElements: HTMLDivElement[] = [];
+
+	let dayRef: HTMLDivElement | undefined = $state();
+	let monthRef: HTMLDivElement | undefined = $state();
+	let yearRef: HTMLDivElement | undefined = $state();
+	let hoursRef: HTMLDivElement | undefined = $state();
+	let minutesRef: HTMLDivElement | undefined = $state();
+	let secondsRef: HTMLDivElement | undefined = $state();
+
+	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 = 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)
+	);
+
+	let dateChanged = ({ type, changedData }: DateChange<number>) => {
+		let newDate = (() => {
+			if (type === DatePickerType.Day) {
+				return new Date(
+					date.getFullYear(),
+					date.getMonth(),
+					changedData,
+					date.getHours(),
+					date.getMinutes(),
+					date.getSeconds()
+				);
+			} else if (type === DatePickerType.Month) {
+				let maxDayInSelectedMonth = new Date(date.getFullYear(), changedData + 1, 0).getDate();
+				let day = Math.min(date.getDate(), maxDayInSelectedMonth);
+				return new Date(
+					date.getFullYear(),
+					changedData,
+					day,
+					date.getHours(),
+					date.getMinutes(),
+					date.getSeconds()
+				);
+			} else if (type === DatePickerType.Year) {
+				let maxDayInSelectedMonth = new Date(changedData, date.getMonth() + 1, 0).getDate();
+				let 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 if (type === DatePickerType.Seconds) {
+				return new Date(
+					date.getFullYear(),
+					date.getMonth(),
+					date.getDate(),
+					date.getHours(),
+					date.getMinutes(),
+					changedData
+				);
+			}
+
+			if (dev) {
+				alert('Unhandled type changed');
+			} else {
+				console.warn('Unhandled type changed');
+			}
+
+			return date;
+		})();
+
+		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();
+			}
+		});
+	});
+</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;
+  align-items: center;
+  flex-direction: column;
+}
+
+.touch-date-picker {
+  box-sizing: content-box;
+  display: flex;
+}
+
+.date-line {
+  font-size: 30px;
+  font-weight: 300;
+}
+
+.day-line {
+  margin: 2px;
+}</style>

package/dist/Components/DatePicker.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface DatePickerProps {
+    namedMonths: boolean;
+    onsubmit: (e?: SubmitEvent) => void;
+    autofocus?: boolean;
+    date?: Date;
+    showTime: boolean;
+    years_map?: [number, number];
+}
+declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "date">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/Components/DesktopModal.svelte

@@ -0,0 +1,235 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface DesktopModalProps {
+		onclose: () => void;
+		headerLabel: Snippet<[]> | string;
+		buttons: CallbackButton[];
+		children: Snippet<[]>;
+		noscroll?: boolean;
+		onsubmit?: ((e: SubmitEvent) => void) | undefined;
+		isLoading?: boolean;
+		mandatory?: boolean;
+		headerSubtitle?: string;
+		loadingMessage?: string;
+		staticHeight?: boolean;
+		staticWidth?: boolean;
+		minWidth?: string;
+		minHeight?: string;
+		width?: string;
+		height?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+	import Modal from './Modal.svelte';
+	import LoadingOverlay from './LoadingOverlay.svelte';
+	import { ColourSet } from '../scss/colours.js';
+	import Button from './Button.svelte';
+	import type { CallbackButton } from '../Types/Internal/CallbackButton.js';
+
+	// testing modal
+
+	let {
+		onclose,
+		onsubmit,
+		noscroll,
+		headerLabel,
+		headerSubtitle,
+		buttons,
+		children,
+		isLoading,
+		mandatory,
+		loadingMessage,
+		staticHeight,
+		staticWidth,
+		minWidth,
+		minHeight,
+		width,
+		height
+	}: DesktopModalProps = $props();
+</script>
+
+<Modal
+	{onclose}
+	mandatory={mandatory || isLoading}
+	{staticHeight}
+	{staticWidth}
+	{minWidth}
+	{minHeight}
+	{width}
+	{height}
+	{noscroll}
+	{onsubmit}
+>
+	{#snippet header()}
+		<div class="outer">
+			<div class="column">
+				{#if typeof headerLabel === 'string'}
+					<h1>{headerLabel}</h1>
+				{:else}
+					{@render headerLabel()}
+				{/if}
+				{#if headerSubtitle}
+					<div class="one-line">
+						<span>{headerSubtitle}</span>
+					</div>
+				{/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}
+		</div>
+	{/snippet}
+
+	<div class="body-outer">
+		{@render children()}
+	</div>
+
+	{#if isLoading}
+		<LoadingOverlay absolute message={loadingMessage} />
+	{/if}
+</Modal>
+
+<style>.outer {
+  padding: 1.5rem;
+  display: flex;
+  flex-flow: row nowrap;
+  width: 100%;
+  background-color: #ffffff;
+  border-bottom: solid 1px #cbd4da;
+}
+.outer .buttons {
+  display: flex;
+  flex-flow: row-reverse nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  flex-grow: 1;
+  justify-content: flex-start;
+}
+.outer .column {
+  flex-grow: 2;
+  display: flex;
+  flex-flow: column nowrap;
+  background-color: #ffffff;
+}
+.outer .column h1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  color: #455661;
+  font-weight: 600;
+  font-size: 1.4rem;
+}
+.outer .column .one-line {
+  display: inline-flex;
+  flex-flow: row;
+  gap: 1rem;
+}
+.outer .column .one-line span {
+  display: inline-flex;
+  flex-flow: row;
+  align-items: center;
+  gap: 0.1875rem;
+  fill: #647d8e;
+  color: #647d8e;
+  font-size: 0.9375rem;
+}
+
+.footer {
+  border-top: solid 1px #cbd4da;
+  width: 100%;
+  height: 4rem;
+  display: flex;
+  flex-flow: row-reverse nowrap;
+  box-sizing: border-box;
+  gap: 1rem;
+  align-items: center;
+  padding: 3rem 1rem;
+  background-color: #ffffff;
+}
+.footer div.left {
+  margin-right: auto;
+}
+
+.body-outer {
+  display: flex;
+  flex-flow: column;
+  padding: 1rem;
+  gap: 1rem;
+  flex: 1;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.outer {
+  display: flex;
+  box-sizing: border-box;
+  flex-flow: row nowrap;
+  width: 100%;
+  flex: 1;
+  background: #ffffff;
+  border-bottom: solid 1px #cbd4da;
+  padding: 2rem 2rem;
+  gap: 1rem;
+  align-items: space-between;
+}
+.outer h3 {
+  font-size: 1.2rem;
+  margin: 0;
+}
+.outer span {
+  color: #3a4952;
+}
+.outer span.big-number {
+  font-size: 1.25rem;
+  font-weight: 600;
+  text-align: end;
+}
+.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/DesktopModal.svelte.d.ts

@@ -0,0 +1,23 @@
+export interface DesktopModalProps {
+    onclose: () => void;
+    headerLabel: Snippet<[]> | string;
+    buttons: CallbackButton[];
+    children: Snippet<[]>;
+    noscroll?: boolean;
+    onsubmit?: ((e: SubmitEvent) => void) | undefined;
+    isLoading?: boolean;
+    mandatory?: boolean;
+    headerSubtitle?: string;
+    loadingMessage?: string;
+    staticHeight?: boolean;
+    staticWidth?: boolean;
+    minWidth?: string;
+    minHeight?: string;
+    width?: string;
+    height?: string;
+}
+import { type Snippet } from 'svelte';
+import type { CallbackButton } from '../Types/Internal/CallbackButton.js';
+declare const DesktopModal: import("svelte").Component<DesktopModalProps, {}, "">;
+type DesktopModal = ReturnType<typeof DesktopModal>;
+export default DesktopModal;