@neovici/cosmoz-omnitable 13.2.3 → 13.2.5

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.
Files changed (4) hide show
  1. package/cosmoz-omnitable-styles.js +22 -9
  2. package/cosmoz-omnitable.js +0 -1
  3. package/lib/use-list.js +103 -85
  4. package/package.json +4 -5
package/cosmoz-omnitable-styles.js CHANGED
@@ -159,6 +159,7 @@ export default css`
159
159
  --cosmoz-omnitable-header-font-size,
160
160
  16px
161
161
  );
162
+ --cosmoz-input-padding: 0;
162
163
  --cosmoz-input-label-text-transform: var(--cosmoz-omnitable-header-text-transform, none);
163
164
  --cosmoz-input-label-font-weight: var(--cosmoz-omnitable-header-font-weight, normal);
164
165
  }
@@ -452,7 +453,7 @@ export default css`
452
453
  .itemRow:hover .checkbox:not(:checked):not(:hover) {
453
454
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.54) inset;
454
455
  }
455
- .groupRow:hover .fold:not(:hover),
456
+ .groupRow:hover .expand:not(:hover),
456
457
  .itemRow:hover .expand:not(:hover) {
457
458
  color: rgba(0, 0, 0, 0.54);
458
459
  }
@@ -468,17 +469,29 @@ export default css`
468
469
  height: 24px;
469
470
  padding: 0;
470
471
  flex: none;
471
- }
472
-
473
- .expand,
474
- .fold {
472
+ border: none;
473
+ border-radius: 50%;
474
+ cursor: pointer;
475
+ background: none;
476
+ transition: 0.15s background ease-in;
477
+ outline: none;
475
478
  color: rgba(0, 0, 0, 0.16);
476
479
  }
477
-
478
- .expand:hover,
479
- .fold:hover {
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;
@@ -513,7 +526,7 @@ export default css`
513
526
  display: inline-flex;
514
527
  position: relative;
515
528
  }
516
- .header-cell :not(.sg,cosmoz-clear-button) {
529
+ .header-cell :not(.sg, cosmoz-clear-button) {
517
530
  min-width: 0;
518
531
  flex: auto;
519
532
  }
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
- folded ? 'groupRow groupRow-folded' : 'groupRow',
9
- _getFoldIcon = (expanded) => (expanded ? 'expand-less' : 'expand-more'),
10
- renderItem =
11
- ({
12
- columns,
13
- collapsedColumns,
14
- onItemClick,
15
- onCheckboxChange,
16
- dataIsValid,
17
- groupOnColumn,
18
- onItemChange,
19
- rowPartFn,
20
- }) =>
21
- (item, index, { selected, expanded, toggleCollapse }) =>
22
- html` <div class="item-row-wrapper">
23
- <div
24
- ?selected=${selected}
25
- part="${['itemRow', `itemRow-${item[indexSymbol]}`, rowPartFn?.(item, index)]
26
- .filter(Boolean)
27
- .join(' ')}"
28
- .dataIndex=${item[indexSymbol]}
29
- .dataItem=${item}
30
- class="itemRow"
31
- @click=${onItemClick}
32
- >
33
- <input
34
- class="checkbox"
35
- type="checkbox"
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
- <h3 class="groupRow-label">
85
- <div><span>${groupOnColumn?.title}</span>: &nbsp;</div>
86
- <cosmoz-omnitable-group-row
87
- .column=${groupOnColumn}
88
- .item=${item.items?.[0]}
89
- .selected=${selected}
90
- .folded=${folded}
91
- .group=${item}
92
- ></cosmoz-omnitable-group-row>
93
- </h3>
94
- <div class="groupRow-badge">${item.items.length}</div>
95
- <paper-icon-button
96
- class="fold"
97
- .icon=${_getFoldIcon(folded)}
98
- @click=${toggleFold}
99
- ></paper-icon-button>
100
- </div>`;
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>: &nbsp;</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",
3
+ "version": "13.2.5",
4
4
  "description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](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.0.0",
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.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": "^4.0.0",
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",