@lavalogic/scoria 0.11.5 → 0.11.7

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

@@ -4,7 +4,7 @@
 	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 { asyncMap, 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';
@@ -17,14 +17,13 @@
 </script>
 
 <script lang="ts" generics="T extends object">
-	import { getContext, tick, untrack } from 'svelte';
-	import TableAction, { type ActionsTableCell } 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';
+	import { getContext, tick, untrack } from 'svelte';
+	import TableAction, { type ActionsTableCell } from './TableAction.svelte';
 
 	const { cell }: ActionsCellProps<T> = $props();
 
@@ -165,15 +164,23 @@
 		/>
 	</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.visibleIndex))}
-						<TableAction {action} {cell} />
-					{/each}
+		{@const awaitedActions = asyncMap<TableActionButton<T>, [TableActionButton<T>, string]>(
+			actions,
+			async (item) => {
+				return [item, await item.getLabel(cell.row.original, cell.row.visibleIndex)];
+			}
+		)}
+		{#await awaitedActions then actions}
+			<Portal>
+				<div bind:this={popupRef} class="popup" style="--y: {y}px; --x: {x}px;">
+					<div class="action-container">
+						{#each actions as [action, label] (label)}
+							<TableAction {action} {cell} />
+						{/each}
+					</div>
 				</div>
-			</div>
-		</Portal>
+			</Portal>
+		{/await}
 	{/if}
 </td>
 

package/dist/Components/Table/Table.svelte

@@ -5,18 +5,18 @@
 		ContextMenuContext,
 		type IContextMenuOption
 	} from '../../Contexts/ContextMenuContext.svelte.js';
-	import { setContext, getContext, untrack, onMount, tick } from 'svelte';
+	import { refWrapper } from '../../Helpers/Helpers.svelte.js';
+	import { getContext, onMount, setContext, tick, untrack } from 'svelte';
 	import LoadingOverlay from '../LoadingOverlay.svelte';
+	import { shownPopup } from './Body/Rows/Columns/ActionsCell.svelte';
+	import TableBody, { type HeightData } from './Body/TableBody.svelte';
+	import TableHead from './Headers/TableHead.svelte';
+	import TableFooter from './Misc/TableFooter.svelte';
+	import TableHorizontalBar from './Misc/TableHorizontalBar.svelte';
+	import TableSidebar from './Misc/TableSidebar.svelte';
 	import { TableContext } from './Types/Context/TableContext.svelte.js';
 	import { PaginationType } from './Types/Pagination/PaginationType.js';
 	import { ToolbarPosition } from './Types/Toolbar/ToolbarPosition.js';
-	import { refWrapper } from '../../Helpers/Helpers.svelte.js';
-	import TableHorizontalBar from './Misc/TableHorizontalBar.svelte';
-	import TableSidebar from './Misc/TableSidebar.svelte';
-	import TableFooter from './Misc/TableFooter.svelte';
-	import TableHead from './Headers/TableHead.svelte';
-	import TableBody, { type HeightData } from './Body/TableBody.svelte';
-	import { shownPopup } from './Body/Rows/Columns/ActionsCell.svelte';
 
 	declare global {
 		interface HTMLElementEventMap {
@@ -247,20 +247,6 @@
 		}
 	});
 
-	$effect(() => {
-		if (tableContext.dataRepo?.data) {
-			untrack(() => {
-				if (
-					tableContext.paginationRepo?.paginationState.pageIndex != undefined &&
-					tableContext.paginationRepo?.paginationState.pageSize != undefined
-				) {
-					tableContext.updateSelectedItems();
-					tableContext.resetHighlightedRows();
-				}
-			});
-		}
-	});
-
 	const leftTotalSize = $derived(tableContext.table.getLeftTotalSize());
 	const centreTotalSize = $derived(tableContext.table.getCenterTotalSize());
 	const rightTotalSize = $derived(tableContext.table.getRightTotalSize());

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

@@ -148,7 +148,8 @@ export declare class TableContext<T extends object> {
     get filteredIndices(): number[];
     set filteredIndices(v: number[]);
     readonly filteredData: T[];
-    readonly sortedData: T[];
+    private _sortedData;
+    get sortedData(): T[];
     readonly sortedRowModel: RowModel<T>;
     _currentPageData: T[];
     get currentPageData(): T[];

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

@@ -1,6 +1,6 @@
 import { browser, dev } from '$app/environment';
 import { asyncAll, asyncFilterIndices, asyncSleep, getCanvasContext, getErrorMessage } from '../../../../Helpers/Helpers.svelte.js';
-import { tick } from 'svelte';
+import { tick, untrack } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { ColumnType } from '../Columns/ColumnType.js';
 import { AccessorDef } from '../Columns/Definitions/Accessors/AccessorDef.svelte.js';
@@ -66,17 +66,57 @@ export class TableContext {
         }
         this._dataRepo = $state(dataRepo);
         // this.dataRepo.forceRefresh = this.forceVisibilityUpdate;
-        const [_currentPageData, _originalRowIndices] = $derived.by(() => {
-            const x = dataRepo.paginationType == PaginationType.Local
-                ? this.sortedData.slice(dataRepo.pageStartIndex, dataRepo.pageEndIndexExclusive)
-                : (this.sortedData ?? []);
-            const y = new Map((dataRepo.data ?? []).map((item, index) => [item, index]));
-            return [x, y];
+        const [_sortedData, _currentPageData, _originalRowIndices] = $derived.by(() => {
+            const sd = (() => {
+                if (this.paginationRepo?.paginationType == PaginationType.Local) {
+                    const state = this.dataRepo?.sorting ?? [];
+                    const sortedData = this.showSelectedOnly
+                        ? // FIXME this will show the selected items by order of insertion to the selectedItems map.
+                            [...this.selectedItems.values()]
+                        : this.filteredData.concat();
+                    sortedData.sort((a, b) => {
+                        const end = state.length;
+                        for (let i = 0; i < end; i++) {
+                            const { id, desc } = state[i];
+                            const sortingFn = this.getSortingFn(id, desc);
+                            if (sortingFn) {
+                                const result = sortingFn(a, b);
+                                if (result != 0) {
+                                    return result;
+                                }
+                            }
+                            else {
+                                console.warn('no sorting fn found for ' + id);
+                            }
+                        }
+                        return 0;
+                    });
+                    return sortedData;
+                }
+                return this.filteredData ?? [];
+            })();
+            const cpd = dataRepo.paginationType == PaginationType.Local
+                ? sd.slice(dataRepo.pageStartIndex, dataRepo.pageEndIndexExclusive)
+                : (sd ?? []);
+            const ori = new Map((dataRepo.data ?? []).map((item, index) => [item, index]));
+            return [sd, cpd, ori];
         });
         $effect(() => {
+            this._sortedData = _sortedData;
             this._currentPageData = _currentPageData;
             this._originalRowIndices = _originalRowIndices;
         });
+        $effect(() => {
+            if (_currentPageData) {
+                untrack(() => {
+                    if (this.paginationRepo?.paginationState.pageIndex != undefined &&
+                        this.paginationRepo?.paginationState.pageSize != undefined) {
+                        this.updateSelectedItems();
+                        this.resetHighlightedRows();
+                    }
+                });
+            }
+        });
         if (defaultColumnDefs.remoteFilters) {
             this.remoteFilters = defaultColumnDefs.remoteFilters;
         }
@@ -638,41 +678,17 @@ export class TableContext {
         }
         return this.showSelectedOnly ? [...this.selectedItems.values()] : (this.dataRepo?.data ?? []);
     });
-    sortedData = $derived.by(() => {
-        if (this.paginationRepo?.paginationType == PaginationType.Local) {
-            const state = this.dataRepo?.sorting ?? [];
-            const sortedData = this.showSelectedOnly
-                ? // FIXME this will show the selected items by order of insertion to the selectedItems map.
-                    [...this.selectedItems.values()]
-                : this.filteredData.concat();
-            sortedData.sort((a, b) => {
-                const end = state.length;
-                for (let i = 0; i < end; i++) {
-                    const { id, desc } = state[i];
-                    const sortingFn = this.getSortingFn(id, desc);
-                    if (sortingFn) {
-                        const result = sortingFn(a, b);
-                        if (result != 0) {
-                            return result;
-                        }
-                    }
-                    else {
-                        console.warn('no sorting fn found for ' + id);
-                    }
-                }
-                return 0;
-            });
-            return sortedData;
-        }
-        return this.filteredData ?? [];
-    });
+    _sortedData = $state([]);
+    get sortedData() {
+        return this._sortedData;
+    }
     sortedRowModel = $derived.by(() => {
         const rows = this.sortedData.map((item, index) => {
             const originalIndex = this._originalRowIndices.get(item);
             const unsortedIndex = originalIndex ?? index;
             if (originalIndex == null) {
-                console.log($state.snapshot(this.sortedData));
-                console.log($state.snapshot(this._originalRowIndices));
+                $inspect(this.sortedData);
+                $inspect(this._originalRowIndices);
                 throw new Error(`Sorted Data not found in Original Row Indices: original index ${originalIndex}, index ${index}`);
             }
             return this.createRow(item, index, unsortedIndex);
@@ -859,7 +875,7 @@ export class TableContext {
                 const item = this.sortedData[index];
                 // HACK: Please find why this is happening and fix it properly
                 if (!item) {
-                    console.warn(`skipping update because there is a data mismatch, page start index: ${pageStartIndex}, current index ${index}, page end index (exlusive) ${pageEndIndexExclusive}`, $state.snapshot(this.sortedData));
+                    console.warn(`skipping update because there is a data mismatch, page start index: ${pageStartIndex}, current index ${index}, page end index (exclusive) ${pageEndIndexExclusive}`, $state.snapshot(this.sortedData));
                     return;
                 }
                 if (await selectableMethod(item, index)) {
@@ -872,7 +888,7 @@ export class TableContext {
                 const item = this.sortedData[index];
                 // HACK: Please find why this is happening and fix it properly
                 if (!item) {
-                    console.warn(`skipping update because there is a data mismatch, page start index: ${pageStartIndex}, current index ${index}, page end index (exlusive) ${pageEndIndexExclusive}`, $state.snapshot(this.sortedData));
+                    console.warn(`skipping update because there is a data mismatch, page start index: ${pageStartIndex}, current index ${index}, page end index (exclusive) ${pageEndIndexExclusive}`, $state.snapshot(this.sortedData));
                     return;
                 }
                 updateSelectedItem(item);

package/package.json

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