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..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,37 +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'; - -export type MultipleTextStringValue = Array; - -export interface MultipleTextStringValueItem { - value: string; -} - -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; @@ -120,17 +109,17 @@ 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 ?? []; - this.#prevalueSorter.setModel(this.items); + this.#sorter.setModel(this.items); } // TODO: Some inputs might not have a value that is either FormDataEntryValue or FormData. @@ -146,7 +135,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 +145,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 +181,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/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', - }, - ], - }, }, }; 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) {