@lavalogic/scoria 0.0.1

package/dist/Components/Table/Headers/TableHead.svelte

@@ -0,0 +1,366 @@
+<svelte:options runes />
+
+<script module lang="ts">
+	import { dev } from '$app/environment';
+	import Icon from '../../Icon.svelte';
+	import { TooltipContext } from '../../../Contexts/TooltipContext.svelte.js';
+	import { Delay } from '../../../Delay/Delay.js';
+	import { Colour } from '../../../scss/colours.js';
+	import { Side } from '../../../Types/Internal/Side.js';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { getContext } from 'svelte';
+	import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import HighlightAllHeader from './HighlightAllHeader.svelte';
+	import SelectAllHeader from './SelectAllHeader.svelte';
+	import { ExpandDef } from '../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
+	import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
+	import type { HeaderGroup } from '../Types/HeaderGroup.js';
+	import { RowSelectionDef } from '../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
+
+	export interface TableHeadProps {
+		showHighlight: boolean;
+		side: 'left' | 'centre' | 'right';
+		oncontextmenu?: (e: MouseEvent) => void;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	const { showHighlight, side = 'centre', oncontextmenu }: TableHeadProps = $props();
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
+
+	const groups: HeaderGroup<T>[] = $derived.by(() => {
+		if (tableContext.table.columnVisibility || tableContext.table.columnPinning) {
+			return (
+				(side === 'left'
+					? tableContext.table?.getLeftHeaderGroups()
+					: side === 'right'
+						? tableContext.table?.getRightHeaderGroups()
+						: tableContext.table?.getCenterHeaderGroups()) ?? []
+			);
+		}
+
+		return [];
+	});
+
+	const iconNames = {
+		asc: 'sort-asc',
+		desc: 'sort-desc',
+		none: 'sort-none'
+	} as const;
+
+	let currentDropTarget: HTMLTableCellElement | null = $state(null);
+
+	function setCurrentDropTarget(target: EventTarget | null) {
+		currentDropTarget = target as HTMLTableCellElement | null;
+	}
+
+	function showtooltip(e: MouseEvent, columnDef: ColumnDef<T>): void {
+		if (columnDef instanceof ExpandDef) {
+			const rect = (e.target as HTMLElement).closest('th')?.getBoundingClientRect();
+
+			if (!rect) {
+				if (dev) {
+					alert('could not find closest TH');
+				}
+
+				return;
+			}
+
+			tooltipContext.showTooltip({
+				text: `Show ${typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}`,
+				arrow: Side.Bottom,
+				delay: Delay.Default,
+				rect
+			});
+		}
+	}
+
+	function hideTooltip(columnDef: ColumnDef<T>): void {
+		if (columnDef instanceof ExpandDef) {
+			tooltipContext.hideTooltip(
+				`Show ${typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}`
+			);
+		}
+	}
+
+	function onDrop() {
+		if (!tableContext.dragTarget) {
+			return;
+		}
+
+		// const dropTarget = (e.target as HTMLElement)?.closest('th');
+		const dropTarget = currentDropTarget?.closest('th');
+
+		if (dropTarget) {
+			tableContext.reorderColumn(dropTarget);
+		}
+
+		currentDropTarget = null;
+	}
+
+	function setDragTarget(def: ColumnDef<T>) {
+		tableContext.dragTarget = def;
+	}
+
+	const currentDropTargetId = $derived(
+		(currentDropTarget as HTMLElement | null | undefined)?.closest('th')?.id
+	);
+</script>
+
+<thead
+	oncontextmenu={(e) => {
+		e.stopPropagation();
+		oncontextmenu?.(e);
+	}}
+>
+	{#each groups as group (group)}
+		<tr>
+			{#if showHighlight && group.headers.length}
+				<th id="highlight-header" draggable={false} colspan="1" class="highlight-column">
+					<div class="th">
+						<HighlightAllHeader />
+					</div>
+				</th>
+			{/if}
+
+			{#each group.headers as header (header)}
+				{@const headerId = `${tableContext.tableName}-header-${header.id}`}
+				<!-- {@const computedSize = tableContext.measureHeaderWidth(header.column.columnDef)} -->
+				<th
+					id={headerId}
+					draggable={tableContext.allowColumnReordering}
+					colSpan={header.colSpan}
+					style="width: {Math.max(
+						// computedSize,
+						// header.column.columnDef.minSize ?? 0,
+						// tableContext.columnSizing[header.id] ??
+						header.getSize()
+					)}px"
+					class:action-column={!header.column.getCanSort()}
+					class:targeted={currentDropTargetId === headerId}
+					ondragstart={() => {
+						setDragTarget(header.column.columnDef);
+					}}
+					ondragover={(e) => {
+						e.preventDefault();
+						if (tableContext.dragTarget?.id !== header.id) {
+							setCurrentDropTarget(e.target);
+						} else {
+							setCurrentDropTarget(null);
+						}
+					}}
+					ondrop={onDrop}
+				>
+					{#if !header.isPlaceholder}
+						<div class="margin-right">
+							{#if header.column.getCanSort()}
+								<button
+									onmouseenter={(e) => showtooltip(e, header.column.columnDef)}
+									onmouseleave={() => hideTooltip(header.column.columnDef)}
+									class="contents"
+									onclick={header.column.getToggleSortingHandler()}
+								>
+									<div class="th cursor-pointer select-none">
+										<div class="header-text-wrapper">
+											{#if header.column.columnDef instanceof RowSelectionDef}
+												<SelectAllHeader />
+											{:else}
+												{#if header.column.columnDef instanceof ExpandDef}
+													<Icon
+														name={header.column.columnDef.headerIcon}
+														colour={Colour['$font-primary']}
+													/>
+												{:else if typeof header.column.columnDef.header == 'string'}
+													{header.column.columnDef.header}
+												{:else}
+													{@render header.column.columnDef.header()}
+												{/if}
+												<Icon
+													variant={Variant.HeaderIcon}
+													size={Size.Medium}
+													name={iconNames[header.column.getIsSorted() || 'none']}
+												/>
+											{/if}
+										</div>
+									</div>
+								</button>
+							{:else}
+								{@const isRowSelect = header.column.columnDef instanceof RowSelectionDef}
+								<!-- svelte-ignore a11y_no_static_element_interactions -->
+								<div
+									onmouseenter={(e) => showtooltip(e, header.column.columnDef)}
+									onmouseleave={() => hideTooltip(header.column.columnDef)}
+									class="contents"
+								>
+									<div class="th" class:nopadding={isRowSelect}>
+										<div class="header-text-wrapper no-sort cursor-pointer select-none">
+											{#if isRowSelect}
+												<SelectAllHeader />
+											{:else if header.column.columnDef instanceof ExpandDef}
+												<Icon
+													name={header.column.columnDef.headerIcon}
+													colour={Colour['$font-primary']}
+												/>
+											{:else if typeof header.column.columnDef.header == 'string'}
+												{header.column.columnDef.header}
+											{:else}
+												{@render header.column.columnDef.header()}
+											{/if}
+										</div>
+									</div>
+								</div>
+							{/if}
+
+							{#if tableContext.enableResize}
+								<!-- svelte-ignore a11y_no_static_element_interactions -->
+								<div
+									onmousedown={(e) => {
+										e.preventDefault();
+										e.stopImmediatePropagation();
+										const handler = header.getResizeHandler();
+										handler(e);
+									}}
+									ondblclick={() => {
+										tableContext.autoResize(header.column.columnDef);
+									}}
+									class="resizer right"
+									class:isResizing={header.column.getIsResizing()}
+								></div>
+							{/if}
+						</div>
+					{/if}
+				</th>
+			{/each}
+		</tr>
+	{/each}
+</thead>
+
+<style>th {
+  position: relative;
+  min-width: fit-content;
+  color: #000000;
+  border: solid 1px #cbd4da;
+}
+
+.margin-right {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+div.no-sort {
+  justify-content: center;
+}
+
+th {
+  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;
+  height: 100%;
+}
+
+th.targeted * {
+  background-color: #259fc7;
+}
+th.targeted {
+  background-color: #259fc7;
+  --background-colour: #259fc7;
+}
+
+div.contents,
+button.contents {
+  display: contents;
+  cursor: pointer;
+  user-select: none;
+}
+
+thead {
+  position: sticky;
+  top: 0px;
+  z-index: 1;
+}
+thead tr th {
+  background-color: #ffffff;
+  overflow: hidden;
+  min-width: min-content;
+  height: 3rem;
+}
+
+button div.th:not(.nopadding) {
+  padding: 0.75rem;
+}
+
+div.th {
+  min-width: calc(min-content + 2rem);
+  display: flex;
+  flex-flow: row nowrap;
+  white-space: nowrap;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  font-weight: 700;
+  font-size: 0.9375rem;
+  justify-content: center;
+  box-sizing: border-box;
+  width: calc(100% - 1rem);
+  margin: 0 auto;
+}
+div.th .header-text-wrapper {
+  color: #3a4952;
+  flex-shrink: 1;
+  text-overflow: ellipsis;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+div.th::after {
+  content: " ";
+  border-bottom: solid 1px #cbd4da;
+  display: block;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  left: 0;
+  right: 0;
+}
+
+.resizer {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 6px;
+  background: rgba(0, 0, 0, 0);
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+}
+.resizer.isResizing {
+  background: rgba(31, 129, 160, 0.4);
+  opacity: 1;
+}
+.resizer.right {
+  right: 0;
+}
+
+.highlight-column {
+  width: 20px;
+  overflow: hidden;
+}
+
+tr {
+  line-height: var(--line-height, 3);
+}
+tr th {
+  border-top: none;
+  border-bottom: none;
+}
+tr th:first-of-type {
+  border-left: none;
+}
+tr th:last-of-type {
+  border-right: none;
+}</style>

package/dist/Components/Table/Headers/TableHead.svelte.d.ts

@@ -0,0 +1,29 @@
+export interface TableHeadProps {
+    showHighlight: boolean;
+    side: 'left' | 'centre' | 'right';
+    oncontextmenu?: (e: MouseEvent) => void;
+}
+declare function $$render<T extends object>(): {
+    props: TableHeadProps;
+    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 TableHead: $$IsomorphicComponent;
+type TableHead<T extends object> = InstanceType<typeof TableHead<T>>;
+export default TableHead;

package/dist/Components/Table/Misc/ColumnPanel.svelte

@@ -0,0 +1,96 @@
+<svelte:options runes />
+
+<script lang="ts" generics="T extends object">
+	import Button from '../../Button.svelte';
+	import SingleSelect from '../../SingleSelect.svelte';
+	import TextInput from '../../TextInput.svelte';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
+	import ColumnList from '../Body/Rows/ColumnList.svelte';
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	const labelledPresets: SelectOption<string>[] = $derived(
+		tableContext.columnPresets.map((pr) => ({ label: pr.name, value: pr.name }))
+	);
+
+	const selectedValue = $derived(
+		labelledPresets.find((it) => it.value === tableContext.selectedPreset?.name) ?? null
+	);
+	let searchValue = $state('');
+	let pendingPresetName = $state('');
+</script>
+
+<div class="column-panel top presets-and-filter">
+	<!-- TODO Select component -->
+	<div class="select">
+		<SingleSelect
+			label="Selected Preset"
+			name="Preset"
+			options={labelledPresets}
+			labelProp="label"
+			valueProp="value"
+			value={selectedValue}
+			valueAsObject
+			onchange={(newSelection) => {
+				const preset =
+					newSelection && tableContext.columnPresets.find((p) => p.name === newSelection.label);
+				if (preset) {
+					tableContext.setSelectedPreset(preset);
+				}
+			}}
+		/>
+	</div>
+	<TextInput
+		bind:value={searchValue}
+		leftIcon={{ name: 'search', size: Size.Medium }}
+		placeholder="Search Columns"
+	/>
+</div>
+<ColumnList {searchValue} />
+<form
+	class="column-panel bottom save-preset-wrapper"
+	onsubmit={(e) => {
+		e.preventDefault();
+		tableContext.saveColumnPreset(pendingPresetName);
+		pendingPresetName = '';
+	}}
+>
+	<!-- size={Size.MediumSmall} -->
+	<TextInput placeholder="name" bind:value={pendingPresetName} />
+	<Button type="submit" variant={Variant.Secondary} nowrap size={Size.MediumSmall}
+		>Save Layout</Button
+	>
+</form>
+
+<style>.column-panel {
+  --input-height: 3rem;
+  background-color: #ffffff;
+}
+.column-panel.top {
+  border-bottom: solid 2px #cbd4da;
+}
+.column-panel.bottom {
+  border-top: solid 2px #cbd4da;
+}
+.column-panel.presets-and-filter {
+  display: flex;
+  flex-flow: column;
+  row-gap: 0.5rem;
+  padding: 0.5rem;
+  flex-basis: min-content;
+}
+.column-panel.save-preset-wrapper {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  flex-basis: min-content;
+}
+.column-panel .select {
+  width: 100%;
+}</style>

package/dist/Components/Table/Misc/ColumnPanel.svelte.d.ts

@@ -0,0 +1,24 @@
+declare function $$render<T extends object>(): {
+    props: Record<string, never>;
+    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>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ColumnPanel: $$IsomorphicComponent;
+type ColumnPanel<T extends object> = InstanceType<typeof ColumnPanel<T>>;
+export default ColumnPanel;

package/dist/Components/Table/Misc/ColumnPanelModal.svelte

@@ -0,0 +1,137 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface ColumnPanelModalProps {
+		onclose?: () => void;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	import Button from '../../Button.svelte';
+	import SingleSelect from '../../SingleSelect.svelte';
+	import TextInput from '../../TextInput.svelte';
+	import TouchModal from '../../Touch/TouchModal.svelte';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { getContext } from 'svelte';
+	import ColumnList from '../Body/Rows/ColumnList.svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	const { onclose }: ColumnPanelModalProps = $props();
+	const labelledPresets: SelectOption<string>[] = $derived(
+		tableContext.columnPresets.map((pr) => ({ label: pr.name, value: pr.name }))
+	);
+	let searchValue = $state('');
+	let pendingPresetName = $state('');
+
+	const selectedValue = $derived(
+		labelledPresets.find((it) => it.value === tableContext.selectedPreset?.name) ?? null
+	);
+
+	function trySavePreset(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			tableContext.saveColumnPreset(pendingPresetName);
+			pendingPresetName = '';
+		}
+	}
+
+	function savePreset(e: MouseEvent) {
+		e.preventDefault();
+		tableContext.saveColumnPreset(pendingPresetName);
+		pendingPresetName = '';
+	}
+</script>
+
+<TouchModal
+	header="Modify Columns"
+	onclose={() => onclose?.()}
+	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+>
+	<div class="flex">
+		<div class="column-panel top presets-and-filter">
+			<div class="select">
+				<SingleSelect
+					label="Selected Preset"
+					name="Preset"
+					options={labelledPresets}
+					labelProp="label"
+					valueProp="value"
+					value={selectedValue}
+					valueAsObject
+					onchange={(newSelection) => {
+						const preset =
+							newSelection && tableContext.columnPresets.find((p) => p.name === newSelection.label);
+						if (preset) {
+							tableContext.setSelectedPreset(preset);
+						}
+					}}
+				/>
+			</div>
+			<TextInput
+				bind:value={searchValue}
+				leftIcon={{ name: 'search', size: Size.Medium }}
+				placeholder="Search Columns"
+			/>
+		</div>
+		<div class="scrollable">
+			<ColumnList {searchValue} />
+		</div>
+		<div class="column-panel bottom save-preset-wrapper">
+			<!-- size={Size.MediumSmall} -->
+			<TextInput placeholder="name" bind:value={pendingPresetName} onkeydown={trySavePreset} />
+			<Button
+				type="submit"
+				variant={Variant.Secondary}
+				nowrap
+				size={Size.MediumSmall}
+				onclick={savePreset}>Save Layout</Button
+			>
+		</div>
+	</div>
+</TouchModal>
+
+<style>.flex {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  width: 100%;
+  flex: 1;
+}
+.flex .scrollable {
+  flex-shrink: 2;
+  overflow-y: auto;
+}
+
+.column-panel {
+  --input-height: 3rem;
+  background-color: #ffffff;
+  height: 100%;
+}
+.column-panel.top {
+  border-bottom: solid 2px #cbd4da;
+}
+.column-panel.bottom {
+  border-top: solid 2px #cbd4da;
+}
+.column-panel.presets-and-filter {
+  display: flex;
+  flex-flow: column;
+  row-gap: 0.5rem;
+  padding: 0.5rem;
+  flex-basis: min-content;
+}
+.column-panel.save-preset-wrapper {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  flex-basis: min-content;
+}
+.column-panel .select {
+  width: 100%;
+}</style>

package/dist/Components/Table/Misc/ColumnPanelModal.svelte.d.ts

@@ -0,0 +1,27 @@
+export interface ColumnPanelModalProps {
+    onclose?: () => void;
+}
+declare function $$render<T extends object>(): {
+    props: ColumnPanelModalProps;
+    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 ColumnPanelModal: $$IsomorphicComponent;
+type ColumnPanelModal<T extends object> = InstanceType<typeof ColumnPanelModal<T>>;
+export default ColumnPanelModal;