From 5bf48099d3504865970438be05f616cf4b385107 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 14 May 2024 11:25:16 +0100
Subject: [PATCH] Select property-editor: support name/value option data

---
 .../property-editor-ui-select.element.ts      | 20 ++++++++++++-------
 .../select/property-editor-ui-select.test.ts  |  2 +-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/select/property-editor-ui-select.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/select/property-editor-ui-select.element.ts
index 6397494094..6ec01d16bb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/select/property-editor-ui-select.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/select/property-editor-ui-select.element.ts
@@ -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>`;
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/select/property-editor-ui-select.test.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/select/property-editor-ui-select.test.ts
index 1c5f529694..2ca23b5b4f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/select/property-editor-ui-select.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/select/property-editor-ui-select.test.ts
@@ -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', () => {