@lavalogic/scoria 0.0.1

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

@@ -0,0 +1,201 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { dev } from '$app/environment';
+	import { generateShortUUID, getErrorMessage } from '../../../../Helpers/Helpers.svelte.js';
+	import { getContext, untrack } from 'svelte';
+	import NestedTable from '../../NestedTable.svelte';
+	import type { Row } from '../../Types/Context/Row.js';
+	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
+	import type { TableCell } from '../../Types/Columns/TableCell.js';
+	import type { ExpandDef } from '../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
+	import type { DefsWrapper } from '../../Types/Columns/DefsWrapper.js';
+	import ColumnHighlight from './ColumnHighlight.svelte';
+	import TableColumn from './Columns/TableColumn.svelte';
+
+	export interface TableRowProps<T extends object> {
+		row: Row<T>;
+		side: 'left' | 'right' | 'centre';
+		odd: boolean;
+		// oncontextmenu?: (e: MouseEvent) => void
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	const { row, side, odd = false }: TableRowProps<T> = $props();
+
+	const hoverable = $derived(tableContext.changeColourOnHover);
+
+	//HACK converted this from derived to state+deffect because otherwise this throws an unsafe mutation error deeper down the stack
+	const cells: TableCell<T>[] = $derived(
+		side === 'left'
+			? row.getLeftVisibleCells()
+			: side === 'right'
+				? row.getRightVisibleCells()
+				: row.getCenterVisibleCells()
+	);
+
+	let expandedColumnDef: ExpandDef<T> | undefined = $state();
+
+	$effect(() => {
+		if (cells?.length) {
+			void tableContext.table.data;
+			void tableContext.paginationRepo?.paginationState.pageIndex;
+			void tableContext.paginationRepo?.paginationState.pageSize;
+			untrack(() => {
+				expandedColumnDef = undefined;
+			});
+		}
+	});
+
+	let innerDataPromise: object[] | Promise<object[]> | undefined = $state();
+	let innerColumnDefs: DefsWrapper<object> = $state({ defs: [] });
+	let innerTableName: string | undefined = $state();
+
+	let prevExpandedColumnDef: ExpandDef<T, object> | undefined = $state();
+
+	const rowIndex = $derived(cells[0] && cells[0].row.index);
+	const highlighted = $derived(
+		rowIndex != undefined &&
+			tableContext.highlightedItems.has(tableContext.selectionExtractor(row.original))
+	);
+
+	const isAppropriateTableSide = $derived.by(() => {
+		if (side === 'left') {
+			return (tableContext.columnPinning.left?.length ?? 0) > 0;
+		} else if (side === 'centre') {
+			return (
+				(tableContext.columnPinning.left?.length ?? 0) == 0 &&
+				(tableContext.columnPinning.right?.length ?? 0) != tableContext.columnDefs.length
+			);
+		} else {
+			return (tableContext.columnPinning.right?.length ?? 0) == tableContext.columnDefs.length;
+		}
+	});
+	const showHighlightButton = $derived(rowIndex != null && isAppropriateTableSide);
+
+	const colspan = $derived(cells.length + (showHighlightButton ? 1 : 0));
+
+	$effect(() => {
+		void expandedColumnDef;
+
+		untrack(() => {
+			if (expandedColumnDef && expandedColumnDef?.id != prevExpandedColumnDef?.id) {
+				prevExpandedColumnDef = expandedColumnDef;
+				innerColumnDefs = expandedColumnDef.getInnerColumnDefs(
+					cells[0].row.original,
+					cells[0].row.index
+				);
+
+				innerDataPromise = expandedColumnDef.accessorFn!(
+					cells[0].row.original,
+					cells[0].row.index
+				) as Promise<object[]>;
+				innerTableName = expandedColumnDef.innerTableName;
+			} else if (
+				!expandedColumnDef ||
+				tableContext.columnVisibility[expandedColumnDef.id] === false
+			) {
+				innerTableName = undefined;
+				expandedColumnDef = prevExpandedColumnDef = innerDataPromise = undefined;
+				innerColumnDefs = { defs: [] };
+			}
+		});
+	});
+
+	function onExpandChange(columnDef: ExpandDef<T, object>) {
+		if (dev) {
+			console.log('------------');
+			console.log(`called for ${expandedColumnDef?.id}`);
+		}
+		if (expandedColumnDef?.id === columnDef.id) {
+			if (dev) {
+				// debugger;
+				console.log('hiding it');
+			}
+			expandedColumnDef = undefined;
+		} else {
+			if (dev) {
+				console.log('showing it');
+			}
+			// debugger;
+			expandedColumnDef = columnDef;
+		}
+	}
+</script>
+
+<!-- onMouseEnter={onMouseEnter}
+onMouseLeave={onMouseLeave} -->
+<tr class:hoverable class:alt={tableContext.alternateRowColours && odd} class:highlighted>
+	{#if showHighlightButton}
+		<ColumnHighlight
+			{rowIndex}
+			{highlighted}
+			toggleHighlightedRow={() => {
+				tableContext.toggleHighlightedRow(row.original);
+			}}
+		/>
+	{/if}
+	{#each cells as cell (`${cell.id}-${cell.row.index}`)}
+		<TableColumn {cell} {expandedColumnDef} {onExpandChange} />
+	{/each}
+</tr>
+
+{#if expandedColumnDef}
+	<!-- transition:slide={{ duration: 150, axis: 'y', delay: 0 }} -->
+	<tr class="inner-table">
+		{#await innerDataPromise}
+			<td {colspan}>loading&hellip;</td>
+		{:then data}
+			{#if data && data.length}
+				{@const options = expandedColumnDef.innerTableOptions}
+				<td class="no-padding" {colspan}>
+					{#if innerTableName}
+						{#key innerTableName}
+							<NestedTable
+								tableName={innerTableName}
+								{data}
+								columnDefWrapper={innerColumnDefs}
+								{options}
+								getUserId={tableContext.getUserId}
+							/>
+						{/key}
+					{:else if dev}
+						<h3>warning: no table name found</h3>
+					{:else}
+						<NestedTable
+							tableName={generateShortUUID()}
+							{data}
+							columnDefWrapper={innerColumnDefs}
+							{options}
+							getUserId={tableContext.getUserId}
+						/>
+					{/if}
+				</td>
+			{:else if !data}
+				<td {colspan}>Error Fetching data</td>
+			{:else}
+				<td {colspan}>No Data</td>
+			{/if}
+		{:catch e}
+			<td {colspan}>Error Fetching data: {getErrorMessage(e)}</td>
+		{/await}
+	</tr>
+{/if}
+
+<style>tr {
+  line-height: var(--line-height, 3);
+  transition: line-height 0.2s ease, height 0.2s ease;
+  background-color: #ffffff;
+}
+tr td.no-padding {
+  padding: 0;
+}
+tr.alt {
+  background-color: #f4f7f9;
+}
+tr.highlighted, tr.hoverable:hover {
+  background-color: #e6f8fd;
+}</style>

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

@@ -0,0 +1,30 @@
+import type { Row } from '../../Types/Context/Row.js';
+export interface TableRowProps<T extends object> {
+    row: Row<T>;
+    side: 'left' | 'right' | 'centre';
+    odd: boolean;
+}
+declare function $$render<T extends object>(): {
+    props: TableRowProps<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 TableRow: $$IsomorphicComponent;
+type TableRow<T extends object> = InstanceType<typeof TableRow<T>>;
+export default TableRow;

package/dist/Components/Table/Body/TableBody.svelte

@@ -0,0 +1,74 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface TableBodyProps {
+		side: 'left' | 'centre' | 'right';
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import QuickSearchCell from './QuickSearchCell.svelte';
+	import type { Column } from '../Types/Columns/Column.js';
+	import TableRow from './Rows/TableRow.svelte';
+
+	let { side }: TableBodyProps = $props();
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	let quickFilterColumns: Column<T>[] = $state([]);
+
+	$effect(() => {
+		if (tableContext.showQuickFiltering && tableContext.table) {
+			const columns =
+				side === 'left'
+					? tableContext.table.getLeftVisibleLeafColumns()
+					: side === 'right'
+						? tableContext.table.getRightVisibleLeafColumns()
+						: tableContext.table.getCenterVisibleLeafColumns();
+
+			quickFilterColumns = columns;
+		}
+	});
+</script>
+
+<tbody>
+	{#if tableContext.allowQuickFiltering && tableContext.showQuickFiltering && quickFilterColumns.length}
+		<tr class="sticky">
+			<td><!-- accomodating for row marking --></td>
+			{#each quickFilterColumns as column (column)}
+				<QuickSearchCell {column} customFilters={tableContext.remoteFilters} />
+			{/each}
+		</tr>
+	{/if}
+	{#each tableContext.paginationRowModel.rows ?? [] as row, index (row.id)}
+		<TableRow {row} {side} odd={index % 2 == 1} />
+	{/each}
+</tbody>
+
+<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;
+}
+
+tr {
+  line-height: var(--line-height, 3);
+}
+
+tbody {
+  font-size: 0.9375rem;
+}
+
+tr.sticky {
+  transition: line-height 0.2s ease, height 0.2s ease;
+}</style>

package/dist/Components/Table/Body/TableBody.svelte.d.ts

@@ -0,0 +1,27 @@
+export interface TableBodyProps {
+    side: 'left' | 'centre' | 'right';
+}
+declare function $$render<T extends object>(): {
+    props: TableBodyProps;
+    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 TableBody: $$IsomorphicComponent;
+type TableBody<T extends object> = InstanceType<typeof TableBody<T>>;
+export default TableBody;

package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDef.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ExampleItem } from '../../../Types/Examples/ExampleItem.js';
+import type { Component } from 'svelte';
+import type { DefsWrapper } from '../Types/Columns/DefsWrapper.js';
+import type { DisplayDefModalProps } from '../Types/Columns/AbstractDisplayDef.svelte.js';
+export declare class ExampleItemColumnDef {
+    static generateExampleItemColumnDefs(modal: Component<DisplayDefModalProps<ExampleItem>, any, any>): DefsWrapper<ExampleItem>;
+}

package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDef.svelte.js

@@ -0,0 +1,139 @@
+import { Colour } from '../../../scss/colours.js';
+import { ExampleSelectEnum } from '../../../Types/Examples/ExampleSelectEnum.js';
+import { Validity } from '../../../Types/Internal/Validity.js';
+import { CheckboxDef } from '../Types/Columns/Definitions/Accessors/CheckboxDef.js';
+import { DateInputDef } from '../Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
+import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
+import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
+import { TextInputDef } from '../Types/Columns/Definitions/Accessors/TextInputDef.js';
+import { BubbleDef } from '../Types/Columns/Definitions/Display/BubbleDef.svelte.js';
+import { DisplayDef } from '../Types/Columns/Definitions/Display/DisplayDef.js';
+import { ProgressBarDef } from '../Types/Columns/Definitions/Display/ProgressBarDef.svelte.js';
+import { ValidityDef } from '../Types/Columns/Definitions/Display/ValidityDef.svelte.js';
+export class ExampleItemColumnDef {
+    static generateExampleItemColumnDefs(modal) {
+        let defs = $state([
+            new ValidityDef({
+                header: 'Valid',
+                id: 'valid',
+                isValid: (item, isSelected) => {
+                    if (isSelected) {
+                        if (!item.name?.trim()) {
+                            return { value: Validity.Invalid, reason: 'Missing name' };
+                        }
+                        if (item.isChecked === true) {
+                            return Validity.Valid;
+                        }
+                        return {
+                            value: Validity.Warning,
+                            reason: 'Example item is not checked.'
+                        };
+                    }
+                    return { value: Validity.Neutral, reason: 'row not selected' };
+                },
+                modal
+            }),
+            new DisplayDef({
+                header: 'ID',
+                id: 'id'
+            }),
+            new TextInputDef({
+                header: 'Name',
+                id: 'name',
+                editable: true
+            }),
+            new NumberInputDef({
+                header: 'Some Number',
+                id: 'someNumber',
+                editable: true,
+                min: 0,
+                max: 12345
+            }),
+            new ProgressBarDef({
+                getColour: () => {
+                    return {
+                        colour: Colour['$ui-white'],
+                        backgroundColour: Colour['$brand-primary']
+                    };
+                },
+                header: 'Progress',
+                id: 'progress'
+            }),
+            new CheckboxDef({
+                header: 'Checkbox',
+                id: 'isChecked'
+            }),
+            new DateInputDef({
+                header: 'Some Date',
+                id: 'someDate',
+                editable: true,
+                defaultHidden: true
+            }),
+            new DateInputDef({
+                header: 'Some Date With Time',
+                id: 'someDateWithTime',
+                editable: true,
+                showTime: true
+            }),
+            new DateInputDef({
+                header: 'Flo Date',
+                id: 'floDate',
+                editable: true,
+                defaultHidden: true
+            }),
+            new DateInputDef({
+                header: 'Flo Date With Time',
+                id: 'floDateWithTime',
+                editable: true,
+                defaultHidden: true,
+                showTime: true
+            }),
+            new SelectDef({
+                id: 'someSelect',
+                header: 'Select Example',
+                optional: false,
+                getOptions: () => {
+                    return [
+                        {
+                            label: 'First Option',
+                            value: ExampleSelectEnum.FirstOption
+                        },
+                        {
+                            label: 'Second Option',
+                            value: ExampleSelectEnum.SecondOption
+                        },
+                        {
+                            label: 'Third Option',
+                            value: ExampleSelectEnum.ThirdOption
+                        },
+                        {
+                            label: 'Fourth Option',
+                            value: ExampleSelectEnum.FourthOption
+                        }
+                    ];
+                },
+                editable: true
+            }),
+            new BubbleDef({
+                header: 'Generated Bubble',
+                id: 'generatedBubble',
+                accessorFn: () => {
+                    return ['foo', 'bar', 'baz'];
+                },
+                defaultHidden: true
+            }),
+            new BubbleDef({
+                header: 'Multi Bubbles',
+                id: 'someBubbles'
+            })
+        ]);
+        return {
+            get defs() {
+                return defs;
+            },
+            set defs(items) {
+                defs = items;
+            }
+        };
+    }
+}

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

@@ -0,0 +1,52 @@
+<svelte:options runes />
+
+<script lang="ts" generics="T extends object">
+	import { getContext } from 'svelte';
+	import Action from '../../Action.svelte';
+	import { Colour } from '../../../scss/colours.js';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	let allHighlighted = $state(false);
+
+	$effect(() => {
+		tableContext.allHighlighted.then((flag) => {
+			allHighlighted = flag;
+		});
+	});
+
+	const backgroundColour = $derived(
+		tableContext.sortedData.length > 0 && allHighlighted
+			? Colour['$brand-primary']
+			: Colour['$ui-white']
+	);
+</script>
+
+<div class="checkbox-cell">
+	<div class="wrapper">
+		<Action
+			{backgroundColour}
+			hoverBackgroundColour={Colour['$brand-dark']}
+			size={Size.FillWidth}
+			icon={{
+				name: 'nothing'
+			}}
+			onclick={() => {
+				tableContext.onHighlightAll();
+			}}
+		/>
+	</div>
+</div>
+
+<style>div.wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+}</style>

package/dist/Components/Table/Headers/HighlightAllHeader.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 HighlightAllHeader: $$IsomorphicComponent;
+type HighlightAllHeader<T extends object> = InstanceType<typeof HighlightAllHeader<T>>;
+export default HighlightAllHeader;

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

@@ -0,0 +1,62 @@
+<svelte:options runes />
+
+<script lang="ts" generics="T extends object">
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	const allSelected: Promise<boolean> = $derived(tableContext.allSelectedInCurrentPage);
+	const checked: Promise<boolean> = $derived.by(() => {
+		return (tableContext.dataRepo?.data.length ?? 0) > 0 ? allSelected : Promise.resolve(false);
+	});
+</script>
+
+<div class="checkbox-cell">
+	<label>
+		{#await checked}
+			<input
+				onchange={tableContext.onSelectAllInCurrentPage}
+				type="checkbox"
+				checked={false}
+				disabled={tableContext.showSelectedOnly}
+			/>
+		{:then checked}
+			<input
+				onchange={tableContext.onSelectAllInCurrentPage}
+				type="checkbox"
+				{checked}
+				disabled={tableContext.showSelectedOnly}
+			/>
+		{/await}
+	</label>
+</div>
+
+<style>input[type=checkbox] {
+  height: var(--checkbox-height);
+  padding: 1rem;
+  box-sizing: border-box;
+  cursor: pointer;
+  accent-color: var(--colour, #259fc7);
+  flex-grow: 1;
+}
+input[type=checkbox]:focus, input[type=checkbox]:focus-visible, input[type=checkbox]:focus-within {
+  outline: none !important;
+}
+
+label {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+}
+
+label {
+  cursor: pointer;
+}</style>

package/dist/Components/Table/Headers/SelectAllHeader.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 SelectAllHeader: $$IsomorphicComponent;
+type SelectAllHeader<T extends object> = InstanceType<typeof SelectAllHeader<T>>;
+export default SelectAllHeader;