@lavalogic/scoria 0.0.1

package/dist/Components/DimensionInput.svelte

@@ -0,0 +1,486 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	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>;
+	}
+
+	const min = 0;
+</script>
+
+<script lang="ts">
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import type { Centimetres } from '../Types/Internal/Misc.js';
+
+	import Icon, { type IconProps, type PartialIconProps } from './Icon.svelte';
+	import type { FormEventHandler } from 'svelte/elements';
+
+	let {
+		id,
+		x = $bindable(null),
+		y = $bindable(null),
+		z = $bindable(null),
+
+		labelTop,
+		rightIcon,
+		onLeftIconClick,
+		onRightIconClick,
+
+		max,
+		placeholder,
+		required = false,
+		variant = InputVariant.Default,
+		decimal = false,
+		invalid = false,
+		showErrorColours = false,
+		disabled,
+
+		leftIcon,
+
+		onblur,
+		onfocus,
+		onkeydown,
+		oninput,
+
+		inputRef = $bindable(),
+		'data-type': dataType
+	}: DimensionInputProps = $props();
+
+	// TODO learn how these work properly and unify these three
+	function xNumberValidator(node: HTMLInputElement, newValue: number | null | undefined) {
+		return {
+			update(newValue: number) {
+				const underMinimum = min != undefined && min > newValue;
+				const overMaximum = max != undefined && max < newValue;
+
+				x = (
+					isNaN(newValue) ? 0 : underMinimum ? min! : overMaximum ? max! : newValue
+				) as Centimetres;
+			}
+		};
+	}
+	function yNumberValidator(node: HTMLInputElement, newValue: number | null | undefined) {
+		return {
+			update(newValue: number) {
+				const underMinimum = min != undefined && min > newValue;
+				const overMaximum = max != undefined && max < newValue;
+
+				y = (
+					isNaN(newValue) ? 0 : underMinimum ? min! : overMaximum ? max! : newValue
+				) as Centimetres;
+			}
+		};
+	}
+	function zNumberValidator(node: HTMLInputElement, newValue: number | null | undefined) {
+		return {
+			update(newValue: number) {
+				const underMinimum = min != undefined && min > newValue;
+				const overMaximum = max != undefined && max < newValue;
+
+				z = (
+					isNaN(newValue) ? 0 : underMinimum ? min! : overMaximum ? max! : newValue
+				) as Centimetres;
+			}
+		};
+	}
+	// ^
+
+	let isInvalid = $derived(
+		showErrorColours &&
+			((required &&
+				(x == null ||
+					x.toString().trim() === '' ||
+					y == null ||
+					y.toString().trim() === '' ||
+					z == null ||
+					z.toString().trim() === '')) ||
+				invalid)
+	);
+</script>
+
+<div
+	class="error-wrapper"
+	class:for-modal={variant == InputVariant.Modal}
+	class:for-table={variant == InputVariant.Table}
+>
+	<span
+		class="top-label"
+		class:for-default={variant === InputVariant.Default}
+		class:invalid={isInvalid}>Dimensions - <span class="optional">optional</span></span
+	>
+	{#if variant === InputVariant.Default}
+		<span class="border">Dimensions - <span class="optional">optional</span></span>
+	{/if}
+	<!-- style="--background-colour: {leftIcon?.backgroundColour ?? rightIcon?.backgroundColour};" -->
+	<div class="icon-container" class:for-modal={variant == InputVariant.Modal}>
+		<input
+			{id}
+			class:for-default={variant === InputVariant.Default}
+			data-type={dataType}
+			use:xNumberValidator={x}
+			class:left-pad={leftIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			type="number"
+			bind:value={x as number}
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			{oninput}
+			bind:this={inputRef}
+			{placeholder}
+			{required}
+			{disabled}
+			{min}
+			{max}
+			step={decimal ? 0.01 : 1}
+		/>
+		<input
+			{id}
+			class:for-default={variant === InputVariant.Default}
+			data-type={dataType}
+			use:yNumberValidator={y}
+			class:left-pad={leftIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			type="number"
+			bind:value={y as number}
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			{oninput}
+			bind:this={inputRef}
+			{placeholder}
+			{required}
+			{disabled}
+			{min}
+			{max}
+			step={decimal ? 0.01 : 1}
+		/>
+		<input
+			{id}
+			class:for-default={variant === InputVariant.Default}
+			data-type={dataType}
+			use:zNumberValidator={z}
+			class:left-pad={leftIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			type="number"
+			bind:value={z as number}
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			{oninput}
+			bind:this={inputRef}
+			{placeholder}
+			{required}
+			{disabled}
+			{min}
+			{max}
+			step={decimal ? 0.01 : 1}
+		/>
+		<div class="spacer"></div>
+		<span class="right-label inset" class:for-modal={variant == InputVariant.Modal}>cm</span>
+	</div>
+</div>
+
+<style>input {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  font-size: 0.9375rem;
+  font-weight: 400;
+  padding-top: var(--input-padding-top, 0.65rem);
+  padding-bottom: var(--input-padding-bottom, 0.55rem);
+  padding-left: var(--input-padding-left, 0.75rem);
+  padding-right: var(--input-padding-right, 0.75rem);
+  border: var(--input-border, solid 1px #cbd4da);
+  color: #3a4952;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+  border-radius: var(--input-border-radius, 4px);
+}
+input:disabled {
+  background-color: #f4f7f9;
+}
+input.for-default:focus-visible {
+  outline-offset: -1px;
+  outline-width: 1px;
+}
+input.invalid {
+  border-color: #aa1414;
+  color: #aa1414;
+  background-color: #f9e9e9;
+}
+input.invalid:focus, input.invalid:focus-visible {
+  outline-color: #aa1414 !important;
+}
+
+span {
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+}
+
+span.right-label.inset {
+  user-select: none;
+  font-size: 1rem;
+  font-weight: 500;
+  position: absolute;
+  background-color: #f4f7f9;
+  border-left: solid 1px #cbd4da;
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+  border-radius: 0 4px 4px 0;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  aspect-ratio: 1/1;
+  align-content: center;
+  text-align: center;
+}
+
+span.right-label {
+  color: #46525b;
+  display: inline;
+  flex-basis: 2rem;
+}
+span.right-label.for-modal {
+  align-self: center;
+  margin-top: 1rem;
+}
+
+span.for-default {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.9375rem;
+  user-select: none;
+  padding-left: 0.4rem;
+  padding-right: 0.4rem;
+  padding: 0.1rem 0.4rem;
+  top: -0.6rem;
+  z-index: 2;
+  color: #647d8e;
+  white-space: nowrap;
+}
+span.for-default.invalid {
+  color: #aa1414;
+}
+
+span.border {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.9375rem;
+  user-select: none;
+  padding-left: 0.4rem;
+  padding-right: 0.4rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  z-index: 1;
+  white-space: nowrap;
+  top: 0%;
+  height: 0;
+  color: transparent;
+  border-bottom: solid 1px #ffffff;
+}
+span.border.invalid {
+  border-bottom-color: #f9e9e9;
+}
+
+.select-none {
+  user-select: none;
+}
+
+.left-pad {
+  padding-left: 3rem;
+}
+
+.right-pad {
+  padding-right: 3rem;
+}
+
+.icon-container {
+  position: relative;
+  display: flex;
+  flex-flow: row;
+  width: 100%;
+  height: 100%;
+  gap: 1.5rem;
+}
+.icon-container.for-modal {
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.error {
+  color: #aa1414;
+  margin-left: 0.25rem;
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.right-icon {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  translate: 0 -50%;
+}
+
+label {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.error-wrapper {
+  display: block;
+  height: max(var(--input-height, 3rem));
+  width: var(--input-width, 100%);
+}
+.error-wrapper.for-table {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.error-wrapper.for-modal {
+  flex: unset;
+  position: relative;
+  height: 4.17rem;
+}
+
+label.for-modal {
+  box-sizing: border-box;
+  font-size: 1.5rem;
+  position: relative;
+  display: block;
+  width: 100%;
+}
+label.for-modal span.top-label {
+  color: #647d8e;
+  --colour: #8096a5;
+  font-size: 0.9375rem;
+  z-index: 1;
+  position: absolute;
+  top: 0.45rem;
+  left: 0.75rem;
+}
+label.for-modal span.top-label.invalid {
+  color: #aa1414;
+}
+label.for-modal input {
+  font-size: 2rem;
+  box-sizing: border-box;
+  flex-grow: 1;
+}
+label.for-modal input.uppercase {
+  text-transform: uppercase;
+}
+label.for-modal input:focus {
+  outline-color: #1f81a0;
+}
+label.for-modal input.for-modal {
+  border-radius: 0;
+  height: 100%;
+  resize: none;
+  padding-top: 1.44rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.75rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+label.for-modal input.for-modal.left-pad {
+  padding-left: 3.5rem;
+}
+label.for-modal input.for-modal.right-pad {
+  padding-right: 3.5rem;
+}
+label.for-modal input {
+  height: 3rem;
+}
+
+label.for-table {
+  display: flex;
+  width: 100%;
+}
+label.for-table input {
+  height: unset;
+}
+
+input[type=number] {
+  appearance: textfield;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+}
+
+.error-wrapper {
+  position: relative;
+}
+.error-wrapper span.optional {
+  font-style: italic;
+}
+
+span.top-label,
+span.border {
+  user-select: none;
+}
+
+span.right-label.inset {
+  border-left-color: transparent;
+}
+
+div.spacer {
+  border: solid 1px #cbd4da;
+  border-left-color: transparent;
+  border-radius: 0 4px 4px 0;
+  width: 47px;
+  flex-shrink: 0;
+}
+
+.icon-container {
+  gap: 0rem;
+}
+.icon-container input {
+  border-radius: 0;
+}
+.icon-container input:first-of-type {
+  border-radius: 4px 0 0 4px;
+  border-right-color: transparent;
+}
+.icon-container input:last-of-type {
+  border-radius: 0;
+  border-left-color: transparent;
+}</style>

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

@@ -0,0 +1,32 @@
+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 { 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';
+declare const DimensionInput: import("svelte").Component<DimensionInputProps, {}, "x" | "z" | "inputRef" | "y">;
+type DimensionInput = ReturnType<typeof DimensionInput>;
+export default DimensionInput;

package/dist/Components/FileCard.svelte

@@ -0,0 +1,32 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface FileCardProps {
+		file: File;
+		ondelete: () => void;
+	}
+</script>
+
+<script lang="ts">
+	import Action from './Action.svelte';
+
+	const { file, ondelete }: FileCardProps = $props();
+</script>
+
+<div>
+	<span>{file.name}</span>
+	<Action
+		icon={{ name: 'circle-cross' }}
+		backgroundColour="transparent"
+		label="Delete"
+		onclick={ondelete}
+	/>
+</div>
+
+<style>div {
+  display: flex;
+  flex-flow: row nowrap;
+  flex-grow: 1;
+  align-items: center;
+  gap: 0.375rem;
+}</style>

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

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