yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Select property-editor: support name/value option data

Browse Source
This commit is contained in:
leekelleher
2024-05-14 11:25:16 +01:00
parent c1c42329bf
commit 5bf48099d3
2 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/Umbraco.Web.UI.Client/src/packages/property-editors/select/property-editor-ui-select.element.ts
View File

@@ -1,4 +1,4 @@
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
@@ -13,23 +13,29 @@ export class UmbPropertyEditorUISelectElement extends UmbLitElement implements U
@property()
value?: string = '';
@state()
private _list: Array<Option> = [];
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
if (!config) return;
const listData = config.getValueByAlias<string[]>('items');
this._list = listData?.map((option) => ({ value: option, name: option, selected: option === this.value })) ?? [];
const items = config.getValueByAlias('items');
if (Array.isArray(items) && items.length > 0) {
this._options =
typeof items[0] === 'string'
? items.map((item) => ({ name: item, value: item, selected: item === this.value }))
: items.map((item) => ({ name: item.name, value: item.value, selected: item.value === this.value }));
}
}
@state()
private _options: Array<Option> = [];
#onChange(event: UUISelectEvent) {
this.value = event.target.value as string;
this.dispatchEvent(new UmbPropertyValueChangeEvent());
}
render() {
return html`<uui-select .options=${this._list} @change=${this.#onChange}></uui-select>`;
return html`<uui-select .options=${this._options} @change=${this.#onChange}></uui-select>`;
}
}

2
src/Umbraco.Web.UI.Client/src/packages/property-editors/select/property-editor-ui-select.test.ts
View File

@@ -6,7 +6,7 @@ describe('UmbPropertyEditorUISelectElement', () => {
let element: UmbPropertyEditorUISelectElement;
beforeEach(async () => {
element = await fixture(html` <umb-property-editor-ui-select></umb-property-editor-ui-select> `);
element = await fixture(html`<umb-property-editor-ui-select></umb-property-editor-ui-select>`);
});
it('is defined with its own instance', () => {