From 2a5ca6e31d827e97816cf187dfcf7fc615ca238b Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Fri, 24 May 2024 19:58:55 +0100
Subject: [PATCH] MultipleTextstring: UI polish

- Added mouse cursor "move" to the handle
- Disabled sorting for disable/readonly
- Made remove buttons more subtle
---
 ...input-multiple-text-string-item.element.ts | 40 ++++++++------
 .../input-multiple-text-string.element.ts     | 55 +++++++++++++------
 ...-editor-ui-multiple-text-string.element.ts | 35 +++++++-----
 3 files changed, 81 insertions(+), 49 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts
index 3713da212d..5ecc6e2186 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts
@@ -1,9 +1,9 @@
-import { css, html, nothing, customElement, property, query } from '@umbraco-cms/backoffice/external/lit';
-import type { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { css, customElement, html, nothing, property, query, when } from '@umbraco-cms/backoffice/external/lit';
 import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
 import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import type { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
 /**
  * @element umb-input-multiple-text-string-item
@@ -77,31 +77,35 @@ export class UmbInputMultipleTextStringItemElement extends UUIFormControlMixin(U
 
 	render() {
 		return html`
-			${this.disabled || this.readonly ? nothing : html`<uui-icon name="icon-navigation"></uui-icon>`}
+			${this.disabled || this.readonly ? nothing : html`<uui-icon name="icon-navigation" class="handle"></uui-icon>`}
+
 			<uui-form-validation-message id="validation-message" @invalid=${this.#onInvalid} @valid=${this.#onValid}>
 				<uui-input
 					id="input"
 					label="Value"
-					value="${this.value}"
-					@input="${this.#onInput}"
-					@change="${this.#onChange}"
+					value=${this.value}
+					@input=${this.#onInput}
+					@change=${this.#onChange}
 					?disabled=${this.disabled}
 					?readonly=${this.readonly}
-					required="${this.required}"
+					required=${this.required}
 					required-message="Value is missing"></uui-input>
 			</uui-form-validation-message>
 
-			${this.readonly
-				? nothing
-				: html`<uui-button
-						label="Delete ${this.value}"
-						look="primary"
+			${when(
+				!this.readonly,
+				() => html`
+					<uui-button
+						compact
 						color="danger"
-						@click="${this.#onDelete}"
+						label="${this.localize.term('general_remove')} ${this.value}"
+						look="outline"
 						?disabled=${this.disabled}
-						compact>
+						@click=${this.#onDelete}>
 						<uui-icon name="icon-trash"></uui-icon>
-					</uui-button>`}
+					</uui-button>
+				`,
+			)}
 		`;
 	}
 
@@ -121,6 +125,10 @@ export class UmbInputMultipleTextStringItemElement extends UUIFormControlMixin(U
 			#input {
 				width: 100%;
 			}
+
+			.handle {
+				cursor: move;
+			}
 		`,
 	];
 }
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 92b12a1ede..5f87ab380b 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
@@ -74,7 +74,16 @@ export class UmbInputMultipleTextStringElement extends UmbFormControlMixin<undef
 	 * @default false
 	 */
 	@property({ type: Boolean, reflect: true })
-	disabled = false;
+	public set disabled(value) {
+		this.#disabled = value;
+		if (value) {
+			this.#sorter.disable();
+		}
+	}
+	public get disabled() {
+		return this.#disabled;
+	}
+	#disabled = false;
 
 	/**
 	 * Makes the input readonly
@@ -83,7 +92,16 @@ export class UmbInputMultipleTextStringElement extends UmbFormControlMixin<undef
 	 * @default false
 	 */
 	@property({ type: Boolean, reflect: true })
-	readonly = false;
+	public set readonly(value) {
+		this.#readonly = value;
+		if (value) {
+			this.#sorter.disable();
+		}
+	}
+	public get readonly() {
+		return this.#readonly;
+	}
+	#readonly = false;
 
 	constructor() {
 		super();
@@ -182,32 +200,33 @@ export class UmbInputMultipleTextStringElement extends UmbFormControlMixin<undef
 			${repeat(
 				this._items,
 				(item, index) => index,
-				(item, index) =>
-					html`<umb-input-multiple-text-string-item
-						value=${item}
+				(item, index) => html`
+					<umb-input-multiple-text-string-item
 						name="item-${index}"
 						data-sort-entry-id=${item}
-						@input=${(event: UmbInputEvent) => this.#onInput(event, index)}
-						@delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}"
+						required
+						required-message="Item ${index + 1} is missing a value"
+						value=${item}
 						?disabled=${this.disabled}
 						?readonly=${this.readonly}
-						required
-						required-message="Item ${index + 1} is missing a value"></umb-input-multiple-text-string-item>`,
+						@delete=${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}
+						@input=${(event: UmbInputEvent) => this.#onInput(event, index)}>
+					</umb-input-multiple-text-string-item>
+				`,
 			)}
 		`;
 	}
 
 	#renderAddButton() {
+		if (this.disabled || this.readonly) return nothing;
 		return html`
-			${this.disabled || this.readonly
-				? nothing
-				: html`<uui-button
-						id="action"
-						label="Add"
-						look="placeholder"
-						color="default"
-						@click="${this.#onAdd}"
-						?disabled=${this.disabled}></uui-button>`}
+			<uui-button
+				color="default"
+				id="action"
+				label="Add"
+				look="placeholder"
+				?disabled=${this.disabled}
+				@click=${this.#onAdd}></uui-button>
 		`;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/property-editor-ui-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
index 5cbb4572b2..3a3d41ca74 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
@@ -1,10 +1,10 @@
 import { UmbPropertyValueChangeEvent } from '../../core/property-editor/index.js';
+import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbInputMultipleTextStringElement } from '@umbraco-cms/backoffice/components';
 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 { UmbInputMultipleTextStringElement } from '@umbraco-cms/backoffice/components';
 
 /**
  * @element umb-property-editor-ui-multiple-text-string
@@ -15,8 +15,10 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement
 	value?: Array<string>;
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		this._limitMin = config?.getValueByAlias('minNumber');
-		this._limitMax = config?.getValueByAlias('maxNumber');
+		if (!config) return;
+
+		this._min = Number(config.getValueByAlias('min')) || 0;
+		this._max = Number(config.getValueByAlias('max')) || Infinity;
 	}
 
 	/**
@@ -47,10 +49,10 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement
 	required = false;
 
 	@state()
-	private _limitMin?: number;
+	private _min = 0;
 
 	@state()
-	private _limitMax?: number;
+	private _max = Infinity;
 
 	#onChange(event: UmbChangeEvent) {
 		event.stopPropagation();
@@ -60,14 +62,17 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement
 	}
 
 	render() {
-		return html`<umb-input-multiple-text-string
-			.items="${this.value ?? []}"
-			min="${ifDefined(this._limitMin)}"
-			max="${ifDefined(this._limitMax)}"
-			@change=${this.#onChange}
-			?disabled=${this.disabled}
-			?readonly=${this.readonly}
-			?required=${this.required}></umb-input-multiple-text-string>`;
+		return html`
+			<umb-input-multiple-text-string
+				max=${this._max}
+				min=${this._min}
+				.items=${this.value ?? []}
+				?disabled=${this.disabled}
+				?readonly=${this.readonly}
+				?required=${this.required}
+				@change=${this.#onChange}>
+			</umb-input-multiple-text-string>
+		`;
 	}
 }