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

Property Editors: Add mandatory support to Number Range (Refactor). (#20570)

Browse Source 
* Added mandatory property to number range property editor and bind it to the inner input.

* Added mandatory message support.

---------

Co-authored-by: Mads Rasmussen <madsr@hey.com>
This commit is contained in:
Engiber Lozada
2025-11-03 10:56:37 +01:00
committed by GitHub
parent 4fc79ad1f8
commit cfa530487b
2 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts
View File

@@ -1,6 +1,6 @@
import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
@@ -34,6 +34,11 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
return this._minValue;
}
@property({ type: Boolean })
required = false;
@property({ type: String })
requiredMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
@state()
private _maxValue?: number;
@@ -90,6 +95,12 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
constructor() {
super();
this.addValidator(
'valueMissing',
() => this.requiredMessage,
() => this.required && (this._minValue == null || this._maxValue == null),
);
this.addValidator(
'patternMismatch',
() => {
@@ -129,7 +140,8 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
min=${ifDefined(this.validationRange?.min)}
max=${ifDefined(this.validationRange?.max)}
placeholder=${this._minPlaceholder}
.value=${this._minValue}
?required=${this.required}
.value=${this._minValue?.toString() ?? ''}
@input=${this.#onMinInput}></uui-input>
<b>–</b>
<uui-input
@@ -138,7 +150,8 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
min=${ifDefined(this.validationRange?.min)}
max=${ifDefined(this.validationRange?.max)}
placeholder=${this._maxPlaceholder}
.value=${this._maxValue}
?required=${this.required}
.value=${this._maxValue?.toString() ?? ''}
@input=${this.#onMaxInput}></uui-input>
`;
}

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

@@ -1,6 +1,6 @@
import type { UmbInputNumberRangeElement } from '@umbraco-cms/backoffice/components';
import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
@@ -26,9 +26,14 @@ export class UmbPropertyEditorUINumberRangeElement
@state()
private _validationRange?: UmbNumberRangeValueType;
@property({ type: Boolean })
mandatory = false;
@property({ type: String })
mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
@property({ type: Object })
public override set value(value: UmbNumberRangeValueType | undefined) {
super.value = value || { min: undefined, max: undefined };
super.value = value;
this._minValue = value?.min;
this._maxValue = value?.max;
}
@@ -42,7 +47,9 @@ export class UmbPropertyEditorUINumberRangeElement
}
#onChange(event: CustomEvent & { target: UmbInputNumberRangeElement }) {
this.value = { min: event.target.minValue, max: event.target.maxValue };
const min = event.target.minValue;
const max = event.target.maxValue;
this.value = min == null && max == null ? undefined : { min, max };
this.dispatchEvent(new UmbChangeEvent());
}
@@ -59,6 +66,8 @@ export class UmbPropertyEditorUINumberRangeElement
<umb-input-number-range
.minValue=${this._minValue}
.maxValue=${this._maxValue}
?required=${this.mandatory}
.requiredMessage=${this.mandatoryMessage}
.validationRange=${this._validationRange}
@change=${this.#onChange}>
</umb-input-number-range>