@lavalogic/scoria 0.11.15 → 0.12.0

package/dist/Components/Checkbox.svelte

@@ -1,11 +1,11 @@
 <svelte:options runes />
 
 <script lang="ts" module>
+	import { generateShortUUID } from '../Helpers/Helpers.svelte.js';
+	import { Size } from '../Types/Internal/Size.js';
 	import type { ChangeEventHandler } from 'svelte/elements';
 	import Icon from './Icon.svelte';
-	import type { IconProps } from './Icon.svelte';
-	import { Size } from '../Types/Internal/Size.js';
-	import { generateShortUUID } from '../Helpers/Helpers.svelte.js';
+	import type { IconProps } from './IconProps.js';
 
 	export interface CheckboxProps {
 		value: boolean;
@@ -16,20 +16,6 @@
 		disabled?: boolean;
 		onchange?: ChangeEventHandler<HTMLInputElement>;
 	}
-
-	const sizes: Record<Size, string> = {
-		[Size.Tiny]: '1rem',
-		[Size.Small]: '1rem',
-		[Size.MediumSmall]: '1rem',
-		[Size.Medium]: '1.75rem',
-		[Size.MediumLarge]: '1.75rem',
-		[Size.Large]: '1.75rem',
-		[Size.XLarge]: '1.75rem',
-		[Size.DoubleXLarge]: '2.75rem',
-		[Size.TripleXLarge]: '2.75rem',
-		[Size.FillWidth]: '2.75rem',
-		[Size.FillHeight]: '2.75rem'
-	};
 </script>
 
 <script lang="ts">
@@ -42,8 +28,6 @@
 		disabled,
 		onchange
 	}: CheckboxProps = $props();
-
-	let ref: HTMLInputElement | undefined = $state();
 </script>
 
 {#if icon}
@@ -63,7 +47,6 @@
 				type="checkbox"
 				{disabled}
 				checked={value}
-				bind:this={ref}
 			/>
 			<label class="icon-label" for={id} class:disabled>
 				<Icon {...icon} size={icon.size ?? size ?? Size.DoubleXLarge} />
@@ -75,7 +58,7 @@
 	</div>
 {:else}
 	<div class="checkbox-container">
-		<input {id} {onchange} type="checkbox" checked={value} {disabled} bind:this={ref} />
+		<input {id} {onchange} type="checkbox" checked={value} {disabled} />
 		{#if label}
 			<label class="text-label" for={id}>{label}</label>
 		{/if}

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

@@ -1,6 +1,6 @@
-import type { ChangeEventHandler } from 'svelte/elements';
-import type { IconProps } from './Icon.svelte';
 import { Size } from '../Types/Internal/Size.js';
+import type { ChangeEventHandler } from 'svelte/elements';
+import type { IconProps } from './IconProps.js';
 export interface CheckboxProps {
     value: boolean;
     id?: string;

package/dist/Components/CollapsibleCard.svelte

@@ -1,22 +1,10 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	import type { Snippet } from 'svelte';
-
-	export interface CollapsibleCard {
-		title?: string;
-		subtitle?: string | Promise<string>;
-		children?: Snippet;
-		maxHeight?: number;
-		grow?: boolean;
-		isCollapsed?: boolean;
-	}
-</script>
-
 <script lang="ts">
-	import Action from './Action.svelte';
 	import { Size } from '../Types/Internal/Size.js';
 	import { Colour } from '../scss/colours.js';
+	import Action from './Action.svelte';
+	import type { CollapsibleCardProps } from './CollapsibleCardProps.js';
 
 	let {
 		title,
@@ -25,7 +13,7 @@
 		children,
 		grow,
 		isCollapsed = $bindable(false)
-	}: CollapsibleCard = $props();
+	}: CollapsibleCardProps = $props();
 
 	let cardRef: HTMLDivElement | undefined = $state();
 

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

@@ -1,12 +1,4 @@
-import type { Snippet } from 'svelte';
-export interface CollapsibleCard {
-    title?: string;
-    subtitle?: string | Promise<string>;
-    children?: Snippet;
-    maxHeight?: number;
-    grow?: boolean;
-    isCollapsed?: boolean;
-}
-declare const CollapsibleCard: any;
+import type { CollapsibleCardProps } from './CollapsibleCardProps.js';
+declare const CollapsibleCard: import("svelte").Component<CollapsibleCardProps, {}, "isCollapsed">;
 type CollapsibleCard = ReturnType<typeof CollapsibleCard>;
 export default CollapsibleCard;

package/dist/Components/CollapsibleCardProps.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+export interface CollapsibleCardProps {
+    title?: string;
+    subtitle?: string | Promise<string>;
+    children?: Snippet;
+    maxHeight?: number;
+    grow?: boolean;
+    isCollapsed?: boolean;
+}

package/dist/Components/CollapsibleCardProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Contexts/ContextMenu.svelte

@@ -2,7 +2,8 @@
 
 <script lang="ts">
 	import { ContextMenuContext } from '../../Contexts/ContextMenuContext.svelte.js';
-	import { tick, getContext } from 'svelte';
+	import { devCatch } from '../../Helpers/Helpers.svelte.js';
+	import { getContext, tick } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import ContextMenuOption from './ContextMenuOption.svelte';
 
@@ -21,16 +22,18 @@
 		_x = contextMenuContext.x;
 		_y = contextMenuContext.y;
 
-		tick().then(() => {
-			const rect = menuEl?.getBoundingClientRect();
-			if (!rect) {
-				return;
-			}
-			_x = Math.min(window.innerWidth - rect.width, _x);
-			if (_y > window.innerHeight - rect.height) {
-				_y -= rect.height;
-			}
-		});
+		tick()
+			.then(() => {
+				const rect = menuEl?.getBoundingClientRect();
+				if (!rect) {
+					return;
+				}
+				_x = Math.min(window.innerWidth - rect.width, _x);
+				if (_y > window.innerHeight - rect.height) {
+					_y -= rect.height;
+				}
+			})
+			.catch(devCatch);
 	}
 
 	let menuEl: HTMLDivElement | undefined = $state();

package/dist/Components/Contexts/ContextMenuOption.svelte

@@ -1,17 +1,8 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	import type { Snippet } from 'svelte';
-
-	export interface ContextMenuOptionProps {
-		text?: string;
-		disabled?: boolean | undefined;
-		onclick?: (e: MouseEvent) => void;
-		children?: Snippet;
-	}
-</script>
-
 <script lang="ts">
+	import type { ContextMenuOptionProps } from './ContextMenuOptionProps.js';
+
 	let {
 		text = $bindable(''),
 		disabled = false,

package/dist/Components/Contexts/ContextMenuOption.svelte.d.ts

@@ -1,10 +1,4 @@
-import type { Snippet } from 'svelte';
-export interface ContextMenuOptionProps {
-    text?: string;
-    disabled?: boolean | undefined;
-    onclick?: (e: MouseEvent) => void;
-    children?: Snippet;
-}
+import type { ContextMenuOptionProps } from './ContextMenuOptionProps.js';
 declare const ContextMenuOption: import("svelte").Component<ContextMenuOptionProps, {}, "text">;
 type ContextMenuOption = ReturnType<typeof ContextMenuOption>;
 export default ContextMenuOption;

package/dist/Components/Contexts/ContextMenuOptionProps.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+export interface ContextMenuOptionProps {
+    text?: string;
+    disabled?: boolean | undefined;
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+}

package/dist/Components/Contexts/ContextMenuOptionProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Contexts/Toast.svelte

@@ -2,17 +2,12 @@
 
 <script lang="ts" module>
 	import { ColourSet } from '../../scss/colours.js';
-	import type { IdentifiableToastMessage } from '../../Types/Internal/IdentifiableToastMessage.js';
 	import { Size } from '../../Types/Internal/Size.js';
 	import { Validity } from '../../Types/Internal/Validity.js';
 	import { slide } from 'svelte/transition';
 	import Action from '../Action.svelte';
 	import Icon from '../Icon.svelte';
-
-	export interface ToastProps {
-		toast: IdentifiableToastMessage;
-		copy: () => void;
-	}
+	import type { ToastProps } from './ToastProps.js';
 </script>
 
 <script lang="ts">

package/dist/Components/Contexts/Toast.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { IdentifiableToastMessage } from '../../Types/Internal/IdentifiableToastMessage.js';
-export interface ToastProps {
-    toast: IdentifiableToastMessage;
-    copy: () => void;
-}
+import type { ToastProps } from './ToastProps.js';
 declare const Toast: import("svelte").Component<ToastProps, {}, "">;
 type Toast = ReturnType<typeof Toast>;
 export default Toast;

package/dist/Components/Contexts/ToastContainer.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
 	import { ToastContext } from '../../Contexts/ToastContext.svelte.js';
+	import { devCatch } from '../../Helpers/Helpers.svelte.js';
 	import { Validity } from '../../Types/Internal/Validity.js';
 	import { getContext } from 'svelte';
 	import Toast from './Toast.svelte';
@@ -9,6 +10,8 @@
 	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 
 	function copyDataToClipboard(text: string) {
+		//clipboard doesn't exist in http connections. This may be redundant now but you never know
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 		if (!navigator.clipboard) {
 			toastContext.toast({
 				result: Validity.Invalid,
@@ -20,7 +23,7 @@
 
 		// copy plain value
 
-		navigator.clipboard.writeText(text);
+		navigator.clipboard.writeText(text).catch(devCatch);
 		toastContext.toast({
 			result: Validity.Info,
 			message: 'Message copied to clipboard',

package/dist/Components/Contexts/ToastProps.d.ts

@@ -0,0 +1,5 @@
+import type { IdentifiableToastMessage } from '../../Types/Internal/IdentifiableToastMessage.js';
+export interface ToastProps {
+    toast: IdentifiableToastMessage;
+    copy: () => void;
+}

package/dist/Components/Contexts/ToastProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Contexts/Tooltip.svelte

@@ -1,12 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script lang="ts">
 	import { TooltipContext } from '../../Contexts/TooltipContext.svelte.js';
 	import { Side } from '../../Types/Internal/Side.js';
 	import { getContext } from 'svelte';
-</script>
-
-<script lang="ts">
 	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
 </script>
 

package/dist/Components/DataMatrixIcon.svelte

@@ -1,23 +1,15 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	export interface DataMatrixIconProps {
-		icon: SVGSVGElement;
-		interactive?: boolean;
-		title: string;
-		oncontextmenu?: (e: MouseEvent) => void;
-	}
-</script>
-
 <script lang="ts">
 	import { passthrough } from '../Helpers/Helpers.svelte.js';
+	import type { DataMatrixIconProps } from './DataMatrixIconProps.js';
 
 	const { icon, interactive = false, title, oncontextmenu }: DataMatrixIconProps = $props();
 
-	let svgContainer: HTMLDivElement | null = $state(null);
+	let svgContainer = $state<HTMLDivElement | null>(null);
 
 	$effect(() => {
-		if (svgContainer) {
+		if (svgContainer != null) {
 			// eslint-disable-next-line svelte/no-dom-manipulating
 			svgContainer.innerHTML = '';
 			icon.setAttribute('width', '64');

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

@@ -1,9 +1,4 @@
-export interface DataMatrixIconProps {
-    icon: SVGSVGElement;
-    interactive?: boolean;
-    title: string;
-    oncontextmenu?: (e: MouseEvent) => void;
-}
+import type { DataMatrixIconProps } from './DataMatrixIconProps.js';
 declare const DataMatrixIcon: import("svelte").Component<DataMatrixIconProps, {}, "">;
 type DataMatrixIcon = ReturnType<typeof DataMatrixIcon>;
 export default DataMatrixIcon;

package/dist/Components/DataMatrixIconProps.d.ts

@@ -0,0 +1,6 @@
+export interface DataMatrixIconProps {
+    icon: SVGSVGElement;
+    interactive?: boolean;
+    title: string;
+    oncontextmenu?: (e: MouseEvent) => void;
+}

package/dist/Components/DataMatrixIconProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/DateInput.svelte

@@ -2,49 +2,10 @@
 
 <script lang="ts" module>
 	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import type { InputDate, InputDateWithTime } from '../Types/Internal/Misc.js';
+	import type { InputDate } from '../Types/Internal/Misc.js';
 	import { Size } from '../Types/Internal/Size.js';
-	import Icon, { type PartialIconProps } from './Icon.svelte';
-
-	export type DateInputProps = DateOnlyInputProps | DateTimeInputProps;
-
-	export interface DateOnlyInputProps {
-		value?: InputDate | null;
-		label?: string;
-		placeholder?: string;
-		required?: boolean;
-		variant?: InputVariant;
-		min?: string;
-		max?: string;
-		optional?: boolean;
-		type?: 'date';
-		disabled?: boolean;
-		leftIcon?: PartialIconProps;
-		rightIcon?: PartialIconProps;
-		inputRef?: HTMLInputElement;
-		invalid?: boolean;
-		onblur?: (e: FocusEvent) => void;
-		onfocus?: (e: FocusEvent) => void;
-	}
-
-	export interface DateTimeInputProps {
-		value?: InputDateWithTime | null;
-		label?: string;
-		placeholder?: string;
-		required?: boolean;
-		variant?: InputVariant;
-		min?: string;
-		max?: string;
-		optional?: boolean;
-		type?: 'datetime-local';
-		disabled?: boolean;
-		leftIcon?: PartialIconProps;
-		rightIcon?: PartialIconProps;
-		inputRef?: HTMLInputElement;
-		invalid?: boolean;
-		onblur?: (e: FocusEvent) => void;
-		onfocus?: (e: FocusEvent) => void;
-	}
+	import type { DateInputProps } from './DateInputProps.js';
+	import Icon from './Icon.svelte';
 </script>
 
 <script lang="ts">

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

@@ -1,43 +1,4 @@
-import { InputVariant } from '../Types/Internal/InputVariant.js';
-import type { InputDate, InputDateWithTime } from '../Types/Internal/Misc.js';
-import { type PartialIconProps } from './Icon.svelte';
-export type DateInputProps = DateOnlyInputProps | DateTimeInputProps;
-export interface DateOnlyInputProps {
-    value?: InputDate | null;
-    label?: string;
-    placeholder?: string;
-    required?: boolean;
-    variant?: InputVariant;
-    min?: string;
-    max?: string;
-    optional?: boolean;
-    type?: 'date';
-    disabled?: boolean;
-    leftIcon?: PartialIconProps;
-    rightIcon?: PartialIconProps;
-    inputRef?: HTMLInputElement;
-    invalid?: boolean;
-    onblur?: (e: FocusEvent) => void;
-    onfocus?: (e: FocusEvent) => void;
-}
-export interface DateTimeInputProps {
-    value?: InputDateWithTime | null;
-    label?: string;
-    placeholder?: string;
-    required?: boolean;
-    variant?: InputVariant;
-    min?: string;
-    max?: string;
-    optional?: boolean;
-    type?: 'datetime-local';
-    disabled?: boolean;
-    leftIcon?: PartialIconProps;
-    rightIcon?: PartialIconProps;
-    inputRef?: HTMLInputElement;
-    invalid?: boolean;
-    onblur?: (e: FocusEvent) => void;
-    onfocus?: (e: FocusEvent) => void;
-}
+import type { DateInputProps } from './DateInputProps.js';
 declare const DateInput: import("svelte").Component<DateInputProps, {}, "value">;
 type DateInput = ReturnType<typeof DateInput>;
 export default DateInput;

package/dist/Components/DateInputProps.d.ts

@@ -0,0 +1,3 @@
+import type { DateOnlyInputProps } from './DateOnlyInputProps.js';
+import type { DateTimeInputProps } from './DateTimeInputProps.js';
+export type DateInputProps = DateOnlyInputProps | DateTimeInputProps;

package/dist/Components/DateInputProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/DateOnlyInputProps.d.ts

@@ -0,0 +1,21 @@
+import type { InputVariant } from '../Types/Internal/InputVariant.js';
+import type { InputDate } from '../Types/Internal/Misc.js';
+import type { PartialIconProps } from './PartialIconProps.js';
+export interface DateOnlyInputProps {
+    value?: InputDate | null;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    variant?: InputVariant;
+    min?: string;
+    max?: string;
+    optional?: boolean;
+    type?: 'date';
+    disabled?: boolean;
+    leftIcon?: PartialIconProps;
+    rightIcon?: PartialIconProps;
+    inputRef?: HTMLInputElement;
+    invalid?: boolean;
+    onblur?: (e: FocusEvent) => void;
+    onfocus?: (e: FocusEvent) => void;
+}

package/dist/Components/DateOnlyInputProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/DatePicker.svelte

@@ -31,23 +31,15 @@
 		'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 { generateShortUUID } from '../Helpers/Helpers.svelte.js';
+	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';
-	import type { DateChange } from '../Types/Internal/DateChange.js';
 
 	let {
 		date = $bindable(new Date()),
@@ -58,14 +50,14 @@
 		onsubmit
 	}: DatePickerProps = $props();
 
-	let focusableElements: HTMLDivElement[] = [];
+	let focusableElements: Array<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();
+	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());
 
@@ -80,7 +72,7 @@
 			}
 		}
 	});
-	const years_count = years_map[1] - years_map[0] + 1;
+	const years_count = $derived(years_map[1] - years_map[0] + 1);
 
 	//js months are zero-indexed
 
@@ -99,8 +91,8 @@
 		new Array<number>(60).fill(0).map((value, index) => value + index)
 	);
 
-	let dateChanged = ({ type, changedData }: DateChange<number>) => {
-		let newDate = (() => {
+	const dateChanged = ({ type, changedData }: DateChange<number>) => {
+		const newDate = (() => {
 			if (type === DatePickerType.Day) {
 				return new Date(
 					date.getFullYear(),
@@ -111,8 +103,8 @@
 					date.getSeconds()
 				);
 			} else if (type === DatePickerType.Month) {
-				let maxDayInSelectedMonth = new Date(date.getFullYear(), changedData + 1, 0).getDate();
-				let day = Math.min(date.getDate(), maxDayInSelectedMonth);
+				const maxDayInSelectedMonth = new Date(date.getFullYear(), changedData + 1, 0).getDate();
+				const day = Math.min(date.getDate(), maxDayInSelectedMonth);
 				return new Date(
 					date.getFullYear(),
 					changedData,
@@ -122,8 +114,8 @@
 					date.getSeconds()
 				);
 			} else if (type === DatePickerType.Year) {
-				let maxDayInSelectedMonth = new Date(changedData, date.getMonth() + 1, 0).getDate();
-				let day = Math.min(date.getDate(), maxDayInSelectedMonth);
+				const maxDayInSelectedMonth = new Date(changedData, date.getMonth() + 1, 0).getDate();
+				const day = Math.min(date.getDate(), maxDayInSelectedMonth);
 				return new Date(
 					changedData,
 					date.getMonth(),
@@ -150,7 +142,7 @@
 					changedData,
 					date.getSeconds()
 				);
-			} else if (type === DatePickerType.Seconds) {
+			} else {
 				return new Date(
 					date.getFullYear(),
 					date.getMonth(),
@@ -160,10 +152,6 @@
 					changedData
 				);
 			}
-
-			console.warn('Unhandled type changed');
-
-			return date;
 		})();
 
 		date = newDate;
@@ -217,11 +205,13 @@
 	}
 
 	onMount(() => {
-		tick().then(() => {
-			if (autofocus) {
-				dayRef?.focus();
-			}
-		});
+		tick()
+			.then(() => {
+				if (autofocus) {
+					dayRef?.focus();
+				}
+			})
+			.catch(devCatch);
 	});
 </script>
 

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

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

package/dist/Components/DatePickerProps.d.ts

@@ -0,0 +1,8 @@
+export interface DatePickerProps {
+    namedMonths: boolean;
+    onsubmit: (e?: SubmitEvent) => void;
+    autofocus?: boolean;
+    date?: Date;
+    showTime: boolean;
+    years_map?: [number, number];
+}

package/dist/Components/DatePickerProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/DateTimeInputProps.d.ts

@@ -0,0 +1,21 @@
+import type { InputVariant } from '../Types/Internal/InputVariant.js';
+import type { InputDateWithTime } from '../Types/Internal/Misc.js';
+import type { PartialIconProps } from './PartialIconProps.js';
+export interface DateTimeInputProps {
+    value?: InputDateWithTime | null;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    variant?: InputVariant;
+    min?: string;
+    max?: string;
+    optional?: boolean;
+    type?: 'datetime-local';
+    disabled?: boolean;
+    leftIcon?: PartialIconProps;
+    rightIcon?: PartialIconProps;
+    inputRef?: HTMLInputElement;
+    invalid?: boolean;
+    onblur?: (e: FocusEvent) => void;
+    onfocus?: (e: FocusEvent) => void;
+}

package/dist/Components/DateTimeInputProps.js

@@ -0,0 +1 @@
+export {};