wx-svelte-grid 2.0.1 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-grid",
-	"version": "2.0.1",
+	"version": "2.1.1",
 	"description": "A powerful and flexible DataGrid component written in Svelte",
 	"productTag": "grid",
 	"productTrial": false,
@@ -30,16 +30,21 @@
 	"bugs": {
 		"url": "https://forum.svar.dev"
 	},
-	"homepage": "https://svar.dev/svelte/grid/",
+	"homepage": "https://svar.dev/svelte/datagrid/",
 	"dependencies": {
-		"wx-lib-dom": "0.7.1",
+		"wx-lib-dom": "0.8.0",
 		"wx-lib-state": "1.9.0",
 		"wx-lib-svelte": "0.5.1",
-		"wx-svelte-menu": "2.0.1",
-		"wx-svelte-core": "2.0.1",
-		"wx-grid-data-provider": "2.0.1",
-		"wx-grid-locales": "2.0.1",
-		"wx-grid-store": "2.0.1"
+		"wx-svelte-menu": "2.1.0",
+		"wx-svelte-core": "2.1.0",
+		"wx-grid-data-provider": "2.1.1",
+		"wx-grid-locales": "2.1.1",
+		"wx-grid-store": "2.1.1"
+	},
+	"devDependencies": {
+		"wx-svelte-editor": "2.1.0",
+		"wx-svelte-comments": "2.1.0",
+		"wx-svelte-tasklist": "2.1.0"
 	},
 	"files": [
 		"src",

package/readme.md

@@ -19,31 +19,29 @@
 
 </div>
 
-
 [SVAR DataGrid](https://svar.dev/svelte/datagrid/) is an advanced Svelte component that enhances standard data tables, enabling you to create high-performance, feature-rich data grids that efficiently handle large data sets. Fully customizable, it supports inline editing with a variety of cell editors to meet diverse project requirements.
 
 <div align="center">
   <img src="https://cdn.svar.dev/public/react-grid.png" alt="SVAR Svelte DataGrid - Screenshot" width="700">
 </div>
 
-
 # :sparkles: Key Features
 
-- High performance (virtual scrolling and dynamic loading)
-- In-cell editing with different cell editors (datepicker, combo, select, rich select, etc.)
-- Sorting by multiple columns
-- Responsive design to adapt to different screen/container sizes
-- Multiple row selection
-- Fixed columns
-- Expandable/collapsible columns
-- Customizable tooltips for grid cells
-- Context menu
-- Tree-like structure
-- Paging
-- Export to CSV
-- Keyboard navigation
-- RestDataProvider for easy backend data binding
-- Dark and light skins
+-   High performance (virtual scrolling and dynamic loading)
+-   In-cell editing with different cell editors (datepicker, combo, select, rich select, etc.)
+-   Sorting by multiple columns
+-   Responsive design to adapt to different screen/container sizes
+-   Multiple row selection
+-   Fixed columns
+-   Expandable/collapsible columns
+-   Customizable tooltips for grid cells
+-   Context menu
+-   Tree-like structure
+-   Paging
+-   Export to CSV
+-   Keyboard navigation
+-   RestDataProvider for easy backend data binding
+-   Dark and light skins
 
 # :hammer_and_wrench: How to Use
 
@@ -80,7 +78,8 @@ To use SVAR DataGrid, simply import the package and include the component in you
 
 <Grid {data} {columns} />
 ```
-For further instructions, see the detailed [how-to-start guide](https://docs.svar.dev/svelte/grid/getting_started). 
+
+For further instructions, see the detailed [how-to-start guide](https://docs.svar.dev/svelte/grid/getting_started).
 
 ### :computer: How to Modify
 
@@ -104,5 +103,4 @@ To run the test:
 
 ### :speech_balloon: Need Help?
 
-Join our [community forum](https://forum.svar.dev) to get help or post feature requests. 
-
+Join our [community forum](https://forum.svar.dev) to get help or post feature requests.

package/src/components/Cell.svelte

@@ -1,63 +1,126 @@
 <script>
+	import { onDestroy, getContext } from "svelte";
 	import { getStyle } from "../helpers/columnWidth";
 	import { getRenderValue } from "wx-grid-store";
 
-	/**
-	 * @typedef {Object} Props
-	 * @property {any} row
-	 * @property {any} col
-	 * @property {any} [cellStyle]
-	 * @property {any} [columnStyle]
-	 * @property {import('svelte').Snippet} [children]
-	 */
-
-	/** @type {Props} */
-	let { row, col, cellStyle = null, columnStyle = null, children } = $props();
+	let {
+		row,
+		column,
+		cellStyle = null,
+		columnStyle = null,
+		children,
+		reorder,
+		focusable,
+	} = $props();
 
 	let style = $derived(
-			getStyle(col.width, col.flexgrow, col.fixed, col.left)
+			getStyle(
+				column.width,
+				column.flexgrow,
+				column.fixed,
+				column.left,
+				column.right
+			)
 		),
 		css = $derived(buildCellCss(columnStyle, cellStyle));
 
+	const api = getContext("grid-store");
+	const { focusCell } = api.getReactiveState();
+
+	const isDraggable = $derived(
+		typeof column.draggable === "function"
+			? column.draggable(row, column) !== false
+			: column.draggable
+	);
+
+	let cellEl;
+	$effect(() => {
+		if (cellEl) {
+			if (focusable && $focusCell) cellEl.focus();
+			else if (!focusable && document.activeElement === cellEl)
+				cellEl.blur();
+		}
+	});
+
 	function buildCellCss(columnStyle, cellStyle) {
 		let css = "wx-cell";
-		css += columnStyle ? " " + columnStyle(col) : "";
-		css += cellStyle ? " " + cellStyle(row, col) : "";
+		css += column.fixed
+			? " " + (column.fixed === -1 ? "wx-shadow" : "wx-fixed")
+			: "";
+		css += columnStyle ? " " + columnStyle(column) : "";
+		css += cellStyle ? " " + cellStyle(row, column) : "";
+		css += column.treetoggle ? " wx-tree-cell" : "";
 		return css;
 	}
+
+	function toggleFocusAction() {
+		if (focusable && !$focusCell) {
+			api.exec("focus-cell", {
+				row: row.id,
+				column: column.id,
+				eventSource: "focus",
+			});
+		}
+	}
+
+	onDestroy(() => {
+		if (focusable && $focusCell) {
+			api.exec("focus-cell", { eventSource: "destroy" });
+			focusable = false;
+		}
+	});
 </script>
 
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
 	class={css}
-	class:wx-shadow={col.fixed === -1}
+	class:wx-shadow={(column.fixed && column.fixed.left === -1) ||
+		column.fixed.right === -1}
+	bind:this={cellEl}
+	onfocus={toggleFocusAction}
+	class:wx-fixed-right={column.fixed && column.fixed.right}
 	{style}
 	data-row-id={row.id}
-	data-col-id={col.id}
+	data-col-id={column.id}
+	tabindex={focusable ? "0" : "-1"}
+	role={"gridcell"}
+	aria-colindex={column._colindex}
+	aria-readonly={!column.editor ? true : undefined}
 >
-	{#if col.treetoggle}
-		<div class="wx-tree-cell">
-			<span style="margin-left:{row.$level * 28}px;"></span>
-			{#if row.$count}
-				<i
-					data-action="toggle-row"
-					class="wx-table-tree-toggle wxi-menu-{row.open !== false
-						? 'down'
-						: 'right'}"
-				></i>
-			{/if}
-			{#if children}{@render children()}{:else}{getRenderValue(
-					row,
-					col
-				)}{/if}
-		</div>
+	{#if reorder && column.draggable}
+		{#if isDraggable}
+			<i draggable-data="true" class="wx-draggable wxi-drag"></i>
+		{:else}
+			<i class="wx-draggable-stub"></i>
+		{/if}
+	{/if}
+	{#if column.treetoggle}
+		<span style="margin-left:{row.$level * 28}px;"></span>
+		{#if row.$count}
+			<i
+				data-action="toggle-row"
+				class="wx-table-tree-toggle wxi-menu-{row.open !== false
+					? 'down'
+					: 'right'}"
+			></i>
+		{/if}
+	{/if}
+	{#if column.cell}
+		<column.cell
+			{api}
+			{row}
+			{column}
+			onaction={({ action, data }) => api.exec(action, data)}
+		/>
 	{:else if children}{@render children()}{:else}{getRenderValue(
 			row,
-			col
+			column
 		)}{/if}
 </div>
 
 <style>
 	:global(.wx-measure-cell-body),
+	:global(.wx-print-cell),
 	.wx-cell {
 		background: inherit;
 		box-sizing: border-box;
@@ -66,6 +129,7 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
+	:global(.wx-print-tree-cell),
 	.wx-tree-cell {
 		display: flex;
 	}
@@ -75,16 +139,45 @@
 		border-right: var(--wx-table-cell-border);
 	}
 
+	:global(.wx-print-draggable),
+	.wx-draggable,
+	.wx-draggable-stub {
+		display: inline-block;
+		vertical-align: middle;
+		margin-right: 3px;
+		font-size: 20px;
+		height: 20px;
+		width: 20px;
+	}
+
+	.wx-draggable {
+		cursor: move;
+	}
+
 	.wx-shadow.wx-cell {
-		border-right: var(--wx-table-fixed-column-right-border);
+		border-right: var(--wx-table-fixed-column-border);
 		clip-path: inset(0px -15px 0px 0px);
 		z-index: 1;
 	}
 
+	.wx-fixed-right.wx-shadow.wx-cell {
+		border-right: var(--wx-table-cell-border);
+		border-left: var(--wx-table-fixed-column-border);
+	}
+	.wx-fixed-right.wx-shadow.wx-cell:last-child {
+		border-right: none;
+	}
+
+	:global(.wx-print-grid-tree-toggle),
 	.wx-table-tree-toggle {
 		font-size: 20px;
 		cursor: pointer;
 		margin: 0 8px 0 0;
 		display: inline-block;
 	}
+
+	.wx-cell[tabindex="0"]:focus {
+		outline: 1px solid var(--wx-color-primary);
+		outline-offset: -1px;
+	}
 </style>

package/src/components/FooterCell.svelte

@@ -1,7 +1,10 @@
 <script>
+	import { getContext } from "svelte";
 	import { getStyle, getCssName } from "../helpers/columnWidth";
 
-	let { cell, column, columnStyle } = $props();
+	const api = getContext("grid-store");
+
+	let { cell, column, row, columnStyle } = $props();
 
 	let style = $derived(
 		getStyle(
@@ -9,21 +12,43 @@
 			cell.flexgrow,
 			column.fixed,
 			column.left,
+			cell.right ?? column.right,
 			cell.height
 		)
 	);
 
 	let css = $derived(getCssName(column, cell, columnStyle));
+
+	function getCell() {
+		return Object.fromEntries(
+			Object.entries(cell).filter(([key]) => key !== "cell")
+		);
+	}
 </script>
 
-<div class="wx-cell {css} {cell.css || ''}" {style}>
+<div
+	class="wx-cell {css} {cell.css || ''}"
+	class:wx-fixed-right={column.fixed && column.fixed.right}
+	{style}
+>
 	{#if !column.collapsed && !cell.collapsed}
-		<div class="wx-text">{cell.text || ""}</div>
+		{#if cell.cell}
+			<cell.cell
+				{api}
+				cell={getCell()}
+				{column}
+				{row}
+				onaction={({ action, data }) => api.exec(action, data)}
+			/>
+		{:else}
+			<div class="wx-text">{cell.text || ""}</div>
+		{/if}
 	{/if}
 </div>
 
 <style>
 	:global(.wx-measure-cell-footer),
+	:global(.wx-print-cell-footer),
 	.wx-cell {
 		padding: 8px;
 		display: flex;
@@ -33,6 +58,10 @@
 		overflow: hidden;
 	}
 
+	:global(.wx-print-cell-footer) {
+		display: table-cell;
+	}
+
 	.wx-cell:not(:last-child) {
 		border-right: var(--wx-table-footer-cell-border);
 	}
@@ -41,16 +70,14 @@
 		align-items: flex-end;
 	}
 
-	:global(.wx-measure-cell-footer.wx-measure-vertical) {
-		padding: 8px;
-	}
-
+	:global(.wx-print-cell-footer .wx-text),
 	.wx-text {
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
 	}
 
+	:global(.wx-print-cell-footer.wx-vertical .wx-text),
 	.wx-vertical .wx-text {
 		transform: rotate(-90deg) translateY(100%);
 		transform-origin: left bottom;
@@ -58,14 +85,27 @@
 		overflow: unset;
 	}
 
+	:global(.wx-print-cell-footer.wx-vertical .wx-text) {
+		display: block;
+	}
+
 	.wx-cell.wx-shadow {
 		clip-path: inset(0px -15px 0px 0px);
-		border-right: var(--wx-table-fixed-column-right-border);
+		border-right: var(--wx-table-fixed-column-border);
+	}
+
+	.wx-cell.wx-fixed-right.wx-shadow {
+		border-right: var(--wx-table-cell-border);
+		border-left: var(--wx-table-fixed-column-border);
+	}
+
+	.wx-cell.wx-fixed-right.wx-cell:last-child {
+		border-right: none;
 	}
 
 	.wx-shadow,
 	.wx-fixed {
-		z-index: 1;
+		z-index: 3;
 	}
 
 	.wx-rowspan {
@@ -73,7 +113,13 @@
 	}
 
 	.wx-rowspan.wx-shadow,
-	.wx-colspan.wx-shadow {
-		z-index: 3;
+	.wx-rowspan.wx-fixed,
+	.wx-colspan.wx-shadow,
+	.wx-colspan.wx-fixed {
+		z-index: 4;
+	}
+
+	:global(.wx-f-row:not(:last-child)) .wx-cell:not(.wx-rowspan) {
+		border-bottom: var(--wx-table-header-cell-border);
 	}
 </style>

package/src/components/Grid.svelte

@@ -9,7 +9,7 @@
 
 	// stores
 	import { EventBusRouter } from "wx-lib-state";
-	import { DataStore } from "wx-grid-store";
+	import { DataStore, isCommunity } from "wx-grid-store";
 
 	// ui
 	import Layout from "./Layout.svelte";
@@ -29,6 +29,8 @@
 		editor = null,
 		filter = null,
 		overlay = null,
+		reorder = false,
+		onreorder = null,
 		autoRowHeight = false,
 		sizes = {},
 		split = { left: 0 },
@@ -87,6 +89,7 @@
 		getReactiveState: dataStore.getReactive.bind(dataStore),
 		exec: firstInRoute.exec.bind(firstInRoute),
 		getRow: dataStore.getRow.bind(dataStore),
+		getRowIndex: dataStore.getRowIndex.bind(dataStore),
 	});
 	// auto config columns
 	const finalColumns = $derived.by(() => {
@@ -111,6 +114,13 @@
 		return columns;
 	});
 
+	const isReorderAvailable = $derived.by(() => {
+		let available = !tree;
+		if (!isCommunity()) available = true;
+
+		return available ? reorder : false;
+	});
+
 	let _skin = $derived(getContext("wx-theme"));
 
 	let init_once = true;
@@ -126,6 +136,7 @@
 			filter,
 			tree,
 			_skin,
+			_select: select,
 		});
 
 		if (init_once && init) {
@@ -146,7 +157,8 @@
 		{rowStyle}
 		{columnStyle}
 		{cellStyle}
-		{select}
+		reorder={isReorderAvailable}
+		{onreorder}
 		{multiselect}
 		{autoRowHeight}
 	/>