wx-svelte-grid 1.3.0

package/license.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 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
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "wx-svelte-grid",
+	"version": "1.3.0",
+	"productTag": "grid",
+	"needsTrial": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build",
+		"build:tests": "vite build --mode test",
+		"lint": "yarn eslint ./demos ./src --ext .svelte,.ts,.js",
+		"start": "vite --open",
+		"start:tests": "vite --open=/tests/ --mode test --host 0.0.0.0  --port 5100",
+		"test": "true",
+		"test:cypress": "cypress run -P ./ --config \"baseUrl=http://localhost:5100/tests\""
+	},
+	"svelte": "src/index.js",
+	"exports": {
+		".": {
+			"svelte": "./src/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/svar-widgets/grid.git"
+	},
+	"bugs": {
+		"url": "https://forum.svar.dev"
+	},
+	"homepage": "https://svar.dev/svelte/grid/",
+	"dependencies": {
+		"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.0",
+		"wx-grid-data-provider": "1.3.0",
+		"wx-grid-locales": "1.3.0",
+		"wx-grid-store": "1.3.0"
+	},
+	"files": [
+		"src",
+		"readme.md",
+		"whatsnew.md",
+		"license.txt"
+	]
+}

package/readme.md

@@ -0,0 +1,69 @@
+### SVAR Grid for Svelte
+
+SVAR Grid provides ready to use control for tabular data management
+
+### Useful Links
+
+-   [Documentation](https://docs.svar.dev/svelte/grid/overview)
+-   [How to start guide](https://docs.svar.dev/svelte/grid/getting_started/)
+-   [Demos](https://docs.svar.dev/svelte/grid/samples/#/base/willow)
+
+### License
+
+SVAR Grid for Svelte is available under MIT license.
+
+### How to Use
+
+To use the widget, simply import the package and include the component in your Svelte file:
+
+```svelte
+<script>
+	import { Grid } from "wx-svelte-grid";
+
+	const data = [
+		{
+			id: 12,
+			name: "Alex Brown",
+			year: 1974,
+		},
+	];
+	const columns = [
+		{
+			id: "name",
+			header: "Title",
+			flexgrow: 1,
+			sort: true,
+			editor: "text",
+		},
+		{
+			id: "year",
+			header: "Year",
+			width: 100,
+			sort: true,
+			editor: "text",
+		},
+	];
+</script>
+
+<Grid {data} {columns} />
+```
+
+### 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`
+
+### Run Tests
+
+To run the test:
+
+1. Start the test examples with:
+    ```sh
+    yarn start:tests
+    ```
+2. In a separate console, run the end-to-end tests with:
+    ```sh
+    yarn test:cypress
+    ```

package/src/components/Cell.svelte

@@ -0,0 +1,79 @@
+<script>
+	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;
+
+	let style, css;
+	$: style = getStyle(col.width, col.flexgrow, col.fixed, col.left);
+
+	function buildCellCss(columnStyle, cellStyle) {
+		let css = "wx-cell";
+		css += columnStyle ? " " + columnStyle(col) : "";
+		css += cellStyle ? " " + cellStyle(row, col) : "";
+		return css;
+	}
+	// params are needed for css update
+	$: css = buildCellCss(columnStyle, cellStyle);
+</script>
+
+<div
+	class={css}
+	class:wx-shadow={col.fixed === -1}
+	{style}
+	data-row-id={row.id}
+	data-col-id={col.id}
+>
+	{#if col.treetoggle}
+		<div class="wx-tree-cell">
+			<span style="margin-left:{row.$level * 28}px;" />
+			{#if row.$count}
+				<i
+					data-action="toggle-row"
+					class="wx-table-tree-toggle wxi-menu-{row.open !== false
+						? 'down'
+						: 'right'}"
+				/>
+			{/if}
+			<slot>{getRenderValue(row, col)}</slot>
+		</div>
+	{:else}
+		<slot>{getRenderValue(row, col)}</slot>
+	{/if}
+</div>
+
+<style>
+	:global(.wx-measure-cell-body),
+	.wx-cell {
+		background: inherit;
+		box-sizing: border-box;
+		padding: 8px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.wx-tree-cell {
+		display: flex;
+	}
+
+	:global(.wx-measure-cell-body),
+	.wx-cell:not(:last-child) {
+		border-right: var(--wx-table-cell-border);
+	}
+
+	.wx-shadow.wx-cell {
+		border-right: var(--wx-table-fixed-column-right-border);
+		clip-path: inset(0px -15px 0px 0px);
+		z-index: 1;
+	}
+
+	.wx-table-tree-toggle {
+		font-size: 20px;
+		cursor: pointer;
+		margin: 0 8px 0 0;
+		display: inline-block;
+	}
+</style>

package/src/components/FooterCell.svelte

@@ -0,0 +1,81 @@
+<script>
+	import { getStyle, getCssName } from "../helpers/columnWidth";
+
+	export let cell;
+	export let column;
+	export let columnStyle;
+
+	let style;
+	$: style = getStyle(
+		cell.width,
+		cell.flexgrow,
+		column.fixed,
+		column.left,
+		cell.height
+	);
+
+	let css = "";
+	$: css = getCssName(column, cell, columnStyle);
+</script>
+
+<div class="wx-cell {css} {cell.css || ''}" {style}>
+	{#if !column.collapsed && !cell.collapsed}
+		<div class="wx-text">{cell.text || ""}</div>
+	{/if}
+</div>
+
+<style>
+	:global(.wx-measure-cell-footer),
+	.wx-cell {
+		padding: 8px;
+		display: flex;
+		align-items: center;
+		font-weight: var(--wx-header-font-weight);
+		background: var(--wx-table-header-background);
+		overflow: hidden;
+	}
+
+	.wx-cell:not(:last-child) {
+		border-right: var(--wx-table-footer-cell-border);
+	}
+
+	.wx-cell.wx-vertical {
+		align-items: flex-end;
+	}
+
+	:global(.wx-measure-cell-footer.wx-measure-vertical) {
+		padding: 8px;
+	}
+
+	.wx-text {
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	.wx-vertical .wx-text {
+		transform: rotate(-90deg) translateY(100%);
+		transform-origin: left bottom;
+		text-overflow: clip;
+		overflow: unset;
+	}
+
+	.wx-cell.wx-shadow {
+		clip-path: inset(0px -15px 0px 0px);
+		border-right: var(--wx-table-fixed-column-right-border);
+	}
+
+	.wx-shadow,
+	.wx-fixed {
+		z-index: 1;
+	}
+
+	.wx-rowspan {
+		z-index: 2;
+	}
+
+	.wx-rowspan.wx-shadow,
+	.wx-colspan.wx-shadow {
+		z-index: 3;
+	}
+</style>

package/src/components/Grid.svelte

@@ -0,0 +1,138 @@
+<script>
+	// svelte core
+	import { createEventDispatcher, getContext } from "svelte";
+	import { writable } from "svelte/store";
+	const dispatch = createEventDispatcher();
+
+	// core widgets lib
+	import { Locale } from "wx-svelte-core";
+	import { en } from "wx-grid-locales";
+
+	// stores
+	import { EventBusRouter } from "wx-lib-state";
+	import { DataStore } from "wx-grid-store";
+
+	// ui
+	import Layout from "./Layout.svelte";
+
+	// incoming parameters
+	export let data = [];
+	export let columns = [];
+
+	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;
+
+	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 };
+
+	export let tree = false;
+	export let autoConfig = false;
+
+	export let init = null;
+
+	// 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);
+			}
+	}
+	//sync selection props
+	$: {
+		if (selectedRows.length) selected = selectedRows[0];
+		else if (selected) selectedRows.push(selected);
+	}
+
+	$: _skin = getContext("wx-theme");
+
+	// init stores
+	const dataStore = new DataStore(writable);
+	$: {
+		dataStore.init({
+			data,
+			editor,
+			columns,
+			split,
+			sizes,
+			selected,
+			selectedRows,
+			dynamic,
+			filter,
+			tree,
+			_skin,
+		});
+
+		if (init) {
+			init(api);
+			init = null;
+		}
+	}
+
+	// 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),
+	};
+</script>
+
+<Locale words={en} optional={true}>
+	<Layout
+		store={dataStore}
+		{api}
+		{header}
+		{footer}
+		{overlay}
+		{rowStyle}
+		{columnStyle}
+		{cellStyle}
+		{select}
+		{multiselect}
+		{autoRowHeight}
+		on:action={actions}
+		on:data-request
+	/>
+</Locale>

package/src/components/HeaderCell.svelte

@@ -0,0 +1,239 @@
+<script>
+	import { createEventDispatcher } 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;
+
+	const dispatch = createEventDispatcher();
+	let start;
+
+	function down(node) {
+		start = cell.flexgrow ? node.parentNode.clientWidth : cell.width;
+	}
+
+	function move(dx) {
+		dispatch("action", {
+			action: "resize-column",
+			data: { id: cell.id, width: Math.max(1, start + dx) },
+		});
+	}
+
+	function sort(ev) {
+		dispatch("action", {
+			action: "sort-rows",
+			data: { key: cell.id, add: ev.ctrlKey },
+		});
+	}
+	function collapse() {
+		dispatch("action", {
+			action: "collapse-column",
+			data: { id: cell.id, row },
+		});
+	}
+
+	let style;
+	$: style = getStyle(
+		cell.width,
+		cell.flexgrow,
+		column.fixed,
+		column.left,
+		cell.height
+	);
+
+	let css = "";
+	$: css = getCssName(column, cell, columnStyle);
+</script>
+
+{#if cell.collapsed && column.collapsed}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div
+		class="wx-cell {css} {cell.css || ''} wx-collapsed"
+		{style}
+		on:click|stopPropagation={collapse}
+		data-header-id={column.id}
+	>
+		<div class="wx-text">{cell.text || ""}</div>
+	</div>
+{:else}
+	<div
+		class="wx-cell {css} {cell.css || ''}"
+		{style}
+		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'}" />
+			</div>
+		{/if}
+
+		<div class="wx-text">{cell.text || ""}</div>
+
+		{#if column.resize && lastRow}
+			<div class="wx-grip" use:resize={{ down, move }} />
+		{/if}
+
+		{#if column.sort}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<div class="wx-sort" on:click={sort}>
+				{#if column.$sort && lastRow}
+					{#if column.$sort.index > 0}
+						<div class="wx-order">{column.$sort.index}</div>
+					{/if}
+					<i
+						class="wxi-arrow-{column.$sort.order === 'asc'
+							? 'up'
+							: 'down'}"
+					/>
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	:global(.wx-measure-cell-header),
+	.wx-cell {
+		padding: 8px;
+		position: relative;
+		display: flex;
+		align-items: center;
+		font-weight: var(--wx-header-font-weight);
+		background: var(--wx-table-header-background);
+		overflow: hidden;
+		gap: 10px;
+		line-height: 20px;
+	}
+
+	.wx-cell.wx-vertical {
+		align-items: flex-end;
+	}
+
+	:global(.wx-measure-cell-header.wx-measure-vertical) {
+		padding: 8px;
+	}
+
+	:global(.wx-measure-cell-header),
+	.wx-cell:not(:last-child) {
+		border-right: var(--wx-table-header-cell-border);
+	}
+
+	.wx-cell:last-child {
+		overflow: hidden;
+	}
+
+	.wx-text {
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	.wx-vertical .wx-text {
+		height: 100%;
+		transform: rotate(-180deg);
+		writing-mode: vertical-lr;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
+	.wx-cell.wx-shadow {
+		box-shadow: var(--wx-table-fixed-column-shadow);
+		clip-path: inset(0px -15px 0px 0px);
+		border-right: var(--wx-table-fixed-column-right-border);
+	}
+
+	.wx-shadow,
+	.wx-fixed {
+		z-index: 1;
+	}
+
+	.wx-grip {
+		box-sizing: border-box;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: -4px;
+		width: 9px;
+		border-left: 5px solid var(--wx-table-header-background);
+		border-right: 3px solid var(--wx-table-header-background);
+		background-color: var(--wx-color-primary);
+		opacity: 0;
+		cursor: ew-resize;
+		z-index: 5;
+	}
+
+	.wx-grip::before,
+	.wx-grip::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 0;
+		height: 0;
+		margin: auto;
+	}
+
+	.wx-grip::before {
+		border: 3px dashed transparent;
+		border-right: 3px solid var(--wx-color-primary);
+		right: 5px;
+	}
+
+	.wx-grip::after {
+		border: 3px dashed transparent;
+		border-left: 3px solid var(--wx-color-primary);
+		left: 5px;
+	}
+
+	.wx-grip:hover {
+		opacity: 1;
+	}
+
+	.wx-sort {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 5px;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
+	.wx-order {
+		width: 16px;
+		height: 16px;
+		line-height: 16px;
+		border-radius: 50%;
+		font-size: 12px;
+		text-align: center;
+		color: #fff;
+		background-color: #3498ff;
+	}
+
+	.wx-icon {
+		padding: 5px;
+		color: #3498ff;
+		cursor: pointer;
+	}
+
+	.wx-rowspan {
+		z-index: 6; /* because resize grips have z-index: 5 */
+	}
+
+	.wx-rowspan.wx-shadow,
+	.wx-colspan.wx-shadow {
+		z-index: 7;
+	}
+
+	.wx-collapse,
+	.wx-collapsed {
+		cursor: pointer;
+		z-index: 1;
+	}
+</style>