wx-svelte-grid 1.3.2 → 2.0.0-beta-2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-grid",
-	"version": "1.3.2",
+	"version": "2.0.0-beta-2",
 	"description": "A powerful and flexible DataGrid component written in Svelte",
 	"productTag": "grid",
 	"needsTrial": true,
@@ -8,7 +8,7 @@
 	"scripts": {
 		"build": "vite build",
 		"build:tests": "vite build --mode test",
-		"lint": "yarn eslint ./demos ./src --ext .svelte,.ts,.js",
+		"lint": "yarn eslint ./demos ./src",
 		"start": "vite --open",
 		"start:tests": "vite --open=/tests/ --mode test --host 0.0.0.0  --port 5100",
 		"test": "true",
@@ -34,11 +34,11 @@
 		"wx-lib-dom": "0.6.0",
 		"wx-lib-state": "1.9.0",
 		"wx-lib-svelte": "0.4.0",
-		"wx-svelte-menu": "1.3.0",
-		"wx-svelte-core": "1.3.1",
-		"wx-grid-data-provider": "1.3.2",
-		"wx-grid-locales": "1.3.2",
-		"wx-grid-store": "1.3.2"
+		"wx-svelte-menu": "2.0.0-beta-2",
+		"wx-svelte-core": "2.0.0-beta-2",
+		"wx-grid-data-provider": "2.0.0-beta-2",
+		"wx-grid-locales": "2.0.0-beta-2",
+		"wx-grid-store": "2.0.0-beta-2"
 	},
 	"files": [
 		"src",

package/src/components/Cell.svelte

@@ -2,13 +2,22 @@
 	import { getStyle } from "../helpers/columnWidth";
 	import { getRenderValue } from "wx-grid-store";
 
-	export let row;
-	export let col;
-	export let cellStyle = null;
-	export let columnStyle = null;
+	/**
+	 * @typedef {Object} Props
+	 * @property {any} row
+	 * @property {any} col
+	 * @property {any} [cellStyle]
+	 * @property {any} [columnStyle]
+	 * @property {import('svelte').Snippet} [children]
+	 */
 
-	let style, css;
-	$: style = getStyle(col.width, col.flexgrow, col.fixed, col.left);
+	/** @type {Props} */
+	let { row, col, cellStyle = null, columnStyle = null, children } = $props();
+
+	let style = $derived(
+			getStyle(col.width, col.flexgrow, col.fixed, col.left)
+		),
+		css = $derived(buildCellCss(columnStyle, cellStyle));
 
 	function buildCellCss(columnStyle, cellStyle) {
 		let css = "wx-cell";
@@ -17,7 +26,6 @@
 		return css;
 	}
 	// params are needed for css update
-	$: css = buildCellCss(columnStyle, cellStyle);
 </script>
 
 <div
@@ -29,20 +37,24 @@
 >
 	{#if col.treetoggle}
 		<div class="wx-tree-cell">
-			<span style="margin-left:{row.$level * 28}px;" />
+			<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}
-			<slot>{getRenderValue(row, col)}</slot>
+			{#if children}{@render children()}{:else}{getRenderValue(
+					row,
+					col
+				)}{/if}
 		</div>
-	{:else}
-		<slot>{getRenderValue(row, col)}</slot>
-	{/if}
+	{:else if children}{@render children()}{:else}{getRenderValue(
+			row,
+			col
+		)}{/if}
 </div>
 
 <style>

package/src/components/FooterCell.svelte

@@ -1,21 +1,19 @@
 <script>
 	import { getStyle, getCssName } from "../helpers/columnWidth";
 
-	export let cell;
-	export let column;
-	export let columnStyle;
+	let { cell, column, columnStyle } = $props();
 
-	let style;
-	$: style = getStyle(
-		cell.width,
-		cell.flexgrow,
-		column.fixed,
-		column.left,
-		cell.height
+	let style = $derived(
+		getStyle(
+			cell.width,
+			cell.flexgrow,
+			column.fixed,
+			column.left,
+			cell.height
+		)
 	);
 
-	let css = "";
-	$: css = getCssName(column, cell, columnStyle);
+	let css = $derived(getCssName(column, cell, columnStyle));
 </script>
 
 <div class="wx-cell {css} {cell.css || ''}" {style}>

package/src/components/Grid.svelte

@@ -1,8 +1,7 @@
 <script>
 	// svelte core
-	import { createEventDispatcher, getContext } from "svelte";
+	import { getContext, setContext } from "svelte";
 	import { writable } from "svelte/store";
-	const dispatch = createEventDispatcher();
 
 	// core widgets lib
 	import { Locale } from "wx-svelte-core";
@@ -15,68 +14,113 @@
 	// ui
 	import Layout from "./Layout.svelte";
 
-	// incoming parameters
-	export let data = [];
-	export let columns = [];
+	let {
+		data = [],
+		columns = [],
+		rowStyle = null,
+		columnStyle = null,
+		cellStyle = null,
+		selectedRows = [],
+		select = true,
+		multiselect = false,
+		header = true,
+		footer = false,
+		dynamic = null,
+		editor = null,
+		filter = null,
+		overlay = null,
+		autoRowHeight = false,
+		sizes = {},
+		split = { left: 0 },
+		tree = false,
+		autoConfig = false,
+		init = null,
+		...restProps
+	} = $props();
 
-	export let rowStyle = null;
-	export let columnStyle = null;
-	export let cellStyle = null;
-
-	export let selected = null;
-	export let selectedRows = [];
-	export let select = true;
-	export let multiselect = false;
+	// init stores
+	const dataStore = new DataStore(writable);
 
-	export let header = true;
-	export let footer = false;
-	export let dynamic = null;
-	export let editor = null;
-	export let filter = null;
-	export let overlay = null;
-	export let autoRowHeight = false;
-	export let sizes = {};
-	export let split = { left: 0 };
+	// define event route
+	let firstInRoute = dataStore.in;
 
-	export let tree = false;
-	export let autoConfig = false;
+	const dash = /-/g;
+	let lastInRoute = new EventBusRouter((a, b) => {
+		const name = "on" + a.replace(dash, "");
+		if (restProps[name]) {
+			restProps[name](b);
+		}
+	});
+	firstInRoute.setNext(lastInRoute);
 
-	export let init = null;
+	// public API
+	export const // state
+		getState = dataStore.getState.bind(dataStore),
+		getReactiveState = dataStore.getReactive.bind(dataStore),
+		getStores = () => ({ data: dataStore }),
+		// events
+		exec = firstInRoute.exec,
+		setNext = ev => (lastInRoute = lastInRoute.setNext(ev)),
+		intercept = firstInRoute.intercept.bind(firstInRoute),
+		on = firstInRoute.on.bind(firstInRoute),
+		detach = firstInRoute.detach.bind(firstInRoute),
+		// extra api
+		getRow = id => dataStore.getRow(id),
+		getColumn = id => dataStore.getColumn(id);
+
+	const api = {
+		exec,
+		setNext,
+		intercept,
+		on,
+		detach,
+		getRow,
+		getColumn,
+		getState,
+		getReactiveState,
+		getStores,
+	};
 
+	// common API available in components
+	setContext("grid-store", {
+		getState: dataStore.getState.bind(dataStore),
+		getReactiveState: dataStore.getReactive.bind(dataStore),
+		exec: firstInRoute.exec.bind(firstInRoute),
+		getRow: dataStore.getRow.bind(dataStore),
+	});
 	// auto config columns
-	$: if (autoConfig && !columns.length && data.length) {
-		const test = data[0];
-
-		for (let key in test)
-			if (key != "id" && key[0] != "$") {
-				let col = {
-					id: key,
-					header: key[0].toUpperCase() + key.substr(1),
-				};
-
-				if (typeof autoConfig === "object")
-					col = { ...col, ...autoConfig };
-				columns.push(col);
+	const finalColumns = $derived.by(() => {
+		let res = columns;
+		if (autoConfig && !res.length && data.length) {
+			const test = data[0];
+
+			for (let key in test) {
+				if (key != "id" && key[0] != "$") {
+					let col = {
+						id: key,
+						header: key[0].toUpperCase() + key.substr(1),
+					};
+
+					if (typeof autoConfig === "object")
+						col = { ...col, ...autoConfig };
+					columns.push(col);
+				}
 			}
-	}
-	//sync selection props
-	$: {
-		if (selectedRows.length) selected = selectedRows[0];
-		else if (selected) selectedRows.push(selected);
-	}
+		}
 
-	$: _skin = getContext("wx-theme");
+		return columns;
+	});
 
-	// init stores
-	const dataStore = new DataStore(writable);
-	$: {
+	let _skin = $derived(getContext("wx-theme"));
+
+	let init_once = true;
+	const reinitStore = () => {
 		dataStore.init({
 			data,
 			editor,
-			columns,
+			columns: finalColumns,
 			split,
 			sizes,
-			selected,
 			selectedRows,
 			dynamic,
 			filter,
@@ -84,45 +128,18 @@
 			_skin,
 		});
 
-		if (init) {
+		if (init_once && init) {
 			init(api);
-			init = null;
+			init_once = false;
 		}
-	}
-
-	// define event route
-	let firstInRoute = dataStore.in;
-	let lastInRoute = new EventBusRouter(dispatch);
-	firstInRoute.setNext(lastInRoute);
-
-	const actions = ev => {
-		firstInRoute.exec(ev.detail.action, ev.detail.data);
 	};
 
-	// public API
-	export const api = {
-		// state
-		getState: dataStore.getState.bind(dataStore),
-		getReactiveState: dataStore.getReactive.bind(dataStore),
-		getStores: () => ({ data: dataStore }),
-
-		// events
-		exec: firstInRoute.exec,
-		setNext: ev => (lastInRoute = lastInRoute.setNext(ev)),
-		intercept: firstInRoute.intercept.bind(firstInRoute),
-		on: firstInRoute.on.bind(firstInRoute),
-		detach: firstInRoute.detach.bind(firstInRoute),
-
-		// extra api
-		getRow: id => dataStore.getRow(id),
-		getColumn: id => dataStore.getColumn(id),
-	};
+	reinitStore();
+	$effect(reinitStore);
 </script>
 
 <Locale words={en} optional={true}>
 	<Layout
-		store={dataStore}
-		{api}
 		{header}
 		{footer}
 		{overlay}
@@ -132,7 +149,5 @@
 		{select}
 		{multiselect}
 		{autoRowHeight}
-		on:action={actions}
-		on:data-request
 	/>
 </Locale>

package/src/components/HeaderCell.svelte

@@ -1,15 +1,12 @@
 <script>
-	import { createEventDispatcher } from "svelte";
+	import { getContext } from "svelte";
 	import { resize } from "../helpers/actions/resize";
 	import { getCssName, getStyle } from "../helpers/columnWidth";
 
-	export let cell;
-	export let column;
-	export let row;
-	export let lastRow;
-	export let columnStyle;
+	let { cell, column, row, lastRow, columnStyle } = $props();
+
+	const api = getContext("grid-store");
 
-	const dispatch = createEventDispatcher();
 	let start;
 
 	function down(node) {
@@ -17,44 +14,40 @@
 	}
 
 	function move(dx) {
-		dispatch("action", {
-			action: "resize-column",
-			data: { id: cell.id, width: Math.max(1, start + dx) },
+		api.exec("resize-column", {
+			id: cell.id,
+			width: Math.max(1, start + dx),
 		});
 	}
 
 	function sort(ev) {
-		dispatch("action", {
-			action: "sort-rows",
-			data: { key: cell.id, add: ev.ctrlKey },
-		});
+		api.exec("sort-rows", { key: cell.id, add: ev.ctrlKey });
 	}
-	function collapse() {
-		dispatch("action", {
-			action: "collapse-column",
-			data: { id: cell.id, row },
-		});
+	function collapse(ev) {
+		if (ev) ev.stopPropagation();
+		api.exec("collapse-column", { id: cell.id, row });
 	}
 
-	let style;
-	$: style = getStyle(
-		cell.width,
-		cell.flexgrow,
-		column.fixed,
-		column.left,
-		cell.height
+	let style = $derived(
+		getStyle(
+			cell.width,
+			cell.flexgrow,
+			column.fixed,
+			column.left,
+			cell.height
+		)
 	);
 
-	let css = "";
-	$: css = getCssName(column, cell, columnStyle);
+	const css = $derived(getCssName(column, cell, columnStyle));
 </script>
 
 {#if cell.collapsed && column.collapsed}
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="wx-cell {css} {cell.css || ''} wx-collapsed"
 		{style}
-		on:click|stopPropagation={collapse}
+		onclick={collapse}
 		data-header-id={column.id}
 	>
 		<div class="wx-text">{cell.text || ""}</div>
@@ -66,21 +59,23 @@
 		data-header-id={column.id}
 	>
 		{#if cell.collapsible}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<div class="wx-collapse" on:click|stopPropagation={collapse}>
-				<i class="wxi-angle-{cell.collapsed ? 'down' : 'right'}" />
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div class="wx-collapse" onclick={collapse}>
+				<i class="wxi-angle-{cell.collapsed ? 'down' : 'right'}"></i>
 			</div>
 		{/if}
 
 		<div class="wx-text">{cell.text || ""}</div>
 
 		{#if column.resize && lastRow}
-			<div class="wx-grip" use:resize={{ down, move }} />
+			<div class="wx-grip" use:resize={{ down, move }}></div>
 		{/if}
 
 		{#if column.sort}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<div class="wx-sort" on:click={sort}>
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div class="wx-sort" onclick={sort}>
 				{#if column.$sort && lastRow}
 					{#if column.$sort.index > 0}
 						<div class="wx-order">{column.$sort.index}</div>
@@ -89,7 +84,7 @@
 						class="wxi-arrow-{column.$sort.order === 'asc'
 							? 'up'
 							: 'down'}"
-					/>
+					></i>
 				{/if}
 			</div>
 		{/if}

package/src/components/HeaderFooter.svelte

@@ -1,26 +1,30 @@
 <script>
+	import { getContext } from "svelte";
 	import HeaderCell from "./HeaderCell.svelte";
 	import FooterCell from "./FooterCell.svelte";
 
-	export let deltaLeft;
-	export let contentWidth;
-	export let rowHeights;
-	export let columns;
-	export let type = "header";
+	let {
+		deltaLeft,
+		contentWidth,
+		columns,
+		type = "header",
+		columnStyle,
+	} = $props();
 
-	export let columnStyle;
+	const api = getContext("grid-store");
+	const { _sizes: sizes } = api.getReactiveState();
+	let rowHeights = $derived($sizes[`${type}RowHeights`]);
 
-	let renderedHeader = [];
-	$: {
+	let renderedHeader = $derived.by(() => {
+		let res = [];
 		if (columns.length) {
 			const rowsCount = columns[0][type].length;
-			renderedHeader = [];
 			for (let ri = 0; ri < rowsCount; ri++) {
 				let inSpan = 0;
-				renderedHeader.push([]);
+				res.push([]);
 				columns.forEach(col => {
 					if (!inSpan) {
-						renderedHeader[ri].push(col[type][ri]);
+						res[ri].push(col[type][ri]);
 					}
 
 					if (col[type][ri].colspan > 1) {
@@ -29,7 +33,8 @@
 				});
 			}
 		}
-	}
+		return res;
+	});
 
 	function getColumn(id) {
 		return columns.find(c => c.id === id);
@@ -58,7 +63,6 @@
 						column={getColumn(cell.id)}
 						row={i}
 						lastRow={isLast(cell, i)}
-						on:action
 					/>
 				{:else}
 					<FooterCell