@lavalogic/scoria 0.22.2 → 0.22.4

package/dist/Components/FileUpload.svelte

@@ -33,7 +33,7 @@
 
 		inputRef = $bindable(),
 		onblur,
-		onfocus
+		onfocus,
 	}: FileUploadProps = $props();
 
 	function onchange(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
@@ -90,7 +90,9 @@
 	<!-- 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}
+		<span
+			class="top-label"
+			class:for-default={variant === InputVariant.Default}
 			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
 		>
 		{#if variant === InputVariant.Default}
@@ -100,7 +102,10 @@
 		{/if}
 	{/if}
 	<!-- style="--background-colour: {leftIcon?.backgroundColour ?? rightIcon?.backgroundColour};" -->
-	<div class="icon-container" class:for-modal={variant == InputVariant.Modal}>
+	<div
+		class="icon-container"
+		class:for-modal={variant == InputVariant.Modal}
+	>
 		{#if leftIcon}
 			<Icon
 				name={leftIcon.name}
@@ -157,7 +162,7 @@
 				colourSet={ColourSet.Secondary}
 				backgroundColour="transparent"
 				icon={{ name: 'upload' }}
-				label="Delete"
+				label="Upload"
 				size={Size.Medium}
 				onclick={() => {
 					a();
@@ -180,7 +185,10 @@
 			/>
 		{/if}
 		{#if labelRight}
-			<span class="right-label" class:for-modal={variant == InputVariant.Modal}>{labelRight}</span>
+			<span
+				class="right-label"
+				class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
+			>
 		{/if}
 	</div>
 </label>

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts

@@ -6,11 +6,12 @@ import type { FilterValueType } from '../../Filtering/FilterValueType.js';
 import { ColumnType } from '../ColumnType.js';
 import type { AccessorFn } from './AccessorFn.js';
 import type { ValidationFn } from './ValidationFn.js';
+import type { MemoryColumnIndex } from '../../Coordinates/ColumnIndices.js';
 export interface ColumnDefProps<T extends object, in FilterFnType, out OptionsType> {
     id: string;
     header: string | Snippet;
     debug?: boolean;
-    index?: number;
+    index?: MemoryColumnIndex;
     allowFiltering?: boolean;
     allowSorting?: boolean;
     defaultHidden?: boolean;
@@ -30,8 +31,8 @@ export declare abstract class ColumnDef<T extends object, in FilterFnType = neve
     readonly id: string;
     debug: boolean;
     private _index;
-    get index(): number;
-    set index(v: number);
+    get index(): MemoryColumnIndex;
+    set index(v: MemoryColumnIndex);
     abstract readonly columnType: ColumnType;
     readonly defaultHidden: boolean;
     readonly allowSorting: boolean;

package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts

@@ -8,6 +8,7 @@ import type { DefsWrapper } from '../Columns/DefsWrapper.js';
 import type { VisibilityState } from '../Columns/VisibilityState.js';
 import type { CellCoordinates } from '../Coordinates/CellCoordinates.js';
 import type { CellCoordinatesWithoutColumn } from '../Coordinates/CellCoordinatesWithoutColumn.js';
+import type { VisualColumnIndex } from '../Coordinates/ColumnIndices.js';
 import type { IDataRepository } from '../DataRepository/IDataRepository.js';
 import type { ColumnFiltersState } from '../Filtering/ColumnFiltersState.js';
 import type { CustomRemoteFilters } from '../Filtering/CustomRemoteFilters.js';
@@ -225,6 +226,15 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
     private createRow;
     private columnDefReturnsTextValue;
     private _updateLocalStorageSettings;
+    /**
+     * Columns in visual display order: pinned-left → center → pinned-right,
+     * preserving memory order within each section. Only includes visible columns.
+     */
+    private get _visualColumns();
+    /** Returns the visual index of the column with the given id, or -1 if not found. */
+    columnVisualIndex(id: string): VisualColumnIndex;
+    get focusStartVisualColumn(): VisualColumnIndex;
+    get focusEndVisualColumn(): VisualColumnIndex;
     private _moveFocusEndRow;
     private _moveFocusRow;
     private getHighlightedRowData;

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -170,8 +170,8 @@ export class TableContext {
                 this._focusedColumnIds = new Set();
                 return;
             }
-            const { row: startRowIndexId, column: startColumnIndex } = this.focusStart;
-            const { row: endRowIndexId, column: endColumnIndex } = this.focusEnd;
+            const { row: startRowIndexId } = this.focusStart;
+            const { row: endRowIndexId } = this.focusEnd;
             const model = this.paginationRowModel;
             if (current === latest_pageColData) {
                 const startRowIndex = model.rows.findIndex((row) => row.visibleIndex === startRowIndexId);
@@ -185,20 +185,14 @@ export class TableContext {
                 }
                 const minRowIndex = Math.min(startRowIndex, endRowIndex);
                 const maxRowIndex = Math.max(startRowIndex, endRowIndex);
-                const minColumnIndex = Math.min(startColumnIndex, endColumnIndex);
-                const maxColumnIndex = Math.max(startColumnIndex, endColumnIndex);
+                const startVisualIndex = this.columnVisualIndex(this.focusStart.id);
+                const endVisualIndex = this.columnVisualIndex(this.focusEnd.id);
+                const minVisualIndex = Math.min(startVisualIndex, endVisualIndex);
+                const maxVisualIndex = Math.max(startVisualIndex, endVisualIndex);
                 // eslint-disable-next-line svelte/prefer-svelte-reactivity
                 const affectedColumns = new Set();
-                const visibility = this.columnVisibility;
-                this.columnDefs
-                    .filter((it) => 'index' in it &&
-                    visibility[it.id] !== false &&
-                    // TODO handle pinning behaviour
-                    // !columnPinning.left?.includes(it.id) &&
-                    // !columnPinning.right?.includes(it.id) &&
-                    // (!('columnType' in it) || it.columnType === undefined || it.columnType === 'Accessor') &&
-                    it.index >= minColumnIndex &&
-                    it.index <= maxColumnIndex)
+                this._visualColumns
+                    .slice(minVisualIndex, maxVisualIndex + 1)
                     .forEach((it) => affectedColumns.add(it.id));
                 // eslint-disable-next-line svelte/prefer-svelte-reactivity
                 const indices = new Set();
@@ -1578,8 +1572,8 @@ export class TableContext {
             // 	newColumns[i].index += 1;
             // }
             if (originalIndex > dropTargetIndex && !targetIsLI(dropTarget)) {
-                newDefs[dropTargetIndex].index += 1;
-                this.dragTarget.index = newDefs[dropTargetIndex].index - 1;
+                newDefs[dropTargetIndex].index = (newDefs[dropTargetIndex].index + 1);
+                this.dragTarget.index = (newDefs[dropTargetIndex].index - 1);
                 newDefs.push(this.dragTarget);
             }
             else {
@@ -1780,36 +1774,21 @@ export class TableContext {
         if (!this.focusEnd) {
             return;
         }
-        const visibility = this.columnVisibility;
-        const columnDefs = this.columnDefs;
-        const currentIndex = this.focusEnd.column;
-        let index = 0;
-        while (index < currentIndex) {
-            const newId = columnDefs[index].id;
-            if (newId && visibility[newId] !== false) {
-                this.focusEnd = { ...this.focusEnd, column: index };
-                return;
-            }
-            ++index;
+        const visualCols = this._visualColumns;
+        if (visualCols.length > 0) {
+            const first = visualCols[0];
+            this.focusEnd = { ...this.focusEnd, id: first.id, column: first.index };
         }
     };
     moveToStart = () => {
         if (!this.focusStart) {
             return;
         }
-        const visibility = this.columnVisibility;
-        const columnDefs = this.columnDefs;
-        const current = this.focusStart.column;
-        let index = 0;
-        while (index < current) {
-            const newId = columnDefs[index].id;
-            if (newId && visibility[newId] !== false) {
-                this.moveFocus({ ...this.focusStart, id: newId, column: index });
-                return;
-            }
-            ++index;
+        const visualCols = this._visualColumns;
+        if (visualCols.length > 0) {
+            const first = visualCols[0];
+            this.moveFocus({ ...this.focusStart, id: first.id, column: first.index });
         }
-        //otherwise return without doing anything
     };
     focusToEnd = () => {
         if (!this.allowCopy) {
@@ -1818,38 +1797,21 @@ export class TableContext {
         if (!this.focusEnd) {
             return;
         }
-        const current = this.focusEnd;
-        const visibility = this.columnVisibility;
-        const columnDefs = this.columnDefs;
-        const currentIndex = current.column;
-        let index = columnDefs.length - 1;
-        while (index > currentIndex) {
-            const newId = columnDefs[index].id;
-            if (newId && visibility[newId] !== false) {
-                this.focusEnd = { ...this.focusEnd, column: index };
-                return;
-            }
-            --index;
+        const visualCols = this._visualColumns;
+        if (visualCols.length > 0) {
+            const last = visualCols[visualCols.length - 1];
+            this.focusEnd = { ...this.focusEnd, id: last.id, column: last.index };
         }
-        this.focusEnd = current;
     };
     moveToEnd = () => {
         if (!this.focusStart) {
             return;
         }
-        const visibility = this.columnVisibility;
-        const columnDefs = this.columnDefs;
-        const current = this.focusStart.column;
-        let index = columnDefs.length - 1;
-        while (index > current) {
-            const newId = columnDefs[index].id;
-            if (newId && visibility[newId] !== false) {
-                this.moveFocus({ ...this.focusStart, id: newId, column: index });
-                return;
-            }
-            --index;
+        const visualCols = this._visualColumns;
+        if (visualCols.length > 0) {
+            const last = visualCols[visualCols.length - 1];
+            this.moveFocus({ ...this.focusStart, id: last.id, column: last.index });
         }
-        //otherwise return without doing anything
     };
     moveFocusDown = () => {
         if (!this.allowCopy) {
@@ -1865,15 +1827,11 @@ export class TableContext {
             return;
         }
         if (this.focusEnd != null) {
-            const visibility = this.columnVisibility;
-            let index = this.focusEnd.column - 1;
-            while (index > -1) {
-                const newId = this.columnDefs[index].id;
-                if (newId && visibility[newId] !== false) {
-                    this.focusEnd = { ...this.focusEnd, column: index };
-                    return;
-                }
-                --index;
+            const visualCols = this._visualColumns;
+            const visualIndex = this.columnVisualIndex(this.focusEnd.id);
+            if (visualIndex > 0) {
+                const prev = visualCols[visualIndex - 1];
+                this.focusEnd = { ...this.focusEnd, id: prev.id, column: prev.index };
             }
         }
     };
@@ -1881,35 +1839,23 @@ export class TableContext {
         if (!this.focusStart) {
             return;
         }
-        const visibility = this.columnVisibility;
-        const columnDefs = this.columnDefs;
-        let index = this.focusStart.column - 1;
-        while (index > -1) {
-            const newId = columnDefs[index].id;
-            if (newId && visibility[newId] !== false) {
-                this.moveFocus({ ...this.focusStart, id: newId, column: index });
-                return;
-            }
-            --index;
+        const visualCols = this._visualColumns;
+        const visualIndex = this.columnVisualIndex(this.focusStart.id);
+        if (visualIndex > 0) {
+            const prev = visualCols[visualIndex - 1];
+            this.moveFocus({ ...this.focusStart, id: prev.id, column: prev.index });
         }
-        //otherwise return without doing anything
     };
     moveFocusRight = () => {
         if (!this.allowCopy) {
             return;
         }
         if (this.focusEnd != null) {
-            const visibility = this.columnVisibility;
-            const columnDefs = this.columnDefs;
-            const upperBounds = columnDefs.length;
-            let index = this.focusEnd.column + 1;
-            while (index < upperBounds) {
-                const newId = columnDefs[index].id;
-                if (newId && visibility[newId] !== false) {
-                    this.focusEnd = { ...this.focusEnd, column: index };
-                    return;
-                }
-                ++index;
+            const visualCols = this._visualColumns;
+            const visualIndex = this.columnVisualIndex(this.focusEnd.id);
+            if (visualIndex < visualCols.length - 1) {
+                const next = visualCols[visualIndex + 1];
+                this.focusEnd = { ...this.focusEnd, id: next.id, column: next.index };
             }
         }
     };
@@ -1917,19 +1863,12 @@ export class TableContext {
         if (!this.focusStart) {
             return;
         }
-        const visibility = this.columnVisibility;
-        const columnDefs = this.columnDefs;
-        const upperBounds = columnDefs.length;
-        let index = this.focusStart.column + 1;
-        while (index < upperBounds) {
-            const newId = columnDefs[index].id;
-            if (newId && visibility[newId] !== false) {
-                this.moveFocus({ ...this.focusStart, id: newId, column: index });
-                return;
-            }
-            ++index;
+        const visualCols = this._visualColumns;
+        const visualIndex = this.columnVisualIndex(this.focusStart.id);
+        if (visualIndex < visualCols.length - 1) {
+            const next = visualCols[visualIndex + 1];
+            this.moveFocus({ ...this.focusStart, id: next.id, column: next.index });
         }
-        //otherwise return without doing anything
     };
     endFocus = (coords) => {
         if (this.isMousingDown) {
@@ -2125,6 +2064,37 @@ export class TableContext {
         };
         localStorage.setItem(`${this.userId}-${this.tableName}-settings`, JSON.stringify(settingsObject));
     }
+    /**
+     * Columns in visual display order: pinned-left → center → pinned-right,
+     * preserving memory order within each section. Only includes visible columns.
+     */
+    get _visualColumns() {
+        const visibility = this.columnVisibility;
+        const pinLeft = this.columnPinning.left;
+        const pinRight = this.columnPinning.right;
+        const visible = this.columnDefs.filter((it) => visibility[it.id] !== false);
+        return [
+            ...visible.filter((it) => pinLeft?.has(it.id)),
+            ...visible.filter((it) => !pinLeft?.has(it.id) && !pinRight?.has(it.id)),
+            ...visible.filter((it) => pinRight?.has(it.id)),
+        ];
+    }
+    /** Returns the visual index of the column with the given id, or -1 if not found. */
+    columnVisualIndex(id) {
+        return this._visualColumns.findIndex((it) => it.id === id);
+    }
+    get focusStartVisualColumn() {
+        if (!this.focusStart) {
+            return -1;
+        }
+        return this.columnVisualIndex(this.focusStart.id);
+    }
+    get focusEndVisualColumn() {
+        if (!this.focusEnd) {
+            return -1;
+        }
+        return this.columnVisualIndex(this.focusEnd.id);
+    }
     _moveFocusEndRow(offset) {
         if (!this.allowCopy) {
             return;
@@ -2219,8 +2189,8 @@ export class TableContext {
     }
     async getFocusElementData() {
         if (this.focusStart && this.focusEnd) {
-            const { row: startRowIndexId, column: startColumnIndex } = this.focusStart;
-            const { row: endRowIndexId, column: endColumnIndex } = this.focusEnd;
+            const { row: startRowIndexId } = this.focusStart;
+            const { row: endRowIndexId } = this.focusEnd;
             // const model = this._currentPageData;
             const model = this.paginationRowModel;
             const startRowIndex = model.rows.findIndex((row) => row.visibleIndex === startRowIndexId);
@@ -2230,13 +2200,13 @@ export class TableContext {
             }
             const minRowIndex = Math.min(startRowIndex, endRowIndex);
             const maxRowIndex = Math.max(startRowIndex, endRowIndex);
-            const minColumnIndex = Math.min(startColumnIndex, endColumnIndex);
-            const maxColumnIndex = Math.max(startColumnIndex, endColumnIndex);
-            const affectedColumns = this.columnDefs.filter((it) => {
-                return (it.index >= minColumnIndex &&
-                    it.index <= maxColumnIndex &&
-                    this.columnDefReturnsTextValue(it));
-            });
+            const startVisualIndex = this.columnVisualIndex(this.focusStart.id);
+            const endVisualIndex = this.columnVisualIndex(this.focusEnd.id);
+            const minVisualIndex = Math.min(startVisualIndex, endVisualIndex);
+            const maxVisualIndex = Math.max(startVisualIndex, endVisualIndex);
+            const affectedColumns = this._visualColumns
+                .slice(minVisualIndex, maxVisualIndex + 1)
+                .filter((it) => this.columnDefReturnsTextValue(it));
             const selectedRows = [];
             // eslint-disable-next-line svelte/prefer-svelte-reactivity
             const indices = new Map();

package/dist/Components/Table/Types/Coordinates/CellCoordinates.d.ts

@@ -1,5 +1,6 @@
+import type { MemoryColumnIndex } from './ColumnIndices.js';
 export interface CellCoordinates {
     row: number;
     id: string;
-    column: number;
+    column: MemoryColumnIndex;
 }

package/dist/Components/Table/Types/Coordinates/ColumnIndices.d.ts

@@ -0,0 +1,8 @@
+/** Position of a column in the `columnDefs` array (memory order). */
+export type MemoryColumnIndex = number & {
+    readonly __brand: 'MemoryColumnIndex';
+};
+/** Position of a column in the visual display order (pinned-left → center → pinned-right). */
+export type VisualColumnIndex = number & {
+    readonly __brand: 'VisualColumnIndex';
+};

package/dist/Components/Table/Types/Coordinates/ColumnIndices.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/Types/Focus/TableFocusDetails.svelte.js

@@ -29,7 +29,7 @@ export class TableFocusDetails {
         this.leftToRight = $derived.by(() => {
             void this.hasMultipleFocus;
             return (this.hasMultipleFocus &&
-                (this.tableContext.focusStart?.column ?? 0) < (this.tableContext.focusEnd?.column ?? 0));
+                this.tableContext.focusStartVisualColumn < this.tableContext.focusEndVisualColumn);
         });
     }
     coordinates;
@@ -42,11 +42,12 @@ export class TableFocusDetails {
         void this.isMultiFocused;
         void this.leftToRight;
         if (this.isMultiFocused) {
+            const thisVisualIndex = this.tableContext.columnVisualIndex(this.cell.column.columnDef.id);
             if (this.leftToRight) {
-                return this.coordinates.column === this.tableContext.focusStart?.column;
+                return thisVisualIndex === this.tableContext.focusStartVisualColumn;
             }
             else {
-                return this.coordinates.column === this.tableContext.focusEnd?.column;
+                return thisVisualIndex === this.tableContext.focusEndVisualColumn;
             }
         }
         return false;
@@ -68,11 +69,12 @@ export class TableFocusDetails {
         void this.isMultiFocused;
         void this.leftToRight;
         if (this.isMultiFocused) {
+            const myVisual = this.tableContext.columnVisualIndex(this.cell.column.columnDef.id);
             if (this.leftToRight) {
-                return this.coordinates.column === this.tableContext.focusEnd?.column;
+                return myVisual === this.tableContext.focusEndVisualColumn;
             }
             else {
-                return this.coordinates.column === this.tableContext.focusStart?.column;
+                return myVisual === this.tableContext.focusStartVisualColumn;
             }
         }
         return false;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.22.2",
+  "version": "0.22.4",
   "publishConfig": {
     "access": "restricted"
   },