From 8b33b62f8ce12437bc90f41a2fbfea24c833e1a5 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Mon, 20 Feb 2023 14:11:10 +0100 Subject: [PATCH] add setter for multi url to handle form value, and added change event after updates --- .../input-multi-url-picker.element.ts | 53 +++++++++++++------ ...erty-editor-ui-multi-url-picker.element.ts | 7 ++- 2 files changed, 43 insertions(+), 17 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts index 439804e744..6651373138 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts @@ -17,6 +17,12 @@ export interface MultiUrlData { url?: string; } +/** + * @element umb-input-multi-url-picker + * @fires change - when the value of the input changes + * @fires blur - when the input loses focus + * @fires focus - when the input gains focus + */ @customElement('umb-input-multi-url-picker') export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElement) { static styles = [ @@ -77,16 +83,28 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen ignoreUserStartNodes?: boolean; /** - * @type {"small" | "medium" | "large"} + * @type {UUIModalSidebarSize} * @attr * @default "small" */ @property() overlaySize?: UUIModalSidebarSize; - @property({ attribute: 'urls' }) - multiUrls: Array = []; + /** + * @type {Array} + * @default [] + */ + @property({ attribute: false }) + set urls(data: Array) { + this._urls = data; + super.value = this._urls.map((x) => x.url).join(','); + } + get urls() { + return this._urls; + } + + private _urls: Array = []; private _modalService?: UmbModalService; constructor() { @@ -94,12 +112,12 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen this.addValidator( 'rangeUnderflow', () => this.minMessage, - () => !!this.min && this.multiUrls.length < this.min + () => !!this.min && this.urls.length < this.min ); this.addValidator( 'rangeOverflow', () => this.maxMessage, - () => !!this.max && this.multiUrls.length > this.max + () => !!this.max && this.urls.length > this.max ); this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { @@ -108,8 +126,20 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen } private _removeItem(index: number) { - this.multiUrls.splice(index, 1); + this.urls.splice(index, 1); + this._dispatchChangeEvent(); + } + + private _setSelection(selection: MultiUrlData, index?: number) { + if (index !== undefined && index >= 0) this.urls[index] = selection; + else this.urls.push(selection); + + this._dispatchChangeEvent(); + } + + private _dispatchChangeEvent() { this.requestUpdate(); + this.dispatchEvent(new CustomEvent('change', { composed: true, bubbles: true })); } private _openPicker(data?: MultiUrlData, index?: number) { @@ -131,17 +161,12 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen }); modalHandler?.onClose().then((newUrl: MultiUrlData) => { if (!newUrl) return; - - if (index !== undefined && index >= 0) this.multiUrls[index] = newUrl; - else this.multiUrls.push(newUrl); - - this.requestUpdate(); - //TODO: onChange event? + this._setSelection(newUrl, index); }); } render() { - return html`${this.multiUrls?.map((link, index) => this._renderItem(link, index))} + return html`${this.urls?.map((link, index) => this._renderItem(link, index))} Add`; } @@ -159,8 +184,6 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen } } -export default UmbInputMultiUrlPickerElement; - declare global { interface HTMLElementTagNameMap { 'umb-input-multi-url-picker': UmbInputMultiUrlPickerElement; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts index 281ed904b1..59d0abd9e4 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts @@ -2,7 +2,10 @@ import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property, state } from 'lit/decorators.js'; import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar'; -import { MultiUrlData } from '../../../../shared/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'; @@ -50,7 +53,7 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement { private _minNumber?: number; private _onChange(event: CustomEvent) { - //TODO: Do something about the values + this.value = (event.target as UmbInputMultiUrlPickerElement).urls; this.dispatchEvent(new CustomEvent('property-value-change')); }