Skip to content

Commit

Permalink
Merge pull request #199 from perfect-things/grid
Browse files Browse the repository at this point in the history
grid component test
  • Loading branch information
tborychowski authored Jun 2, 2024
2 parents 4c02e99 + 320797a commit 5dd80af
Show file tree
Hide file tree
Showing 53 changed files with 88,488 additions and 891 deletions.
8 changes: 4 additions & 4 deletions .github/workflows/node.js.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion docs-src/components/button-group/ButtonGroup.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
7 changes: 7 additions & 0 deletions docs-src/components/grid/Grid.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.grid-viewport {
width: 500px;
max-width: 100%;
height: 400px;
border: 2px dashed red;
padding: 5px;
}
127 changes: 127 additions & 0 deletions docs-src/components/grid/Grid.svelte
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions docs-src/components/grid/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as Grid } from './Grid.svelte';
1 change: 1 addition & 0 deletions docs-src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion docs-src/components/utils/functions/align-item.svelte
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs-src/components/utils/functions/animate.svelte
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs-src/components/utils/functions/blink.svelte
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs-src/components/utils/functions/debounce.svelte
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
19 changes: 0 additions & 19 deletions docs-src/components/utils/functions/deep-copy.svelte

This file was deleted.

2 changes: 1 addition & 1 deletion docs-src/components/utils/functions/empty.svelte
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
2 changes: 1 addition & 1 deletion docs-src/components/utils/functions/format-date.svelte
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
2 changes: 1 addition & 1 deletion docs-src/components/utils/functions/fuzzy.svelte
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
2 changes: 1 addition & 1 deletion docs-src/components/utils/functions/guid.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<Util id="Guid" name="guid()" {example}>
<Util id="guid" name="guid()" {example}>
<p>Generates a globally unique identifier.</p>
</Util>

Expand Down
38 changes: 19 additions & 19 deletions docs-src/components/utils/functions/index.js
Original file line number Diff line number Diff line change
@@ -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';
2 changes: 1 addition & 1 deletion docs-src/components/utils/functions/is-color-dark.svelte
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs-src/components/utils/functions/is-mobile.svelte
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
20 changes: 20 additions & 0 deletions docs-src/components/utils/functions/isset.svelte
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion docs-src/components/utils/functions/pluck.svelte
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
2 changes: 1 addition & 1 deletion docs-src/components/utils/functions/round-amount.svelte
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
2 changes: 1 addition & 1 deletion docs-src/components/utils/functions/throttle.svelte
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
2 changes: 1 addition & 1 deletion docs-src/components/utils/functions/time-ago.svelte
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
1 change: 1 addition & 0 deletions docs-src/nav/Nav.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
Loading

0 comments on commit 5dd80af

Please sign in to comment.