Merge pull request #199 from perfect-things/grid

grid component test

.github/workflows/node.js.yml

@@ -16,15 +16,15 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
     - run: npm ci
-    # - run: npm run build --if-present
+#    - run: npm run dist --if-present
     - run: npm test

CHANGELOG.md

@@ -2,6 +2,12 @@ Changelog
 =========
 
 
+## v10.0.0 *(2024-05-23)*
+- Breaking change: Dropped `deepCopy` in favour of the native (and unwrapped) `structuredClone`.
+- New component: `Grid` (alpha). This should not be used for production yet, as it's still in development (or it may even be dropped). 
+- Use `crypto` for `guid` generation in `utils`.
+
+
 ## v9.5.3 *(2024-05-18)*
 - Fix `Combobox` issue for some edge cases.
 

docs-src/components/button-group/ButtonGroup.svelte

@@ -97,7 +97,7 @@
 <API props="{apiProps}"/>
 
 <script>
-import { ButtonGroup, Button, PushButton } from '../../../src';
+import { Button, ButtonGroup, PushButton } from '../../../src';
 import { API } from '../../api-table';
 import { CodeExample } from '../../code-example';
 

docs-src/components/grid/Grid.css

@@ -0,0 +1,7 @@
+.grid-viewport {
+	width: 500px;
+	max-width: 100%;
+	height: 400px;
+	border: 2px dashed red;
+	padding: 5px;
+}

docs-src/components/grid/Grid.svelte

@@ -0,0 +1,127 @@
+<h2>Grid [alpha version]</h2>
+<p>Grid component is basically a table on steroids. </p>
+<div class="grid-viewport">
+	<Grid
+		round
+		title="Grid with data"
+		{columns}
+		{data}
+		multiselect
+		on:select={onclick}
+		on:click={onclick}
+		on:dblclick={onclick}/>
+</div>
+
+<!--<div class="table-viewport">-->
+<!--	<Grid round title="Grid with data" {columns} data={data2} multiselect />-->
+<!--</div>-->
+
+<CodeExample html="{exampleHtml}" />
+
+<API props="{apiProps}"/>
+
+
+<script>
+import { Grid } from '../../../src';
+import { API } from '../../api-table';
+import { CodeExample } from '../../code-example';
+
+const apiProps = [
+	{ name: 'class', type: 'string', description: 'Additional css class name to be added to the component.' },
+	{ name: 'columns', type: 'array', description: 'Array of columns definition. Each objects defines and describes a column in the grid.' },
+	{ name: 'data', type: 'array', description: 'Array of items (each would constitute 1 row of the grid).' },
+	{ name: 'round', description: 'Adds rounded corners to the table.' },
+	{ name: 'rowSelector', type: 'string', default: 'tbody tr', description: 'A selector for a table row.<br>This is useful if a table needs row groups, in which case it would have a mix of TRs and TBODYs for rows. Both can have the same class, e.g. <em>.row</em> and this selector should then be provided here.' },
+	{ name: 'scrollContainer', type: ['string','Element'], default: 'table wrapper', description: 'Selector or HTML Element to the scroll container. If table wrapper\'s height is not set to 100% of the container, and is taller than the container - the container will have to be scrollable, and in this case it must be provided here.' },
+	{ name: 'scrollCorrectionOffset', type: 'number', default: '0', description: 'If an external <em>scrollContainer</em> is used - it is possible that it will have non-zero padding set, thus the table wrapper will be offset from the beginning of the container. This offset should be set here, so that the sticky headers work correctly.' },
+	{ name: 'interactive', type: ['true', 'false'], description: 'Makes table rows selectable with mouse and adds keyboard navigation.' },
+	{ name: 'multiselect', type: ['true', 'false'], description: 'If true - a column with checkboxes will be added to the grid.' },
+	{ name: 'title', type: 'string', description: 'Ads header with title on top of the grid.' },
+
+	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
+	{ name: 'on:click', type: 'function', description: 'Triggered after a row has been clicked.' },
+	{ name: 'on:dblclick', type: 'function', description: 'Triggered after a row has been double-clicked.' },
+	{ name: 'on:keydown', type: 'function', description: 'Triggered after key has been pressed.' },
+	{ name: 'on:select', type: 'function', description: 'Triggered after a row selection has changed.' },
+];
+
+
+
+const columns = [
+	{ field: 'name', label: 'Name', sortable: true,
+		renderer: (item) => `<a href="#Grid/${item.id}">${item.name}</a>`
+	},
+	{ field: 'date', label: 'Date', width: 200, sortable: true },
+	{ field: 'price', label: 'Price', width: 200, sortable: true, total: true,
+		renderer: (item) => `€${item.price}`
+	}
+];
+
+const data = [
+	{ id: 1, name: 'John Doe', date: '2020-01-01', price: 100 },
+	{ id: 2, name: 'Jane Doe', date: '2020-01-02', price: 200 },
+	{ id: 3, name: 'Jim Doe', date: '2020-01-03', price: 300 },
+	{ id: 4, name: 'Jill Doe', date: '2020-01-04', price: 400 },
+	{ id: 5, name: 'Jack Doe', date: '2020-01-05', price: 500 },
+	{ id: 6, name: 'John Smith', date: '2023-01-01', price: 100 },
+	{ id: 7, name: 'Jane Smith', date: '2023-01-02', price: 200 },
+	{ id: 8, name: 'Jim Smith', date: '2023-01-03', price: 300 },
+	{ id: 9, name: 'Jill Smith', date: '2023-01-04', price: 400 },
+	{ id: 10, name: 'Jack Smith', date: '2023-01-05', price: 500 },
+	{ id: 11, name: 'John Doe', date: '2020-01-01', price: 100 },
+	{ id: 12, name: 'Jane Doe', date: '2020-01-02', price: 200 },
+	{ id: 13, name: 'Jim Doe', date: '2020-01-03', price: 300 },
+	{ id: 14, name: 'Jill Doe', date: '2020-01-04', price: 400 },
+	{ id: 15, name: 'Jack Doe', date: '2020-01-05', price: 500 },
+	{ id: 16, name: 'John Smith', date: '2023-01-01', price: 100 },
+	{ id: 17, name: 'Jane Smith', date: '2023-01-02', price: 200 },
+	{ id: 18, name: 'Jim Smith', date: '2023-01-03', price: 300 },
+	{ id: 19, name: 'Jill Smith', date: '2023-01-04', price: 400 },
+	{ id: 20, name: 'Jack Smith', date: '2023-01-05', price: 500 }
+];
+
+// const data2 = [
+// 	{ id: 1, name: 'John Smith', date: '2023-01-01', price: 100 },
+// 	{ id: 2, name: 'Jane Smith', date: '2023-01-02', price: 200 },
+// 	{ id: 3, name: 'Jim Smith', date: '2023-01-03', price: 300 },
+// 	{ id: 4, name: 'Jill Smith', date: '2023-01-04', price: 400 },
+// 	{ id: 5, name: 'Jack Smith', date: '2023-01-05', price: 500 }
+// ];
+
+
+function onclick (e) {
+	console.log(e.type);
+}
+
+
+const exampleHtml = `
+<Grid {data} {columns} on:click="{onclick}"/>
+
+<script>
+import { Grid } from '@perfect-things/ui';
+
+const columns = [
+	{ field: 'name', label: 'Name', sortable: true },
+	{ field: 'date', label: 'Date', width: 200, sortable: true },
+	{ field: 'price', label: 'Price', width: 200, sortable: true, total: true,
+		renderer: (item) => \`€$\{item.price}\`
+	}
+];
+const data = [
+	{ id: 1, name: 'John Doe', date: '2020-01-01', price: 100 },
+	{ id: 2, name: 'Jane Doe', date: '2020-01-02', price: 200 },
+	{ id: 3, name: 'Jim Doe', date: '2020-01-03', price: 300 },
+	{ id: 4, name: 'Jill Doe', date: '2020-01-04', price: 400 },
+	{ id: 5, name: 'Jack Doe', date: '2020-01-05', price: 500 }
+];
+
+function onclick (e) {
+	console.log(e.type);
+}
+
+&lt;/script>
+`;
+
+
+
+</script>

docs-src/components/grid/index.js

@@ -0,0 +1 @@
+export { default as Grid } from './Grid.svelte';

docs-src/components/index.js

@@ -13,6 +13,7 @@ export { Dialog } from './dialog';
 export { Drawer } from './drawer';
 export { Panel } from './panel';
 export { Popover } from './popover';
+export { Grid } from './grid';
 export { Table } from './table';
 export { Tree } from './tree';
 

docs-src/components/utils/functions/align-item.svelte

@@ -1,4 +1,4 @@
-<Util id="AlignItem" name="alignItem(config)" {example} {api}>
+<Util id="alignItem" name="alignItem(config)" {example} {api}>
 	<p>Aligns an element to another element,
 		ensuring that the aligned element remains within the viewport.
 	</p>

docs-src/components/utils/functions/animate.svelte

@@ -1,4 +1,4 @@
-<Util id="Animate" name="animate(element, from, to, options?)" {example} {api}>
+<Util id="animate" name="animate(element, from, to, options?)" {example} {api}>
 	<p>Animates an element from one state to another. Shortcut & wrapper for the native javascript animation.</p>
 	<p>Returns a promise which resolves when the animation finishes.</p>
 </Util>

docs-src/components/utils/functions/blink.svelte

@@ -1,4 +1,4 @@
-<Util id="Blink" name="blink(element, duration = 160)" {example}>
+<Util id="blink" name="blink(element, duration = 160)" {example}>
 	<p>Animates an element by changing its opacity from 0.5 to 1.</p>
 	<ul>
 		<li><em>element</em> - HTMLElement to animate

docs-src/components/utils/functions/debounce.svelte

@@ -1,4 +1,4 @@
-<Util id="Debounce" name="debounce(fn, timeout = 300)" {example}>
+<Util id="debounce" name="debounce(fn, timeout = 300)" {example}>
 	<p>The "debounced" function will only be called after it has not been called for <em>timeout</em> milliseconds.</p>
 	<ul>
 		<li><em>fn</em> - function to debounce.

docs-src/components/utils/functions/empty.svelte

@@ -1,4 +1,4 @@
-<Util id="Empty" name="empty(value)" {example}>
+<Util id="empty" name="empty(value)" {example}>
 	<p>Similar to PHP's <em>empty</em> - returns true if a value is empty.</p>
 	<ul>
 		<li><em>value</em> - any data type.

docs-src/components/utils/functions/format-date.svelte

@@ -1,4 +1,4 @@
-<Util id="FormatDate" name="formatDate(date)" {example}>
+<Util id="formatDate" name="formatDate(date)" {example}>
 	<p>Converts date to a string in the format: <em>YYYY-MM-DD HH:mm</em>.</p>
 </Util>
 

docs-src/components/utils/functions/fuzzy.svelte

@@ -1,4 +1,4 @@
-<Util id="Fuzzy" name="fuzzy(haystack = '', needle = '')" {example}>
+<Util id="fuzzy" name="fuzzy(haystack = '', needle = '')" {example}>
 	<p>Fuzzy finds if <em>haystack</em> contains characters from the <em>needle</em> in the same order.</p>
 	<ul>
 		<li><em>haystack</em> - a string to be searched in.

docs-src/components/utils/functions/get-mouse-x.svelte.svelte

@@ -1,4 +1,4 @@
-<Util id="GetMouseX" name="getMouseX(event)" {example}>
+<Util id="getMouseX" name="getMouseX(event)" {example}>
 	<p>Returns the mouse X position. Event is standardised across platforms (touch & pointer)</p>
 </Util>
 

docs-src/components/utils/functions/get-mouse-xy.svelte.svelte

@@ -1,4 +1,4 @@
-<Util id="GetMouseXY" name="getMouseXY(event)" {example}>
+<Util id="getMouseXY" name="getMouseXY(event)" {example}>
 	<p>Returns the mouse XY position (as an array: [x, y]). Event is standardised across platforms (touch & pointer)</p>
 </Util>
 

docs-src/components/utils/functions/get-mouse-y.svelte.svelte

@@ -1,4 +1,4 @@
-<Util id="GetMouseY" name="getMouseY(event)" {example}>
+<Util id="getMouseY" name="getMouseY(event)" {example}>
 	<p>Returns the mouse Y position. Event is standardised across platforms (touch & pointer)</p>
 </Util>
 

docs-src/components/utils/functions/guid.svelte

@@ -1,4 +1,4 @@
-<Util id="Guid" name="guid()" {example}>
+<Util id="guid" name="guid()" {example}>
 	<p>Generates a globally unique identifier.</p>
 </Util>
 

docs-src/components/utils/functions/index.js

@@ -1,19 +1,19 @@
-export { default as AlignItem } from './align-item.svelte';
-export { default as Animate } from './animate.svelte';
-export { default as Blink } from './blink.svelte';
-export { default as Debounce } from './debounce.svelte';
-export { default as DeepCopy } from './deep-copy.svelte';
-export { default as Empty } from './empty.svelte';
-export { default as FormatDate } from './format-date.svelte';
-export { default as Fuzzy } from './fuzzy.svelte';
-export { default as GetMouseX } from './get-mouse-x.svelte.svelte';
-export { default as GetMouseXY } from './get-mouse-xy.svelte.svelte';
-export { default as GetMouseY } from './get-mouse-y.svelte.svelte';
-export { default as Guid } from './guid.svelte';
-export { default as IsInScrollable } from './is-in-scrollable.svelte';
-export { default as IsMobile } from './is-mobile.svelte';
-export { default as IsColorDark } from './is-color-dark.svelte';
-export { default as Pluck } from './pluck.svelte';
-export { default as RoundAmount } from './round-amount.svelte';
-export { default as Throttle } from './throttle.svelte';
-export { default as TimeAgo } from './time-ago.svelte';
+export { default as alignItem } from './align-item.svelte';
+export { default as animate } from './animate.svelte';
+export { default as blink } from './blink.svelte';
+export { default as debounce } from './debounce.svelte';
+export { default as empty } from './empty.svelte';
+export { default as isset } from './isset.svelte';
+export { default as formatDate } from './format-date.svelte';
+export { default as fuzzy } from './fuzzy.svelte';
+export { default as getMouseX } from './get-mouse-x.svelte.svelte';
+export { default as getMouseXY } from './get-mouse-xy.svelte.svelte';
+export { default as getMouseY } from './get-mouse-y.svelte.svelte';
+export { default as guid } from './guid.svelte';
+export { default as isInScrollable } from './is-in-scrollable.svelte';
+export { default as isMobile } from './is-mobile.svelte';
+export { default as isColorDark } from './is-color-dark.svelte';
+export { default as pluck } from './pluck.svelte';
+export { default as roundAmount } from './round-amount.svelte';
+export { default as throttle } from './throttle.svelte';
+export { default as timeAgo } from './time-ago.svelte';

docs-src/components/utils/functions/is-color-dark.svelte

@@ -1,4 +1,4 @@
-<Util id="IsColorDark" name="isColorDark(hex)" {example}>
+<Util id="isColorDark" name="isColorDark(hex)" {example}>
 	<p>Checks if a colour is dark or light (so that e.g. a text colour can have a better contrast against the background).</p>
 </Util>
 

docs-src/components/utils/functions/is-in-scrollable.svelte

@@ -1,4 +1,4 @@
-<Util id="IsInScrollable" name="isInScrollable(node)" {example}>
+<Util id="isInScrollable" name="isInScrollable(node)" {example}>
 	<p>Checks whether the given node is inside a scrollable element.</p>
 	<p>This function is useful when determining whether a swipe event should be allowed
 		to start on a given element.<br>

docs-src/components/utils/functions/is-mobile.svelte

@@ -1,4 +1,4 @@
-<Util id="IsMobile" name="isMobile()" {example}>
+<Util id="isMobile" name="isMobile()" {example}>
 	<p>Checks if the current platform is mobile.</p>
 </Util>
 

docs-src/components/utils/functions/isset.svelte

@@ -0,0 +1,20 @@
+<Util id="isset" name="isset()" {example}>
+	<p>Checks if a variable is <em>defined</em> and not <em>null</em>.</p>
+</Util>
+
+
+
+<script>
+import Util from '../Util.svelte';
+
+const example = `
+<script>
+	if (isset(a)) {
+		console.log('a is set');
+	} else {
+		console.log('a is not set');
+	}
+&lt;/script>
+`;
+
+</script>

docs-src/components/utils/functions/pluck.svelte

@@ -1,4 +1,4 @@
-<Util id="Pluck" name="pluck(object, props)" {example}>
+<Util id="pluck" name="pluck(object, props)" {example}>
 	<p>Creates a new object with only the plucked properties from the original object..</p>
 	<ul>
 		<li><em>object</em> - object to pluck from.

docs-src/components/utils/functions/round-amount.svelte

@@ -1,4 +1,4 @@
-<Util id="RoundAmount" name="roundAmount(value, precision = 2)" {example}>
+<Util id="roundAmount" name="roundAmount(value, precision = 2)" {example}>
 	<p>Rounds a number to 2 decimal places (by default).</p>
 </Util>
 

docs-src/components/utils/functions/throttle.svelte

@@ -1,4 +1,4 @@
-<Util id="Throttle" name="throttle(fn, timeout = 300)" {example}>
+<Util id="throttle" name="throttle(fn, timeout = 300)" {example}>
 	<p>The "throttled" function will only be called once every <em>timeout</em> milliseconds.</p>
 	<ul>
 		<li><em>fn</em> - function to debounce.

docs-src/components/utils/functions/time-ago.svelte

@@ -1,4 +1,4 @@
-<Util id="TimeAgo" name="timeAgo(date, now)" {example}>
+<Util id="timeAgo" name="timeAgo(date, now)" {example}>
 	<p>Converts date to a string describing how long time ago was the given date.</p>
 </Util>
 

docs-src/nav/Nav.svelte

@@ -45,6 +45,7 @@
 		<h3>Containers</h3>
 		<NavItem name="Dialog" {active} />
 		<NavItem name="Drawer" {active} />
+		<NavItem name="Grid" {active} />
 		<NavItem name="Panel" {active} />
 		<NavItem name="Popover" {active} />
 		<NavItem name="Table" {active} />