@onsvisual/svelte-components 0.1.10 → 0.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
/** @typedef {typeof __propDef.events} TableEvents */
|
|
3
3
|
/** @typedef {typeof __propDef.slots} TableSlots */
|
|
4
4
|
export default class Table extends SvelteComponentTyped<{
|
|
5
|
+
height?: number | "auto";
|
|
5
6
|
data?: any[];
|
|
6
7
|
title?: string;
|
|
7
8
|
compact?: boolean;
|
|
8
9
|
responsive?: boolean;
|
|
9
10
|
rowHover?: boolean;
|
|
11
|
+
stickyHeader?: boolean;
|
|
10
12
|
columns?: any[];
|
|
11
13
|
}, {
|
|
12
14
|
[evt: string]: CustomEvent<any>;
|
|
@@ -18,11 +20,13 @@ export type TableSlots = typeof __propDef.slots;
|
|
|
18
20
|
import { SvelteComponentTyped } from "svelte";
|
|
19
21
|
declare const __propDef: {
|
|
20
22
|
props: {
|
|
23
|
+
height?: number | "auto";
|
|
21
24
|
data?: any[];
|
|
22
25
|
title?: string;
|
|
23
26
|
compact?: boolean;
|
|
24
27
|
responsive?: boolean;
|
|
25
28
|
rowHover?: boolean;
|
|
29
|
+
stickyHeader?: boolean;
|
|
26
30
|
columns?: any[];
|
|
27
31
|
};
|
|
28
32
|
events: {
|
|
@@ -21,6 +21,16 @@
|
|
|
21
21
|
* @type {boolean}
|
|
22
22
|
*/
|
|
23
23
|
export let rowHover = false;
|
|
24
|
+
/**
|
|
25
|
+
* Sticky header when table is longer than screen height
|
|
26
|
+
* @type {boolean}
|
|
27
|
+
*/
|
|
28
|
+
export let stickyHeader = false;
|
|
29
|
+
/**
|
|
30
|
+
* Sticky header when table is longer than screen height
|
|
31
|
+
* @type {number|"auto"}
|
|
32
|
+
*/
|
|
33
|
+
export let height = "auto";
|
|
24
34
|
/**
|
|
25
35
|
* Rows of data
|
|
26
36
|
* @type {array}
|
|
@@ -39,84 +49,91 @@
|
|
|
39
49
|
$: sortable = columns.map((d) => d.sortable).includes(true);
|
|
40
50
|
</script>
|
|
41
51
|
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
class:ons-table--responsive="{responsive}"
|
|
47
|
-
class:ons-table--row-hover="{rowHover}"
|
|
48
|
-
data-aria-sort="{sortable ? 'Sort by' : null}"
|
|
49
|
-
data-aria-asc="{sortable ? 'ascending' : null}"
|
|
50
|
-
data-aria-desc="{sortable ? 'descending' : null}"
|
|
52
|
+
<div
|
|
53
|
+
style:overflow="{typeof height === "number" ? "auto" : null}"
|
|
54
|
+
style:height="{typeof height === "number" ? `${height}px` : null}"
|
|
55
|
+
style:display="{typeof height !== "number" ? "contents" : null}"
|
|
51
56
|
>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
sort[i] === 'ascending'
|
|
74
|
-
? ascending(a[col.key], b[col.key])
|
|
75
|
-
: descending(a[col.key], b[col.key])
|
|
76
|
-
);
|
|
77
|
-
}}"
|
|
57
|
+
<table
|
|
58
|
+
class="ons-table"
|
|
59
|
+
class:ons-table--sortable="{sortable}"
|
|
60
|
+
class:ons-table--compact="{compact}"
|
|
61
|
+
class:ons-table--responsive="{responsive}"
|
|
62
|
+
class:ons-table--row-hover="{rowHover}"
|
|
63
|
+
class:sticky-header="{stickyHeader}"
|
|
64
|
+
data-aria-sort="{sortable ? 'Sort by' : null}"
|
|
65
|
+
data-aria-asc="{sortable ? 'ascending' : null}"
|
|
66
|
+
data-aria-desc="{sortable ? 'descending' : null}"
|
|
67
|
+
>
|
|
68
|
+
{#if title}<caption class="ons-table__caption">{title}</caption>{/if}
|
|
69
|
+
<thead class="ons-table__head">
|
|
70
|
+
<tr class="ons-table__row">
|
|
71
|
+
{#each columns as col, i}
|
|
72
|
+
{#if col.sortable}
|
|
73
|
+
<th
|
|
74
|
+
scope="col"
|
|
75
|
+
class="ons-table__header"
|
|
76
|
+
class:ons-table__header--numeric="{col.numeric}"
|
|
77
|
+
aria-sort="{sort[i]}"
|
|
78
78
|
>
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
79
|
+
<button
|
|
80
|
+
aria-label="Sort by {col.label}"
|
|
81
|
+
type="button"
|
|
82
|
+
data-index="{i}"
|
|
83
|
+
class="ons-table__sort-button"
|
|
84
|
+
on:click="{() => {
|
|
85
|
+
sort = sort.map((c, j) =>
|
|
86
|
+
j === i && c === 'ascending' ? 'descending' : j === i ? 'ascending' : 'none'
|
|
87
|
+
);
|
|
88
|
+
_data = _data.sort((a, b) =>
|
|
89
|
+
sort[i] === 'ascending'
|
|
90
|
+
? ascending(a[col.key], b[col.key])
|
|
91
|
+
: descending(a[col.key], b[col.key])
|
|
92
|
+
);
|
|
93
|
+
}}"
|
|
85
94
|
>
|
|
86
|
-
<
|
|
87
|
-
class="ons-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
<td
|
|
111
|
-
class="ons-table__cell"
|
|
112
|
-
class:ons-table__cell--numeric="{col.numeric}"
|
|
113
|
-
data-th="{col.label}">{format(row[col.key], col.numeric)}</td
|
|
114
|
-
>
|
|
95
|
+
{col.label}<svg
|
|
96
|
+
class="ons-svg-icon"
|
|
97
|
+
viewBox="0 0 12 19"
|
|
98
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
99
|
+
focusable="false"
|
|
100
|
+
fill="currentColor"
|
|
101
|
+
>
|
|
102
|
+
<path
|
|
103
|
+
class="ons-topTriangle"
|
|
104
|
+
d="M6 0l6 7.2H0L6 0zm0 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"></path>
|
|
105
|
+
<path class="ons-bottomTriangle" d="M6 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"
|
|
106
|
+
></path>
|
|
107
|
+
</svg>
|
|
108
|
+
</button>
|
|
109
|
+
</th>
|
|
110
|
+
{:else}
|
|
111
|
+
<th
|
|
112
|
+
scope="col"
|
|
113
|
+
class="ons-table__header"
|
|
114
|
+
class:ons-table__header--numeric="{col.numeric}"
|
|
115
|
+
>
|
|
116
|
+
<span class="ons-table__header-text">{col.label}</span>
|
|
117
|
+
</th>
|
|
118
|
+
{/if}
|
|
115
119
|
{/each}
|
|
116
120
|
</tr>
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
121
|
+
</thead>
|
|
122
|
+
<tbody class="ons-table__body">
|
|
123
|
+
{#each _data as row}
|
|
124
|
+
<tr class="ons-table__row">
|
|
125
|
+
{#each columns as col}
|
|
126
|
+
<td
|
|
127
|
+
class="ons-table__cell"
|
|
128
|
+
class:ons-table__cell--numeric="{col.numeric}"
|
|
129
|
+
data-th="{col.label}">{format(row[col.key], col.numeric)}</td
|
|
130
|
+
>
|
|
131
|
+
{/each}
|
|
132
|
+
</tr>
|
|
133
|
+
{/each}
|
|
134
|
+
</tbody>
|
|
135
|
+
</table>
|
|
136
|
+
</div>
|
|
120
137
|
|
|
121
138
|
<style>
|
|
122
139
|
.ons-table__sort-button {
|
|
@@ -126,4 +143,14 @@
|
|
|
126
143
|
color: var(--link-hover, --ons-color-text-link-hover) !important;
|
|
127
144
|
-webkit-text-decoration: underline solid var(--link-hover, --ons-color-text-link-hover) 2px !important;
|
|
128
145
|
text-decoration: underline solid var(--link-hover, --ons-color-text-link-hover) 2px !important;
|
|
146
|
+
}
|
|
147
|
+
table.sticky-header thead.ons-table__head {
|
|
148
|
+
position: sticky;
|
|
149
|
+
top: 0;
|
|
150
|
+
background: var(--background, white);
|
|
151
|
+
border-bottom: none;
|
|
152
|
+
}
|
|
153
|
+
table.sticky-header thead.ons-table__head th {
|
|
154
|
+
box-shadow: 0px -2px #707071 inset;
|
|
155
|
+
border-bottom: none;
|
|
129
156
|
}</style>
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
export default [
|
|
2
|
+
{ year: 1979, value: 7.19, alt: 12, group: "apples" },
|
|
3
|
+
{ year: 1980, value: 7.83, alt: 15, group: "apples" },
|
|
4
|
+
{ year: 1981, value: 7.24, alt: 17, group: "apples" },
|
|
5
|
+
{ year: 1982, value: 7.44, alt: 28, group: "apples" },
|
|
6
|
+
{ year: 1983, value: 7.51, alt: 23, group: "apples" },
|
|
7
|
+
{ year: 1984, value: 7.1, alt: 17, group: "apples" },
|
|
8
|
+
{ year: 1985, value: 6.91, alt: 11, group: "apples" },
|
|
9
|
+
{ year: 1986, value: 7.53, alt: 13, group: "apples" },
|
|
10
|
+
{ year: 1987, value: 7.47, alt: 18, group: "apples" },
|
|
11
|
+
{ year: 1988, value: 7.48, alt: 20, group: "apples" },
|
|
12
|
+
{ year: 1989, value: 7.03, alt: 24, group: "apples" },
|
|
13
|
+
{ year: 1990, value: 6.23, alt: 26, group: "bananas" },
|
|
14
|
+
{ year: 1991, value: 6.54, alt: 16, group: "bananas" },
|
|
15
|
+
{ year: 1992, value: 7.54, alt: 25, group: "bananas" },
|
|
16
|
+
{ year: 1993, value: 6.5, alt: 28, group: "bananas" },
|
|
17
|
+
{ year: 1994, value: 7.18, alt: 11, group: "bananas" },
|
|
18
|
+
{ year: 1995, value: 6.12, alt: 19, group: "bananas" },
|
|
19
|
+
{ year: 1996, value: 7.87, alt: 14, group: "bananas" },
|
|
20
|
+
{ year: 1997, value: 6.73, alt: 22, group: "bananas" },
|
|
21
|
+
{ year: 1998, value: 6.55, alt: 13, group: "bananas" },
|
|
22
|
+
{ year: 1999, value: 6.23, alt: 30, group: "bananas" },
|
|
23
|
+
{ year: 2000, value: 6.31, alt: 27, group: "bananas" },
|
|
24
|
+
{ year: 2001, value: 6.74, alt: 13, group: "cherries" },
|
|
25
|
+
{ year: 2002, value: 5.95, alt: 18, group: "cherries" },
|
|
26
|
+
{ year: 2003, value: 6.13, alt: 15, group: "cherries" },
|
|
27
|
+
{ year: 2004, value: 6.04, alt: 11, group: "cherries" },
|
|
28
|
+
{ year: 2005, value: 5.56, alt: 29, group: "cherries" },
|
|
29
|
+
{ year: 2006, value: 5.91, alt: 26, group: "cherries" },
|
|
30
|
+
{ year: 2007, value: 4.29, alt: 10, group: "cherries" },
|
|
31
|
+
{ year: 2008, value: 4.72, alt: 14, group: "cherries" },
|
|
32
|
+
{ year: 2009, value: 5.38, alt: 21, group: "cherries" },
|
|
33
|
+
{ year: 2010, value: 4.92, alt: 20, group: "cherries" },
|
|
34
|
+
{ year: 2011, value: 4.61, alt: 24, group: "dates" },
|
|
35
|
+
{ year: 2012, value: 3.62, alt: 19, group: "dates" },
|
|
36
|
+
{ year: 2013, value: 5.35, alt: 12, group: "dates" },
|
|
37
|
+
{ year: 2014, value: 5.28, alt: 13, group: "dates" },
|
|
38
|
+
{ year: 2015, value: 4.63, alt: 28, group: "dates" },
|
|
39
|
+
{ year: 2016, value: 4.72, alt: 30, group: "dates" },
|
|
40
|
+
];
|
|
@@ -285,7 +285,7 @@
|
|
|
285
285
|
class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap"
|
|
286
286
|
>
|
|
287
287
|
<div class="ons-grid__col ons-col-auto">
|
|
288
|
-
<a class="ons-header__org-logo-link" href="
|
|
288
|
+
<a class="ons-header__org-logo-link" href="{baseurl}/"
|
|
289
289
|
><div class="ons-header__org-logo ons-header__org-logo--large">
|
|
290
290
|
<ONSLogo theme="{theme}" width="{197}" height="{19}" />
|
|
291
291
|
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onsvisual/svelte-components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.12",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"homepage": "https://onsvisual.github.io/svelte-components",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@babel/eslint-plugin": "^7.19.1",
|
|
33
33
|
"@babel/preset-env": "^7.21.4",
|
|
34
34
|
"@evilmartians/lefthook": "^1.3.10",
|
|
35
|
-
"@onsvisual/svelte-charts": "^0.
|
|
35
|
+
"@onsvisual/svelte-charts": "^0.3.1",
|
|
36
36
|
"@reuters-graphics/eslint-config": "^0.0.2",
|
|
37
37
|
"@storybook/addon-actions": "^7.0.20",
|
|
38
38
|
"@storybook/addon-docs": "^7.0.20",
|
|
@@ -118,6 +118,7 @@
|
|
|
118
118
|
"./actions/resizeObserver": "./dist/actions/resizeObserver/index.js",
|
|
119
119
|
"./css/main.css": "./dist/css/main.css",
|
|
120
120
|
"./datavis/Table/Table.svelte": "./dist/datavis/Table/Table.svelte",
|
|
121
|
+
"./datavis/shared/data-scatter": "./dist/datavis/shared/data-scatter.js",
|
|
121
122
|
"./datavis/shared/data": "./dist/datavis/shared/data.js",
|
|
122
123
|
"./decorators/Blockquote/Blockquote.svelte": "./dist/decorators/Blockquote/Blockquote.svelte",
|
|
123
124
|
"./decorators/Divider/Divider.svelte": "./dist/decorators/Divider/Divider.svelte",
|