Merge branch 'main' into feature/table-column-alignment

2024-04-11 09:25:55 +02:00
parent f638a3ec1f 251895113f
commit ef738c7042
25 changed files with 58 additions and 64 deletions
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/ref-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-item/ref-item.element.ts
@@ -1,4 +1,4 @@
-import { html, customElement, css, property, when, nothing, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, css, property, when, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 import { UUIRefElement, UUIRefEvent, UUIRefNodeElement } from '@umbraco-cms/backoffice/external/uui';

--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/manifests.ts
@@ -5,13 +5,13 @@ const modals: Array<ManifestModal> = [
 		type: 'modal',
 		alias: 'Umb.Modal.CompositionPicker',
 		name: 'ContentType Composition Picker Modal',
-		js: () => import('./composition-picker/composition-picker-modal.element.js'),
+		element: () => import('./composition-picker/composition-picker-modal.element.js'),
 	},
 	{
 		type: 'modal',
 		alias: 'Umb.Modal.PropertyTypeSettings',
 		name: 'Property Type Settings Modal',
-		js: () => import('./property-type-settings/property-type-settings-modal.element.js'),
+		element: () => import('./property-type-settings/property-type-settings-modal.element.js'),
 	},
 ];

--- a/src/Umbraco.Web.UI.Client/src/packages/core/debug/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/debug/manifests.ts
@@ -5,7 +5,7 @@ const modals: Array<ManifestModal> = [
 		type: 'modal',
 		alias: 'Umb.Modal.ContextDebugger',
 		name: 'Context Debugger Modal',
-		js: () => import('./modals/debug/debug-modal.element.js'),
+		element: () => import('./modals/debug/debug-modal.element.js'),
 	},
 ];

--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/collection/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/collection/repository/manifests.ts
@@ -1,4 +1,3 @@
-import { UmbExtensionCollectionRepository } from './extension-collection.repository.js';
 import type { ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';

 export const UMB_EXTENSION_COLLECTION_REPOSITORY_ALIAS = 'Umb.Repository.ExtensionCollection';
@@ -7,7 +6,7 @@ const repository: ManifestRepository = {
 	type: 'repository',
 	alias: UMB_EXTENSION_COLLECTION_REPOSITORY_ALIAS,
 	name: 'Extension Collection Repository',
-	api: UmbExtensionCollectionRepository,
+	api: () => import('./extension-collection.repository.js'),
 };

 export const manifests = [repository];
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/collection/views/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/collection/views/manifests.ts
@@ -7,7 +7,7 @@ const tableCollectionView: ManifestCollectionView = {
 	type: 'collectionView',
 	alias: UMB_EXTENSION_TABLE_COLLECTION_VIEW_ALIAS,
 	name: 'Extension Table Collection View',
-	js: () => import('./table/extension-table-collection-view.element.js'),
+	element: () => import('./table/extension-table-collection-view.element.js'),
 	meta: {
 		label: 'Table',
 		icon: 'icon-list',
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/confirm/confirm-modal.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/confirm/confirm-modal.controller.ts
@@ -22,7 +22,6 @@ export class UmbConfirmModalController extends UmbControllerBase {
 		// This is a one time off, so we can destroy our selfs.
 		this.destroy();

-		// Map back into UmbVariantId instances:
 		return;
 	}
 }
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts
@@ -5,31 +5,31 @@ const modals: Array<ManifestModal> = [
 		type: 'modal',
 		alias: 'Umb.Modal.Confirm',
 		name: 'Confirm Modal',
-		js: () => import('./confirm/confirm-modal.element.js'),
+		element: () => import('./confirm/confirm-modal.element.js'),
 	},
 	{
 		type: 'modal',
 		alias: 'Umb.Modal.IconPicker',
 		name: 'Icon Picker Modal',
-		js: () => import('./icon-picker/icon-picker-modal.element.js'),
+		element: () => import('./icon-picker/icon-picker-modal.element.js'),
 	},
 	{
 		type: 'modal',
 		alias: 'Umb.Modal.LinkPicker',
 		name: 'Link Picker Modal',
-		js: () => import('./link-picker/link-picker-modal.element.js'),
+		element: () => import('./link-picker/link-picker-modal.element.js'),
 	},
 	{
 		type: 'modal',
 		alias: 'Umb.Modal.CodeEditor',
 		name: 'Code Editor Modal',
-		js: () => import('./code-editor/code-editor-modal.element.js'),
+		element: () => import('./code-editor/code-editor-modal.element.js'),
 	},
 	{
 		type: 'modal',
 		alias: 'Umb.Modal.EmbeddedMedia',
 		name: 'Embedded Media Modal',
-		js: () => import('./embedded-media/embedded-media-modal.element.js'),
+		element: () => import('./embedded-media/embedded-media-modal.element.js'),
 	},
 	{
 		type: 'modal',
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts
@@ -1,7 +1,7 @@
 import { umbExtensionsRegistry, type ManifestPropertyEditorUi } from '../../extension-registry/index.js';
 import { UmbPropertyContext } from './property.context.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { createExtensionElement } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -223,12 +223,12 @@ export class UmbPropertyElement extends UmbLitElement {
 	}

 	private _renderPropertyActionMenu() {
-		return html`${this._propertyEditorUiAlias
+		return this._propertyEditorUiAlias
 			? html`<umb-property-action-menu
 					slot="action-menu"
 					id="action-menu"
 					.propertyEditorUiAlias=${this._propertyEditorUiAlias}></umb-property-action-menu>`
-			: ''}`;
+			: nothing;
 	}

 	static styles = [
--- a/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/entity-action/restore-from-recycle-bin/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/entity-action/restore-from-recycle-bin/manifests.ts
@@ -6,6 +6,6 @@ export const manifests = [
 		type: 'modal',
 		alias: 'Umb.Modal.RecycleBin.Restore',
 		name: 'Restore From Recycle Bin Modal',
-		js: () => import('./modal/restore-from-recycle-bin-modal.element.js'),
+		element: () => import('./modal/restore-from-recycle-bin-modal.element.js'),
 	},
 ];
--- a/src/Umbraco.Web.UI.Client/src/packages/core/themes/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/themes/manifests.ts
@@ -5,7 +5,7 @@ export const themes: Array<ManifestGlobalContext | ManifestTheme> = [
 		type: 'globalContext',
 		alias: 'Umb.GlobalContext.Theme',
 		name: 'Theme Context',
-		js: () => import('./theme.context.js'),
+		api: () => import('./theme.context.js'),
 	},
 	{
 		type: 'theme',
--- a/src/Umbraco.Web.UI.Client/src/packages/core/themes/theme.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/themes/theme.context.ts
@@ -34,9 +34,7 @@ export class UmbThemeContext extends UmbContextBase<UmbThemeContext> {
 		if (themeAlias) {
 			localStorage.setItem(LOCAL_STORAGE_KEY, themeAlias);
 			this.#themeObserver = this.observe(
-				umbExtensionsRegistry
-					.byType('theme')
-					.pipe(map((extensions) => extensions.filter((extension) => extension.alias === themeAlias))),
+				umbExtensionsRegistry.byTypeAndFilter('theme', (extension) => extension.alias === themeAlias),
 				async (themes) => {
 					this.#styleElement?.remove();
 					if (themes.length > 0 && themes[0].css) {
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/manifests.ts
@@ -3,6 +3,6 @@ export const manifests = [
 		type: 'modal',
 		alias: 'Umb.Modal.TreePicker',
 		name: 'Tree Picker Modal',
-		js: () => import('./tree-picker-modal.element.js'),
+		element: () => import('./tree-picker-modal.element.js'),
 	},
 ];
--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/entity-actions/create/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/entity-actions/create/manifests.ts
@@ -20,7 +20,7 @@ const entityActions: Array<ManifestTypes> = [
 		type: 'modal',
 		alias: 'Umb.Modal.DataTypeCreateOptions',
 		name: 'Data Type Create Options Modal',
-		js: () => import('./modal/data-type-create-options-modal.element.js'),
+		element: () => import('./modal/data-type-create-options-modal.element.js'),
 	},
 ];

--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/manifests.ts
@@ -5,19 +5,19 @@ const modals: Array<ManifestModal> = [
 		type: 'modal',
 		alias: 'Umb.Modal.PropertyEditorUiPicker',
 		name: 'Property Editor UI Picker Modal',
-		js: () => import('./property-editor-ui-picker/property-editor-ui-picker-modal.element.js'),
+		element: () => import('./property-editor-ui-picker/property-editor-ui-picker-modal.element.js'),
 	},
 	{
 		type: 'modal',
 		alias: 'Umb.Modal.DataTypePickerFlow',
 		name: 'Data Type Picker Flow Modal',
-		js: () => import('./data-type-picker-flow/data-type-picker-flow-modal.element.js'),
+		element: () => import('./data-type-picker-flow/data-type-picker-flow-modal.element.js'),
 	},
 	{
 		type: 'modal',
 		alias: 'Umb.Modal.DataTypePickerFlowDataTypePicker',
 		name: 'Data Type Picker Flow UI Picker Modal',
-		js: () => import('./data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.js'),
+		element: () => import('./data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.js'),
 	},
 ];

--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/manifests.ts
@@ -23,7 +23,7 @@ const workspaceViews: Array<ManifestWorkspaceView> = [
 		type: 'workspaceView',
 		alias: 'Umb.WorkspaceView.DataType.Edit',
 		name: 'Data Type Workspace Edit View',
-		js: () => import('./views/details/data-type-details-workspace-view.element.js'),
+		element: () => import('./views/details/data-type-details-workspace-view.element.js'),
 		weight: 90,
 		meta: {
 			label: '#general_details',
@@ -41,7 +41,7 @@ const workspaceViews: Array<ManifestWorkspaceView> = [
 		type: 'workspaceView',
 		alias: 'Umb.WorkspaceView.DataType.Info',
 		name: 'Data Type Workspace Info View',
-		js: () => import('./views/info/workspace-view-data-type-info.element.js'),
+		element: () => import('./views/info/workspace-view-data-type-info.element.js'),
 		weight: 90,
 		meta: {
 			label: '#general_info',
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/dashboards/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/dashboards/manifests.ts
@@ -5,7 +5,7 @@ const dashboards: Array<ManifestDashboard> = [
 		type: 'dashboard',
 		alias: 'Umb.Dashboard.RedirectManagement',
 		name: 'Redirect Management Dashboard',
-		js: () => import('./redirect-management/dashboard-redirect-management.element.js'),
+		element: () => import('./redirect-management/dashboard-redirect-management.element.js'),
 		weight: 10,
 		meta: {
 			label: '#dashboardTabs_contentRedirectManager',
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/entity-actions/create/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/entity-actions/create/manifests.ts
@@ -5,7 +5,7 @@ const entityActions: Array<ManifestTypes> = [
 		type: 'modal',
 		alias: 'Umb.Modal.DocumentBlueprintCreateOptions',
 		name: 'Document Blueprint Create Options Modal',
-		js: () => import('./modal/document-blueprint-create-options-modal.element.js'),
+		element: () => import('./modal/document-blueprint-create-options-modal.element.js'),
 	},
 ];

--- 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
@@ -37,6 +37,7 @@ export class UmbDocumentCollectionServerDataSource implements UmbCollectionDataS

 				const model: UmbDocumentCollectionItemModel = {
 					unique: item.id,
+					entityType: 'document',
 					contentTypeAlias: item.documentType.alias,
 					createDate: new Date(variant.createDate),
 					creator: item.creator,
--- 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
@@ -11,6 +11,7 @@ export interface UmbDocumentCollectionFilterModel extends UmbCollectionFilterMod

 export interface UmbDocumentCollectionItemModel {
 	unique: string;
+	entityType: string;
 	contentTypeAlias: string;
 	createDate: Date;
 	creator?: string | null;
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/global-contexts/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/global-contexts/manifests.ts
@@ -5,6 +5,6 @@ export const manifests: Array<ManifestGlobalContext> = [
 		type: 'globalContext',
 		alias: 'Umb.GlobalContext.DocumentConfiguration',
 		name: 'Document Configuration Context',
-		js: () => import('./document-configuration.context.js'),
+		api: () => import('./document-configuration.context.js'),
 	},
 ];
--- a/src/Umbraco.Web.UI.Client/src/packages/language/global-contexts/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/language/global-contexts/manifests.ts
@@ -5,6 +5,6 @@ export const manifests: Array<ManifestGlobalContext> = [
 		type: 'globalContext',
 		alias: 'Umb.GlobalContext.AppLanguage',
 		name: 'App Language Context',
-		js: () => import('./app-language.context.js'),
+		api: () => import('./app-language.context.js'),
 	},
 ];
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
@@ -106,7 +106,7 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 		return html`
 			<uui-form>
 				<form @submit=${this.#onSubmit}>
-				<div class="input">
+					<div class="input">
 						<uui-label for="label">Label</uui-label>
 						<uui-input label="Label" id="label" name="label" type="text" autocomplete="false" value=""></uui-input>
 					</div>
@@ -139,8 +139,14 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 							<span><strong>${item.label}</strong> <em>(${item.alias})</em></span>
 							<span class="crop-size">(${item.width} x ${item.height}px)</span>
 							<div class="crop-actions">
-								<uui-button label="Edit" @click=${() => this.#onEdit(item)}>Edit</uui-button>
-								<uui-button label="Remove" color="danger" @click=${() => this.#onRemove(item.alias)}>Remove</uui-button>
+								<uui-button
+									label=${this.localize.term('general_edit')}
+									color="default"
+									@click=${() => this.#onEdit(item)}></uui-button>
+								<uui-button
+									label=${this.localize.term('general_remove')}
+									color="danger"
+									@click=${() => this.#onRemove(item.alias)}></uui-button>
 							</div>
 						</div>
 					`,
--- a/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts
@@ -56,7 +56,7 @@ export class UmbPropertyEditorUITagsElement extends UmbLitElement implements Umb

 	render() {
 		return html`<umb-tags-input
-			group="${ifDefined(this._group)}"
+			group=${ifDefined(this._group)}
 			.culture=${this._culture}
 			.items=${this.value}
 			@change=${this.#onChange}></umb-tags-input>`;
--- a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/manifests.ts
@@ -4,7 +4,7 @@ export const dashboard: ManifestDashboard = {
 	type: 'dashboard',
 	alias: 'Umb.Dashboard.UmbracoNews',
 	name: 'Umbraco News Dashboard',
-	js: () => import('./umbraco-news-dashboard.element.js'),
+	element: () => import('./umbraco-news-dashboard.element.js'),
 	weight: 20,
 	meta: {
 		label: '#dashboardTabs_contentIntro',
--- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts
@@ -1,10 +1,9 @@
-import type { UmbThemeContext } from '@umbraco-cms/backoffice/themes';
-import { UMB_THEME_CONTEXT } from '@umbraco-cms/backoffice/themes';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
+import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { ManifestTheme } from '@umbraco-cms/backoffice/extension-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UMB_THEME_CONTEXT } from '@umbraco-cms/backoffice/themes';
+import type { UmbThemeContext } from '@umbraco-cms/backoffice/themes';
+import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';

@customElement('umb-current-user-theme-user-profile-app')
 export class UmbCurrentUserThemeUserProfileAppElement extends UmbLitElement {
@@ -14,7 +13,7 @@ export class UmbCurrentUserThemeUserProfileAppElement extends UmbLitElement {
 	private _themeAlias: string | null = null;

 	@state()
-	private _themes: Array<ManifestTheme> = [];
+	private _themes: Array<Option> = [];

 	constructor() {
 		super();
@@ -31,14 +30,14 @@ export class UmbCurrentUserThemeUserProfileAppElement extends UmbLitElement {
 			this.observe(
 				umbExtensionsRegistry.byType('theme'),
 				(themes) => {
-					this._themes = themes;
+					this._themes = themes.map((t) => ({ name: t.name, value: t.alias, selected: t.alias === this._themeAlias }));
 				},
 				'_observeThemeExtensions',
 			);
 		});
 	}

-	#handleThemeChange(event: UUISelectEvent) {
+	#onThemeChange(event: UUISelectEvent) {
 		if (!this.#themeContext) return;

 		const theme = event.target.value.toString();
@@ -46,32 +45,23 @@ export class UmbCurrentUserThemeUserProfileAppElement extends UmbLitElement {
 		this.#themeContext.setThemeByAlias(theme);
 	}

-	get #options() {
-		return this._themes.map((t) => ({ name: t.name, value: t.alias, selected: t.alias === this._themeAlias }));
-	}
-
 	render() {
+		if (!this._themes.length) return nothing;
 		return html`
-			<b>Select Theme</b>
-			<uui-select
-				label="theme select"
-				@change=${this.#handleThemeChange}
-				.value=${this._themeAlias}
-				.options=${this.#options}></uui-select>
+			<uui-box headline="Select theme">
+				<uui-select
+					label="Select theme"
+					.options=${this._themes}
+					.value=${this._themeAlias}
+					@change=${this.#onThemeChange}></uui-select>
+			</uui-box>
 		`;
 	}

 	static styles = [
 		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-				padding: var(--uui-size-space-5);
-				background: var(--uui-color-surface);
-				color: var(--uui-color-text);
-				border-radius: var(--uui-border-radius);
-				box-shadow: var(--uui-shadow-depth-1);
+			uui-select {
+				width: 100%;
 			}
 		`,
 	];