@neovici/cosmoz-omnitable 8.5.1 → 8.5.4
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.
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { component } from 'haunted';
|
|
2
2
|
import { nothing } from 'lit-html';
|
|
3
3
|
|
|
4
|
-
const GroupRow = ({ column, item, selected, folded }) => {
|
|
4
|
+
const GroupRow = ({ column, item, selected, folded, group }) => {
|
|
5
5
|
if (!column) {
|
|
6
6
|
return nothing;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
return (column.renderGroup ?? column.renderCell)(column, { item, selected, folded });
|
|
9
|
+
return (column.renderGroup ?? column.renderCell)(column, { item, selected, folded, group });
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
customElements.define('cosmoz-omnitable-group-row', component(GroupRow, { useShadowDOM: false }));
|
|
@@ -1,31 +1,47 @@
|
|
|
1
|
-
/* eslint-disable object-curly-newline */
|
|
2
1
|
import { html, component } from 'haunted';
|
|
3
2
|
import { repeat } from 'lit-html/directives/repeat';
|
|
4
3
|
import './lib/cosmoz-omnitable-resize-nub';
|
|
5
4
|
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
5
|
+
const renderHeaderRow = ({
|
|
6
|
+
data,
|
|
7
|
+
columns,
|
|
8
|
+
groupOnColumn,
|
|
9
|
+
filters,
|
|
10
|
+
setFilterState,
|
|
11
|
+
}) =>
|
|
12
|
+
repeat(
|
|
13
|
+
columns,
|
|
14
|
+
(column) => column.name,
|
|
15
|
+
(column) => [
|
|
16
|
+
html`<div
|
|
17
|
+
class="cell ${column.headerCellClass} header-cell"
|
|
18
|
+
?hidden=${column === groupOnColumn}
|
|
19
|
+
title=${column.title}
|
|
20
|
+
name=${column.name}
|
|
21
|
+
>
|
|
22
|
+
${column.renderHeader(
|
|
23
|
+
column,
|
|
24
|
+
filters[column.name] ?? {},
|
|
25
|
+
(state) => setFilterState(column.name, state),
|
|
26
|
+
column.source(column, data)
|
|
27
|
+
)}
|
|
28
|
+
</div>`,
|
|
29
|
+
html`<cosmoz-omnitable-resize-nub
|
|
30
|
+
.column=${column}
|
|
31
|
+
name=${column.name}
|
|
32
|
+
></cosmoz-omnitable-resize-nub>`,
|
|
33
|
+
]
|
|
34
|
+
),
|
|
35
|
+
HeaderRow = ({ content, columns, ...thru }) => [
|
|
36
|
+
columns &&
|
|
37
|
+
renderHeaderRow({
|
|
38
|
+
columns,
|
|
39
|
+
...thru,
|
|
40
|
+
}),
|
|
41
|
+
content,
|
|
42
|
+
];
|
|
26
43
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
customElements.define('cosmoz-omnitable-header-row', component(HeaderRow, { useShadowDOM: false }));
|
|
44
|
+
customElements.define(
|
|
45
|
+
'cosmoz-omnitable-header-row',
|
|
46
|
+
component(HeaderRow, { useShadowDOM: false })
|
|
47
|
+
);
|
package/cosmoz-omnitable.js
CHANGED
|
@@ -28,6 +28,7 @@ import './lib/cosmoz-omnitable-settings';
|
|
|
28
28
|
import { saveAsCsvAction } from './lib/save-as-csv-action';
|
|
29
29
|
import { saveAsXlsxAction } from './lib/save-as-xlsx-action';
|
|
30
30
|
import { defaultPlacement } from '@neovici/cosmoz-dropdown';
|
|
31
|
+
import { without } from '@neovici/cosmoz-utils/lib/array';
|
|
31
32
|
/**
|
|
32
33
|
* @polymer
|
|
33
34
|
* @customElement
|
|
@@ -118,8 +119,9 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
|
|
|
118
119
|
<input class="checkbox" type="checkbox" checked="[[ selected ]]" on-input="_onCheckboxChange" disabled$="[[ !_dataIsValid ]]" />
|
|
119
120
|
<h3 class="groupRow-label">
|
|
120
121
|
<div><span>[[ groupOnColumn.title ]]</span>: </div>
|
|
121
|
-
<cosmoz-omnitable-group-row column="[[ groupOnColumn ]]" item="[[ item.items.0 ]]" selected="[[ selected ]]" folded="[[ folded ]]"
|
|
122
|
-
|
|
122
|
+
<cosmoz-omnitable-group-row column="[[ groupOnColumn ]]" item="[[ item.items.0 ]]" selected="[[ selected ]]" folded="[[ folded ]]"
|
|
123
|
+
group="[[ item ]]"
|
|
124
|
+
></cosmoz-omnitable-group-row>
|
|
123
125
|
</h3>
|
|
124
126
|
<div class="groupRow-badge">[[ item.items.length ]]</div>
|
|
125
127
|
<paper-icon-button class="fold" icon="[[ _getFoldIcon(folded) ]]" on-tap="_toggleGroup"></paper-icon-button>
|
|
@@ -134,7 +136,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
|
|
|
134
136
|
label="[[ _('Group on', t) ]] [[ _computeSortDirection(groupOnDescending, t) ]]" placeholder="[[ _('No grouping', t) ]]"
|
|
135
137
|
source="[[ _onCompleteValues(columns, 'groupOn', groupOnColumn) ]]" value="[[ groupOnColumn ]]" limit="1" text-property="title"
|
|
136
138
|
always-float-label item-height="48" item-limit="8"
|
|
137
|
-
class="footer-control" on-change="[[ _onCompleteChange('groupOn') ]]" default-index="-1" show-single
|
|
139
|
+
class="footer-control" on-change="[[ _onCompleteChange('groupOn') ]]" on-select="[[ _onCompleteSelect ]]" default-index="-1" show-single
|
|
138
140
|
>
|
|
139
141
|
<svg slot="suffix" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" width="24" fill="currentColor"><path d="M7 10l5 5 5-5z"></path></svg>
|
|
140
142
|
</cosmoz-autocomplete>
|
|
@@ -142,7 +144,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
|
|
|
142
144
|
label="[[ _('Sort on', t) ]] [[ _computeSortDirection(descending, t) ]]" placeholder="[[ _('No sorting', t) ]]"
|
|
143
145
|
source="[[ _onCompleteValues(columns, 'sortOn', sortOnColumn) ]]" value="[[ sortOnColumn ]]" limit="1" text-property="title"
|
|
144
146
|
always-float-label item-height="48" item-limit="8"
|
|
145
|
-
class="footer-control" on-change="[[ _onCompleteChange('sortOn') ]]" default-index="-1" show-single
|
|
147
|
+
class="footer-control" on-change="[[ _onCompleteChange('sortOn') ]]" on-select="[[ _onCompleteSelect ]]" default-index="-1" show-single
|
|
146
148
|
>
|
|
147
149
|
<svg slot="suffix" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" width="24" fill="currentColor"><path d="M7 10l5 5 5-5z"></path></svg>
|
|
148
150
|
</cosmoz-autocomplete>
|
|
@@ -520,6 +522,11 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
|
|
|
520
522
|
return columns?.filter?.(c => c[type]).sort((a, b) => ((b === value) >> 0) - ((a === value) >> 0));
|
|
521
523
|
}
|
|
522
524
|
|
|
525
|
+
_onCompleteSelect(newVal, {value, onChange, onText, limit}) {
|
|
526
|
+
onText('');
|
|
527
|
+
onChange([...without(newVal)(value), newVal].slice(-limit));
|
|
528
|
+
}
|
|
529
|
+
|
|
523
530
|
_onCompleteChange(type) {
|
|
524
531
|
return (val, close) => {
|
|
525
532
|
const value = (val[0] ?? val)?.name ?? '',
|
package/lib/use-omnitable.js
CHANGED
|
@@ -14,8 +14,7 @@ export const useOmnitable = host => {
|
|
|
14
14
|
sortAndGroupOptions = useSortAndGroupOptions(
|
|
15
15
|
columns,
|
|
16
16
|
hashParam,
|
|
17
|
-
host
|
|
18
|
-
host.groupOn
|
|
17
|
+
host
|
|
19
18
|
),
|
|
20
19
|
{ groupOnColumn, groupOnDescending, sortOnColumn, descending } = sortAndGroupOptions,
|
|
21
20
|
{ data, resizeSpeedFactor, settingsId } = host,
|
|
@@ -1,18 +1,33 @@
|
|
|
1
1
|
import { useMemo } from 'haunted';
|
|
2
2
|
import { useHashState } from './use-hash-state';
|
|
3
3
|
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
boolParam = p => p === '' || parseBool(p);
|
|
4
|
+
const parseBool = (bool) => [true, 'true', 1, 'yes', 'on'].includes(bool),
|
|
5
|
+
boolParam = (p) => p === '' || (p == null ? undefined : parseBool(p));
|
|
7
6
|
|
|
8
|
-
export const useSortAndGroupOptions = (columns, hashParam,
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
[
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
7
|
+
export const useSortAndGroupOptions = (columns, hashParam, initial) => {
|
|
8
|
+
const [sortOn, setSortOn] = useHashState(initial.sortOn, hashParam, {
|
|
9
|
+
suffix: '-sortOn',
|
|
10
|
+
}),
|
|
11
|
+
[descending, setDescending] = useHashState(initial.descending, hashParam, {
|
|
12
|
+
suffix: '-descending',
|
|
13
|
+
read: boolParam,
|
|
14
|
+
}),
|
|
15
|
+
[groupOn, setGroupOn] = useHashState(initial.groupOn, hashParam, {
|
|
16
|
+
suffix: '-groupOn',
|
|
17
|
+
}),
|
|
18
|
+
[groupOnDescending, setGroupOnDescending] = useHashState(
|
|
19
|
+
initial.groupOnDescending,
|
|
20
|
+
hashParam,
|
|
21
|
+
{ suffix: '-groupOnDescending', read: boolParam }
|
|
22
|
+
),
|
|
23
|
+
sortOnColumn = useMemo(
|
|
24
|
+
() => columns.find((column) => column.name === sortOn),
|
|
25
|
+
[columns, sortOn]
|
|
26
|
+
),
|
|
27
|
+
groupOnColumn = useMemo(
|
|
28
|
+
() => columns.find((column) => column.name === groupOn),
|
|
29
|
+
[columns, groupOn]
|
|
30
|
+
);
|
|
16
31
|
|
|
17
32
|
return {
|
|
18
33
|
groupOn,
|
|
@@ -25,6 +40,6 @@ export const useSortAndGroupOptions = (columns, hashParam, initialSortOn, initia
|
|
|
25
40
|
setSortOn,
|
|
26
41
|
sortOnColumn,
|
|
27
42
|
descending,
|
|
28
|
-
setDescending
|
|
43
|
+
setDescending,
|
|
29
44
|
};
|
|
30
45
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-omnitable",
|
|
3
|
-
"version": "8.5.
|
|
3
|
+
"version": "8.5.4",
|
|
4
4
|
"description": "[](https://travis-ci.org/Neovici/cosmoz-omnitable)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components"
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
]
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
|
-
"@neovici/cosmoz-autocomplete": "^3.
|
|
55
|
+
"@neovici/cosmoz-autocomplete": "^3.1.0",
|
|
56
56
|
"@neovici/cosmoz-bottom-bar": "^5.0.0",
|
|
57
57
|
"@neovici/cosmoz-datetime-input": "^3.0.3",
|
|
58
58
|
"@neovici/cosmoz-dropdown": "^1.5.0",
|
|
@@ -80,8 +80,6 @@
|
|
|
80
80
|
"@neovici/cosmoz-viewinfo": "^3.1.3",
|
|
81
81
|
"@neovici/eslint-config": "^1.3.3",
|
|
82
82
|
"@open-wc/testing": "^2.5.28",
|
|
83
|
-
"@polymer/iron-component-page": "^4.0.0",
|
|
84
|
-
"@polymer/iron-demo-helpers": "^3.0.0",
|
|
85
83
|
"@polymer/iron-test-helpers": "^3.0.0",
|
|
86
84
|
"@polymer/paper-button": "^3.0.1",
|
|
87
85
|
"@polymer/paper-item": "^3.0.1",
|