From b6fae85a8318385f02a7be9daf4624cf584a0b15 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 29 Feb 2024 17:32:24 +0000 Subject: [PATCH 1/3] DataType config clean-up: Dropdown.Flexible Moves `multiple` and `items` from the UI to the schema settings. --- .../schemas/Umbraco.Dropdown.Flexible.ts | 14 ++++++++++++++ .../core/property-editor/uis/dropdown/manifests.ts | 14 -------------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.Dropdown.Flexible.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.Dropdown.Flexible.ts index c9fb91ab8b..98d4b1ff7d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.Dropdown.Flexible.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.Dropdown.Flexible.ts @@ -7,5 +7,19 @@ export const manifest: ManifestPropertyEditorSchema = { alias: 'Umbraco.DropDown.Flexible', meta: { defaultPropertyEditorUiAlias: 'Umb.PropertyEditorUi.Dropdown', + settings: { + properties: [ + { + alias: 'multiple', + label: 'Enable multiple choice', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle', + }, + { + alias: 'items', + label: 'Add options', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.MultipleTextString', + }, + ], + }, }, }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/manifests.ts index 117cefb0db..c639aea701 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/manifests.ts @@ -10,19 +10,5 @@ export const manifest: ManifestPropertyEditorUi = { propertyEditorSchemaAlias: 'Umbraco.DropDown.Flexible', icon: 'icon-time', group: 'pickers', - settings: { - properties: [ - { - alias: 'multiple', - label: 'Enable multiple choice', - propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle', - }, - { - alias: 'items', - label: 'Add options', - propertyEditorUiAlias: 'Umb.PropertyEditorUi.MultipleTextString', - }, - ], - }, }, }; From ec48ad53e0251655e1ec7b68da704d6804c6ea42 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 29 Feb 2024 17:44:27 +0000 Subject: [PATCH 2/3] Refactored MultipleTextString value structure The server sends a `string[]` instead of an `MultipleTextStringValueItem[]` --- .../input-multiple-text-string.element.ts | 20 +++++++------------ ...-editor-ui-multiple-text-string.element.ts | 4 ++-- 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts index 996b992a0b..bbc54b174e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts @@ -7,12 +7,6 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; -export type MultipleTextStringValue = Array; - -export interface MultipleTextStringValueItem { - value: string; -} - const SORTER_CONFIG: UmbSorterConfig = { getUniqueOfElement: (element) => { return element.getAttribute('data-sort-entry-id'); @@ -120,13 +114,13 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl } @state() - private _items: MultipleTextStringValue = []; + private _items: Array = []; @property({ type: Array }) - public get items(): MultipleTextStringValue { + public get items(): Array { return this._items; } - public set items(items: MultipleTextStringValue) { + public set items(items: Array) { // TODO: when we have a way to overwrite the missing value validator we can remove this this.value = items?.length > 0 ? 'some value' : ''; this._items = items ?? []; @@ -146,7 +140,7 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl */ #onAdd() { - this._items = [...this._items, { value: '' }]; + this._items = [...this._items, '']; this.pristine = false; this.dispatchEvent(new UmbChangeEvent()); this.#focusNewItem(); @@ -156,7 +150,7 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl event.stopPropagation(); const target = event.currentTarget as UmbInputMultipleTextStringItemElement; const value = target.value as string; - this._items = this._items.map((item, index) => (index === currentIndex ? { value } : item)); + this._items = this._items.map((item, index) => (index === currentIndex ? value : item)); this.dispatchEvent(new UmbChangeEvent()); } @@ -192,9 +186,9 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl (item, index) => index, (item, index) => html` this.#onInput(event, index)} @delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}" ?disabled=${this.disabled} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts index 6e9ff243ed..328ac08bb3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts @@ -4,7 +4,7 @@ import { html, customElement, property, state, ifDefined } from '@umbraco-cms/ba import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { MultipleTextStringValue, UmbInputMultipleTextStringElement } from '@umbraco-cms/backoffice/components'; +import type { UmbInputMultipleTextStringElement } from '@umbraco-cms/backoffice/components'; /** * @element umb-property-editor-ui-multiple-text-string @@ -12,7 +12,7 @@ import type { MultipleTextStringValue, UmbInputMultipleTextStringElement } from @customElement('umb-property-editor-ui-multiple-text-string') export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property({ type: Array }) - public value: MultipleTextStringValue = []; + public value: Array = []; @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { From 0fadd802c8f98415ab21e5fe3744ca9cd3a0f4aa Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 29 Feb 2024 17:44:46 +0000 Subject: [PATCH 3/3] Refactored MultipleTextString's sorter code --- .../input-multiple-text-string.element.ts | 29 ++++++++----------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts index bbc54b174e..93b381c130 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts @@ -1,31 +1,26 @@ import type { UmbInputMultipleTextStringItemElement } from './input-multiple-text-string-item.element.js'; import { css, html, nothing, repeat, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; -import type { UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; - -const SORTER_CONFIG: UmbSorterConfig = { - getUniqueOfElement: (element) => { - return element.getAttribute('data-sort-entry-id'); - }, - getUniqueOfModel: (modelEntry) => { - return modelEntry.value; - }, - identifier: 'Umb.SorterIdentifier.ColorEditor', - itemSelector: 'umb-input-multiple-text-string-item', - containerSelector: '#sorter-wrapper', -}; +import type { UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event'; /** * @element umb-input-multiple-text-string */ @customElement('umb-input-multiple-text-string') export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitElement) { - #prevalueSorter = new UmbSorterController(this, { - ...SORTER_CONFIG, + #sorter = new UmbSorterController(this, { + getUniqueOfElement: (element) => { + return element.getAttribute('data-sort-entry-id'); + }, + getUniqueOfModel: (modelEntry: string) => { + return modelEntry; + }, + identifier: 'Umb.SorterIdentifier.ColorEditor', + itemSelector: 'umb-input-multiple-text-string-item', + containerSelector: '#sorter-wrapper', onChange: ({ model }) => { const oldValue = this._items; this._items = model; @@ -124,7 +119,7 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl // TODO: when we have a way to overwrite the missing value validator we can remove this this.value = items?.length > 0 ? 'some value' : ''; this._items = items ?? []; - this.#prevalueSorter.setModel(this.items); + this.#sorter.setModel(this.items); } // TODO: Some inputs might not have a value that is either FormDataEntryValue or FormData.