@lavalogic/scoria 0.0.1

package/dist/Components/FileUpload.svelte

@@ -0,0 +1,413 @@
+<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 { dev } from '$app/environment';
+	import { ColourSet } from '../scss/colours.js';
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import { Size } from '../Types/Internal/Size.js';
+
+	let _files: FileList | null | undefined = $state();
+
+	let {
+		accept,
+		files = $bindable([]),
+		multiple = false,
+		labelTop,
+		labelRight,
+		placeholder,
+		required = false,
+		variant = InputVariant.Default,
+		selectNone = false,
+		noresize = false,
+		uppercase = false,
+		disabled,
+		optional = false,
+		leftIcon,
+		rightIcon,
+		onLeftIconClick,
+		onRightIconClick,
+
+		inputRef = $bindable(),
+		onblur,
+		onfocus
+	}: FileUploadProps = $props();
+
+	function onchange(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		const markedFiles = (e.target as HTMLInputElement).files!;
+		for (let i = 0; i < markedFiles.length; i++) {
+			files.push(markedFiles[i]);
+		}
+	}
+
+	function a() {
+		inputRef?.showPicker();
+	}
+
+	let dragover = $state(false);
+
+	function ondrop(e: DragEvent) {
+		e.stopPropagation();
+		e.preventDefault();
+		dragover = false;
+
+		if (!e.dataTransfer?.files) {
+			return;
+		}
+
+		const len = e.dataTransfer.files.length ?? 0;
+		for (let i = 0; i < len; i++) {
+			files.push(e.dataTransfer.files[i]);
+		}
+	}
+
+	function ondragover(e: DragEvent) {
+		e.preventDefault();
+
+		dragover = true;
+	}
+
+	function ondragleave(e: DragEvent) {
+		e.preventDefault();
+
+		dragover = false;
+	}
+</script>
+
+<label
+	class:dragover
+	class:for-modal={variant === InputVariant.Modal}
+	{ondrop}
+	{ondragover}
+	{ondragleave}
+>
+	<!-- HACK removed label for modals for now because I couldn't think of a decent style that doesn't interfere with scrolling -->
+	{#if labelTop && variant !== InputVariant.Modal}
+		<!-- <span class="top-label" class:invalid={isInvalid}>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span> -->
+		<span class="top-label" class:for-default={variant === InputVariant.Default}
+			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+		>
+		{#if variant === InputVariant.Default}
+			<span class="border"
+				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+			>
+		{/if}
+	{/if}
+	<!-- style="--background-colour: {leftIcon?.backgroundColour ?? rightIcon?.backgroundColour};" -->
+	<div class="icon-container" class:for-modal={variant == InputVariant.Modal}>
+		{#if leftIcon}
+			<Icon
+				name={leftIcon.name}
+				size={leftIcon.size ?? Size.Medium}
+				colour={leftIcon.colour}
+				float
+				left="0.75rem"
+				top="50%"
+				anchorX="0"
+				anchorY="-50%"
+				clickable={!!onLeftIconClick}
+				onclick={onLeftIconClick}
+			/>
+		{/if}
+		<input
+			hidden
+			class:noresize
+			class:uppercase
+			class:select-none={selectNone}
+			class:left-pad={leftIcon != undefined}
+			class:right-pad={rightIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			bind:files={_files}
+			{onblur}
+			{accept}
+			{onfocus}
+			type="file"
+			bind:this={inputRef}
+			{placeholder}
+			{required}
+			{disabled}
+			{multiple}
+			{onchange}
+		/>
+
+		<div class="file-list">
+			{#if files.length}
+				{#each files as file, index (file)}
+					<FileCard
+						{file}
+						ondelete={() => {
+							files.splice(index, 1);
+						}}
+					/>
+				{/each}
+			{:else}
+				<p>
+					Drag and Drop or Click to Upload {#if multiple}multiple documents{:else}a document{/if}
+				</p>
+				{#if dev}<span>TODO drag and drop</span>{/if}
+			{/if}
+		</div>
+		<div class="side">
+			<Action
+				colourSet={ColourSet.Secondary}
+				backgroundColour="transparent"
+				icon={{ name: 'upload' }}
+				label="Delete"
+				size={Size.Medium}
+				onclick={() => a()}
+			/>
+		</div>
+		<!-- </div> -->
+		{#if rightIcon}
+			<Icon
+				name={rightIcon.name}
+				size={rightIcon.size ?? Size.Medium}
+				colour={rightIcon.colour}
+				float
+				right={variant == InputVariant.Modal ? '1rem' : '0.5rem'}
+				top="50%"
+				anchorX="0"
+				anchorY="-50%"
+				clickable={!!onRightIconClick}
+				onclick={onRightIconClick}
+			/>
+		{/if}
+		{#if labelRight}
+			<span class="right-label" class:for-modal={variant == InputVariant.Modal}>{labelRight}</span>
+		{/if}
+	</div>
+</label>
+
+<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;
+}
+
+div.icon-container {
+  border: var(--input-border, solid 1px #cbd4da);
+  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);
+  height: 90px;
+}
+
+div.file-list {
+  display: flex;
+  flex-flow: column nowrap;
+  flex-grow: 1;
+  gap: 0.375rem;
+  padding: 0.375rem 1.5rem;
+  padding-right: 4rem;
+  overflow-y: scroll;
+}
+
+div.side {
+  position: absolute;
+  right: 0.75rem;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+label {
+  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;
+}
+
+.dragover {
+  background-color: rgba(31, 129, 160, 0.4);
+}</style>

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

@@ -0,0 +1,27 @@
+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;
+}
+import { type PartialIconProps } from './Icon.svelte';
+import { InputVariant } from '../Types/Internal/InputVariant.js';
+declare const FileUpload: import("svelte").Component<FileUploadProps, {}, "inputRef" | "files">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

package/dist/Components/GridInput.svelte

@@ -0,0 +1,187 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { dev } from '$app/environment';
+	import type { GridItem } from '../Types/Internal/GridItem.js';
+	import type { GridMultiSelectItem } from '../Types/Internal/GridMultiSelectItem.js';
+	import type { GridMultiSelectItemAsObject } from '../Types/Internal/GridMultiSelectItemAsObject.js';
+	import type { GridMultiSelectItemAsPrimitive } from '../Types/Internal/GridMultiSelectItemAsPrimitive.js';
+	import type { GridSelectItem } from '../Types/Internal/GridSelectItem.js';
+	import type { GridSingleSelectItem } from '../Types/Internal/GridSingleSelectItem.js';
+	import type { GridSingleSelectItemAsObject } from '../Types/Internal/GridSingleSelectItemAsObject.js';
+	import type { GridSingleSelectItemAsPrimitive } from '../Types/Internal/GridSingleSelectItemAsPrimitive.js';
+	import type { GridTextItem } from '../Types/Internal/GridTextItem.js';
+	import MultiSelect from './MultiSelect.svelte';
+	import SingleSelect from './SingleSelect.svelte';
+	import TextInput from './TextInput.svelte';
+
+	export interface GridInputProps<V, VP> {
+		item: GridItem<V, VP>;
+		first: boolean;
+		last: boolean;
+	}
+
+	function isText<V, VP>(item: GridItem<V, VP>): item is GridTextItem {
+		return item.type == null || textTypes.has(item.type);
+	}
+
+	const textTypes = new Set(['text', 'email', 'tel']);
+</script>
+
+<script lang="ts" generics="V,VP">
+	const { item = $bindable(), first, last }: GridInputProps<V, VP> = $props();
+
+	function isSelect(
+		item: GridItem<V, VP>
+	): item is V extends object
+		? VP extends string & keyof V
+			? GridSelectItem<V, VP>
+			: never
+		: never {
+		return item.type == 'select';
+	}
+
+	function isMultiSelect<A extends object, B extends keyof A & string>(
+		item: GridSelectItem<A, B>
+	): item is GridMultiSelectItem<A, B> {
+		return 'multi' in item && item.multi === true;
+	}
+
+	function isMultiSelectPrimitive<A extends object, B extends keyof A & string>(
+		item: GridMultiSelectItem<A, B>
+	): item is GridMultiSelectItemAsPrimitive<A, B> {
+		return 'valueAsObject' in item && item.valueAsObject === false;
+	}
+
+	function isMultiSelectObject<A extends object, B extends keyof A & string>(
+		item: GridMultiSelectItem<A, B>
+	): item is GridMultiSelectItemAsObject<A, B> {
+		return 'valueAsObject' in item && item.valueAsObject === true;
+	}
+
+	function isSingleSelect<A extends object, B extends keyof A & string>(
+		item: GridSelectItem<A, B>
+	): item is GridSingleSelectItem<A, B> {
+		return !('multi' in item) || item.multi === false;
+	}
+
+	function isSingleSelectPrimitive<A extends object, B extends keyof A & string>(
+		item: GridSingleSelectItem<A, B>
+	): item is GridSingleSelectItemAsPrimitive<A, B> {
+		return 'valueAsObject' in item && item.valueAsObject === false;
+	}
+
+	function isSingleSelectObject<A extends object, B extends keyof A & string>(
+		item: GridSingleSelectItem<A, B>
+	): item is GridSingleSelectItemAsObject<A, B> {
+		return 'valueAsObject' in item && item.valueAsObject === true;
+	}
+</script>
+
+<label class:first class:last>
+	<div class="left">
+		<span class:first class:last>{item.label}</span>
+	</div>
+	{#if isText(item)}
+		<TextInput
+			disabled={item.disabled}
+			bind:value={item.value}
+			required={item.required}
+			invalid={item.invalid}
+		/>
+	{:else if isSelect(item)}
+		{#if isMultiSelect(item)}
+			{#await item.options}
+				loading…
+			{:then options}
+				{#if isMultiSelectObject(item)}
+					<MultiSelect
+						name={item.name}
+						{options}
+						valueAsObject={item.valueAsObject}
+						labelProp={item.labelProp}
+						valueProp={item.valueProp}
+						selectedValues={item.value}
+						invalid={item.invalid}
+						onchange={(v) => {
+							item.value = v;
+						}}
+					/>
+				{:else if isMultiSelectPrimitive(item)}
+					<MultiSelect
+						name={item.name}
+						{options}
+						valueAsObject={item.valueAsObject}
+						labelProp={item.labelProp}
+						valueProp={item.valueProp}
+						selectedValues={item.value}
+						invalid={item.invalid}
+						onchange={(v) => {
+							item.value = v.map((it) => it[item.valueProp]);
+						}}
+					/>
+				{/if}
+			{/await}
+		{:else if isSingleSelect(item)}
+			{#await item.options}
+				loading…
+			{:then options}
+				{#if isSingleSelectObject(item)}
+					<SingleSelect
+						{options}
+						name={item.name}
+						valueAsObject={item.valueAsObject}
+						labelProp={item.labelProp}
+						valueProp={item.valueProp}
+						value={item.value}
+						required={item.required}
+						clearable={!item.required}
+						disabled={item.disabled}
+						invalid={item.invalid}
+						onchange={(v) => {
+							item.value = v;
+						}}
+					/>
+				{:else if isSingleSelectPrimitive(item)}
+					<SingleSelect
+						{options}
+						name={item.name}
+						valueAsObject={item.valueAsObject}
+						labelProp={item.labelProp}
+						valueProp={item.valueProp}
+						value={item.value}
+						required={item.required}
+						clearable={!item.required}
+						disabled={item.disabled}
+						invalid={item.invalid}
+						onchange={(v) => {
+							item.value = v?.[item.valueProp] ?? null;
+						}}
+					/>
+				{/if}
+			{/await}
+		{/if}
+	{:else if dev}
+		<span>debug: no handler for type {item.type}</span>
+	{/if}
+</label>
+
+<style>label {
+  display: contents;
+  --input-border-radius: 0;
+  --sv-border-radius: 0;
+}
+label .left {
+  background-color: #eaeef3;
+  display: flex;
+  flex-flow: row nowrap;
+  padding: 0.75rem;
+  border-radius: 0;
+  align-items: center;
+}
+label.first {
+  border-radius: 4px 4px 0 0;
+}
+label.last {
+  border-radius: 0 0 4px 4px;
+}</style>

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

@@ -0,0 +1,30 @@
+import type { GridItem } from '../Types/Internal/GridItem.js';
+export interface GridInputProps<V, VP> {
+    item: GridItem<V, VP>;
+    first: boolean;
+    last: boolean;
+}
+declare function $$render<V, VP>(): {
+    props: GridInputProps<V, VP>;
+    exports: {};
+    bindings: "item";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V, VP> {
+    props(): ReturnType<typeof $$render<V, VP>>['props'];
+    events(): ReturnType<typeof $$render<V, VP>>['events'];
+    slots(): ReturnType<typeof $$render<V, VP>>['slots'];
+    bindings(): "item";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V, VP>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, VP>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, VP>['exports']>;
+    <V, VP>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const GridInput: $$IsomorphicComponent;
+type GridInput<V, VP> = InstanceType<typeof GridInput<V, VP>>;
+export default GridInput;

package/dist/Components/GridInputSet.svelte

@@ -0,0 +1,37 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export interface GridInputSetProps<V, VP> {
+		items: Array<GridItem<V, VP>>;
+		header?: Snippet;
+	}
+</script>
+
+<script lang="ts" generics="V,VP">
+	import GridInput from './GridInput.svelte';
+	import type { GridItem } from '../Types/Internal/GridItem.js';
+
+	const { items = $bindable(), header }: GridInputSetProps<V, VP> = $props();
+
+	const lastIndex = $derived(items.length - 1);
+</script>
+
+<div class="grid">
+	{#if header}
+		{@render header()}
+	{/if}
+	{#each items as item, index (item)}
+		<GridInput bind:item={items[index]} first={index == 0} last={index == lastIndex} />
+	{/each}
+</div>
+
+<style>.grid {
+  display: grid;
+  grid-template-columns: [label] 16rem [value] 1fr;
+  gap: 1px;
+  border: solid 1px #ced2d6;
+  border-radius: 4px;
+  background-color: #ced2d6;
+}</style>