From 539f129dcc50ccf7ab0f68ad37c2cb3c008664f2 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 20:54:30 +0200 Subject: [PATCH 01/15] Update manifests.ts --- .../members/member/property-editor/member-picker/manifests.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/manifests.ts index da67731ba6..1f8c7cfbcc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/manifests.ts @@ -12,6 +12,7 @@ export const manifests: Array = [ propertyEditorSchemaAlias: 'Umbraco.MemberPicker', icon: 'icon-user', group: 'people', + supportsReadOnly: true, }, }, memberPickerSchemaManifest, From 8c544aa228cec919d2a247ab4f268ba04f962865 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 20:54:47 +0200 Subject: [PATCH 02/15] pass readonly to input --- .../property-editor-ui-member-picker.element.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts index a1dc8bd3e6..0ca5e50965 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts @@ -16,13 +16,27 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem @property({ attribute: false }) public config?: UmbPropertyEditorConfigCollection; + /** + * 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; + #onChange(event: CustomEvent & { target: UmbInputMemberElement }) { this.value = event.target.value; this.dispatchEvent(new UmbPropertyValueChangeEvent()); } override render() { - return html``; + return html``; } } From 388411b3e5a2c6464784b10f61ea61bdbaa4577c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 20:55:13 +0200 Subject: [PATCH 03/15] disable sorter --- .../input-member/input-member.element.ts | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts index 65a9d3eb64..5366938139 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts @@ -102,6 +102,27 @@ export class UmbInputMemberElement extends UmbFormControlMixin boolean = () => true; + /** + * 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 }) + 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 _editMemberPath = ''; From cacc22b0d03b9a77948d0f0962c32f75208557e7 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 20:55:24 +0200 Subject: [PATCH 04/15] disable add button --- .../member/components/input-member/input-member.element.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts index 5366938139..d73bfea2cc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts @@ -201,7 +201,8 @@ export class UmbInputMemberElement extends UmbFormControlMixin + label=${this.localize.term('general_choose')} + ?disabled=${this.readonly}> `; } From a944749cc7e73f9d13275f584bbb86993cfd7f04 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 20:55:45 +0200 Subject: [PATCH 05/15] remove remove button --- .../components/input-member/input-member.element.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts index d73bfea2cc..7e700ce362 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts @@ -213,6 +213,7 @@ export class UmbInputMemberElement extends UmbFormControlMixin ${this.#renderOpenButton(item)} this.#onRemove(item)} label=${this.localize.term('general_remove')}> + ${this.#renderOpenButton(item)} ${this.#renderRemoveButton(item)} `; @@ -229,6 +230,13 @@ export class UmbInputMemberElement extends UmbFormControlMixin this.#onRemove(item)} label=${this.localize.term('general_remove')}> + `; + } + static override styles = [ css` #btn-add { From 06efea061b7fcf448a0d3baca663e8a0903b1df8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 20:56:04 +0200 Subject: [PATCH 06/15] add readonly attr to ref --- .../member/components/input-member/input-member.element.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts index 7e700ce362..7bca233fbb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts @@ -209,10 +209,8 @@ export class UmbInputMemberElement extends UmbFormControlMixin + - ${this.#renderOpenButton(item)} - this.#onRemove(item)} label=${this.localize.term('general_remove')}> ${this.#renderOpenButton(item)} ${this.#renderRemoveButton(item)} From c8052388584d5a7cd02647df8d1955d02dadadb1 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 20:58:48 +0200 Subject: [PATCH 07/15] use member ref element --- .../member/components/input-member/input-member.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts index 7bca233fbb..dba26465bc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts @@ -209,11 +209,11 @@ export class UmbInputMemberElement extends UmbFormControlMixin + ${this.#renderOpenButton(item)} ${this.#renderRemoveButton(item)} - + `; } From c0276f940fcbfe60cf3f3c53d5a0f4dda29a39e9 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 21:38:32 +0200 Subject: [PATCH 08/15] 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 09/15] 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 10/15] 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 11/15] 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 12/15] 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 { From a4f0f8b18312e9e4ecd2db4e62ff81b9a489a2c6 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 08:47:44 +0200 Subject: [PATCH 13/15] Update manifests.ts --- .../src/packages/property-editors/checkbox-list/manifests.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/manifests.ts index d88679601a..768e35ff23 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/manifests.ts @@ -12,6 +12,7 @@ export const manifests: Array = [ propertyEditorSchemaAlias: 'Umbraco.CheckBoxList', icon: 'icon-bulleted-list', group: 'lists', + supportsReadOnly: true, settings: { properties: [ { From 9d8d82860921d9e8e6355bec79d8d28df3e6ba43 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 08:47:56 +0200 Subject: [PATCH 14/15] pass readonly to input --- .../property-editor-ui-checkbox-list.element.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/property-editor-ui-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/property-editor-ui-checkbox-list.element.ts index 0eb81cc05c..45d99914cb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/property-editor-ui-checkbox-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/property-editor-ui-checkbox-list.element.ts @@ -39,6 +39,15 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implem } } + /** + * 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 _list: UmbInputCheckboxListElement['list'] = []; @@ -52,6 +61,7 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implem `; } From 2403a066d31e8d6fb9970c4b5df0320221cf5092 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 22 Aug 2024 08:51:47 +0200 Subject: [PATCH 15/15] pass readonly to uui-checkbox --- .../input-checkbox-list.element.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/components/input-checkbox-list/input-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/components/input-checkbox-list/input-checkbox-list.element.ts index eba6f09baf..14ee1cf435 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/components/input-checkbox-list/input-checkbox-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/components/input-checkbox-list/input-checkbox-list.element.ts @@ -29,6 +29,15 @@ export class UmbInputCheckboxListElement extends UUIFormControlMixin(UmbLitEleme return this.selection.join(','); } + /** + * 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; + protected override getFormElement() { return undefined; } @@ -64,7 +73,11 @@ export class UmbInputCheckboxListElement extends UUIFormControlMixin(UmbLitEleme } #renderCheckbox(item: (typeof this.list)[0]) { - return html``; + return html``; } static override styles = [