@neovici/cosmoz-omnitable 13.10.0 → 13.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.
|
@@ -8,113 +8,117 @@ import style, { dropdown as dropdownStyle } from './style.css';
|
|
|
8
8
|
import useSettingsUi from './use-settings-ui';
|
|
9
9
|
import { close, pull, arrow } from '../icons';
|
|
10
10
|
import { when } from 'lit-html/directives/when.js';
|
|
11
|
+
import { sheet } from '@neovici/cosmoz-utils';
|
|
11
12
|
|
|
12
13
|
/* eslint-disable max-lines-per-function */
|
|
13
|
-
const placement = ['bottom-right', ...defaultPlacement]
|
|
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
|
-
|
|
14
|
+
const placement = ['bottom-right', ...defaultPlacement];
|
|
15
|
+
|
|
16
|
+
const renderItem =
|
|
17
|
+
({
|
|
18
|
+
onDragStart,
|
|
19
|
+
onDragEnter,
|
|
20
|
+
onDragOver,
|
|
21
|
+
onDragLeave,
|
|
22
|
+
onDrop,
|
|
23
|
+
onDown,
|
|
24
|
+
onToggle,
|
|
25
|
+
collapsed,
|
|
26
|
+
filters,
|
|
27
|
+
}) =>
|
|
28
|
+
(column, i) => {
|
|
29
|
+
const indeterminate = !!collapsed?.find((c) => c.name === column.name),
|
|
30
|
+
checked = !column.disabled && !indeterminate;
|
|
31
|
+
return html` <div
|
|
32
|
+
class="item"
|
|
33
|
+
data-index=${i}
|
|
34
|
+
@mousedown=${onDown}
|
|
35
|
+
draggable="true"
|
|
36
|
+
@dragstart=${onDragStart}
|
|
37
|
+
@dragenter=${onDragEnter}
|
|
38
|
+
@dragover=${onDragOver}
|
|
39
|
+
@dragleave=${onDragLeave}
|
|
40
|
+
@drop=${onDrop}
|
|
41
|
+
>
|
|
42
|
+
<button class="pull">${pull}</button>
|
|
43
|
+
<label class="title" ?has-filter=${!isEmpty(filters[column.name]?.filter)}
|
|
44
|
+
>${column.title}</label
|
|
39
45
|
>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
.checked=${checked}
|
|
50
|
-
@click=${onToggle}
|
|
51
|
-
.indeterminate=${indeterminate}
|
|
52
|
-
/>
|
|
53
|
-
</div>`;
|
|
54
|
-
},
|
|
55
|
-
SettingsUI = (host) => {
|
|
56
|
-
const {
|
|
57
|
-
settings,
|
|
58
|
-
settingsId,
|
|
59
|
-
onSave,
|
|
60
|
-
onReset,
|
|
61
|
-
hasChanges,
|
|
62
|
-
opened,
|
|
63
|
-
setOpened,
|
|
64
|
-
...thru
|
|
65
|
-
} = useSettingsUi(host);
|
|
66
|
-
return [
|
|
67
|
-
html`
|
|
68
|
-
<style>
|
|
69
|
-
${style}
|
|
70
|
-
</style>
|
|
71
|
-
<div class="headline">
|
|
72
|
-
${_('Sort and filter')}
|
|
73
|
-
<button
|
|
74
|
-
class="close"
|
|
75
|
-
@click=${(e) => {
|
|
76
|
-
const tg = e.currentTarget;
|
|
77
|
-
tg?.focus();
|
|
78
|
-
tg?.blur();
|
|
79
|
-
}}
|
|
80
|
-
>
|
|
81
|
-
${close}
|
|
82
|
-
</button>
|
|
83
|
-
</div>
|
|
84
|
-
<div class="contents">
|
|
85
|
-
<div
|
|
86
|
-
class="heading"
|
|
87
|
-
?data-opened=${opened.columns}
|
|
88
|
-
@click=${() => setOpened((c) => ({ ...c, columns: !c.columns }))}
|
|
89
|
-
>
|
|
90
|
-
${_('Columns')} ${arrow}
|
|
91
|
-
</div>
|
|
92
|
-
<cosmoz-collapse ?opened=${opened.columns}>
|
|
93
|
-
<div class="list">${settings.columns?.map(renderItem(thru))}</div>
|
|
94
|
-
</cosmoz-collapse>
|
|
46
|
+
<input
|
|
47
|
+
class="checkbox"
|
|
48
|
+
type="checkbox"
|
|
49
|
+
.checked=${checked}
|
|
50
|
+
@click=${onToggle}
|
|
51
|
+
.indeterminate=${indeterminate}
|
|
52
|
+
/>
|
|
53
|
+
</div>`;
|
|
54
|
+
};
|
|
95
55
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
56
|
+
const SettingsUI = (host) => {
|
|
57
|
+
const {
|
|
58
|
+
settings,
|
|
59
|
+
settingsId,
|
|
60
|
+
onSave,
|
|
61
|
+
onReset,
|
|
62
|
+
hasChanges,
|
|
63
|
+
opened,
|
|
64
|
+
setOpened,
|
|
65
|
+
...thru
|
|
66
|
+
} = useSettingsUi(host);
|
|
67
|
+
return html` <div class="headline">
|
|
68
|
+
${_('Sort and filter')}
|
|
69
|
+
<button
|
|
70
|
+
class="close"
|
|
71
|
+
@click=${(e) => {
|
|
72
|
+
const tg = e.currentTarget;
|
|
73
|
+
tg?.focus();
|
|
74
|
+
tg?.blur();
|
|
75
|
+
}}
|
|
76
|
+
>
|
|
77
|
+
${close}
|
|
78
|
+
</button>
|
|
79
|
+
</div>
|
|
104
80
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
81
|
+
<div class="contents">
|
|
82
|
+
<div
|
|
83
|
+
class="heading"
|
|
84
|
+
?data-opened=${opened.columns}
|
|
85
|
+
@click=${() => setOpened((c) => ({ ...c, columns: !c.columns }))}
|
|
86
|
+
part="columns columns-heading"
|
|
87
|
+
>
|
|
88
|
+
${_('Columns')} ${arrow}
|
|
89
|
+
</div>
|
|
90
|
+
<cosmoz-collapse
|
|
91
|
+
?opened="${opened.columns}"
|
|
92
|
+
part="columns columns-content"
|
|
93
|
+
>
|
|
94
|
+
<div class="list">${settings.columns?.map(renderItem(thru))}</div>
|
|
95
|
+
</cosmoz-collapse>
|
|
96
|
+
|
|
97
|
+
<div
|
|
98
|
+
class="heading"
|
|
99
|
+
?data-opened=${opened.sort}
|
|
100
|
+
@click=${() => setOpened((c) => ({ ...c, sort: !c.sort }))}
|
|
101
|
+
>
|
|
102
|
+
${_('Sort on')} ${arrow}
|
|
103
|
+
</div>
|
|
104
|
+
<cosmoz-collapse ?opened=${opened.sort}> ${sort()} </cosmoz-collapse>
|
|
105
|
+
|
|
106
|
+
<div
|
|
107
|
+
class="heading"
|
|
108
|
+
?data-opened=${opened.group}
|
|
109
|
+
@click=${() => setOpened((c) => ({ ...c, group: !c.group }))}
|
|
110
|
+
part="groups groups-heading"
|
|
111
|
+
>
|
|
112
|
+
${_('Group on')} ${arrow}
|
|
113
|
+
</div>
|
|
114
|
+
<cosmoz-collapse ?opened=${opened.group} part="groups groups-heading"
|
|
115
|
+
>${group()}</cosmoz-collapse
|
|
116
|
+
>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
${when(
|
|
120
|
+
settingsId,
|
|
121
|
+
() =>
|
|
118
122
|
html`<div class="buttons">
|
|
119
123
|
<button
|
|
120
124
|
class="button reset"
|
|
@@ -127,29 +131,42 @@ const placement = ['bottom-right', ...defaultPlacement],
|
|
|
127
131
|
${_('Save')}
|
|
128
132
|
</button>
|
|
129
133
|
</div>`,
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
134
|
+
)}`;
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
customElements.define(
|
|
138
|
+
'cosmoz-omnitable-settings-ui',
|
|
139
|
+
component(SettingsUI, { styleSheets: [sheet(style)] }),
|
|
140
|
+
);
|
|
141
|
+
|
|
142
|
+
const Settings = ({ config, newLayout }) => html`
|
|
143
|
+
<cosmoz-dropdown
|
|
144
|
+
.placement="${newLayout ? ['bottom-left', ...defaultPlacement] : placement}"
|
|
145
|
+
>
|
|
146
|
+
${when(
|
|
147
|
+
newLayout,
|
|
148
|
+
() => html`<div class="headerDots" slot="button">...</div>`,
|
|
149
|
+
() =>
|
|
150
|
+
html` <svg
|
|
151
|
+
viewBox="0 0 24 24"
|
|
152
|
+
width="24"
|
|
153
|
+
slot="button"
|
|
154
|
+
fill="currentColor"
|
|
155
|
+
>
|
|
146
156
|
<circle cx="10" cy="18" r="2"></circle>
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
157
|
+
<circle cx="10" cy="12" r="2"></circle>
|
|
158
|
+
<circle cx="10" cy="6" r="2"></circle>
|
|
159
|
+
</svg>`,
|
|
160
|
+
)}
|
|
161
|
+
${when(config?.badge, () => html`<div class="badge" slot="button"></div>`)}
|
|
162
|
+
<cosmoz-omnitable-settings-ui
|
|
163
|
+
exportparts="columns, groups"
|
|
164
|
+
.config=${config}
|
|
165
|
+
></cosmoz-omnitable-settings-ui>
|
|
166
|
+
</cosmoz-dropdown>
|
|
167
|
+
`;
|
|
150
168
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
customElements.define('cosmoz-omnitable-settings-ui', component(SettingsUI));
|
|
169
|
+
customElements.define(
|
|
170
|
+
'cosmoz-omnitable-settings',
|
|
171
|
+
component(Settings, { styleSheets: [sheet(dropdownStyle)] }),
|
|
172
|
+
);
|
|
@@ -19,7 +19,7 @@ export default (host) => {
|
|
|
19
19
|
...cfg,
|
|
20
20
|
columns,
|
|
21
21
|
})),
|
|
22
|
-
[setSettings]
|
|
22
|
+
[setSettings],
|
|
23
23
|
),
|
|
24
24
|
});
|
|
25
25
|
|
|
@@ -33,7 +33,7 @@ export default (host) => {
|
|
|
33
33
|
|
|
34
34
|
meta.handle = e.currentTarget;
|
|
35
35
|
},
|
|
36
|
-
[meta]
|
|
36
|
+
[meta],
|
|
37
37
|
),
|
|
38
38
|
|
|
39
39
|
onDragStart: useCallback(
|
|
@@ -53,10 +53,10 @@ export default (host) => {
|
|
|
53
53
|
target.addEventListener(
|
|
54
54
|
'dragend',
|
|
55
55
|
(e) => e.target.classList.remove('drag'),
|
|
56
|
-
{ once: true }
|
|
56
|
+
{ once: true },
|
|
57
57
|
);
|
|
58
58
|
},
|
|
59
|
-
[meta]
|
|
59
|
+
[meta],
|
|
60
60
|
),
|
|
61
61
|
|
|
62
62
|
onDragEnter: useCallback((e) => {
|
|
@@ -97,11 +97,11 @@ export default (host) => {
|
|
|
97
97
|
newSettings.splice(
|
|
98
98
|
to + (from >= to ? 0 : -1),
|
|
99
99
|
0,
|
|
100
|
-
newSettings.splice(from, 1)[0]
|
|
100
|
+
newSettings.splice(from, 1)[0],
|
|
101
101
|
);
|
|
102
102
|
setSettings(newSettings);
|
|
103
103
|
},
|
|
104
|
-
[meta]
|
|
104
|
+
[meta],
|
|
105
105
|
),
|
|
106
106
|
|
|
107
107
|
onToggle: useCallback(
|
|
@@ -124,7 +124,7 @@ export default (host) => {
|
|
|
124
124
|
});
|
|
125
125
|
setSettings(newSettings);
|
|
126
126
|
},
|
|
127
|
-
[meta]
|
|
127
|
+
[meta],
|
|
128
128
|
),
|
|
129
129
|
};
|
|
130
130
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-omnitable",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.12.0",
|
|
4
4
|
"description": "[](https://travis-ci.org/Neovici/cosmoz-omnitable)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components"
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
"@semantic-release/changelog": "^6.0.0",
|
|
94
94
|
"@semantic-release/git": "^10.0.0",
|
|
95
95
|
"husky": "^9.0.0",
|
|
96
|
-
"semantic-release": "^
|
|
96
|
+
"semantic-release": "^24.0.0",
|
|
97
97
|
"sinon": "^18.0.0"
|
|
98
98
|
}
|
|
99
99
|
}
|