@neovici/cosmoz-omnitable 8.14.1 → 9.0.0

package/cosmoz-omnitable-column-list-data.js

@@ -67,9 +67,6 @@ class OmnitableColumnListData extends translatable(mixin(Template, PolymerElemen
 		return {
 			items: {
 				type: Array,
-				observer() {
-					this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
-				}
 			},
 
 			_expanded: {
@@ -84,6 +81,14 @@ class OmnitableColumnListData extends translatable(mixin(Template, PolymerElemen
 		};
 	}
 
+	static get observers() {
+		return ['_itemsLengthChanged(items.length)']
+	}
+
+	_itemsLengthChanged() {
+		requestAnimationFrame(() => this.dispatchEvent(new CustomEvent('expand', { bubbles: true })));
+	}
+
 	_firstItem(items) {
 		if (items !== undefined && items !== null && items.length > 0) {
 			return items[0];
@@ -122,7 +127,7 @@ class OmnitableColumnListData extends translatable(mixin(Template, PolymerElemen
 		this._expanded = !this._expanded;
 		event.stopPropagation();
 		event.preventDefault();
-		this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
+		this.dispatchEvent(new CustomEvent('expand', { bubbles: true }));
 	}
 }
 

package/cosmoz-omnitable-column-list.js

@@ -1,13 +1,19 @@
 import './cosmoz-omnitable-column-list-data';
 
 import { PolymerElement } from '@polymer/polymer/polymer-element';
-import {
-	html, nothing
-} from 'lit-html';
+import { html, nothing } from 'lit-html';
 
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
-import { getString, getTexts, listColumnMixin, onChange, onFocus, onText } from './cosmoz-omnitable-column-list-mixin';
+import {
+	getString,
+	getTexts,
+	listColumnMixin,
+	onChange,
+	onFocus,
+	onText,
+} from './cosmoz-omnitable-column-list-mixin';
 import '@neovici/cosmoz-autocomplete';
+import { notifyResize } from './lib/utils';
 
 /**
  * @polymer
@@ -16,41 +22,48 @@ import '@neovici/cosmoz-autocomplete';
  * @appliesMixin columnMixin
  */
 class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) {
-	renderCell({ valuePath, textProperty }, { item }) {
+	renderCell({ valuePath, textProperty }, { item, index }) {
 		return html`<cosmoz-omnitable-column-list-data
-			.items=${ getTexts(item, valuePath, textProperty) }
+			.items=${getTexts(item, valuePath, textProperty)}
+			@expand=${(event) => notifyResize(event.target, index)}
 		></cosmoz-omnitable-column-list-data>`;
 	}
 
 	renderEditCell(column, { item }, onItemChange) {
-		const onChange = event => onItemChange(event.target.value.split(/,\s*/gu));
+		const onChange = (event) =>
+			onItemChange(event.target.value.split(/,\s*/gu));
 
 		return html`<paper-input
 			no-label-float
 			type="text"
-			@change=${ onChange }
-			.value=${ getString(column, item) }
+			@change=${onChange}
+			.value=${getString(column, item)}
 		></paper-input>`;
 	}
 
 	renderHeader(column, { filter, query }, setState, source) {
-		const
-			spinner = column.loading
-				? html`<paper-spinner-lite style="width: 20px; height: 20px; flex:none;" suffix slot="suffix" active></paper-spinner-lite>`
-				: nothing;
+		const spinner = column.loading
+			? html`<paper-spinner-lite
+					style="width: 20px; height: 20px; flex:none;"
+					suffix
+					slot="suffix"
+					active
+			  ></paper-spinner-lite>`
+			: nothing;
 
 		return html`<cosmoz-autocomplete-ui
-			class="external-values-${ column.externalValues }"
-			.label=${ column.title }
-			.source=${ source }
-			.textProperty=${ column.textProperty }
-			.valueProperty=${ column.valueProperty }
-			.value=${ filter }
-			.text=${ query }
-			.onChange=${ onChange(setState) }
-			.onFocus=${ onFocus(setState) }
-			.onText=${ onText(setState) }
-		>${ spinner }</cosmoz-autocomplete-ui>`;
+			class="external-values-${column.externalValues}"
+			.label=${column.title}
+			.source=${source}
+			.textProperty=${column.textProperty}
+			.valueProperty=${column.valueProperty}
+			.value=${filter}
+			.text=${query}
+			.onChange=${onChange(setState)}
+			.onFocus=${onFocus(setState)}
+			.onText=${onText(setState)}
+			>${spinner}</cosmoz-autocomplete-ui
+		>`;
 	}
 }
 

package/cosmoz-omnitable-item-expand.js

@@ -1,37 +1,54 @@
 /* eslint-disable object-curly-newline */
 import { component, useEffect } from 'haunted';
-import {
-	html, nothing
-} from 'lit-html';
+import { html, nothing } from 'lit-html';
 import './cosmoz-omnitable-item-expand-line';
+import { notifyResize } from './lib/utils';
 
-const
-	renderExpandList = ({ columns, item, selected, expanded, groupOnColumn }) =>
-		columns.map(column => html`<cosmoz-omnitable-item-expand-line
-			.column=${ column }
-			?hidden=${ column === groupOnColumn }
-			exportparts="item-expand-label,item-expand-value"
-		>${ column.renderCell(column, { item, selected, expanded }) }</cosmoz-omnitable-item-expand-line>`),
+const renderExpandList = ({
+		columns,
+		item,
+		selected,
+		expanded,
+		groupOnColumn,
+	}) =>
+		columns.map(
+			(column) => html`<cosmoz-omnitable-item-expand-line
+				.column=${column}
+				?hidden=${column === groupOnColumn}
+				exportparts="item-expand-label,item-expand-value"
+				>${column.renderCell(column, {
+					item,
+					selected,
+					expanded,
+				})}</cosmoz-omnitable-item-expand-line
+			>`
+		),
+	ExpandList = (host) => {
+		const { expanded, index, columns } = host;
 
-	ExpandList = host => {
 		useEffect(() => {
-			if (host.columns?.length > 0) {
+			if (columns?.length > 0) {
 				return;
 			}
 
 			host.setAttribute('hidden', '');
 			return () => host.removeAttribute('hidden');
-		}, [host.columns?.length]);
+		}, [columns?.length]);
 
-		useEffect(() => {
-			if (host.expanded === true) {
-				host.dispatchEvent(new CustomEvent('expanded'));
-			}
-		}, [host.columns, host.expanded]);
+		useEffect(
+			() => expanded && requestAnimationFrame(() => notifyResize(host, index)),
+			[expanded]
+		);
 
-		return Array.isArray(host.columns) && host.columns.length > 0 && host.expanded
+		return Array.isArray(columns) && columns.length > 0 && host.expanded
 			? renderExpandList(host)
 			: nothing;
 	};
 
-customElements.define('cosmoz-omnitable-item-expand', component(ExpandList, { useShadowDOM: false, observedAttributes: ['expanded']}));
+customElements.define(
+	'cosmoz-omnitable-item-expand',
+	component(ExpandList, {
+		useShadowDOM: false,
+		observedAttributes: ['expanded'],
+	})
+);

package/cosmoz-omnitable-item-row.js

@@ -5,7 +5,7 @@ const
 	renderCell = (column, data, onItemChange) => column.editable
 		? column.renderEditCell(column, data, onItemChange(column, data.item))
 		: column.renderCell(column, data),
-	ItemRow = ({ columns, groupOnColumn, item, selected, expanded, onItemChange }) => {
+	ItemRow = ({ columns, groupOnColumn, item, index, selected, expanded, onItemChange }) => {
 		return repeat(columns, column => column.name, column => {
 			return html`<div
 				class="cell itemRow-cell ${ column.cellClass ?? '' }"
@@ -13,7 +13,7 @@ const
 				?editable=${ column.editable }
 				title=${ column.cellTitleFn(column, item) }
 				name=${ column.name }
-			>${ renderCell(column, { item, selected, expanded }, onItemChange) }</div>`;
+			>${ renderCell(column, { item, index, selected, expanded }, onItemChange) }</div>`;
 		});
 	};
 

package/cosmoz-omnitable-styles.js

@@ -273,11 +273,12 @@ export default `<style>
 		flex: auto;
 		position: relative;
 		overflow: auto;
+		overflow-x: hidden;
 		will-change: transform;
 	}
 
 	#groupedList {
-		position: absolute;
+		position: absolute !important;
 		top: 0;
 		right: 0;
 		bottom: 0;