From 46d7813ab4001ecff43036daf93694bab6a9e3b7 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 10:47:44 +0200 Subject: [PATCH 01/24] fix: export and use the correct `UmbCropModel` everywhere along with the rest of the types --- .../components/input-image-cropper/types.ts | 16 +++------- .../input-rich-media.element.ts | 2 +- .../src/packages/media/media/index.ts | 2 ++ .../image-cropper-editor-modal.element.ts | 2 +- .../image-cropper-editor-modal.token.ts | 2 +- .../property-editors/media-picker/index.ts | 32 ------------------- ...property-editor-ui-media-picker.element.ts | 2 +- .../media/media/property-editors/types.ts | 25 +++++++++++++++ .../src/packages/media/media/types.ts | 2 ++ 9 files changed, 37 insertions(+), 48 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/types.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/types.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/types.ts index 649368b8a7..1def05fbb3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/types.ts @@ -1,17 +1,9 @@ +import type { UmbCropModel, UmbFocalPointModel } from '../../types.js'; + export type UmbImageCropperPropertyEditorValue = { temporaryFileId?: string | null; - crops: Array<{ - alias: string; - coordinates?: { - x1: number; - x2: number; - y1: number; - y2: number; - }; - height: number; - width: number; - }>; - focalPoint: { left: number; top: number }; + crops: Array; + focalPoint: UmbFocalPointModel; src: string; }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts index 43d8a51bc7..5a5ae5449f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts @@ -1,7 +1,7 @@ import { UmbInputMediaElement } from '../input-media/index.js'; import { UmbMediaItemRepository } from '../../repository/index.js'; import { UMB_IMAGE_CROPPER_EDITOR_MODAL, UMB_MEDIA_PICKER_MODAL } from '../../modals/index.js'; -import type { UmbCropModel, UmbMediaPickerPropertyValue } from '../../property-editors/index.js'; +import type { UmbCropModel, UmbMediaPickerPropertyValue } from '../../types.js'; import type { UmbMediaItemModel } from '../../repository/index.js'; import type { UmbUploadableFileModel } from '../../dropzone/index.js'; import { customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/index.ts index ef56a68fe6..8ee054676a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/index.ts @@ -14,3 +14,5 @@ export { UMB_MEDIA_PICKER_MODAL } from './modals/media-picker/index.js'; export type { UmbMediaTreeItemModel } from './tree/index.js'; export { UmbMediaAuditLogRepository } from './audit-log/index.js'; + +export type * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts index 0641fbe118..5e1f921707 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts @@ -1,6 +1,6 @@ import { UmbMediaUrlRepository } from '../../repository/index.js'; import { UMB_MEDIA_PICKER_MODAL } from '../media-picker/media-picker-modal.token.js'; -import type { UmbCropModel } from '../../property-editors/index.js'; +import type { UmbCropModel } from '../../types.js'; import type { UmbInputImageCropperFieldElement } from '../../components/input-image-cropper/image-cropper-field.element.js'; import type { UmbImageCropperPropertyEditorValue } from '../../components/index.js'; import type { diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts index e5b4f47c0b..6371e4c56d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.token.ts @@ -1,5 +1,5 @@ import type { UmbImageCropperCrop } from '../../components/index.js'; -import type { UmbCropModel } from '../../property-editors/index.js'; +import type { UmbCropModel } from '../../property-editors/types.js'; import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export interface UmbImageCropperEditorModalData { diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/index.ts index b246c984b2..7eddcc7572 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/index.ts @@ -1,33 +1 @@ export * from './property-editor-ui-media-picker.element.js'; - -export type UmbMediaPickerPropertyValue = { - key: string; - mediaKey: string; - mediaTypeAlias: string; - focalPoint: UmbFocalPointModel | null; - crops: Array; -}; - -export type UmbCropModel = { - alias: string; - height: number; - width: number; - coordinates?: { - x1: number; - x2: number; - y1: number; - y2: number; - }; -}; - -export interface UmbConfiguredCropModel { - label: string; - alias: string; - width: number; - height: number; -} - -export interface UmbFocalPointModel { - left: number; - top: number; -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts index d80f7f33f7..4a1eff1fc9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts @@ -1,5 +1,5 @@ import type { UmbInputRichMediaElement } from '../../components/input-rich-media/input-rich-media.element.js'; -import type { UmbCropModel, UmbMediaPickerPropertyValue } from './index.js'; +import type { UmbCropModel, UmbMediaPickerPropertyValue } from '../types.js'; import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/types.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/types.ts new file mode 100644 index 0000000000..0baa97364e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/types.ts @@ -0,0 +1,25 @@ +export type UmbMediaPickerPropertyValue = { + key: string; + mediaKey: string; + mediaTypeAlias: string; + focalPoint: UmbFocalPointModel | null; + crops: Array; +}; + +export type UmbCropModel = { + label?: string; + alias: string; + height: number; + width: number; + coordinates?: { + x1: number; + x2: number; + y1: number; + y2: number; + }; +}; + +export interface UmbFocalPointModel { + left: number; + top: number; +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/types.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/types.ts index 65dfefdd6c..a350ead8dd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/types.ts @@ -30,3 +30,5 @@ export interface UmbMediaValueModel { } export interface UmbMediaVariantOptionModel extends UmbVariantOptionModel {} + +export type * from './property-editors/types.js'; From e8f71e965110ccf3dd8de568b53061e54cbdc4de Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 10:48:01 +0200 Subject: [PATCH 02/24] fix: reverse set and get --- .../input-image-cropper/image-cropper-field.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts index 7ca51a65f9..c330b50c43 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts @@ -15,9 +15,6 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-image-cropper-field') export class UmbInputImageCropperFieldElement extends UmbLitElement { @property({ attribute: false }) - get value() { - return this.#value; - } set value(value) { if (!value) { this.crops = []; @@ -34,6 +31,9 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement { this.requestUpdate(); } + get value() { + return this.#value; + } #value?: UmbImageCropperPropertyEditorValue; @state() From b49eb691a775b94d31a23b1cf8b6ce67041991e5 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 10:48:13 +0200 Subject: [PATCH 03/24] fix: remove unused backing field --- .../input-rich-media/input-rich-media.element.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts index 5a5ae5449f..725d1502f2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts @@ -122,13 +122,7 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement, } @property({ type: Array }) - public set preselectedCrops(value: Array) { - this.#preselectedCrops = value; - } - public get preselectedCrops(): Array { - return this.#preselectedCrops; - } - #preselectedCrops: Array = []; + public preselectedCrops?: Array; @property({ type: Boolean }) public set focalPointEnabled(value: boolean) { From 4bf1ebbb80b9563b57c66269b3cdf55e1786ddbd Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 10:48:54 +0200 Subject: [PATCH 04/24] fix: combine crops coming from the property editor with the server so that we ignore any invalid (old) crops it has the added benefit of allowing us to find the `label` of a crop --- .../image-cropper-editor-modal.element.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts index 5e1f921707..846e26822c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts @@ -79,10 +79,21 @@ export class UmbImageCropperEditorModalElement extends UmbModalBaseElement< const item = data?.[0]; if (!item?.url) return; + + /** + * Combine the crops from the property editor with the stored crops and ignore any invalid crops + * (e.g. crops that have been removed from the property editor) + * @remark If a crop is removed from the property editor, it will be ignored and not saved + */ + const crops: Array = this._crops.map((crop) => { + const existingCrop = this.value.crops?.find((c) => c.alias === crop.alias); + return existingCrop ? { ...crop, ...existingCrop } : crop; + }); + const value: UmbImageCropperPropertyEditorValue = { ...this.value, src: item.url, - crops: this.value.crops?.length ? this.value.crops : this._crops, + crops, focalPoint: this.value.focalPoint ?? { left: 0.5, top: 0.5 }, }; this._imageCropperValue = value; From fc1de1e9cdfd68b698003e975f65cc9426fe981f Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 10:49:16 +0200 Subject: [PATCH 05/24] fix: if a crop has a label itself, use that and run it through the `localize` controller --- .../input-image-cropper/image-cropper-preview.element.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts index 35f20b490d..a092f0868c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts @@ -1,9 +1,10 @@ import type { UmbImageCropperCrop, UmbImageCropperFocalPoint } from './index.js'; import { calculateExtrapolatedValue, clamp } from '@umbraco-cms/backoffice/utils'; -import { LitElement, css, html, nothing, customElement, property, query } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, nothing, customElement, property, query } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-image-cropper-preview') -export class UmbImageCropperPreviewElement extends LitElement { +export class UmbImageCropperPreviewElement extends UmbLitElement { @query('#image') imageElement!: HTMLImageElement; @query('#container') imageContainerElement!: HTMLImageElement; @@ -150,7 +151,9 @@ export class UmbImageCropperPreviewElement extends LitElement {
- ${this.label ?? this.crop.alias} + + ${this.crop.label !== undefined ? this.localize.string(this.crop.label) : (this.label ?? this.crop.alias)} + ${this.crop.width} x ${this.crop.height} ${this.crop.coordinates ? html`User defined` From d40185cfe108fcc8c4530090b26780c6cce4f56d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 21 Jun 2024 23:17:26 +0200 Subject: [PATCH 06/24] add readonly prop --- .../toggle/property-editor-ui-toggle.element.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/property-editor-ui-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/property-editor-ui-toggle.element.ts index ae1bb7f9a4..e2a2333e23 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/property-editor-ui-toggle.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/property-editor-ui-toggle.element.ts @@ -13,6 +13,15 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements U @property({ type: Boolean }) value: undefined | boolean = undefined; + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + @state() _labelOff?: string; @@ -42,7 +51,8 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements U .labelOff=${this._labelOff} ?checked=${this.value} ?showLabels=${this._showLabels} - @change=${this.#onChange}> + @change=${this.#onChange} + ?readonly=${this.readonly}> `; } From bfe97776495c48fe103081437af4579d4e7a4990 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 21 Jun 2024 23:17:40 +0200 Subject: [PATCH 07/24] pass readonly prop --- .../components/input-toggle/input-toggle.element.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts index 4a0eadee2a..58249d3659 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts @@ -26,6 +26,15 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, '' @property({ type: String }) labelOff?: string; + /** + * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + readonly = false; + @state() _currentLabel?: string; @@ -52,7 +61,8 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, '' return html``; + @change=${this.#onChange} + ?readonly=${this.readonly}>`; } static override styles = [ From bd49774d28036f96f02ac9d1a14e86cc9fdd4d56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 29 Jul 2024 14:56:08 +0200 Subject: [PATCH 08/24] example --- .../examples/property-editor/README.md | 7 ++++++ .../examples/property-editor/index.ts | 25 +++++++++++++++++++ .../property-editor/property-editor.ts | 20 +++++++++++++++ .../property-editor-config.element.ts | 5 ++-- 4 files changed, 55 insertions(+), 2 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/examples/property-editor/README.md create mode 100644 src/Umbraco.Web.UI.Client/examples/property-editor/index.ts create mode 100644 src/Umbraco.Web.UI.Client/examples/property-editor/property-editor.ts diff --git a/src/Umbraco.Web.UI.Client/examples/property-editor/README.md b/src/Umbraco.Web.UI.Client/examples/property-editor/README.md new file mode 100644 index 0000000000..e0894b30b7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/property-editor/README.md @@ -0,0 +1,7 @@ +# Property Dataset Dashboard Example + +This example is a work in progress example of how to write a property editor. + +This example covers a few points: + +- Using an existing Property Editor Schema diff --git a/src/Umbraco.Web.UI.Client/examples/property-editor/index.ts b/src/Umbraco.Web.UI.Client/examples/property-editor/index.ts new file mode 100644 index 0000000000..4d7c9c26fa --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/property-editor/index.ts @@ -0,0 +1,25 @@ +import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'propertyEditorUi', + alias: 'example.propertyEditorUi.propertyEditor', + name: 'Example Property Editor UI', + element: () => import('./property-editor.js'), + meta: { + label: 'Example Editor', + propertyEditorSchemaAlias: 'Umbraco.ListView', + icon: 'icon-code', + group: 'common', + settings: { + properties: [ + { + alias: 'customText', + label: 'Custom text', + propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox', + }, + ], + }, + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/examples/property-editor/property-editor.ts b/src/Umbraco.Web.UI.Client/examples/property-editor/property-editor.ts new file mode 100644 index 0000000000..029d1f9b4e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/property-editor/property-editor.ts @@ -0,0 +1,20 @@ +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; + +@customElement('example-property-editor') +export class ExamplePropertyEditor extends UmbElementMixin(LitElement) { + override render() { + return html`

Property Editor Example

`; + } + + static override styles = [UmbTextStyles]; +} + +export default ExamplePropertyEditor; + +declare global { + interface HTMLElementTagNameMap { + 'example-property-editor': ExamplePropertyEditor; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts index 58953b5163..1282735778 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts @@ -12,7 +12,7 @@ import { UmbDataPathPropertyValueFilter } from '@umbraco-cms/backoffice/validati */ @customElement('umb-property-editor-config') export class UmbPropertyEditorConfigElement extends UmbLitElement { - // TODO: Make this element generic, so its not bound to DATA-TYPEs. This will require moving some functionality of Data-Type-Context to this. and this might need to self provide a variant Context for its inner property editor UIs. + // TODO: Make this element generic, so its not bound to DATA-TYPEs. This will require moving some functionality of Data-Type-Context to this. and this might need to self provide a variant Context for its inner property editor UIs. [NL] #workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE; @state() @@ -53,7 +53,8 @@ export class UmbPropertyEditorConfigElement extends UmbLitElement { property-editor-ui-alias=${property.propertyEditorUiAlias} .config=${property.config}>`, ) - : html`
No configuration
`; + : // TODO: Localize this [NL] + html`
No configuration
`; } static override styles = [UmbTextStyles]; From 76be31eb3f1452602627f61d00c0b407dbc44e05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 29 Jul 2024 16:11:30 +0200 Subject: [PATCH 09/24] set default data --- src/Umbraco.Web.UI.Client/examples/property-editor/index.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/examples/property-editor/index.ts b/src/Umbraco.Web.UI.Client/examples/property-editor/index.ts index 4d7c9c26fa..389e110866 100644 --- a/src/Umbraco.Web.UI.Client/examples/property-editor/index.ts +++ b/src/Umbraco.Web.UI.Client/examples/property-editor/index.ts @@ -19,6 +19,12 @@ export const manifests: Array = [ propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox', }, ], + defaultData: [ + { + alias: 'customText', + value: 'Default value', + }, + ], }, }, }, From 7bcc429137a60ff6e6115389ffa7cce1e784119d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 29 Jul 2024 16:11:50 +0200 Subject: [PATCH 10/24] refactor merge data flow --- .../workspace/data-type-workspace.context.ts | 79 +++++++++++-------- 1 file changed, 47 insertions(+), 32 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts index 4442f73ec6..59b38280ef 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts @@ -72,8 +72,6 @@ export class UmbDataTypeWorkspaceContext #settingsDefaultData?: Array; - #propertyEditorUISettingsSchemaAlias?: string; - #propertyEditorUiIcon = new UmbStringState(null); readonly propertyEditorUiIcon = this.#propertyEditorUiIcon.asObservable(); @@ -82,6 +80,8 @@ export class UmbDataTypeWorkspaceContext constructor(host: UmbControllerHost) { super(host, 'Umb.Workspace.DataType'); + + this.#observePropertyEditorSchemaAlias(); this.#observePropertyEditorUIAlias(); this.routes.setRoutes([ @@ -121,7 +121,7 @@ export class UmbDataTypeWorkspaceContext this.#propertyEditorUISettingsDefaultData = []; this.#settingsDefaultData = undefined; - this._mergeConfigProperties(); + this.#mergeConfigProperties(); } // Hold the last set property editor ui alias, so we know when it changes, so we can reset values. [NL] @@ -131,30 +131,13 @@ export class UmbDataTypeWorkspaceContext this.observe( this.propertyEditorUiAlias, async (propertyEditorUiAlias) => { - const previousPropertyEditorUIAlias = this.#lastPropertyEditorUIAlias; - this.#lastPropertyEditorUIAlias = propertyEditorUiAlias; + this.#propertyEditorUISettingsProperties = []; + this.#propertyEditorUISettingsDefaultData = []; + // we only want to react on the change if the alias is set or null. When it is undefined something is still loading if (propertyEditorUiAlias === undefined) return; - // if the property editor ui alias is not set, we use the default alias from the schema - if (propertyEditorUiAlias === null) { - await this.#observePropertyEditorSchemaAlias(); - if (this.#propertyEditorSchemaConfigDefaultUIAlias !== null) { - this.setPropertyEditorUiAlias(this.#propertyEditorSchemaConfigDefaultUIAlias); - } - } else { - await this.#setPropertyEditorUIConfig(propertyEditorUiAlias); - this.setPropertyEditorSchemaAlias(this.#propertyEditorUISettingsSchemaAlias!); - await this.#observePropertyEditorSchemaAlias(); - } - - if ( - this.getIsNew() || - (previousPropertyEditorUIAlias && previousPropertyEditorUIAlias !== propertyEditorUiAlias) - ) { - this.#transferConfigDefaultData(); - } - this._mergeConfigProperties(); + this.#observePropertyEditorUIConfig(propertyEditorUiAlias); }, 'editorUiAlias', ); @@ -164,13 +147,19 @@ export class UmbDataTypeWorkspaceContext return this.observe( this.propertyEditorSchemaAlias, (propertyEditorSchemaAlias) => { - this.#setPropertyEditorSchemaConfig(propertyEditorSchemaAlias); + this.#propertyEditorSchemaSettingsProperties = []; + this.#propertyEditorSchemaSettingsDefaultData = []; + this.#observePropertyEditorSchemaConfig(propertyEditorSchemaAlias); }, 'schemaAlias', - ).asPromise(); + ); } - #setPropertyEditorSchemaConfig(propertyEditorSchemaAlias?: string) { + #observePropertyEditorSchemaConfig(propertyEditorSchemaAlias?: string) { + if (!propertyEditorSchemaAlias) { + this.removeUmbControllerByAlias('schema'); + return; + } this.observe( propertyEditorSchemaAlias ? umbExtensionsRegistry.byTypeAndAlias('propertyEditorSchema', propertyEditorSchemaAlias) @@ -183,36 +172,56 @@ export class UmbDataTypeWorkspaceContext })); this.#propertyEditorSchemaSettingsDefaultData = manifest?.meta.settings?.defaultData || []; this.#propertyEditorSchemaConfigDefaultUIAlias = manifest?.meta.defaultPropertyEditorUiAlias || null; + if (this.#propertyEditorSchemaConfigDefaultUIAlias && this.getPropertyEditorUiAlias() === null) { + // Fallback to the default property editor ui for this property editor schema. + this.setPropertyEditorUiAlias(this.#propertyEditorSchemaConfigDefaultUIAlias); + } + this.#mergeConfigProperties(); }, 'schema', ); } - #setPropertyEditorUIConfig(propertyEditorUIAlias: string) { - return this.observe( + #observePropertyEditorUIConfig(propertyEditorUIAlias: string | null) { + if (!propertyEditorUIAlias) { + this.removeUmbControllerByAlias('editorUi'); + return; + } + this.observe( umbExtensionsRegistry.byTypeAndAlias('propertyEditorUi', propertyEditorUIAlias), (manifest) => { this.#propertyEditorUiIcon.setValue(manifest?.meta.icon || null); this.#propertyEditorUiName.setValue(manifest?.name || null); - this.#propertyEditorUISettingsSchemaAlias = manifest?.meta.propertyEditorSchemaAlias; // Maps properties to have a weight, so they can be sorted, notice UI properties have a +1000 weight compared to schema properties. this.#propertyEditorUISettingsProperties = (manifest?.meta.settings?.properties ?? []).map((x, i) => ({ ...x, weight: x.weight ?? 1000 + i, })); this.#propertyEditorUISettingsDefaultData = manifest?.meta.settings?.defaultData || []; + this.setPropertyEditorSchemaAlias(manifest?.meta.propertyEditorSchemaAlias); + this.#mergeConfigProperties(); }, 'editorUi', - ).asPromise(); + ); } - private _mergeConfigProperties() { + #mergeConfigProperties() { if (this.#propertyEditorSchemaSettingsProperties && this.#propertyEditorUISettingsProperties) { // Reset the value to this array, and then afterwards append: this.#properties.setValue(this.#propertyEditorSchemaSettingsProperties); // Append the UI settings properties to the schema properties, so they can override the schema properties: this.#properties.append(this.#propertyEditorUISettingsProperties); + + // If new or if the alias was changed then set default values. + const previousPropertyEditorUIAlias = this.#lastPropertyEditorUIAlias; + this.#lastPropertyEditorUIAlias = this.getPropertyEditorUiAlias(); + if ( + this.getIsNew() || + (previousPropertyEditorUIAlias && previousPropertyEditorUIAlias !== this.#lastPropertyEditorUIAlias) + ) { + this.#transferConfigDefaultData(); + } } } @@ -301,9 +310,15 @@ export class UmbDataTypeWorkspaceContext this.#currentData.update({ name }); } + getPropertyEditorSchemaAlias() { + return this.#currentData.getValue()?.editorAlias; + } setPropertyEditorSchemaAlias(alias?: string) { this.#currentData.update({ editorAlias: alias }); } + getPropertyEditorUiAlias() { + return this.#currentData.getValue()?.editorUiAlias; + } setPropertyEditorUiAlias(alias?: string) { this.#currentData.update({ editorUiAlias: alias }); } From 6f1e48d72e666aba0ddda04eddfcfc7ce0a1e1f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 30 Jul 2024 08:52:18 +0200 Subject: [PATCH 11/24] setting default data --- .../packages/data-type/workspace/data-type-workspace.context.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts index 59b38280ef..6a26a5acf9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts @@ -213,7 +213,7 @@ export class UmbDataTypeWorkspaceContext // Append the UI settings properties to the schema properties, so they can override the schema properties: this.#properties.append(this.#propertyEditorUISettingsProperties); - // If new or if the alias was changed then set default values. + // If new or if the alias was changed then set default values. This 'complexity' to prevent setting default data when initialized [NL] const previousPropertyEditorUIAlias = this.#lastPropertyEditorUIAlias; this.#lastPropertyEditorUIAlias = this.getPropertyEditorUiAlias(); if ( From cfcca5bd812578f6bc1fdfe99933736e6baace9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 30 Jul 2024 09:32:31 +0200 Subject: [PATCH 12/24] comments --- .../workspace/data-type-workspace.context.ts | 26 ++++++++++++++++--- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts index 6a26a5acf9..90d1dffc5a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts @@ -30,6 +30,24 @@ import { } from '@umbraco-cms/backoffice/entity-action'; type EntityType = UmbDataTypeDetailModel; + +/** + * @class uUmbDataTypeWorkspaceContext + * @description - Context for handling data type workspace + * There is two overall code flows to be aware about: + * + * propertyEditorUiAlias is observed + * loads propertyEditorUi manifest + * then the propertyEditorSchemaAlias is set to what the UI is configured for. + * + * propertyEditorSchemaAlias is observed + * loads the propertyEditorSchema manifest + * if no UI is defined then the propertyEditorSchema manifest default ui is set for the propertyEditorUiAlias. + * + * This supports two cases: + * - when editing an existing data type that only has a schema alias set, then it gets the UI set. + * - a new property editor ui is picked for a data-type, uses the data-type configuration to set the schema, if such is configured for the Property Editor UI. (The user picks the UI via the UI, the schema comes from the UI that the user picked, we store both on the data-type) + */ export class UmbDataTypeWorkspaceContext extends UmbSubmittableWorkspaceContextBase implements UmbInvariantDatasetWorkspaceContext, UmbRoutableWorkspaceContext @@ -137,7 +155,7 @@ export class UmbDataTypeWorkspaceContext // we only want to react on the change if the alias is set or null. When it is undefined something is still loading if (propertyEditorUiAlias === undefined) return; - this.#observePropertyEditorUIConfig(propertyEditorUiAlias); + this.#observePropertyEditorUIManifest(propertyEditorUiAlias); }, 'editorUiAlias', ); @@ -149,13 +167,13 @@ export class UmbDataTypeWorkspaceContext (propertyEditorSchemaAlias) => { this.#propertyEditorSchemaSettingsProperties = []; this.#propertyEditorSchemaSettingsDefaultData = []; - this.#observePropertyEditorSchemaConfig(propertyEditorSchemaAlias); + this.#observePropertyEditorSchemaManifest(propertyEditorSchemaAlias); }, 'schemaAlias', ); } - #observePropertyEditorSchemaConfig(propertyEditorSchemaAlias?: string) { + #observePropertyEditorSchemaManifest(propertyEditorSchemaAlias?: string) { if (!propertyEditorSchemaAlias) { this.removeUmbControllerByAlias('schema'); return; @@ -182,7 +200,7 @@ export class UmbDataTypeWorkspaceContext ); } - #observePropertyEditorUIConfig(propertyEditorUIAlias: string | null) { + #observePropertyEditorUIManifest(propertyEditorUIAlias: string | null) { if (!propertyEditorUIAlias) { this.removeUmbControllerByAlias('editorUi'); return; From 5ee5b947a1a68122f9e9434d94dbf773a0d4c3cb Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 29 Jul 2024 17:52:38 +0100 Subject: [PATCH 13/24] Enables document blueprint create menu --- .../create/document-create-options-modal.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts index 522b6733d0..c6e010236a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts @@ -119,7 +119,7 @@ export class UmbDocumentCreateOptionsModalElement extends UmbModalBaseElement< return html` ${when( - this._availableBlueprints.length === 0 && this.#documentTypeUnique, + this._availableBlueprints.length && this.#documentTypeUnique, () => this.#renderBlueprints(), () => this.#renderDocumentTypes(), )} From b2815fdfd174c3c4127a4047a880acafe3686a07 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 30 Jul 2024 09:52:37 +0100 Subject: [PATCH 14/24] Adds localization for "No configuration" --- src/Umbraco.Web.UI.Client/src/assets/lang/en.ts | 1 + .../property-editor-config/property-editor-config.element.ts | 5 +++-- .../data-type/workspace/data-type-workspace.context.ts | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index 0aca405fba..c6a84438d9 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -695,6 +695,7 @@ export default { hasReferencesDeleteConsequence: 'Deleting %0% will delete the properties and their data from the following items', acceptDeleteConsequence: 'I understand this action will delete the properties and data based on this Data Type', + noConfiguration: 'There is no configuration for this property editor.', }, errorHandling: { errorButDataWasSaved: diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts index 1282735778..46a9136d23 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts @@ -53,8 +53,9 @@ export class UmbPropertyEditorConfigElement extends UmbLitElement { property-editor-ui-alias=${property.propertyEditorUiAlias} .config=${property.config}>`, ) - : // TODO: Localize this [NL] - html`
No configuration
`; + : html`There is no configuration for this property editor.`; } static override styles = [UmbTextStyles]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts index 90d1dffc5a..49aa80140f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts @@ -32,7 +32,7 @@ import { type EntityType = UmbDataTypeDetailModel; /** - * @class uUmbDataTypeWorkspaceContext + * @class UmbDataTypeWorkspaceContext * @description - Context for handling data type workspace * There is two overall code flows to be aware about: * From 8af37ceff85ec45764d1fb60035230f36feb6e4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 30 Jul 2024 10:59:55 +0200 Subject: [PATCH 15/24] change path --- ...property-editor-ui-block-grid-layout-stylesheet.element.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts index 7d16db32d8..e1103cdf7c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts @@ -79,7 +79,9 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement .min=${this._limitMin} .max=${this._limitMax}>
- Link to default layout stylesheet + Link to default layout stylesheet `; } From 4767065507fd516f7e8cbefabb89b924f3334125 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 30 Jul 2024 11:00:04 +0200 Subject: [PATCH 16/24] remove duplicates --- .../css/umbraco-blockgridlayout-flexbox.css | 35 -------------- .../assets/css/umbraco-blockgridlayout.css | 46 ------------------- 2 files changed, 81 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/assets/css/umbraco-blockgridlayout-flexbox.css delete mode 100644 src/Umbraco.Web.UI.Client/src/assets/css/umbraco-blockgridlayout.css diff --git a/src/Umbraco.Web.UI.Client/src/assets/css/umbraco-blockgridlayout-flexbox.css b/src/Umbraco.Web.UI.Client/src/assets/css/umbraco-blockgridlayout-flexbox.css deleted file mode 100644 index 3f921c0470..0000000000 --- a/src/Umbraco.Web.UI.Client/src/assets/css/umbraco-blockgridlayout-flexbox.css +++ /dev/null @@ -1,35 +0,0 @@ -/** Example of how a grid layout stylehseet could be done with Flex box: */ - -.umb-block-grid__layout-container { - position: relative; - display: flex; - flex-wrap: wrap; - gap: var(--umb-block-grid--row-gap, 0) var(--umb-block-grid--column-gap, 0); -} -.umb-block-grid__layout-item { - position: relative; - --umb-block-grid__layout-item-calc: calc(var(--umb-block-grid--item-column-span) / var(--umb-block-grid--grid-columns)); - width: calc(var(--umb-block-grid__layout-item-calc) * 100% - (1 - var(--umb-block-grid__layout-item-calc)) * var(--umb-block-grid--column-gap, 0px)); -} - - -.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) { - position: relative; - display: flex; - flex-wrap: wrap; - width: 100%; - gap: var(--umb-block-grid--areas-row-gap, 0) var(--umb-block-grid--areas-column-gap, 0); -} -.umb-block-grid__area { - position: relative; - height: 100%; - display: flex; - flex-direction: column; - --umb-block-grid__area-calc: calc(var(--umb-block-grid--area-column-span) / var(--umb-block-grid--area-grid-columns, 1)); - width: calc(var(--umb-block-grid__area-calc) * 100% - (1 - var(--umb-block-grid__area-calc)) * var(--umb-block-grid--areas-column-gap, 0px)); -} - - -.umb-block-grid__actions { - clear: both; -} diff --git a/src/Umbraco.Web.UI.Client/src/assets/css/umbraco-blockgridlayout.css b/src/Umbraco.Web.UI.Client/src/assets/css/umbraco-blockgridlayout.css deleted file mode 100644 index 8a4f567cac..0000000000 --- a/src/Umbraco.Web.UI.Client/src/assets/css/umbraco-blockgridlayout.css +++ /dev/null @@ -1,46 +0,0 @@ -.umb-block-grid__layout-container { - position: relative; - display: grid; - grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr)); - grid-auto-flow: row; - grid-auto-rows: minmax(50px, min-content); - - column-gap: var(--umb-block-grid--column-gap, 0); - row-gap: var(--umb-block-grid--row-gap, 0); -} -.umb-block-grid__layout-item { - position: relative; - /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */ - grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns)); - grid-row: span var(--umb-block-grid--item-row-span, 1); -} - - -.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) { - position: relative; - display: grid; - grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr)); - grid-auto-flow: row; - grid-auto-rows: minmax(50px, min-content); - - column-gap: var(--umb-block-grid--areas-column-gap, 0); - row-gap: var(--umb-block-grid--areas-row-gap, 0); -} -.umb-block-grid__area { - position: relative; - height: 100%; - display: flex; - flex-direction: column; - /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */ - grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--area-grid-columns)); - grid-row: span var(--umb-block-grid--area-row-span, 1); -} - -@media (min-width:1024px) { - .umb-block-grid__layout-item { - grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns)); - } - .umb-block-grid__area { - grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns)); - } -} \ No newline at end of file From fd5d76fabdbc20bde80064569df058f1f6af6823 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 30 Jul 2024 16:04:38 +0100 Subject: [PATCH 17/24] Webhooks localizations plus other bug fixes. --- .../src/assets/lang/en.ts | 5 +- ...ook-table-boolean-column-layout.element.ts | 4 +- ...ebhook-table-name-column-layout.element.ts | 2 +- .../webhook-table-collection-view.element.ts | 16 +++-- .../input-webhook-events.element.ts | 39 ++++++------ .../input-webhook-headers.element.ts | 8 +-- .../webhook-events-modal.element.ts | 58 ++++++++--------- .../webhook-root-workspace.element.ts | 8 ++- .../webhook-details-workspace-view.element.ts | 62 +++++++++++-------- .../webhook-workspace-editor.element.ts | 8 ++- 10 files changed, 113 insertions(+), 97 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index c6a84438d9..7e0e77d5cd 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -1735,11 +1735,11 @@ export default { enabled: 'Enabled', events: 'Events', event: 'Event', - url: 'Url', + url: 'URL', types: 'Types', webhookKey: 'Webhook key', retryCount: 'Retry count', - urlDescription: 'The url to call when the webhook is triggered.', + urlDescription: 'The URL to call when the webhook is triggered.', eventDescription: 'The events for which the webhook should be triggered.', contentTypeDescription: 'Only trigger the webhook for a specific content type.', enabledDescription: 'Is the webhook enabled?', @@ -1747,6 +1747,7 @@ export default { contentType: 'Content Type', headers: 'Headers', selectEventFirst: 'Please select an event first.', + selectEvents: 'Select events', }, languages: { addLanguage: 'Add language', diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/boolean/webhook-table-boolean-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/boolean/webhook-table-boolean-column-layout.element.ts index 21f972c729..e16d4f4bb7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/boolean/webhook-table-boolean-column-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/boolean/webhook-table-boolean-column-layout.element.ts @@ -1,4 +1,4 @@ -import { html, nothing, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-webhook-table-boolean-column-layout') @@ -7,7 +7,7 @@ export class UmbWebhookTableBooleanColumnLayoutElement extends UmbLitElement { value = false; override render() { - return this.value ? html`` : nothing; + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts index 032ca105a4..116bd06841 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/column-layouts/content-type/webhook-table-name-column-layout.element.ts @@ -32,7 +32,7 @@ export class UmbWebhookTableContentTypeColumnLayoutElement extends UmbLitElement if (this.value?.contentTypeName && this.#repository) { const { data } = await this.#repository.requestItems(this.value.contentTypes); - this._contentTypes = data?.map((item) => item.name).join(', ') ?? ''; + this._contentTypes = data?.map((item) => this.localize.string(item.name)).join(', ') ?? ''; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts index 5ac9a83cf8..4128f4e9d2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/collection/views/table/webhook-table-collection-view.element.ts @@ -1,10 +1,9 @@ import type { UmbWebhookDetailModel } from '../../../types.js'; import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; +import { css, customElement, html, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection'; import type { UmbTableColumn, UmbTableConfig, UmbTableItem } from '@umbraco-cms/backoffice/components'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import './column-layouts/boolean/webhook-table-boolean-column-layout.element.js'; import './column-layouts/name/webhook-table-name-column-layout.element.js'; @@ -21,25 +20,25 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement { @state() private _tableColumns: Array = [ { - name: 'Name', + name: this.localize.term('general_name'), alias: 'name', elementName: 'umb-webhook-table-name-column-layout', }, { - name: 'Enabled', + name: this.localize.term('webhooks_enabled'), alias: 'enabled', elementName: 'umb-webhook-table-boolean-column-layout', }, { - name: 'URL', + name: this.localize.term('webhooks_url'), alias: 'url', }, { - name: 'Events', + name: this.localize.term('webhooks_events'), alias: 'events', }, { - name: 'Types', + name: this.localize.term('webhooks_types'), alias: 'types', elementName: 'umb-webhook-table-content-type-column-layout', }, @@ -112,7 +111,6 @@ export class UmbWebhookTableCollectionViewElement extends UmbLitElement { } static override styles = [ - UmbTextStyles, css` :host { display: flex; diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-events.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-events.element.ts index 901dc34e41..f17bea9008 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-events.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-events.element.ts @@ -47,23 +47,29 @@ export class UmbInputWebhookEventsElement extends UmbLitElement { if (!this.events.length) return nothing; return html` - ${repeat( - this.events, - (item) => item.alias, - (item) => html` - ${item.eventName} - this.#removeEvent(item.alias)}> - `, - )} + + ${repeat( + this.events, + (item) => item.alias, + (item) => html` + + + + this.#removeEvent(item.alias)}> + + + `, + )} + `; } override render() { return html`${this.#renderEvents()} `; @@ -72,15 +78,8 @@ export class UmbInputWebhookEventsElement extends UmbLitElement { static override styles = [ UmbTextStyles, css` - :host { - display: grid; - grid-template-columns: 1fr auto; - gap: var(--uui-size-space-2) var(--uui-size-space-2); - align-items: center; - } - - #choose { - grid-column: -1 / 1; + #btn-add { + display: block; } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-headers.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-headers.element.ts index 6819cd267a..68bc822494 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-headers.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-headers.element.ts @@ -14,7 +14,7 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement { private _headers: Array<{ name: string; value: string }> = []; @state() - private _headerNames: string[] = ['Accept', 'Content-Type', 'User-Agent', 'Content-Length']; + private _headerNames: string[] = ['Accept', 'Content-Length', 'Content-Type', 'User-Agent']; get #filterHeaderNames() { return this._headerNames.filter((name) => !this._headers.find((header) => header.name === name)); @@ -78,7 +78,7 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement { .value=${header.value} @input=${(e: InputEvent) => this.#onInput(e, 'value', index)} list="valueList" /> - this.#removeHeader(index)} label="Remove"> + this.#removeHeader(index)} label=${this.localize.term('general_remove')}> `; } @@ -105,8 +105,8 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement { if (!this._headers.length) return nothing; return html` - KEY - VALUE + Name + Value ${repeat( this._headers, diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts index d6b2fb13f5..7df91e91c6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/webhook-events-modal/webhook-events-modal.element.ts @@ -1,9 +1,7 @@ import { UmbWebhookEventRepository } from '../../repository/event/webhook-event.repository.js'; import type { UmbWebhookEventModel } from '../../types.js'; import type { UmbWebhookPickerModalData, UmbWebhookPickerModalValue } from './webhook-events-modal.token.js'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit'; - +import { customElement, html, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils'; @@ -67,32 +65,36 @@ export class UmbWebhookEventsModalElement extends UmbModalBaseElement< } override render() { - return html` - - ${repeat( - this._events, - (item) => item.alias, - (item) => html` - this.#selectionManager.select(item.alias)} - @deselected=${() => this.#selectionManager.deselect(item.alias)} - ?selected=${this.value.events.includes(item)}> - - - `, - )} - -
- - -
- `; + return html` + + + ${repeat( + this._events, + (item) => item.alias, + (item) => html` + this.#selectionManager.select(item.alias)} + @deselected=${() => this.#selectionManager.deselect(item.alias)} + ?selected=${this.value.events.includes(item)}> + + + `, + )} + +
+ + +
+ + `; } - - static override styles = [UmbTextStyles, css``]; } export default UmbWebhookEventsModalElement; diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook-root/webhook-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook-root/webhook-root-workspace.element.ts index 071ecf38ef..3149d847cc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook-root/webhook-root-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook-root/webhook-root-workspace.element.ts @@ -5,9 +5,11 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-webhook-root-workspace') export class UmbWebhookRootWorkspaceElement extends UmbLitElement { override render() { - return html` - ; - `; + return html` + + ; + + `; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts index c9f9ea0eb6..874d2b3764 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts @@ -1,17 +1,16 @@ -import type { UmbInputWebhookHeadersElement } from '../../../components/input-webhook-headers.element.js'; import { UMB_WEBHOOK_WORKSPACE_CONTEXT } from '../webhook-workspace.context-token.js'; +import type { UmbInputWebhookHeadersElement } from '../../../components/input-webhook-headers.element.js'; import type { UmbInputWebhookEventsElement } from '../../../components/input-webhook-events.element.js'; -import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, state, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import '@umbraco-cms/backoffice/culture'; -import type { UmbWebhookDetailModel } from '@umbraco-cms/backoffice/webhook'; - import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import type { UmbInputDocumentTypeElement } from '@umbraco-cms/backoffice/document-type'; +import type { UmbWebhookDetailModel } from '@umbraco-cms/backoffice/webhook'; +import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; import type { UUIBooleanInputEvent, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import '@umbraco-cms/backoffice/culture'; import '../../../components/input-webhook-headers.element.js'; import '../../../components/input-webhook-events.element.js'; @@ -43,9 +42,9 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme }); } - #onEventsChange(event: UmbChangeEvent) { - const events = (event.target as UmbInputWebhookEventsElement).events; - if (events[0].eventType !== this.contentType) { + #onEventsChange(event: UmbChangeEvent & { target: UmbInputWebhookEventsElement }) { + const events = event.target.events ?? []; + if (events.length && events[0].eventType !== this.contentType) { this.#webhookWorkspaceContext?.setTypes([]); } this.#webhookWorkspaceContext?.setEvents(events); @@ -75,7 +74,9 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme if (this.contentType !== 'Content' && this.contentType !== 'Media') return nothing; return html` - + ${this.#renderContentTypePickerEditor()} `; @@ -84,17 +85,20 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme #renderContentTypePickerEditor() { switch (this.contentType) { case 'Content': - return html``; + return html` + + `; case 'Media': - return html``; + return html` + + `; default: return nothing; } @@ -105,20 +109,28 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme return html` - + - + ${this.#renderContentTypePicker()} - - + + - + `; + return html` + + `; } static override styles = [UmbTextStyles]; From 35fe4dbb554c001aa05e7d87f1bd9529bf2bee9c Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 30 Jul 2024 11:07:16 +0100 Subject: [PATCH 18/24] Lazy-load repositories Found a couple of repositories that hadn't been lazy-loaded. --- .../src/packages/core/culture/repository/culture.repository.ts | 2 ++ .../src/packages/core/culture/repository/manifests.ts | 3 +-- .../core/modal/common/embedded-media/repository/manifests.ts | 3 +-- .../common/embedded-media/repository/oembed.repository.ts | 2 ++ 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/culture.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/culture.repository.ts index 042e39713a..0d9ec60291 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/culture.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/culture.repository.ts @@ -18,3 +18,5 @@ export class UmbCultureRepository extends UmbControllerBase implements UmbApi { override destroy() {} } + +export { UmbCultureRepository as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/manifests.ts index 5e3e1ac52a..2862e1e2ba 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/culture/repository/manifests.ts @@ -1,4 +1,3 @@ -import { UmbCultureRepository } from './culture.repository.js'; import type { ManifestRepository, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const UMB_CULTURE_REPOSITORY_ALIAS = 'Umb.Repository.Culture'; @@ -7,7 +6,7 @@ const repository: ManifestRepository = { type: 'repository', alias: UMB_CULTURE_REPOSITORY_ALIAS, name: 'Cultures Repository', - api: UmbCultureRepository, + api: () => import('./culture.repository.js'), }; export const manifests: Array = [repository]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/manifests.ts index 580f3e1026..dbce95b73d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/manifests.ts @@ -1,4 +1,3 @@ -import { UmbOEmbedRepository } from './oembed.repository.js'; import type { ManifestRepository, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const UMB_OEMBED_REPOSITORY_ALIAS = 'Umb.Repository.OEmbed'; @@ -7,7 +6,7 @@ const repository: ManifestRepository = { type: 'repository', alias: UMB_OEMBED_REPOSITORY_ALIAS, name: 'OEmbed Repository', - api: UmbOEmbedRepository, + api: () => import('./oembed.repository.js'), }; export const manifests: Array = [repository]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/oembed.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/oembed.repository.ts index 344c067453..983232efe2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/oembed.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/embedded-media/repository/oembed.repository.ts @@ -18,3 +18,5 @@ export class UmbOEmbedRepository extends UmbControllerBase implements UmbApi { return { error }; } } + +export { UmbOEmbedRepository as api }; From 63e3fc4de502b668ad7fe0f6b730e1c915daaec5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 31 Jul 2024 13:06:39 +0200 Subject: [PATCH 19/24] block custom view example --- .../examples/block-custom-view/README.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/examples/block-custom-view/README.md diff --git a/src/Umbraco.Web.UI.Client/examples/block-custom-view/README.md b/src/Umbraco.Web.UI.Client/examples/block-custom-view/README.md new file mode 100644 index 0000000000..e0894b30b7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/block-custom-view/README.md @@ -0,0 +1,7 @@ +# Property Dataset Dashboard Example + +This example is a work in progress example of how to write a property editor. + +This example covers a few points: + +- Using an existing Property Editor Schema From 1b4f1193625e22475816ed3b53e2a1b76b99fdad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 31 Jul 2024 13:06:54 +0200 Subject: [PATCH 20/24] more code --- .../block-custom-view/block-custom-view.ts | 42 +++++++++++++++++++ .../examples/block-custom-view/index.ts | 12 ++++++ 2 files changed, 54 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts create mode 100644 src/Umbraco.Web.UI.Client/examples/block-custom-view/index.ts diff --git a/src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts b/src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts new file mode 100644 index 0000000000..abd194cf81 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts @@ -0,0 +1,42 @@ +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { html, customElement, LitElement, property, css } from '@umbraco-cms/backoffice/external/lit'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import type { UmbBlockDataType, UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/extension-registry'; + +@customElement('example-block-custom-view') +export class ExampleBlockCustomView extends UmbElementMixin(LitElement) implements UmbBlockEditorCustomViewElement { + // + @property({ attribute: false }) + content?: UmbBlockDataType; + + override render() { + return html` +
+
My Custom View
+

Headline: ${this.content.headline}

+
+ `; + } + + static override styles = [ + UmbTextStyles, + css` + :host { + display: block; + height: 100%; + box-sizing: border-box; + background-color: #dddddd; + border-radius: 9px; + padding: 12px; + } + `, + ]; +} + +export default ExampleBlockCustomView; + +declare global { + interface HTMLElementTagNameMap { + 'example-block-custom-view': ExampleBlockCustomView; + } +} diff --git a/src/Umbraco.Web.UI.Client/examples/block-custom-view/index.ts b/src/Umbraco.Web.UI.Client/examples/block-custom-view/index.ts new file mode 100644 index 0000000000..e50355a08b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/block-custom-view/index.ts @@ -0,0 +1,12 @@ +import type { ManifestBlockEditorCustomView } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'blockEditorCustomView', + alias: 'Umb.blockEditorCustomView.TestView', + name: 'Block Editor Custom View Test', + element: () => import('./block-custom-view.js'), + forContentTypeAlias: 'headlineUmbracoDemoBlock', + forBlockEditor: 'block-grid', + }, +]; From ed6cc35de34e9a7e44a61e20779ca4c1a8c78eea Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Wed, 31 Jul 2024 16:44:27 +0200 Subject: [PATCH 21/24] Make icons consistent with icon under each health check --- .../views/health-check-group-box-overview.element.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group-box-overview.element.ts b/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group-box-overview.element.ts index 42d8679729..3dadc4cee6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group-box-overview.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group-box-overview.element.ts @@ -64,25 +64,25 @@ export class UmbHealthCheckGroupBoxOverviewElement extends UmbLitElement { _renderCheckResults(resultObject: any) { return html`${resultObject.success > 0 ? html` - + ${resultObject.success} ` : nothing} ${resultObject.warning > 0 ? html` - + ${resultObject.warning} ` : nothing} ${resultObject.error > 0 ? html` - + ${resultObject.error} ` : nothing} ${resultObject.info > 0 ? html` - + ${resultObject.info} ` : nothing} `; From 717ddc5f24c4e8049992a8fdeaf583b37698d641 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Wed, 31 Jul 2024 16:45:19 +0200 Subject: [PATCH 22/24] Adjust alert icon color to match overview icon and increased contrast --- .../packages/health-check/views/health-check-group.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group.element.ts b/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group.element.ts index 787edc26c6..084d41a1a9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group.element.ts @@ -129,7 +129,7 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement { case StatusResultTypeModel.SUCCESS: return html``; case StatusResultTypeModel.WARNING: - return html``; + return html``; case StatusResultTypeModel.ERROR: return html``; case StatusResultTypeModel.INFO: From c7276ab4acc045d92d362f4536279eacaffee42a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 1 Aug 2024 18:55:27 +0000 Subject: [PATCH 23/24] build(deps-dev): bump typedoc from 0.26.4 to 0.26.5 Bumps [typedoc](https://github.com/TypeStrong/TypeDoc) from 0.26.4 to 0.26.5. - [Release notes](https://github.com/TypeStrong/TypeDoc/releases) - [Changelog](https://github.com/TypeStrong/typedoc/blob/master/CHANGELOG.md) - [Commits](https://github.com/TypeStrong/TypeDoc/compare/v0.26.4...v0.26.5) --- updated-dependencies: - dependency-name: typedoc dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- src/Umbraco.Web.UI.Client/package-lock.json | 8 ++++---- src/Umbraco.Web.UI.Client/package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json index dafc1e3c8f..3397fd5722 100644 --- a/src/Umbraco.Web.UI.Client/package-lock.json +++ b/src/Umbraco.Web.UI.Client/package-lock.json @@ -97,7 +97,7 @@ "storybook": "^7.6.17", "tiny-glob": "^0.2.9", "tsc-alias": "^1.8.10", - "typedoc": "^0.26.4", + "typedoc": "^0.26.5", "typescript": "^5.5.3", "typescript-eslint": "^7.16.1", "typescript-json-schema": "^0.64.0", @@ -20084,9 +20084,9 @@ "dev": true }, "node_modules/typedoc": { - "version": "0.26.4", - "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.26.4.tgz", - "integrity": "sha512-FlW6HpvULDKgc3rK04V+nbFyXogPV88hurarDPOjuuB5HAwuAlrCMQ5NeH7Zt68a/ikOKu6Z/0hFXAeC9xPccQ==", + "version": "0.26.5", + "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.26.5.tgz", + "integrity": "sha512-Vn9YKdjKtDZqSk+by7beZ+xzkkr8T8CYoiasqyt4TTRFy5+UHzL/mF/o4wGBjRF+rlWQHDb0t6xCpA3JNL5phg==", "dev": true, "dependencies": { "lunr": "^2.3.9", diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index 3ed5ffa50b..65272c56d3 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -267,7 +267,7 @@ "storybook": "^7.6.17", "tiny-glob": "^0.2.9", "tsc-alias": "^1.8.10", - "typedoc": "^0.26.4", + "typedoc": "^0.26.5", "typescript": "^5.5.3", "typescript-eslint": "^7.16.1", "typescript-json-schema": "^0.64.0", From ff7e3e04002c094d39e245ca0f10b9defa051ebb Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 1 Aug 2024 18:56:00 +0000 Subject: [PATCH 24/24] build(deps-dev): bump @playwright/test from 1.45.2 to 1.45.3 Bumps [@playwright/test](https://github.com/microsoft/playwright) from 1.45.2 to 1.45.3. - [Release notes](https://github.com/microsoft/playwright/releases) - [Commits](https://github.com/microsoft/playwright/compare/v1.45.2...v1.45.3) --- updated-dependencies: - dependency-name: "@playwright/test" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- src/Umbraco.Web.UI.Client/package-lock.json | 24 ++++++++++----------- src/Umbraco.Web.UI.Client/package.json | 2 +- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json index dafc1e3c8f..bafe597091 100644 --- a/src/Umbraco.Web.UI.Client/package-lock.json +++ b/src/Umbraco.Web.UI.Client/package-lock.json @@ -52,7 +52,7 @@ "@hey-api/openapi-ts": "^0.48.3", "@mdx-js/react": "^3.0.1", "@open-wc/testing": "^4.0.0", - "@playwright/test": "^1.45.2", + "@playwright/test": "^1.45.3", "@rollup/plugin-commonjs": "^26.0.1", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^15.2.3", @@ -3386,12 +3386,12 @@ } }, "node_modules/@playwright/test": { - "version": "1.45.2", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.2.tgz", - "integrity": "sha512-JxG9eq92ET75EbVi3s+4sYbcG7q72ECeZNbdBlaMkGcNbiDQ4cAi8U2QP5oKkOx+1gpaiL1LDStmzCaEM1Z6fQ==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.3.tgz", + "integrity": "sha512-UKF4XsBfy+u3MFWEH44hva1Q8Da28G6RFtR2+5saw+jgAFQV5yYnB1fu68Mz7fO+5GJF3wgwAIs0UelU8TxFrA==", "dev": true, "dependencies": { - "playwright": "1.45.2" + "playwright": "1.45.3" }, "bin": { "playwright": "cli.js" @@ -17498,12 +17498,12 @@ } }, "node_modules/playwright": { - "version": "1.45.2", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.2.tgz", - "integrity": "sha512-ReywF2t/0teRvNBpfIgh5e4wnrI/8Su8ssdo5XsQKpjxJj+jspm00jSoz9BTg91TT0c9HRjXO7LBNVrgYj9X0g==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.3.tgz", + "integrity": "sha512-QhVaS+lpluxCaioejDZ95l4Y4jSFCsBvl2UZkpeXlzxmqS+aABr5c82YmfMHrL6x27nvrvykJAFpkzT2eWdJww==", "dev": true, "dependencies": { - "playwright-core": "1.45.2" + "playwright-core": "1.45.3" }, "bin": { "playwright": "cli.js" @@ -17516,9 +17516,9 @@ } }, "node_modules/playwright-core": { - "version": "1.45.2", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.2.tgz", - "integrity": "sha512-ha175tAWb0dTK0X4orvBIqi3jGEt701SMxMhyujxNrgd8K0Uy5wMSwwcQHtyB4om7INUkfndx02XnQ2p6dvLDw==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.3.tgz", + "integrity": "sha512-+ym0jNbcjikaOwwSZycFbwkWgfruWvYlJfThKYAlImbxUgdWFO2oW70ojPm4OpE4t6TAo2FY/smM+hpVTtkhDA==", "dev": true, "bin": { "playwright-core": "cli.js" diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index 3ed5ffa50b..29db6d77c1 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -222,7 +222,7 @@ "@hey-api/openapi-ts": "^0.48.3", "@mdx-js/react": "^3.0.1", "@open-wc/testing": "^4.0.0", - "@playwright/test": "^1.45.2", + "@playwright/test": "^1.45.3", "@rollup/plugin-commonjs": "^26.0.1", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^15.2.3",