From 4001fd8a563dfbbc3efd82c9e2ae39aa4a03f75f Mon Sep 17 00:00:00 2001 From: Andy Butland Date: Wed, 5 Nov 2025 07:55:51 +0100 Subject: [PATCH 01/25] Add editorAlias to values available in collection view. --- .../repository/document-collection.server.data-source.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/repository/document-collection.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/repository/document-collection.server.data-source.ts index 816687f36b9f..a666e8f112f3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/repository/document-collection.server.data-source.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/repository/document-collection.server.data-source.ts @@ -52,6 +52,7 @@ export class UmbDocumentCollectionServerDataSource implements UmbCollectionDataS flags: item.flags, values: item.values.map((item) => { return { + editorAlias: item.editorAlias, alias: item.alias, culture: item.culture ?? undefined, segment: item.segment ?? undefined, From e8c2b44d28288efe3519ac4a1bd168531dfd8e51 Mon Sep 17 00:00:00 2001 From: Andy Butland Date: Wed, 5 Nov 2025 21:52:12 +0100 Subject: [PATCH 02/25] Add property value presentation for collection views of color, date only and time only pickers. --- .../property-value-presentation-base.ts | 14 ++++++ .../property-value-presentation.extension.ts | 16 +++++++ .../documents/documents/collection/types.ts | 2 +- ...ent-table-column-property-value.element.ts | 28 ++++++++++- .../color-picker/manifests.ts | 7 +++ ...roperty-value-presentation-color-picker.ts | 47 +++++++++++++++++++ .../date-time/date-only-picker/manifests.ts | 7 +++ ...rty-value-presentation-date-only-picker.ts | 29 ++++++++++++ .../date-time/time-only-picker/manifests.ts | 7 +++ ...rty-value-presentation-time-only-picker.ts | 29 ++++++++++++ 10 files changed, 184 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts new file mode 100644 index 000000000000..18a30d74c571 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts @@ -0,0 +1,14 @@ +import { property } from "@umbraco-cms/backoffice/external/lit"; +import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element"; +import type { PropertyValuePresentationDisplayOption } from "src/packages/core/property-value-presentation/property-value-presentation.extension"; + +export abstract class UmbPropertyValuePresentationBase extends UmbLitElement{ + @property() + alias: string = ""; + + @property() + display?: PropertyValuePresentationDisplayOption; + + @property() + value: any; +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts new file mode 100644 index 000000000000..7e6c9d06af7a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts @@ -0,0 +1,16 @@ +import type { ManifestElement } from "@umbraco-cms/backoffice/extension-api"; + +export enum PropertyValuePresentationDisplayOption { + COLLECTION = 'collection' +} + +export interface ManifestPropertyValuePresentation extends ManifestElement { + type: 'propertyValuePresentation'; + propertyEditorAlias: string; + } + + declare global { + interface UmbExtensionManifestMap { + umbPropertyValuePresentation: ManifestPropertyValuePresentation; + } + } \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts index de40f79a2041..d8324b17157b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts @@ -27,7 +27,7 @@ export interface UmbDocumentCollectionItemModel extends UmbEntityWithFlags { sortOrder: number; unique: string; updater?: string | null; - values: Array<{ alias: string; culture?: string; segment?: string; value: string }>; + values: Array<{ alias: string; editorAlias: string; culture?: string; segment?: string; value: string }>; variants: Array; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts index 1c616c5d72dc..3124278b100a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts @@ -4,6 +4,8 @@ import { customElement, html, nothing, property, state, when } from '@umbraco-cm import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { PropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from '../../../../../../core/property-value-presentation/property-value-presentation.extension.js'; @customElement('umb-document-table-column-property-value') export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement implements UmbTableColumnLayoutElement { @@ -64,11 +66,35 @@ export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement im default: { const culture = this.#resolver.getCulture(); const prop = item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture)); - return prop?.value ?? ''; + + if (prop) { + const value = prop.value ?? ''; + const propertyValuePresentationManifest = this.#getPropertyValuePresentationManifest(prop.editorAlias); + if (propertyValuePresentationManifest.length > 0) { + return html` x.propertyEditorAlias === prop.editorAlias} + .props=${{ alias: alias, value: value, display: PropertyValuePresentationDisplayOption.COLLECTION }} + > + `; + } + + return value; + + } + + return ''; } } } + #getPropertyValuePresentationManifest(propertyEditorAlias: string) { + return umbExtensionsRegistry.getByTypeAndFilter( + 'propertyValuePresentation', + (manifest) => manifest.propertyEditorAlias === propertyEditorAlias, + ); + } + override render() { if (!this.value) return nothing; const value = this.#getPropertyValueByAlias(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/manifests.ts index a11b6a3d3c07..8309c43cfcb9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/manifests.ts @@ -15,5 +15,12 @@ export const manifests: Array = [ supportsReadOnly: true, }, }, + { + type: "propertyValuePresentation", + alias: "Umb.PropertyValuePresentation.ColorPicker", + name: "Color Picker Property Value Presentation", + element: () => import("./property-value-presentation-color-picker.js"), + propertyEditorAlias: "Umbraco.ColorPicker" + }, schemaManifest, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts new file mode 100644 index 000000000000..1e4afcd3232e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts @@ -0,0 +1,47 @@ +import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; +import { UmbPropertyValuePresentationBase } from "../../core/property-value-presentation/property-value-presentation-base.js"; + +@customElement("umb-color-picker-property-value-presentation") +export class UmbColorPickerPropertyValuePresentation extends UmbPropertyValuePresentationBase { + + override render() { + const color = this.#getColor(); + const label = this.#getLabel(); + return color + ? html`` + : nothing; + } + + #getColor() { + if (!this.value) { + return null; + } + + if (typeof this.value === 'string') { + return this.value; + } + + return this.value.value; + } + + #getLabel() { + if (!this.value) { + return ''; + } + + if (typeof this.value === 'string') { + return ''; + } + + return this.value.label; + } + +} + +export default UmbColorPickerPropertyValuePresentation; + +declare global { + interface HTMLElementTagNameMap { + ["umb-color-picker-property-value-presentation"]: UmbColorPickerPropertyValuePresentation; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/manifests.ts index c42c8a78e8e2..a01f5f187580 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/manifests.ts @@ -14,5 +14,12 @@ export const manifests: Array = [ supportsReadOnly: true, }, }, + { + type: "propertyValuePresentation", + alias: "Umb.PropertyValuePresentation.DateOnlyPicker", + name: "Date Only Picker Property Value Presentation", + element: () => import("./property-value-presentation-date-only-picker.js"), + propertyEditorAlias: "Umbraco.DateOnly" + }, schemaManifest, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts new file mode 100644 index 000000000000..4d33b0ea4f6e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts @@ -0,0 +1,29 @@ +import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; +import { UmbPropertyValuePresentationBase } from "../../../core/property-value-presentation/property-value-presentation-base.js"; + +@customElement("umb-date-only-picker-property-value-presentation") +export class UmbDateOnlyPickerPropertyValuePresentation extends UmbPropertyValuePresentationBase { + + override render() { + const date = this.#getDate(); + return date + ? html`
${date}
` + : nothing; + } + + #getDate() { + if (!this.value) { + return null; + } + + return this.value.date.toLocaleString(); + } +} + +export default UmbDateOnlyPickerPropertyValuePresentation; + +declare global { + interface HTMLElementTagNameMap { + ["umb-date-only-picker-property-value-presentation"]: UmbDateOnlyPickerPropertyValuePresentation; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/manifests.ts index b06aca52f29d..77f1041ffd9b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/manifests.ts @@ -38,5 +38,12 @@ export const manifests: Array = [ }, }, }, + { + type: "propertyValuePresentation", + alias: "Umb.PropertyValuePresentation.TimeOnlyPicker", + name: "Time Only Picker Property Value Presentation", + element: () => import("./property-value-presentation-time-only-picker.js"), + propertyEditorAlias: "Umbraco.TimeOnly" + }, schemaManifest, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts new file mode 100644 index 000000000000..528c03cf3496 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts @@ -0,0 +1,29 @@ +import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; +import { UmbPropertyValuePresentationBase } from "../../../core/property-value-presentation/property-value-presentation-base.js"; + +@customElement("umb-time-only-picker-property-value-presentation") +export class UmbTimeOnlyPickerPropertyValuePresentation extends UmbPropertyValuePresentationBase { + + override render() { + const time = this.#getTime(); + return time + ? html`
${time}
` + : nothing; + } + + #getTime() { + if (!this.value) { + return null; + } + + return this.value.date; + } +} + +export default UmbTimeOnlyPickerPropertyValuePresentation; + +declare global { + interface HTMLElementTagNameMap { + ["umb-time-only-picker-property-value-presentation"]: UmbTimeOnlyPickerPropertyValuePresentation; + } +} From e76564bb87c8990405f9011111826ab7f9e0409a Mon Sep 17 00:00:00 2001 From: Andy Butland Date: Thu, 6 Nov 2025 08:54:13 +0100 Subject: [PATCH 03/25] Apply to card view. --- .../property-value-presentation.extension.ts | 3 ++- .../document-grid-collection-card.element.ts | 27 ++++++++++++++++++- ...ent-table-column-property-value.element.ts | 4 +-- ...rty-value-presentation-date-only-picker.ts | 2 +- ...rty-value-presentation-time-only-picker.ts | 2 +- 5 files changed, 32 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts index 7e6c9d06af7a..aacea08fd019 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts @@ -1,7 +1,8 @@ import type { ManifestElement } from "@umbraco-cms/backoffice/extension-api"; export enum PropertyValuePresentationDisplayOption { - COLLECTION = 'collection' + COLLECTION_COLUMN = 'collection-column', + COLLECTION_CARD = 'collection-card', } export interface ManifestPropertyValuePresentation extends ManifestElement { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts index 0178ecd6258c..62401f3eb4a3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts @@ -7,6 +7,8 @@ import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; import { UUICardContentNodeElement } from '@umbraco-cms/backoffice/external/uui'; import type { UmbCollectionColumnConfiguration } from '@umbraco-cms/backoffice/collection'; import type { UUIInterfaceColor } from '@umbraco-cms/backoffice/external/uui'; +import { PropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from '../../../../../core/property-value-presentation/property-value-presentation.extension.js'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; @customElement('umb-document-grid-collection-card') export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICardContentNodeElement) { @@ -69,11 +71,34 @@ export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICar default: { const culture = this.#resolver.getCulture(); const prop = this.item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture)); - return prop?.value ?? ''; + + if (prop) { + const value = prop.value ?? ''; + const propertyValuePresentationManifest = this.#getPropertyValuePresentationManifest(prop.editorAlias); + if (propertyValuePresentationManifest.length > 0) { + return html` x.propertyEditorAlias === prop.editorAlias} + .props=${{ alias: alias, value: value, display: PropertyValuePresentationDisplayOption.COLLECTION_CARD }} + > + `; + } + + return value; + } + + return ''; } } } + #getPropertyValuePresentationManifest(propertyEditorAlias: string) { + return umbExtensionsRegistry.getByTypeAndFilter( + 'propertyValuePresentation', + (manifest) => manifest.propertyEditorAlias === propertyEditorAlias, + ); + } + #getStateTagConfig(): { color: UUIInterfaceColor; label: string } | undefined { if (!this._state) return; switch (this._state) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts index 3124278b100a..31031cf1c211 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts @@ -44,6 +44,7 @@ export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement im this.#resolver.observe(this.#resolver.updateDate, (updateDate) => (this._updateDate = updateDate)); } + // TODO: Reuse across column and card (see document-grid-collection-card.element.ts). #getPropertyValueByAlias() { const alias = this.column.alias; const item = this.value.item; @@ -74,13 +75,12 @@ export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement im return html` x.propertyEditorAlias === prop.editorAlias} - .props=${{ alias: alias, value: value, display: PropertyValuePresentationDisplayOption.COLLECTION }} + .props=${{ alias: alias, value: value, display: PropertyValuePresentationDisplayOption.COLLECTION_COLUMN }} > `; } return value; - } return ''; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts index 4d33b0ea4f6e..1cf43f28fc7d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts @@ -7,7 +7,7 @@ export class UmbDateOnlyPickerPropertyValuePresentation extends UmbPropertyValue override render() { const date = this.#getDate(); return date - ? html`
${date}
` + ? html`${date}` : nothing; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts index 528c03cf3496..b37d2df4ca1c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts @@ -7,7 +7,7 @@ export class UmbTimeOnlyPickerPropertyValuePresentation extends UmbPropertyValue override render() { const time = this.#getTime(); return time - ? html`
${time}
` + ? html`${time}` : nothing; } From 7f742fcd4aa7b930a6452187fcb7260e5c6e7aac Mon Sep 17 00:00:00 2001 From: Andy Butland Date: Thu, 6 Nov 2025 11:40:27 +0100 Subject: [PATCH 04/25] Renamed enum to match expected convention. --- .../property-value-presentation-base.ts | 4 ++-- .../property-value-presentation.extension.ts | 2 +- .../views/grid/document-grid-collection-card.element.ts | 4 ++-- .../document-table-column-property-value.element.ts | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts index 18a30d74c571..3323b6ab3079 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts @@ -1,13 +1,13 @@ import { property } from "@umbraco-cms/backoffice/external/lit"; import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element"; -import type { PropertyValuePresentationDisplayOption } from "src/packages/core/property-value-presentation/property-value-presentation.extension"; +import type { UmbPropertyValuePresentationDisplayOption } from "src/packages/core/property-value-presentation/property-value-presentation.extension"; export abstract class UmbPropertyValuePresentationBase extends UmbLitElement{ @property() alias: string = ""; @property() - display?: PropertyValuePresentationDisplayOption; + display?: UmbPropertyValuePresentationDisplayOption; @property() value: any; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts index aacea08fd019..8f62f69d82c5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts @@ -1,6 +1,6 @@ import type { ManifestElement } from "@umbraco-cms/backoffice/extension-api"; -export enum PropertyValuePresentationDisplayOption { +export enum UmbPropertyValuePresentationDisplayOption { COLLECTION_COLUMN = 'collection-column', COLLECTION_CARD = 'collection-card', } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts index 62401f3eb4a3..3341cd89ee69 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts @@ -7,7 +7,7 @@ import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; import { UUICardContentNodeElement } from '@umbraco-cms/backoffice/external/uui'; import type { UmbCollectionColumnConfiguration } from '@umbraco-cms/backoffice/collection'; import type { UUIInterfaceColor } from '@umbraco-cms/backoffice/external/uui'; -import { PropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from '../../../../../core/property-value-presentation/property-value-presentation.extension.js'; +import { UmbPropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from '../../../../../core/property-value-presentation/property-value-presentation.extension.js'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; @customElement('umb-document-grid-collection-card') @@ -79,7 +79,7 @@ export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICar return html` x.propertyEditorAlias === prop.editorAlias} - .props=${{ alias: alias, value: value, display: PropertyValuePresentationDisplayOption.COLLECTION_CARD }} + .props=${{ alias: alias, value: value, display: UmbPropertyValuePresentationDisplayOption.COLLECTION_CARD }} > `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts index 31031cf1c211..569e7b908f3b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts @@ -5,7 +5,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -import { PropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from '../../../../../../core/property-value-presentation/property-value-presentation.extension.js'; +import { UmbPropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from '../../../../../../core/property-value-presentation/property-value-presentation.extension.js'; @customElement('umb-document-table-column-property-value') export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement implements UmbTableColumnLayoutElement { @@ -75,7 +75,7 @@ export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement im return html` x.propertyEditorAlias === prop.editorAlias} - .props=${{ alias: alias, value: value, display: PropertyValuePresentationDisplayOption.COLLECTION_COLUMN }} + .props=${{ alias: alias, value: value, display: UmbPropertyValuePresentationDisplayOption.COLLECTION_COLUMN }} > `; } From afaef0a4267a7fae422b210ded2156bec30f65b0 Mon Sep 17 00:00:00 2001 From: Andy Butland Date: Thu, 6 Nov 2025 13:28:20 +0100 Subject: [PATCH 05/25] Further linting. --- .../src/packages/core/property-value-presentation/index.ts | 2 ++ .../property-value-presentation-base.ts | 2 +- .../color-picker/property-value-presentation-color-picker.ts | 4 ++-- .../property-value-presentation-date-only-picker.ts | 4 ++-- .../property-value-presentation-time-only-picker.ts | 4 ++-- 5 files changed, 9 insertions(+), 7 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts new file mode 100644 index 000000000000..bef86c8acd39 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts @@ -0,0 +1,2 @@ +export { UmbPropertyValuePresentationBaseElement } from "./property-value-presentation-base.js" +export { UmbPropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from "./property-value-presentation.extension.js"; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts index 3323b6ab3079..204a8ed15ae8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts @@ -2,7 +2,7 @@ import { property } from "@umbraco-cms/backoffice/external/lit"; import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element"; import type { UmbPropertyValuePresentationDisplayOption } from "src/packages/core/property-value-presentation/property-value-presentation.extension"; -export abstract class UmbPropertyValuePresentationBase extends UmbLitElement{ +export abstract class UmbPropertyValuePresentationBaseElement extends UmbLitElement{ @property() alias: string = ""; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts index 1e4afcd3232e..5af184ea9dd9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts @@ -1,8 +1,8 @@ import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; -import { UmbPropertyValuePresentationBase } from "../../core/property-value-presentation/property-value-presentation-base.js"; +import { UmbPropertyValuePresentationBaseElement } from "../../core/property-value-presentation/index.js"; @customElement("umb-color-picker-property-value-presentation") -export class UmbColorPickerPropertyValuePresentation extends UmbPropertyValuePresentationBase { +export class UmbColorPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { override render() { const color = this.#getColor(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts index 1cf43f28fc7d..7177515445ab 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts @@ -1,8 +1,8 @@ import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; -import { UmbPropertyValuePresentationBase } from "../../../core/property-value-presentation/property-value-presentation-base.js"; +import { UmbPropertyValuePresentationBaseElement } from "../../../core/property-value-presentation/index.js"; @customElement("umb-date-only-picker-property-value-presentation") -export class UmbDateOnlyPickerPropertyValuePresentation extends UmbPropertyValuePresentationBase { +export class UmbDateOnlyPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { override render() { const date = this.#getDate(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts index b37d2df4ca1c..03209da56a49 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts @@ -1,8 +1,8 @@ import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; -import { UmbPropertyValuePresentationBase } from "../../../core/property-value-presentation/property-value-presentation-base.js"; +import { UmbPropertyValuePresentationBaseElement } from "../../../core/property-value-presentation/index.js"; @customElement("umb-time-only-picker-property-value-presentation") -export class UmbTimeOnlyPickerPropertyValuePresentation extends UmbPropertyValuePresentationBase { +export class UmbTimeOnlyPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { override render() { const time = this.#getTime(); From dcef7d4d8960b829bdc5019855bbf34770841ec5 Mon Sep 17 00:00:00 2001 From: Andy Butland Date: Thu, 6 Nov 2025 15:13:39 +0100 Subject: [PATCH 06/25] Apply for other date pickers, amend sizing of color swatch. --- ...roperty-value-presentation-color-picker.ts | 8 ++--- ...rty-value-presentation-date-only-picker.ts | 2 +- .../date-time/date-time-picker/manifests.ts | 7 ++++ ...rty-value-presentation-date-time-picker.ts | 29 ++++++++++++++++ .../manifests.ts | 7 ++++ ...ntation-date-time-with-time-zone-picker.ts | 34 +++++++++++++++++++ 6 files changed, 82 insertions(+), 5 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts index 5af184ea9dd9..12366f8e9843 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts @@ -1,5 +1,5 @@ -import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; -import { UmbPropertyValuePresentationBaseElement } from "../../core/property-value-presentation/index.js"; +import { css, customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; +import { UmbPropertyValuePresentationBaseElement, UmbPropertyValuePresentationDisplayOption } from "../../core/property-value-presentation/index.js"; @customElement("umb-color-picker-property-value-presentation") export class UmbColorPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { @@ -7,8 +7,9 @@ export class UmbColorPickerPropertyValuePresentation extends UmbPropertyValuePre override render() { const color = this.#getColor(); const label = this.#getLabel(); + const size = this.display == UmbPropertyValuePresentationDisplayOption.COLLECTION_CARD ? 10 : 12; return color - ? html`` + ? html`` : nothing; } @@ -35,7 +36,6 @@ export class UmbColorPickerPropertyValuePresentation extends UmbPropertyValuePre return this.value.label; } - } export default UmbColorPickerPropertyValuePresentation; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts index 7177515445ab..ea461fe6c9c3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts @@ -16,7 +16,7 @@ export class UmbDateOnlyPickerPropertyValuePresentation extends UmbPropertyValue return null; } - return this.value.date.toLocaleString(); + return new Date(this.value.date).toLocaleDateString(); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/manifests.ts index af73ef37f6bf..38334bc59938 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/manifests.ts @@ -38,5 +38,12 @@ export const manifests: Array = [ }, }, }, + { + type: "propertyValuePresentation", + alias: "Umb.PropertyValuePresentation.DateTimePicker", + name: "Date Time Picker Property Value Presentation", + element: () => import("./property-value-presentation-date-time-picker.js"), + propertyEditorAlias: "Umbraco.DateTimeUnspecified" + }, schemaManifest, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts new file mode 100644 index 000000000000..2c3df88f6ad0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts @@ -0,0 +1,29 @@ +import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; +import { UmbPropertyValuePresentationBaseElement } from "../../../core/property-value-presentation/index.js"; + +@customElement("umb-date-time-picker-property-value-presentation") +export class UmbDateTimePickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { + + override render() { + const date = this.#getDateTime(); + return date + ? html`${date}` + : nothing; + } + + #getDateTime() { + if (!this.value) { + return null; + } + + return new Date(this.value.date).toLocaleString(); + } +} + +export default UmbDateTimePickerPropertyValuePresentation; + +declare global { + interface HTMLElementTagNameMap { + ["umb-date-time-picker-property-value-presentation"]: UmbDateTimePickerPropertyValuePresentation; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/manifests.ts index d514e0b9eb31..f8c9de331f9c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/manifests.ts @@ -52,5 +52,12 @@ export const manifests: Array = [ }, }, }, + { + type: "propertyValuePresentation", + alias: "Umb.PropertyValuePresentation.DateTimeWithTimeZonePicker", + name: "Date Time With Time Zone Picker Property Value Presentation", + element: () => import("./property-value-presentation-date-time-with-time-zone-picker.js"), + propertyEditorAlias: "Umbraco.DateTimeWithTimeZone" + }, schemaManifest, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts new file mode 100644 index 000000000000..19629c85d98b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts @@ -0,0 +1,34 @@ +import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; +import { UmbPropertyValuePresentationBaseElement } from "../../../core/property-value-presentation/index.js"; + +@customElement("umb-date-time-with-time-zone-picker-property-value-presentation") +export class UmbDateTimePickerWithTimeZonePropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { + + override render() { + const date = this.#getDateTime(); + return date + ? html`${date}` + : nothing; + } + + #getDateTime() { + if (!this.value) { + return null; + } + + let result = new Date(this.value.date).toLocaleString(); + if (this.value.timeZone && this.value.timeZone.length > 0) { + result += ' (' + this.value.timeZone + ')'; + } + + return result; + } +} + +export default UmbDateTimePickerWithTimeZonePropertyValuePresentation; + +declare global { + interface HTMLElementTagNameMap { + ["umb-date-time-with-time-zone-picker-property-value-presentation"]: UmbDateTimePickerWithTimeZonePropertyValuePresentation; + } +} From efa3c22c695d99b38482ec52f32c041a257ac14b Mon Sep 17 00:00:00 2001 From: Andy Butland Date: Fri, 7 Nov 2025 08:28:00 +0100 Subject: [PATCH 07/25] Code re-use. --- .../collection/document-collection.context.ts | 65 ++++++++++++++++ .../document-grid-collection-card.element.ts | 75 ++++++------------- ...ent-table-column-property-value.element.ts | 73 ++++++------------ 3 files changed, 111 insertions(+), 102 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts index 18c8a5bcf854..67950bb5f290 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts @@ -5,6 +5,23 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UMB_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/variant'; import { UmbStringState } from '@umbraco-cms/backoffice/observable-api'; import { UmbDeprecation } from '@umbraco-cms/backoffice/utils'; +import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; +import { html } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from 'src/packages/core/property-value-presentation/index.js'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; + +export type UmbGetPropertyValueByAliasArgs = { + alias: string; + documentTypeAlias: string; + createDate?: Date; + updateDate?: Date; + state?: string; + culture?: string | null | undefined; + creator?: string | null | undefined; + updater?: string | null | undefined; + sortOrder: number; + values: Array<{ alias: string; editorAlias: string; culture?: string; segment?: string; value: string }>; +} export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext< UmbDocumentCollectionItemModel, @@ -56,6 +73,54 @@ export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext< await this.observe(this.#displayCultureObservable)?.asPromise(); await super._requestCollection(); } + + getPropertyValueByAlias(args: UmbGetPropertyValueByAliasArgs) { + const alias = args.alias; + switch (alias) { + case 'contentTypeAlias': + return args.documentTypeAlias; + case 'createDate': + return args.createDate?.toLocaleString(); + case 'creator': + case 'owner': + return args.creator; + case 'published': + return args.state !== DocumentVariantStateModel.DRAFT ? 'True' : 'False'; + case 'sortOrder': + return args.sortOrder; + case 'updateDate': + return args.updateDate?.toLocaleString(); + case 'updater': + return args.updater; + default: { + const prop = args.values.find((x) => x.alias === alias && (!x.culture || x.culture === args.culture)); + + if (prop) { + const value = prop.value ?? ''; + const propertyValuePresentationManifest = this.#getPropertyValuePresentationManifest(prop.editorAlias); + if (propertyValuePresentationManifest.length > 0) { + return html` x.propertyEditorAlias === prop.editorAlias} + .props=${{ alias: alias, value: value, display: UmbPropertyValuePresentationDisplayOption.COLLECTION_COLUMN }} + > + `; + } + + return value; + } + + return ''; + } + } + } + + #getPropertyValuePresentationManifest(propertyEditorAlias: string) { + return umbExtensionsRegistry.getByTypeAndFilter( + 'propertyValuePresentation', + (manifest) => manifest.propertyEditorAlias === propertyEditorAlias, + ); + } } export { UmbDocumentCollectionContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts index 3341cd89ee69..8d8a683e18f2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts @@ -5,13 +5,16 @@ import { fromCamelCase } from '@umbraco-cms/backoffice/utils'; import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; import { UUICardContentNodeElement } from '@umbraco-cms/backoffice/external/uui'; -import type { UmbCollectionColumnConfiguration } from '@umbraco-cms/backoffice/collection'; +import { type UmbCollectionColumnConfiguration } from '@umbraco-cms/backoffice/collection'; import type { UUIInterfaceColor } from '@umbraco-cms/backoffice/external/uui'; -import { UmbPropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from '../../../../../core/property-value-presentation/property-value-presentation.extension.js'; -import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import type { UmbDocumentCollectionContext } from '../../document-collection.context.js'; +import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../../document-collection.context-token.js'; @customElement('umb-document-grid-collection-card') export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICardContentNodeElement) { + + #collectionContext?: UmbDocumentCollectionContext; + #resolver = new UmbDocumentItemDataResolver(this); @state() @@ -41,6 +44,10 @@ export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICar constructor() { super(); + this.consumeContext(UMB_DOCUMENT_COLLECTION_CONTEXT, (instance) => { + this.#collectionContext = instance; + }); + this.#resolver.observe(this.#resolver.name, (name) => (this.name = name || '')); this.#resolver.observe(this.#resolver.state, (state) => (this._state = state || '')); this.#resolver.observe(this.#resolver.createDate, (createDate) => (this._createDate = createDate)); @@ -48,55 +55,19 @@ export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICar } #getPropertyValueByAlias(alias: string) { - switch (alias) { - case 'contentTypeAlias': - return this.item.documentType.alias; - case 'createDate': - return this._createDate?.toLocaleString(); - case 'creator': - case 'owner': - return this.item.creator; - case 'name': - return this.name; - case 'state': - return this._state ? fromCamelCase(this._state) : ''; - case 'published': - return this._state !== DocumentVariantStateModel.DRAFT ? 'True' : 'False'; - case 'sortOrder': - return this.item.sortOrder; - case 'updateDate': - return this._updateDate?.toLocaleString(); - case 'updater': - return this.item.updater; - default: { - const culture = this.#resolver.getCulture(); - const prop = this.item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture)); - - if (prop) { - const value = prop.value ?? ''; - const propertyValuePresentationManifest = this.#getPropertyValuePresentationManifest(prop.editorAlias); - if (propertyValuePresentationManifest.length > 0) { - return html` x.propertyEditorAlias === prop.editorAlias} - .props=${{ alias: alias, value: value, display: UmbPropertyValuePresentationDisplayOption.COLLECTION_CARD }} - > - `; - } - - return value; - } - - return ''; - } - } - } - - #getPropertyValuePresentationManifest(propertyEditorAlias: string) { - return umbExtensionsRegistry.getByTypeAndFilter( - 'propertyValuePresentation', - (manifest) => manifest.propertyEditorAlias === propertyEditorAlias, - ); + const args = { + alias: alias, + documentTypeAlias: this.item.documentType.alias, + createDate: this._createDate, + updateDate: this._updateDate, + state: this._state, + culture: this.#resolver.getCulture(), + creator: this.item.creator, + updater: this.item.updater, + sortOrder: this.item.sortOrder, + values: this.item.values, + }; + return this.#collectionContext?.getPropertyValueByAlias(args); } #getStateTagConfig(): { color: UUIInterfaceColor; label: string } | undefined { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts index 569e7b908f3b..8b1ac35a02bc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts @@ -1,14 +1,18 @@ -import type { UmbEditableDocumentCollectionItemModel } from '../../../types.js'; +import type { UmbDocumentCollectionItemModel, UmbEditableDocumentCollectionItemModel } from '../../../types.js'; import { UmbDocumentItemDataResolver } from '../../../../item/index.js'; import { customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; -import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbPropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from '../../../../../../core/property-value-presentation/property-value-presentation.extension.js'; +import type { UmbDocumentCollectionContext } from '../../../document-collection.context.js'; +import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../../../document-collection.context-token.js'; @customElement('umb-document-table-column-property-value') export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement implements UmbTableColumnLayoutElement { + + #collectionContext?: UmbDocumentCollectionContext; + #resolver = new UmbDocumentItemDataResolver(this); @state() @@ -39,60 +43,29 @@ export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement im constructor() { super(); + this.consumeContext(UMB_DOCUMENT_COLLECTION_CONTEXT, (instance) => { + this.#collectionContext = instance; + }); + this.#resolver.observe(this.#resolver.state, (state) => (this._state = state || '')); this.#resolver.observe(this.#resolver.createDate, (createDate) => (this._createDate = createDate)); this.#resolver.observe(this.#resolver.updateDate, (updateDate) => (this._updateDate = updateDate)); } - // TODO: Reuse across column and card (see document-grid-collection-card.element.ts). #getPropertyValueByAlias() { - const alias = this.column.alias; - const item = this.value.item; - switch (alias) { - case 'contentTypeAlias': - return item.documentType.alias; - case 'createDate': - return this._createDate?.toLocaleString(); - case 'creator': - case 'owner': - return item.creator; - case 'published': - return this._state !== DocumentVariantStateModel.DRAFT ? 'True' : 'False'; - case 'sortOrder': - return item.sortOrder; - case 'updateDate': - return this._updateDate?.toLocaleString(); - case 'updater': - return item.updater; - default: { - const culture = this.#resolver.getCulture(); - const prop = item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture)); - - if (prop) { - const value = prop.value ?? ''; - const propertyValuePresentationManifest = this.#getPropertyValuePresentationManifest(prop.editorAlias); - if (propertyValuePresentationManifest.length > 0) { - return html` x.propertyEditorAlias === prop.editorAlias} - .props=${{ alias: alias, value: value, display: UmbPropertyValuePresentationDisplayOption.COLLECTION_COLUMN }} - > - `; - } - - return value; - } - - return ''; - } - } - } - - #getPropertyValuePresentationManifest(propertyEditorAlias: string) { - return umbExtensionsRegistry.getByTypeAndFilter( - 'propertyValuePresentation', - (manifest) => manifest.propertyEditorAlias === propertyEditorAlias, - ); + const args = { + alias: this.column.alias, + documentTypeAlias: this.value.item.documentType.alias, + createDate: this._createDate, + updateDate: this._updateDate, + state: this._state, + culture: this.#resolver.getCulture(), + creator: this.value.item.creator, + updater: this.value.item.updater, + sortOrder: this.value.item.sortOrder, + values: this.value.item.values, + }; + return this.#collectionContext?.getPropertyValueByAlias(args); } override render() { From 05e4ac92b87019f2b406952819ecac48af3c2ff4 Mon Sep 17 00:00:00 2001 From: Andy Butland Date: Fri, 7 Nov 2025 08:55:29 +0100 Subject: [PATCH 08/25] Attempt to improve performance by getting all extension of types once in context constructor and filtering from that. --- .../collection/document-collection.context.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts index 67950bb5f290..e8815f0c663b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts @@ -31,6 +31,8 @@ export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext< #displayCulture = new UmbStringState(undefined); #displayCultureObservable = this.#displayCulture.asObservable(); + #propertyValuePresentationManifests: ManifestPropertyValuePresentation[] = []; + constructor(host: UmbControllerHost) { super(host, UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS); @@ -38,6 +40,10 @@ export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext< this.#variantContext = variantContext; this.#observeDisplayCulture(); }); + + this.#propertyValuePresentationManifests = umbExtensionsRegistry.getByType( + 'propertyValuePresentation', + ); } #observeDisplayCulture() { @@ -116,10 +122,7 @@ export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext< } #getPropertyValuePresentationManifest(propertyEditorAlias: string) { - return umbExtensionsRegistry.getByTypeAndFilter( - 'propertyValuePresentation', - (manifest) => manifest.propertyEditorAlias === propertyEditorAlias, - ); + return this.#propertyValuePresentationManifests.filter((manifest) => manifest.propertyEditorAlias === propertyEditorAlias); } } From 3f9ff1727b10923df683e0b6d684e80d5ce9c85d Mon Sep 17 00:00:00 2001 From: Andy Butland Date: Fri, 7 Nov 2025 09:15:18 +0100 Subject: [PATCH 09/25] Linting. --- .../documents/collection/document-collection.context.ts | 2 +- .../document-table-column-property-value.element.ts | 4 +--- .../color-picker/property-value-presentation-color-picker.ts | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts index e8815f0c663b..9df893389f9b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts @@ -7,7 +7,7 @@ import { UmbStringState } from '@umbraco-cms/backoffice/observable-api'; import { UmbDeprecation } from '@umbraco-cms/backoffice/utils'; import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; import { html } from '@umbraco-cms/backoffice/external/lit'; -import { UmbPropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from 'src/packages/core/property-value-presentation/index.js'; +import { UmbPropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from '../../../core/property-value-presentation/index.js'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; export type UmbGetPropertyValueByAliasArgs = { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts index 8b1ac35a02bc..0e7c36d932fb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts @@ -1,10 +1,8 @@ -import type { UmbDocumentCollectionItemModel, UmbEditableDocumentCollectionItemModel } from '../../../types.js'; +import type { UmbEditableDocumentCollectionItemModel } from '../../../types.js'; import { UmbDocumentItemDataResolver } from '../../../../item/index.js'; import { customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; -import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -import { UmbPropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from '../../../../../../core/property-value-presentation/property-value-presentation.extension.js'; import type { UmbDocumentCollectionContext } from '../../../document-collection.context.js'; import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../../../document-collection.context-token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts index 12366f8e9843..03bab89db0bd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts @@ -1,4 +1,4 @@ -import { css, customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; +import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; import { UmbPropertyValuePresentationBaseElement, UmbPropertyValuePresentationDisplayOption } from "../../core/property-value-presentation/index.js"; @customElement("umb-color-picker-property-value-presentation") From 89b37f659833310d36675d70d1ec09fd650680d5 Mon Sep 17 00:00:00 2001 From: Andy Butland Date: Fri, 7 Nov 2025 09:20:55 +0100 Subject: [PATCH 10/25] Linting. --- .../property-value-presentation-base.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts index 204a8ed15ae8..54dd9ddd74cd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts @@ -1,6 +1,6 @@ import { property } from "@umbraco-cms/backoffice/external/lit"; import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element"; -import type { UmbPropertyValuePresentationDisplayOption } from "src/packages/core/property-value-presentation/property-value-presentation.extension"; +import type { UmbPropertyValuePresentationDisplayOption } from "../../core/property-value-presentation/property-value-presentation.extension"; export abstract class UmbPropertyValuePresentationBaseElement extends UmbLitElement{ @property() From 9d03e335162f11e7a0479e9f1b8a927ca8ce16e8 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 10 Nov 2025 14:45:59 +0000 Subject: [PATCH 11/25] Linting + adjustments --- .../property-value-presentation-base.ts | 22 ++--- .../collection/document-collection.context.ts | 20 +++-- ...roperty-value-presentation-color-picker.ts | 80 ++++++++++--------- ...rty-value-presentation-date-only-picker.ts | 35 ++++---- ...rty-value-presentation-date-time-picker.ts | 35 ++++---- ...ntation-date-time-with-time-zone-picker.ts | 43 +++++----- ...rty-value-presentation-time-only-picker.ts | 35 ++++---- 7 files changed, 132 insertions(+), 138 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts index 54dd9ddd74cd..3480e1bac6b1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts @@ -1,14 +1,14 @@ -import { property } from "@umbraco-cms/backoffice/external/lit"; -import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element"; -import type { UmbPropertyValuePresentationDisplayOption } from "../../core/property-value-presentation/property-value-presentation.extension"; +import type { UmbPropertyValuePresentationDisplayOption } from '../../core/property-value-presentation/property-value-presentation.extension.js'; +import { property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -export abstract class UmbPropertyValuePresentationBaseElement extends UmbLitElement{ - @property() - alias: string = ""; +export abstract class UmbPropertyValuePresentationBaseElement extends UmbLitElement { + @property() + alias: string = ''; - @property() - display?: UmbPropertyValuePresentationDisplayOption; + @property() + display?: UmbPropertyValuePresentationDisplayOption; - @property() - value: any; -} \ No newline at end of file + @property() + value: any; +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts index 9df893389f9b..c9a7e0732d31 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts @@ -1,3 +1,5 @@ +import { UmbPropertyValuePresentationDisplayOption } from '../../../core/property-value-presentation/index.js'; +import type { ManifestPropertyValuePresentation } from '../../../core/property-value-presentation/index.js'; import type { UmbDocumentCollectionFilterModel, UmbDocumentCollectionItemModel } from './types.js'; import { UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS } from './constants.js'; import { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; @@ -7,7 +9,6 @@ import { UmbStringState } from '@umbraco-cms/backoffice/observable-api'; import { UmbDeprecation } from '@umbraco-cms/backoffice/utils'; import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; import { html } from '@umbraco-cms/backoffice/external/lit'; -import { UmbPropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from '../../../core/property-value-presentation/index.js'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; export type UmbGetPropertyValueByAliasArgs = { @@ -21,7 +22,7 @@ export type UmbGetPropertyValueByAliasArgs = { updater?: string | null | undefined; sortOrder: number; values: Array<{ alias: string; editorAlias: string; culture?: string; segment?: string; value: string }>; -} +}; export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext< UmbDocumentCollectionItemModel, @@ -41,9 +42,7 @@ export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext< this.#observeDisplayCulture(); }); - this.#propertyValuePresentationManifests = umbExtensionsRegistry.getByType( - 'propertyValuePresentation', - ); + this.#propertyValuePresentationManifests = umbExtensionsRegistry.getByType('propertyValuePresentation'); } #observeDisplayCulture() { @@ -108,8 +107,11 @@ export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext< return html` x.propertyEditorAlias === prop.editorAlias} - .props=${{ alias: alias, value: value, display: UmbPropertyValuePresentationDisplayOption.COLLECTION_COLUMN }} - > + .props=${{ + alias: alias, + value: value, + display: UmbPropertyValuePresentationDisplayOption.COLLECTION_COLUMN, + }}> `; } @@ -122,7 +124,9 @@ export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext< } #getPropertyValuePresentationManifest(propertyEditorAlias: string) { - return this.#propertyValuePresentationManifests.filter((manifest) => manifest.propertyEditorAlias === propertyEditorAlias); + return this.#propertyValuePresentationManifests.filter( + (manifest) => manifest.propertyEditorAlias === propertyEditorAlias, + ); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts index 03bab89db0bd..0fe9926fa8fd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts @@ -1,47 +1,49 @@ -import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; -import { UmbPropertyValuePresentationBaseElement, UmbPropertyValuePresentationDisplayOption } from "../../core/property-value-presentation/index.js"; +import { + UmbPropertyValuePresentationBaseElement, + UmbPropertyValuePresentationDisplayOption, +} from '../../core/property-value-presentation/index.js'; +import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; -@customElement("umb-color-picker-property-value-presentation") +@customElement('umb-color-picker-property-value-presentation') export class UmbColorPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { - - override render() { - const color = this.#getColor(); - const label = this.#getLabel(); - const size = this.display == UmbPropertyValuePresentationDisplayOption.COLLECTION_CARD ? 10 : 12; - return color - ? html`` - : nothing; - } - - #getColor() { - if (!this.value) { - return null; - } - - if (typeof this.value === 'string') { - return this.value; - } - - return this.value.value; - } - - #getLabel() { - if (!this.value) { - return ''; - } - - if (typeof this.value === 'string') { - return ''; - } - - return this.value.label; - } + override render() { + const color = this.#getColor(); + const label = this.#getLabel(); + const size = this.display == UmbPropertyValuePresentationDisplayOption.COLLECTION_CARD ? 10 : 12; + return color + ? html`` + : nothing; + } + + #getColor() { + if (!this.value) { + return null; + } + + if (typeof this.value === 'string') { + return this.value; + } + + return this.value.value; + } + + #getLabel() { + if (!this.value) { + return ''; + } + + if (typeof this.value === 'string') { + return ''; + } + + return this.value.label; + } } export default UmbColorPickerPropertyValuePresentation; declare global { - interface HTMLElementTagNameMap { - ["umb-color-picker-property-value-presentation"]: UmbColorPickerPropertyValuePresentation; - } + interface HTMLElementTagNameMap { + 'umb-color-picker-property-value-presentation': UmbColorPickerPropertyValuePresentation; + } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts index ea461fe6c9c3..a2eebcef0ca3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts @@ -1,29 +1,26 @@ -import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; -import { UmbPropertyValuePresentationBaseElement } from "../../../core/property-value-presentation/index.js"; +import { UmbPropertyValuePresentationBaseElement } from '../../../core/property-value-presentation/index.js'; +import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; -@customElement("umb-date-only-picker-property-value-presentation") +@customElement('umb-date-only-picker-property-value-presentation') export class UmbDateOnlyPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { + override render() { + const date = this.#getDate(); + return date ? html`${date}` : nothing; + } - override render() { - const date = this.#getDate(); - return date - ? html`${date}` - : nothing; - } + #getDate() { + if (!this.value) { + return null; + } - #getDate() { - if (!this.value) { - return null; - } - - return new Date(this.value.date).toLocaleDateString(); - } + return new Date(this.value.date).toLocaleDateString(); + } } export default UmbDateOnlyPickerPropertyValuePresentation; declare global { - interface HTMLElementTagNameMap { - ["umb-date-only-picker-property-value-presentation"]: UmbDateOnlyPickerPropertyValuePresentation; - } + interface HTMLElementTagNameMap { + 'umb-date-only-picker-property-value-presentation': UmbDateOnlyPickerPropertyValuePresentation; + } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts index 2c3df88f6ad0..644fbb331abe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts @@ -1,29 +1,26 @@ -import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; -import { UmbPropertyValuePresentationBaseElement } from "../../../core/property-value-presentation/index.js"; +import { UmbPropertyValuePresentationBaseElement } from '../../../core/property-value-presentation/index.js'; +import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; -@customElement("umb-date-time-picker-property-value-presentation") +@customElement('umb-date-time-picker-property-value-presentation') export class UmbDateTimePickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { + override render() { + const date = this.#getDateTime(); + return date ? html`${date}` : nothing; + } - override render() { - const date = this.#getDateTime(); - return date - ? html`${date}` - : nothing; - } + #getDateTime() { + if (!this.value) { + return null; + } - #getDateTime() { - if (!this.value) { - return null; - } - - return new Date(this.value.date).toLocaleString(); - } + return new Date(this.value.date).toLocaleString(); + } } export default UmbDateTimePickerPropertyValuePresentation; declare global { - interface HTMLElementTagNameMap { - ["umb-date-time-picker-property-value-presentation"]: UmbDateTimePickerPropertyValuePresentation; - } + interface HTMLElementTagNameMap { + 'umb-date-time-picker-property-value-presentation': UmbDateTimePickerPropertyValuePresentation; + } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts index 19629c85d98b..c4de390bd6de 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts @@ -1,34 +1,31 @@ -import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; -import { UmbPropertyValuePresentationBaseElement } from "../../../core/property-value-presentation/index.js"; +import { UmbPropertyValuePresentationBaseElement } from '../../../core/property-value-presentation/index.js'; +import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; -@customElement("umb-date-time-with-time-zone-picker-property-value-presentation") +@customElement('umb-date-time-with-time-zone-picker-property-value-presentation') export class UmbDateTimePickerWithTimeZonePropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { + override render() { + const date = this.#getDateTime(); + return date ? html`${date}` : nothing; + } - override render() { - const date = this.#getDateTime(); - return date - ? html`${date}` - : nothing; - } + #getDateTime() { + if (!this.value) { + return null; + } - #getDateTime() { - if (!this.value) { - return null; - } + let result = new Date(this.value.date).toLocaleString(); + if (this.value.timeZone && this.value.timeZone.length > 0) { + result += ' (' + this.value.timeZone + ')'; + } - let result = new Date(this.value.date).toLocaleString(); - if (this.value.timeZone && this.value.timeZone.length > 0) { - result += ' (' + this.value.timeZone + ')'; - } - - return result; - } + return result; + } } export default UmbDateTimePickerWithTimeZonePropertyValuePresentation; declare global { - interface HTMLElementTagNameMap { - ["umb-date-time-with-time-zone-picker-property-value-presentation"]: UmbDateTimePickerWithTimeZonePropertyValuePresentation; - } + interface HTMLElementTagNameMap { + 'umb-date-time-with-time-zone-picker-property-value-presentation': UmbDateTimePickerWithTimeZonePropertyValuePresentation; + } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts index 03209da56a49..2921594d6eed 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts @@ -1,29 +1,26 @@ -import { customElement, html, nothing } from "@umbraco-cms/backoffice/external/lit"; -import { UmbPropertyValuePresentationBaseElement } from "../../../core/property-value-presentation/index.js"; +import { UmbPropertyValuePresentationBaseElement } from '../../../core/property-value-presentation/index.js'; +import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; -@customElement("umb-time-only-picker-property-value-presentation") +@customElement('umb-time-only-picker-property-value-presentation') export class UmbTimeOnlyPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { + override render() { + const time = this.#getTime(); + return time ? html`${time}` : nothing; + } - override render() { - const time = this.#getTime(); - return time - ? html`${time}` - : nothing; - } + #getTime() { + if (!this.value) { + return null; + } - #getTime() { - if (!this.value) { - return null; - } - - return this.value.date; - } + return this.value.date; + } } export default UmbTimeOnlyPickerPropertyValuePresentation; declare global { - interface HTMLElementTagNameMap { - ["umb-time-only-picker-property-value-presentation"]: UmbTimeOnlyPickerPropertyValuePresentation; - } + interface HTMLElementTagNameMap { + 'umb-time-only-picker-property-value-presentation': UmbTimeOnlyPickerPropertyValuePresentation; + } } From f2e2c44b49bfbc4135c12c4e859ab71795897115 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 10 Nov 2025 15:14:39 +0000 Subject: [PATCH 12/25] Linting + refinements --- .../core/property-value-presentation/index.ts | 5 ++-- .../property-value-presentation-base.ts | 6 ++--- .../property-value-presentation.extension.ts | 24 +++++++++---------- .../collection/document-collection.context.ts | 12 +++++----- .../document-grid-collection-card.element.ts | 7 +++--- ...ent-table-column-property-value.element.ts | 7 +++--- .../color-picker/manifests.ts | 14 +++++------ ...roperty-value-presentation-color-picker.ts | 4 +++- .../date-time/date-only-picker/manifests.ts | 14 +++++------ ...rty-value-presentation-date-only-picker.ts | 4 +++- .../date-time/date-time-picker/manifests.ts | 14 +++++------ ...rty-value-presentation-date-time-picker.ts | 4 +++- .../manifests.ts | 14 +++++------ ...ntation-date-time-with-time-zone-picker.ts | 5 +++- .../date-time/time-only-picker/manifests.ts | 14 +++++------ ...rty-value-presentation-time-only-picker.ts | 4 +++- 16 files changed, 81 insertions(+), 71 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts index bef86c8acd39..e6ae559fa622 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts @@ -1,2 +1,3 @@ -export { UmbPropertyValuePresentationBaseElement } from "./property-value-presentation-base.js" -export { UmbPropertyValuePresentationDisplayOption, type ManifestPropertyValuePresentation } from "./property-value-presentation.extension.js"; +export { UmbPropertyValuePresentationBaseElement } from './property-value-presentation-base.js'; +export { UmbPropertyValuePresentationDisplayOption } from './property-value-presentation.extension.js'; +export type { ManifestPropertyValuePresentation } from './property-value-presentation.extension.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts index 3480e1bac6b1..06be46d84f12 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts @@ -2,13 +2,13 @@ import type { UmbPropertyValuePresentationDisplayOption } from '../../core/prope import { property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -export abstract class UmbPropertyValuePresentationBaseElement extends UmbLitElement { +export abstract class UmbPropertyValuePresentationBaseElement extends UmbLitElement { @property() alias: string = ''; @property() display?: UmbPropertyValuePresentationDisplayOption; - @property() - value: any; + @property({ type: Object }) + value?: TValue; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts index 8f62f69d82c5..4a4ffbb81308 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts @@ -1,17 +1,17 @@ -import type { ManifestElement } from "@umbraco-cms/backoffice/extension-api"; +import type { ManifestElement } from '@umbraco-cms/backoffice/extension-api'; export enum UmbPropertyValuePresentationDisplayOption { - COLLECTION_COLUMN = 'collection-column', - COLLECTION_CARD = 'collection-card', + COLLECTION_COLUMN = 'collection-column', + COLLECTION_CARD = 'collection-card', } -export interface ManifestPropertyValuePresentation extends ManifestElement { - type: 'propertyValuePresentation'; - propertyEditorAlias: string; - } +export interface ManifestPropertyValuePresentation extends ManifestElement { + type: 'propertyValuePresentation'; + propertyEditorAlias: string; +} - declare global { - interface UmbExtensionManifestMap { - umbPropertyValuePresentation: ManifestPropertyValuePresentation; - } - } \ No newline at end of file +declare global { + interface UmbExtensionManifestMap { + umbPropertyValuePresentation: ManifestPropertyValuePresentation; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts index c9a7e0732d31..c76e49566cf4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts @@ -2,14 +2,14 @@ import { UmbPropertyValuePresentationDisplayOption } from '../../../core/propert import type { ManifestPropertyValuePresentation } from '../../../core/property-value-presentation/index.js'; import type { UmbDocumentCollectionFilterModel, UmbDocumentCollectionItemModel } from './types.js'; import { UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS } from './constants.js'; -import { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; -import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { UMB_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/variant'; -import { UmbStringState } from '@umbraco-cms/backoffice/observable-api'; -import { UmbDeprecation } from '@umbraco-cms/backoffice/utils'; -import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; import { html } from '@umbraco-cms/backoffice/external/lit'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; +import { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; +import { UmbDeprecation } from '@umbraco-cms/backoffice/utils'; +import { UmbStringState } from '@umbraco-cms/backoffice/observable-api'; +import { UMB_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/variant'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; export type UmbGetPropertyValueByAliasArgs = { alias: string; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts index 8d8a683e18f2..d106279e2c9f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts @@ -1,18 +1,17 @@ import { UmbDocumentItemDataResolver } from '../../../item/document-item-data-resolver.js'; +import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../../document-collection.context-token.js'; +import type { UmbDocumentCollectionContext } from '../../document-collection.context.js'; import type { UmbDocumentCollectionItemModel } from '../../types.js'; import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit'; import { fromCamelCase } from '@umbraco-cms/backoffice/utils'; import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; import { UUICardContentNodeElement } from '@umbraco-cms/backoffice/external/uui'; -import { type UmbCollectionColumnConfiguration } from '@umbraco-cms/backoffice/collection'; +import type { UmbCollectionColumnConfiguration } from '@umbraco-cms/backoffice/collection'; import type { UUIInterfaceColor } from '@umbraco-cms/backoffice/external/uui'; -import type { UmbDocumentCollectionContext } from '../../document-collection.context.js'; -import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../../document-collection.context-token.js'; @customElement('umb-document-grid-collection-card') export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICardContentNodeElement) { - #collectionContext?: UmbDocumentCollectionContext; #resolver = new UmbDocumentItemDataResolver(this); diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts index 0e7c36d932fb..cca9f0ac2745 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts @@ -1,14 +1,13 @@ -import type { UmbEditableDocumentCollectionItemModel } from '../../../types.js'; import { UmbDocumentItemDataResolver } from '../../../../item/index.js'; +import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../../../document-collection.context-token.js'; +import type { UmbDocumentCollectionContext } from '../../../document-collection.context.js'; +import type { UmbEditableDocumentCollectionItemModel } from '../../../types.js'; import { customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; -import type { UmbDocumentCollectionContext } from '../../../document-collection.context.js'; -import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../../../document-collection.context-token.js'; @customElement('umb-document-table-column-property-value') export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement implements UmbTableColumnLayoutElement { - #collectionContext?: UmbDocumentCollectionContext; #resolver = new UmbDocumentItemDataResolver(this); diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/manifests.ts index 8309c43cfcb9..803cd9f68245 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/manifests.ts @@ -15,12 +15,12 @@ export const manifests: Array = [ supportsReadOnly: true, }, }, - { - type: "propertyValuePresentation", - alias: "Umb.PropertyValuePresentation.ColorPicker", - name: "Color Picker Property Value Presentation", - element: () => import("./property-value-presentation-color-picker.js"), - propertyEditorAlias: "Umbraco.ColorPicker" - }, + { + type: 'propertyValuePresentation', + alias: 'Umb.PropertyValuePresentation.ColorPicker', + name: 'Color Picker Property Value Presentation', + element: () => import('./property-value-presentation-color-picker.js'), + propertyEditorAlias: 'Umbraco.ColorPicker', + }, schemaManifest, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts index 0fe9926fa8fd..0ded9f7b209f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts @@ -5,7 +5,9 @@ import { import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; @customElement('umb-color-picker-property-value-presentation') -export class UmbColorPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { +export class UmbColorPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement< + { value: string; label: string } | string +> { override render() { const color = this.#getColor(); const label = this.#getLabel(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/manifests.ts index a01f5f187580..7685d81ec92e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/manifests.ts @@ -14,12 +14,12 @@ export const manifests: Array = [ supportsReadOnly: true, }, }, - { - type: "propertyValuePresentation", - alias: "Umb.PropertyValuePresentation.DateOnlyPicker", - name: "Date Only Picker Property Value Presentation", - element: () => import("./property-value-presentation-date-only-picker.js"), - propertyEditorAlias: "Umbraco.DateOnly" - }, + { + type: 'propertyValuePresentation', + alias: 'Umb.PropertyValuePresentation.DateOnlyPicker', + name: 'Date Only Picker Property Value Presentation', + element: () => import('./property-value-presentation-date-only-picker.js'), + propertyEditorAlias: 'Umbraco.DateOnly', + }, schemaManifest, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts index a2eebcef0ca3..5ee440d4d32a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts @@ -2,7 +2,9 @@ import { UmbPropertyValuePresentationBaseElement } from '../../../core/property- import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; @customElement('umb-date-only-picker-property-value-presentation') -export class UmbDateOnlyPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { +export class UmbDateOnlyPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement<{ + date: string; +}> { override render() { const date = this.#getDate(); return date ? html`${date}` : nothing; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/manifests.ts index 38334bc59938..d10b1ea4551f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/manifests.ts @@ -38,12 +38,12 @@ export const manifests: Array = [ }, }, }, - { - type: "propertyValuePresentation", - alias: "Umb.PropertyValuePresentation.DateTimePicker", - name: "Date Time Picker Property Value Presentation", - element: () => import("./property-value-presentation-date-time-picker.js"), - propertyEditorAlias: "Umbraco.DateTimeUnspecified" - }, + { + type: 'propertyValuePresentation', + alias: 'Umb.PropertyValuePresentation.DateTimePicker', + name: 'Date Time Picker Property Value Presentation', + element: () => import('./property-value-presentation-date-time-picker.js'), + propertyEditorAlias: 'Umbraco.DateTimeUnspecified', + }, schemaManifest, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts index 644fbb331abe..f2dfa6a83e69 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts @@ -2,7 +2,9 @@ import { UmbPropertyValuePresentationBaseElement } from '../../../core/property- import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; @customElement('umb-date-time-picker-property-value-presentation') -export class UmbDateTimePickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { +export class UmbDateTimePickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement<{ + date: string; +}> { override render() { const date = this.#getDateTime(); return date ? html`${date}` : nothing; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/manifests.ts index f8c9de331f9c..442e4e5c6ec9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/manifests.ts @@ -52,12 +52,12 @@ export const manifests: Array = [ }, }, }, - { - type: "propertyValuePresentation", - alias: "Umb.PropertyValuePresentation.DateTimeWithTimeZonePicker", - name: "Date Time With Time Zone Picker Property Value Presentation", - element: () => import("./property-value-presentation-date-time-with-time-zone-picker.js"), - propertyEditorAlias: "Umbraco.DateTimeWithTimeZone" - }, + { + type: 'propertyValuePresentation', + alias: 'Umb.PropertyValuePresentation.DateTimeWithTimeZonePicker', + name: 'Date Time With Time Zone Picker Property Value Presentation', + element: () => import('./property-value-presentation-date-time-with-time-zone-picker.js'), + propertyEditorAlias: 'Umbraco.DateTimeWithTimeZone', + }, schemaManifest, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts index c4de390bd6de..d7b3e82aa2e8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts @@ -2,7 +2,10 @@ import { UmbPropertyValuePresentationBaseElement } from '../../../core/property- import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; @customElement('umb-date-time-with-time-zone-picker-property-value-presentation') -export class UmbDateTimePickerWithTimeZonePropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { +export class UmbDateTimePickerWithTimeZonePropertyValuePresentation extends UmbPropertyValuePresentationBaseElement<{ + date: string; + timeZone: string; +}> { override render() { const date = this.#getDateTime(); return date ? html`${date}` : nothing; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/manifests.ts index 77f1041ffd9b..cd7a27b8e7a1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/manifests.ts @@ -38,12 +38,12 @@ export const manifests: Array = [ }, }, }, - { - type: "propertyValuePresentation", - alias: "Umb.PropertyValuePresentation.TimeOnlyPicker", - name: "Time Only Picker Property Value Presentation", - element: () => import("./property-value-presentation-time-only-picker.js"), - propertyEditorAlias: "Umbraco.TimeOnly" - }, + { + type: 'propertyValuePresentation', + alias: 'Umb.PropertyValuePresentation.TimeOnlyPicker', + name: 'Time Only Picker Property Value Presentation', + element: () => import('./property-value-presentation-time-only-picker.js'), + propertyEditorAlias: 'Umbraco.TimeOnly', + }, schemaManifest, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts index 2921594d6eed..3153b8b60583 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts @@ -2,7 +2,9 @@ import { UmbPropertyValuePresentationBaseElement } from '../../../core/property- import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; @customElement('umb-time-only-picker-property-value-presentation') -export class UmbTimeOnlyPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement { +export class UmbTimeOnlyPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement<{ + date: string; +}> { override render() { const time = this.#getTime(); return time ? html`${time}` : nothing; From 55a807d8fb8c3b0fd8f538e1cbb9634d970000f0 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 11 Nov 2025 16:50:41 +0000 Subject: [PATCH 13/25] Added importmap for "@umbraco-cms/backoffice/property-value-presentation" --- src/Umbraco.Web.UI.Client/package.json | 1 + .../src/packages/core/property-value-presentation/index.ts | 2 +- .../src/packages/core/property-value-presentation/types.ts | 1 + src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts | 1 + src/Umbraco.Web.UI.Client/tsconfig.json | 3 +++ 5 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/types.ts diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index 16e3c7157891..fbf4969119ed 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -89,6 +89,7 @@ "./property-action": "./dist-cms/packages/core/property-action/index.js", "./property-editor-data-source": "./dist-cms/packages/core/property-editor-data-source/index.js", "./property-editor": "./dist-cms/packages/core/property-editor/index.js", + "./property-value-presentation": "./dist-cms/packages/core/property-value-presentation/index.js", "./property-type": "./dist-cms/packages/content/property-type/index.js", "./property": "./dist-cms/packages/core/property/index.js", "./recycle-bin": "./dist-cms/packages/core/recycle-bin/index.js", diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts index e6ae559fa622..b379bb82919f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts @@ -1,3 +1,3 @@ export { UmbPropertyValuePresentationBaseElement } from './property-value-presentation-base.js'; export { UmbPropertyValuePresentationDisplayOption } from './property-value-presentation.extension.js'; -export type { ManifestPropertyValuePresentation } from './property-value-presentation.extension.js'; +export type * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/types.ts new file mode 100644 index 000000000000..e3f62b2daf8b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/types.ts @@ -0,0 +1 @@ +export type { ManifestPropertyValuePresentation } from './property-value-presentation.extension.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts b/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts index 5ba008ff3481..1278769689a1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts @@ -51,6 +51,7 @@ export default defineConfig({ 'property-action/index': './property-action/index.ts', 'property-editor-data-source/index': './property-editor-data-source/index.ts', 'property-editor/index': './property-editor/index.ts', + 'property-value-presentation/index': './property-value-presentation/index.ts', 'property/index': './property/index.ts', 'recycle-bin/index': './recycle-bin/index.ts', 'repository/index': './repository/index.ts', diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json index 16c2d20becbd..1f9c4f9be13e 100644 --- a/src/Umbraco.Web.UI.Client/tsconfig.json +++ b/src/Umbraco.Web.UI.Client/tsconfig.json @@ -120,6 +120,9 @@ DON'T EDIT THIS FILE DIRECTLY. It is generated by /devops/tsconfig/index.js "./src/packages/core/property-editor-data-source/index.ts" ], "@umbraco-cms/backoffice/property-editor": ["./src/packages/core/property-editor/index.ts"], + "@umbraco-cms/backoffice/property-value-presentation": [ + "./src/packages/core/property-value-presentation/index.ts" + ], "@umbraco-cms/backoffice/property-type": ["./src/packages/content/property-type/index.ts"], "@umbraco-cms/backoffice/property": ["./src/packages/core/property/index.ts"], "@umbraco-cms/backoffice/recycle-bin": ["./src/packages/core/recycle-bin/index.ts"], From 6653c3ce2cc1c5480ee0464b50de6bd96ce4b43b Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 11 Nov 2025 16:51:28 +0000 Subject: [PATCH 14/25] Removed "alias" and "display" from `UmbPropertyValuePresentationBaseElement` --- .../src/packages/core/property-value-presentation/index.ts | 1 - .../property-value-presentation-base.ts | 7 ------- .../property-value-presentation.extension.ts | 5 ----- 3 files changed, 13 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts index b379bb82919f..db03191f2f84 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts @@ -1,3 +1,2 @@ export { UmbPropertyValuePresentationBaseElement } from './property-value-presentation-base.js'; -export { UmbPropertyValuePresentationDisplayOption } from './property-value-presentation.extension.js'; export type * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts index 06be46d84f12..e95024494c6d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts @@ -1,14 +1,7 @@ -import type { UmbPropertyValuePresentationDisplayOption } from '../../core/property-value-presentation/property-value-presentation.extension.js'; import { property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; export abstract class UmbPropertyValuePresentationBaseElement extends UmbLitElement { - @property() - alias: string = ''; - - @property() - display?: UmbPropertyValuePresentationDisplayOption; - @property({ type: Object }) value?: TValue; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts index 4a4ffbb81308..7677c657781b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts @@ -1,10 +1,5 @@ import type { ManifestElement } from '@umbraco-cms/backoffice/extension-api'; -export enum UmbPropertyValuePresentationDisplayOption { - COLLECTION_COLUMN = 'collection-column', - COLLECTION_CARD = 'collection-card', -} - export interface ManifestPropertyValuePresentation extends ManifestElement { type: 'propertyValuePresentation'; propertyEditorAlias: string; From 808dcaf151008a2eaac9f404f8ea591638b066f3 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 11 Nov 2025 16:59:17 +0000 Subject: [PATCH 15/25] Refactored `propertyValuePresentation` extension elements --- .../core/property-value-presentation/index.ts | 2 +- ...operty-value-presentation-base.element.ts} | 0 ...value-presentation-color-picker.element.ts | 27 ++++++++++ ...roperty-value-presentation-color-picker.ts | 51 ------------------- ...e-presentation-date-only-picker.element.ts | 23 +++++++++ ...rty-value-presentation-date-only-picker.ts | 28 ---------- ...e-presentation-date-time-picker.element.ts | 23 +++++++++ ...rty-value-presentation-date-time-picker.ts | 28 ---------- ...date-time-with-time-zone-picker.element.ts | 34 +++++++++++++ ...ntation-date-time-with-time-zone-picker.ts | 34 ------------- ...e-presentation-time-only-picker.element.ts | 22 ++++++++ ...rty-value-presentation-time-only-picker.ts | 28 ---------- 12 files changed, 130 insertions(+), 170 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/{property-value-presentation-base.ts => property-value-presentation-base.element.ts} (100%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts index db03191f2f84..f6294fdcc7fe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/index.ts @@ -1,2 +1,2 @@ -export { UmbPropertyValuePresentationBaseElement } from './property-value-presentation-base.js'; +export { UmbPropertyValuePresentationBaseElement } from './property-value-presentation-base.element.js'; export type * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation-base.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.element.ts new file mode 100644 index 000000000000..3fe068f27e48 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.element.ts @@ -0,0 +1,27 @@ +import { customElement, html, nothing, when } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyValuePresentationBaseElement } from '@umbraco-cms/backoffice/property-value-presentation'; + +@customElement('umb-color-picker-property-value-presentation') +export class UmbColorPickerPropertyValuePresentationElement extends UmbPropertyValuePresentationBaseElement< + { value: string; label: string } | string +> { + override render() { + if (!this.value) return nothing; + const color = typeof this.value === 'string' ? this.value : this.value.value; + const label = typeof this.value === 'string' ? this.value : this.value.label; + return when( + color, + () => html``, + ); + } +} + +export { UmbColorPickerPropertyValuePresentationElement as element }; + +export default UmbColorPickerPropertyValuePresentationElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-color-picker-property-value-presentation': UmbColorPickerPropertyValuePresentationElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts deleted file mode 100644 index 0ded9f7b209f..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-value-presentation-color-picker.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { - UmbPropertyValuePresentationBaseElement, - UmbPropertyValuePresentationDisplayOption, -} from '../../core/property-value-presentation/index.js'; -import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; - -@customElement('umb-color-picker-property-value-presentation') -export class UmbColorPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement< - { value: string; label: string } | string -> { - override render() { - const color = this.#getColor(); - const label = this.#getLabel(); - const size = this.display == UmbPropertyValuePresentationDisplayOption.COLLECTION_CARD ? 10 : 12; - return color - ? html`` - : nothing; - } - - #getColor() { - if (!this.value) { - return null; - } - - if (typeof this.value === 'string') { - return this.value; - } - - return this.value.value; - } - - #getLabel() { - if (!this.value) { - return ''; - } - - if (typeof this.value === 'string') { - return ''; - } - - return this.value.label; - } -} - -export default UmbColorPickerPropertyValuePresentation; - -declare global { - interface HTMLElementTagNameMap { - 'umb-color-picker-property-value-presentation': UmbColorPickerPropertyValuePresentation; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.element.ts new file mode 100644 index 000000000000..ac8d4ec8d586 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.element.ts @@ -0,0 +1,23 @@ +import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyValuePresentationBaseElement } from '@umbraco-cms/backoffice/property-value-presentation'; + +@customElement('umb-date-only-picker-property-value-presentation') +export class UmbDateOnlyPickerPropertyValuePresentationElement extends UmbPropertyValuePresentationBaseElement<{ + date?: string; +}> { + override render() { + if (!this.value || !this.value.date) return nothing; + const date = new Date(this.value.date).toLocaleDateString(); + return date ? html`${date}` : nothing; + } +} + +export { UmbDateOnlyPickerPropertyValuePresentationElement as element }; + +export default UmbDateOnlyPickerPropertyValuePresentationElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-date-only-picker-property-value-presentation': UmbDateOnlyPickerPropertyValuePresentationElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts deleted file mode 100644 index 5ee440d4d32a..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/property-value-presentation-date-only-picker.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { UmbPropertyValuePresentationBaseElement } from '../../../core/property-value-presentation/index.js'; -import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; - -@customElement('umb-date-only-picker-property-value-presentation') -export class UmbDateOnlyPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement<{ - date: string; -}> { - override render() { - const date = this.#getDate(); - return date ? html`${date}` : nothing; - } - - #getDate() { - if (!this.value) { - return null; - } - - return new Date(this.value.date).toLocaleDateString(); - } -} - -export default UmbDateOnlyPickerPropertyValuePresentation; - -declare global { - interface HTMLElementTagNameMap { - 'umb-date-only-picker-property-value-presentation': UmbDateOnlyPickerPropertyValuePresentation; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.element.ts new file mode 100644 index 000000000000..b50f388afd18 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.element.ts @@ -0,0 +1,23 @@ +import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyValuePresentationBaseElement } from '@umbraco-cms/backoffice/property-value-presentation'; + +@customElement('umb-date-time-picker-property-value-presentation') +export class UmbDateTimePickerPropertyValuePresentationElement extends UmbPropertyValuePresentationBaseElement<{ + date: string; +}> { + override render() { + if (!this.value?.date) return nothing; + const date = new Date(this.value.date).toLocaleString(); + return date ? html`${date}` : nothing; + } +} + +export { UmbDateTimePickerPropertyValuePresentationElement as element }; + +export default UmbDateTimePickerPropertyValuePresentationElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-date-time-picker-property-value-presentation': UmbDateTimePickerPropertyValuePresentationElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts deleted file mode 100644 index f2dfa6a83e69..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/property-value-presentation-date-time-picker.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { UmbPropertyValuePresentationBaseElement } from '../../../core/property-value-presentation/index.js'; -import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; - -@customElement('umb-date-time-picker-property-value-presentation') -export class UmbDateTimePickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement<{ - date: string; -}> { - override render() { - const date = this.#getDateTime(); - return date ? html`${date}` : nothing; - } - - #getDateTime() { - if (!this.value) { - return null; - } - - return new Date(this.value.date).toLocaleString(); - } -} - -export default UmbDateTimePickerPropertyValuePresentation; - -declare global { - interface HTMLElementTagNameMap { - 'umb-date-time-picker-property-value-presentation': UmbDateTimePickerPropertyValuePresentation; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.element.ts new file mode 100644 index 000000000000..be6c14ee83dd --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.element.ts @@ -0,0 +1,34 @@ +import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyValuePresentationBaseElement } from '@umbraco-cms/backoffice/property-value-presentation'; + +@customElement('umb-date-time-with-time-zone-picker-property-value-presentation') +export class UmbDateTimePickerWithTimeZonePropertyValuePresentationElement extends UmbPropertyValuePresentationBaseElement<{ + date: string; + timeZone: string; +}> { + override render() { + if (!this.value) return nothing; + return html`${this.#renderDate()}${this.#renderTimeZone()}`; + } + + #renderDate() { + if (!this.value?.date) return nothing; + const date = new Date(this.value.date).toLocaleString(); + return html`${date}`; + } + + #renderTimeZone() { + if (!this.value?.timeZone) return nothing; + return html` (${this.value.timeZone})`; + } +} + +export { UmbDateTimePickerWithTimeZonePropertyValuePresentationElement as element }; + +export default UmbDateTimePickerWithTimeZonePropertyValuePresentationElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-date-time-with-time-zone-picker-property-value-presentation': UmbDateTimePickerWithTimeZonePropertyValuePresentationElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts deleted file mode 100644 index d7b3e82aa2e8..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/property-value-presentation-date-time-with-time-zone-picker.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { UmbPropertyValuePresentationBaseElement } from '../../../core/property-value-presentation/index.js'; -import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; - -@customElement('umb-date-time-with-time-zone-picker-property-value-presentation') -export class UmbDateTimePickerWithTimeZonePropertyValuePresentation extends UmbPropertyValuePresentationBaseElement<{ - date: string; - timeZone: string; -}> { - override render() { - const date = this.#getDateTime(); - return date ? html`${date}` : nothing; - } - - #getDateTime() { - if (!this.value) { - return null; - } - - let result = new Date(this.value.date).toLocaleString(); - if (this.value.timeZone && this.value.timeZone.length > 0) { - result += ' (' + this.value.timeZone + ')'; - } - - return result; - } -} - -export default UmbDateTimePickerWithTimeZonePropertyValuePresentation; - -declare global { - interface HTMLElementTagNameMap { - 'umb-date-time-with-time-zone-picker-property-value-presentation': UmbDateTimePickerWithTimeZonePropertyValuePresentation; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.element.ts new file mode 100644 index 000000000000..0a3d523ff083 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.element.ts @@ -0,0 +1,22 @@ +import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { UmbPropertyValuePresentationBaseElement } from '@umbraco-cms/backoffice/property-value-presentation'; + +@customElement('umb-time-only-picker-property-value-presentation') +export class UmbTimeOnlyPickerPropertyValuePresentationElement extends UmbPropertyValuePresentationBaseElement<{ + date: string; +}> { + override render() { + if (!this.value?.date) return nothing; + return html`${this.value.date}`; + } +} + +export { UmbTimeOnlyPickerPropertyValuePresentationElement as element }; + +export default UmbTimeOnlyPickerPropertyValuePresentationElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-time-only-picker-property-value-presentation': UmbTimeOnlyPickerPropertyValuePresentationElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts deleted file mode 100644 index 3153b8b60583..000000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/property-value-presentation-time-only-picker.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { UmbPropertyValuePresentationBaseElement } from '../../../core/property-value-presentation/index.js'; -import { customElement, html, nothing } from '@umbraco-cms/backoffice/external/lit'; - -@customElement('umb-time-only-picker-property-value-presentation') -export class UmbTimeOnlyPickerPropertyValuePresentation extends UmbPropertyValuePresentationBaseElement<{ - date: string; -}> { - override render() { - const time = this.#getTime(); - return time ? html`${time}` : nothing; - } - - #getTime() { - if (!this.value) { - return null; - } - - return this.value.date; - } -} - -export default UmbTimeOnlyPickerPropertyValuePresentation; - -declare global { - interface HTMLElementTagNameMap { - 'umb-time-only-picker-property-value-presentation': UmbTimeOnlyPickerPropertyValuePresentation; - } -} From d9208fdd3129e5d8db8c77f42122c5256619a1be Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 11 Nov 2025 17:00:04 +0000 Subject: [PATCH 16/25] Renamed `propertyEditorAlias` to `forPropertyEditorSchemaAlias` --- .../property-value-presentation.extension.ts | 2 +- .../color-picker/manifests.ts | 46 +++---- .../date-time/date-only-picker/manifests.ts | 46 +++---- .../date-time/date-time-picker/manifests.ts | 92 +++++++------- .../manifests.ts | 116 +++++++++--------- .../date-time/time-only-picker/manifests.ts | 92 +++++++------- 6 files changed, 197 insertions(+), 197 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts index 7677c657781b..b7a5ac3d95fc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-value-presentation/property-value-presentation.extension.ts @@ -2,7 +2,7 @@ import type { ManifestElement } from '@umbraco-cms/backoffice/extension-api'; export interface ManifestPropertyValuePresentation extends ManifestElement { type: 'propertyValuePresentation'; - propertyEditorAlias: string; + forPropertyEditorSchemaAlias: string | Array; } declare global { diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/manifests.ts index 803cd9f68245..877c37ba5694 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/manifests.ts @@ -1,26 +1,26 @@ +import { manifest as editorSchema } from './Umbraco.ColorPicker.js'; import { UMB_COLOR_PICKER_PROPERTY_EDITOR_UI_ALIAS } from './constants.js'; -import { manifest as schemaManifest } from './Umbraco.ColorPicker.js'; -export const manifests: Array = [ - { - type: 'propertyEditorUi', - alias: UMB_COLOR_PICKER_PROPERTY_EDITOR_UI_ALIAS, - name: 'Color Picker Property Editor UI', - element: () => import('./property-editor-ui-color-picker.element.js'), - meta: { - label: 'Color Picker', - propertyEditorSchemaAlias: 'Umbraco.ColorPicker', - icon: 'icon-colorpicker', - group: 'pickers', - supportsReadOnly: true, - }, +const editorUi: UmbExtensionManifest = { + type: 'propertyEditorUi', + alias: UMB_COLOR_PICKER_PROPERTY_EDITOR_UI_ALIAS, + name: 'Color Picker Property Editor UI', + element: () => import('./property-editor-ui-color-picker.element.js'), + meta: { + label: 'Color Picker', + propertyEditorSchemaAlias: 'Umbraco.ColorPicker', + icon: 'icon-colorpicker', + group: 'pickers', + supportsReadOnly: true, }, - { - type: 'propertyValuePresentation', - alias: 'Umb.PropertyValuePresentation.ColorPicker', - name: 'Color Picker Property Value Presentation', - element: () => import('./property-value-presentation-color-picker.js'), - propertyEditorAlias: 'Umbraco.ColorPicker', - }, - schemaManifest, -]; +}; + +const valuePresentation: UmbExtensionManifest = { + type: 'propertyValuePresentation', + alias: 'Umb.PropertyValuePresentation.ColorPicker', + name: 'Color Picker Property Value Presentation', + element: () => import('./property-value-presentation-color-picker.element.js'), + forPropertyEditorSchemaAlias: 'Umbraco.ColorPicker', +}; + +export const manifests: Array = [editorSchema, editorUi, valuePresentation]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/manifests.ts index 7685d81ec92e..c503dfce8753 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-only-picker/manifests.ts @@ -1,25 +1,25 @@ -import { manifest as schemaManifest } from './Umbraco.DateOnly.js'; +import { manifest as editorSchema } from './Umbraco.DateOnly.js'; -export const manifests: Array = [ - { - type: 'propertyEditorUi', - alias: 'Umb.PropertyEditorUi.DateOnlyPicker', - name: 'Date Only Picker Property Editor UI', - element: () => import('./property-editor-ui-date-only-picker.element.js'), - meta: { - label: 'Date Only', - propertyEditorSchemaAlias: 'Umbraco.DateOnly', - icon: 'icon-calendar-alt', - group: 'date', - supportsReadOnly: true, - }, +const editorUi: UmbExtensionManifest = { + type: 'propertyEditorUi', + alias: 'Umb.PropertyEditorUi.DateOnlyPicker', + name: 'Date Only Picker Property Editor UI', + element: () => import('./property-editor-ui-date-only-picker.element.js'), + meta: { + label: 'Date Only', + propertyEditorSchemaAlias: 'Umbraco.DateOnly', + icon: 'icon-calendar-alt', + group: 'date', + supportsReadOnly: true, }, - { - type: 'propertyValuePresentation', - alias: 'Umb.PropertyValuePresentation.DateOnlyPicker', - name: 'Date Only Picker Property Value Presentation', - element: () => import('./property-value-presentation-date-only-picker.js'), - propertyEditorAlias: 'Umbraco.DateOnly', - }, - schemaManifest, -]; +}; + +const valuePresentation: UmbExtensionManifest = { + type: 'propertyValuePresentation', + alias: 'Umb.PropertyValuePresentation.DateOnlyPicker', + name: 'Date Only Picker Property Value Presentation', + element: () => import('./property-value-presentation-date-only-picker.element.js'), + forPropertyEditorSchemaAlias: 'Umbraco.DateOnly', +}; + +export const manifests: Array = [editorSchema, editorUi, valuePresentation]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/manifests.ts index d10b1ea4551f..31974dfda138 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-picker/manifests.ts @@ -1,49 +1,49 @@ -import { manifest as schemaManifest } from './Umbraco.DateTimeUnspecified.js'; +import { manifest as editorSchema } from './Umbraco.DateTimeUnspecified.js'; -export const manifests: Array = [ - { - type: 'propertyEditorUi', - alias: 'Umb.PropertyEditorUi.DateTimePicker', - name: 'Date Time Picker Property Editor UI', - element: () => import('./property-editor-ui-date-time-picker.element.js'), - meta: { - label: 'Date Time (unspecified)', - propertyEditorSchemaAlias: 'Umbraco.DateTimeUnspecified', - icon: 'icon-calendar-alt', - group: 'date', - supportsReadOnly: true, - settings: { - properties: [ - { - alias: 'timeFormat', - label: '#dateTimePicker_config_timeFormat', - propertyEditorUiAlias: 'Umb.PropertyEditorUi.RadioButtonList', - config: [ - { - alias: 'items', - value: [ - { name: 'HH:mm', value: 'HH:mm' }, - { name: 'HH:mm:ss', value: 'HH:mm:ss' }, - ], - }, - ], - }, - ], - defaultData: [ - { - alias: 'timeFormat', - value: 'HH:mm', - }, - ], - }, +const editorUi: UmbExtensionManifest = { + type: 'propertyEditorUi', + alias: 'Umb.PropertyEditorUi.DateTimePicker', + name: 'Date Time Picker Property Editor UI', + element: () => import('./property-editor-ui-date-time-picker.element.js'), + meta: { + label: 'Date Time (unspecified)', + propertyEditorSchemaAlias: 'Umbraco.DateTimeUnspecified', + icon: 'icon-calendar-alt', + group: 'date', + supportsReadOnly: true, + settings: { + properties: [ + { + alias: 'timeFormat', + label: '#dateTimePicker_config_timeFormat', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.RadioButtonList', + config: [ + { + alias: 'items', + value: [ + { name: 'HH:mm', value: 'HH:mm' }, + { name: 'HH:mm:ss', value: 'HH:mm:ss' }, + ], + }, + ], + }, + ], + defaultData: [ + { + alias: 'timeFormat', + value: 'HH:mm', + }, + ], }, }, - { - type: 'propertyValuePresentation', - alias: 'Umb.PropertyValuePresentation.DateTimePicker', - name: 'Date Time Picker Property Value Presentation', - element: () => import('./property-value-presentation-date-time-picker.js'), - propertyEditorAlias: 'Umbraco.DateTimeUnspecified', - }, - schemaManifest, -]; +}; + +const valuePresentation: UmbExtensionManifest = { + type: 'propertyValuePresentation', + alias: 'Umb.PropertyValuePresentation.DateTimePicker', + name: 'Date Time Picker Property Value Presentation', + element: () => import('./property-value-presentation-date-time-picker.element.js'), + forPropertyEditorSchemaAlias: 'Umbraco.DateTimeUnspecified', +}; + +export const manifests: Array = [editorSchema, editorUi, valuePresentation]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/manifests.ts index 442e4e5c6ec9..6cbad83904ff 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/date-time-with-time-zone-picker/manifests.ts @@ -1,63 +1,63 @@ -import { manifest as schemaManifest } from './Umbraco.DateTimeWithTimeZone.js'; +import { manifest as editorSchema } from './Umbraco.DateTimeWithTimeZone.js'; -export const manifests: Array = [ - { - type: 'propertyEditorUi', - alias: 'Umb.PropertyEditorUi.DateTimeWithTimeZonePicker', - name: 'Date Time with Time Zone Picker Property Editor UI', - element: () => import('./property-editor-ui-date-time-with-time-zone-picker.element.js'), - meta: { - label: 'Date Time (with time zone)', - propertyEditorSchemaAlias: 'Umbraco.DateTimeWithTimeZone', - icon: 'icon-calendar-alt', - group: 'date', - supportsReadOnly: true, - settings: { - properties: [ - { - alias: 'timeFormat', - label: '#dateTimePicker_config_timeFormat', - propertyEditorUiAlias: 'Umb.PropertyEditorUi.RadioButtonList', - config: [ - { - alias: 'items', - value: [ - { name: 'HH:mm', value: 'HH:mm' }, - { name: 'HH:mm:ss', value: 'HH:mm:ss' }, - ], - }, - ], - }, - { - alias: 'timeZones', - label: '#dateTimePicker_config_timeZones', - description: '{#dateTimePicker_config_timeZones_description}', - propertyEditorUiAlias: 'Umb.PropertyEditorUi.TimeZonePicker', - config: [], - }, - ], - defaultData: [ - { - alias: 'timeFormat', - value: 'HH:mm', - }, - { - alias: 'timeZones', - value: { - mode: 'all', - timeZones: [], +const editorUi: UmbExtensionManifest = { + type: 'propertyEditorUi', + alias: 'Umb.PropertyEditorUi.DateTimeWithTimeZonePicker', + name: 'Date Time with Time Zone Picker Property Editor UI', + element: () => import('./property-editor-ui-date-time-with-time-zone-picker.element.js'), + meta: { + label: 'Date Time (with time zone)', + propertyEditorSchemaAlias: 'Umbraco.DateTimeWithTimeZone', + icon: 'icon-calendar-alt', + group: 'date', + supportsReadOnly: true, + settings: { + properties: [ + { + alias: 'timeFormat', + label: '#dateTimePicker_config_timeFormat', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.RadioButtonList', + config: [ + { + alias: 'items', + value: [ + { name: 'HH:mm', value: 'HH:mm' }, + { name: 'HH:mm:ss', value: 'HH:mm:ss' }, + ], }, + ], + }, + { + alias: 'timeZones', + label: '#dateTimePicker_config_timeZones', + description: '{#dateTimePicker_config_timeZones_description}', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.TimeZonePicker', + config: [], + }, + ], + defaultData: [ + { + alias: 'timeFormat', + value: 'HH:mm', + }, + { + alias: 'timeZones', + value: { + mode: 'all', + timeZones: [], }, - ], - }, + }, + ], }, }, - { - type: 'propertyValuePresentation', - alias: 'Umb.PropertyValuePresentation.DateTimeWithTimeZonePicker', - name: 'Date Time With Time Zone Picker Property Value Presentation', - element: () => import('./property-value-presentation-date-time-with-time-zone-picker.js'), - propertyEditorAlias: 'Umbraco.DateTimeWithTimeZone', - }, - schemaManifest, -]; +}; + +const valuePresentation: UmbExtensionManifest = { + type: 'propertyValuePresentation', + alias: 'Umb.PropertyValuePresentation.DateTimeWithTimeZonePicker', + name: 'Date Time With Time Zone Picker Property Value Presentation', + element: () => import('./property-value-presentation-date-time-with-time-zone-picker.element.js'), + forPropertyEditorSchemaAlias: 'Umbraco.DateTimeWithTimeZone', +}; + +export const manifests = [editorSchema, editorUi, valuePresentation]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/manifests.ts index cd7a27b8e7a1..0eef6b571c0e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-time/time-only-picker/manifests.ts @@ -1,49 +1,49 @@ -import { manifest as schemaManifest } from './Umbraco.TimeOnly.js'; +import { manifest as editorSchema } from './Umbraco.TimeOnly.js'; -export const manifests: Array = [ - { - type: 'propertyEditorUi', - alias: 'Umb.PropertyEditorUi.TimeOnlyPicker', - name: 'Time Only Picker Property Editor UI', - element: () => import('./property-editor-ui-time-only-picker.element.js'), - meta: { - label: 'Time Only', - propertyEditorSchemaAlias: 'Umbraco.TimeOnly', - icon: 'icon-time', - group: 'date', - supportsReadOnly: true, - settings: { - properties: [ - { - alias: 'timeFormat', - label: '#dateTimePicker_config_timeFormat', - propertyEditorUiAlias: 'Umb.PropertyEditorUi.RadioButtonList', - config: [ - { - alias: 'items', - value: [ - { name: 'HH:mm', value: 'HH:mm' }, - { name: 'HH:mm:ss', value: 'HH:mm:ss' }, - ], - }, - ], - }, - ], - defaultData: [ - { - alias: 'timeFormat', - value: 'HH:mm', - }, - ], - }, +const editorUi: UmbExtensionManifest = { + type: 'propertyEditorUi', + alias: 'Umb.PropertyEditorUi.TimeOnlyPicker', + name: 'Time Only Picker Property Editor UI', + element: () => import('./property-editor-ui-time-only-picker.element.js'), + meta: { + label: 'Time Only', + propertyEditorSchemaAlias: 'Umbraco.TimeOnly', + icon: 'icon-time', + group: 'date', + supportsReadOnly: true, + settings: { + properties: [ + { + alias: 'timeFormat', + label: '#dateTimePicker_config_timeFormat', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.RadioButtonList', + config: [ + { + alias: 'items', + value: [ + { name: 'HH:mm', value: 'HH:mm' }, + { name: 'HH:mm:ss', value: 'HH:mm:ss' }, + ], + }, + ], + }, + ], + defaultData: [ + { + alias: 'timeFormat', + value: 'HH:mm', + }, + ], }, }, - { - type: 'propertyValuePresentation', - alias: 'Umb.PropertyValuePresentation.TimeOnlyPicker', - name: 'Time Only Picker Property Value Presentation', - element: () => import('./property-value-presentation-time-only-picker.js'), - propertyEditorAlias: 'Umbraco.TimeOnly', - }, - schemaManifest, -]; +}; + +const valuePresentation: UmbExtensionManifest = { + type: 'propertyValuePresentation', + alias: 'Umb.PropertyValuePresentation.TimeOnlyPicker', + name: 'Time Only Picker Property Value Presentation', + element: () => import('./property-value-presentation-time-only-picker.element.js'), + forPropertyEditorSchemaAlias: 'Umbraco.TimeOnly', +}; + +export const manifests: Array = [editorSchema, editorUi, valuePresentation]; From 4f347a44f157f6841fe340d55b3f8bcabc09043d Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 11 Nov 2025 17:04:02 +0000 Subject: [PATCH 17/25] Extracted out the system values to "umb-document-table-column-system-value" component --- ...ument-table-column-system-value.element.ts | 89 +++++++++++++++++++ .../document-table-collection-view.element.ts | 6 +- 2 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-system-value.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-system-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-system-value.element.ts new file mode 100644 index 000000000000..ca709b47bff1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-system-value.element.ts @@ -0,0 +1,89 @@ +import { UmbDocumentItemDataResolver } from '../../../../item/index.js'; +import type { UmbEditableDocumentCollectionItemModel } from '../../../types.js'; +import { customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit'; +import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; + +@customElement('umb-document-table-column-system-value') +export class UmbDocumentTableColumnSystemValueElement extends UmbLitElement implements UmbTableColumnLayoutElement { + #resolver = new UmbDocumentItemDataResolver(this); + + @state() + private _createDate?: Date; + + @state() + private _state?: string; + + @state() + private _updateDate?: Date; + + column!: UmbTableColumn; + item!: UmbTableItem; + + @property({ attribute: false }) + public set value(value: UmbEditableDocumentCollectionItemModel) { + this.#value = value; + if (value.item) { + this.#resolver.setData(value.item); + } + } + public get value(): UmbEditableDocumentCollectionItemModel { + return this.#value; + } + #value!: UmbEditableDocumentCollectionItemModel; + + constructor() { + super(); + + this.#resolver.observe(this.#resolver.state, (state) => (this._state = state || '')); + this.#resolver.observe(this.#resolver.createDate, (createDate) => (this._createDate = createDate)); + this.#resolver.observe(this.#resolver.updateDate, (updateDate) => (this._updateDate = updateDate)); + } + + #getPropertyValueByAlias() { + const alias = this.column.alias; + const item = this.value.item; + switch (alias) { + case 'contentTypeAlias': + return item.documentType.alias; + case 'createDate': + return this._createDate?.toLocaleString(); + case 'creator': + case 'owner': + return item.creator; + case 'published': + return this._state !== DocumentVariantStateModel.DRAFT ? 'True' : 'False'; + case 'sortOrder': + return item.sortOrder; + case 'updateDate': + return this._updateDate?.toLocaleString(); + case 'updater': + return item.updater; + default: { + // NOTE: This shouldn't be called, but left in place for safety. [LK] + const culture = this.#resolver.getCulture(); + const prop = item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture)); + return prop?.value ?? ''; + } + } + } + + override render() { + if (!this.value) return nothing; + const value = this.#getPropertyValueByAlias(); + return when( + this.column.labelTemplate, + () => html``, + () => html`${value}`, + ); + } +} + +export default UmbDocumentTableColumnSystemValueElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-document-table-column-system-value': UmbDocumentTableColumnSystemValueElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts index 98d0bd7138c1..96ab12b1d79b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts @@ -20,6 +20,7 @@ import './column-layouts/document-entity-actions-table-column-view.element.js'; import './column-layouts/document-table-column-name.element.js'; import './column-layouts/document-table-column-property-value.element.js'; import './column-layouts/document-table-column-state.element.js'; +import './column-layouts/document-table-column-system-value.element.js'; @customElement('umb-document-table-collection-view') export class UmbDocumentTableCollectionViewElement extends UmbLitElement { @@ -106,7 +107,10 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { return { name: this.localize.string(item.header), alias: item.alias, - elementName: item.elementName || 'umb-document-table-column-property-value', + elementName: + item.elementName || item.isSystem + ? 'umb-document-table-column-system-value' + : 'umb-document-table-column-property-value', labelTemplate: item.nameTemplate, allowSorting: true, }; From 3b3d3cb9395039cecc5c53326f0d0dc92b8bd4c4 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 11 Nov 2025 17:04:43 +0000 Subject: [PATCH 18/25] Refactored "umb-document-table-column-property-value" to focus on user property values (not system values) --- ...ent-table-column-property-value.element.ts | 71 +++++++------------ 1 file changed, 27 insertions(+), 44 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts index cca9f0ac2745..c34a11dcce33 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts @@ -1,26 +1,15 @@ import { UmbDocumentItemDataResolver } from '../../../../item/index.js'; -import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../../../document-collection.context-token.js'; -import type { UmbDocumentCollectionContext } from '../../../document-collection.context.js'; import type { UmbEditableDocumentCollectionItemModel } from '../../../types.js'; import { customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; +import type { ManifestPropertyValuePresentation } from '@umbraco-cms/backoffice/property-value-presentation'; +import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils'; @customElement('umb-document-table-column-property-value') export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement implements UmbTableColumnLayoutElement { - #collectionContext?: UmbDocumentCollectionContext; - #resolver = new UmbDocumentItemDataResolver(this); - @state() - private _createDate?: Date; - - @state() - private _state?: string; - - @state() - private _updateDate?: Date; - column!: UmbTableColumn; item!: UmbTableItem; @@ -37,41 +26,35 @@ export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement im } #value!: UmbEditableDocumentCollectionItemModel; - constructor() { - super(); - - this.consumeContext(UMB_DOCUMENT_COLLECTION_CONTEXT, (instance) => { - this.#collectionContext = instance; - }); - - this.#resolver.observe(this.#resolver.state, (state) => (this._state = state || '')); - this.#resolver.observe(this.#resolver.createDate, (createDate) => (this._createDate = createDate)); - this.#resolver.observe(this.#resolver.updateDate, (updateDate) => (this._updateDate = updateDate)); - } - - #getPropertyValueByAlias() { - const args = { - alias: this.column.alias, - documentTypeAlias: this.value.item.documentType.alias, - createDate: this._createDate, - updateDate: this._updateDate, - state: this._state, - culture: this.#resolver.getCulture(), - creator: this.value.item.creator, - updater: this.value.item.updater, - sortOrder: this.value.item.sortOrder, - values: this.value.item.values, - }; - return this.#collectionContext?.getPropertyValueByAlias(args); + #getPropertyByAlias() { + const alias = this.column.alias; + const item = this.value.item; + const culture = this.#resolver.getCulture(); + const prop = item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture)); + return prop; } override render() { - if (!this.value) return nothing; - const value = this.#getPropertyValueByAlias(); + if (!this.value?.item) return nothing; + const prop = this.#getPropertyByAlias(); + const props = { value: prop?.value ?? '' }; + + if (this.column.labelTemplate) { + return html``; + } + return when( - this.column.labelTemplate, - () => html``, - () => html`${value}`, + prop?.editorAlias, + (schemaAlias) => html` + + stringOrStringArrayContains(m.forPropertyEditorSchemaAlias, schemaAlias)} + .props=${props}> + ${prop?.value ?? nothing} + + `, + () => (prop?.value ? html`${prop.value}` : nothing), ); } } From 3eb3670f57e81b445b2937e02a01e7a524cd1359 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 11 Nov 2025 17:05:31 +0000 Subject: [PATCH 19/25] Refactored "umb-document-grid-collection-card" to remove markup from the context API --- .../document-grid-collection-card.element.ts | 76 ++++++++++++------- 1 file changed, 49 insertions(+), 27 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts index d106279e2c9f..98d89e4ba684 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts @@ -1,19 +1,16 @@ import { UmbDocumentItemDataResolver } from '../../../item/document-item-data-resolver.js'; -import { UMB_DOCUMENT_COLLECTION_CONTEXT } from '../../document-collection.context-token.js'; -import type { UmbDocumentCollectionContext } from '../../document-collection.context.js'; import type { UmbDocumentCollectionItemModel } from '../../types.js'; -import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit'; -import { fromCamelCase } from '@umbraco-cms/backoffice/utils'; +import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit'; +import { fromCamelCase, stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils'; import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; import { UUICardContentNodeElement } from '@umbraco-cms/backoffice/external/uui'; +import type { ManifestPropertyValuePresentation } from '@umbraco-cms/backoffice/property-value-presentation'; import type { UmbCollectionColumnConfiguration } from '@umbraco-cms/backoffice/collection'; import type { UUIInterfaceColor } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-document-grid-collection-card') export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICardContentNodeElement) { - #collectionContext?: UmbDocumentCollectionContext; - #resolver = new UmbDocumentItemDataResolver(this); @state() @@ -43,30 +40,39 @@ export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICar constructor() { super(); - this.consumeContext(UMB_DOCUMENT_COLLECTION_CONTEXT, (instance) => { - this.#collectionContext = instance; - }); - this.#resolver.observe(this.#resolver.name, (name) => (this.name = name || '')); this.#resolver.observe(this.#resolver.state, (state) => (this._state = state || '')); this.#resolver.observe(this.#resolver.createDate, (createDate) => (this._createDate = createDate)); this.#resolver.observe(this.#resolver.updateDate, (updateDate) => (this._updateDate = updateDate)); } - #getPropertyValueByAlias(alias: string) { - const args = { - alias: alias, - documentTypeAlias: this.item.documentType.alias, - createDate: this._createDate, - updateDate: this._updateDate, - state: this._state, - culture: this.#resolver.getCulture(), - creator: this.item.creator, - updater: this.item.updater, - sortOrder: this.item.sortOrder, - values: this.item.values, - }; - return this.#collectionContext?.getPropertyValueByAlias(args); + #getSystemValue(alias: string) { + switch (alias) { + case 'contentTypeAlias': + return this.item.documentType.alias; + case 'createDate': + return this._createDate?.toLocaleString(); + case 'creator': + case 'owner': + return this.item.creator; + case 'published': + return this._state !== DocumentVariantStateModel.DRAFT ? 'True' : 'False'; + case 'sortOrder': + return this.item.sortOrder; + case 'updateDate': + return this._updateDate?.toLocaleString(); + case 'updater': + return this.item.updater; + default: + return null; + } + } + + #getPropertyByAlias(column: UmbCollectionColumnConfiguration) { + const alias = column.alias; + const culture = this.#resolver.getCulture(); + const prop = this.item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture)); + return prop; } #getStateTagConfig(): { color: UUIInterfaceColor; label: string } | undefined { @@ -116,14 +122,30 @@ export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICar } #renderProperty(column: UmbCollectionColumnConfiguration) { - const value = this.#getPropertyValueByAlias(column.alias); + const prop = this.#getPropertyByAlias(column); + const value = column.isSystem ? this.#getSystemValue(column.alias) : prop?.value; + const props = { value: value ?? '' }; + return html`
  • ${this.localize.string(column.header)}: ${when( column.nameTemplate, - () => html``, - () => html`${value}`, + () => html``, + () => + when( + prop?.editorAlias, + (schemaAlias) => html` + + stringOrStringArrayContains(m.forPropertyEditorSchemaAlias, schemaAlias)} + .props=${props}> + ${prop?.value ?? nothing} + + `, + () => (prop?.value ? html`${prop.value}` : nothing), + ), )}
    • `; From 2da794b1d13e037c1e2f8d0463bf7623889b1cde Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 11 Nov 2025 17:06:57 +0000 Subject: [PATCH 20/25] Removed `getPropertyValueByAlias` from `UmbDocumentCollectionContext` as we shouldn't really be generating markup from here. This brings some duplication back between the grid/table collection-views, we can refine in due course. --- .../collection/document-collection.context.ts | 74 +------------------ 1 file changed, 1 insertion(+), 73 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts index c76e49566cf4..3ddcc0bfeb0f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts @@ -1,29 +1,11 @@ -import { UmbPropertyValuePresentationDisplayOption } from '../../../core/property-value-presentation/index.js'; -import type { ManifestPropertyValuePresentation } from '../../../core/property-value-presentation/index.js'; -import type { UmbDocumentCollectionFilterModel, UmbDocumentCollectionItemModel } from './types.js'; import { UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS } from './constants.js'; -import { html } from '@umbraco-cms/backoffice/external/lit'; -import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; +import type { UmbDocumentCollectionFilterModel, UmbDocumentCollectionItemModel } from './types.js'; import { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; import { UmbDeprecation } from '@umbraco-cms/backoffice/utils'; import { UmbStringState } from '@umbraco-cms/backoffice/observable-api'; import { UMB_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/variant'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -export type UmbGetPropertyValueByAliasArgs = { - alias: string; - documentTypeAlias: string; - createDate?: Date; - updateDate?: Date; - state?: string; - culture?: string | null | undefined; - creator?: string | null | undefined; - updater?: string | null | undefined; - sortOrder: number; - values: Array<{ alias: string; editorAlias: string; culture?: string; segment?: string; value: string }>; -}; - export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext< UmbDocumentCollectionItemModel, UmbDocumentCollectionFilterModel @@ -32,8 +14,6 @@ export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext< #displayCulture = new UmbStringState(undefined); #displayCultureObservable = this.#displayCulture.asObservable(); - #propertyValuePresentationManifests: ManifestPropertyValuePresentation[] = []; - constructor(host: UmbControllerHost) { super(host, UMB_DOCUMENT_TABLE_COLLECTION_VIEW_ALIAS); @@ -41,8 +21,6 @@ export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext< this.#variantContext = variantContext; this.#observeDisplayCulture(); }); - - this.#propertyValuePresentationManifests = umbExtensionsRegistry.getByType('propertyValuePresentation'); } #observeDisplayCulture() { @@ -78,56 +56,6 @@ export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext< await this.observe(this.#displayCultureObservable)?.asPromise(); await super._requestCollection(); } - - getPropertyValueByAlias(args: UmbGetPropertyValueByAliasArgs) { - const alias = args.alias; - switch (alias) { - case 'contentTypeAlias': - return args.documentTypeAlias; - case 'createDate': - return args.createDate?.toLocaleString(); - case 'creator': - case 'owner': - return args.creator; - case 'published': - return args.state !== DocumentVariantStateModel.DRAFT ? 'True' : 'False'; - case 'sortOrder': - return args.sortOrder; - case 'updateDate': - return args.updateDate?.toLocaleString(); - case 'updater': - return args.updater; - default: { - const prop = args.values.find((x) => x.alias === alias && (!x.culture || x.culture === args.culture)); - - if (prop) { - const value = prop.value ?? ''; - const propertyValuePresentationManifest = this.#getPropertyValuePresentationManifest(prop.editorAlias); - if (propertyValuePresentationManifest.length > 0) { - return html` x.propertyEditorAlias === prop.editorAlias} - .props=${{ - alias: alias, - value: value, - display: UmbPropertyValuePresentationDisplayOption.COLLECTION_COLUMN, - }}> - `; - } - - return value; - } - - return ''; - } - } - } - - #getPropertyValuePresentationManifest(propertyEditorAlias: string) { - return this.#propertyValuePresentationManifests.filter( - (manifest) => manifest.propertyEditorAlias === propertyEditorAlias, - ); - } } export { UmbDocumentCollectionContext as api }; From 0e6691b2ba41a41fae6859af23ae3219b2688291 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 11 Nov 2025 18:19:28 +0000 Subject: [PATCH 21/25] Aligned media collection code --- .../document-grid-collection-view.element.ts | 2 +- ...ent-table-column-property-value.element.ts | 2 +- .../document-table-collection-view.element.ts | 7 ++- .../media-collection.server.data-source.ts | 2 +- .../packages/media/media/collection/types.ts | 2 +- .../media-grid-collection-view.element.ts | 6 +- ...ntity-actions-table-column-view.element.ts | 24 ++++++++ ...dia-table-column-property-value.element.ts | 55 ++++++++++++++++++ ...media-table-column-system-value.element.ts | 56 +++++++++++++++++++ .../media-table-collection-view.element.ts | 39 +++---------- 10 files changed, 155 insertions(+), 40 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-entity-actions-table-column-view.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-property-value.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-system-value.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts index 6f8fdb04fabb..63d78ef93245 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts @@ -3,8 +3,8 @@ import { UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN } from '../../../paths.js'; import type { UmbDocumentCollectionFilterModel, UmbDocumentCollectionItemModel } from '../../types.js'; import { css, customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbDefaultCollectionContext, UmbCollectionColumnConfiguration } from '@umbraco-cms/backoffice/collection'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import type { UmbDefaultCollectionContext, UmbCollectionColumnConfiguration } from '@umbraco-cms/backoffice/collection'; import '@umbraco-cms/backoffice/ufm'; import './document-grid-collection-card.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts index c34a11dcce33..a10439a3e9cc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts @@ -40,7 +40,7 @@ export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement im const props = { value: prop?.value ?? '' }; if (this.column.labelTemplate) { - return html``; + return html``; } return when( diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts index 96ab12b1d79b..90310d71f652 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts @@ -108,9 +108,8 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { name: this.localize.string(item.header), alias: item.alias, elementName: - item.elementName || item.isSystem - ? 'umb-document-table-column-system-value' - : 'umb-document-table-column-property-value', + item.elementName || + (item.isSystem ? 'umb-document-table-column-system-value' : 'umb-document-table-column-property-value'), labelTemplate: item.nameTemplate, allowSorting: true, }; @@ -121,6 +120,8 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { ...userColumns, { name: '', alias: 'entityActions', align: 'right' }, ]; + } else { + this._tableColumns = [...this.#systemColumns, { name: '', alias: 'entityActions', align: 'right' }]; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/repository/media-collection.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/repository/media-collection.server.data-source.ts index e6d6ef486287..d6d91302e095 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/repository/media-collection.server.data-source.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/repository/media-collection.server.data-source.ts @@ -43,7 +43,7 @@ export class UmbMediaCollectionServerDataSource implements UmbCollectionDataSour updateDate: new Date(variant.updateDate), updater: item.creator, // TODO: Check if the `updater` is available for media items. [LK] values: item.values.map((item) => { - return { alias: item.alias, value: item.value as string }; + return { alias: item.alias, editorAlias: item.editorAlias, value: item.value as string }; }), flags: item.flags, }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/types.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/types.ts index 9cb9332e6072..a800fdf60b7e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/types.ts @@ -21,7 +21,7 @@ export interface UmbMediaCollectionItemModel extends UmbEntityWithFlags { sortOrder?: number; updateDate: Date; updater?: string | null; - values?: Array<{ alias: string; value: string }>; + values?: Array<{ alias: string; editorAlias: string; value: string }>; url?: string; status?: UmbFileDropzoneItemStatus; /** diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/grid/media-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/grid/media-grid-collection-view.element.ts index 1a4cf709ed8b..66f9eeff31d8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/grid/media-grid-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/grid/media-grid-collection-view.element.ts @@ -1,12 +1,12 @@ import { UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN } from '../../../paths.js'; -import type { UmbMediaCollectionItemModel } from '../../types.js'; -import type { UmbMediaCollectionContext } from '../../media-collection.context.js'; import { UMB_MEDIA_COLLECTION_CONTEXT } from '../../media-collection.context-token.js'; import { UMB_MEDIA_PLACEHOLDER_ENTITY_TYPE } from '../../../entity.js'; +import type { UmbMediaCollectionContext } from '../../media-collection.context.js'; +import type { UmbMediaCollectionItemModel } from '../../types.js'; import { css, customElement, html, ifDefined, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbFileDropzoneItemStatus } from '@umbraco-cms/backoffice/dropzone'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import '@umbraco-cms/backoffice/imaging'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-entity-actions-table-column-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-entity-actions-table-column-view.element.ts new file mode 100644 index 000000000000..6f5810cb660f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-entity-actions-table-column-view.element.ts @@ -0,0 +1,24 @@ +import type { UmbMediaCollectionItemModel } from '../../../types.js'; +import { customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; + +@customElement('umb-media-entity-actions-table-column-view') +export class UmbMediaEntityActionsTableColumnViewElement extends UmbLitElement { + @property({ attribute: false }) + value?: UmbMediaCollectionItemModel; + + override render() { + if (!this.value) return nothing; + + return html` + + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-media-entity-actions-table-column-view': UmbMediaEntityActionsTableColumnViewElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-property-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-property-value.element.ts new file mode 100644 index 000000000000..7d03f5b6bb49 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-property-value.element.ts @@ -0,0 +1,55 @@ +import type { UmbEditableMediaCollectionItemModel } from '../../../types.js'; +import { customElement, html, nothing, property, when } from '@umbraco-cms/backoffice/external/lit'; +import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import type { ManifestPropertyValuePresentation } from '@umbraco-cms/backoffice/property-value-presentation'; +import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; + +@customElement('umb-media-table-column-property-value') +export class UmbMediaTableColumnPropertyValueElement extends UmbLitElement implements UmbTableColumnLayoutElement { + column!: UmbTableColumn; + item!: UmbTableItem; + + @property({ attribute: false }) + value!: UmbEditableMediaCollectionItemModel; + + #getPropertyByAlias() { + const alias = this.column.alias; + const item = this.value.item; + const prop = item.values?.find((x) => x.alias === alias); + + return prop; + } + + override render() { + if (!this.value?.item) return nothing; + const prop = this.#getPropertyByAlias(); + const props = { value: prop?.value ?? '' }; + + if (this.column.labelTemplate) { + return html``; + } + + return when( + prop?.editorAlias, + (schemaAlias) => html` + + stringOrStringArrayContains(m.forPropertyEditorSchemaAlias, schemaAlias)} + .props=${props}> + ${prop?.value ?? nothing} + + `, + () => (prop?.value ? html`${prop.value}` : nothing), + ); + } +} + +export default UmbMediaTableColumnPropertyValueElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-media-table-column-property-value': UmbMediaTableColumnPropertyValueElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-system-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-system-value.element.ts new file mode 100644 index 000000000000..92527fff0189 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-system-value.element.ts @@ -0,0 +1,56 @@ +import type { UmbEditableMediaCollectionItemModel } from '../../../types.js'; +import { customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit'; +import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; + +@customElement('umb-media-table-column-system-value') +export class UmbDocumentTableColumnSystemValueElement extends UmbLitElement implements UmbTableColumnLayoutElement { + column!: UmbTableColumn; + item!: UmbTableItem; + + @property({ attribute: false }) + value!: UmbEditableMediaCollectionItemModel; + + #getPropertyValueByAlias() { + const alias = this.column.alias; + const item = this.value.item; + switch (alias) { + case 'contentTypeAlias': + return item.contentTypeAlias; + case 'createDate': + return item.createDate.toLocaleString(); + case 'name': + return item.name; + case 'creator': + case 'owner': + return item.creator; + case 'sortOrder': + return item.sortOrder; + case 'updateDate': + return item.updateDate.toLocaleString(); + case 'updater': + return item.updater; + default: + return item.values?.find((value) => value.alias === alias)?.value ?? ''; + } + } + + override render() { + if (!this.value) return nothing; + const value = this.#getPropertyValueByAlias(); + return when( + this.column.labelTemplate, + () => html``, + () => html`${value}`, + ); + } +} + +export default UmbDocumentTableColumnSystemValueElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-media-table-column-system-value': UmbDocumentTableColumnSystemValueElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/media-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/media-table-collection-view.element.ts index 02afe0e68005..e1603d0bafe4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/media-table-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/media-table-collection-view.element.ts @@ -15,7 +15,10 @@ import type { UmbTableSelectedEvent, } from '@umbraco-cms/backoffice/components'; +import './column-layouts/media-entity-actions-table-column-view.element.js'; import './column-layouts/media-table-column-name.element.js'; +import './column-layouts/media-table-column-property-value.element.js'; +import './column-layouts/media-table-column-system-value.element.js'; @customElement('umb-media-table-collection-view') export class UmbMediaTableCollectionViewElement extends UmbLitElement { @@ -95,7 +98,9 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement { return { name: this.localize.string(item.header), alias: item.alias, - elementName: item.elementName, + elementName: + item.elementName || + (item.isSystem ? 'umb-media-table-column-system-value' : 'umb-media-table-column-property-value'), labelTemplate: item.nameTemplate, allowSorting: true, }; @@ -128,12 +133,8 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement { if (column.alias === 'entityActions') { return { columnAlias: 'entityActions', - value: html``, + value: html``, }; } @@ -143,7 +144,7 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement { return { columnAlias: column.alias, - value: column.elementName ? { item, editPath } : this.#getPropertyValueByAlias(item, column.alias), + value: { item, editPath }, }; }) ?? []; @@ -156,28 +157,6 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement { }); } - #getPropertyValueByAlias(item: UmbMediaCollectionItemModel, alias: string) { - switch (alias) { - case 'contentTypeAlias': - return item.contentTypeAlias; - case 'createDate': - return item.createDate.toLocaleString(); - case 'name': - return item.name; - case 'creator': - case 'owner': - return item.creator; - case 'sortOrder': - return item.sortOrder; - case 'updateDate': - return item.updateDate.toLocaleString(); - case 'updater': - return item.updater; - default: - return item.values?.find((value) => value.alias === alias)?.value ?? ''; - } - } - #handleSelect(event: UmbTableSelectedEvent) { event.stopPropagation(); const table = event.target as UmbTableElement; From 05b0d71543994874eb2330b3d71c28211a7808ab Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 11 Nov 2025 18:30:43 +0000 Subject: [PATCH 22/25] Removed unused imports --- .../document-table-column-property-value.element.ts | 2 +- .../column-layouts/media-table-column-system-value.element.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts index a10439a3e9cc..6930a5ab144b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts @@ -1,6 +1,6 @@ import { UmbDocumentItemDataResolver } from '../../../../item/index.js'; import type { UmbEditableDocumentCollectionItemModel } from '../../../types.js'; -import { customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit'; +import { customElement, html, nothing, property, when } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; import type { ManifestPropertyValuePresentation } from '@umbraco-cms/backoffice/property-value-presentation'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-system-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-system-value.element.ts index 92527fff0189..21311204b699 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-system-value.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-system-value.element.ts @@ -1,6 +1,5 @@ import type { UmbEditableMediaCollectionItemModel } from '../../../types.js'; -import { customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit'; -import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; +import { customElement, html, nothing, property, when } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; From fd2abf757f119105390c8f12db906803c16018fa Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 11 Nov 2025 18:30:59 +0000 Subject: [PATCH 23/25] Corrected class name (bad code copy) --- .../media-table-column-system-value.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-system-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-system-value.element.ts index 21311204b699..0809893306e6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-system-value.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/column-layouts/media-table-column-system-value.element.ts @@ -4,7 +4,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; @customElement('umb-media-table-column-system-value') -export class UmbDocumentTableColumnSystemValueElement extends UmbLitElement implements UmbTableColumnLayoutElement { +export class UmbMediaTableColumnSystemValueElement extends UmbLitElement implements UmbTableColumnLayoutElement { column!: UmbTableColumn; item!: UmbTableItem; @@ -46,10 +46,10 @@ export class UmbDocumentTableColumnSystemValueElement extends UmbLitElement impl } } -export default UmbDocumentTableColumnSystemValueElement; +export default UmbMediaTableColumnSystemValueElement; declare global { interface HTMLElementTagNameMap { - 'umb-media-table-column-system-value': UmbDocumentTableColumnSystemValueElement; + 'umb-media-table-column-system-value': UmbMediaTableColumnSystemValueElement; } } From ab92e2c63817288c62249cc424f8c8791c987217 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 12 Nov 2025 10:16:19 +0000 Subject: [PATCH 24/25] Introduced `UmbDocumentCollectionItemDataResolver` to de-duplicate the system/property value lookups --- .../document-collection-item-data-resolver.ts | 51 ++++++++++++++ .../documents/documents/collection/types.ts | 10 ++- .../document-grid-collection-card.element.ts | 69 +++++++------------ ...ent-table-column-property-value.element.ts | 14 +--- ...ument-table-column-system-value.element.ts | 54 ++------------- .../item/document-item-data-resolver.ts | 25 +++---- 6 files changed, 103 insertions(+), 120 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection-item-data-resolver.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection-item-data-resolver.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection-item-data-resolver.ts new file mode 100644 index 000000000000..81d6a225bf39 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection-item-data-resolver.ts @@ -0,0 +1,51 @@ +import { UmbDocumentItemDataResolver } from '../item/document-item-data-resolver.js'; +import type { UmbDocumentCollectionItemModel, UmbDocumentCollectionItemPropertyValueModel } from './types.js'; +import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; +import type { UmbItemDataResolver } from '@umbraco-cms/backoffice/entity-item'; + +export class UmbDocumentCollectionItemDataResolver + extends UmbDocumentItemDataResolver + implements UmbItemDataResolver +{ + getPropertyByAlias(alias: string): UmbDocumentCollectionItemPropertyValueModel | undefined { + const item = this.getData(); + const culture = this.getCulture(); + const prop = item?.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture)); + return prop; + } + + getSystemValue(alias: string): string | number | null | undefined { + const item = this.getData(); + switch (alias) { + case 'contentTypeAlias': + return item?.documentType.alias; + + case 'createDate': { + const variant = this._getCurrentVariant(); + return variant?.createDate?.toLocaleString(); + } + + case 'creator': + case 'owner': + return item?.creator; + + case 'published': { + const variant = this._getCurrentVariant(); + return variant?.state !== DocumentVariantStateModel.DRAFT ? 'True' : 'False'; + } + + case 'sortOrder': + return item?.sortOrder; + + case 'updateDate': { + const variant = this._getCurrentVariant(); + return variant?.updateDate?.toLocaleString(); + } + case 'updater': + return item?.updater; + + default: + return null; + } + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts index d8324b17157b..d6aa8219c962 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts @@ -27,10 +27,18 @@ export interface UmbDocumentCollectionItemModel extends UmbEntityWithFlags { sortOrder: number; unique: string; updater?: string | null; - values: Array<{ alias: string; editorAlias: string; culture?: string; segment?: string; value: string }>; + values: Array; variants: Array; } +export interface UmbDocumentCollectionItemPropertyValueModel { + alias: string; + editorAlias: string; + culture?: string; + segment?: string; + value: string; +} + export interface UmbEditableDocumentCollectionItemModel { item: UmbDocumentCollectionItemModel; editPath: string; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts index 98d89e4ba684..035f46aa0756 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts @@ -1,4 +1,4 @@ -import { UmbDocumentItemDataResolver } from '../../../item/document-item-data-resolver.js'; +import { UmbDocumentCollectionItemDataResolver } from '../../document-collection-item-data-resolver.js'; import type { UmbDocumentCollectionItemModel } from '../../types.js'; import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit'; import { fromCamelCase, stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils'; @@ -11,17 +11,11 @@ import type { UUIInterfaceColor } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-document-grid-collection-card') export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICardContentNodeElement) { - #resolver = new UmbDocumentItemDataResolver(this); - - @state() - private _createDate?: Date; + #resolver = new UmbDocumentCollectionItemDataResolver(this); @state() private _state?: string; - @state() - private _updateDate?: Date; - @property({ attribute: false }) columns?: Array; @@ -42,38 +36,14 @@ export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICar this.#resolver.observe(this.#resolver.name, (name) => (this.name = name || '')); this.#resolver.observe(this.#resolver.state, (state) => (this._state = state || '')); - this.#resolver.observe(this.#resolver.createDate, (createDate) => (this._createDate = createDate)); - this.#resolver.observe(this.#resolver.updateDate, (updateDate) => (this._updateDate = updateDate)); - } - - #getSystemValue(alias: string) { - switch (alias) { - case 'contentTypeAlias': - return this.item.documentType.alias; - case 'createDate': - return this._createDate?.toLocaleString(); - case 'creator': - case 'owner': - return this.item.creator; - case 'published': - return this._state !== DocumentVariantStateModel.DRAFT ? 'True' : 'False'; - case 'sortOrder': - return this.item.sortOrder; - case 'updateDate': - return this._updateDate?.toLocaleString(); - case 'updater': - return this.item.updater; - default: - return null; - } } - #getPropertyByAlias(column: UmbCollectionColumnConfiguration) { - const alias = column.alias; - const culture = this.#resolver.getCulture(); - const prop = this.item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture)); - return prop; - } + // #getPropertyByAlias(column: UmbCollectionColumnConfiguration) { + // const alias = column.alias; + // const culture = this.#resolver.getCulture(); + // const prop = this.item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture)); + // return prop; + // } #getStateTagConfig(): { color: UUIInterfaceColor; label: string } | undefined { if (!this._state) return; @@ -122,29 +92,36 @@ export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICar } #renderProperty(column: UmbCollectionColumnConfiguration) { - const prop = this.#getPropertyByAlias(column); - const value = column.isSystem ? this.#getSystemValue(column.alias) : prop?.value; - const props = { value: value ?? '' }; + let value: string | number | null | undefined; + let editorAlias: string | null | undefined; + + if (column.isSystem) { + value = this.#resolver.getSystemValue(column.alias); + } else { + const prop = this.#resolver.getPropertyByAlias(column.alias); + editorAlias = prop?.editorAlias; + value = prop?.value; + } return html`
  • ${this.localize.string(column.header)}: ${when( column.nameTemplate, - () => html``, + () => html``, () => when( - prop?.editorAlias, + editorAlias, (schemaAlias) => html` stringOrStringArrayContains(m.forPropertyEditorSchemaAlias, schemaAlias)} - .props=${props}> - ${prop?.value ?? nothing} + .props=${{ value }}> + ${value ?? nothing} `, - () => (prop?.value ? html`${prop.value}` : nothing), + () => (value ? html`${value}` : nothing), ), )}
    • diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts index 6930a5ab144b..3e06eb50e84f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-property-value.element.ts @@ -1,4 +1,4 @@ -import { UmbDocumentItemDataResolver } from '../../../../item/index.js'; +import { UmbDocumentCollectionItemDataResolver } from '../../../document-collection-item-data-resolver.js'; import type { UmbEditableDocumentCollectionItemModel } from '../../../types.js'; import { customElement, html, nothing, property, when } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -8,7 +8,7 @@ import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils'; @customElement('umb-document-table-column-property-value') export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement implements UmbTableColumnLayoutElement { - #resolver = new UmbDocumentItemDataResolver(this); + #resolver = new UmbDocumentCollectionItemDataResolver(this); column!: UmbTableColumn; item!: UmbTableItem; @@ -26,17 +26,9 @@ export class UmbDocumentTableColumnPropertyValueElement extends UmbLitElement im } #value!: UmbEditableDocumentCollectionItemModel; - #getPropertyByAlias() { - const alias = this.column.alias; - const item = this.value.item; - const culture = this.#resolver.getCulture(); - const prop = item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture)); - return prop; - } - override render() { if (!this.value?.item) return nothing; - const prop = this.#getPropertyByAlias(); + const prop = this.#resolver.getPropertyByAlias(this.column.alias); const props = { value: prop?.value ?? '' }; if (this.column.labelTemplate) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-system-value.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-system-value.element.ts index ca709b47bff1..674ddeba45f6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-system-value.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-system-value.element.ts @@ -1,22 +1,12 @@ -import { UmbDocumentItemDataResolver } from '../../../../item/index.js'; +import { UmbDocumentCollectionItemDataResolver } from '../../../document-collection-item-data-resolver.js'; import type { UmbEditableDocumentCollectionItemModel } from '../../../types.js'; -import { customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit'; -import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; +import { customElement, html, nothing, property, when } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; @customElement('umb-document-table-column-system-value') export class UmbDocumentTableColumnSystemValueElement extends UmbLitElement implements UmbTableColumnLayoutElement { - #resolver = new UmbDocumentItemDataResolver(this); - - @state() - private _createDate?: Date; - - @state() - private _state?: string; - - @state() - private _updateDate?: Date; + #resolver = new UmbDocumentCollectionItemDataResolver(this); column!: UmbTableColumn; item!: UmbTableItem; @@ -33,45 +23,9 @@ export class UmbDocumentTableColumnSystemValueElement extends UmbLitElement impl } #value!: UmbEditableDocumentCollectionItemModel; - constructor() { - super(); - - this.#resolver.observe(this.#resolver.state, (state) => (this._state = state || '')); - this.#resolver.observe(this.#resolver.createDate, (createDate) => (this._createDate = createDate)); - this.#resolver.observe(this.#resolver.updateDate, (updateDate) => (this._updateDate = updateDate)); - } - - #getPropertyValueByAlias() { - const alias = this.column.alias; - const item = this.value.item; - switch (alias) { - case 'contentTypeAlias': - return item.documentType.alias; - case 'createDate': - return this._createDate?.toLocaleString(); - case 'creator': - case 'owner': - return item.creator; - case 'published': - return this._state !== DocumentVariantStateModel.DRAFT ? 'True' : 'False'; - case 'sortOrder': - return item.sortOrder; - case 'updateDate': - return this._updateDate?.toLocaleString(); - case 'updater': - return item.updater; - default: { - // NOTE: This shouldn't be called, but left in place for safety. [LK] - const culture = this.#resolver.getCulture(); - const prop = item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture)); - return prop?.value ?? ''; - } - } - } - override render() { if (!this.value) return nothing; - const value = this.#getPropertyValueByAlias(); + const value = this.#resolver.getSystemValue(this.column.alias); return when( this.column.labelTemplate, () => html``, diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/item/document-item-data-resolver.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/item/document-item-data-resolver.ts index f27afee63bf7..6706d67ad42a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/item/document-item-data-resolver.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/item/document-item-data-resolver.ts @@ -1,19 +1,20 @@ import { UmbDocumentVariantState } from '../types.js'; import type { UmbDocumentItemModel } from './types.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; -import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import type { UmbEntityFlag } from '@umbraco-cms/backoffice/entity-flag'; -import type { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; import { UmbArrayState, UmbBasicState, UmbBooleanState, UmbObjectState, UmbStringState, - type Observable, } from '@umbraco-cms/backoffice/observable-api'; -import { type UmbVariantContext, UMB_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/variant'; +import { UMB_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/variant'; +import type { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; +import type { Observable } from '@umbraco-cms/backoffice/observable-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import type { UmbEntityFlag } from '@umbraco-cms/backoffice/entity-flag'; import type { UmbItemDataResolver } from '@umbraco-cms/backoffice/entity-item'; +import type { UmbVariantContext } from '@umbraco-cms/backoffice/variant'; type UmbDocumentItemDataResolverModel = Omit; @@ -228,7 +229,7 @@ export class UmbDocumentItemDataResolver Date: Wed, 12 Nov 2025 16:13:57 +0000 Subject: [PATCH 25/25] Update src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../views/grid/document-grid-collection-card.element.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts index 035f46aa0756..60c7c27361cf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-card.element.ts @@ -38,13 +38,6 @@ export class UmbDocumentGridCollectionCardElement extends UmbElementMixin(UUICar this.#resolver.observe(this.#resolver.state, (state) => (this._state = state || '')); } - // #getPropertyByAlias(column: UmbCollectionColumnConfiguration) { - // const alias = column.alias; - // const culture = this.#resolver.getCulture(); - // const prop = this.item.values.find((x) => x.alias === alias && (!x.culture || x.culture === culture)); - // return prop; - // } - #getStateTagConfig(): { color: UUIInterfaceColor; label: string } | undefined { if (!this._state) return; switch (this._state) {