validation?

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts

@@ -3,11 +3,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UmbLitElement } from '@umbraco-cms/element';
-import { FolderTreeItemModel } from '@umbraco-cms/backend-api';
 import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal';
-import { UmbObserverController } from '@umbraco-cms/observable-api';
 
-export interface Link {
+export interface MultiUrlData {
 	icon?: string;
 	name?: string;
 	published?: boolean;
@@ -86,7 +84,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 	overlaySize?: 'small' | 'medium' | 'large' | 'full';
 
 	@property()
-	links: Array<Link> = [];
+	multiUrls: Array<MultiUrlData> = [];
 
 	private _modalService?: UmbModalService;
 
@@ -95,12 +93,12 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 		this.addValidator(
 			'rangeUnderflow',
 			() => this.minMessage,
-			() => !!this.min && this.links.length < this.min
+			() => !!this.min && this.multiUrls.length < this.min
 		);
 		this.addValidator(
 			'rangeOverflow',
 			() => this.maxMessage,
-			() => !!this.max && this.links.length > this.max
+			() => !!this.max && this.multiUrls.length > this.max
 		);
 
 		this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => {
@@ -109,11 +107,11 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 	}
 
 	private _removeItem(index: number) {
-		this.links.splice(index, 1);
+		this.multiUrls.splice(index, 1);
 		this.requestUpdate();
 	}
 
-	private _openPicker(data?: Link, index?: number) {
+	private _openPicker(data?: MultiUrlData, index?: number) {
 		const modalHandler = this._modalService?.linkPicker(
 			{
 				name: data?.name || undefined,
@@ -130,21 +128,21 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 				overlaySize: this.overlaySize || 'small',
 			}
 		);
-		modalHandler?.onClose().then((newUrl: Link) => {
+		modalHandler?.onClose().then((newUrl: MultiUrlData) => {
 			if (!newUrl) return;
 
-			if (index !== undefined && index >= 0) this.links[index] = newUrl;
-			else this.links.push(newUrl);
+			if (index !== undefined && index >= 0) this.multiUrls[index] = newUrl;
+			else this.multiUrls.push(newUrl);
 			this.requestUpdate();
 		});
 	}
 
 	render() {
-		return html`${this.links?.map((link, index) => this._renderItem(link, index))}
+		return html`${this.multiUrls?.map((link, index) => this._renderItem(link, index))}
 			<uui-button look="placeholder" label="Add" @click=${this._openPicker}>Add</uui-button>`;
 	}
 
-	private _renderItem(link: Link, index: number) {
+	private _renderItem(link: MultiUrlData, index: number) {
 		return html`<uui-ref-node .name="${link.name || ''}" .detail="${(link.url || '') + (link.queryString || '')}">
 			<uui-icon slot="icon" name="${link.icon || 'umb:link'}"></uui-icon>
 			<uui-action-bar slot="actions">

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts

@@ -1,8 +1,10 @@
 import { html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { UmbInputMultiUrlPickerElement } from '../../../components/input-multi-url-picker/input-multi-url-picker.element';
+import {
+	UmbInputMultiUrlPickerElement,
+	MultiUrlData,
+} from '../../../../shared/components/input-multi-url-picker/input-multi-url-picker.element';
 import { UmbLitElement } from '@umbraco-cms/element';
 import { DataTypePropertyModel } from '@umbraco-cms/backend-api';
 
@@ -14,14 +16,8 @@ import { DataTypePropertyModel } from '@umbraco-cms/backend-api';
 export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement {
 	static styles = [UUITextStyles];
 
-	private _value: string[] = [];
-	@property({ type: Array })
-	public get value(): string[] {
-		return this._value;
-	}
-	public set value(value: string[]) {
-		this._value = value || [];
-	}
+	@property()
+	value: MultiUrlData[] = [];
 
 	@property({ type: Array, attribute: false })
 	public set config(config: DataTypePropertyModel[]) {
@@ -56,7 +52,7 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement {
 	private _minNumber?: number;
 
 	private _onChange(event: CustomEvent) {
-		//this._value = (event.target as UmbInputMultiUrlPickerElement);
+		//TODO: Do something about the values
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
@@ -68,7 +64,7 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement {
 			.ignoreUserStartNodes=${this._ignoreUserStartNodes}
 			.max=${this._maxNumber}
 			.min=${this._minNumber}
-			.selectedKeys="${this._value}"></umb-input-multi-url-picker>`;
+			.links="${this.value}"></umb-input-multi-url-picker>`;
 	}
 }