Skip to content

Commit 85a81b3

Browse files
AndyButlandnielslyngsoeleekelleher
authored
Ensure min/max property editor settings are valid before rendering for content editing (#17881)
* Ensure min/max property editor settings are valid before rendering for content editing. * Display message when URL picker data type configuration is not valid. * Reverted 'umb-input-multi-url' changes * Added console warnings for misconfigured min/max values Also adds `label` property for UUI elements --------- Co-authored-by: Niels Lyngsø <[email protected]> Co-authored-by: leekelleher <[email protected]>
1 parent bb75518 commit 85a81b3

File tree

7 files changed

+124
-20
lines changed

7 files changed

+124
-20
lines changed

‎src/Umbraco.Web.UI.Client/src/packages/core/components/input-slider/input-slider.element.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import type { UUISliderEvent } from '@umbraco-cms/backoffice/external/uui';
66

77
@customElement('umb-input-slider')
88
export class UmbInputSliderElement extends UUIFormControlMixin(UmbLitElement, '') {
9+
@property()
10+
label: string = '';
11+
912
@property({ type: Number })
1013
min = 0;
1114

@@ -50,6 +53,7 @@ export class UmbInputSliderElement extends UUIFormControlMixin(UmbLitElement, ''
5053
#renderSlider() {
5154
return html`
5255
<uui-slider
56+
.label=${this.label}
5357
.min=${this.min}
5458
.max=${this.max}
5559
.step=${this.step}
@@ -63,6 +67,7 @@ export class UmbInputSliderElement extends UUIFormControlMixin(UmbLitElement, ''
6367
#renderRangeSlider() {
6468
return html`
6569
<uui-range-slider
70+
.label=${this.label}
6671
.min=${this.min}
6772
.max=${this.max}
6873
.step=${this.step}

‎src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/property-editor/property-editor-ui-multi-url-picker.element.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement impl
4040

4141
#parseInt(value: unknown, fallback: number): number {
4242
const num = Number(value);
43-
return !isNaN(num) && num > 0 ? num : fallback;
43+
return !Number.isNaN(num) && num > 0 ? num : fallback;
4444
}
4545

4646
@state()
@@ -55,6 +55,9 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement impl
5555
@state()
5656
private _max = Infinity;
5757

58+
@state()
59+
private _label?: string;
60+
5861
@state()
5962
private _alias?: string;
6063

@@ -65,11 +68,21 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement impl
6568
super();
6669

6770
this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
71+
this._label = context.getLabel();
6872
this.observe(context.alias, (alias) => (this._alias = alias));
6973
this.observe(context.variantId, (variantId) => (this._variantId = variantId?.toString() || 'invariant'));
7074
});
7175
}
7276

77+
protected override firstUpdated() {
78+
if (this._min && this._max && this._min > this._max) {
79+
console.warn(
80+
`Property '${this._label}' (Multi URL Picker) has been misconfigured, 'min' is greater than 'max'. Please correct your data type configuration.`,
81+
this,
82+
);
83+
}
84+
}
85+
7386
#onChange(event: CustomEvent & { target: UmbInputMultiUrlElement }) {
7487
this.value = event.target.urls;
7588
this.dispatchEvent(new UmbPropertyValueChangeEvent());

‎src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,13 @@ export class UmbPropertyEditorUIContentPickerElement
117117
override firstUpdated() {
118118
this.addFormControlElement(this.shadowRoot!.querySelector('umb-input-content')!);
119119
this.#setPickerRootUnique();
120+
121+
if (this._min && this._max && this._min > this._max) {
122+
console.warn(
123+
`Property (Content Picker) has been misconfigured, 'minNumber' is greater than 'maxNumber'. Please correct your data type configuration.`,
124+
this,
125+
);
126+
}
120127
}
121128

122129
override focus() {

‎src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/property-editor-ui-multiple-text-string.element.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import type {
77
UmbPropertyEditorConfigCollection,
88
UmbPropertyEditorUiElement,
99
} from '@umbraco-cms/backoffice/property-editor';
10+
import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
1011

1112
/**
1213
* @element umb-property-editor-ui-multiple-text-string
@@ -50,12 +51,31 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement
5051
@property({ type: Boolean, reflect: true })
5152
required = false;
5253

54+
@state()
55+
private _label?: string;
56+
5357
@state()
5458
private _min = 0;
5559

5660
@state()
5761
private _max = Infinity;
5862

63+
constructor() {
64+
super();
65+
this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
66+
this._label = context.getLabel();
67+
});
68+
}
69+
70+
protected override firstUpdated() {
71+
if (this._min && this._max && this._min > this._max) {
72+
console.warn(
73+
`Property '${this._label}' (Multiple Text String) has been misconfigured, 'min' is greater than 'max'. Please correct your data type configuration.`,
74+
this,
75+
);
76+
}
77+
}
78+
5979
#onChange(event: UmbChangeEvent) {
6080
event.stopPropagation();
6181
const target = event.currentTarget as UmbInputMultipleTextStringElement;

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { css, customElement, html, ifDefined, property, state } from '@umbraco-c
22
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
33
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
44
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
5+
import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
56
import type {
67
UmbPropertyEditorConfigCollection,
78
UmbPropertyEditorUiElement,
@@ -21,6 +22,9 @@ export class UmbPropertyEditorUINumberElement
2122
@property({ type: Boolean, reflect: true })
2223
readonly = false;
2324

25+
@state()
26+
private _label?: string;
27+
2428
@state()
2529
private _max?: number;
2630

@@ -35,15 +39,19 @@ export class UmbPropertyEditorUINumberElement
3539

3640
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
3741
if (!config) return;
38-
this._min = this.#parseInt(config.getValueByAlias('min'));
39-
this._max = this.#parseInt(config.getValueByAlias('max'));
42+
this._min = this.#parseInt(config.getValueByAlias('min')) || 0;
43+
this._max = this.#parseInt(config.getValueByAlias('max')) || Infinity;
4044
this._step = this.#parseInt(config.getValueByAlias('step'));
4145
this._placeholder = config.getValueByAlias('placeholder');
4246
}
4347

4448
constructor() {
4549
super();
4650

51+
this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
52+
this._label = context.getLabel();
53+
});
54+
4755
this.addValidator(
4856
'rangeUnderflow',
4957
() => this.localize.term('validation_numberMinimum', this._min),
@@ -63,6 +71,15 @@ export class UmbPropertyEditorUINumberElement
6371
);
6472
}
6573

74+
protected override firstUpdated() {
75+
if (this._min && this._max && this._min > this._max) {
76+
console.warn(
77+
`Property '${this._label}' (Numeric) has been misconfigured, 'min' is greater than 'max'. Please correct your data type configuration.`,
78+
this,
79+
);
80+
}
81+
}
82+
6683
#parseInt(input: unknown): number | undefined {
6784
const num = Number(input);
6885
return Number.isNaN(num) ? undefined : num;
@@ -77,6 +94,7 @@ export class UmbPropertyEditorUINumberElement
7794
return html`
7895
<uui-input
7996
type="number"
97+
label=${ifDefined(this._label)}
8098
min=${ifDefined(this._min)}
8199
max=${ifDefined(this._max)}
82100
step=${ifDefined(this._step)}

‎src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/property-editor-ui-slider.element.ts

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { UmbInputSliderElement } from '@umbraco-cms/backoffice/components';
22
import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
33
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
4+
import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
45
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
56
import type {
67
UmbPropertyEditorConfigCollection,
@@ -27,22 +28,25 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
2728
readonly = false;
2829

2930
@state()
30-
_enableRange = false;
31+
private _enableRange = false;
3132

3233
@state()
33-
_initVal1: number = 0;
34+
private _initVal1: number = 0;
3435

3536
@state()
36-
_initVal2: number = 1;
37+
private _initVal2: number = 1;
3738

3839
@state()
39-
_step = 1;
40+
private _label?: string;
4041

4142
@state()
42-
_min = 0;
43+
private _step = 1;
4344

4445
@state()
45-
_max = 100;
46+
private _min = 0;
47+
48+
@state()
49+
private _max = 100;
4650

4751
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
4852
if (!config) return;
@@ -59,21 +63,39 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
5963
const initVal2 = Number(config.getValueByAlias('initVal2'));
6064
this._initVal2 = isNaN(initVal2) ? this._initVal1 + this._step : initVal2;
6165

62-
const minVal = Number(config.getValueByAlias('minVal'));
63-
this._min = isNaN(minVal) ? 0 : minVal;
64-
65-
const maxVal = Number(config.getValueByAlias('maxVal'));
66-
this._max = isNaN(maxVal) ? 100 : maxVal;
66+
this._min = this.#parseInt(config.getValueByAlias('minVal')) || 0;
67+
this._max = this.#parseInt(config.getValueByAlias('maxVal')) || 100;
6768

6869
if (this._min === this._max) {
6970
this._max = this._min + 100;
70-
//TODO Maybe we want to show some kind of error element rather than trying to fix the mistake made by the user...?
71-
throw new Error(
72-
`Property Editor Slider: min and max are currently equal. Please change your data type configuration. To render the slider correctly, we changed this slider to: min = ${this._min}, max = ${this._max}`,
71+
console.warn(
72+
`Property Editor (Slider) has been misconfigured, 'min' and 'max' are equal values. Please correct your data type configuration. To render the slider correctly, we changed this slider to: min = ${this._min}, max = ${this._max}`,
73+
this,
7374
);
7475
}
7576
}
7677

78+
constructor() {
79+
super();
80+
this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
81+
this._label = context.getLabel();
82+
});
83+
}
84+
85+
protected override firstUpdated() {
86+
if (this._min && this._max && this._min > this._max) {
87+
console.warn(
88+
`Property '${this._label}' (Slider) has been misconfigured, 'min' is greater than 'max'. Please correct your data type configuration.`,
89+
this,
90+
);
91+
}
92+
}
93+
94+
#parseInt(input: unknown): number | undefined {
95+
const num = Number(input);
96+
return Number.isNaN(num) ? undefined : num;
97+
}
98+
7799
#getValueObject(value: string) {
78100
const [from, to] = value.split(',').map(Number);
79101
return { from, to: to ?? from };
@@ -87,6 +109,7 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
87109
override render() {
88110
return html`
89111
<umb-input-slider
112+
.label=${this._label ?? 'Slider'}
90113
.valueLow=${this.value?.from ?? this._initVal1}
91114
.valueHigh=${this.value?.to ?? this._initVal2}
92115
.step=${this._step}

‎src/Umbraco.Web.UI.Client/src/packages/property-editors/textarea/property-editor-ui-textarea.element.ts

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ import type {
88
} from '@umbraco-cms/backoffice/property-editor';
99
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
1010
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
11+
import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
1112

1213
@customElement('umb-property-editor-ui-textarea')
1314
export class UmbPropertyEditorUITextareaElement
14-
extends UmbFormControlMixin<string>(UmbLitElement, undefined)
15+
extends UmbFormControlMixin<string, typeof UmbLitElement>(UmbLitElement, undefined)
1516
implements UmbPropertyEditorUiElement
1617
{
1718
/**
@@ -23,6 +24,9 @@ export class UmbPropertyEditorUITextareaElement
2324
@property({ type: Boolean, reflect: true })
2425
readonly = false;
2526

27+
@state()
28+
private _label?: string;
29+
2630
@state()
2731
private _maxChars?: number;
2832

@@ -50,8 +54,22 @@ export class UmbPropertyEditorUITextareaElement
5054
};
5155
}
5256

57+
constructor() {
58+
super();
59+
this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
60+
this._label = context.getLabel();
61+
});
62+
}
63+
5364
protected override firstUpdated(): void {
5465
this.addFormControlElement(this.shadowRoot!.querySelector('uui-textarea')!);
66+
67+
if (this._minHeight && this._maxHeight && this._minHeight > this._maxHeight) {
68+
console.warn(
69+
`Property '${this._label}' (Textarea) has been misconfigured, 'minHeight' is greater than 'maxHeight'. Please correct your data type configuration.`,
70+
this,
71+
);
72+
}
5573
}
5674

5775
#onInput(event: InputEvent) {
@@ -64,7 +82,7 @@ export class UmbPropertyEditorUITextareaElement
6482
override render() {
6583
return html`
6684
<uui-textarea
67-
label="Textarea"
85+
label=${ifDefined(this._label)}
6886
style=${styleMap(this._css)}
6987
.autoHeight=${this._rows ? false : true}
7088
maxlength=${ifDefined(this._maxChars)}
@@ -75,7 +93,7 @@ export class UmbPropertyEditorUITextareaElement
7593
`;
7694
}
7795

78-
static styles = [
96+
static override readonly styles = [
7997
UmbTextStyles,
8098
css`
8199
uui-textarea {

0 commit comments

Comments
 (0)