@neovici/cosmoz-omnitable 13.14.0 → 13.14.2

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 (7) hide show
  1. package/lib/render-footer.js +52 -57
  2. package/lib/use-fast-layout.js +6 -2
  3. package/lib/use-footer.js +8 -9
  4. package/lib/use-mini.js +13 -12
  5. package/lib/use-omnitable.js +4 -1
  6. package/lib/use-public-interface.js +4 -3
  7. package/package.json +1 -1
package/lib/render-footer.js CHANGED
@@ -11,61 +11,56 @@ export const renderFooter = ({
11
11
  csvFilename,
12
12
  xlsxFilename,
13
13
  xlsxSheetname,
14
- topPlacement
15
- }) => {
16
- return html`
17
- <cosmoz-bottom-bar
18
- id="bottomBar"
19
- ?active=${!isEmpty(selectedItems.length)}
20
- >
21
- <slot name="info" slot="info">
22
- ${ngettext(
23
- '{0} selected item',
24
- '{0} selected items',
25
- selectedItems.length
26
- )}
27
- </slot>
28
- <slot name="actions" id="actions"></slot>
29
- <!-- These slots are needed by cosmoz-bottom-bar
14
+ topPlacement,
15
+ maxToolbarItems,
16
+ }) =>
17
+ html`<cosmoz-bottom-bar
18
+ id="bottomBar"
19
+ ?active=${!isEmpty(selectedItems.length)}
20
+ ?max-toolbar-items=${!isEmpty(maxToolbarItems)}
21
+ >
22
+ <slot name="info" slot="info">
23
+ ${ngettext(
24
+ '{0} selected item',
25
+ '{0} selected items',
26
+ selectedItems.length,
27
+ )}
28
+ </slot>
29
+ <slot name="actions" id="actions"></slot>
30
+ <!-- These slots are needed by cosmoz-bottom-bar
30
31
  as it might change the slot of the actions to distribute them in the menu -->
31
- <slot name="bottom-bar-toolbar" slot="bottom-bar-toolbar"></slot>
32
- <slot name="bottom-bar-menu" slot="bottom-bar-menu"></slot>
33
- <cosmoz-dropdown-menu slot="extra" .placement=${topPlacement}>
34
- <svg
35
- slot="button"
36
- width="14"
37
- height="18"
38
- viewBox="0 0 14 18"
39
- fill="none"
40
- stroke="currentColor"
41
- xmlns="http://www.w3.org/2000/svg"
42
- >
43
- <path
44
- d="M1 8.5L7.00024 14.5L13 8.5"
45
- stroke-width="2"
46
- stroke-linecap="round"
47
- stroke-linejoin="round"
48
- />
49
- <path d="M13 17L1 17" stroke-width="2" stroke-linecap="round" />
50
- <path d="M7 1V13" stroke-width="2" stroke-linecap="round" />
51
- </svg>
52
- <button
53
- @click=${() => saveAsCsvAction(columns, selectedItems, csvFilename)}
54
- >
55
- ${_('Save as CSV')}
56
- </button>
57
- <button
58
- @click=${() =>
59
- saveAsXlsxAction(
60
- columns,
61
- selectedItems,
62
- xlsxFilename,
63
- xlsxSheetname
64
- )}
65
- >
66
- ${_('Save as XLSX')}
67
- </button>
68
- <slot name="download-menu"></slot>
69
- </cosmoz-dropdown-menu>
70
- </cosmoz-bottom-bar>`;
71
- };
32
+ <slot name="bottom-bar-toolbar" slot="bottom-bar-toolbar"></slot>
33
+ <slot name="bottom-bar-menu" slot="bottom-bar-menu"></slot>
34
+ <cosmoz-dropdown-menu slot="extra" .placement=${topPlacement}>
35
+ <svg
36
+ slot="button"
37
+ width="14"
38
+ height="18"
39
+ viewBox="0 0 14 18"
40
+ fill="none"
41
+ stroke="currentColor"
42
+ xmlns="http://www.w3.org/2000/svg"
43
+ >
44
+ <path
45
+ d="M1 8.5L7.00024 14.5L13 8.5"
46
+ stroke-width="2"
47
+ stroke-linecap="round"
48
+ stroke-linejoin="round"
49
+ />
50
+ <path d="M13 17L1 17" stroke-width="2" stroke-linecap="round" />
51
+ <path d="M7 1V13" stroke-width="2" stroke-linecap="round" />
52
+ </svg>
53
+ <button
54
+ @click=${() => saveAsCsvAction(columns, selectedItems, csvFilename)}
55
+ >
56
+ ${_('Save as CSV')}
57
+ </button>
58
+ <button
59
+ @click=${() =>
60
+ saveAsXlsxAction(columns, selectedItems, xlsxFilename, xlsxSheetname)}
61
+ >
62
+ ${_('Save as XLSX')}
63
+ </button>
64
+ <slot name="download-menu"></slot>
65
+ </cosmoz-dropdown-menu>
66
+ </cosmoz-bottom-bar>`;
package/lib/use-fast-layout.js CHANGED
@@ -16,7 +16,11 @@ export const useFastLayout = ({
16
16
  sortAndGroupOptions,
17
17
  }) => {
18
18
  const canvasWidth = useCanvasWidth(host),
19
- { miniColumn, miniColumns } = useMini({ host, canvasWidth, columns }),
19
+ { isMini, miniColumn, miniColumns } = useMini({
20
+ host,
21
+ canvasWidth,
22
+ columns,
23
+ }),
20
24
  { groupOnColumn } = sortAndGroupOptions,
21
25
  layout = useLayout({
22
26
  canvasWidth,
@@ -52,5 +56,5 @@ export const useFastLayout = ({
52
56
 
53
57
  useStyleSheet(layoutCss);
54
58
 
55
- return { collapsedColumns, miniColumns };
59
+ return { isMini, collapsedColumns, miniColumns };
56
60
  };
package/lib/use-footer.js CHANGED
@@ -1,22 +1,21 @@
1
1
  import { defaultPlacement } from '@neovici/cosmoz-dropdown';
2
2
  const _defaultPlacement = ['top-right', ...defaultPlacement];
3
3
 
4
- export const useFooter = ({
5
- host,
6
- ...rest
7
- }) => {
4
+ export const useFooter = ({ host, ...rest }) => {
8
5
  const {
9
- csvFilename = 'omnitable.csv',
10
- xlsxFilename = 'omnitable.xlsx',
11
- xlsxSheetname = 'Omnitable',
12
- topPlacement = _defaultPlacement,
13
- } = host;
6
+ csvFilename = 'omnitable.csv',
7
+ xlsxFilename = 'omnitable.xlsx',
8
+ xlsxSheetname = 'Omnitable',
9
+ topPlacement = _defaultPlacement,
10
+ maxToolbarItems,
11
+ } = host;
14
12
 
15
13
  return {
16
14
  csvFilename,
17
15
  xlsxFilename,
18
16
  xlsxSheetname,
19
17
  topPlacement,
18
+ maxToolbarItems,
20
19
  ...rest,
21
20
  };
22
21
  };
package/lib/use-mini.js CHANGED
@@ -7,22 +7,23 @@ export const useMini = ({ host, canvasWidth, columns: _columns }) => {
7
7
  [canvasWidth, breakpoint],
8
8
  );
9
9
  const columns = useMemo(
10
- () =>
11
- isMiniSize
12
- ? _columns
13
- ?.filter((c) => c.mini != null)
14
- .sort((a, b) => (a.mini ?? 0) - (b.mini ?? 0))
15
- : [],
16
- [_columns, isMiniSize],
17
- );
18
-
19
- const [miniColumn, ...miniColumns] = columns ?? [];
10
+ () =>
11
+ isMiniSize
12
+ ? _columns
13
+ ?.filter((c) => c.mini != null)
14
+ .sort((a, b) => (a.mini ?? 0) - (b.mini ?? 0))
15
+ : [],
16
+ [_columns, isMiniSize],
17
+ ),
18
+ [miniColumn, ...miniColumns] = columns ?? [],
19
+ hasMiniColumn = !!miniColumn;
20
20
 
21
21
  useEffect(() => {
22
- host.toggleAttribute('mini', !!miniColumn);
23
- }, [miniColumn]);
22
+ host.toggleAttribute('mini', hasMiniColumn);
23
+ }, [hasMiniColumn]);
24
24
 
25
25
  return {
26
+ isMini: hasMiniColumn && isMiniSize,
26
27
  miniColumn,
27
28
  miniColumns,
28
29
  };
package/lib/use-omnitable.js CHANGED
@@ -40,7 +40,7 @@ export const useOmnitable = (host) => {
40
40
  noLocalSort,
41
41
  noLocalFilter,
42
42
  }),
43
- { collapsedColumns, miniColumns } = useFastLayout({
43
+ { isMini, collapsedColumns, miniColumns } = useFastLayout({
44
44
  host,
45
45
  columns,
46
46
  settings,
@@ -48,6 +48,7 @@ export const useOmnitable = (host) => {
48
48
  resizeSpeedFactor,
49
49
  sortAndGroupOptions,
50
50
  }),
51
+ maxToolbarItems = isMini ? '0' : undefined,
51
52
  dataIsValid = data && Array.isArray(data) && data.length > 0,
52
53
  [selectedItems, setSelectedItems] = useState([]);
53
54
 
@@ -59,6 +60,7 @@ export const useOmnitable = (host) => {
59
60
  filters,
60
61
  setFilterState,
61
62
  selectedItems,
63
+ isMini,
62
64
  ...sortAndGroupOptions,
63
65
  });
64
66
 
@@ -94,6 +96,7 @@ export const useOmnitable = (host) => {
94
96
  host,
95
97
  selectedItems,
96
98
  columns,
99
+ maxToolbarItems,
97
100
  }),
98
101
  };
99
102
  };
package/lib/use-public-interface.js CHANGED
@@ -87,20 +87,21 @@ export const usePublicInterface = ({ host, visibleData, filters, ...api }) => {
87
87
  useNotifyProperty('visibleData', visibleData);
88
88
  useNotifyProperty(
89
89
  'sortedFilteredGroupedItems',
90
- api.sortedFilteredGroupedItems
90
+ api.sortedFilteredGroupedItems,
91
91
  );
92
92
  useNotifyProperty('selectedItems', api.selectedItems);
93
93
  useNotifyProperty('sortOn', api.sortOn);
94
94
  useNotifyProperty('descending', api.descending);
95
+ useNotifyProperty('isMini', api.isMini);
95
96
 
96
97
  const filterValues = useMemo(
97
98
  () =>
98
99
  Object.fromEntries(
99
100
  Object.entries(filters)
100
101
  .filter(([, { filter }]) => filter !== undefined)
101
- .map(([key, { filter }]) => [key, filter])
102
+ .map(([key, { filter }]) => [key, filter]),
102
103
  ),
103
- [filters]
104
+ [filters],
104
105
  );
105
106
 
106
107
  useNotifyProperty('filters', filterValues, Object.values(filterValues));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-omnitable",
3
- "version": "13.14.0",
3
+ "version": "13.14.2",
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"