yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Validates and prevents save when providing a number outside of the configured range. (#17991)

Browse Source 
* 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 <leekelleher@gmail.com>
This commit is contained in:
Andy Butland
2025-01-22 10:18:39 +01:00
committed by GitHub
parent f67a900cc1
commit 98ff36b6a8
2 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
View File

@@ -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%'.",

33
src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts
View File

@@ -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<number | undefined, typeof UmbLitElement, undefined>(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}>
</uui-input>