Merge branch 'main' into v14/feature/block-area-permissions-display-content-type-name

Author: nielslyngsoe

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

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`
+			<div class="uui-text">
+				<h5 class="uui-text">My Custom View</h5>
+				<p>Headline: ${this.content.headline}</p>
+			</div>
+		`;
+	}
+
+	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;
+	}
+}

examples/block-custom-view/index.ts

@@ -0,0 +1,12 @@
+import type { ManifestBlockEditorCustomView } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<ManifestBlockEditorCustomView> = [
+	{
+		type: 'blockEditorCustomView',
+		alias: 'Umb.blockEditorCustomView.TestView',
+		name: 'Block Editor Custom View Test',
+		element: () => import('./block-custom-view.js'),
+		forContentTypeAlias: 'headlineUmbracoDemoBlock',
+		forBlockEditor: 'block-grid',
+	},
+];

package-lock.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",
@@ -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",

package.json

@@ -90,17 +90,18 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 		await this.#init;
 		if (!this.#compositionRepository) return;
 
-		const isElement = this.data?.isElement;
-		const currentPropertyAliases = this.data?.currentPropertyAliases;
+		// Notice isElement is not available on all types that can be composed.
+		const isElement = this.data?.isElement ?? undefined;
+		const currentPropertyAliases = this.data?.currentPropertyAliases ?? [];
 
 		const { data } = await this.#compositionRepository.availableCompositions({
 			unique: this.#unique,
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
 			// TODO: isElement is not available on all types that can be composed.
-			isElement: isElement ?? false,
+			isElement: isElement,
 			currentCompositeUniques: this._selection,
-			currentPropertyAliases: currentPropertyAliases ?? [],
+			currentPropertyAliases: currentPropertyAliases,
 		});
 
 		if (!data) return;

src/packages/core/content-type/modals/composition-picker/composition-picker-modal.element.ts

@@ -1,2 +1 @@
-export { UmbDocumentTypeCompositionRepository } from './document-type-composition.repository.js';
 export { UMB_DOCUMENT_TYPE_COMPOSITION_REPOSITORY_ALIAS } from './manifests.js';

src/packages/documents/document-types/repository/composition/index.ts

@@ -2,11 +2,11 @@ import type { ManifestRepository, ManifestTypes } from '@umbraco-cms/backoffice/
 
 export const UMB_DOCUMENT_TYPE_COMPOSITION_REPOSITORY_ALIAS = 'Umb.Repository.DocumentType.Composition';
 
-const queryRepository: ManifestRepository = {
+const compositionRepository: ManifestRepository = {
 	type: 'repository',
 	alias: UMB_DOCUMENT_TYPE_COMPOSITION_REPOSITORY_ALIAS,
 	name: 'Document Type Composition Repository',
 	api: () => import('./document-type-composition.repository.js'),
 };
 
-export const manifests: Array<ManifestTypes> = [queryRepository];
+export const manifests: Array<ManifestTypes> = [compositionRepository];

src/packages/documents/document-types/repository/composition/manifests.ts

@@ -64,25 +64,25 @@ export class UmbHealthCheckGroupBoxOverviewElement extends UmbLitElement {
 	_renderCheckResults(resultObject: any) {
 		return html`${resultObject.success > 0
 			? html`<uui-tag look="secondary" color="positive">
-					<uui-icon name="icon-check"></uui-icon>
+					<uui-icon name="check"></uui-icon>
 					${resultObject.success}
 				</uui-tag> `
 			: nothing}
 		${resultObject.warning > 0
 			? html`<uui-tag look="secondary" color="warning">
-					<uui-icon name="icon-alert"></uui-icon>
+					<uui-icon name="alert"></uui-icon>
 					${resultObject.warning}
 				</uui-tag>`
 			: nothing}
 		${resultObject.error > 0
 			? html`<uui-tag look="secondary" color="danger">
-					<uui-icon name="icon-wrong"></uui-icon>
+					<uui-icon name="remove"></uui-icon>
 					${resultObject.error}
 				</uui-tag>`
 			: nothing}
 		${resultObject.info > 0
 			? html`<uui-tag look="secondary">
-					<uui-icon name="icon-info"></uui-icon>
+					<uui-icon name="info"></uui-icon>
 					${resultObject.info}
 				</uui-tag>`
 			: nothing} `;

src/packages/health-check/views/health-check-group-box-overview.element.ts

@@ -129,7 +129,7 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
 			case StatusResultTypeModel.SUCCESS:
 				return html`<uui-icon style="color: var(--uui-color-positive);" name="check"></uui-icon>`;
 			case StatusResultTypeModel.WARNING:
-				return html`<uui-icon style="color: var(--uui-color-warning);" name="alert"></uui-icon>`;
+				return html`<uui-icon style="color: var(--uui-color-warning-standalone);" name="alert"></uui-icon>`;
 			case StatusResultTypeModel.ERROR:
 				return html`<uui-icon style="color: var(--uui-color-danger);" name="remove"></uui-icon>`;
 			case StatusResultTypeModel.INFO: