@neovici/cosmoz-omnitable 14.6.0 → 14.6.1

package/cosmoz-omnitable-skeleton.js

@@ -0,0 +1,70 @@
+import { html, css, component } from '@pionjs/pion';
+
+const styles = css`
+	:host {
+		max-width: 100%;
+		overflow-x: hidden;
+		padding: 0 12px;
+	}
+	.skeleton {
+		width: 100%;
+	}
+	.skeleton > div {
+		height: 17.5px;
+		display: flex;
+		padding: 11px 12px 11px 0;
+	}
+	.skeleton > div div:not(.handle) {
+		background-image: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);
+		background-size: 1000%;
+		background-position: right;
+		border-radius: 4px;
+		animation: sweep 1.5s cubic-bezier(0.3, 1, 0.3, 1) infinite;
+	}
+	.skeleton > div div:not(.checkbox):not(:last-of-type) {
+		margin-right: 7px;
+	}
+	.skeleton > div div.checkbox {
+		min-width: 18px;
+		margin-left: 0;
+		margin-right: 12px;
+	}
+	@keyframes sweep {
+		0% {
+			background-position: right;
+		}
+		100% {
+			background-position: left;
+		}
+	}
+`;
+
+const Skeleton = ({ settingsConfig }) => {
+	const { columns, collapsed } = settingsConfig,
+		showingColumns = columns.filter(
+			(column) => !collapsed.some((hidden) => hidden.name === column.name),
+		);
+
+	return html`<div class="skeleton">
+		${Array.from(
+			{ length: 5 },
+			() =>
+				html`<div>
+					<div class="checkbox"></div>
+					${showingColumns.map(
+						(col) =>
+							html`<div
+								class="cell"
+								part=${`cell-${col.name}`}
+								name=${col.name}
+							></div>`,
+					)}
+				</div>`,
+		)}
+	</div>`;
+};
+
+customElements.define(
+	'cosmoz-omnitable-skeleton',
+	component(Skeleton, { styleSheets: [styles] }),
+);

package/cosmoz-omnitable-styles.js

@@ -1,6 +1,7 @@
 /* eslint-disable max-lines */
 import { tagged as css } from '@neovici/cosmoz-utils';
-const checkbox = css`
+
+export const checkbox = css`
 	.checkbox {
 		box-sizing: border-box;
 		width: 18px;
@@ -80,8 +81,6 @@ const checkbox = css`
 	}
 `;
 
-export { checkbox };
-
 export default css`
 	:host {
 		display: flex;
@@ -101,6 +100,7 @@ export default css`
 		);
 		color: var(--primary-link-color-hover, var(--primary-link-color));
 	}
+
 	/* The wrapping div that contains the header, the table content and the footer */
 	.mainContainer {
 		background-color: var(--cosmoz-omnitable-bg-color, rgb(255, 255, 255));
@@ -237,7 +237,6 @@ export default css`
 	}
 
 	/* Empty data set styling */
-
 	.tableContent-empty {
 		position: absolute;
 		top: 0;
@@ -249,13 +248,11 @@ export default css`
 		justify-content: center;
 		color: #ccc;
 	}
-
 	.tableContent-empty.overlay {
 		background-color: rgba(255, 255, 255, 0.8);
 		color: #333;
 		z-index: 1;
 	}
-
 	.tableContent-empty iron-icon {
 		height: 96px;
 		min-height: 96px;
@@ -263,34 +260,23 @@ export default css`
 		min-width: 96px;
 		margin-right: 24px;
 	}
-
-	.tableContent-empty.overlay paper-spinner-lite {
-		height: 48px;
-		min-height: 48px;
-		width: 48px;
-		min-width: 48px;
-		margin-right: 24px;
-		--paper-spinner-color: #333;
-		--paper-spinner-stroke-width: 6px;
-	}
-
 	.tableContent-empty > div {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		padding-bottom: 24px;
 	}
-
 	.tableContent-empty.overlay > div {
 		padding-bottom: 0;
 	}
-
+	.tableContent-empty.overlay:has(cosmoz-omnitable-skeleton) {
+		align-items: flex-start;
+	}
 	.tableContent-empty div.tableContent-empty-message {
 		@apply --layout-vertical;
 		@apply --layout-center-justified;
 		padding-bottom: 24px;
 	}
-
 	.tableContent-empty.overlay div.tableContent-empty-message {
 		padding-bottom: 0;
 	}
@@ -299,7 +285,6 @@ export default css`
 		color: #ddd;
 		margin: 0;
 	}
-
 	.tableContent-empty h3 {
 		white-space: nowrap;
 		margin: 0px 0px 8px 0px;
@@ -368,10 +353,6 @@ export default css`
 		border-bottom: 1px solid var(--cosmoz-omnitable-border-color, #e1e2e5);
 	}
 
-	.groupRow.groupRow-folded {
-		/* Add here style rules for folded group rows */
-	}
-
 	.groupRow-label {
 		display: flex;
 		flex: auto;

package/cosmoz-omnitable.js

@@ -1,29 +1,27 @@
-/* eslint-disable max-lines-per-function */
-/* eslint-disable max-lines */
-import '@polymer/iron-icons/iron-icons';
+import '@neovici/cosmoz-bottom-bar';
 import '@polymer/iron-icon/iron-icon';
+import '@polymer/iron-icons/iron-icons';
 import '@polymer/paper-spinner/paper-spinner-lite';
 
-import '@neovici/cosmoz-bottom-bar';
-
 import './cosmoz-omnitable-column';
+import './cosmoz-omnitable-columns';
+import './cosmoz-omnitable-group-row';
 import './cosmoz-omnitable-header-row';
-import './cosmoz-omnitable-item-row';
 import './cosmoz-omnitable-item-expand';
-import './cosmoz-omnitable-group-row';
-import './cosmoz-omnitable-columns';
-import styles from './cosmoz-omnitable-styles';
+import './cosmoz-omnitable-item-row';
 
+import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
+import { component } from '@pionjs/pion';
 import { html as polymerHtml } from '@polymer/polymer/lib/utils/html-tag';
 import { html } from 'lit-html';
 import { guard } from 'lit-html/directives/guard.js';
-import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 
-import { useOmnitable } from './lib/use-omnitable';
-import { component } from '@pionjs/pion';
-import { renderHeader } from './lib/render-header';
+import styles from './cosmoz-omnitable-styles';
 import { renderFooter } from './lib/render-footer';
+import { renderHeader } from './lib/render-header';
 import { renderList } from './lib/render-list';
+import { useOmnitable } from './lib/use-omnitable';
+
 import './grouped-list/index.js';
 
 const shimCSS = (s) => window.ShadyCSS?.ApplyShim?.transformCssText?.(s) || s;
@@ -38,7 +36,9 @@ const Omnitable = (host) => {
 
 		<div class="mainContainer">
 			${renderHeader(header)}
-			<div class="tableContent" id="tableContent">${renderList(list)}</div>
+			<div class="tableContent" id="tableContent">
+				${renderList(header, list)}
+			</div>
 			${renderFooter(footer)}
 		</div>
 

package/lib/compute-layout.js

@@ -2,29 +2,36 @@ import { layout } from './layout';
 
 const _toCss = (layout, config) => {
 	const lastVisibleIndex = layout.findLastIndex(
-		(width) => width != null && width > 0,
-	);
+			(width) => width != null && width > 0,
+		),
+		generateCellCSS = (itemName, width) =>
+			`.cell[name="${itemName}"], cosmoz-omnitable-skeleton::part(cell-${itemName}){width: ${Math.floor(
+				width,
+			)}px;padding: 0 min(3px, ${width / 2}px)}`,
+		hideResizeNub = (itemName) =>
+			`cosmoz-omnitable-resize-nub[name="${itemName}"]{display:none}`,
+		hideColumn = (itemName) =>
+			`cosmoz-omnitable-resize-nub[name="${itemName}"], .cell[name="${itemName}"]{display:none}`;
 
 	return config
 		.map((item, index) => {
 			const width = layout[index];
+
 			// Hidden columns
 			if (width == null || width === 0) {
-				return `cosmoz-omnitable-resize-nub[name="${item.name}"], .cell[name="${item.name}"]{display:none}`;
+				return hideColumn(item.name);
 			}
 
-			// Last visible column, show the cell but hide its resize nub
+			// All visible columns
+			const cellCSS = generateCellCSS(item.name, width);
+
+			// Last visible column, show cell but hide its resize nub
 			if (index === lastVisibleIndex) {
-				return `.cell[name="${item.name}"]{width: ${Math.floor(
-					width,
-				)}px;padding: 0 min(3px, ${width / 2}px)}
-							cosmoz-omnitable-resize-nub[name="${item.name}"]{display:none}`;
+				return `${cellCSS}\n${hideResizeNub(item.name)}`;
 			}
 
-			// Other visible columns
-			return `.cell[name="${item.name}"]{width: ${Math.floor(
-				width,
-			)}px;padding: 0 min(3px, ${width / 2}px)}`;
+			// Other visible columns just show the cell
+			return cellCSS;
 		})
 		.join('\n');
 };

package/lib/render-header.js

@@ -2,8 +2,8 @@ import { html } from 'lit-html';
 import { when } from 'lit-html/directives/when.js';
 
 export const renderHeader = ({
-    allSelected,
-    onAllCheckboxChange,
+	allSelected,
+	onAllCheckboxChange,
 	sortAndGroup,
 	dataIsValid,
 	data,
@@ -12,28 +12,29 @@ export const renderHeader = ({
 	groupOnColumn,
 	setFilterState,
 	settingsConfig,
-	hideSelectAll
-}) => {
-	return html` <sort-and-group-provider .value=${sortAndGroup}>
+	hideSelectAll,
+}) =>
+	html`<sort-and-group-provider .value=${sortAndGroup}>
 		<div class="header" id="header">
 			${when(
 				!hideSelectAll,
-				() => html`<input
-					class="checkbox all"
-					type="checkbox"
-					.checked=${allSelected}
-					@input=${onAllCheckboxChange}
-					?disabled=${!dataIsValid}
-					part="all"
-				/>`
+				() =>
+					html`<input
+						class="checkbox all"
+						type="checkbox"
+						.checked=${allSelected}
+						@input=${onAllCheckboxChange}
+						?disabled=${!dataIsValid}
+						part="all"
+					/>`,
 			)}
 			${when(
 				hideSelectAll,
-				() => html`
-					<cosmoz-omnitable-settings
+				() =>
+					html` <cosmoz-omnitable-settings
 						.newLayout="${true}"
 						.config=${settingsConfig}
-					></cosmoz-omnitable-settings>`
+					></cosmoz-omnitable-settings>`,
 			)}
 
 			<cosmoz-omnitable-header-row
@@ -47,4 +48,3 @@ export const renderHeader = ({
 			></cosmoz-omnitable-header-row>
 		</div>
 	</sort-and-group-provider>`;
-};

package/lib/render-list.js

@@ -1,24 +1,28 @@
-/* eslint-disable max-lines-per-function */
+import '../cosmoz-omnitable-skeleton.js';
+
 import { _ } from '@neovici/cosmoz-i18next';
 import { html } from 'lit-html';
 import { when } from 'lit-html/directives/when.js';
 
-export const renderList = ({
-	processedItems,
-	dataIsValid,
-	filterIsTooStrict,
-	loading,
-	displayEmptyGroups,
-	compareItemsFn,
-	setSelectedItems,
-	renderItem,
-	renderGroup,
-	error,
-}) => {
-	return html` ${when(
-			!dataIsValid && !error,
+export const renderList = (header, list) => {
+	const { settingsConfig } = header,
+		{
+			processedItems,
+			dataIsValid,
+			filterIsTooStrict,
+			loading,
+			displayEmptyGroups,
+			compareItemsFn,
+			setSelectedItems,
+			renderItem,
+			renderGroup,
+			error,
+		} = list;
+
+	return html`${when(
+			!loading && !dataIsValid && !error,
 			() =>
-				html` <div class="tableContent-empty">
+				html`<div class="tableContent-empty">
 					<slot name="empty-set-message">
 						<iron-icon icon="icons:announcement"></iron-icon>
 						<div class="tableContent-empty-message">
@@ -31,7 +35,7 @@ export const renderList = ({
 		${when(
 			filterIsTooStrict,
 			() =>
-				html` <div class="tableContent-empty">
+				html`<div class="tableContent-empty">
 					<iron-icon icon="icons:announcement"></iron-icon>
 					<div>
 						<h3>${_('Filter too strict')}</h3>
@@ -42,17 +46,16 @@ export const renderList = ({
 		${when(
 			loading,
 			() =>
-				html` <div class="tableContent-empty overlay">
-					<paper-spinner-lite active></paper-spinner-lite>
-					<div>
-						<h3>${_('Data set is updating')}</h3>
-					</div>
+				html`<div class="tableContent-empty overlay">
+					<cosmoz-omnitable-skeleton
+						.settingsConfig=${settingsConfig}
+					></cosmoz-omnitable-skeleton>
 				</div>`,
 		)}
 		${when(
 			error,
 			() =>
-				html` <div class="tableContent-empty overlay">
+				html`<div class="tableContent-empty overlay">
 					<iron-icon icon="icons:error"></iron-icon>
 					<div class="tableContent-empty-message">
 						<h3>${_('Error loading data')}</h3>
@@ -63,15 +66,15 @@ export const renderList = ({
 		<div class="tableContent-scroller" id="scroller" part="scroller">
 			<cosmoz-grouped-list
 				id="groupedList"
-				.data="${processedItems}"
-				@selected-items-changed="${(event) =>
-					setSelectedItems(event.detail.value)}"
-				.displayEmptyGroups="${
+				.data=${processedItems}
+				@selected-items-changed=${(event) =>
+					setSelectedItems(event.detail.value)}
+				.displayEmptyGroups=${
 					displayEmptyGroups /* TODO: check if still works */
-				}"
-				.compareItemsFn="${compareItemsFn}"
-				.renderItem="${renderItem}"
-				.renderGroup="${renderGroup}"
+				}
+				.compareItemsFn=${compareItemsFn}
+				.renderItem=${renderItem}
+				.renderGroup=${renderGroup}
 			></cosmoz-grouped-list>
 			<slot name="extraContent"></slot>
 		</div>`;

package/lib/use-header.js

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines-per-function */
 import { useEffect, useMemo } from '@pionjs/pion';
 
 export const useHeader = ({
@@ -31,9 +30,9 @@ export const useHeader = ({
 					...settings.columns.filter((s) => s.disabled),
 				].some(
 					(column) =>
-						column && Object.keys(filterFunctions).includes(column.name)
+						column && Object.keys(filterFunctions).includes(column.name),
 				),
-			[filterFunctions, settings, collapsedColumns]
+			[filterFunctions, settings, collapsedColumns],
 		),
 		settingsConfig = useMemo(
 			() => ({
@@ -42,7 +41,7 @@ export const useHeader = ({
 				badge: hasHiddenFilter,
 				filters,
 			}),
-			[settingS, collapsedColumns, hasHiddenFilter, filters]
+			[settingS, collapsedColumns, hasHiddenFilter, filters],
 		);
 
 	useEffect(() => {
@@ -51,9 +50,9 @@ export const useHeader = ({
 				requestAnimationFrame(() => {
 					host.style.setProperty(
 						'--ot-height',
-						entries[0]?.contentRect.height + 'px'
+						entries[0]?.contentRect.height + 'px',
 					);
-				})
+				}),
 			);
 		observer.observe(el);
 		return () => observer.unobserve(el);

package/lib/use-list.js

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines-per-function */
 import { html, useCallback, useEffect, useMemo, useRef } from '@pionjs/pion';
 import { when } from 'lit-html/directives/when.js';
 import { isEmpty } from '@neovici/cosmoz-utils/template';

package/lib/use-omnitable.js

@@ -1,12 +1,12 @@
 import { useState } from '@pionjs/pion';
-import { useProcessedItems } from './use-processed-items';
-import { useFastLayout } from './use-fast-layout';
 import { useSettings } from './settings';
-import { useSortAndGroupOptions } from './use-sort-and-group-options';
-import { usePublicInterface } from './use-public-interface';
+import { useFastLayout } from './use-fast-layout';
+import { useFooter } from './use-footer';
 import { useHeader } from './use-header';
 import { useList } from './use-list';
-import { useFooter } from './use-footer';
+import { useProcessedItems } from './use-processed-items';
+import { usePublicInterface } from './use-public-interface';
+import { useSortAndGroupOptions } from './use-sort-and-group-options';
 
 export const useOmnitable = (host) => {
 	const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-omnitable",
-  "version": "14.6.0",
+  "version": "14.6.1",
   "description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
   "keywords": [
     "web-components"