From 7dd61fc944c9ec86ea4beec0621aa5645533c70b Mon Sep 17 00:00:00 2001 From: Meghea Iulian Date: Tue, 21 Nov 2023 10:40:26 +0200 Subject: [PATCH] feat(number-range-input): replace paper-input --- cosmoz-omnitable-column-list.js | 19 ++-- lib/cosmoz-omnitable-number-range-input.js | 113 +++++++++------------ lib/cosmoz-omnitable-range-input-mixin.js | 4 +- test/range.test.js | 37 ------- 4 files changed, 62 insertions(+), 111 deletions(-) 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/lib/cosmoz-omnitable-number-range-input.js b/lib/cosmoz-omnitable-number-range-input.js index 0c9fe27f..a839741d 100644 --- a/lib/cosmoz-omnitable-number-range-input.js +++ b/lib/cosmoz-omnitable-number-range-input.js @@ -5,30 +5,33 @@ import { ifDefined } from 'lit-html/directives/if-defined.js'; import { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin'; import { polymerHauntedRender } from './polymer-haunted-render-mixin'; -class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerElement)) { +class NumberRangeInput extends rangeInputMixin( + polymerHauntedRender(PolymerElement), +) { static get properties() { return { maximumFractionDigits: { type: Number, value: null }, minimumFractionDigits: { type: Number, value: null }, // browser default 0 for numbers, currency-specific or 2 for currency formatter: { type: Object, - computed: '_computeFormatter(locale, minimumFractionDigits, maximumFractionDigits)' + computed: + '_computeFormatter(locale, minimumFractionDigits, maximumFractionDigits)', }, // trigger filter updates manually autoupdate: { type: String, - value: false + value: false, }, _filterText: { type: String, - computed: '_computeFilterText(filter.*, formatter)' - } + computed: '_computeFilterText(filter.*, formatter)', + }, }; } // eslint-disable-next-line max-lines-per-function render() { - const onOpenedChanged = event => { + const onOpenedChanged = (event) => { this.headerFocused = event.detail.value; this._onDropdownOpenedChanged(event); }; @@ -41,46 +44,51 @@ class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme } - this.resetFilter() } ?visible=${ this.hasFilter() }> + this.resetFilter()} + ?visible=${this.hasFilter()} + > -
-

${ this.title }

- +

${this.title}

+ { - this.set('_filterInput.min', event.detail.value); - } } - @input=${ event => this.onBadInputFloatLabel(event) } - @blur=${ event => this._onBlur(event) } - @keydown=${ event => this._onKeyDown(event) } - min=${ this._toInputString(this._limit.fromMin) } - max=${ this._toInputString(this._limit.fromMax) } - > - { + this.set('_filterInput.min', event.detail.value); + }} + @blur=${(event) => this._onBlur(event)} + @keydown=${(event) => this._onKeyDown(event)} + min=${this._toInputString(this._limit.fromMin)} + max=${this._toInputString(this._limit.fromMax)} + > + { - this.set('_filterInput.max', event.detail.value); - } } - @input=${ event => this.onBadInputFloatLabel(event) } - @blur=${ event => this._onBlur(event) } - @keydown=${ event => this._onKeyDown(event) } - min=${ this._toInputString(this._limit.toMin) } - max=${ this._toInputString(this._limit.toMax) } - > + .label=${_('To')} + .value=${this._filterInput?.max} + @value-changed=${(event) => { + this.set('_filterInput.max', event.detail.value); + }} + @blur=${(event) => this._onBlur(event)} + @keydown=${(event) => this._onKeyDown(event)} + min=${this._toInputString(this._limit.toMin)} + max=${this._toInputString(this._limit.toMax)} + >
`; @@ -88,7 +96,7 @@ class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme _computeFormatter(locale, minimumFractionDigits, maximumFractionDigits) { const options = { - localeMatcher: 'best fit' // chrome expects this when using custom options + localeMatcher: 'best fit', // chrome expects this when using custom options }; if (minimumFractionDigits !== null) { options.minimumFractionDigits = minimumFractionDigits; @@ -99,26 +107,6 @@ class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme return new Intl.NumberFormat(locale || undefined, options); } - /** - * Check if label should float based on validity - * - * Number inputs can have allowed characters that aren't numbers (-,e) and won't - * trigger a value change and thus not float the label. - * However, the validity will report badInput so we can trigger a label float by - * setting it to something truthy but still not visible. - * Fixed in paper-input 3.x - * - * @param {Event} event KeyboardEvent - * @returns {void} - */ - onBadInputFloatLabel(event) { - const paperInput = event.currentTarget; - if (paperInput == null || paperInput.tagName !== 'PAPER-INPUT') { - return; - } - paperInput.placeholder = paperInput.$.nativeInput.validity.badInput ? ' ' : ''; - } - /** * Get the comparable value of an item. * @@ -155,5 +143,4 @@ class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerEleme } } - customElements.define('cosmoz-omnitable-number-range-input', NumberRangeInput); diff --git a/lib/cosmoz-omnitable-range-input-mixin.js b/lib/cosmoz-omnitable-range-input-mixin.js index b82363c7..57f6879a 100644 --- a/lib/cosmoz-omnitable-range-input-mixin.js +++ b/lib/cosmoz-omnitable-range-input-mixin.js @@ -308,7 +308,7 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func _onKeyDown(event) { const input = event.currentTarget, - inputs = Array.from(input.parentElement.querySelectorAll('paper-input')), + inputs = Array.from(input.parentElement.querySelectorAll('paper-input, cosmoz-input')), nextInput = inputs[inputs.findIndex(i => i === input) + 1], isLastInput = !nextInput, isFirstInput = inputs[0] === input; @@ -349,7 +349,7 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func } // focus the first input after the dropdown is visible - setTimeout(() => currentTarget.querySelector('paper-input').focus(), 100); + setTimeout(() => currentTarget.querySelector('paper-input, cosmoz-input').focus(), 100); } diff --git a/test/range.test.js b/test/range.test.js index e2d0e963..53567862 100644 --- a/test/range.test.js +++ b/test/range.test.js @@ -216,43 +216,6 @@ suite('number', () => { 'Expected item coresponding to the age: 46.7511 to be in the filtered items.', ); }); - - test("make sure onBadInputFloatLabel doesn't explode", () => { - assert.strictEqual( - columnHeaderInput.onBadInputFloatLabel(new InputEvent('input')), - undefined, - ); - }); - - test('float label on invalid input', async () => { - await nextFrame(); // give lit time to render the columns - const filterMenu = columnHeaderInput.root.querySelector( - 'paper-dropdown-menu', - ), - isFloating = (element) => - element.$.container.$.labelAndInputContainer.classList.contains( - 'label-is-floating', - ), - inputEvent = new InputEvent('input'); - - filterMenu.noAnimations = true; - assert.isFalse(filterMenu.opened); - filterMenu.click(); - const [from, to] = filterMenu.querySelectorAll('paper-input'); - assert.isFalse(isFloating(from)); - assert.isFalse(isFloating(to)); - - from.value = 'e'; - to.value = 'e'; - flush(); - await nextFrame(); - - assert.isTrue(filterMenu.opened); - from.dispatchEvent(inputEvent); - to.dispatchEvent(inputEvent); - assert.isTrue(isFloating(from)); - assert.isTrue(isFloating(to)); - }); }); suite('number - pure functions', () => {