From f1bdd30935ef47e95a852da7ce5e891c4131bac0 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 4 Feb 2025 16:21:31 +0000 Subject: [PATCH 1/4] Numeric: renamed `#parseInt` function to `#parseNumber` --- .../number/property-editor-ui-number.element.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts index 23663cb0fd87..79bd13891d3e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts @@ -39,9 +39,9 @@ export class UmbPropertyEditorUINumberElement public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; - this._min = this.#parseInt(config.getValueByAlias('min')) || 0; - this._max = this.#parseInt(config.getValueByAlias('max')) || Infinity; - this._step = this.#parseInt(config.getValueByAlias('step')); + this._min = this.#parseNumber(config.getValueByAlias('min')) || 0; + this._max = this.#parseNumber(config.getValueByAlias('max')) || Infinity; + this._step = this.#parseNumber(config.getValueByAlias('step')); this._placeholder = config.getValueByAlias('placeholder'); } @@ -80,13 +80,15 @@ export class UmbPropertyEditorUINumberElement } } - #parseInt(input: unknown): number | undefined { + #parseNumber(input: unknown): number | undefined { const num = Number(input); return Number.isNaN(num) ? undefined : num; } #onInput(e: InputEvent & { target: HTMLInputElement }) { - this.value = this.#parseInt(e.target.value); + const newValue = event.target.value === '' ? undefined : this.#parseNumber(event.target.value); + if (newValue === this.value) return; + this.value = newValue; this.dispatchEvent(new UmbPropertyValueChangeEvent()); } From a44b191ab0d584ee53987c879f4fd67344f4759b Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 4 Feb 2025 16:22:02 +0000 Subject: [PATCH 2/4] Numeric: Changed to use `@change` event --- .../number/property-editor-ui-number.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts index 79bd13891d3e..523053797597 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts @@ -85,7 +85,7 @@ export class UmbPropertyEditorUINumberElement return Number.isNaN(num) ? undefined : num; } - #onInput(e: InputEvent & { target: HTMLInputElement }) { + #onChange(event: InputEvent & { target: HTMLInputElement }) { const newValue = event.target.value === '' ? undefined : this.#parseNumber(event.target.value); if (newValue === this.value) return; this.value = newValue; @@ -101,8 +101,8 @@ export class UmbPropertyEditorUINumberElement max=${ifDefined(this._max)} step=${ifDefined(this._step)} placeholder=${ifDefined(this._placeholder)} - value=${this.value?.toString() ?? (this._placeholder ? '' : '0')} - @input=${this.#onInput} + value=${this.value?.toString() ?? ''} + @change=${this.#onChange} ?readonly=${this.readonly}> `; From 4ba48657e63b087560ff2494715bd8052c2de873 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 5 Feb 2025 10:20:56 +0000 Subject: [PATCH 3/4] Number input: `max="Infinity"` was invalid markup We don't need to always set the `min` and `max` attributes. Leave the browser to do its thing. --- .../number/property-editor-ui-number.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts index 523053797597..b423c6c6c7d9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts @@ -39,8 +39,8 @@ export class UmbPropertyEditorUINumberElement public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; - this._min = this.#parseNumber(config.getValueByAlias('min')) || 0; - this._max = this.#parseNumber(config.getValueByAlias('max')) || Infinity; + this._min = this.#parseNumber(config.getValueByAlias('min')); + this._max = this.#parseNumber(config.getValueByAlias('max')); this._step = this.#parseNumber(config.getValueByAlias('step')); this._placeholder = config.getValueByAlias('placeholder'); } @@ -82,7 +82,7 @@ export class UmbPropertyEditorUINumberElement #parseNumber(input: unknown): number | undefined { const num = Number(input); - return Number.isNaN(num) ? undefined : num; + return Number.isFinite(num) ? num : undefined; } #onChange(event: InputEvent & { target: HTMLInputElement }) { From a8c47bbd0d93dcdf95fc965c60c7f80b22ed98c7 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 5 Feb 2025 10:21:35 +0000 Subject: [PATCH 4/4] Decimal: adds input `step` config --- .../property-editors/number/Umbraco.Decimal.ts | 12 ++++++------ .../property-editors/number/Umbraco.Integer.ts | 1 + 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Decimal.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Decimal.ts index c99e98baec23..81a1266951af 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Decimal.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Decimal.ts @@ -12,24 +12,24 @@ export const manifests: Array = [ label: 'Minimum', description: 'Enter the minimum amount of number to be entered', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal', + config: [{ alias: 'step', value: '0.001' }], }, { alias: 'max', label: 'Maximum', description: 'Enter the maximum amount of number to be entered', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal', + config: [ + { alias: 'placeholder', value: '∞' }, + { alias: 'step', value: '0.001' }, + ], }, { alias: 'step', label: 'Step size', description: 'Enter the intervals amount between each step of number to be entered', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal', - config: [ - { - alias: 'step', - value: '0.01', - }, - ], + config: [{ alias: 'step', value: '0.001' }], }, ], }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Integer.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Integer.ts index 97ea39ee2a44..d5038b8af3bd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Integer.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Integer.ts @@ -18,6 +18,7 @@ export const manifests: Array = [ label: 'Maximum', description: 'Enter the maximum amount of number to be entered', propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer', + config: [{ alias: 'placeholder', value: '∞' }], }, { alias: 'step',