wx-svelte-grid 1.3.1 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wx-svelte-grid",
-	"version": "1.3.1",
+	"version": "1.3.3",
 	"description": "A powerful and flexible DataGrid component written in Svelte",
 	"productTag": "grid",
 	"needsTrial": true,
@@ -36,9 +36,9 @@
 		"wx-lib-svelte": "0.4.0",
 		"wx-svelte-menu": "1.3.0",
 		"wx-svelte-core": "1.3.1",
-		"wx-grid-data-provider": "1.3.1",
-		"wx-grid-locales": "1.3.1",
-		"wx-grid-store": "1.3.1"
+		"wx-grid-data-provider": "1.3.3",
+		"wx-grid-locales": "1.3.3",
+		"wx-grid-store": "1.3.3"
 	},
 	"files": [
 		"src",

package/src/components/Grid.svelte

@@ -1,6 +1,6 @@
 <script>
 	// svelte core
-	import { createEventDispatcher, getContext } from "svelte";
+	import { createEventDispatcher, getContext, setContext } from "svelte";
 	import { writable } from "svelte/store";
 	const dispatch = createEventDispatcher();
 
@@ -31,7 +31,6 @@
 	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;
@@ -72,7 +71,6 @@
 	$: {
 		dataStore.init({
 			data,
-			editor,
 			columns,
 			split,
 			sizes,
@@ -95,10 +93,6 @@
 	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
@@ -117,12 +111,17 @@
 		getRow: id => dataStore.getRow(id),
 		getColumn: id => dataStore.getColumn(id),
 	};
+
+	// common API available in components
+	setContext("grid-store", {
+		getReactiveState: dataStore.getReactive.bind(dataStore),
+		exec: firstInRoute.exec.bind(firstInRoute),
+		getRow: dataStore.getRow.bind(dataStore),
+	});
 </script>
 
 <Locale words={en} optional={true}>
 	<Layout
-		store={dataStore}
-		{api}
 		{header}
 		{footer}
 		{overlay}
@@ -132,7 +131,5 @@
 		{select}
 		{multiselect}
 		{autoRowHeight}
-		on:action={actions}
-		on:data-request
 	/>
 </Locale>

package/src/components/HeaderCell.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { createEventDispatcher } from "svelte";
+	import { getContext } from "svelte";
 	import { resize } from "../helpers/actions/resize";
 	import { getCssName, getStyle } from "../helpers/columnWidth";
 
@@ -9,7 +9,8 @@
 	export let lastRow;
 	export let columnStyle;
 
-	const dispatch = createEventDispatcher();
+	const api = getContext("grid-store");
+
 	let start;
 
 	function down(node) {
@@ -17,23 +18,17 @@
 	}
 
 	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 },
-		});
+		api.exec("collapse-column", { id: cell.id, row });
 	}
 
 	let style;

package/src/components/HeaderFooter.svelte

@@ -1,15 +1,19 @@
 <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";
 
 	export let columnStyle;
 
+	const api = getContext("grid-store");
+	const { _sizes: sizes } = api.getReactiveState();
+	$: rowHeights = $sizes[`${type}RowHeights`];
+
 	let renderedHeader = [];
 	$: {
 		if (columns.length) {
@@ -58,7 +62,6 @@
 						column={getColumn(cell.id)}
 						row={i}
 						lastRow={isLast(cell, i)}
-						on:action
 					/>
 				{:else}
 					<FooterCell

package/src/components/Layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { createEventDispatcher, afterUpdate } from "svelte";
+	import { afterUpdate, getContext } from "svelte";
 	import { onresize } from "../helpers/actions/onresize";
 	import { delegateClick, locateAttr, clickOutside } from "wx-lib-dom";
 	import { hotkeys } from "wx-grid-store";
@@ -10,12 +10,8 @@
 	import Overlay from "./Overlay.svelte";
 	import Editor from "./inlineEditors/Editor.svelte";
 
-	const dispatch = createEventDispatcher();
-
 	const SCROLLSIZE = getScrollSize();
 
-	export let store;
-	export let api;
 	export let header;
 	export let footer;
 	export let overlay;
@@ -27,6 +23,8 @@
 	export let cellStyle;
 	export let autoRowHeight;
 
+	const api = getContext("grid-store");
+
 	const {
 		dynamic,
 		flatData: data,
@@ -37,7 +35,7 @@
 		editor,
 		filter,
 		scroll,
-	} = store.getReactive();
+	} = api.getReactiveState();
 
 	$: defaultRowHeight = $_sizes.rowHeight;
 	let clientWidth = 0,
@@ -161,7 +159,7 @@
 		if (start != requestData.row.start || end != requestData.row.end) {
 			requestData = { row: { start, end } };
 			if ($dynamic) {
-				dispatch("data-request", { requestData });
+				api.exec("data-request", { requestData });
 			}
 		}
 	}
@@ -272,26 +270,18 @@
 	const bodyClickHandlers = {
 		dblclick: (id, ev) => {
 			const data = { id, column: locateAttr(ev, "data-col-id") };
-			dispatch("action", { action: "open-editor", data });
+			api.exec("open-editor", data);
 		},
 		click: (id, ev) => {
 			if (select === false) return;
 
 			const toggle = multiselect && ev.ctrlKey;
 			const range = multiselect && ev.shiftKey;
-			dispatch("action", {
-				action: "select-row",
-				data: { id, toggle, range },
-			});
+			api.exec("select-row", { id, toggle, range });
 		},
 		"toggle-row": id => {
-			const row = store.getRow(id);
-			dispatch("action", {
-				action: row.open !== false ? "close-row" : "open-row",
-				data: {
-					id,
-				},
-			});
+			const row = api.getRow(id);
+			api.exec(row.open !== false ? "close-row" : "open-row", { id });
 		},
 		"ignore-click": () => {
 			return false;
@@ -420,10 +410,8 @@
 					<HeaderFooter
 						{contentWidth}
 						deltaLeft={deltaLeftH}
-						rowHeights={$_sizes.headerRowHeights}
 						columns={renderColumnsH}
 						{columnStyle}
-						on:action
 					/>
 				</div>
 			{/if}
@@ -434,7 +422,7 @@
 				use:delegateClick={bodyClickHandlers}
 			>
 				{#if overlay}
-					<Overlay {overlay} on:action />
+					<Overlay {overlay} />
 				{/if}
 				<div
 					bind:this={dataEl}
@@ -456,7 +444,7 @@
 								{#if col.collapsed}
 									<div class="wx-cell wx-collapsed" />
 								{:else if $editor?.id === row.id && $editor.column == col.id}
-									<Editor editor={$editor} {col} on:action />
+									<Editor {col} />
 								{:else if col.cell}
 									<svelte:component
 										this={col.cell}
@@ -465,7 +453,11 @@
 										{col}
 										{columnStyle}
 										{cellStyle}
-										on:action
+										on:action={({ detail }) =>
+											api.exec(
+												detail.action,
+												detail.data
+											)}
 									/>
 								{:else}
 									<Cell
@@ -473,7 +465,6 @@
 										{col}
 										{columnStyle}
 										{cellStyle}
-										on:action
 									/>
 								{/if}
 							{/each}
@@ -486,10 +477,8 @@
 					type={"footer"}
 					{contentWidth}
 					deltaLeft={deltaLeftF}
-					rowHeights={$_sizes.footerRowHeights}
 					columns={renderColumnsF}
 					{columnStyle}
-					on:action
 				/>
 			{/if}
 		</div>

package/src/components/Overlay.svelte

@@ -1,6 +1,8 @@
 <script>
+	import { getContext } from "svelte";
 	export let overlay;
 
+	const api = getContext("grid-store");
 	function isComponent(prop) {
 		return typeof prop === "function";
 	}
@@ -8,7 +10,10 @@
 
 <div class="wx-overlay">
 	{#if isComponent(overlay)}
-		<svelte:component this={overlay} on:action />
+		<svelte:component
+			this={overlay}
+			on:action={({ detail }) => api.exec(detail.action, detail.data)}
+		/>
 	{:else}{overlay}{/if}
 </div>
 

package/src/components/inlineEditors/Editor.svelte

@@ -1,36 +1,24 @@
 <script>
-	import { createEventDispatcher } from "svelte";
+	import { getContext } from "svelte";
 	import { getStyle } from "../../helpers/columnWidth";
 	import { clickOutside } from "wx-lib-dom";
-
 	import { editors } from "./editors";
 
 	export let col;
-	export let editor;
 
-	const dispatch = createEventDispatcher();
+	const api = getContext("grid-store");
+	const { editor } = api.getReactiveState();
 
 	function save() {
-		dispatch("action", {
-			action: "close-editor",
-			data: { ignore: false },
-		});
+		api.exec("close-editor", { ignore: false });
 	}
 
 	function cancel() {
-		dispatch("action", {
-			action: "close-editor",
-			data: { ignore: true },
-		});
+		api.exec("close-editor", { ignore: true });
 	}
 
 	function updateValue(value) {
-		dispatch("action", {
-			action: "editor",
-			data: {
-				value,
-			},
-		});
+		api.exec("editor", { value });
 	}
 
 	let style;
@@ -45,9 +33,9 @@
 >
 	<svelte:component
 		this={editors[col.editor.type]}
-		{editor}
+		editor={$editor}
 		actions={{ save, cancel, updateValue }}
-		on:action
+		on:action={({ detail }) => api.exec(detail.action, detail.data)}
 	/>
 </div>
 

package/whatsnew.md

@@ -1,4 +1,10 @@
-### 1.3.1
+### 1.3.3
+
+-   [fix] treetable data is not fully shown in some cases
+-   [fix] too narrow column width if autowidth is set
+-   [fix] typos in type definitions
+
+### 1.3.2
 
 -   [fix] editors in tree mode are not applied correctly
 -   [fix] ts definitions are not precise