wx-svelte-grid 2.5.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-grid",
-	"version": "2.5.0",
+	"version": "2.6.0",
 	"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.1",
 		"@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.5.0",
+		"@svar-ui/svelte-core": "2.5.0",
+		"@svar-ui/svelte-toolbar": "2.5.0",
+		"@svar-ui/grid-data-provider": "2.6.0",
+		"@svar-ui/grid-locales": "2.6.0",
+		"@svar-ui/grid-store": "2.6.0"
 	},
 	"devDependencies": {
-		"@svar-ui/svelte-editor": "2.4.0",
-		"@svar-ui/svelte-filter": "2.4.0"
+		"@svar-ui/svelte-editor": "2.5.0",
+		"@svar-ui/svelte-filter": "2.5.0"
 	},
 	"files": [
 		"src",

package/readme.md

@@ -19,7 +19,7 @@
 
 </div>
 
-[SVAR Svelte DataGrid](https://svar.dev/svelte/datagrid/) is a high-performance Svelte component for building feature-rich, accessible data tables with sorting, filtering, paging, in-cell editing, and virtual scrolling. Easily customizable with CSS and a developer-friendly API.
+[SVAR Svelte DataGrid](https://svar.dev/svelte/datagrid/) is a high-performance Svelte component for building feature-rich, accessible data tables. It supports sorting, advanced filtering, paging, in-cell editing, and virtual scrolling out of the box. Comes with full TypeScript support and a flexible, developer-friendly API. Suitable for dashboards, admin panels, and data-heavy SaaS applications.
 
 <div align="center">
   <img src="https://cdn.svar.dev/public/react-grid.png" alt="SVAR Svelte DataGrid - Screenshot" width="700">
@@ -29,26 +29,30 @@
 
 Here is a quick overview of what SVAR Svelte DataGrid offers:
 
--   High performance (virtual scrolling for rows and columns)
+-   High performance (virtual scrolling and dynamic loading)
 -   In-cell editing with different cell editors (datepicker, combo, select, rich select, etc.)
+-   External editor for grid data
 -   Custom HTML for cells
 -   Sorting by multiple columns
--   Filtering
+-   Advanced filtering (including natural language)
 -   Paging
--   Fixed columns
+-   Frozen columns
 -   Expandable/collapsible columns
+-   Row reordering with drag-and-drop
 -   Customizable tooltips for grid cells
 -   Context menu
--   External editor for grid data
+-   Built-in toolbar
 -   Tree-like structure
--   Print support
--   Responsive design to adapt to different screen/container sizes
--   Accessibility: compatible with [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) standard
+-   Print support, export to CSV
+-   Undo/redo
 -   Keyboard navigation
+-   Accessibility: compatibility with [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) standard
 -   RestDataProvider for easy backend data binding
--   Dark and light skins
+-   Dark and light skins, customizable with CSS (no Tailwind dependency)
 -   Full TypeScript support
 
+[Check the demos](https://docs.svar.dev/svelte/grid/samples/#/base/willow) to see how these features work.
+
 ### :hammer_and_wrench: How to Use
 
 To use SVAR Svelte DataGrid, simply import the package and include the component in your Svelte file:
@@ -87,14 +91,14 @@ To use SVAR Svelte DataGrid, simply import the package and include the component
 
 For further instructions, see the detailed [how-to-start guide](https://docs.svar.dev/svelte/grid/getting_started).
 
-### :computer: How to Modify
+### How to Modify
 
 Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:
 
 1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
 2. Start the project in development mode with `yarn start`
 
-### :white_check_mark: Run Tests
+### Run Tests
 
 To run the test:
 
@@ -107,6 +111,10 @@ To run the test:
     yarn test:cypress
     ```
 
-### :speech_balloon: Need Help?
+### Need Help?
 
 Join our [community forum](https://forum.svar.dev) to get help or post feature requests.
+
+### ⭐ Show Your Support
+
+If SVAR Svelte DataGrid helps your project, [give us a star on GitHub](https://github.com/svar-widgets/grid)! It helps more developers discover this component and keeps our team motivated to ship new features.

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/Grid.svelte

@@ -39,6 +39,7 @@
 		sortMarks = {},
 		undo = false,
 		hotkeys = null,
+		filterValues = {},
 		...restProps
 	} = $props();
 
@@ -147,7 +148,7 @@
 	let _skin = $derived(getContext("wx-theme"));
 	let init_once = true;
 
-	$effect.pre(() => {
+	const reinitStore = () => {
 		dataStore.init({
 			data,
 			columns: finalColumns,
@@ -157,6 +158,7 @@
 			dynamic,
 			tree,
 			sortMarks,
+			filterValues,
 			select,
 			undo,
 			reorder,
@@ -167,7 +169,10 @@
 			init(api);
 			init_once = false;
 		}
-	});
+	};
+
+	reinitStore();
+	$effect(reinitStore);
 </script>
 
 <Locale words={en} optional={true}>

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/inlineEditors/Combo.svelte

@@ -1,8 +1,9 @@
 <script>
 	import { onMount } from "svelte";
 	import { SuggestDropdown } from "@svar-ui/svelte-core";
+	import { clickOutside } from "@svar-ui/lib-dom";
 
-	let { actions, editor, onaction } = $props();
+	let { editor, onaction, onsave, onapply } = $props();
 
 	let { value, renderedValue: text, options: filterOptions } = $state(editor);
 	let { template, cell } = $state(editor?.config || {});
@@ -10,8 +11,8 @@
 	let index = $derived(filterOptions.findIndex(a => a.id === value));
 
 	function updateValue({ id }) {
-		actions.updateValue(id);
-		actions.save();
+		onapply(id);
+		onsave();
 	}
 
 	let navigate;
@@ -46,6 +47,7 @@
 	bind:value={text}
 	oninput={input}
 	onkeydown={e => keydown(e, index)}
+	use:clickOutside={() => onsave(true)}
 />
 <SuggestDropdown items={filterOptions} onready={ready} onselect={updateValue}>
 	{#snippet children({ option })}

package/src/components/inlineEditors/Datepicker.svelte

@@ -1,9 +1,10 @@
 <script>
 	import { onMount } from "svelte";
+	import { clickOutside } from "@svar-ui/lib-dom";
 
 	import { Calendar, Dropdown } from "@svar-ui/svelte-core";
 
-	let { actions, editor, onaction } = $props();
+	let { editor, onaction, onsave, onapply, oncancel } = $props();
 
 	let value = $state(editor.value || new Date());
 
@@ -11,8 +12,8 @@
 	let cell = $state(editor.config?.cell);
 
 	function updateValue({ value }) {
-		actions.updateValue(value);
-		actions.save();
+		onapply(value);
+		onsave();
 	}
 
 	let node;
@@ -31,7 +32,7 @@
 	class="wx-value"
 	bind:this={node}
 	tabindex="0"
-	onclick={() => actions.cancel()}
+	onclick={oncancel}
 	onkeydown={ev => ev.preventDefault()}
 >
 	{#if template}
@@ -42,7 +43,13 @@
 	{:else}<span class="wx-text">{editor.renderedValue}</span>{/if}
 </div>
 <Dropdown width={"auto"}>
-	<Calendar {value} onchange={updateValue} buttons={editor.config?.buttons} />
+	<div use:clickOutside={() => onsave(true)}>
+		<Calendar
+			{value}
+			onchange={updateValue}
+			buttons={editor.config?.buttons}
+		/>
+	</div>
 </Dropdown>
 
 <style>

package/src/components/inlineEditors/Editor.svelte

@@ -1,7 +1,6 @@
 <script>
 	import { getContext } from "svelte";
 	import { getStyle } from "../../helpers/columnWidth";
-	import { clickOutside } from "@svar-ui/lib-dom";
 	import { editors } from "./editors";
 
 	let { column, row } = $props();
@@ -35,7 +34,13 @@
 	}
 
 	function keyHandler(ev) {
-		if (ev.key === "Enter" && $editor) cancel();
+		if (ev.key === "Enter" && $editor) {
+			if (column.editor.type === "multiselect") {
+				updateValue($editor.value);
+			} else {
+				cancel();
+			}
+		}
 	}
 
 	let style = $derived(
@@ -71,11 +76,12 @@
 	onclick={ev => ev.stopPropagation()}
 	ondblclick={ev => ev.stopPropagation()}
 	onkeydown={keyHandler}
-	use:clickOutside={() => save(true)}
 >
 	<SvelteComponent
 		editor={$editor}
-		actions={{ save, cancel, updateValue }}
+		onsave={save}
+		onapply={updateValue}
+		oncancel={cancel}
 		onaction={({ action, data }) => api.exec(action, data)}
 	/>
 </div>

package/src/components/inlineEditors/MultiSelect.svelte

@@ -0,0 +1,113 @@
+<script>
+	import { SuggestDropdown } from "@svar-ui/svelte-core";
+	import { clickOutside } from "@svar-ui/lib-dom";
+	import { onMount } from "svelte";
+
+	let { editor, onaction, onsave, onapply, oncancel } = $props();
+	let { config } = $state(editor);
+
+	const options = $derived(editor?.options ?? []);
+	let value = $derived(editor?.value || []);
+	let renderedValue = $derived(editor?.renderedValue);
+	let index = $derived.by(() => {
+		const firstSelected = options.find(opt => value.includes(opt.id));
+		return firstSelected ? options.indexOf(firstSelected) : -1;
+	});
+
+	function updateValue({ id }) {
+		onapply(id);
+		node.focus();
+	}
+
+	let navigate;
+	let keydown = $state();
+
+	function ready(ev) {
+		navigate = ev.navigate;
+		keydown = ev.keydown;
+		navigate(index);
+	}
+
+	let node = $state();
+	onMount(() => {
+		node.focus();
+		if (window && window.getSelection) {
+			window.getSelection().removeAllRanges();
+		}
+	});
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	bind:this={node}
+	class="wx-value"
+	tabindex="0"
+	onclick={oncancel}
+	onkeydown={ev => {
+		keydown(ev, index);
+		ev.preventDefault();
+	}}
+	use:clickOutside={() => onsave(true)}
+>
+	{#if config?.template}
+		{config.template(value?.map(id => options.find(opt => opt.id === id)))}
+	{:else if config?.cell}
+		{@const SvelteComponent = config.cell}
+		<SvelteComponent
+			data={value.map(id => options.find(opt => opt.id === id))}
+		/>
+	{:else}
+		<span class="wx-text">{renderedValue}</span>
+	{/if}
+</div>
+
+<SuggestDropdown
+	items={options}
+	onready={ready}
+	onselect={updateValue}
+	checkboxes={true}
+	multiselect={true}
+	{value}
+>
+	{#snippet children({ option })}
+		<div class="wx-option">
+			{#if config?.template}
+				{config.template(option)}
+			{:else if config?.cell}
+				{@const SvelteComponent = config.cell}
+				<SvelteComponent data={option} {onaction} />
+			{:else}
+				{option.label}
+			{/if}
+		</div>
+	{/snippet}
+</SuggestDropdown>
+
+<style>
+	.wx-option {
+		display: flex;
+		direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 8px;
+	}
+	.wx-text {
+		width: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.wx-value {
+		width: 100%;
+		height: 100%;
+		padding: 8px;
+		overflow: hidden;
+		outline: none;
+		border: 1px solid var(--wx-color-primary);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

package/src/components/inlineEditors/Richselect.svelte

@@ -1,8 +1,9 @@
 <script>
 	import { onMount } from "svelte";
 	import { SuggestDropdown } from "@svar-ui/svelte-core";
+	import { clickOutside } from "@svar-ui/lib-dom";
 
-	let { actions, editor, onaction } = $props();
+	let { editor, onaction, onsave, onapply, oncancel } = $props();
 
 	let data = $state(editor.options.find(opt => opt.id === editor.value));
 	let { value, options } = $state(editor);
@@ -11,8 +12,8 @@
 	let index = $derived(options.findIndex(a => a.id === value));
 
 	function updateValue({ id }) {
-		actions.updateValue(id);
-		actions.save();
+		onapply(id);
+		onsave();
 	}
 
 	let navigate;
@@ -40,11 +41,12 @@
 	bind:this={node}
 	class="wx-value"
 	tabindex="0"
-	onclick={() => actions.cancel()}
+	onclick={oncancel}
 	onkeydown={ev => {
 		keydown(ev, index);
 		ev.preventDefault();
 	}}
+	use:clickOutside={() => onsave(true)}
 >
 	{#if template}
 		{template(data)}

package/src/components/inlineEditors/Text.svelte

@@ -1,7 +1,8 @@
 <script>
 	import { onMount } from "svelte";
+	import { clickOutside } from "@svar-ui/lib-dom";
 
-	let { actions, editor } = $props();
+	let { editor, onsave, onapply } = $props();
 
 	let value = $state(editor.value || "");
 
@@ -10,15 +11,16 @@
 
 	function updateValue() {
 		value = node.value;
-		actions.updateValue(node.value);
+		onapply(node.value);
 	}
 
 	function closeAndSave({ key }) {
-		if (key === "Enter") actions.save();
+		if (key === "Enter") onsave();
 	}
 </script>
 
 <input
+	use:clickOutside={() => onsave(true)}
 	class="wx-text"
 	oninput={updateValue}
 	onkeydown={closeAndSave}

package/src/components/inlineEditors/editors.js

@@ -2,10 +2,16 @@ import Text from "./Text.svelte";
 import Combo from "./Combo.svelte";
 import Datepicker from "./Datepicker.svelte";
 import Richselect from "./Richselect.svelte";
+import Multiselect from "./MultiSelect.svelte";
 
 export const editors = {
 	text: Text,
 	combo: Combo,
 	datepicker: Datepicker,
 	richselect: Richselect,
+	multiselect: Multiselect,
 };
+
+export function registerInlineEditor(type, component) {
+	editors[type] = component;
+}

package/src/components/inlineFilters/DatePicker.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { DatePicker } from "@svar-ui/svelte-core";
+
+	let { filter, column, action, filterValue } = $props();
+
+	function filterRows({ value }) {
+		action({ value, key: column.id });
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div style="width:100%;">
+	<DatePicker
+		placeholder={""}
+		clear={true}
+		{...filter.config ?? {}}
+		value={filterValue}
+		onchange={filterRows}
+	/>
+</div>
+
+<style>
+	:global(.wx-cell.wx-filter div.wx-datepicker input) {
+		height: 28px;
+		padding: 4px 8px;
+	}
+</style>

package/src/components/inlineFilters/filters.js

@@ -1,7 +1,9 @@
 import Text from "./Text.svelte";
 import Richselect from "./Richselect.svelte";
+import DatePicker from "./DatePicker.svelte";
 
 export const filters = {
 	text: Text,
 	richselect: Richselect,
+	datepicker: DatePicker,
 };

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/src/index.js

@@ -18,6 +18,8 @@ import { setEnv } from "@svar-ui/lib-dom";
 import { env } from "@svar-ui/lib-svelte";
 setEnv(env);
 
+export { registerInlineEditor } from "./components/inlineEditors/editors";
+
 export {
 	Grid,
 	HeaderMenu,

package/types/index.d.ts

@@ -10,6 +10,7 @@ import type {
 	TMethodsConfig,
 	IConfig,
 	TEditorType,
+	TEditorConfig,
 	IColumnEditor,
 	IHeaderCell,
 } from "@svar-ui/grid-store";
@@ -131,6 +132,20 @@ export declare const WillowDark: Component<{
 	children?: () => any;
 }>;
 
+export declare function registerInlineEditor(
+	type: string,
+	component: Component<{
+		editor: TEditorConfig;
+		onsave?: (ignoreFocus: boolean) => void;
+		oncancel?: () => void;
+		onapply?: (value: any) => void;
+		onaction?: (ev: {
+			action: string;
+			data?: { [key: string]: any };
+		}) => void;
+	}>
+): void;
+
 /* get component events from store actions*/
 type RemoveHyphen<S extends string> = S extends `${infer Head}-${infer Tail}`
 	? `${Head}${RemoveHyphen<Tail>}`

package/whatsnew.md

@@ -1,3 +1,26 @@
+## 2.6.0
+
+### New features
+
+-   Multiselect inline editor
+-   Ability to register custom inline editors
+
+### Updates
+
+-   Integration with FilterQuery
+
+### Fixes
+
+-   Dropdown editors are cut off in small tables
+-   DataGrid fails to initialize in SvelteKit with serverside rendering
+
+## 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

package/src/components/editor/Editor.svelte

@@ -1,56 +0,0 @@
-<script>
-	import {
-		Field,
-		Text,
-		RichSelect,
-		MultiCombo,
-		DatePicker,
-		Area,
-		Checkbox,
-		Switch,
-	} from "@svar-ui/svelte-core";
-
-	let { editors, data = null } = $props();
-</script>
-
-{#if data}
-	{#each editors as editor}
-		{#if editor.type === "combo"}
-			<Field label={editor.label}>
-				<RichSelect
-					options={editor.options || []}
-					bind:value={$data[editor.id]}
-				/>
-			</Field>
-		{:else if editor.type === "multicombo"}
-			<Field label={editor.label}>
-				<MultiCombo
-					textField="name"
-					checkboxes={false}
-					options={editor.options || []}
-					bind:value={$data[editor.id]}
-				/>
-			</Field>
-		{:else if editor.type === "datepicker"}
-			<Field label={editor.label}>
-				<DatePicker bind:value={$data[editor.id]} />
-			</Field>
-		{:else if editor.type === "textarea"}
-			<Field label={editor.label}>
-				<Area bind:value={$data[editor.id]} />
-			</Field>
-		{:else if editor.type === "switch"}
-			<Field label={editor.label}>
-				<Switch bind:value={$data[editor.id]} />
-			</Field>
-		{:else if editor.type === "checkbox"}
-			<Field label={editor.label}>
-				<Checkbox bind:value={$data[editor.id]} />
-			</Field>
-		{:else}
-			<Field label={editor.label}>
-				<Text bind:value={$data[editor.id]} />
-			</Field>
-		{/if}
-	{/each}
-{/if}