@lavalogic/scoria 0.0.1

package/dist/Components/Table/Body/Rows/ColumnList.svelte.d.ts

@@ -0,0 +1,27 @@
+export interface ColumnListProps {
+    searchValue: string;
+}
+declare function $$render<T extends object>(): {
+    props: ColumnListProps;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ColumnList: $$IsomorphicComponent;
+type ColumnList<T extends object> = InstanceType<typeof ColumnList<T>>;
+export default ColumnList;

package/dist/Components/Table/Body/Rows/ColumnListRow.svelte

@@ -0,0 +1,187 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { dev } from '$app/environment';
+	import { getContext } from 'svelte';
+	import type { ColumnDef } from '../../Types/Columns/Definitions/ColumnDef.svelte.js';
+	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
+	import Checkbox from '../../../Checkbox.svelte';
+	import Icon from '../../../Icon.svelte';
+	import { Size } from '../../../../Types/Internal/Size.js';
+
+	export interface ColumnListRowProps<T extends object> {
+		columnDef: ColumnDef<T> | null;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	const { columnDef }: ColumnListRowProps<T> = $props();
+
+	const isExpandColumn = $derived(columnDef?.columnType === 'Expand');
+
+	let isBeingTargeted = $state(false);
+
+	function disableDragVisual() {
+		isBeingTargeted = false;
+	}
+
+	function togglePinLeft() {
+		if (columnDef == null) return;
+
+		tableContext.setColumnPinning((pinning) => {
+			const leftPinIndex = pinning.left?.indexOf(columnDef!.id) ?? -1;
+			const left = pinning.left?.concat() ?? [];
+			if (leftPinIndex !== -1) {
+				left.splice(leftPinIndex, 1);
+			} else {
+				left.push(columnDef!.id);
+			}
+
+			const rightPinIndex = pinning.right?.indexOf(columnDef!.id) ?? -1;
+			const right = pinning.right?.concat() ?? [];
+			if (rightPinIndex !== -1) {
+				right.splice(rightPinIndex, 1);
+			}
+			return { ...pinning, left, right };
+		});
+	}
+
+	function togglePinRight() {
+		if (columnDef == null) return;
+
+		tableContext.setColumnPinning((pinning) => {
+			const rightPinIndex = pinning.right?.indexOf(columnDef!.id) ?? -1;
+			const right = pinning.right?.concat() ?? [];
+
+			if (rightPinIndex !== -1) {
+				right.splice(rightPinIndex, 1);
+			} else {
+				right.push(columnDef!.id);
+			}
+
+			const leftPinIndex = pinning.left?.indexOf(columnDef!.id) ?? -1;
+			const left = pinning.left?.concat() ?? [];
+			if (leftPinIndex !== -1) {
+				left.splice(leftPinIndex, 1);
+			}
+
+			return { ...pinning, left, right };
+		});
+	}
+
+	const onVisibilityChange = (e: Event) => {
+		if (!columnDef) {
+			if (dev) {
+				console.error('no column def found:');
+				throw e;
+			}
+
+			return;
+		}
+		tableContext.updateVisibility((defs) => {
+			defs[columnDef.id] = (e.target as HTMLInputElement).checked;
+			return defs;
+		});
+	};
+</script>
+
+{#if columnDef}
+	<li
+		class="single-column"
+		class:targeted={isBeingTargeted}
+		id="{tableContext.tableName}-column-settings-{columnDef.id}"
+		draggable={tableContext.allowColumnReordering}
+		ondragstart={() => {
+			if (!columnDef) {
+				throw new Error('null column def');
+			}
+
+			tableContext.dragTarget = columnDef;
+		}}
+		ondragend={disableDragVisual}
+		ondragover={(e) => {
+			e.preventDefault();
+			if (tableContext.dragTarget?.id !== columnDef?.id) {
+				isBeingTargeted = true;
+			}
+		}}
+		ondragleave={disableDragVisual}
+		ondrop={disableDragVisual}
+	>
+		<Checkbox
+			icon={{ name: 'assessment' }}
+			id={`is-visible-${tableContext.tableName}-${columnDef.id}`}
+			value={tableContext.columnVisibility[columnDef.id] !== false}
+			onchange={onVisibilityChange}
+		/>
+
+		{#if tableContext.allowColumnReordering}
+			<!-- value={tableContext.columnPinning.left?.includes(columnDef.id) ?? false} -->
+			<Checkbox
+				disabled={isExpandColumn}
+				icon={{ name: 'pin-left' }}
+				id={`is-pinned-left-${tableContext.tableName}-${columnDef.id}`}
+				value={tableContext.columnPinning.left?.includes(columnDef.id) || false}
+				onchange={() => {
+					togglePinLeft();
+				}}
+			/>
+			<!-- value={tableContext.columnPinning.right?.includes(columnDef.id) ?? false} -->
+			<Checkbox
+				disabled={isExpandColumn}
+				icon={{ name: 'pin-right' }}
+				id={`is-pinned-right-${tableContext.tableName}-${columnDef.id}`}
+				value={tableContext.columnPinning.right?.includes(columnDef.id) || false}
+				onchange={() => {
+					togglePinRight();
+				}}
+			/>
+			<div
+				id={`drag-handle-${tableContext.tableName}-${columnDef.id}`}
+				style="display: flex; cursor: move;"
+			>
+				<Icon name="handle" size={Size.Large} />
+			</div>
+		{/if}
+		{#if typeof columnDef.header === 'function'}
+			<!-- columnDef.header({} ) //as unknown as HeaderContext<T, unknown> // props is unknown to me. What is this? -->
+			<span>{columnDef.id}</span>
+		{:else}
+			<span>{columnDef.header ?? columnDef.id}</span>
+		{/if}
+	</li>
+{:else}
+	<li
+		id="{tableContext.tableName}-column-settings-top-anchor"
+		class="single-column anchor"
+		class:targeted={isBeingTargeted}
+		ondragover={(e) => {
+			e.preventDefault();
+
+			if (tableContext.dragTarget?.id !== undefined) {
+				isBeingTargeted = true;
+			}
+		}}
+		ondragleave={disableDragVisual}
+		ondrop={disableDragVisual}
+	></li>
+{/if}
+
+<style>li {
+  box-sizing: border-box;
+}
+li.anchor {
+  height: 1rem;
+}
+li.targeted {
+  border-bottom: solid 2px #259fc7;
+}
+
+li.single-column {
+  display: flex;
+  gap: 1rem;
+  padding: 0.5rem 0.5rem;
+  align-items: center;
+}</style>

package/dist/Components/Table/Body/Rows/ColumnListRow.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { ColumnDef } from '../../Types/Columns/Definitions/ColumnDef.svelte.js';
+export interface ColumnListRowProps<T extends object> {
+    columnDef: ColumnDef<T> | null;
+}
+declare function $$render<T extends object>(): {
+    props: ColumnListRowProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ColumnListRow: $$IsomorphicComponent;
+type ColumnListRow<T extends object> = InstanceType<typeof ColumnListRow<T>>;
+export default ColumnListRow;

package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte

@@ -0,0 +1,305 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import Action from '../../../../Action.svelte';
+	import Portal from '../../../../Portal.svelte';
+	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
+	import { refWrapper } from '../../../../../Helpers/Helpers.svelte.js';
+	import { Colour, ColourSet } from '../../../../../scss/colours.js';
+	import { Size } from '../../../../../Types/Internal/Size.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+
+	export interface ActionsCellProps<T extends object> {
+		cell: TableCell<T>;
+	}
+
+	export let shownPopup = refWrapper<symbol | undefined>(undefined);
+</script>
+
+<script lang="ts" generics="T extends object">
+	import { getContext, tick, untrack } from 'svelte';
+	import TableAction from './TableAction.svelte';
+	import type { ActionsDef } from '../../../Types/Columns/Definitions/Actions/ActionsDef.svelte.js';
+	import type { TableActionButton } from '../../../Types/Columns/TableActionButton.js';
+	import type { TableCell } from '../../../Types/Columns/TableCell.js';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { MultiFocusEdge } from '../../../Types/Focus/MultiFocusEdge.js';
+	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+
+	const { cell }: ActionsCellProps<T> = $props();
+
+	const value = $derived(cell.getValue());
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const toastContext = getContext<ToastContext>(ToastContext.identifier);
+
+	const actions: TableActionButton<T>[] = $derived(
+		(cell.column.columnDef as ActionsDef<T>).actions
+	);
+
+	const thisPopup = $state(Symbol());
+	const thisPopupIsVisibile = $derived(thisPopup === shownPopup.value);
+	const hasValue: boolean = $derived(value !== undefined);
+	const edge: MultiFocusEdge | undefined = $state(undefined);
+	const focusDetails: TableFocusDetails<T> = $derived(
+		new TableFocusDetails(cell, tableContext, toastContext.toast)
+	);
+	let popupRef: HTMLDivElement | undefined = $state();
+	let cellRef: HTMLDivElement | undefined = $state();
+
+	let x = $state(0);
+	let y = $state(0);
+	$effect.pre(() => {
+		if (thisPopupIsVisibile && cellRef) {
+			const rect = cellRef.getBoundingClientRect();
+			untrack(() => {
+				const totalOffsetX = -6;
+				// (props.offsetX ?? 0) +
+				// (props.arrow === Side.Top || props.arrow === Side.Bottom
+				// 	? props.rect.width / 2
+				// 	: props.arrow === Side.Right
+				// 		? -6 //  arrow width
+				// 		: props.rect.width + 6); // arrow width
+
+				const totalOffsetY = rect.height / 2;
+				// (props.offsetY ?? 0) +
+				// (props.arrow === Side.Left || props.arrow === Side.Right
+				// 	? props.rect.height / 2
+				// 	: props.arrow === Side.Top
+				// 		? props.rect.height
+				// 		: 0);
+
+				x = rect.x + totalOffsetX;
+				y = rect.y + totalOffsetY;
+			});
+		}
+	});
+
+	let previousValidity = $state(Validity.Valid);
+	let validity = $state(Validity.Valid);
+	$effect(() => {
+		focusDetails.validityTuple.then(([newValidity]) => {
+			untrack(() => {
+				tick().then(() => {
+					validity = newValidity;
+				});
+			});
+		});
+	});
+
+	$effect(() => {
+		if (validity != previousValidity) {
+			untrack(() => {
+				tick().then(() => {
+					if (validity === Validity.Invalid) {
+						tableContext.addInvalidValue(cell.row.original);
+					} else {
+						tableContext.removeInvalidValue(cell.row.original);
+					}
+					previousValidity = validity;
+				});
+			});
+		}
+	});
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<td
+	id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+	tabIndex={hasValue ? 0 : undefined}
+	class="focusable"
+	class:multifocus={hasValue && focusDetails.isMultiFocused}
+	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}
+	class:left={edge === MultiFocusEdge.Left}
+	class:top-left={edge === MultiFocusEdge.TopLeft}
+	class:top={edge === MultiFocusEdge.Top}
+	class:top-right={edge === MultiFocusEdge.TopRight}
+	class:right={edge === MultiFocusEdge.Right}
+	class:bottom-right={edge === MultiFocusEdge.BottomRight}
+	class:bottom={edge === MultiFocusEdge.Bottom}
+	class:bottom-left={edge === MultiFocusEdge.BottomLeft}
+	class:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
+	onmousedown={(e) => {
+		// start focus only on left click
+		if (e.button === 0) {
+			if (e.shiftKey) {
+				e.preventDefault();
+				tableContext.setFocusEnd(focusDetails.coordinates);
+			} else {
+				tableContext.startFocus(focusDetails.coordinates);
+			}
+		}
+	}}
+	onmouseover={() => {
+		if (tableContext.isMousingDown) {
+			tableContext.setFocusEnd(focusDetails.coordinates);
+		}
+	}}
+	onmouseup={() => {
+		tableContext.endFocus(focusDetails.coordinates);
+	}}
+>
+	<div
+		class="slot-wrapper"
+		class:multifocus={focusDetails.isMultiFocused}
+		class:multifocus-start={focusDetails.isMultiFocusStart}
+		bind:this={cellRef}
+	>
+		<!-- TODO {isMultiFocusStart} -->
+		<Action
+			style={focusDetails.outline}
+			border={false}
+			size={Size.FillWidth}
+			icon={{ name: 'ellipsis', size: Size.Medium, colour: Colour['$brand-primary'] }}
+			colourSet={ColourSet.Auxiliary}
+			onclick={() => {
+				if (shownPopup.value === thisPopup) {
+					shownPopup.value = undefined;
+				} else {
+					shownPopup.value = thisPopup;
+				}
+			}}
+		/>
+	</div>
+	{#if thisPopupIsVisibile}
+		<Portal>
+			<div bind:this={popupRef} class="popup" style="--y: {y}px; --x: {x}px;">
+				<div class="action-container">
+					{#each actions as action (action.getLabel(cell.row.original, cell.row.index))}
+						<TableAction {action} {cell} />
+					{/each}
+				</div>
+			</div>
+		</Portal>
+	{/if}
+</td>
+
+<style>td {
+  transition: line-height 0.2s ease, height 0.2s ease;
+  --input-border: none;
+  --input-height: var(--height);
+  white-space: nowrap;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+  position: relative;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  border: solid 1px #cbd4da;
+  border-left: none;
+}
+
+td.multifocus {
+  background-color: var(--multifocus-colour, #e6f8fd);
+}
+td.multifocus.multifocus-start {
+  background-color: #ffffff;
+}
+
+td.info {
+  background-color: #1f81a0;
+}
+td.warning {
+  background-color: #f8eab8;
+}
+td.error {
+  background-color: #f9e9e9;
+}
+
+td {
+  max-height: var(--max-height);
+  height: var(--height);
+  box-sizing: content-box;
+  overflow-x: clip;
+  --td-padding-left: 0;
+  --td-padding-right: 0;
+}
+
+.popup {
+  position: fixed;
+  border-radius: 4px;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
+  background-color: white;
+  min-width: 80px;
+  z-index: 9999;
+  right: calc(100% - var(--x, 0));
+  top: var(--y, 0);
+  translate: 0 -50%;
+}
+.popup::before {
+  position: absolute;
+  content: "";
+  padding: 0.3rem;
+  z-index: -1;
+  top: 50%;
+  border-radius: 2px;
+  left: 100%;
+  translate: -50% -50%;
+  transform: rotate(45deg);
+  background-color: white;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
+}
+
+.action-container {
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 0.75rem;
+  background-color: #ffffff;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+td {
+  overflow: visible;
+}
+
+.top {
+  box-shadow: inset 0px 2px 0px 0px #259fc7;
+}
+
+.top-left {
+  box-shadow: inset 2px 2px 0px 0px #259fc7;
+}
+
+.top-right {
+  box-shadow: inset -2px 2px 0px 0px #259fc7;
+}
+
+.bottom-right {
+  box-shadow: inset -2px -2px 0px 0px #259fc7;
+}
+
+.bottom-left {
+  box-shadow: inset 2px -2px 0px 0px #259fc7;
+}
+
+.left {
+  box-shadow: inset 2px 0px 0px 0px #259fc7;
+}
+
+.right {
+  box-shadow: inset -2px 0px 0px 0px #259fc7;
+}
+
+.bottom {
+  box-shadow: inset 0px -2px 0px 0px #259fc7;
+}
+
+div.slot-wrapper.multifocus {
+  background-color: var(--multifocus-colour, #f4fbfd);
+}
+div.slot-wrapper.multifocus.multifocus-start {
+  background-color: #ffffff;
+}
+div.slot-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}</style>

package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte.d.ts

@@ -0,0 +1,29 @@
+export interface ActionsCellProps<T extends object> {
+    cell: TableCell<T>;
+}
+export declare let shownPopup: import("../../../../../Types/Internal/RefWrapper.js").RefWrapper<symbol | undefined>;
+import type { TableCell } from '../../../Types/Columns/TableCell.js';
+declare function $$render<T extends object>(): {
+    props: ActionsCellProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ActionsCell: $$IsomorphicComponent;
+type ActionsCell<T extends object> = InstanceType<typeof ActionsCell<T>>;
+export default ActionsCell;