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

Slider: Ensured config values

Browse Source
This commit is contained in:
leekelleher
2024-05-24 21:10:26 +01:00
parent 48ac1c19c5
commit ff417d8d74
1 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import type { UmbInputSliderElement } from '../../core/components/input-slider/input-slider.element.js';
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { customElement, html, 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';
@@ -14,7 +14,7 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
value: { to?: number; from?: number } | undefined = undefined;
@state()
_enableRange?: boolean;
_enableRange = false;
@state()
_initVal1?: number;
@@ -23,21 +23,23 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
_initVal2?: number;
@state()
_step?: number;
_step = 1;
@state()
_min?: number;
_min = 0;
@state()
_max?: number;
_max = 100;
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
this._enableRange = config?.getValueByAlias('enableRange');
this._initVal1 = config?.getValueByAlias('initVal1');
this._initVal2 = config?.getValueByAlias('initVal2');
this._step = config?.getValueByAlias('step');
this._min = config?.getValueByAlias('minVal');
this._max = config?.getValueByAlias('maxVal');
if (!config) return;
this._enableRange = Boolean(config.getValueByAlias('enableRange')) ?? false;
this._initVal1 = Number(config.getValueByAlias('initVal1'));
this._initVal2 = Number(config.getValueByAlias('initVal2'));
this._step = Number(config.getValueByAlias('step')) ?? 1;
this._min = Number(config.getValueByAlias('minVal')) ?? 0;
this._max = Number(config.getValueByAlias('maxVal')) ?? 100;
}
#getValueObject(value: string) {
@@ -45,21 +47,23 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
return { from, to: to ?? from };
}
#onChange(event: CustomEvent) {
const element = event.target as UmbInputSliderElement;
this.value = this.#getValueObject(element.value as string);
#onChange(event: CustomEvent & { target: UmbInputSliderElement }) {
this.value = this.#getValueObject(event.target.value as string);
this.dispatchEvent(new UmbPropertyValueChangeEvent());
}
render() {
return html`<umb-input-slider
.valueLow=${this.value?.from ?? this._initVal1 ?? 0}
.valueHigh=${this.value?.to ?? this._initVal2 ?? 0}
.step=${this._step ?? 0}
.min=${this._min ?? 0}
.max=${this._max ?? 0}
?enable-range=${this._enableRange}
@change=${this.#onChange}></umb-input-slider>`;
return html`
<umb-input-slider
.valueLow=${this.value?.from ?? this._initVal1 ?? 0}
.valueHigh=${this.value?.to ?? this._initVal2 ?? 0}
.step=${this._step}
.min=${this._min}
.max=${this._max}
?enable-range=${this._enableRange}
@change=${this.#onChange}>
</umb-input-slider>
`;
}
}