From 98ff36b6a8a151154551ceed7022603d5fd2e97a Mon Sep 17 00:00:00 2001 From: Andy Butland Date: Wed, 22 Jan 2025 10:18:39 +0100 Subject: [PATCH] Validates and prevents save when providing a number outside of the configured range. (#17991) * Validates and prevents save when providing a number outside of the configured range. * Refactored to make use of `UmbFormControlMixin` This flags the property layout container to be invalid (with prompt). Adds localization keys. * Corrected localization parameter order --------- Co-authored-by: leekelleher --- .../src/assets/lang/en.ts | 3 ++ .../property-editor-ui-number.element.ts | 33 ++++++++++++++++--- 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index 58885ade29..eb1aedc46a 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -2126,6 +2126,9 @@ export default { duplicateUsername: "Username '%0%' is already taken", legacyOption: 'Legacy option', legacyOptionDescription: 'This option is no longer supported, please select something else', + numberMinimum: "Value must be greater than or equal to '%0%'.", + numberMaximum: "Value must be less than or equal to '%0%'.", + numberMisconfigured: "Minimum value '%0%' must be less than the maximum value '%1%'.", }, healthcheck: { checkSuccessMessage: "Value is set to the recommended value: '%0%'.", 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 5f48f61ba1..9cbc5bef2a 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 @@ -1,4 +1,5 @@ import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; import type { @@ -7,10 +8,10 @@ import type { } from '@umbraco-cms/backoffice/property-editor'; @customElement('umb-property-editor-ui-number') -export class UmbPropertyEditorUINumberElement extends UmbLitElement implements UmbPropertyEditorUiElement { - @property({ type: Number }) - value?: number; - +export class UmbPropertyEditorUINumberElement + extends UmbFormControlMixin(UmbLitElement) + implements UmbPropertyEditorUiElement +{ /** * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. * @type {boolean} @@ -40,6 +41,28 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U this._placeholder = config.getValueByAlias('placeholder'); } + constructor() { + super(); + + this.addValidator( + 'rangeUnderflow', + () => this.localize.term('validation_numberMinimum', this._min), + () => !!this._min && this.value! < this._min, + ); + + this.addValidator( + 'rangeOverflow', + () => this.localize.term('validation_numberMaximum', this._max), + () => !!this._max && this.value! > this._max, + ); + + this.addValidator( + 'customError', + () => this.localize.term('validation_numberMisconfigured', this._min, this._max), + () => !!this._min && !!this._max && this._min > this._max, + ); + } + #parseInt(input: unknown): number | undefined { const num = Number(input); return Number.isNaN(num) ? undefined : num; @@ -58,7 +81,7 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U max=${ifDefined(this._max)} step=${ifDefined(this._step)} placeholder=${ifDefined(this._placeholder)} - .value=${this.value ?? (this._placeholder ? undefined : 0)} + value=${this.value?.toString() ?? (this._placeholder ? '' : '0')} @input=${this.#onInput} ?readonly=${this.readonly}>