@neovici/cosmoz-omnitable 8.10.0 → 8.12.0
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.
- package/cosmoz-omnitable-column-autocomplete.js +1 -1
- package/cosmoz-omnitable-column-list.js +2 -1
- package/cosmoz-omnitable-header-row.js +0 -2
- package/cosmoz-omnitable-styles.js +74 -114
- package/lib/settings/cosmoz-omnitable-group.js +39 -32
- package/lib/settings/cosmoz-omnitable-settings.js +11 -2
- package/lib/settings/cosmoz-omnitable-sort.js +23 -0
- package/lib/settings/style.css.js +9 -16
- package/lib/settings/use-settings.js +1 -1
- package/package.json +5 -5
- package/lib/cosmoz-omnitable-sort.js +0 -37
|
@@ -46,7 +46,7 @@ class OmnitableColumnAutocomplete extends listColumnMixin(columnMixin(PolymerEle
|
|
|
46
46
|
renderHeader(column, { filter, query }, setState, source) {
|
|
47
47
|
const
|
|
48
48
|
spinner = column.loading
|
|
49
|
-
? html`<paper-spinner-lite style="width: 20px; height: 20px;" suffix slot="suffix" active></paper-spinner-lite>`
|
|
49
|
+
? html`<paper-spinner-lite style="width: 20px; height: 20px; flex: none;" suffix slot="suffix" active></paper-spinner-lite>`
|
|
50
50
|
: nothing;
|
|
51
51
|
|
|
52
52
|
return html`<cosmoz-autocomplete-ui
|
|
@@ -36,7 +36,7 @@ class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) {
|
|
|
36
36
|
renderHeader(column, { filter, query }, setState, source) {
|
|
37
37
|
const
|
|
38
38
|
spinner = column.loading
|
|
39
|
-
? html`<paper-spinner-lite style="width: 20px; height: 20px;" suffix slot="suffix" active></paper-spinner-lite>`
|
|
39
|
+
? html`<paper-spinner-lite style="width: 20px; height: 20px; flex:none;" suffix slot="suffix" active></paper-spinner-lite>`
|
|
40
40
|
: nothing;
|
|
41
41
|
|
|
42
42
|
return html`<cosmoz-autocomplete-ui
|
|
@@ -44,6 +44,7 @@ class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) {
|
|
|
44
44
|
.label=${ column.title }
|
|
45
45
|
.source=${ source }
|
|
46
46
|
.textProperty=${ column.textProperty }
|
|
47
|
+
.valueProperty=${ column.valueProperty }
|
|
47
48
|
.value=${ filter }
|
|
48
49
|
.text=${ query }
|
|
49
50
|
.onChange=${ onChange(setState) }
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { html, component } from 'haunted';
|
|
2
2
|
import { repeat } from 'lit-html/directives/repeat';
|
|
3
3
|
import './lib/cosmoz-omnitable-resize-nub';
|
|
4
|
-
import sort from './lib/cosmoz-omnitable-sort';
|
|
5
4
|
|
|
6
5
|
const /* eslint-disable-next-line max-lines-per-function */
|
|
7
6
|
renderHeaderRow = ({
|
|
@@ -28,7 +27,6 @@ const /* eslint-disable-next-line max-lines-per-function */
|
|
|
28
27
|
(state) => setFilterState(column.name, state),
|
|
29
28
|
column.source(column, data)
|
|
30
29
|
),
|
|
31
|
-
sort(column.name),
|
|
32
30
|
]}
|
|
33
31
|
</div>`,
|
|
34
32
|
html`<cosmoz-omnitable-resize-nub
|
|
@@ -1,119 +1,80 @@
|
|
|
1
1
|
/* eslint-disable max-lines */
|
|
2
2
|
import { tagged as css } from '@neovici/cosmoz-utils';
|
|
3
3
|
const checkbox = css`
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
display: inline-flex;
|
|
79
|
-
width: 10px;
|
|
80
|
-
cursor: pointer;
|
|
81
|
-
align-items: center;
|
|
82
|
-
margin-top: 18px;
|
|
83
|
-
overflow: hidden;
|
|
84
|
-
flex: none;
|
|
85
|
-
background: none;
|
|
86
|
-
border: none;
|
|
87
|
-
outline: none;
|
|
88
|
-
color: inherit;
|
|
89
|
-
padding: 0;
|
|
90
|
-
}
|
|
91
|
-
.sort svg {
|
|
92
|
-
display: block;
|
|
93
|
-
}
|
|
94
|
-
.sort[data-sort] {
|
|
95
|
-
color: var(
|
|
96
|
-
--cosmoz-omnitable-checkbox-checked-color,
|
|
97
|
-
var(--primary-color)
|
|
98
|
-
);
|
|
99
|
-
}
|
|
100
|
-
.sort:not([data-sort='desc']) {
|
|
101
|
-
transform: scaleY(-1);
|
|
102
|
-
}
|
|
103
|
-
:not(:hover) > * > .sort:not([data-sort]) {
|
|
104
|
-
display: none;
|
|
105
|
-
}
|
|
106
|
-
.header-cell {
|
|
107
|
-
display: inline-flex;
|
|
108
|
-
position: relative;
|
|
109
|
-
}
|
|
110
|
-
.header-cell :not(.sort) {
|
|
111
|
-
min-width: 0;
|
|
112
|
-
flex: auto;
|
|
113
|
-
}
|
|
114
|
-
`;
|
|
115
|
-
|
|
116
|
-
export { checkbox, sort };
|
|
4
|
+
.checkbox {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
width: 18px;
|
|
7
|
+
height: 18px;
|
|
8
|
+
background: transparent;
|
|
9
|
+
border-radius: 4px;
|
|
10
|
+
appearance: none;
|
|
11
|
+
-webkit-appearance: none;
|
|
12
|
+
outline: none;
|
|
13
|
+
position: relative;
|
|
14
|
+
user-select: none;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
display: inline-block;
|
|
17
|
+
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.16) inset;
|
|
18
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
19
|
+
vertical-align: middle;
|
|
20
|
+
transition: background-color 140ms;
|
|
21
|
+
margin: 1px 12px;
|
|
22
|
+
flex: none;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.checkbox:checked {
|
|
26
|
+
background-color: var(
|
|
27
|
+
--cosmoz-omnitable-checkbox-checked-color,
|
|
28
|
+
var(--primary-color)
|
|
29
|
+
);
|
|
30
|
+
box-shadow: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.checkbox:checked::before {
|
|
34
|
+
content: '';
|
|
35
|
+
position: absolute;
|
|
36
|
+
box-sizing: content-box;
|
|
37
|
+
width: 5px;
|
|
38
|
+
height: 10px;
|
|
39
|
+
border: 2.4px solid #fff;
|
|
40
|
+
border-top: none;
|
|
41
|
+
border-left: none;
|
|
42
|
+
transform-origin: 5px 10px;
|
|
43
|
+
transform: translate(3px) rotate(45deg);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.checkbox::after {
|
|
47
|
+
content: '';
|
|
48
|
+
display: block;
|
|
49
|
+
bottom: -5px;
|
|
50
|
+
left: -5px;
|
|
51
|
+
right: -5px;
|
|
52
|
+
top: -5px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.checkbox:hover {
|
|
56
|
+
box-shadow: 0 0 0 2px rgba(0, 0, 0, 1) inset, 0 0 2px 6px #2021240f;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.checkbox:checked:hover {
|
|
60
|
+
box-shadow: 0 0 2px 6px #2021240f;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.checkbox:indeterminate::before {
|
|
64
|
+
content: '';
|
|
65
|
+
position: absolute;
|
|
66
|
+
width: 10px;
|
|
67
|
+
height: 2px;
|
|
68
|
+
left: 4px;
|
|
69
|
+
top: 8px;
|
|
70
|
+
background-color: var(
|
|
71
|
+
--cosmoz-omnitable-checkbox-checked-color,
|
|
72
|
+
var(--primary-color)
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
`;
|
|
76
|
+
|
|
77
|
+
export { checkbox };
|
|
117
78
|
|
|
118
79
|
export default `<style>
|
|
119
80
|
:host {
|
|
@@ -520,5 +481,4 @@ export default `<style>
|
|
|
520
481
|
.expand:hover, .fold:hover {
|
|
521
482
|
color: #000;
|
|
522
483
|
}
|
|
523
|
-
${sort}
|
|
524
484
|
</style>`;
|
|
@@ -2,43 +2,50 @@ import { html } from 'haunted';
|
|
|
2
2
|
import { ifDefined } from 'lit-html/directives/if-defined';
|
|
3
3
|
import { triangle } from '../icons';
|
|
4
4
|
|
|
5
|
+
export const render = ({ columns, on, descending, setOn, setDescending }) =>
|
|
6
|
+
columns?.map(
|
|
7
|
+
(c) =>
|
|
8
|
+
html`<button
|
|
9
|
+
class="sg"
|
|
10
|
+
title=${c.title}
|
|
11
|
+
data-on=${ifDefined(
|
|
12
|
+
(c.name === on && (descending ? 'desc' : 'asc')) || undefined
|
|
13
|
+
)}
|
|
14
|
+
@click=${(e) => {
|
|
15
|
+
const on = e.currentTarget?.dataset.on;
|
|
16
|
+
if (!on) {
|
|
17
|
+
setOn(c.name);
|
|
18
|
+
setDescending(false);
|
|
19
|
+
}
|
|
20
|
+
if (on === 'asc') {
|
|
21
|
+
setDescending(true);
|
|
22
|
+
} else if (on === 'desc') {
|
|
23
|
+
setOn();
|
|
24
|
+
setDescending(false);
|
|
25
|
+
}
|
|
26
|
+
}}
|
|
27
|
+
>
|
|
28
|
+
<span>${c.title}</span> ${triangle}
|
|
29
|
+
</button>`
|
|
30
|
+
);
|
|
31
|
+
|
|
5
32
|
export default () => html`
|
|
6
33
|
<sort-and-group-consumer
|
|
7
|
-
class="
|
|
34
|
+
class="sgs"
|
|
8
35
|
.render=${({
|
|
9
36
|
columns,
|
|
37
|
+
groupOn: on,
|
|
38
|
+
setGroupOn: setOn,
|
|
10
39
|
groupOnDescending: descending,
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
title=${c.title}
|
|
21
|
-
data-group=${ifDefined(
|
|
22
|
-
(c.name === groupOn && (descending ? 'desc' : 'asc')) || undefined
|
|
23
|
-
)}
|
|
24
|
-
@click=${(e) => {
|
|
25
|
-
const group = e.currentTarget?.dataset.group;
|
|
26
|
-
if (!group) {
|
|
27
|
-
setGroupOn(c.name);
|
|
28
|
-
setGroupOnDescending(false);
|
|
29
|
-
}
|
|
30
|
-
if (group === 'asc') {
|
|
31
|
-
setGroupOnDescending(true);
|
|
32
|
-
} else if (group === 'desc') {
|
|
33
|
-
setGroupOn();
|
|
34
|
-
setGroupOnDescending(false);
|
|
35
|
-
}
|
|
36
|
-
}}
|
|
37
|
-
>
|
|
38
|
-
<span>${c.title}</span> ${triangle}
|
|
39
|
-
</button>`
|
|
40
|
-
);
|
|
41
|
-
}}
|
|
40
|
+
setGroupOnDescending: setDescending,
|
|
41
|
+
} = {}) =>
|
|
42
|
+
render({
|
|
43
|
+
columns: columns?.filter?.((c) => c['groupOn']),
|
|
44
|
+
on,
|
|
45
|
+
setOn,
|
|
46
|
+
descending,
|
|
47
|
+
setDescending,
|
|
48
|
+
})}
|
|
42
49
|
>
|
|
43
50
|
</sort-and-group-consumer>
|
|
44
51
|
`;
|
|
@@ -4,7 +4,7 @@ import { _ } from '@neovici/cosmoz-i18next';
|
|
|
4
4
|
import { isEmpty } from '@neovici/cosmoz-utils/lib/template';
|
|
5
5
|
import { defaultPlacement } from '@neovici/cosmoz-dropdown';
|
|
6
6
|
import '@neovici/cosmoz-collapse';
|
|
7
|
-
import sort from '
|
|
7
|
+
import sort from './cosmoz-omnitable-sort';
|
|
8
8
|
import group from './cosmoz-omnitable-group';
|
|
9
9
|
import style, { dropdown as dropdownStyle } from './style.css';
|
|
10
10
|
import useSettingsUi from './use-settings-ui';
|
|
@@ -44,7 +44,6 @@ const placement = ['bottom-right', ...defaultPlacement],
|
|
|
44
44
|
?has-filter=${!isEmpty(filters[column.name]?.filter)}
|
|
45
45
|
>${column.title}</label
|
|
46
46
|
>
|
|
47
|
-
${sort(column.name)}
|
|
48
47
|
<input
|
|
49
48
|
class="checkbox"
|
|
50
49
|
type="checkbox"
|
|
@@ -88,6 +87,16 @@ const placement = ['bottom-right', ...defaultPlacement],
|
|
|
88
87
|
<cosmoz-collapse ?opened=${opened.columns}>
|
|
89
88
|
<div class="list">${settings?.map(renderItem(thru))}</div>
|
|
90
89
|
</cosmoz-collapse>
|
|
90
|
+
|
|
91
|
+
<div
|
|
92
|
+
class="heading"
|
|
93
|
+
?data-opened=${opened.sort}
|
|
94
|
+
@click=${() => setOpened((c) => ({ ...c, sort: !c.sort }))}
|
|
95
|
+
>
|
|
96
|
+
${_('Sort on')} ${arrow}
|
|
97
|
+
</div>
|
|
98
|
+
<cosmoz-collapse ?opened=${opened.sort}> ${sort()} </cosmoz-collapse>
|
|
99
|
+
|
|
91
100
|
<div
|
|
92
101
|
class="heading"
|
|
93
102
|
?data-opened=${opened.group}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { html } from 'haunted';
|
|
2
|
+
import { render } from './cosmoz-omnitable-group';
|
|
3
|
+
|
|
4
|
+
export default () => html`
|
|
5
|
+
<sort-and-group-consumer
|
|
6
|
+
class="sgs"
|
|
7
|
+
.render=${({
|
|
8
|
+
columns,
|
|
9
|
+
sortOn: on,
|
|
10
|
+
setSortOn: setOn,
|
|
11
|
+
descending,
|
|
12
|
+
setDescending,
|
|
13
|
+
} = {}) =>
|
|
14
|
+
render({
|
|
15
|
+
columns: columns?.filter?.((c) => c['sortOn']),
|
|
16
|
+
on,
|
|
17
|
+
setOn,
|
|
18
|
+
descending,
|
|
19
|
+
setDescending,
|
|
20
|
+
})}
|
|
21
|
+
>
|
|
22
|
+
</sort-and-group-consumer>
|
|
23
|
+
`;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { tagged as css } from '@neovici/cosmoz-utils';
|
|
2
|
-
import { checkbox
|
|
2
|
+
import { checkbox } from '../../cosmoz-omnitable-styles';
|
|
3
3
|
|
|
4
4
|
export default css`
|
|
5
5
|
:host {
|
|
@@ -106,14 +106,6 @@ export default css`
|
|
|
106
106
|
margin: 4px 0;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
${sortStyle}
|
|
110
|
-
.sort {
|
|
111
|
-
order: initial;
|
|
112
|
-
margin: 0;
|
|
113
|
-
width: auto;
|
|
114
|
-
padding: 8px;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
109
|
.buttons {
|
|
118
110
|
display: flex;
|
|
119
111
|
gap: 8px;
|
|
@@ -145,7 +137,8 @@ export default css`
|
|
|
145
137
|
color: inherit;
|
|
146
138
|
text-decoration: underline;
|
|
147
139
|
}
|
|
148
|
-
|
|
140
|
+
/* sortgroups */
|
|
141
|
+
.sgs {
|
|
149
142
|
display: grid;
|
|
150
143
|
column-gap: 7px;
|
|
151
144
|
row-gap: 8px;
|
|
@@ -153,7 +146,7 @@ export default css`
|
|
|
153
146
|
grid-template-rows: auto;
|
|
154
147
|
padding: 14px;
|
|
155
148
|
}
|
|
156
|
-
.
|
|
149
|
+
.sg {
|
|
157
150
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
158
151
|
border-radius: 2px;
|
|
159
152
|
font-size: 13px;
|
|
@@ -166,25 +159,25 @@ export default css`
|
|
|
166
159
|
align-items: center;
|
|
167
160
|
justify-content: center;
|
|
168
161
|
}
|
|
169
|
-
.
|
|
162
|
+
.sg span {
|
|
170
163
|
overflow: hidden;
|
|
171
164
|
text-overflow: ellipsis;
|
|
172
165
|
}
|
|
173
|
-
.
|
|
166
|
+
.sg[data-on] {
|
|
174
167
|
background: var(
|
|
175
168
|
--cosmoz-omnitable-checkbox-checked-color,
|
|
176
169
|
var(--primary-color)
|
|
177
170
|
);
|
|
178
171
|
}
|
|
179
|
-
.
|
|
172
|
+
.sg svg {
|
|
180
173
|
margin-left: 4px;
|
|
181
174
|
flex: none;
|
|
182
175
|
vertical-align: middle;
|
|
183
176
|
}
|
|
184
|
-
.
|
|
177
|
+
.sg:not([data-on]) svg {
|
|
185
178
|
display: none;
|
|
186
179
|
}
|
|
187
|
-
.
|
|
180
|
+
.sg:not([data-on='desc']) svg {
|
|
188
181
|
transform: scaleY(-1);
|
|
189
182
|
}
|
|
190
183
|
`;
|
|
@@ -5,7 +5,7 @@ import normalize from './normalize';
|
|
|
5
5
|
|
|
6
6
|
export default ({ settingsId, columns }) => {
|
|
7
7
|
const [settings, setSettings] = useState([]),
|
|
8
|
-
[opened, setOpened] = useState({ columns: true,
|
|
8
|
+
[opened, setOpened] = useState({ columns: true, sort: true }),
|
|
9
9
|
{ savedSettings, ...thru } = useSavedSettings(
|
|
10
10
|
settingsId,
|
|
11
11
|
settings,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-omnitable",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.12.0",
|
|
4
4
|
"description": "[](https://travis-ci.org/Neovici/cosmoz-omnitable)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components"
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"@neovici/cosmoz-dropdown": "^1.5.0",
|
|
60
60
|
"@neovici/cosmoz-grouped-list": "^3.2.0",
|
|
61
61
|
"@neovici/cosmoz-i18next": "^3.1.1",
|
|
62
|
-
"@neovici/cosmoz-page-router": "^7.0.0",
|
|
62
|
+
"@neovici/cosmoz-page-router": "^7.0.0 || ^8.0.0",
|
|
63
63
|
"@neovici/cosmoz-utils": "^3.19.0",
|
|
64
64
|
"@neovici/nullxlsx": "^3.0.0",
|
|
65
65
|
"@polymer/iron-icon": "^3.0.0",
|
|
@@ -75,8 +75,8 @@
|
|
|
75
75
|
"lit-html": "^1.3.0"
|
|
76
76
|
},
|
|
77
77
|
"devDependencies": {
|
|
78
|
-
"@commitlint/cli": "^
|
|
79
|
-
"@commitlint/config-conventional": "^
|
|
78
|
+
"@commitlint/cli": "^17.0.0",
|
|
79
|
+
"@commitlint/config-conventional": "^17.0.0",
|
|
80
80
|
"@neovici/cfg": "^1.13.0",
|
|
81
81
|
"@neovici/cosmoz-viewinfo": "^3.1.3",
|
|
82
82
|
"@neovici/eslint-config": "^1.3.3",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"@semantic-release/changelog": "^6.0.0",
|
|
90
90
|
"@semantic-release/git": "^10.0.0",
|
|
91
91
|
"@web/dev-server": "^0.1.10",
|
|
92
|
-
"husky": "^
|
|
92
|
+
"husky": "^8.0.0",
|
|
93
93
|
"semantic-release": "^19.0.0",
|
|
94
94
|
"sinon": "^13.0.0",
|
|
95
95
|
"web-animations-js": "^2.3.2"
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { html } from 'haunted';
|
|
2
|
-
import { ifDefined } from 'lit-html/directives/if-defined';
|
|
3
|
-
import { triangle } from './icons';
|
|
4
|
-
|
|
5
|
-
export default (column) => html`
|
|
6
|
-
<sort-and-group-consumer
|
|
7
|
-
style="display: contents"
|
|
8
|
-
.render=${({
|
|
9
|
-
sortOn,
|
|
10
|
-
setSortOn,
|
|
11
|
-
descending,
|
|
12
|
-
setDescending,
|
|
13
|
-
} = {}) => html` <button
|
|
14
|
-
class="sort"
|
|
15
|
-
data-sort=${ifDefined(
|
|
16
|
-
(column === sortOn && (descending ? 'desc' : 'asc')) || undefined
|
|
17
|
-
)}
|
|
18
|
-
@click=${(e) => {
|
|
19
|
-
const sort = e.currentTarget?.dataset.sort;
|
|
20
|
-
if (!sort) {
|
|
21
|
-
setSortOn(column);
|
|
22
|
-
setDescending(false);
|
|
23
|
-
}
|
|
24
|
-
if (sort === 'asc') {
|
|
25
|
-
setDescending(true);
|
|
26
|
-
}
|
|
27
|
-
if (sort === 'desc') {
|
|
28
|
-
setSortOn();
|
|
29
|
-
setDescending(false);
|
|
30
|
-
}
|
|
31
|
-
}}
|
|
32
|
-
>
|
|
33
|
-
${triangle}
|
|
34
|
-
</button>`}
|
|
35
|
-
>
|
|
36
|
-
</sort-and-group-consumer>
|
|
37
|
-
`;
|