diff --git a/cosmoz-omnitable-column-amount.js b/cosmoz-omnitable-column-amount.js index 8745676e..70ea9257 100644 --- a/cosmoz-omnitable-column-amount.js +++ b/cosmoz-omnitable-column-amount.js @@ -1,5 +1,5 @@ /* eslint-disable no-return-assign */ -import '@polymer/paper-input/paper-input'; +import '@neovici/cosmoz-input'; import '@polymer/paper-dropdown-menu/paper-dropdown-menu'; import './ui-helpers/cosmoz-clear-button'; @@ -9,7 +9,16 @@ import { html } from 'lit-html'; import { columnMixin } from './cosmoz-omnitable-column-mixin'; import { defaultComputeSource } from './lib/utils-data'; import './lib/cosmoz-omnitable-amount-range-input'; -import { getComparableValue, getCurrency, applySingleFilter, getString, getInputString, toAmount, toHashString, fromHashString } from './lib/utils-amount'; +import { + getComparableValue, + getCurrency, + applySingleFilter, + getString, + getInputString, + toAmount, + toHashString, + fromHashString, +} from './lib/utils-amount'; import { get } from '@polymer/polymer/lib/utils/path'; /** @@ -29,13 +38,12 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) { rates: { type: Object, notify: true }, width: { type: String, value: '70px' }, cellClass: { type: String, value: 'amount-cell align-right' }, - headerCellClass: { type: String, value: 'amount-header-cell' } + headerCellClass: { type: String, value: 'amount-header-cell' }, }; } getFilterFn(column, filter) { - const - min = getComparableValue({ ...column, valuePath: 'min' }, filter), + const min = getComparableValue({ ...column, valuePath: 'min' }, filter), max = getComparableValue({ ...column, valuePath: 'max' }, filter); if (min == null && max == null) { @@ -64,8 +72,7 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) { if (filter == null) { return; } - const - min = toAmount(rates, filter.min), + const min = toAmount(rates, filter.min), max = toAmount(rates, filter.max); if (min == null && max == null) { @@ -86,51 +93,52 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) { return { min: fromHashString(matches[1]), - max: fromHashString(matches[2]) + max: fromHashString(matches[2]), }; } renderCell(column, { item }) { - return html`${ column.getString(column, item) }`; + return html`${column.getString(column, item)}`; } renderEditCell(column, { item }, onItemChange) { - const onChange = event => onItemChange({ - amount: event.target.value, - currency: get(item, column.valuePath)?.currency - }); - - return html` -
${ getCurrency(column, item) }
- `; + const onChange = (event) => + onItemChange({ + amount: event.target.value, + currency: get(item, column.valuePath)?.currency, + }); + + return html` +
${getCurrency(column, item)}
+ `; } renderHeader( - { title, - min, - max, - locale, - rates, - currency, - autoupdate, - autodetect }, + { title, min, max, locale, rates, currency, autoupdate, autodetect }, { filter }, setState, - source + source, ) { return html` setState(state => ({ ...state, filter: value })) } - @header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) } + .title=${title} + .filter=${filter} + .values=${source} + .rates=${rates} + .min=${min} + .max=${max} + .locale=${locale} + .currency=${currency} + .autoupdate=${autoupdate} + .autodetect=${autodetect} + @filter-changed=${({ detail: { value } }) => + setState((state) => ({ ...state, filter: value }))} + @header-focused-changed=${({ detail: { value } }) => + setState((state) => ({ ...state, headerFocused: value }))} >`; } diff --git a/cosmoz-omnitable-column-autocomplete.js b/cosmoz-omnitable-column-autocomplete.js index b8433203..bbc3c3d7 100644 --- a/cosmoz-omnitable-column-autocomplete.js +++ b/cosmoz-omnitable-column-autocomplete.js @@ -20,7 +20,7 @@ import { get } from '@polymer/polymer/lib/utils/path'; export const getComparableValue = ( { valuePath, textProperty, valueProperty }, - item + item, ) => { const property = textProperty ? strProp(textProperty) : prop(valueProperty), values = array(valuePath && get(item, valuePath)).map(property); @@ -33,7 +33,7 @@ export const getComparableValue = ( * @appliesMixin columnMixin */ class OmnitableColumnAutocomplete extends listColumnMixin( - columnMixin(PolymerElement) + columnMixin(PolymerElement), ) { static get properties() { return { @@ -63,12 +63,12 @@ class OmnitableColumnAutocomplete extends listColumnMixin( renderEditCell(column, { item }, onItemChange) { const onChange = (event) => onItemChange(event.target.value); - return html``; + >`; } renderHeader(column, { filter, query }, setState, source) { @@ -89,12 +89,13 @@ class OmnitableColumnAutocomplete extends listColumnMixin( .onText=${onText(setState)} >${when( column.loading, - () => html`` + () => + html``, )}`; } @@ -105,5 +106,5 @@ class OmnitableColumnAutocomplete extends listColumnMixin( } customElements.define( 'cosmoz-omnitable-column-autocomplete', - OmnitableColumnAutocomplete + OmnitableColumnAutocomplete, ); diff --git a/cosmoz-omnitable-column-date.js b/cosmoz-omnitable-column-date.js index d2ea9e0b..16c5c6c9 100644 --- a/cosmoz-omnitable-column-date.js +++ b/cosmoz-omnitable-column-date.js @@ -1,5 +1,5 @@ /* eslint-disable no-return-assign */ -import '@polymer/paper-input/paper-input'; +import '@neovici/cosmoz-input'; import '@polymer/paper-dropdown-menu/paper-dropdown-menu'; import './ui-helpers/cosmoz-clear-button'; @@ -88,12 +88,12 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) { renderEditCell(column, { item }, onItemChange) { const onChange = event => onItemChange(fromInputString(event.target.value)); - return html``; + >`; } renderHeader( diff --git a/cosmoz-omnitable-column-datetime.js b/cosmoz-omnitable-column-datetime.js index 6e9fbcec..0b97d6ef 100644 --- a/cosmoz-omnitable-column-datetime.js +++ b/cosmoz-omnitable-column-datetime.js @@ -96,7 +96,7 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) { renderEditCell(column, { item }, onItemChange) { const onChange = event => onItemChange(fromInputString(event.target.value)); - return html``; + return html``; } // eslint-disable-next-line max-lines-per-function diff --git a/cosmoz-omnitable-column-list.js b/cosmoz-omnitable-column-list.js index 95a28464..7ab1c6a1 100644 --- a/cosmoz-omnitable-column-list.js +++ b/cosmoz-omnitable-column-list.js @@ -52,12 +52,12 @@ class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) { const onChange = (event) => onItemChange(event.target.value.split(/,\s*/gu)); - return html``; + @change=${onChange} + >`; } renderHeader(column, { filter, query }, setState, source) { @@ -79,12 +79,13 @@ class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) { .onText=${onText(setState)} >${when( column.loading, - () => html`` + () => + html``, )}`; } diff --git a/cosmoz-omnitable-column-number.js b/cosmoz-omnitable-column-number.js index aa1a1830..396d339f 100644 --- a/cosmoz-omnitable-column-number.js +++ b/cosmoz-omnitable-column-number.js @@ -1,4 +1,4 @@ -import '@polymer/paper-input/paper-input'; +import '@neovici/cosmoz-input'; import '@polymer/paper-dropdown-menu/paper-dropdown-menu'; import './ui-helpers/cosmoz-clear-button'; @@ -9,10 +9,16 @@ import { columnMixin } from './cosmoz-omnitable-column-mixin'; import './lib/cosmoz-omnitable-number-range-input'; import { defaultComputeSource } from './lib/utils-data'; -import { applySingleFilter, getComparableValue, getInputString, getString, toHashString, toNumber } from './lib/utils-number'; +import { + applySingleFilter, + getComparableValue, + getInputString, + getString, + toHashString, + toNumber, +} from './lib/utils-number'; import { get } from '@polymer/polymer/lib/utils/path'; - /** * @polymer * @customElement @@ -30,13 +36,12 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) { minWidth: { type: String, value: '30px' }, headerCellClass: { type: String, value: 'number-header-cell' }, maximumFractionDigits: { type: Number, value: null }, - minimumFractionDigits: { type: Number, value: null } // browser default 0 for numbers, currency-specific or 2 for currency + minimumFractionDigits: { type: Number, value: null }, // browser default 0 for numbers, currency-specific or 2 for currency }; } getFilterFn(column, filter) { - const - min = getComparableValue({ ...column, valuePath: 'min' }, filter), + const min = getComparableValue({ ...column, valuePath: 'min' }, filter), max = getComparableValue({ ...column, valuePath: 'max' }, filter); if (min == null && max == null) { @@ -86,44 +91,55 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) { return { min: toNumber(matches[1]), - max: toNumber(matches[2]) + max: toNumber(matches[2]), }; } renderCell(column, { item }) { - return html`
${ getString(column, item) }
`; + return html`
+ ${getString(column, item)} +
`; } renderEditCell(column, { item }, onItemChange) { - const onChange = event => onItemChange(event.target.value); - - return html``; + const onChange = (event) => onItemChange(event.target.value); + + return html``; } renderHeader( - { title, + { + title, min, max, locale, maximumFractionDigits, minimumFractionDigits, - autoupdate }, + autoupdate, + }, { filter }, setState, - source + source, ) { return html` setState(state => ({ ...state, filter: value })) } - @header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) } + .title=${title} + .filter=${filter} + .values=${source} + .min=${min} + .max=${max} + .locale=${locale} + .maximumFractionDigits=${maximumFractionDigits} + .minimumFractionDigsits=${minimumFractionDigits} + .autoupdate=${autoupdate} + @filter-changed=${({ detail: { value } }) => + setState((state) => ({ ...state, filter: value }))} + @header-focused-changed=${({ detail: { value } }) => + setState((state) => ({ ...state, headerFocused: value }))} >`; } diff --git a/cosmoz-omnitable-column-time.js b/cosmoz-omnitable-column-time.js index b3a91b12..d9bf55fe 100644 --- a/cosmoz-omnitable-column-time.js +++ b/cosmoz-omnitable-column-time.js @@ -1,6 +1,6 @@ /* eslint-disable no-return-assign */ import '@polymer/paper-dropdown-menu/paper-dropdown-menu'; -import '@polymer/paper-input/paper-input'; +import '@neovici/cosmoz-input'; import './ui-helpers/cosmoz-clear-button'; @@ -8,7 +8,15 @@ import { PolymerElement } from '@polymer/polymer/polymer-element'; import { html } from 'lit-html'; import { columnMixin } from './cosmoz-omnitable-column-mixin'; -import { getComparableValue, getString, toXlsxValue, applySingleFilter, toDate, toHashString, fromHashString } from './lib/utils-time'; +import { + getComparableValue, + getString, + toXlsxValue, + applySingleFilter, + toDate, + toHashString, + fromHashString, +} from './lib/utils-time'; import './lib/cosmoz-omnitable-time-range-input'; import { defaultComputeSource } from './lib/utils-data'; @@ -32,13 +40,12 @@ class OmnitableColumnTime extends columnMixin(PolymerElement) { * 1 => full seconds * 0.1 => milliseconds */ - filterStep: { type: String, value: '1' } + filterStep: { type: String, value: '1' }, }; } getFilterFn(column, filter) { - const - min = getComparableValue({ ...column, valuePath: 'min' }, filter), + const min = getComparableValue({ ...column, valuePath: 'min' }, filter), max = getComparableValue({ ...column, valuePath: 'max' }, filter); if (min == null && max == null) { @@ -88,7 +95,7 @@ class OmnitableColumnTime extends columnMixin(PolymerElement) { return { min: fromHashString(matches[1]), - max: fromHashString(matches[2]) + max: fromHashString(matches[2]), }; } @@ -97,30 +104,33 @@ class OmnitableColumnTime extends columnMixin(PolymerElement) { } renderEditCell(column, { item }, onItemChange) { - const onChange = event => onItemChange(event.target.value); - return html``; + const onChange = (event) => onItemChange(event.target.value); + return html``; } renderHeader( - { title, - min, - max, - locale, - filterStep }, + { title, min, max, locale, filterStep }, { filter }, setState, - source + source, ) { return html` setState(state => ({ ...state, filter: value })) } - @header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) } + .title=${title} + .filter=${filter} + .values=${source} + .min=${min} + .max=${max} + .locale=${locale} + .filterStep=${filterStep} + @filter-changed=${({ detail: { value } }) => + setState((state) => ({ ...state, filter: value }))} + @header-focused-changed=${({ detail: { value } }) => + setState((state) => ({ ...state, headerFocused: value }))} >`; } diff --git a/cosmoz-omnitable-column.js b/cosmoz-omnitable-column.js index 12f80e8a..200ef16a 100644 --- a/cosmoz-omnitable-column.js +++ b/cosmoz-omnitable-column.js @@ -1,41 +1,42 @@ /* eslint-disable no-return-assign */ -import '@polymer/iron-icon/iron-icon'; -import '@polymer/paper-input/paper-input'; +import '@neovici/cosmoz-input'; import './ui-helpers/cosmoz-clear-button'; -import { applySingleFilter, columnMixin, getString } from './cosmoz-omnitable-column-mixin'; +import { + applySingleFilter, + columnMixin, + getString, +} from './cosmoz-omnitable-column-mixin'; import { PolymerElement } from '@polymer/polymer/polymer-element'; import { html } from 'lit-html'; -const - onChange = setState => event => setState(state => { - // skip the event emitted during paper-input initialization - if(state.inputValue === undefined && event.target.value === '') { - return state; - } - - clearTimeout(state.t); - const t = setTimeout(() => setState(state => ({ ...state, filter: state.inputValue })), 1000); - return { ...state, inputValue: event.target.value, t }; - }), - - onBlur = setState => () => - setState(state => ({ ...state, filter: state.inputValue })), +const onChange = (setState) => (event) => + setState((state) => { + // skip the event emitted during cosmoz-input initialization + if (state.inputValue === undefined && event.target.value === '') { + return state; + } - onKeyDown = setState => event => { + clearTimeout(state.t); + const t = setTimeout( + () => setState((state) => ({ ...state, filter: state.inputValue })), + 1000, + ); + return { ...state, inputValue: event.target.value, t }; + }), + onBlur = (setState) => () => + setState((state) => ({ ...state, filter: state.inputValue })), + onKeyDown = (setState) => (event) => { if (event.keyCode === 13) { event.preventDefault(); - setState(state => ({ ...state, filter: state.inputValue })); + setState((state) => ({ ...state, filter: state.inputValue })); } }, - - onFocus = setState => event => - setState(state => ({ ...state, headerFocused: event.detail.value })), - - resetFilter = setState => () => - setState(state => ({ ...state, filter: null, inputValue: null })), - - hasFilter = filter => filter != null && filter !== ''; + onFocus = (setState) => (event) => + setState((state) => ({ ...state, headerFocused: event.detail.value })), + resetFilter = (setState) => () => + setState((state) => ({ ...state, filter: null, inputValue: null })), + hasFilter = (filter) => filter != null && filter !== ''; /** * @polymer @@ -47,7 +48,7 @@ class OmnitableColumn extends columnMixin(PolymerElement) { return { minWidth: { type: String, value: '55px' }, editMinWidth: { type: String, value: '55px' }, - inputValue: { type: Object, notify: true } + inputValue: { type: Object, notify: true }, }; } @@ -59,26 +60,37 @@ class OmnitableColumn extends columnMixin(PolymerElement) { } renderCell(column, { item }) { - return html`${ getString(column, item) }`; + return html`${getString(column, item)}`; } renderEditCell(column, { item }, onItemChange) { - const onChange = event => onItemChange(event.target.value); - return html``; + const onChange = (event) => onItemChange(event.target.value); + return html``; } renderHeader(column, { filter, inputValue, headerFocused }, setState) { - return html` - - `; + + `; } legacyFilterToState(filter) { diff --git a/cosmoz-omnitable-styles.js b/cosmoz-omnitable-styles.js index ca5d67a8..08d075a0 100644 --- a/cosmoz-omnitable-styles.js +++ b/cosmoz-omnitable-styles.js @@ -518,7 +518,7 @@ export default css` display: inline-flex; position: relative; } - .header-cell :not(.sg) { + .header-cell :not(.sg,cosmoz-clear-button) { min-width: 0; flex: auto; } diff --git a/demo/.eslintrc.json b/demo/.eslintrc.json index 47b99ffa..450f6b6f 100644 --- a/demo/.eslintrc.json +++ b/demo/.eslintrc.json @@ -1,5 +1,5 @@ { "rules": { - "no-console": 0 + "no-console": 0 } } diff --git a/demo/ajax-demo.html b/demo/ajax-demo.html index 00007896..ca8482a5 100644 --- a/demo/ajax-demo.html +++ b/demo/ajax-demo.html @@ -1,85 +1,155 @@ - - - + + + - Cosmoz Omnitable demo + Cosmoz Omnitable demo - - - - - - - + + + + + + - - - - - - + + + + + - - - + + diff --git a/demo/custom-template-demo.html b/demo/custom-template-demo.html index ebf3f05d..e0e82c22 100644 --- a/demo/custom-template-demo.html +++ b/demo/custom-template-demo.html @@ -1,141 +1,190 @@ - - - - - Cosmoz Omnitable demo - - - - - - - - - - - - - -