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

Merge pull request #1954 from umbraco/v14/bugfix/bad-slider-configuration

Browse Source 
V14/bugfix/bad slider configuration
This commit is contained in:
Lee Kelleher
2024-05-29 14:20:33 +01:00
committed by GitHub
parent 355a5a8f8c b4bc2149c1
commit e7a7f151d6
3 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/Umbraco.Slider.ts
View File

@@ -23,7 +23,7 @@ export const manifest: ManifestPropertyEditorSchema = {
],
defaultData: [
{ alias: 'minVal', value: 0 },
{ alias: 'maxVal', value: 0 },
{ alias: 'maxVal', value: 100 },
],
},
},

2
src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/manifests.ts
View File

@@ -50,7 +50,7 @@ export const manifests: Array<ManifestTypes> = [
},
{
alias: 'step',
value: 0,
value: 1,
},
],
},

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

@@ -5,22 +5,24 @@ import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-ed
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
export type UmbSliderValue = { from: number; to: number } | undefined;
/**
* @element umb-property-editor-ui-slider
*/
@customElement('umb-property-editor-ui-slider')
export class UmbPropertyEditorUISliderElement extends UmbLitElement implements UmbPropertyEditorUiElement {
@property({ type: Object })
value: { to?: number; from?: number } | undefined = undefined;
value: UmbSliderValue | undefined;
@state()
_enableRange = false;
@state()
_initVal1?: number;
_initVal1: number = 0;
@state()
_initVal2?: number;
_initVal2: number = 1;
@state()
_step = 1;
@@ -35,11 +37,24 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
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;
// Make sure that step is higher than 0 (decimals ok).
const step = (config.getValueByAlias('step') ?? 1) as number;
this._step = step > 0 ? step : 1;
this._initVal1 = Number(config.getValueByAlias('initVal1')) ?? 0;
this._initVal2 = Number(config.getValueByAlias('initVal2')) ?? this._initVal1 + this._step;
this._min = Number(config.getValueByAlias('minVal')) ?? 0;
this._max = Number(config.getValueByAlias('maxVal')) ?? 100;
if (this._min === this._max) {
this._max = this._min + 100;
//TODO Maybe we want to show some kind of error element rather than trying to fix the mistake made by the user...?
throw new Error(
`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}`,
);
}
}
#getValueObject(value: string) {
@@ -55,8 +70,8 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
render() {
return html`
<umb-input-slider
.valueLow=${this.value?.from ?? this._initVal1 ?? 0}
.valueHigh=${this.value?.to ?? this._initVal2 ?? 0}
.valueLow=${this.value?.from ?? this._initVal1}
.valueHigh=${this.value?.to ?? this._initVal2}
.step=${this._step}
.min=${this._min}
.max=${this._max}