@lavalogic/scoria 0.11.14 → 0.12.0

package/dist/Components/DesktopModal.svelte

@@ -1,33 +1,11 @@
 <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';
+	import type { DesktopModalProps } from './DesktopModalProps.js';
+	import LoadingOverlay from './LoadingOverlay.svelte';
+	import Modal from './Modal.svelte';
 
 	// testing modal
 

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

@@ -1,23 +1,4 @@
-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';
+import type { DesktopModalProps } from './DesktopModalProps.js';
 declare const DesktopModal: import("svelte").Component<DesktopModalProps, {}, "">;
 type DesktopModal = ReturnType<typeof DesktopModal>;
 export default DesktopModal;

package/dist/Components/DesktopModalProps.d.ts

@@ -0,0 +1,20 @@
+import type { CallbackButton } from '../Types/Internal/CallbackButton.js';
+import type { Snippet } from 'svelte';
+export interface DesktopModalProps {
+    onclose: () => void;
+    headerLabel: Snippet | string;
+    buttons: Array<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;
+}

package/dist/Components/DesktopModalProps.js

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

package/dist/Components/Dial.svelte

@@ -1,24 +1,8 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	import type { DateChange } from '../Types/Internal/DateChange.js';
-	import type { DatePickerType } from '../Types/Internal/DatePickerType.js';
-
-	export interface DialProps<T> {
-		selected: T;
-		values: T[];
-		labels: any[];
-		type: DatePickerType;
-		onsubmit: () => void;
-		onPrevious: (type: DatePickerType) => void;
-		onNext: (type: DatePickerType) => void;
-		onchange: (change: DateChange<T>) => void;
-		ref?: HTMLDivElement | undefined;
-	}
-</script>
-
 <script lang="ts" generics="T">
 	import { onMount } from 'svelte';
+	import type { DialProps } from './DialProps.js';
 
 	const optionHeight = 50;
 
@@ -34,7 +18,7 @@
 		onchange
 	}: DialProps<T> = $props();
 
-	let position = selected != null ? -values.indexOf(selected) * optionHeight : 0;
+	let position = $derived(selected != null ? -values.indexOf(selected) * optionHeight : 0);
 	let offset = 0;
 	let dragging = false;
 

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

@@ -1,16 +1,4 @@
-import type { DateChange } from '../Types/Internal/DateChange.js';
-import type { DatePickerType } from '../Types/Internal/DatePickerType.js';
-export interface DialProps<T> {
-    selected: T;
-    values: T[];
-    labels: any[];
-    type: DatePickerType;
-    onsubmit: () => void;
-    onPrevious: (type: DatePickerType) => void;
-    onNext: (type: DatePickerType) => void;
-    onchange: (change: DateChange<T>) => void;
-    ref?: HTMLDivElement | undefined;
-}
+import type { DialProps } from './DialProps.js';
 declare function $$render<T>(): {
     props: DialProps<T>;
     exports: {};

package/dist/Components/DialProps.d.ts

@@ -0,0 +1,13 @@
+import type { DateChange } from '../Types/Internal/DateChange.js';
+import type { DatePickerType } from '../Types/Internal/DatePickerType.js';
+export interface DialProps<T> {
+    selected: T;
+    values: Array<T>;
+    labels: Array<unknown>;
+    type: DatePickerType;
+    onsubmit: () => void;
+    onPrevious: (type: DatePickerType) => void;
+    onNext: (type: DatePickerType) => void;
+    onchange: (change: DateChange<T>) => void;
+    ref?: HTMLDivElement | undefined;
+}

package/dist/Components/DialProps.js

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

package/dist/Components/DimensionInput.svelte

@@ -1,53 +1,21 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script lang="ts">
 	import { InputVariant } from '../Types/Internal/InputVariant.js';
 	import type { Centimetres } from '../Types/Internal/Misc.js';
-	import { type PartialIconProps } from './Icon.svelte';
-	import type { FormEventHandler } from 'svelte/elements';
-
-	export interface DimensionInputProps {
-		id?: string | undefined;
-
-		x: Centimetres | null;
-		y: Centimetres | null;
-		z: Centimetres | null;
-
-		max?: number | undefined;
-		labelTop?: string | undefined;
-		placeholder?: string | undefined;
-		required?: boolean;
-		variant?: InputVariant;
-		decimal?: boolean;
-		invalid?: boolean;
-		showErrorColours?: boolean;
-		disabled?: boolean | undefined;
-		leftIcon?: PartialIconProps | undefined;
-		rightIcon?: PartialIconProps | undefined;
-		onLeftIconClick?: (() => void) | undefined;
-		onRightIconClick?: (() => void) | undefined;
-		inputRef?: HTMLInputElement | undefined;
-		'data-type'?: string;
-		onblur?: (e: FocusEvent) => void;
-		onfocus?: (e: FocusEvent) => void;
-		onkeydown?: (e: KeyboardEvent) => void;
-		oninput?: FormEventHandler<HTMLInputElement>;
-	}
+	import type { DimensionInputProps } from './DimensionInputProps.js';
 
 	const min = 0;
-</script>
-
-<script lang="ts">
 	let {
 		id,
 		x = $bindable(null),
 		y = $bindable(null),
 		z = $bindable(null),
 
-		labelTop,
-		rightIcon,
-		onLeftIconClick,
-		onRightIconClick,
+		// labelTop,
+		// rightIcon,
+		// onLeftIconClick,
+		// onRightIconClick,
 
 		max,
 		placeholder,
@@ -69,43 +37,48 @@
 		'data-type': dataType
 	}: DimensionInputProps = $props();
 
-	// TODO learn how these work properly and unify these three
-	function xNumberValidator(node: HTMLInputElement, newValue: number | null | undefined) {
+	// HACK unable to edit signature
+	/* eslint-disable @typescript-eslint/no-unused-vars */
+	function xNumberValidator(_node: HTMLInputElement, _newValue: number | null | undefined) {
+		// function xNumberValidator() {
 		return {
 			update(newValue: number) {
-				const underMinimum = min != undefined && min > newValue;
+				const underMinimum = min > newValue;
 				const overMaximum = max != undefined && max < newValue;
 
 				x = (
-					isNaN(newValue) ? 0 : underMinimum ? min! : overMaximum ? max! : newValue
+					isNaN(newValue) ? 0 : underMinimum ? min : overMaximum ? max : newValue
 				) as Centimetres;
 			}
 		};
 	}
-	function yNumberValidator(node: HTMLInputElement, newValue: number | null | undefined) {
+	function yNumberValidator(_node: HTMLInputElement, _newValue: number | null | undefined) {
 		return {
 			update(newValue: number) {
-				const underMinimum = min != undefined && min > newValue;
+				const underMinimum = min > newValue;
 				const overMaximum = max != undefined && max < newValue;
 
 				y = (
-					isNaN(newValue) ? 0 : underMinimum ? min! : overMaximum ? max! : newValue
+					isNaN(newValue) ? 0 : underMinimum ? min : overMaximum ? max : newValue
 				) as Centimetres;
 			}
 		};
 	}
-	function zNumberValidator(node: HTMLInputElement, newValue: number | null | undefined) {
+
+	function zNumberValidator(_node: HTMLInputElement, _newValue: number | null | undefined) {
+		// function zNumberValidator() {
 		return {
 			update(newValue: number) {
-				const underMinimum = min != undefined && min > newValue;
+				const underMinimum = min > newValue;
 				const overMaximum = max != undefined && max < newValue;
 
 				z = (
-					isNaN(newValue) ? 0 : underMinimum ? min! : overMaximum ? max! : newValue
+					isNaN(newValue) ? 0 : underMinimum ? min : overMaximum ? max : newValue
 				) as Centimetres;
 			}
 		};
 	}
+	/* eslint-enable @typescript-eslint/no-unused-vars */
 	// ^
 
 	let isInvalid = $derived(

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

@@ -1,32 +1,4 @@
-import { InputVariant } from '../Types/Internal/InputVariant.js';
-import type { Centimetres } from '../Types/Internal/Misc.js';
-import { type PartialIconProps } from './Icon.svelte';
-import type { FormEventHandler } from 'svelte/elements';
-export interface DimensionInputProps {
-    id?: string | undefined;
-    x: Centimetres | null;
-    y: Centimetres | null;
-    z: Centimetres | null;
-    max?: number | undefined;
-    labelTop?: string | undefined;
-    placeholder?: string | undefined;
-    required?: boolean;
-    variant?: InputVariant;
-    decimal?: boolean;
-    invalid?: boolean;
-    showErrorColours?: boolean;
-    disabled?: boolean | undefined;
-    leftIcon?: PartialIconProps | undefined;
-    rightIcon?: PartialIconProps | undefined;
-    onLeftIconClick?: (() => void) | undefined;
-    onRightIconClick?: (() => void) | undefined;
-    inputRef?: HTMLInputElement | undefined;
-    'data-type'?: string;
-    onblur?: (e: FocusEvent) => void;
-    onfocus?: (e: FocusEvent) => void;
-    onkeydown?: (e: KeyboardEvent) => void;
-    oninput?: FormEventHandler<HTMLInputElement>;
-}
+import type { DimensionInputProps } from './DimensionInputProps.js';
 declare const DimensionInput: import("svelte").Component<DimensionInputProps, {}, "x" | "z" | "y" | "inputRef">;
 type DimensionInput = ReturnType<typeof DimensionInput>;
 export default DimensionInput;

package/dist/Components/DimensionInputProps.d.ts

@@ -0,0 +1,29 @@
+import type { InputVariant } from '../Types/Internal/InputVariant.js';
+import type { Centimetres } from '../Types/Internal/Misc.js';
+import type { FormEventHandler } from 'svelte/elements';
+import type { PartialIconProps } from './PartialIconProps.js';
+export interface DimensionInputProps {
+    id?: string | undefined;
+    x: Centimetres | null;
+    y: Centimetres | null;
+    z: Centimetres | null;
+    max?: number | undefined;
+    labelTop?: string | undefined;
+    placeholder?: string | undefined;
+    required?: boolean;
+    variant?: InputVariant;
+    decimal?: boolean;
+    invalid?: boolean;
+    showErrorColours?: boolean;
+    disabled?: boolean | undefined;
+    leftIcon?: PartialIconProps | undefined;
+    rightIcon?: PartialIconProps | undefined;
+    onLeftIconClick?: (() => void) | undefined;
+    onRightIconClick?: (() => void) | undefined;
+    inputRef?: HTMLInputElement | undefined;
+    'data-type'?: string;
+    onblur?: (e: FocusEvent) => void;
+    onfocus?: (e: FocusEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    oninput?: FormEventHandler<HTMLInputElement>;
+}

package/dist/Components/DimensionInputProps.js

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

package/dist/Components/DragMenu/DragMenuHolder.svelte

@@ -1,33 +1,11 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	import { DraggableCard } from '../../index.js';
-	import { tick, type Snippet } from 'svelte';
-
-	export interface Draggable<T> {
-		id: string;
-		title: string;
-		subtitle: string;
-		original: T;
-		selected?: boolean;
-		toggleSelected?: () => void;
-	}
-
-	export interface DragMenuHolderProps<T> {
-		items: T[];
-		transformToDraggable: (item: T) => Draggable<T>;
-		snippet?: Snippet<[Draggable<T>, number]>;
-
-		onUpdate: (items: T[]) => void;
-
-		label?: string;
-		flipDurationMS?: number;
-	}
-</script>
-
 <script lang="ts" generics="T">
-	import { dndzone } from 'svelte-dnd-action';
+	import { type DndEvent, dndzone } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
+	import type { DragMenuHolderProps } from './DragMenuHolderProps.js';
+	import type { Draggable } from './Draggable.js';
+	import DraggableCard from './DraggableCard.svelte';
 
 	const {
 		items: originalItems,
@@ -38,12 +16,12 @@
 		label
 	}: DragMenuHolderProps<T> = $props();
 
-	let items: Draggable<T>[] = $state([]);
+	let items: Array<Draggable<T>> = $state([]);
 
-	function consider(newItems: Draggable<T>[]) {
+	function consider(newItems: Array<Draggable<T>>) {
 		items = newItems;
 	}
-	function finalise(newItems: Draggable<T>[]) {
+	function finalise(newItems: Array<Draggable<T>>) {
 		items = newItems;
 		onUpdate(items.map((it) => it.original));
 	}
@@ -54,32 +32,6 @@
 	});
 
 	const snippet = $derived(customSnippet ?? draggableWithSelect);
-
-	function up(item: Draggable<T>, index: number) {
-		const before = items.slice(0, index);
-		const next = before.pop();
-		const [removed, ...after] = items.slice(index);
-
-		before.push(removed);
-		if (next) {
-			before.push(next);
-		}
-		before.push(...after);
-		items = before;
-	}
-
-	function down(item: Draggable<T>, index: number) {
-		const before = items.slice(0, index);
-
-		const [removed, previous, ...after] = items.slice(index);
-
-		if (previous) {
-			before.push(previous);
-		}
-		before.push(removed);
-		before.push(...after);
-		items = before;
-	}
 </script>
 
 {#snippet draggableWithSelect<T>(item: Draggable<T>, index: number)}
@@ -100,10 +52,10 @@
 	<div
 		class="dnd"
 		use:dndzone={{ items, flipDurationMs: flipDurationMS, delayTouchStart: 30 }}
-		onconsider={(e) => {
+		onconsider={(e: CustomEvent<DndEvent<Draggable<T>>>) => {
 			consider(e.detail.items);
 		}}
-		onfinalize={(e) => {
+		onfinalize={(e: CustomEvent<DndEvent<Draggable<T>>>) => {
 			finalise(e.detail.items);
 		}}
 	>
@@ -120,6 +72,7 @@
 				}}
 				animate:flip={{ duration: flipDurationMS }}
 			>
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
 				{@render snippet(item, index)}
 			</div>
 		{/each}

package/dist/Components/DragMenu/DragMenuHolder.svelte.d.ts

@@ -1,20 +1,4 @@
-import { type Snippet } from 'svelte';
-export interface Draggable<T> {
-    id: string;
-    title: string;
-    subtitle: string;
-    original: T;
-    selected?: boolean;
-    toggleSelected?: () => void;
-}
-export interface DragMenuHolderProps<T> {
-    items: T[];
-    transformToDraggable: (item: T) => Draggable<T>;
-    snippet?: Snippet<[Draggable<T>, number]>;
-    onUpdate: (items: T[]) => void;
-    label?: string;
-    flipDurationMS?: number;
-}
+import type { DragMenuHolderProps } from './DragMenuHolderProps.js';
 declare function $$render<T>(): {
     props: DragMenuHolderProps<T>;
     exports: {};

package/dist/Components/DragMenu/DragMenuHolderProps.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { Draggable } from './Draggable.js';
+export interface DragMenuHolderProps<T> {
+    items: Array<T>;
+    transformToDraggable: (item: T) => Draggable<T>;
+    snippet?: Snippet<[Draggable<T>, number]>;
+    onUpdate: (items: Array<T>) => void;
+    label?: string;
+    flipDurationMS?: number;
+}

package/dist/Components/DragMenu/DragMenuHolderProps.js

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

package/dist/Components/DragMenu/Draggable.d.ts

@@ -0,0 +1,8 @@
+export interface Draggable<T> {
+    id: string;
+    title: string;
+    subtitle: string;
+    original: T;
+    selected?: boolean;
+    toggleSelected?: () => void;
+}

package/dist/Components/DragMenu/Draggable.js

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

package/dist/Components/DragMenu/DraggableCard.svelte

@@ -1,20 +1,8 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	export interface DraggableCardProps {
-		selectable: boolean;
-		title: string;
-		subtitle: string;
-		index: number;
-
-		touch?: boolean;
-		selected?: boolean; // default false
-		toggleSelected?: () => void;
-	}
-</script>
-
 <script lang="ts">
 	import Checkbox from '../Checkbox.svelte';
+	import type { DraggableCardProps } from './DraggableCardProps.js';
 
 	let {
 		selectable,
@@ -32,7 +20,11 @@
 		<div class="limit-size" class:touch>
 			<Checkbox
 				value={selected}
-				onchange={(e) => {
+				onchange={(
+					e: Event & {
+						currentTarget: EventTarget & HTMLInputElement;
+					}
+				) => {
 					e.stopPropagation();
 					toggleSelected?.();
 				}}

package/dist/Components/DragMenu/DraggableCard.svelte.d.ts

@@ -1,12 +1,4 @@
-export interface DraggableCardProps {
-    selectable: boolean;
-    title: string;
-    subtitle: string;
-    index: number;
-    touch?: boolean;
-    selected?: boolean;
-    toggleSelected?: () => void;
-}
+import type { DraggableCardProps } from './DraggableCardProps.js';
 declare const DraggableCard: import("svelte").Component<DraggableCardProps, {}, "selected">;
 type DraggableCard = ReturnType<typeof DraggableCard>;
 export default DraggableCard;

package/dist/Components/DragMenu/DraggableCardProps.d.ts

@@ -0,0 +1,9 @@
+export interface DraggableCardProps {
+    selectable: boolean;
+    title: string;
+    subtitle: string;
+    index: number;
+    touch?: boolean;
+    selected?: boolean;
+    toggleSelected?: () => void;
+}

package/dist/Components/DragMenu/DraggableCardProps.js

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

package/dist/Components/FileCard.svelte

@@ -1,14 +1,8 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	export interface FileCardProps {
-		file: File;
-		ondelete: () => void;
-	}
-</script>
-
 <script lang="ts">
 	import Action from './Action.svelte';
+	import type { FileCardProps } from './FileCardProps.js';
 
 	const { file, ondelete }: FileCardProps = $props();
 </script>

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

@@ -1,7 +1,4 @@
-export interface FileCardProps {
-    file: File;
-    ondelete: () => void;
-}
+import type { FileCardProps } from './FileCardProps.js';
 declare const FileCard: import("svelte").Component<FileCardProps, {}, "">;
 type FileCard = ReturnType<typeof FileCard>;
 export default FileCard;

package/dist/Components/FileCardProps.d.ts

@@ -0,0 +1,4 @@
+export interface FileCardProps {
+    file: File;
+    ondelete: () => void;
+}

package/dist/Components/FileCardProps.js

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

package/dist/Components/FileUpload.svelte

@@ -1,38 +1,14 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	export interface FileUploadProps {
-		accept: string;
-		files: File[];
-		multiple?: boolean;
-		onblur?: (e: FocusEvent) => void;
-		onfocus?: (e: FocusEvent) => void;
-		labelTop?: string | undefined;
-		labelRight?: string;
-		placeholder?: string | undefined;
-		required?: boolean;
-		variant?: InputVariant;
-		selectNone?: boolean;
-		optional?: boolean;
-		uppercase?: boolean;
-		disabled?: boolean;
-		leftIcon?: PartialIconProps;
-		rightIcon?: PartialIconProps;
-		onLeftIconClick?: () => void;
-		onRightIconClick?: () => void;
-		inputRef?: HTMLInputElement | undefined;
-		noresize?: boolean;
-	}
-</script>
-
 <script lang="ts">
-	import Icon, { type PartialIconProps } from './Icon.svelte';
-	import Action from './Action.svelte';
-	import FileCard from './FileCard.svelte';
 	import { ColourSet } from '../scss/colours.js';
 	import { InputVariant } from '../Types/Internal/InputVariant.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import { onMount } from 'svelte';
+	import Action from './Action.svelte';
+	import FileCard from './FileCard.svelte';
+	import type { FileUploadProps } from './FileUploadProps.js';
+	import Icon from './Icon.svelte';
 
 	let _files: FileList | null | undefined = $state();
 
@@ -61,7 +37,7 @@
 	}: FileUploadProps = $props();
 
 	function onchange(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
-		const markedFiles = (e.target as HTMLInputElement).files!;
+		const markedFiles = (e.target as HTMLInputElement).files ?? [];
 		for (let i = 0; i < markedFiles.length; i++) {
 			files.push(markedFiles[i]);
 		}
@@ -82,7 +58,7 @@
 			return;
 		}
 
-		const len = e.dataTransfer.files.length ?? 0;
+		const len = e.dataTransfer.files.length;
 		for (let i = 0; i < len; i++) {
 			files.push(e.dataTransfer.files[i]);
 		}
@@ -183,7 +159,9 @@
 				icon={{ name: 'upload' }}
 				label="Delete"
 				size={Size.Medium}
-				onclick={() => a()}
+				onclick={() => {
+					a();
+				}}
 			/>
 		</div>
 		<!-- </div> -->