wx-svelte-grid 2.1.5 → 2.3.0

package/license.txt

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 XB Software Sp. z o.o.
+Copyright (c) 2025 XB Software Sp. z o.o.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "wx-svelte-grid",
-	"version": "2.1.5",
-	"description": "A powerful and flexible DataGrid component written in Svelte",
+	"version": "2.3.0",
+	"description": "A fast, feature-rich Svelte DataGrid component",
 	"productTag": "grid",
 	"productTrial": false,
 	"type": "module",
@@ -18,7 +18,8 @@
 	"svelte": "src/index.js",
 	"exports": {
 		".": {
-			"svelte": "./src/index.js"
+			"svelte": "./src/index.js",
+			"types": "./types/index.d.ts"
 		},
 		"./package.json": "./package.json"
 	},
@@ -32,22 +33,24 @@
 	},
 	"homepage": "https://svar.dev/svelte/datagrid/",
 	"dependencies": {
-		"wx-lib-dom": "0.8.0",
-		"wx-lib-state": "1.9.0",
-		"wx-lib-svelte": "0.5.1",
-		"wx-svelte-menu": "2.1.1",
-		"wx-svelte-core": "2.1.1",
-		"wx-grid-data-provider": "2.1.5",
-		"wx-grid-locales": "2.1.5",
-		"wx-grid-store": "2.1.5"
+		"@svar-ui/lib-dom": "0.9.2",
+		"@svar-ui/lib-state": "1.9.6",
+		"@svar-ui/lib-svelte": "0.5.2",
+		"@svar-ui/svelte-menu": "2.3.0",
+		"@svar-ui/svelte-core": "2.3.1",
+		"@svar-ui/grid-data-provider": "2.3.0",
+		"@svar-ui/grid-locales": "2.3.0",
+		"@svar-ui/grid-store": "2.3.0"
 	},
 	"devDependencies": {
-		"wx-svelte-editor": "2.1.2",
-		"wx-svelte-comments": "2.1.1",
-		"wx-svelte-tasklist": "2.1.1"
+		"@svar-ui/svelte-editor": "2.3.0",
+		"@svar-ui/svelte-comments": "2.3.0",
+		"@svar-ui/svelte-tasklist": "2.3.0",
+		"@svar-ui/svelte-filter": "2.3.0"
 	},
 	"files": [
 		"src",
+		"types",
 		"readme.md",
 		"whatsnew.md",
 		"license.txt"

package/readme.md

@@ -12,44 +12,47 @@
 
 <div align="center">
 
-[![npm](https://img.shields.io/npm/v/wx-svelte-grid.svg)](https://www.npmjs.com/package/wx-svelte-grid)
+[![npm](https://img.shields.io/npm/v/@svar-ui/svelte-grid.svg)](https://www.npmjs.com/package/@svar-ui/svelte-grid)
 [![License](https://img.shields.io/github/license/svar-widgets/grid)](https://github.com/svar-widgets/grid/blob/main/license.txt)
-[![npm downloads](https://img.shields.io/npm/dm/wx-svelte-grid.svg)](https://www.npmjs.com/package/wx-svelte-grid)
+[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-grid.svg)](https://www.npmjs.com/package/@svar-ui/svelte-grid)
 [![Last Commit](https://img.shields.io/github/last-commit/svar-widgets/grid)](https://github.com/svar-widgets/grid)
 
 </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.
+[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, sorting, filtering, and virtual scrolling for optimal performance.
 
 <div align="center">
   <img src="https://cdn.svar.dev/public/react-grid.png" alt="SVAR Svelte DataGrid - Screenshot" width="700">
 </div>
 
-# :sparkles: Key Features
+### :sparkles: Key Features
 
--   High performance (virtual scrolling and dynamic loading)
+-   High performance (virtual scrolling for rows and columns)
 -   In-cell editing with different cell editors (datepicker, combo, select, rich select, etc.)
+-   Custom HTML for cells
 -   Sorting by multiple columns
--   Responsive design to adapt to different screen/container sizes
--   Multiple row selection
+-   Filtering
+-   Paging
 -   Fixed columns
 -   Expandable/collapsible columns
 -   Customizable tooltips for grid cells
 -   Context menu
+-   External editor for grid data
 -   Tree-like structure
--   Paging
--   Export to CSV
+-   Print support
+-   Responsive design to adapt to different screen/container sizes
+-   Accessibility: compatibile with [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) standard
 -   Keyboard navigation
 -   RestDataProvider for easy backend data binding
 -   Dark and light skins
 
-# :hammer_and_wrench: How to Use
+### :hammer_and_wrench: How to Use
 
 To use SVAR DataGrid, simply import the package and include the component in your Svelte file:
 
 ```svelte
 <script>
-	import { Grid } from "wx-svelte-grid";
+	import { Grid } from "@svar-ui/svelte-grid";
 
 	const data = [
 		{

package/src/components/Cell.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { onDestroy, getContext } from "svelte";
 	import { getStyle } from "../helpers/columnWidth";
-	import { getRenderValue } from "wx-grid-store";
+	import { getRenderValue } from "@svar-ui/grid-store";
 
 	let {
 		row,
@@ -35,11 +35,9 @@
 
 	let cellEl;
 	$effect(() => {
-		if (cellEl) {
-			if (focusable && $focusCell) cellEl.focus();
-			else if (!focusable && document.activeElement === cellEl)
-				cellEl.blur();
-		}
+		const needFocus =
+			$focusCell?.row === row.id && $focusCell?.column === column.id;
+		if (cellEl && focusable && needFocus) cellEl.focus();
 	});
 
 	function buildCellCss(columnStyle, cellStyle) {

package/src/components/Grid.svelte

@@ -4,12 +4,12 @@
 	import { writable } from "svelte/store";
 
 	// core widgets lib
-	import { Locale } from "wx-svelte-core";
-	import { en } from "wx-grid-locales";
+	import { Locale } from "@svar-ui/svelte-core";
+	import { en } from "@svar-ui/grid-locales";
 
 	// stores
-	import { EventBusRouter } from "wx-lib-state";
-	import { DataStore, isCommunity } from "wx-grid-store";
+	import { EventBusRouter } from "@svar-ui/lib-state";
+	import { DataStore, isCommunity } from "@svar-ui/grid-store";
 
 	// ui
 	import Layout from "./Layout.svelte";
@@ -26,7 +26,6 @@
 		header = true,
 		footer = false,
 		dynamic = null,
-		filter = null,
 		overlay = null,
 		reorder = false,
 		onreorder = null,
@@ -36,9 +35,17 @@
 		tree = false,
 		autoConfig = false,
 		init = null,
+		responsive = null,
+		sortMarks = {},
+		undo = false,
 		...restProps
 	} = $props();
 
+	let clientWidth = $state(0);
+	let clientHeight = $state(0);
+	let responsiveLevel = $state(null);
+	let responsiveConfig = $state(null);
+
 	// init stores
 	const dataStore = new DataStore(writable);
 
@@ -92,27 +99,50 @@
 	});
 	// auto config columns
 	const finalColumns = $derived.by(() => {
-		let res = columns;
-		if (autoConfig && !res.length && data.length) {
+		if (autoConfig && !columns.length && data.length) {
 			const test = data[0];
+			const autoCols = [];
 
 			for (let key in test) {
-				if (key != "id" && key[0] != "$") {
+				if (key !== "id" && key[0] !== "$") {
 					let col = {
 						id: key,
-						header: key[0].toUpperCase() + key.substring(1),
+						header: key[0].toUpperCase() + key.slice(1),
 					};
 
-					if (typeof autoConfig === "object")
+					if (typeof autoConfig === "object") {
 						col = { ...col, ...autoConfig };
-					columns.push(col);
+					}
+					autoCols.push(col);
 				}
 			}
+
+			return autoCols;
 		}
 
-		return columns;
+		return responsiveConfig?.columns ?? columns;
 	});
 
+	const finalSizes = $derived(responsiveConfig?.sizes ?? sizes);
+
+	function resize(rect) {
+		clientWidth = rect.width;
+		clientHeight = rect.height;
+
+		if (responsive) {
+			const levels = Object.keys(responsive)
+				.map(Number)
+				.sort((a, b) => a - b);
+
+			const newLevel = levels.find(level => clientWidth <= level) ?? null;
+
+			if (newLevel !== responsiveLevel) {
+				responsiveConfig = responsive[newLevel];
+				responsiveLevel = newLevel;
+			}
+		}
+	}
+
 	const isReorderAvailable = $derived.by(() => {
 		let available = !tree;
 		if (!isCommunity()) available = true;
@@ -121,20 +151,20 @@
 	});
 
 	let _skin = $derived(getContext("wx-theme"));
-
 	let init_once = true;
 	const reinitStore = () => {
 		dataStore.init({
 			data,
 			columns: finalColumns,
 			split,
-			sizes,
+			sizes: finalSizes,
 			selectedRows,
 			dynamic,
-			filter,
 			tree,
+			sortMarks,
+			select,
+			undo,
 			_skin,
-			_select: select,
 		});
 
 		if (init_once && init) {
@@ -159,5 +189,9 @@
 		{onreorder}
 		{multiselect}
 		{autoRowHeight}
+		{clientWidth}
+		{clientHeight}
+		{responsiveLevel}
+		{resize}
 	/>
 </Locale>

package/src/components/HeaderCell.svelte

@@ -16,17 +16,29 @@
 	} = $props();
 
 	const api = getContext("grid-store");
+	const { sortMarks } = api.getReactiveState();
 
 	let start;
 
+	let sortMark = $derived($sortMarks[column.id]);
+
 	function down(node) {
 		start = cell.flexgrow ? node.parentNode.clientWidth : cell.width;
 	}
 
 	function move(dx) {
+		resizeColumn(dx, true);
+	}
+
+	function up(dx) {
+		resizeColumn(dx, false);
+	}
+
+	function resizeColumn(dx, inProgress) {
 		api.exec("resize-column", {
 			id: cell.id,
 			width: Math.max(1, start + dx),
+			inProgress,
 		});
 	}
 
@@ -110,9 +122,9 @@
 		aria-colindex={cell._colindex}
 		aria-colspan={cell.colspan > 1 ? cell.colspan : undefined}
 		aria-rowspan={cell.rowspan > 1 ? cell.rowspan : undefined}
-		aria-sort={!column.$sort?.order || cell.filter
+		aria-sort={!sortMark?.order || cell.filter
 			? "none"
-			: column.$sort?.order === "asc"
+			: sortMark?.order === "asc"
 				? "ascending"
 				: "descending"}
 		onkeydown={toggleSortColumn}
@@ -154,23 +166,23 @@
 				class="wx-grip"
 				role="presentation"
 				aria-label="Resize column"
-				use:resize={{ down, move }}
+				use:resize={{ down, move, up }}
 				onclick={ev => ev.stopPropagation()}
 			>
 				<div></div>
 			</div>
 		{/if}
 
-		{#if column.sort && !cell._hidden && !cell.filter}
+		{#if sortRow}
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div class="wx-sort">
-				{#if column.$sort && sortRow}
-					{#if column.$sort.index > 0}
-						<div class="wx-order">{column.$sort.index}</div>
+				{#if sortMark}
+					{#if typeof sortMark.index !== "undefined"}
+						<div class="wx-order">{sortMark.index + 1}</div>
 					{/if}
 					<i
-						class="wxi-arrow-{column.$sort.order === 'asc'
+						class="wxi-arrow-{sortMark.order === 'asc'
 							? 'up'
 							: 'down'}"
 					></i>

package/src/components/HeaderFooter.svelte

@@ -2,7 +2,7 @@
 	import { getContext } from "svelte";
 	import HeaderCell from "./HeaderCell.svelte";
 	import FooterCell from "./FooterCell.svelte";
-	import { isCommunity } from "wx-grid-store";
+	import { isCommunity } from "@svar-ui/grid-store";
 
 	let {
 		deltaLeft,
@@ -62,6 +62,7 @@
 	}
 
 	function isSort(cell, ind, column) {
+		if (!column.sort) return false;
 		for (let i = renderedHeader.length - 1; i >= 0; i--) {
 			const cell = column.header[i];
 			if (!cell.filter && !cell._hidden) return ind === i;

package/src/components/Layout.svelte

@@ -12,11 +12,11 @@
 		locateAttr,
 		locate,
 		id,
-	} from "wx-lib-dom";
+	} from "@svar-ui/lib-dom";
 
-	import { hotkeys } from "wx-grid-store";
-	import { keys } from "../helpers/hotkeys";
-	import { scrollTo } from "wx-grid-store";
+	import { hotkeys } from "@svar-ui/grid-store";
+	import { getKeys } from "../helpers/hotkeys";
+	import { scrollTo } from "@svar-ui/grid-store";
 
 	import Cell from "./Cell.svelte";
 	import HeaderFooter from "./HeaderFooter.svelte";
@@ -35,6 +35,10 @@
 		columnStyle,
 		cellStyle,
 		autoRowHeight,
+		resize,
+		clientWidth,
+		clientHeight,
+		responsiveLevel,
 	} = $props();
 
 	const api = getContext("grid-store");
@@ -46,12 +50,13 @@
 		split,
 		_sizes,
 		selectedRows,
-		_select: select,
+		select,
 		editor,
 		scroll,
 		tree,
 		focusCell,
 		_print,
+		undo,
 	} = api.getReactiveState();
 
 	// will be calculated once, after rendering
@@ -65,9 +70,7 @@
 	});
 
 	const defaultRowHeight = $derived($_sizes.rowHeight);
-	let clientWidth = $state(0),
-		clientHeight = $state(0),
-		tableNode;
+	let tableNode;
 
 	// reorder
 	let dragItem = $state(null),
@@ -346,11 +349,6 @@
 		scrollLeft = ev.target.scrollLeft;
 	}
 
-	function resize(rect) {
-		clientWidth = rect.width;
-		clientHeight = rect.height;
-	}
-
 	function lockSelection(ev) {
 		// we prevent default on mousedown reaction to stop the unwanted text selection
 		// in the same time we need to have focus-in, so trigger it manually
@@ -638,7 +636,7 @@
 </script>
 
 <div
-	class="wx-grid"
+	class={`wx-grid ${responsiveLevel ? `wx-responsive-${responsiveLevel}` : ""}`}
 	style="--header-height:{headerHeight}px; --footer-height:{footerHeight}px;--split-left-width:{leftColumns.width}px;
 		--split-right-width:{rightColumns.width}px;"
 >
@@ -655,7 +653,10 @@
 			getReorder: () => reorder,
 			getDraggableInfo: () => ({ hasDraggable: checkDraggable() }),
 		}}
-		use:hotkeys={{ keys, exec: v => api.exec("hotkey", v) }}
+		use:hotkeys={{
+			keys: getKeys({ undo: $undo }),
+			exec: v => api.exec("hotkey", v),
+		}}
 		{style}
 		role={$tree ? "treegrid" : "grid"}
 		aria-colcount={renderColumns.data.length}
@@ -772,6 +773,7 @@
 	.wx-grid {
 		height: 100%;
 	}
+
 	.wx-table-box {
 		outline: none;
 		position: relative;

package/src/components/Tooltip.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { getRenderValue } from "wx-grid-store";
+	import { getRenderValue } from "@svar-ui/grid-store";
 
 	let { content: Content = null, api, children } = $props();
 

package/src/components/editor/Editor.svelte

@@ -8,7 +8,7 @@
 		Area,
 		Checkbox,
 		Switch,
-	} from "wx-svelte-core";
+	} from "@svar-ui/svelte-core";
 
 	let { editors, data = null } = $props();
 </script>

package/src/components/inlineEditors/Combo.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { onMount } from "svelte";
-	import { SuggestDropdown } from "wx-svelte-core";
+	import { SuggestDropdown } from "@svar-ui/svelte-core";
 
 	let { actions, editor, onaction } = $props();
 

package/src/components/inlineEditors/Datepicker.svelte

@@ -1,14 +1,14 @@
 <script>
 	import { onMount } from "svelte";
 
-	import { Calendar, Dropdown } from "wx-svelte-core";
+	import { Calendar, Dropdown } from "@svar-ui/svelte-core";
 
 	let { actions, editor, onaction } = $props();
 
 	let value = $state(editor.value || new Date());
 
-	let template = $state(editor?.config?.template);
-	let cell = $state(editor?.config?.cell);
+	let template = $state(editor.config?.template);
+	let cell = $state(editor.config?.cell);
 
 	function updateValue({ value }) {
 		actions.updateValue(value);
@@ -42,7 +42,7 @@
 	{:else}<span class="wx-text">{editor.renderedValue}</span>{/if}
 </div>
 <Dropdown width={"auto"}>
-	<Calendar {value} onchange={updateValue} />
+	<Calendar {value} onchange={updateValue} buttons={editor.config?.buttons} />
 </Dropdown>
 
 <style>

package/src/components/inlineEditors/Editor.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { getContext } from "svelte";
 	import { getStyle } from "../../helpers/columnWidth";
-	import { clickOutside } from "wx-lib-dom";
+	import { clickOutside } from "@svar-ui/lib-dom";
 	import { editors } from "./editors";
 
 	let { column, row } = $props();
@@ -34,6 +34,10 @@
 		}
 	}
 
+	function keyHandler(ev) {
+		if (ev.key === "Enter" && $editor) cancel();
+	}
+
 	let style = $derived(
 		getStyle(
 			column.width,
@@ -44,7 +48,12 @@
 		)
 	);
 
-	const SvelteComponent = $derived(editors[column.editor.type]);
+	const SvelteComponent = $derived.by(() => {
+		let editor = column.editor;
+		if (typeof editor === "function") editor = editor(row, column);
+		let type = typeof editor === "string" ? editor : editor.type;
+		return editors[type];
+	});
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -61,6 +70,7 @@
 	tabindex="-1"
 	onclick={ev => ev.stopPropagation()}
 	ondblclick={ev => ev.stopPropagation()}
+	onkeydown={keyHandler}
 	use:clickOutside={() => save(true)}
 >
 	<SvelteComponent

package/src/components/inlineEditors/Richselect.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { onMount } from "svelte";
-	import { SuggestDropdown } from "wx-svelte-core";
+	import { SuggestDropdown } from "@svar-ui/svelte-core";
 
 	let { actions, editor, onaction } = $props();
 

package/src/components/inlineFilters/Richselect.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { getContext } from "svelte";
-	import { RichSelect } from "wx-svelte-core";
-	import { getValue } from "wx-grid-store";
+	import { RichSelect } from "@svar-ui/svelte-core";
+	import { getValue } from "@svar-ui/grid-store";
 
 	let { filter, column, action, filterValue } = $props();
 

package/src/components/inlineFilters/Text.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Text } from "wx-svelte-core";
+	import { Text } from "@svar-ui/svelte-core";
 
 	let { filter, column, action, filterValue } = $props();
 

package/src/components/menus/ContextMenu.svelte

@@ -1,11 +1,12 @@
 <script>
-	import { ContextMenu } from "wx-svelte-menu";
+	import { ContextMenu } from "@svar-ui/svelte-menu";
 	import { getContext } from "svelte";
 	import { defaultMenuOptions } from "../../../src";
+	import { locale } from "@svar-ui/lib-dom";
+	import { en } from "@svar-ui/grid-locales";
 
 	let {
 		api,
-		handler,
 		options = defaultMenuOptions,
 		at = "point",
 		resolver = getItem,
@@ -16,7 +17,8 @@
 		onclick,
 	} = $props();
 
-	const _ = getContext("wx-i18n").getGroup("grid");
+	const _ =
+		getContext("wx-i18n")?.getGroup("grid") || locale(en).getGroup("grid");
 
 	const localize = options => {
 		return options.map(o => {
@@ -62,7 +64,6 @@
 	{at}
 	{dataKey}
 	options={localize(options)}
-	{handler}
 	{resolver}
 	{filter}
 	onclick={handleClicks}

package/src/components/menus/HeaderMenu.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { ContextMenu, registerMenuItem } from "wx-svelte-menu";
+	import { ContextMenu, registerMenuItem } from "@svar-ui/svelte-menu";
 	import HeaderMenuItem from "./HeaderMenuItem.svelte";
 
 	let { columns = null, api, children } = $props();

package/src/components/print/Grid.svelte

@@ -4,7 +4,7 @@
 		getRenderValue,
 		getHeaderFooterPrintColumns,
 		getPrintCellStyle,
-	} from "wx-grid-store";
+	} from "@svar-ui/grid-store";
 	import HeaderFooter from "./HeaderFooter.svelte";
 
 	let { columns, rowStyle, columnStyle, cellStyle, header, footer, reorder } =

package/src/components/print/HeaderFooter.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { getContext } from "svelte";
-	import { getPrintCellStyle, getPrintFilterValue } from "wx-grid-store";
+	import { getPrintCellStyle, getPrintFilterValue } from "@svar-ui/grid-store";
 
 	let { columns, type, columnStyle } = $props();
 

package/src/components/print/Print.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { getContext, onMount } from "svelte";
 	import Grid from "./Grid.svelte";
-	import { getPrintColumns } from "wx-grid-store";
+	import { getPrintColumns } from "@svar-ui/grid-store";
 
 	let { config, ...restProps } = $props();
 

package/src/helpers/actions/reorder.js

@@ -1,4 +1,4 @@
-import { locate, id } from "wx-lib-dom";
+import { locate, id } from "@svar-ui/lib-dom";
 
 const SHIFT = 5;
 const LONG_TOUCH_DELAY = 700;

package/src/helpers/actions/resize.js

@@ -27,7 +27,7 @@ export function resize(node, config) {
 		document.body.style.cursor = "";
 		document.body.style.userSelect = "";
 
-		if (config && config.up) config.up();
+		if (config && config.up) config.up(dx);
 
 		window.removeEventListener("mousemove", move);
 		window.removeEventListener("mouseup", up);

package/src/helpers/hotkeys.js

@@ -1,15 +1,19 @@
-export const keys = {
-	tab: true,
-	"shift+tab": true,
-	arrowup: true,
-	arrowdown: true,
-	arrowright: true,
-	arrowleft: true,
-	enter: true,
-	escape: true,
-	f2: true,
-	home: true,
-	end: true,
-	"ctrl+home": true,
-	"ctrl+end": true,
-};
+export function getKeys(config) {
+	return {
+		tab: true,
+		"shift+tab": true,
+		arrowup: true,
+		arrowdown: true,
+		arrowright: true,
+		arrowleft: true,
+		enter: true,
+		escape: true,
+		f2: true,
+		home: true,
+		end: true,
+		"ctrl+home": true,
+		"ctrl+end": true,
+		"ctrl+z": config.undo,
+		"ctrl+y": config.undo,
+	};
+}

package/src/index.js

@@ -2,25 +2,15 @@ import Grid from "./components/Grid.svelte";
 import HeaderMenu from "./components/menus/HeaderMenu.svelte";
 import Tooltip from "./components/Tooltip.svelte";
 import ContextMenu from "./components/menus/ContextMenu.svelte";
-import { defaultMenuOptions } from "./helpers/menuOptions";
 
 import Material from "./themes/Material.svelte";
 import Willow from "./themes/Willow.svelte";
 import WillowDark from "./themes/WillowDark.svelte";
 
-export { getEditorConfig } from "wx-grid-store";
+export { getEditorConfig, defaultMenuOptions } from "@svar-ui/grid-store";
 
-import { setEnv } from "wx-lib-dom";
-import { env } from "wx-lib-svelte";
+import { setEnv } from "@svar-ui/lib-dom";
+import { env } from "@svar-ui/lib-svelte";
 setEnv(env);
 
-export {
-	Grid,
-	HeaderMenu,
-	Tooltip,
-	ContextMenu,
-	defaultMenuOptions,
-	Material,
-	Willow,
-	WillowDark,
-};
+export { Grid, HeaderMenu, Tooltip, ContextMenu, Material, Willow, WillowDark };

package/src/themes/Material.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Material } from "wx-svelte-core";
+	import { Material } from "@svar-ui/svelte-core";
 	let { fonts = true, children } = $props();
 </script>
 

package/src/themes/Willow.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Willow } from "wx-svelte-core";
+	import { Willow } from "@svar-ui/svelte-core";
 	let { fonts = true, children } = $props();
 </script>
 

package/src/themes/WillowDark.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { WillowDark } from "wx-svelte-core";
+	import { WillowDark } from "@svar-ui/svelte-core";
 	let { fonts = true, children } = $props();
 </script>
 

package/types/index.d.ts

@@ -0,0 +1,137 @@
+import type { Component, ComponentProps } from "svelte";
+import { ContextMenu as BaseContextMenu } from "@svar-ui/svelte-menu";
+
+import type {
+	IColumn,
+	IRow,
+	IApi,
+	ISizeConfig,
+	TMethodsConfig,
+	IConfig,
+	TEditorType,
+	IColumnEditor,
+	IHeaderCell,
+} from "@svar-ui/grid-store";
+
+export * from "@svar-ui/grid-store";
+
+export interface IColumnEditorConfig extends IColumnEditor {
+	config?: IColumnEditor["config"] & {
+		cell?: Component<{
+			data: any;
+			onaction: (ev: {
+				action?: any;
+				data?: { [key: string]: any };
+			}) => void;
+		}>;
+	};
+}
+
+export type TEditorHandlerConfig = (
+	row?: IRow,
+	column?: IColumn
+) => TEditorType | IColumnEditorConfig | null;
+
+export interface ICellProps {
+	api: IApi;
+	row: IRow;
+	column: IColumn;
+	onaction: (ev: { action?: any; data?: { [key: string]: any } }) => void;
+}
+
+export interface IHeaderCellConfig extends IHeaderCell {
+	cell?: Component<
+		ICellProps & {
+			cell: Omit<IHeaderCell, "cell">;
+		}
+	>;
+}
+
+export type TColumnHeaderConfig =
+	| string
+	| IHeaderCellConfig
+	| (string | IHeaderCellConfig)[];
+
+export interface IColumnConfig
+	extends Omit<
+		IColumn,
+		"left" | "right" | "fixed" | "optionsMap" | "header" | "footer"
+	> {
+	cell?: Component<ICellProps>;
+	editor?: TEditorType | IColumnEditorConfig | TEditorHandlerConfig;
+	header?: TColumnHeaderConfig;
+	footer?: TColumnHeaderConfig;
+}
+
+export declare const Grid: Component<
+	{
+		rowStyle?: (row: any) => string;
+		columnStyle?: (column: IColumn) => string;
+		cellStyle?: (row: any, column: IColumn) => string;
+		multiselect?: boolean;
+		autoConfig?: boolean | IColumnConfig;
+		header?: boolean;
+		footer?: boolean;
+		reorder?: boolean;
+		autoRowHeight?: boolean;
+		responsive?: {
+			[key: string]: {
+				sizes?: ISizeConfig;
+				columns?: IColumnConfig[];
+			};
+		};
+		init?: (api: IApi) => void;
+
+		overlay?: string | Component;
+		columns: IColumnConfig[];
+	} & IConfig &
+		GridActions<TMethodsConfig>
+>;
+
+export declare const HeaderMenu: Component<{
+	columns?: { [key: string]: boolean };
+	api?: IApi;
+	children?: () => any;
+}>;
+
+export declare const ContextMenu: Component<
+	ComponentProps<typeof BaseContextMenu> & {
+		api?: IApi;
+	}
+>;
+
+export declare const Tooltip: Component<{
+	content?: Component;
+	api?: IApi;
+	children?: () => any;
+}>;
+
+export declare const Material: Component<{
+	fonts?: boolean;
+	children?: () => any;
+}>;
+
+export declare const Willow: Component<{
+	fonts?: boolean;
+	children?: () => any;
+}>;
+
+export declare const WillowDark: Component<{
+	fonts?: boolean;
+	children?: () => any;
+}>;
+
+/* get component events from store actions*/
+type RemoveHyphen<S extends string> = S extends `${infer Head}-${infer Tail}`
+	? `${Head}${RemoveHyphen<Tail>}`
+	: S;
+
+type EventName<K extends string> = `on${RemoveHyphen<K>}`;
+
+export type GridActions<TMethodsConfig extends Record<string, any>> = {
+	[K in keyof TMethodsConfig as EventName<K & string>]?: (
+		ev: TMethodsConfig[K]
+	) => void;
+} & {
+	[key: `on${string}`]: (ev?: any) => void;
+};

package/whatsnew.md

@@ -1,3 +1,37 @@
+## 2.3.0
+
+### New features
+
+-   TypeScript definitions
+
+### Fixes
+
+-   Default locale is not applied to ContextMenu
+
+## 2.2.0
+
+### New features
+
+-   Undo/redo for data and column actions
+-   Ability to tune responsive behaviour
+-   Dynamic inline editors for column cells
+-   Integration with SVAR Filter
+
+### Updates
+
+-   Non-persistent filtering: table is not re-filtered on data changes
+
+### Fixes
+
+-   Inline "date" editor is not closed on Enter key
+-   Shift+tab hotkey makes extra step with inline editors
+-   Enter hotkey calls "open-row" action for non-branches in `tree` mode
+-   Changing any property reverts data in `tree` mode
+
+### Breaking changes
+
+-   `sort` state property renamed to `sortMarks`
+
 ## 2.1.5
 
 ### Fixes

package/src/helpers/menuOptions.js

@@ -1,15 +0,0 @@
-export const defaultMenuOptions = [
-	{
-		id: "add:before",
-		text: "Add before",
-		icon: "wxi-table-row-plus-before",
-	},
-	{
-		id: "add:after",
-		text: "Add after",
-		icon: "wxi-table-row-plus-after",
-	},
-	{ id: "copy", text: "Copy", icon: "wxi-content-copy" },
-	{ type: "separator" },
-	{ id: "delete", text: "Delete", icon: "wxi-delete-outline" },
-];