@neovici/cosmoz-omnitable 13.2.3 → 13.2.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.
- package/cosmoz-omnitable-styles.js +21 -8
- package/cosmoz-omnitable.js +0 -1
- package/lib/use-list.js +103 -85
- package/package.json +4 -5
|
@@ -452,7 +452,7 @@ export default css`
|
|
|
452
452
|
.itemRow:hover .checkbox:not(:checked):not(:hover) {
|
|
453
453
|
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.54) inset;
|
|
454
454
|
}
|
|
455
|
-
.groupRow:hover .
|
|
455
|
+
.groupRow:hover .expand:not(:hover),
|
|
456
456
|
.itemRow:hover .expand:not(:hover) {
|
|
457
457
|
color: rgba(0, 0, 0, 0.54);
|
|
458
458
|
}
|
|
@@ -468,17 +468,30 @@ export default css`
|
|
|
468
468
|
height: 24px;
|
|
469
469
|
padding: 0;
|
|
470
470
|
flex: none;
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
471
|
+
border: none;
|
|
472
|
+
border-radius: 50%;
|
|
473
|
+
cursor: pointer;
|
|
474
|
+
background: none;
|
|
475
|
+
transition: 0.15s background ease-in;
|
|
476
|
+
outline: none;
|
|
475
477
|
color: rgba(0, 0, 0, 0.16);
|
|
476
|
-
}
|
|
477
478
|
|
|
478
|
-
|
|
479
|
-
.
|
|
479
|
+
}
|
|
480
|
+
.expand svg {
|
|
481
|
+
fill: currentColor;
|
|
482
|
+
}
|
|
483
|
+
.expand:not([aria-expanded]) svg {
|
|
484
|
+
transform: scaleY(-1);
|
|
485
|
+
}
|
|
486
|
+
.expand:active {
|
|
487
|
+
background: rgba(33,33,33,0.25)
|
|
488
|
+
}
|
|
489
|
+
.expand:hover {
|
|
480
490
|
color: #000;
|
|
481
491
|
}
|
|
492
|
+
.groupRow .expand {
|
|
493
|
+
margin: 8px;
|
|
494
|
+
}
|
|
482
495
|
|
|
483
496
|
.sg {
|
|
484
497
|
display: inline-flex;
|
package/cosmoz-omnitable.js
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
/* eslint-disable max-lines */
|
|
3
3
|
import '@polymer/iron-icons/iron-icons';
|
|
4
4
|
import '@polymer/iron-icon/iron-icon';
|
|
5
|
-
import '@polymer/paper-icon-button/paper-icon-button';
|
|
6
5
|
import '@polymer/paper-spinner/paper-spinner-lite';
|
|
7
6
|
|
|
8
7
|
import '@neovici/cosmoz-grouped-list';
|
package/lib/use-list.js
CHANGED
|
@@ -4,101 +4,119 @@ import { indexSymbol } from './utils';
|
|
|
4
4
|
import { isEmpty } from '@neovici/cosmoz-utils/template';
|
|
5
5
|
import { onItemChange as _onItemChange } from './utils-data';
|
|
6
6
|
|
|
7
|
+
const arrow = html`
|
|
8
|
+
<svg
|
|
9
|
+
viewBox="0 0 24 24"
|
|
10
|
+
preserveAspectRatio="xMidYMid meet"
|
|
11
|
+
focusable="false"
|
|
12
|
+
>
|
|
13
|
+
<g>
|
|
14
|
+
<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"></path>
|
|
15
|
+
</g>
|
|
16
|
+
</svg>
|
|
17
|
+
`;
|
|
18
|
+
|
|
7
19
|
const _getGroupRowClasses = (folded) =>
|
|
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
|
-
part="checkbox"
|
|
37
|
-
.checked=${selected}
|
|
38
|
-
.dataItem=${item}
|
|
39
|
-
@input=${onCheckboxChange}
|
|
40
|
-
?disabled=${!dataIsValid}
|
|
41
|
-
/>
|
|
42
|
-
<cosmoz-omnitable-item-row
|
|
43
|
-
.columns=${columns}
|
|
44
|
-
.index=${index}
|
|
45
|
-
.selected=${selected}
|
|
46
|
-
.expanded=${expanded}
|
|
47
|
-
.item=${item}
|
|
48
|
-
.groupOnColumn=${groupOnColumn}
|
|
49
|
-
.onItemChange=${onItemChange}
|
|
50
|
-
>
|
|
51
|
-
</cosmoz-omnitable-item-row>
|
|
52
|
-
<paper-icon-button
|
|
53
|
-
class="expand"
|
|
54
|
-
?hidden=${isEmpty(collapsedColumns.length)}
|
|
55
|
-
.icon=${_getFoldIcon(expanded)}
|
|
56
|
-
@click=${toggleCollapse}
|
|
57
|
-
></paper-icon-button>
|
|
58
|
-
</div>
|
|
59
|
-
<cosmoz-omnitable-item-expand
|
|
60
|
-
.columns=${collapsedColumns}
|
|
61
|
-
.item=${item}
|
|
62
|
-
.index=${index}
|
|
63
|
-
?selected=${selected}
|
|
64
|
-
?expanded=${expanded}
|
|
65
|
-
.groupOnColumn=${groupOnColumn}
|
|
66
|
-
part="item-expand"
|
|
67
|
-
>
|
|
68
|
-
</cosmoz-omnitable-item-expand>
|
|
69
|
-
</div>`,
|
|
70
|
-
renderGroup = ({ onCheckboxChange, dataIsValid, groupOnColumn }) => {
|
|
71
|
-
return (item, index, { selected, folded, toggleFold }) =>
|
|
72
|
-
html` <div
|
|
73
|
-
class="${_getGroupRowClasses(folded)}"
|
|
74
|
-
part="groupRow groupRow-${item[indexSymbol]}"
|
|
20
|
+
folded ? 'groupRow groupRow-folded' : 'groupRow';
|
|
21
|
+
|
|
22
|
+
const renderItem =
|
|
23
|
+
({
|
|
24
|
+
columns,
|
|
25
|
+
collapsedColumns,
|
|
26
|
+
onItemClick,
|
|
27
|
+
onCheckboxChange,
|
|
28
|
+
dataIsValid,
|
|
29
|
+
groupOnColumn,
|
|
30
|
+
onItemChange,
|
|
31
|
+
rowPartFn,
|
|
32
|
+
}) =>
|
|
33
|
+
(item, index, { selected, expanded, toggleCollapse }) =>
|
|
34
|
+
html` <div class="item-row-wrapper">
|
|
35
|
+
<div
|
|
36
|
+
?selected=${selected}
|
|
37
|
+
part="${[
|
|
38
|
+
'itemRow',
|
|
39
|
+
`itemRow-${item[indexSymbol]}`,
|
|
40
|
+
rowPartFn?.(item, index),
|
|
41
|
+
]
|
|
42
|
+
.filter(Boolean)
|
|
43
|
+
.join(' ')}"
|
|
44
|
+
.dataIndex=${item[indexSymbol]}
|
|
45
|
+
.dataItem=${item}
|
|
46
|
+
class="itemRow"
|
|
47
|
+
@click=${onItemClick}
|
|
75
48
|
>
|
|
76
49
|
<input
|
|
77
50
|
class="checkbox"
|
|
78
51
|
type="checkbox"
|
|
52
|
+
part="checkbox"
|
|
79
53
|
.checked=${selected}
|
|
80
54
|
.dataItem=${item}
|
|
81
55
|
@input=${onCheckboxChange}
|
|
82
56
|
?disabled=${!dataIsValid}
|
|
83
57
|
/>
|
|
84
|
-
<
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
</
|
|
94
|
-
|
|
95
|
-
<
|
|
96
|
-
class="
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
58
|
+
<cosmoz-omnitable-item-row
|
|
59
|
+
.columns=${columns}
|
|
60
|
+
.index=${index}
|
|
61
|
+
.selected=${selected}
|
|
62
|
+
.expanded=${expanded}
|
|
63
|
+
.item=${item}
|
|
64
|
+
.groupOnColumn=${groupOnColumn}
|
|
65
|
+
.onItemChange=${onItemChange}
|
|
66
|
+
>
|
|
67
|
+
</cosmoz-omnitable-item-row>
|
|
68
|
+
|
|
69
|
+
<button
|
|
70
|
+
class="expand"
|
|
71
|
+
?hidden="${isEmpty(collapsedColumns.length)}"
|
|
72
|
+
?aria-expanded="${expanded}"
|
|
73
|
+
@click="${toggleCollapse}"
|
|
74
|
+
>
|
|
75
|
+
${arrow}
|
|
76
|
+
</button>
|
|
77
|
+
</div>
|
|
78
|
+
<cosmoz-omnitable-item-expand
|
|
79
|
+
.columns=${collapsedColumns}
|
|
80
|
+
.item=${item}
|
|
81
|
+
.index=${index}
|
|
82
|
+
?selected=${selected}
|
|
83
|
+
?expanded=${expanded}
|
|
84
|
+
.groupOnColumn=${groupOnColumn}
|
|
85
|
+
part="item-expand"
|
|
86
|
+
>
|
|
87
|
+
</cosmoz-omnitable-item-expand>
|
|
88
|
+
</div>`;
|
|
89
|
+
|
|
90
|
+
const renderGroup =
|
|
91
|
+
({ onCheckboxChange, dataIsValid, groupOnColumn }) =>
|
|
92
|
+
(item, index, { selected, folded, toggleFold }) =>
|
|
93
|
+
html` <div
|
|
94
|
+
class="${_getGroupRowClasses(folded)}"
|
|
95
|
+
part="groupRow groupRow-${item[indexSymbol]}"
|
|
96
|
+
>
|
|
97
|
+
<input
|
|
98
|
+
class="checkbox"
|
|
99
|
+
type="checkbox"
|
|
100
|
+
.checked=${selected}
|
|
101
|
+
.dataItem=${item}
|
|
102
|
+
@input=${onCheckboxChange}
|
|
103
|
+
?disabled=${!dataIsValid}
|
|
104
|
+
/>
|
|
105
|
+
<h3 class="groupRow-label">
|
|
106
|
+
<div><span>${groupOnColumn?.title}</span>: </div>
|
|
107
|
+
<cosmoz-omnitable-group-row
|
|
108
|
+
.column=${groupOnColumn}
|
|
109
|
+
.item=${item.items?.[0]}
|
|
110
|
+
.selected=${selected}
|
|
111
|
+
.folded=${folded}
|
|
112
|
+
.group=${item}
|
|
113
|
+
></cosmoz-omnitable-group-row>
|
|
114
|
+
</h3>
|
|
115
|
+
<div class="groupRow-badge">${item.items.length}</div>
|
|
116
|
+
<button class="expand" ?aria-expanded="${folded}" @click=${toggleFold}>
|
|
117
|
+
${arrow}
|
|
118
|
+
</button>
|
|
119
|
+
</div>`;
|
|
102
120
|
|
|
103
121
|
export const useList = ({
|
|
104
122
|
host,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-omnitable",
|
|
3
|
-
"version": "13.2.
|
|
3
|
+
"version": "13.2.4",
|
|
4
4
|
"description": "[](https://travis-ci.org/Neovici/cosmoz-omnitable)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components"
|
|
@@ -59,14 +59,14 @@
|
|
|
59
59
|
}
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
|
-
"@neovici/cosmoz-autocomplete": "^8.
|
|
62
|
+
"@neovici/cosmoz-autocomplete": "^8.7.1",
|
|
63
63
|
"@neovici/cosmoz-bottom-bar": "^7.0.0",
|
|
64
64
|
"@neovici/cosmoz-collapse": "^1.1.0",
|
|
65
|
-
"@neovici/cosmoz-datetime-input": "^4.0.
|
|
65
|
+
"@neovici/cosmoz-datetime-input": "^4.0.1",
|
|
66
66
|
"@neovici/cosmoz-dropdown": "^4.0.0",
|
|
67
67
|
"@neovici/cosmoz-grouped-list": "^8.0.0",
|
|
68
68
|
"@neovici/cosmoz-i18next": "^3.1.1",
|
|
69
|
-
"@neovici/cosmoz-input": "^
|
|
69
|
+
"@neovici/cosmoz-input": "^5.0.0",
|
|
70
70
|
"@neovici/cosmoz-router": "^11.0.0",
|
|
71
71
|
"@neovici/cosmoz-utils": "^6.5.0",
|
|
72
72
|
"@neovici/nullxlsx": "^3.0.0",
|
|
@@ -74,7 +74,6 @@
|
|
|
74
74
|
"@polymer/iron-icon": "^3.0.0",
|
|
75
75
|
"@polymer/iron-icons": "^3.0.0",
|
|
76
76
|
"@polymer/paper-dropdown-menu": "^3.2.0",
|
|
77
|
-
"@polymer/paper-icon-button": "^3.0.0",
|
|
78
77
|
"@polymer/paper-spinner": "^3.0.0",
|
|
79
78
|
"@polymer/polymer": "^3.3.0",
|
|
80
79
|
"file-saver-es": "^2.0.0",
|