wx-svelte-grid 2.5.0 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-grid",
-	"version": "2.5.0",
+	"version": "2.5.1",
 	"description": "A fast, feature-rich Svelte DataGrid component",
 	"productTag": "grid",
 	"productTrial": false,
@@ -33,19 +33,19 @@
 	},
 	"homepage": "https://svar.dev/svelte/datagrid/",
 	"dependencies": {
-		"@svar-ui/lib-dom": "0.11.1",
+		"@svar-ui/lib-dom": "0.12.0",
 		"@svar-ui/lib-state": "1.9.6",
 		"@svar-ui/lib-svelte": "0.5.2",
-		"@svar-ui/svelte-menu": "2.4.0",
-		"@svar-ui/svelte-core": "2.4.0",
-		"@svar-ui/svelte-toolbar": "2.4.0",
-		"@svar-ui/grid-data-provider": "2.5.0",
-		"@svar-ui/grid-locales": "2.5.0",
-		"@svar-ui/grid-store": "2.5.0"
+		"@svar-ui/svelte-menu": "2.4.2",
+		"@svar-ui/svelte-core": "2.4.1",
+		"@svar-ui/svelte-toolbar": "2.4.1",
+		"@svar-ui/grid-data-provider": "2.5.1",
+		"@svar-ui/grid-locales": "2.5.1",
+		"@svar-ui/grid-store": "2.5.1"
 	},
 	"devDependencies": {
-		"@svar-ui/svelte-editor": "2.4.0",
-		"@svar-ui/svelte-filter": "2.4.0"
+		"@svar-ui/svelte-editor": "2.4.1",
+		"@svar-ui/svelte-filter": "2.4.2"
 	},
 	"files": [
 		"src",

package/src/components/Cell.svelte

@@ -2,6 +2,7 @@
 	import { onDestroy, getContext, untrack } from "svelte";
 	import { getStyle } from "../helpers/columnWidth";
 	import { getRenderValue } from "@svar-ui/grid-store";
+	import { setID } from "@svar-ui/lib-dom";
 
 	let {
 		row,
@@ -95,8 +96,8 @@
 	onfocus={toggleFocusAction}
 	class:wx-fixed-right={column.fixed && column.fixed.right}
 	{style}
-	data-row-id={row.id}
-	data-col-id={column.id}
+	data-row-id={setID(row.id)}
+	data-col-id={setID(column.id)}
 	tabindex={focusable ? "0" : "-1"}
 	role={"gridcell"}
 	aria-colindex={column._colindex}

package/src/components/HeaderCell.svelte

@@ -3,6 +3,7 @@
 	import { resize } from "../helpers/actions/resize";
 	import { getCssName, getStyle } from "../helpers/columnWidth";
 	import Filter from "./inlineFilters/Filter.svelte";
+	import { setID } from "@svar-ui/lib-dom";
 
 	let {
 		cell,
@@ -49,7 +50,7 @@
 		}
 		api.exec("sort-rows", {
 			key: cell.id,
-			add: ev.ctrlKey,
+			add: ev.ctrlKey || ev.metaKey,
 			order: sortMark?.order,
 		});
 	}
@@ -106,7 +107,7 @@
 		tabindex="0"
 		onkeydown={toggleCollapseColumn}
 		onclick={collapse}
-		data-header-id={column.id}
+		data-header-id={setID(column.id)}
 	>
 		<div class="wx-text" style={collapsedTextStyle}>
 			{cell.text || ""}
@@ -121,7 +122,7 @@
 		class:wx-fixed-right={column.fixed && column.fixed.right}
 		{style}
 		onclick={sort}
-		data-header-id={column.id}
+		data-header-id={setID(column.id)}
 		tabindex={!cell._hidden && column.sort && !cell.filter
 			? "0"
 			: undefined}

package/src/components/Layout.svelte

@@ -9,9 +9,10 @@
 	import {
 		clickOutside,
 		delegateClick,
-		locateAttr,
 		locate,
-		id,
+		setID,
+		locateID,
+		getID,
 	} from "@svar-ui/lib-dom";
 
 	import { hotkeys, defaultHotkeys } from "@svar-ui/grid-store";
@@ -410,12 +411,12 @@
 
 	const bodyClickHandlers = {
 		dblclick: (id, ev) => {
-			const data = { id, column: locateAttr(ev, "data-col-id") };
+			const data = { id, column: locateID(ev, "data-col-id") };
 			api.exec("open-editor", data);
 		},
 		click: (id, ev) => {
 			if (postDrag) return;
-			const column = locateAttr(ev, "data-col-id");
+			const column = locateID(ev, "data-col-id");
 			if ($focusCell?.id !== id)
 				api.exec("focus-cell", {
 					row: id,
@@ -425,7 +426,7 @@
 
 			if ($select === false) return;
 
-			const toggle = multiselect && ev.ctrlKey;
+			const toggle = multiselect && (ev.ctrlKey || ev.metaKey);
 			const range = multiselect && ev.shiftKey;
 
 			if (
@@ -467,11 +468,11 @@
 
 		dragItem = from;
 
-		if (api.getRow(dragItem).open)
+		if ($tree && api.getRow(dragItem).open)
 			api.exec("close-row", { id: dragItem, nested: true });
 
 		// default to drag source (target may be shifted by this moment)
-		const itemNode = locate(sourceNode, "data-id");
+		const itemNode = locate(sourceNode);
 		dragNode = itemNode.cloneNode(true);
 		dragNode.classList.remove("wx-selected");
 		dragNode
@@ -521,8 +522,8 @@
 		}
 
 		if (tableNode.contains(context.targetNode)) {
-			const targetRow = locate(context.targetNode, "data-id");
-			const to = id(targetRow?.getAttribute("data-id"));
+			const targetRow = locate(context.targetNode);
+			const to = targetRow && getID(targetRow);
 
 			if (to && to !== from) {
 				context.to = to;
@@ -675,9 +676,9 @@
 				!focus ||
 				(visibleSelection.length &&
 					!visibleSelection.includes(focus.row)) ||
-				dataRows.findIndex(r => r.id == focus.row) === -1 ||
+				dataRows.findIndex(r => r.id === focus.row) === -1 ||
 				renderColumns.data.findIndex(
-					c => c.id == focus.column && !c.collapsed
+					c => c.id === focus.column && !c.collapsed
 				) === -1
 			) {
 				const row = visibleSelection[0] || dataRows[0].id;
@@ -753,6 +754,7 @@
 				style="width:{contentWidth}px;height:{fullHeight}px;"
 				onmousedown={ev => lockSelection(ev)}
 				use:clickOutside={() =>
+					$focusCell &&
 					api.exec("focus-cell", { eventSource: "click" })}
 				use:delegateClick={bodyClickHandlers}
 			>
@@ -771,8 +773,8 @@
 							class:wx-autoheight={autoRowHeight}
 							class={"wx-row" +
 								(rowStyle ? " " + rowStyle(row) : "")}
-							data-id={row.id}
-							data-context-id={row.id}
+							data-id={setID(row.id)}
+							data-context-id={setID(row.id)}
 							class:wx-selected={isSelected}
 							class:wx-inactive={dragItem === row.id}
 							style={`${autoRowHeight ? "min-height" : "height"}:${row.rowHeight || defaultRowHeight}px;`}
@@ -786,7 +788,7 @@
 							{#each renderColumns.data as column (column.id)}
 								{#if column.collapsed}
 									<div class="wx-cell wx-collapsed"></div>
-								{:else if $editor?.id === row.id && $editor.column == column.id}
+								{:else if $editor?.id === row.id && $editor.column === column.id}
 									<Editor {row} {column} />
 								{:else}
 									<Cell
@@ -796,7 +798,7 @@
 										{cellStyle}
 										{reorder}
 										focusable={focus?.row === row.id &&
-											focus?.column == column.id}
+											focus?.column === column.id}
 									/>
 								{/if}
 							{/each}

package/src/components/Tooltip.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { getRenderValue } from "@svar-ui/grid-store";
+	import { getID } from "@svar-ui/lib-dom";
 
 	let { content: Content = null, api, children } = $props();
 
@@ -12,8 +13,8 @@
 	function findAttribute(node) {
 		while (node) {
 			if (node.getAttribute) {
-				const id = node.getAttribute("data-row-id");
-				const colId = node.getAttribute("data-col-id");
+				const id = getID(node, "data-row-id");
+				const colId = getID(node, "data-col-id");
 				if (id && api && colId) {
 					const col = api.getColumn(colId);
 					return { id, col, target: node };

package/src/components/print/HeaderFooter.svelte

@@ -15,7 +15,7 @@
 {#each columns as row, i}
 	<tr>
 		{#each row as cell (cell.id)}
-			{@const column = _columns.find(c => c.id == cell.id)}
+			{@const column = _columns.find(c => c.id === cell.id)}
 			<th
 				style={getPrintCellStyle(cell, sizes.columnWidth)}
 				class="wx-print-cell-{type} {getColumnCss(column)}"

package/src/helpers/actions/reorder.js

@@ -1,12 +1,8 @@
-import { locate, id } from "@svar-ui/lib-dom";
+import { locate, getID } from "@svar-ui/lib-dom";
 
 const SHIFT = 5;
 const LONG_TOUCH_DELAY = 700;
 
-function getID(node) {
-	return id(node.getAttribute("data-id"));
-}
-
 export function getOffset(node) {
 	const box = node.getBoundingClientRect();
 	const body = document.body;

package/whatsnew.md

@@ -1,3 +1,10 @@
+## 2.5.1
+
+### Fixes
+
+-   Items with string ids fail in some operations
+-   Multiple sorting and selection does not work on MacOs
+
 ## 2.5.0
 
 ### New features