+const ItemExpandLine = ({ column }) => html`
+
+ ${column.title}
+
+
`;
-customElements.define('cosmoz-omnitable-item-expand-line', component(OmnitableItemExpandLine));
+customElements.define(
+ 'cosmoz-omnitable-item-expand-line',
+ component(ItemExpandLine, {styleSheets: [sheet(style)]}),
+);
diff --git a/cosmoz-omnitable-item-expand.js b/cosmoz-omnitable-item-expand.js
index 3f7761e8..d4d6498c 100644
--- a/cosmoz-omnitable-item-expand.js
+++ b/cosmoz-omnitable-item-expand.js
@@ -1,48 +1,28 @@
-/* eslint-disable object-curly-newline */
-import { component, useEffect } from '@pionjs/pion';
-import { html, nothing } from 'lit-html';
+import { component } from '@pionjs/pion';
+import { html } from 'lit-html';
+import { map } from 'lit-html/directives/map.js';
import './cosmoz-omnitable-item-expand-line';
-const renderExpandList = ({
+const ItemExpand = ({ columns, item, selected, expanded, groupOnColumn }) => {
+ return map(
columns,
- item,
- selected,
- expanded,
- groupOnColumn,
- }) =>
- columns.map(
- (column) => html`
+ html`${column.renderCell(column, {
item,
selected,
expanded,
})}`
- ),
- ExpandList = (host) => {
- const { columns } = host;
-
- useEffect(() => {
- if (columns?.length > 0) {
- return;
- }
-
- host.setAttribute('hidden', '');
- return () => host.removeAttribute('hidden');
- }, [columns?.length]);
-
- return Array.isArray(columns) && columns.length > 0 && host.expanded
- ? renderExpandList(host)
- : nothing;
- };
+ >`,
+ );
+};
customElements.define(
'cosmoz-omnitable-item-expand',
- component(ExpandList, {
+ component(ItemExpand, {
useShadowDOM: false,
- observedAttributes: ['expanded'],
- })
+ }),
);
diff --git a/cosmoz-omnitable-item-row.js b/cosmoz-omnitable-item-row.js
index 659895d7..d2663c67 100644
--- a/cosmoz-omnitable-item-row.js
+++ b/cosmoz-omnitable-item-row.js
@@ -1,20 +1,37 @@
import { component, html } from '@pionjs/pion';
import { repeat } from 'lit-html/directives/repeat.js';
-const
- renderCell = (column, data, onItemChange) => column.editable
+const renderCell = (column, data, onItemChange) =>
+ column.editable
? column.renderEditCell(column, data, onItemChange(column, data.item))
- : column.renderCell(column, data),
- ItemRow = ({ columns, groupOnColumn, item, index, selected, expanded, onItemChange }) => {
- return repeat(columns, column => column.name, column => {
+ : column.renderCell(column, data);
+
+const ItemRow = ({
+ columns,
+ groupOnColumn,
+ item,
+ index,
+ selected,
+ expanded,
+ onItemChange,
+}) =>
+ repeat(
+ columns,
+ (column) => column.name,
+ (column) => {
return html`${ renderCell(column, { item, index, selected, expanded }, onItemChange) }
`;
- });
- };
+ class="cell itemRow-cell ${column.cellClass ?? ''}"
+ ?hidden="${column === groupOnColumn}"
+ ?editable="${column.editable}"
+ title="${column.cellTitleFn(column, item)}"
+ name="${column.name}"
+ >
+ ${renderCell(column, { item, index, selected, expanded }, onItemChange)}
+
-
+ (item, index, { selected, expanded, toggleCollapse }) => html`
+
`;
+ ${renderMinis(item)(miniColumns)}
+
+
+
+ `;
const renderGroup =
({ onCheckboxChange, dataIsValid, groupOnColumn }) =>
@@ -125,6 +143,7 @@ export const useList = ({
processedItems,
columns,
collapsedColumns,
+ miniColumns,
sortAndGroupOptions,
rowPartFn,
...rest
@@ -204,6 +223,7 @@ export const useList = ({
renderItem({
columns,
collapsedColumns,
+ miniColumns,
onItemClick,
onCheckboxChange,
dataIsValid,
diff --git a/lib/use-mini.js b/lib/use-mini.js
new file mode 100644
index 00000000..f4b159e9
--- /dev/null
+++ b/lib/use-mini.js
@@ -0,0 +1,28 @@
+import { useMemo, useEffect } from '@pionjs/pion';
+
+export const useMini = ({ host, canvasWidth, columns: _columns }) => {
+ const breakpoint = host.miniBreakpoint ?? 480;
+ const isMiniSize = useMemo(
+ () => canvasWidth <= breakpoint,
+ [canvasWidth, breakpoint],
+ );
+ const columns = useMemo(
+ () =>
+ isMiniSize
+ ? _columns
+ ?.filter((c) => c.mini !== null)
+ .sort((a, b) => (a.mini ?? 0) - (b.mini ?? 0))
+ : [],
+ [_columns, isMiniSize],
+ );
+ const [miniColumn, ...miniColumns] = columns ?? [];
+
+ useEffect(() => {
+ host.toggleAttribute('mini', !!miniColumn);
+ }, [miniColumn]);
+
+ return {
+ miniColumn,
+ miniColumns,
+ };
+};
diff --git a/lib/use-omnitable.js b/lib/use-omnitable.js
index 1b70d58c..64088bb9 100644
--- a/lib/use-omnitable.js
+++ b/lib/use-omnitable.js
@@ -19,7 +19,7 @@ export const useOmnitable = (host) => {
noLocalSort = noLocal,
noLocalFilter = noLocal,
error,
- rowPartFn
+ rowPartFn,
} = host,
settingS = useSettings({ settingsId, host }),
{ settings, setSettings, columns, resetRef } = settingS,
@@ -28,7 +28,7 @@ export const useOmnitable = (host) => {
hashParam,
settings,
setSettings,
- resetRef
+ resetRef,
),
// TODO: drop filterFunctions
{ processedItems, visibleData, filters, setFilterState, filterFunctions } =
@@ -40,7 +40,7 @@ export const useOmnitable = (host) => {
noLocalSort,
noLocalFilter,
}),
- { collapsedColumns } = useFastLayout({
+ { collapsedColumns, miniColumns } = useFastLayout({
host,
columns,
settings,
@@ -86,8 +86,9 @@ export const useOmnitable = (host) => {
setSelectedItems,
columns,
collapsedColumns,
+ miniColumns,
sortAndGroupOptions,
- rowPartFn
+ rowPartFn,
}),
footer: useFooter({
host,
diff --git a/lib/use-resizable-columns.js b/lib/use-resizable-columns.js
index b882ca3b..bb7b3f36 100644
--- a/lib/use-resizable-columns.js
+++ b/lib/use-resizable-columns.js
@@ -18,7 +18,7 @@ export const useResizableColumns = ({
newConfig = [],
maxPriority = config.reduce(
(p, c) => Math.max(p, c.priority),
- -Infinity
+ -Infinity,
);
for (let i = 0; i < layout.length; i++) {
@@ -45,7 +45,7 @@ export const useResizableColumns = ({
newConfig[i].width = Math.min(
maxNewSize,
- Math.max(newWidth, config[i].minWidth)
+ Math.max(newWidth, config[i].minWidth),
);
newConfig[i].flex = 0;
newConfig[i].priority = maxPriority;
diff --git a/lib/use-track-size.js b/lib/use-track-size.js
index 7603406b..8e22264e 100644
--- a/lib/use-track-size.js
+++ b/lib/use-track-size.js
@@ -10,10 +10,10 @@ export const useTrackSize = (host, setCanvasWidth) =>
requestAnimationFrame(() =>
setCanvasWidth(
entry.contentRect?.width -
- 20 /* scrollbar width */ -
- 44 /* checkbox width */ -
- 24 /* expand button width */
- )
+ 20 /* scrollbar width */ -
+ 44 /* checkbox width */ -
+ 24 /* expand button width */,
+ ),
);
},
observer = new ResizeObserver(onResize);
@@ -21,4 +21,3 @@ export const useTrackSize = (host, setCanvasWidth) =>
observer.observe(host);
return () => observer.unobserve(host);
}, []);
-