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 6539ef3229..88a9c656f2 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 @@ -3,6 +3,7 @@ import { css, html, nothing, repeat, customElement, property, state } from '@umb import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { UmbInputEvent, UmbChangeEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter'; export type MultipleTextStringValue = Array; @@ -10,11 +11,43 @@ export interface MultipleTextStringValueItem { value: string; } +const SORTER_CONFIG: UmbSorterConfig = { + compareElementToModel: (element: HTMLElement, model: MultipleTextStringValueItem) => { + return element.getAttribute('data-sort-entry-id') === model.value; + }, + querySelectModelToElement: (container: HTMLElement, modelEntry: MultipleTextStringValueItem) => { + return container.querySelector('data-sort-entry-id=[' + modelEntry.value + ']'); + }, + identifier: 'Umb.SorterIdentifier.ColorEditor', + itemSelector: 'umb-input-multiple-text-string-item', + containerSelector: '#sorter-wrapper', +}; + /** * @element umb-input-multiple-text-string */ @customElement('umb-input-multiple-text-string') export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitElement) { + #prevalueSorter = new UmbSorterController(this, { + ...SORTER_CONFIG, + + performItemInsert: (args) => { + const frozenArray = [...this.items]; + const indexToMove = frozenArray.findIndex((x) => x.value === args.item.value); + + frozenArray.splice(indexToMove, 1); + frozenArray.splice(args.newIndex, 0, args.item); + this.items = frozenArray; + + this.dispatchEvent(new UmbChangeEvent()); + + return true; + }, + performItemRemove: (args) => { + return true; + }, + }); + /** * This is a minimum amount of selected items in this input. * @type {number} @@ -106,6 +139,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); } // TODO: Some inputs might not have a value that is either FormDataEntryValue or FormData. @@ -156,7 +190,8 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl } render() { - return html` ${this.#renderItems()} ${this.#renderAddButton()} `; + return html`
${this.#renderItems()}
+ ${this.#renderAddButton()} `; } #renderItems() { @@ -168,6 +203,7 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl html` this.#onInput(event, index)} @delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}" ?disabled=${this.disabled} @@ -197,6 +233,18 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl #action { display: block; } + + .--umb-sorter-placeholder { + position: relative; + visibility: hidden; + } + .--umb-sorter-placeholder::after { + content: ''; + position: absolute; + inset: 0px; + border-radius: var(--uui-border-radius); + border: 1px dashed var(--uui-color-divider-emphasis); + } `, ]; }