@neovici/cosmoz-omnitable 12.17.0 → 12.18.0

package/cosmoz-omnitable-column-autocomplete.js

@@ -2,67 +2,102 @@ import '@polymer/paper-spinner/paper-spinner-lite.js';
 import '@neovici/cosmoz-autocomplete';
 
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-import {
-	html, nothing
-} from 'lit-html';
+import { html } from 'lit-html';
+import { when } from 'lit-html/directives/when.js';
 
 import { columnMixin, getString } from './cosmoz-omnitable-column-mixin.js';
-import { computeSource, listColumnMixin, onChange, onFocus, onText, toAutocompleteSource } from './cosmoz-omnitable-column-list-mixin';
 import {
-	prop, strProp, array
-} from '@neovici/cosmoz-autocomplete/lib/utils';
+	computeSource,
+	listColumnMixin,
+	onChange,
+	onFocus,
+	onText,
+	toAutocompleteSource,
+} from './cosmoz-omnitable-column-list-mixin';
+import { prop, strProp, array } from '@neovici/cosmoz-autocomplete/lib/utils';
 import { columnSymbol } from './lib/use-dom-columns';
 import { get } from '@polymer/polymer/lib/utils/path';
 
-export const
-	getComparableValue = ({ valuePath, textProperty, valueProperty }, item) => {
-		const property = textProperty ? strProp(textProperty) : prop(valueProperty),
-			values = array(valuePath && get(item, valuePath)).map(property);
-		return values.length > 1 ? values.filter(Boolean).join(',') : values[0];
-	};
+export const getComparableValue = (
+	{ valuePath, textProperty, valueProperty },
+	item
+) => {
+	const property = textProperty ? strProp(textProperty) : prop(valueProperty),
+		values = array(valuePath && get(item, valuePath)).map(property);
+	return values.length > 1 ? values.filter(Boolean).join(',') : values[0];
+};
 
 /**
  * @polymer
  * @customElement
  * @appliesMixin columnMixin
  */
-class OmnitableColumnAutocomplete extends listColumnMixin(columnMixin(PolymerElement)) {
+class OmnitableColumnAutocomplete extends listColumnMixin(
+	columnMixin(PolymerElement)
+) {
 	static get properties() {
 		return {
 			headerCellClass: { type: String, value: 'autocomplete-header-cell' },
 			minWidth: { type: String, value: '55px' },
-			editMinWidth: { type: String, value: '55px' }
+			editMinWidth: { type: String, value: '55px' },
+			keepOpened: { type: Boolean },
+			textual: { type: Function },
+		};
+	}
+
+	getConfig(column) {
+		return {
+			...super.getConfig?.(column),
+			keepOpened: column.keepOpened,
+			textual: column.textual,
 		};
 	}
 
 	renderCell(column, { item }) {
-		return html`<span class="default-column">${ column.getString(column, item) }</span>`;
+		return html`<span class="default-column"
+			>${column.getString(column, item)}</span
+		>`;
 	}
 
 	renderEditCell(column, { item }, onItemChange) {
-		const onChange = event => onItemChange(event.target.value);
-		return html`<paper-input no-label-float type="text" @change=${ onChange } .value=${ getString(column, item) }></paper-input>`;
+		const onChange = (event) => onItemChange(event.target.value);
+		return html`<paper-input
+			no-label-float
+			type="text"
+			@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;
-
 		return html`<cosmoz-autocomplete-ui
-			class="external-values-${ column.externalValues }"
-			.label=${ column.title }
-			.source=${ toAutocompleteSource(source, column.valueProperty, column.textProperty) }
-			.textProperty=${ column.textProperty }
-			.valueProperty=${ column.valueProperty }
+			class="external-values-${column.externalValues}"
+			?keep-opened=${column.keepOpened}
+			.textual=${column.textual}
+			.label=${column.title}
+			.source=${toAutocompleteSource(
+				source,
+				column.valueProperty,
+				column.textProperty
+			)}
+			.textProperty=${column.textProperty}
+			.valueProperty=${column.valueProperty}
 			.itemRenderer=${column[columnSymbol]?.itemRenderer}
-			.value=${ filter }
-			.text=${ query }
-			.onChange=${ onChange(setState) }
-			.onFocus=${ onFocus(setState) }
-			.onText=${ onText(setState) }
-		>${ spinner }</cosmoz-autocomplete-ui>`;
+			.value=${filter}
+			.text=${query}
+			.onChange=${onChange(setState)}
+			.onFocus=${onFocus(setState)}
+			.onText=${onText(setState)}
+			>${when(
+				column.loading,
+				() => html`<paper-spinner-lite
+					style="width: 20px; height: 20px; flex:none;"
+					suffix
+					slot="suffix"
+					active
+				></paper-spinner-lite>`
+			)}</cosmoz-autocomplete-ui
+		>`;
 	}
 
 	getComparableValue(column, item) {
@@ -74,6 +109,8 @@ class OmnitableColumnAutocomplete extends listColumnMixin(columnMixin(PolymerEle
 			? column.values
 			: computeSource(column, data);
 	}
-
 }
-customElements.define('cosmoz-omnitable-column-autocomplete', OmnitableColumnAutocomplete);
+customElements.define(
+	'cosmoz-omnitable-column-autocomplete',
+	OmnitableColumnAutocomplete
+);

package/cosmoz-omnitable-column-list.js

@@ -25,8 +25,20 @@ import { columnSymbol } from './lib/use-dom-columns';
  */
 class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) {
 	static get properties() {
-		return { keepOpened: { type: Boolean } };
+		return {
+			keepOpened: { type: Boolean },
+			textual: { type: Function },
+		};
+	}
+
+	getConfig(column) {
+		return {
+			...super.getConfig?.(column),
+			keepOpened: column.keepOpened,
+			textual: column.textual,
+		};
 	}
+
 	renderCell({ valuePath, textProperty }, { item, index }) {
 		return html`<cosmoz-omnitable-column-list-data
 			.items=${getTexts(item, valuePath, textProperty)}
@@ -46,18 +58,12 @@ class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) {
 		></paper-input>`;
 	}
 
-	getConfig(column) {
-		return {
-			...super.getConfig?.(column),
-			keepOpened: column.keepOpened,
-		};
-	}
-
 	renderHeader(column, { filter, query }, setState, source) {
 		return html`<cosmoz-autocomplete-ui
 			class="external-values-${column.externalValues}"
-			.column=${column}
 			?keep-opened=${column.keepOpened}
+			.textual=${column.textual}
+			.column=${column}
 			.label=${column.title}
 			.source=${source}
 			.textProperty=${column.textProperty}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "12.17.0",
+	"version": "12.18.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -94,9 +94,8 @@
 		"@polymer/paper-toggle-button": "^3.0.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
-		"@web/dev-server": "^0.1.10",
 		"husky": "^8.0.0",
-		"semantic-release": "^20.0.0",
+		"semantic-release": "^21.0.0",
 		"sinon": "^15.0.0",
 		"web-animations-js": "^2.3.0"
 	}