-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #199 from perfect-things/grid
grid component test
- Loading branch information
Showing
53 changed files
with
88,488 additions
and
891 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} | ||
</script> | ||
`; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default as Grid } from './Grid.svelte'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | ||
} | ||
</script> | ||
`; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.