From 4b7a49b9d2873b0085698def61dd37eb2aeea69a Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 29 May 2024 13:31:45 +0200 Subject: [PATCH 1/4] sets default values when creating a datatype --- .../src/packages/property-editors/slider/Umbraco.Slider.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/Umbraco.Slider.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/Umbraco.Slider.ts index 5a363f63be..12aa8f86f0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/Umbraco.Slider.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/Umbraco.Slider.ts @@ -23,7 +23,8 @@ export const manifest: ManifestPropertyEditorSchema = { ], defaultData: [ { alias: 'minVal', value: 0 }, - { alias: 'maxVal', value: 0 }, + { alias: 'maxVal', value: 100 }, + { alias: 'step', value: 1 }, ], }, }, From c6bb2c412aa23828ae1ee19fd67af9d9db0bea43 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 29 May 2024 13:31:57 +0200 Subject: [PATCH 2/4] some config logic --- .../property-editor-ui-slider.element.ts | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/property-editor-ui-slider.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/property-editor-ui-slider.element.ts index 511382b107..7a4df169fc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/property-editor-ui-slider.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/property-editor-ui-slider.element.ts @@ -5,13 +5,15 @@ 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; @@ -37,9 +39,20 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U 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. + const step = (config.getValueByAlias('step') ?? 1) as number; + this._step = step > 0 ? step : 1; + this._min = Number(config.getValueByAlias('minVal')) ?? 0; this._max = Number(config.getValueByAlias('maxVal')) ?? 100; + + if (this._min === this._max) { + // Why is the configuration giving us a 0 as default, rather than just undefined..? + + console.log(this._min, this._max, this._step, this._initVal1, this._initVal2); + throw new Error('Property Editor Slider: min and max are currently equal. Please change your configuration.'); + } } #getValueObject(value: string) { @@ -56,7 +69,7 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U return html` Date: Wed, 29 May 2024 14:51:52 +0200 Subject: [PATCH 3/4] default values --- .../src/packages/property-editors/slider/Umbraco.Slider.ts | 1 - .../src/packages/property-editors/slider/manifests.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/Umbraco.Slider.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/Umbraco.Slider.ts index 12aa8f86f0..763780b667 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/Umbraco.Slider.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/Umbraco.Slider.ts @@ -24,7 +24,6 @@ export const manifest: ManifestPropertyEditorSchema = { defaultData: [ { alias: 'minVal', value: 0 }, { alias: 'maxVal', value: 100 }, - { alias: 'step', value: 1 }, ], }, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/manifests.ts index 52a4dfe8d4..16600162ff 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/manifests.ts @@ -50,7 +50,7 @@ export const manifests: Array = [ }, { alias: 'step', - value: 0, + value: 1, }, ], }, From b4bc2149c1c3cddd39787d8490a6c71c001fe117 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 29 May 2024 14:52:08 +0200 Subject: [PATCH 4/4] set init values --- .../property-editor-ui-slider.element.ts | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/property-editor-ui-slider.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/property-editor-ui-slider.element.ts index 7a4df169fc..16e4427846 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/property-editor-ui-slider.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/slider/property-editor-ui-slider.element.ts @@ -19,10 +19,10 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U _enableRange = false; @state() - _initVal1?: number; + _initVal1: number = 0; @state() - _initVal2?: number; + _initVal2: number = 1; @state() _step = 1; @@ -37,21 +37,23 @@ 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')); - // Make sure that step is higher than 0. + // 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) { - // Why is the configuration giving us a 0 as default, rather than just undefined..? - - console.log(this._min, this._max, this._step, this._initVal1, this._initVal2); - throw new Error('Property Editor Slider: min and max are currently equal. Please change your configuration.'); + 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}`, + ); } } @@ -68,8 +70,8 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U render() { return html`