Skip to content

Commit cfa5304

Browse files
Property Editors: Add mandatory support to Number Range (Refactor). (#20570)
* 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>
1 parent 4fc79ad commit cfa5304

File tree

2 files changed

+28
-6
lines changed

2 files changed

+28
-6
lines changed

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit';
22
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
3-
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
3+
import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
44
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
55
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
66
import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
@@ -34,6 +34,11 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
3434
return this._minValue;
3535
}
3636

37+
@property({ type: Boolean })
38+
required = false;
39+
@property({ type: String })
40+
requiredMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
41+
3742
@state()
3843
private _maxValue?: number;
3944

@@ -90,6 +95,12 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
9095
constructor() {
9196
super();
9297

98+
this.addValidator(
99+
'valueMissing',
100+
() => this.requiredMessage,
101+
() => this.required && (this._minValue == null || this._maxValue == null),
102+
);
103+
93104
this.addValidator(
94105
'patternMismatch',
95106
() => {
@@ -129,7 +140,8 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
129140
min=${ifDefined(this.validationRange?.min)}
130141
max=${ifDefined(this.validationRange?.max)}
131142
placeholder=${this._minPlaceholder}
132-
.value=${this._minValue}
143+
?required=${this.required}
144+
.value=${this._minValue?.toString() ?? ''}
133145
@input=${this.#onMinInput}></uui-input>
134146
<b>–</b>
135147
<uui-input
@@ -138,7 +150,8 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
138150
min=${ifDefined(this.validationRange?.min)}
139151
max=${ifDefined(this.validationRange?.max)}
140152
placeholder=${this._maxPlaceholder}
141-
.value=${this._maxValue}
153+
?required=${this.required}
154+
.value=${this._maxValue?.toString() ?? ''}
142155
@input=${this.#onMaxInput}></uui-input>
143156
`;
144157
}

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { UmbInputNumberRangeElement } from '@umbraco-cms/backoffice/components';
22
import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
3-
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
3+
import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
44
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
55
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
66
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
@@ -26,9 +26,14 @@ export class UmbPropertyEditorUINumberRangeElement
2626
@state()
2727
private _validationRange?: UmbNumberRangeValueType;
2828

29+
@property({ type: Boolean })
30+
mandatory = false;
31+
@property({ type: String })
32+
mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
33+
2934
@property({ type: Object })
3035
public override set value(value: UmbNumberRangeValueType | undefined) {
31-
super.value = value || { min: undefined, max: undefined };
36+
super.value = value;
3237
this._minValue = value?.min;
3338
this._maxValue = value?.max;
3439
}
@@ -42,7 +47,9 @@ export class UmbPropertyEditorUINumberRangeElement
4247
}
4348

4449
#onChange(event: CustomEvent & { target: UmbInputNumberRangeElement }) {
45-
this.value = { min: event.target.minValue, max: event.target.maxValue };
50+
const min = event.target.minValue;
51+
const max = event.target.maxValue;
52+
this.value = min == null && max == null ? undefined : { min, max };
4653
this.dispatchEvent(new UmbChangeEvent());
4754
}
4855

@@ -59,6 +66,8 @@ export class UmbPropertyEditorUINumberRangeElement
5966
<umb-input-number-range
6067
.minValue=${this._minValue}
6168
.maxValue=${this._maxValue}
69+
?required=${this.mandatory}
70+
.requiredMessage=${this.mandatoryMessage}
6271
.validationRange=${this._validationRange}
6372
@change=${this.#onChange}>
6473
</umb-input-number-range>

0 commit comments

Comments
 (0)