From c0276f940fcbfe60cf3f3c53d5a0f4dda29a39e9 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 21:38:32 +0200 Subject: [PATCH 1/5] Update manifests.ts --- .../src/packages/multi-url-picker/property-editor/manifests.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/property-editor/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/property-editor/manifests.ts index cfab088c70..04ddf68a6a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/property-editor/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/property-editor/manifests.ts @@ -11,6 +11,7 @@ export const manifests = [ propertyEditorSchemaAlias: 'Umbraco.MultiUrlPicker', icon: 'icon-link', group: 'pickers', + supportsReadOnly: true, settings: { properties: [ { From c000d223457bcdec2656d5818d1b391a7733fea2 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 21:38:46 +0200 Subject: [PATCH 2/5] pass readonly --- .../property-editor-ui-multi-url-picker.element.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/property-editor/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/property-editor/property-editor-ui-multi-url-picker.element.ts index bf8dd06020..56bb3fdfd8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/property-editor/property-editor-ui-multi-url-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/property-editor/property-editor-ui-multi-url-picker.element.ts @@ -27,6 +27,15 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement impl this._overlaySize = config.getValueByAlias('overlaySize') ?? 'small'; } + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + #parseInt(value: unknown, fallback: number): number { const num = Number(value); return !isNaN(num) && num > 0 ? num : fallback; @@ -74,6 +83,7 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement impl .urls=${this.value ?? []} .variantId=${this._variantId} ?hide-anchor=${this._hideAnchor} + ?readonly=${this.readonly} @change=${this.#onChange}> `; From 846dd48b1702a04bd56a422ce4307601013dda25 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 21:48:40 +0200 Subject: [PATCH 3/5] add readonly prop --- .../input-multi-url/input-multi-url.element.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts index 1379f62ef0..4efc1b51b9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts @@ -124,6 +124,15 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement, #urls: Array = []; + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + @state() private _modalRoute?: UmbModalRouteBuilder; From af7ac7e5c08e32b6fffe942f113341d26b1bd8cb Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 21:48:49 +0200 Subject: [PATCH 4/5] remove unused input --- .../link-picker-modal/link-picker-modal.element.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.ts index e9bc9db5d7..88060e1e19 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.ts @@ -181,11 +181,6 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement ${this.localize.term('defaultdialogs_linkToPage')}
- Date: Wed, 21 Aug 2024 22:06:48 +0200 Subject: [PATCH 5/5] disable sorter when read only --- .../input-multi-url.element.ts | 52 +++++++++++++++---- 1 file changed, 42 insertions(+), 10 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts index 4efc1b51b9..13be644661 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts @@ -1,6 +1,15 @@ import type { UmbLinkPickerLink } from '../../link-picker-modal/types.js'; import { UMB_LINK_PICKER_MODAL } from '../../link-picker-modal/link-picker-modal.token.js'; -import { css, customElement, html, property, repeat, state } from '@umbraco-cms/backoffice/external/lit'; +import { + css, + customElement, + html, + ifDefined, + nothing, + property, + repeat, + state, +} from '@umbraco-cms/backoffice/external/lit'; import { simpleHashCode } from '@umbraco-cms/backoffice/observable-api'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -131,7 +140,19 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement, * @default false */ @property({ type: Boolean, reflect: true }) - readonly = false; + public get readonly() { + return this.#readonly; + } + public set readonly(value) { + this.#readonly = value; + + if (this.#readonly) { + this.#sorter.disable(); + } else { + this.#sorter.enable(); + } + } + #readonly = false; @state() private _modalRoute?: UmbModalRouteBuilder; @@ -257,7 +278,8 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement, id="btn-add" look="placeholder" label=${this.localize.term('general_add')} - .href=${this._modalRoute?.({ index: -1 })}> + .href=${this._modalRoute?.({ index: -1 })} + ?disabled=${this.readonly}> `; } @@ -276,24 +298,34 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement, #renderItem(link: UmbLinkPickerLink, index: number) { const unique = this.#getUnique(link); - const href = this._modalRoute?.({ index }) ?? '#'; + const href = this.readonly ? undefined : (this._modalRoute?.({ index }) ?? undefined); return html` + detail=${(link.url || '') + (link.queryString || '')} + ?readonly=${this.readonly}> - - this.#requestRemoveItem(index)} - label=${this.localize.term('general_remove')}> + ${this.#renderEditAction(href)} ${this.#renderRemoveAction(index)} `; } + #renderEditAction(href?: string) { + if (this.readonly || !href) return nothing; + return html` `; + } + + #renderRemoveAction(index: number) { + if (this.readonly) return nothing; + return html` this.#requestRemoveItem(index)} + label=${this.localize.term('general_remove')}>`; + } + static override styles = [ css` #btn-add {