@onsvisual/svelte-components 0.1.10 → 0.1.11
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>
|