Refactored MultipleTextString value structure
The server sends a `string[]` instead of an `MultipleTextStringValueItem[]`
This commit is contained in:
@@ -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<MultipleTextStringValueItem>;
|
||||
|
||||
export interface MultipleTextStringValueItem {
|
||||
value: string;
|
||||
}
|
||||
|
||||
const SORTER_CONFIG: UmbSorterConfig<MultipleTextStringValueItem> = {
|
||||
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<string> = [];
|
||||
|
||||
@property({ type: Array })
|
||||
public get items(): MultipleTextStringValue {
|
||||
public get items(): Array<string> {
|
||||
return this._items;
|
||||
}
|
||||
public set items(items: MultipleTextStringValue) {
|
||||
public set items(items: Array<string>) {
|
||||
// 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` <umb-input-multiple-text-string-item
|
||||
value=${item.value}
|
||||
value=${item}
|
||||
name="item-${index}"
|
||||
data-sort-entry-id=${item.value}
|
||||
data-sort-entry-id=${item}
|
||||
@input=${(event: UmbInputEvent) => this.#onInput(event, index)}
|
||||
@delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}"
|
||||
?disabled=${this.disabled}
|
||||
|
||||
@@ -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<string> = [];
|
||||
|
||||
@property({ attribute: false })
|
||||
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
|
||||
|
||||
Reference in New Issue
Block a user