wx-svelte-grid 2.6.0 → 2.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-grid",
-	"version": "2.6.0",
+	"version": "2.6.2",
 	"description": "A fast, feature-rich Svelte DataGrid component",
 	"productTag": "grid",
 	"productTrial": false,
@@ -36,15 +36,15 @@
 		"@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.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"
+		"@svar-ui/svelte-menu": "2.5.1",
+		"@svar-ui/svelte-core": "2.5.1",
+		"@svar-ui/svelte-toolbar": "2.5.1",
+		"@svar-ui/grid-data-provider": "2.6.2",
+		"@svar-ui/grid-locales": "2.6.2",
+		"@svar-ui/grid-store": "2.6.2"
 	},
 	"devDependencies": {
-		"@svar-ui/svelte-editor": "2.5.0",
+		"@svar-ui/svelte-editor": "2.5.1",
 		"@svar-ui/svelte-filter": "2.5.0"
 	},
 	"files": [

package/src/components/Layout.svelte

@@ -120,12 +120,11 @@
 				.filter(c => !c.hidden)
 				.map(a => ({ ...a }));
 			columns.forEach(a => {
-				a.fixed = { left: 1 };
+				a.fixed = { left: 1, leftSize: $split.left };
 				a.left = width;
 				width += a.width;
 			});
-			if (columns.length)
-				columns[columns.length - 1].fixed = { left: -1 };
+			if (columns.length) columns[columns.length - 1].fixed.left = -1;
 		}
 
 		return { columns, width };

package/src/components/inlineEditors/Combo.svelte

@@ -3,10 +3,13 @@
 	import { SuggestDropdown } from "@svar-ui/svelte-core";
 	import { clickOutside } from "@svar-ui/lib-dom";
 
-	let { editor, onaction, onsave, onapply } = $props();
+	let { editor, onaction, onsave, onapply, oncancel } = $props();
 
 	let { value, renderedValue: text, options: filterOptions } = $state(editor);
-	let { template, cell } = $state(editor?.config || {});
+
+	let { template, cell, dropdown = {} } = $state(editor?.config || {});
+
+	const dropdownOptions = $derived({ trackScroll: true, ...dropdown });
 
 	let index = $derived(filterOptions.findIndex(a => a.id === value));
 
@@ -49,7 +52,13 @@
 	onkeydown={e => keydown(e, index)}
 	use:clickOutside={() => onsave(true)}
 />
-<SuggestDropdown items={filterOptions} onready={ready} onselect={updateValue}>
+<SuggestDropdown
+	items={filterOptions}
+	onready={ready}
+	onselect={updateValue}
+	{...dropdownOptions}
+	{oncancel}
+>
 	{#snippet children({ option })}
 		{#if template}
 			{template(option)}

package/src/components/inlineEditors/Datepicker.svelte

@@ -7,9 +7,12 @@
 	let { editor, onaction, onsave, onapply, oncancel } = $props();
 
 	let value = $state(editor.value || new Date());
-
-	let template = $state(editor.config?.template);
-	let cell = $state(editor.config?.cell);
+	let { template, cell, dropdown = {} } = $state(editor?.config || {});
+	const dropdownOptions = $derived({
+		trackScroll: true,
+		width: "auto",
+		...dropdown,
+	});
 
 	function updateValue({ value }) {
 		onapply(value);
@@ -42,7 +45,7 @@
 		<SvelteComponent data={editor.value} {onaction} />
 	{:else}<span class="wx-text">{editor.renderedValue}</span>{/if}
 </div>
-<Dropdown width={"auto"}>
+<Dropdown {...dropdownOptions} {oncancel}>
 	<div use:clickOutside={() => onsave(true)}>
 		<Calendar
 			{value}

package/src/components/inlineEditors/Editor.svelte

@@ -93,7 +93,7 @@
 		background-color: var(--wx-background);
 		color: var(--wx-color-font);
 		position: relative;
-		z-index: 3;
+		z-index: 2;
 	}
 	.wx-cell :global(.wx-dropdown) {
 		border: var(--wx-table-editor-dropdown-border);

package/src/components/inlineEditors/MultiSelect.svelte

@@ -3,17 +3,23 @@
 	import { clickOutside } from "@svar-ui/lib-dom";
 	import { onMount } from "svelte";
 
-	let { editor, onaction, onsave, onapply, oncancel } = $props();
+	let { editor, onaction, onsave, onapply } = $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;
 	});
 
+	const dropdownOptions = $derived.by(() => {
+		const dropdown = config?.dropdown || {};
+		return { trackScroll: true, ...dropdown };
+	});
+
 	function updateValue({ id }) {
 		onapply(id);
 		node.focus();
@@ -44,7 +50,7 @@
 	bind:this={node}
 	class="wx-value"
 	tabindex="0"
-	onclick={oncancel}
+	onclick={() => onsave()}
 	onkeydown={ev => {
 		keydown(ev, index);
 		ev.preventDefault();
@@ -69,6 +75,8 @@
 	onselect={updateValue}
 	checkboxes={true}
 	multiselect={true}
+	{...dropdownOptions}
+	oncancel={() => onsave()}
 	{value}
 >
 	{#snippet children({ option })}

package/src/components/inlineEditors/Richselect.svelte

@@ -7,7 +7,8 @@
 
 	let data = $state(editor.options.find(opt => opt.id === editor.value));
 	let { value, options } = $state(editor);
-	let { template, cell } = $state(editor?.config || {});
+	let { template, cell, dropdown = {} } = $state(editor?.config || {});
+	const dropdownOptions = $derived({ trackScroll: true, ...dropdown });
 
 	let index = $derived(options.findIndex(a => a.id === value));
 
@@ -55,7 +56,13 @@
 		<SvelteComponent {data} {onaction} />
 	{:else}<span class="wx-text">{editor.renderedValue}</span>{/if}
 </div>
-<SuggestDropdown items={options} onready={ready} onselect={updateValue}>
+<SuggestDropdown
+	items={options}
+	onready={ready}
+	onselect={updateValue}
+	{...dropdownOptions}
+	{oncancel}
+>
 	{#snippet children({ option })}
 		{#if template}
 			{template(option)}

package/src/helpers/columnWidth.js

@@ -18,7 +18,12 @@ export function getCssName(column, cell, columnStyle) {
 
 	if (column.fixed) {
 		for (const pos in column.fixed) {
-			css += column.fixed[pos] === -1 ? "wx-shadow " : "wx-fixed ";
+			let isShadow = column.fixed[pos] === -1;
+			if (!isShadow && column.fixed.leftSize && cell.colspan) {
+				const spanIndex = cell.colspan + column._colindex - 1;
+				isShadow = spanIndex === column.fixed.leftSize;
+			}
+			css += isShadow ? "wx-shadow " : "wx-fixed ";
 		}
 	}
 	css += cell.rowspan > 1 ? "wx-rowspan " : "";

package/whatsnew.md

@@ -1,3 +1,20 @@
+## 2.6.2
+
+### Fixes
+
+-   Incorrect type for `filterValues`
+-   Multiselect editor value is not applied
+
+## 2.6.1
+
+### Fixes
+
+-   Impossible to configure inline editor dropdown
+-   Inline editor dropdown is detached during scroll
+-   Editor state object is mutated instead of being reset
+-   DataProvider adds trailing slash to getData url
+-   Incorrect height of sidebar Editor
+
 ## 2.6.0
 
 ### New features
@@ -13,6 +30,7 @@
 
 -   Dropdown editors are cut off in small tables
 -   DataGrid fails to initialize in SvelteKit with serverside rendering
+-   Error in fetching Typescript definitions from store
 
 ## 2.5.1