From d2b7abeae86baa6befc5f6d3c5cc5fce09ddd458 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 25 Jun 2025 11:14:22 +0100 Subject: [PATCH 1/8] Adds `labelTemplate` config to Label editor --- .../packages/property-editors/label/manifests.ts | 10 ++++++++++ .../label/property-editor-ui-label.element.ts | 16 ++++++++++++---- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/manifests.ts index aa672fc77603..7b87f756d1a4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/manifests.ts @@ -12,6 +12,16 @@ export const manifests: Array = [ group: 'common', propertyEditorSchemaAlias: 'Umbraco.Label', supportsReadOnly: true, + settings: { + properties: [ + { + alias: 'labelTemplate', + label: 'Label template', + description: 'Enter a template for the label.', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox', + }, + ], + }, }, }, labelSchemaManifest, diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts index 7d75fb8a76c1..7b9a2b4dd3ce 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts @@ -1,5 +1,5 @@ -import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { customElement, html, property, state, when } from '@umbraco-cms/backoffice/external/lit'; import type { UmbPropertyEditorUiElement, UmbPropertyEditorConfigCollection, @@ -11,17 +11,25 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; */ @customElement('umb-property-editor-ui-label') export class UmbPropertyEditorUILabelElement extends UmbLitElement implements UmbPropertyEditorUiElement { + @state() + private _labelTemplate?: string; + @property() value = ''; @property() description = ''; - @property({ attribute: false }) - public config?: UmbPropertyEditorConfigCollection; + public set config(config: UmbPropertyEditorConfigCollection | undefined) { + this._labelTemplate = config?.getValueByAlias('labelTemplate'); + } override render() { - return html`${this.value ?? ''}`; + return when( + this._labelTemplate?.length, + () => html``, + () => html`${this.value ?? ''}`, + ); } static override styles = [UmbTextStyles]; From 1e091b7177d7bdef15842e2f72e5385b0b70a81c Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 25 Jun 2025 11:14:50 +0100 Subject: [PATCH 2/8] Code tidyup for Label editor element --- .../label/property-editor-ui-label.element.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts index 7b9a2b4dd3ce..6e98d92930b9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts @@ -1,10 +1,9 @@ -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { customElement, html, property, state, when } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbPropertyEditorUiElement, UmbPropertyEditorConfigCollection, } from '@umbraco-cms/backoffice/property-editor'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; /** * @element umb-property-editor-ui-label @@ -31,12 +30,13 @@ export class UmbPropertyEditorUILabelElement extends UmbLitElement implements Um () => html`${this.value ?? ''}`, ); } - - static override styles = [UmbTextStyles]; } +/** @deprecated Should be exported as `element` only; to be removed in Umbraco 18. */ export default UmbPropertyEditorUILabelElement; +export { UmbPropertyEditorUILabelElement as element }; + declare global { interface HTMLElementTagNameMap { 'umb-property-editor-ui-label': UmbPropertyEditorUILabelElement; From 0dead53f842636f46f9fc43cebec9ebd3b30bfd5 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 25 Jun 2025 11:15:05 +0100 Subject: [PATCH 3/8] Adds "format-bytes" UFM filter --- .../src/packages/ufm/filters/format-bytes.filter.ts | 11 +++++++++++ .../src/packages/ufm/filters/manifests.ts | 7 +++++++ 2 files changed, 18 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/ufm/filters/format-bytes.filter.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/format-bytes.filter.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/format-bytes.filter.ts new file mode 100644 index 000000000000..e81a748c69e5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/format-bytes.filter.ts @@ -0,0 +1,11 @@ +import { UmbUfmFilterBase } from './base.filter.js'; +import { formatBytes } from '@umbraco-cms/backoffice/utils'; + +class UmbUfmFormatBytesFilterApi extends UmbUfmFilterBase { + filter(str?: string) { + if (str === undefined || str === null || !str.length) return ''; + return formatBytes(Number(str)); + } +} + +export { UmbUfmFormatBytesFilterApi as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts index 1e08fa9f26f3..5787a876ffc3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts @@ -8,6 +8,13 @@ export const manifests: Array = [ api: () => import('./fallback.filter.js'), meta: { alias: 'fallback' }, }, + { + type: 'ufmFilter', + alias: 'Umb.Filter.FormatBytes', + name: 'Format Bytes UFM Filter', + api: () => import('./format-bytes.filter.js'), + meta: { alias: 'format-bytes' }, + }, { type: 'ufmFilter', alias: 'Umb.Filter.Lowercase', From e6c4acb367dfe4e5f78baa7ac5bee650b30de3c2 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 25 Jun 2025 15:07:36 +0100 Subject: [PATCH 4/8] Renamed "format-bytes" to "bytes" --- .../filters/{format-bytes.filter.ts => bytes.filter.ts} | 4 ++-- .../src/packages/ufm/filters/manifests.ts | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/ufm/filters/{format-bytes.filter.ts => bytes.filter.ts} (69%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/format-bytes.filter.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts similarity index 69% rename from src/Umbraco.Web.UI.Client/src/packages/ufm/filters/format-bytes.filter.ts rename to src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts index e81a748c69e5..d3b567b09a21 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/format-bytes.filter.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts @@ -1,11 +1,11 @@ import { UmbUfmFilterBase } from './base.filter.js'; import { formatBytes } from '@umbraco-cms/backoffice/utils'; -class UmbUfmFormatBytesFilterApi extends UmbUfmFilterBase { +class UmbUfmBytesFilterApi extends UmbUfmFilterBase { filter(str?: string) { if (str === undefined || str === null || !str.length) return ''; return formatBytes(Number(str)); } } -export { UmbUfmFormatBytesFilterApi as api }; +export { UmbUfmBytesFilterApi as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts index 5787a876ffc3..eb12e0643c27 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts @@ -10,10 +10,10 @@ export const manifests: Array = [ }, { type: 'ufmFilter', - alias: 'Umb.Filter.FormatBytes', - name: 'Format Bytes UFM Filter', - api: () => import('./format-bytes.filter.js'), - meta: { alias: 'format-bytes' }, + alias: 'Umb.Filter.Bytes', + name: 'Bytes UFM Filter', + api: () => import('./bytes.filter.js'), + meta: { alias: 'bytes' }, }, { type: 'ufmFilter', From 0a55030c77057ec66fc7122871b9202d332fe36b Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 25 Jun 2025 17:16:30 +0100 Subject: [PATCH 5/8] Label element tidy-up + copilot amends --- .../label/property-editor-ui-label.element.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts index 6e98d92930b9..646dd3b0bd64 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts @@ -16,9 +16,7 @@ export class UmbPropertyEditorUILabelElement extends UmbLitElement implements Um @property() value = ''; - @property() - description = ''; - + @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { this._labelTemplate = config?.getValueByAlias('labelTemplate'); } From 29174cd80f18e9b0a41cbcdaae661beb1d018a90 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 25 Jun 2025 17:16:46 +0100 Subject: [PATCH 6/8] Added `formatBytes` options --- .../src/packages/ufm/filters/bytes.filter.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts index d3b567b09a21..727ecb3dbfc9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts @@ -2,9 +2,9 @@ import { UmbUfmFilterBase } from './base.filter.js'; import { formatBytes } from '@umbraco-cms/backoffice/utils'; class UmbUfmBytesFilterApi extends UmbUfmFilterBase { - filter(str?: string) { + filter(str?: string, decimals?: number, kilo?: number, culture?: string): string { if (str === undefined || str === null || !str.length) return ''; - return formatBytes(Number(str)); + return formatBytes(Number(str), { decimals, kilo, culture }); } } From a9f9b7259b54af3d5b161981d0baf2f8d9aa2eb1 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 25 Jun 2025 17:27:58 +0100 Subject: [PATCH 7/8] Simplified condition, thanks CodeScene --- .../src/packages/ufm/filters/bytes.filter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts index 727ecb3dbfc9..2aacfb3e1f1b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts @@ -3,7 +3,7 @@ import { formatBytes } from '@umbraco-cms/backoffice/utils'; class UmbUfmBytesFilterApi extends UmbUfmFilterBase { filter(str?: string, decimals?: number, kilo?: number, culture?: string): string { - if (str === undefined || str === null || !str.length) return ''; + if (!str?.length) return ''; return formatBytes(Number(str), { decimals, kilo, culture }); } } From c419342c23477ed081fcf65576b14c7d45799bb6 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 30 Jun 2025 08:49:21 +0100 Subject: [PATCH 8/8] Reverted element export --- .../property-editors/label/property-editor-ui-label.element.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts index 646dd3b0bd64..90f59bf98a45 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts @@ -30,11 +30,8 @@ export class UmbPropertyEditorUILabelElement extends UmbLitElement implements Um } } -/** @deprecated Should be exported as `element` only; to be removed in Umbraco 18. */ export default UmbPropertyEditorUILabelElement; -export { UmbPropertyEditorUILabelElement as element }; - declare global { interface HTMLElementTagNameMap { 'umb-property-editor-ui-label': UmbPropertyEditorUILabelElement;