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

Number property-editor min/max

Browse Source 
validates that the min/max/step configuration are valid integers.
This commit is contained in:
leekelleher
2024-04-25 13:16:45 +01:00
parent 6f0118ae5c
commit 036d4fb22c
1 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,13 @@
import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
@customElement('umb-property-editor-ui-number')
export class UmbPropertyEditorUINumberElement extends UmbLitElement implements UmbPropertyEditorUiElement {
@property({ type: Number })
value: undefined | number = undefined;
value?: number;
@state()
private _max?: number;
@@ -19,28 +19,36 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
private _step?: number;
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
this._min = config?.getValueByAlias('min');
this._max = config?.getValueByAlias('max');
this._step = config?.getValueByAlias('step');
if (!config) return;
this._min = this.#parseInt(config.getValueByAlias('min'));
this._max = this.#parseInt(config.getValueByAlias('max'));
this._step = this.#parseInt(config.getValueByAlias('step'));
}
private onInput(e: InputEvent) {
this.value = Number((e.target as HTMLInputElement).value);
this.dispatchEvent(new CustomEvent('property-value-change'));
#parseInt(input: unknown): number | undefined {
const num = Number(input);
return Number.isNaN(num) ? undefined : num;
}
#onInput(e: InputEvent & { target: HTMLInputElement }) {
this.value = this.#parseInt(e.target.value);
this.dispatchEvent(new UmbPropertyValueChangeEvent());
}
render() {
return html`<uui-input
.value=${this.value ?? 0}
type="number"
max="${ifDefined(this._max)}"
min="${ifDefined(this._min)}"
step="${ifDefined(this._step)}"
@input=${this.onInput}></uui-input>`;
return html`
<uui-input
type="number"
min=${ifDefined(this._min)}
max=${ifDefined(this._max)}
step=${ifDefined(this._step)}
.value=${this.value ?? 0}
@input=${this.#onInput}>
</uui-input>
`;
}
static styles = [
UmbTextStyles,
css`
uui-input {
width: 100%;