Skip to content

Commit 5c2da10

Browse files
hobbitronicshobbitronics
committed
feat(components): add DatatableCheckbox and DatatableCheckboxHeader
1 parent 1fd1120 commit 5c2da10

7 files changed

+202
-19
lines changed

‎components/mdc/Datatable/DataRow.svelte

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
<script>
2+
import { generateRandomID } from '../../../random'
3+
24
export let clickable = false
5+
6+
const rowId = generateRandomID('row-id-')
37
</script>
48

5-
<tr on:click on:keydown class="mdc-data-table__row {$$props.class}" class:pointer={clickable}>
9+
<tr on:click on:keydown data-row-id={rowId} class="mdc-data-table__row {$$props.class}" class:pointer={clickable}>
610
<slot />
711
</tr>

‎components/mdc/Datatable/Datatable.svelte

+12
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,18 @@ onMount(() => {
1616
dispatch('sorted', event.detail)
1717
})
1818
19+
dataTable.listen('MDCDataTable:selectedAll', () => {
20+
dispatch('selectedAll')
21+
})
22+
23+
dataTable.listen('MDCDataTable:unselectedAll', () => {
24+
dispatch('unselectedAll')
25+
})
26+
27+
dataTable.listen('MDCDataTable:rowSelectionChanged', (event) => {
28+
dispatch('rowSelectionChanged', event.detail)
29+
})
30+
1931
// This does not work because of an MDC bug. See https://github.com/material-components/material-components-web/issues/6385
2032
// If checkboxes are needed, check for a release of the PR linked to the above issue, or pull in the destroy code here.
2133
//return () => dataTable.destroy()

‎components/mdc/Datatable/DatatableCheckbox.svelte

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script>
2+
import { generateRandomID } from '../../../random'
3+
import { createEventDispatcher } from 'svelte'
4+
5+
export let disabled = false
6+
7+
let checked = false
8+
9+
const inputID = generateRandomID('checkbox-')
10+
11+
$: checked, handleChange()
12+
13+
const dispatch = createEventDispatcher()
14+
15+
const handleChange = () => {
16+
dispatch('change')
17+
}
18+
</script>
19+
20+
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox" on:click>
21+
<div class="mdc-checkbox mdc-data-table__row-checkbox">
22+
<input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby={inputID} {disabled} bind:checked />
23+
<div class="mdc-checkbox__background">
24+
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
25+
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
26+
</svg>
27+
<div class="mdc-checkbox__mixedmark" />
28+
</div>
29+
<div class="mdc-checkbox__ripple" />
30+
</div>
31+
</td>

‎components/mdc/Datatable/DatatableCheckboxHeader.svelte

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox" role="columnheader" scope="col">
2+
<div class="mdc-checkbox mdc-data-table__header-row-checkbox">
3+
<input type="checkbox" class="mdc-checkbox__native-control" aria-label="Toggle all rows" />
4+
<div class="mdc-checkbox__background">
5+
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
6+
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
7+
</svg>
8+
<div class="mdc-checkbox__mixedmark" />
9+
</div>
10+
<div class="mdc-checkbox__ripple" />
11+
</div>
12+
</th>

‎components/mdc/Datatable/index.js

+4
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,15 @@ import DataRow from './DataRow.svelte'
55
import DataRowItem from './DataRowItem.svelte'
66
import Header from './Header.svelte'
77
import HeaderItem from './HeaderItem.svelte'
8+
import DatatableCheckbox from './DatatableCheckbox.svelte'
9+
import DatatableCheckboxHeader from './DatatableCheckboxHeader.svelte'
810

911
Datatable.Data = Data
1012
Datatable.Data.Row = DataRow
1113
Datatable.Data.Row.Item = DataRowItem
1214
Datatable.Header = Header
1315
Datatable.Header.Item = HeaderItem
16+
Datatable.Header.Checkbox = DatatableCheckboxHeader
17+
Datatable.Checkbox = DatatableCheckbox
1418

1519
export default Datatable

‎stories/Datatable.stories.svelte

+133-11
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
<script>
2-
import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
2+
import { Meta, Story } from '@storybook/addon-svelte-csf'
33
import { Datatable, isAboveMobile, isAboveTablet, Progress } from '../components/mdc'
4-
import { copyAndModifyArgs } from './helpers.js'
54
import { onMount } from 'svelte'
65
76
const args = {
87
class: '', //only works for global classes
9-
onSorted: () => {},
10-
clickable: false,
8+
'on:sorted': (e) => alert('you sorted the table'),
9+
'on:selectedAll': (e) => alert('you selected all rows'),
10+
'on:unselectedAll': (e) => alert('you unselected all rows'),
11+
'on:rowSelectionChanged': (e) => alert(`row ${e.detail.rowId} was ${e.detail.selected ? 'selected' : 'unselected'}`),
12+
'on:click': (e) => alert(`you clicked on row ${e.detail}`),
1113
}
1214
1315
let loaded = false
@@ -19,10 +21,23 @@ onMount(() =>
1921
)
2022
</script>
2123

22-
<Meta title="Molecule/Datatable" component={Datatable} />
24+
<Meta
25+
title="Molecule/Datatable"
26+
component={Datatable}
27+
argTypes={{
28+
label: { control: 'text' },
29+
clickable: { control: 'boolean' },
30+
}}
31+
/>
2332

24-
<Template let:args>
25-
<Datatable {...args} on:sorted={args.onSorted}>
33+
<Story name="Default" {args}>
34+
<Datatable
35+
class={args.class}
36+
on:sorted={args['on:sorted']}
37+
on:rowSelectionChanged={args['on:rowSelectionChanged']}
38+
on:unselectedAll={args['on:unselectedAll']}
39+
on:selectedAll={args['on:selectedAll']}
40+
>
2641
<Datatable.Header>
2742
<Datatable.Header.Item class={isAboveTablet() ? 'w-50' : ''}>Name</Datatable.Header.Item>
2843
<Datatable.Header.Item>Date</Datatable.Header.Item>
@@ -51,10 +66,117 @@ onMount(() =>
5166
</Datatable.Data.Row>
5267
</Datatable.Data>
5368
</Datatable>
54-
</Template>
69+
</Story>
5570

56-
<Story name="Default" {args} />
71+
<Story name="Checkbox" {args}>
72+
<Datatable
73+
class={args.class}
74+
on:sorted={args['on:sorted']}
75+
on:rowSelectionChanged={args['on:rowSelectionChanged']}
76+
on:unselectedAll={args['on:unselectedAll']}
77+
on:selectedAll={args['on:selectedAll']}
78+
>
79+
<Datatable.Header>
80+
<Datatable.Header.Checkbox />
81+
<Datatable.Header.Item class={isAboveTablet() ? 'w-50' : ''}>Name</Datatable.Header.Item>
82+
<Datatable.Header.Item>Date</Datatable.Header.Item>
83+
</Datatable.Header>
5784

58-
<Story name="Label" args={copyAndModifyArgs(args, { label: 'label' })} />
85+
<Datatable.Data>
86+
<Datatable.Data.Row clickable={args.clickable}>
87+
<Datatable.Checkbox />
88+
<Datatable.Data.Row.Item>item</Datatable.Data.Row.Item>
89+
<Datatable.Data.Row.Item>today</Datatable.Data.Row.Item>
90+
</Datatable.Data.Row>
5991

60-
<Story name="Clickable row" args={copyAndModifyArgs(args, { clickable: 'true' })} />
92+
<Datatable.Data.Row>
93+
<Datatable.Checkbox />
94+
<Datatable.Data.Row.Item>item2</Datatable.Data.Row.Item>
95+
<Datatable.Data.Row.Item>tomorrow</Datatable.Data.Row.Item>
96+
</Datatable.Data.Row>
97+
98+
<Datatable.Data.Row>
99+
<Datatable.Checkbox />
100+
<Datatable.Data.Row.Item colspan={isAboveMobile() ? 6 : 2}>
101+
{#if loaded}
102+
Done loading
103+
{:else}
104+
Loading...
105+
<Progress.Linear barColorProvided={false} indeterminate />
106+
{/if}
107+
</Datatable.Data.Row.Item>
108+
</Datatable.Data.Row>
109+
</Datatable.Data>
110+
</Datatable>
111+
</Story>
112+
113+
<Story name="Label">
114+
<Datatable
115+
class={args.class}
116+
label={'Label'}
117+
on:sorted={args['on:sorted']}
118+
on:rowSelectionChanged={args['on:rowSelectionChanged']}
119+
on:unselectedAll={args['on:unselectedAll']}
120+
on:selectedAll={args['on:selectedAll']}
121+
>
122+
<Datatable.Header>
123+
<Datatable.Header.Item class={isAboveTablet() ? 'w-50' : ''}>Name</Datatable.Header.Item>
124+
<Datatable.Header.Item>Date</Datatable.Header.Item>
125+
</Datatable.Header>
126+
127+
<Datatable.Data>
128+
<Datatable.Data.Row clickable={args.clickable}>
129+
<Datatable.Data.Row.Item>item</Datatable.Data.Row.Item>
130+
<Datatable.Data.Row.Item>today</Datatable.Data.Row.Item>
131+
</Datatable.Data.Row>
132+
133+
<Datatable.Data.Row>
134+
<Datatable.Data.Row.Item>item2</Datatable.Data.Row.Item>
135+
<Datatable.Data.Row.Item>tomorrow</Datatable.Data.Row.Item>
136+
</Datatable.Data.Row>
137+
138+
<Datatable.Data.Row>
139+
<Datatable.Data.Row.Item colspan={isAboveMobile() ? 6 : 2}>
140+
{#if loaded}
141+
Done loading
142+
{:else}
143+
Loading...
144+
<Progress.Linear barColorProvided={false} indeterminate />
145+
{/if}
146+
</Datatable.Data.Row.Item>
147+
</Datatable.Data.Row>
148+
</Datatable.Data>
149+
</Datatable>
150+
</Story>
151+
152+
<Story name="Clickable row">
153+
<Datatable class={args.class} on:sorted={args['on:sorted']}>
154+
<Datatable.Header>
155+
<Datatable.Header.Item class={isAboveTablet() ? 'w-50' : ''}>Name</Datatable.Header.Item>
156+
<Datatable.Header.Item>Date</Datatable.Header.Item>
157+
</Datatable.Header>
158+
159+
<Datatable.Data>
160+
<Datatable.Data.Row on:click={args['on:click']} clickable="true}">
161+
<Datatable.Data.Row.Item>item</Datatable.Data.Row.Item>
162+
<Datatable.Data.Row.Item>today</Datatable.Data.Row.Item>
163+
</Datatable.Data.Row>
164+
165+
<Datatable.Data.Row on:click={args['on:click']} clickable="true}">
166+
<Datatable.Data.Row.Item>item2</Datatable.Data.Row.Item>
167+
<Datatable.Data.Row.Item>tomorrow</Datatable.Data.Row.Item>
168+
</Datatable.Data.Row>
169+
170+
<Datatable.Data.Row on:click={args['on:click']} clickable="true}">
171+
<Datatable.Data.Row.Item colspan={isAboveMobile() ? 6 : 2}>
172+
{#if loaded}
173+
Done loading
174+
{:else}
175+
Loading...
176+
<Progress.Linear barColorProvided={false} indeterminate />
177+
{/if}
178+
</Datatable.Data.Row.Item>
179+
</Datatable.Data.Row>
180+
</Datatable.Data>
181+
</Datatable>
182+
</Story>

‎stories/TabBar.stories.svelte

+5-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
2+
import { Meta, Story } from '@storybook/addon-svelte-csf'
33
import { TabBar } from '../components/mdc'
44
55
const args = {
@@ -9,16 +9,14 @@ const args = {
99
}
1010
</script>
1111

12-
<Meta title="Atoms/TabBar" component={TabBar} />
12+
<Meta title="Molecule/TabBar" component={TabBar} />
1313

14-
<Template let:args>
15-
<TabBar {...args}>
14+
<Story name="Default" {args}>
15+
<TabBar tab={args.tab}>
1616
<TabBar.Scroller>
1717
<TabBar.Tab label="tab 1" on:click={args['on:click']} active={args.tab === 0} />
1818
<TabBar.Tab label="tab 2" on:click={args['on:click']} active={args.tab === 1} />
1919
<TabBar.Tab label="tab 3" on:click={args['on:click']} active={args.tab === 2} />
2020
</TabBar.Scroller>
2121
</TabBar>
22-
</Template>
23-
24-
<Story name="Default" {args} />
22+
</Story>

0 commit comments

Comments
 (0)