Feature/swap to popover container - part 1

.vscode/settings.json

@@ -11,6 +11,7 @@
 		"lucide",
 		"Niels",
 		"pickable",
+		"popovertarget",
 		"Registrator",
 		"svgs",
 		"templating",

package.json

@@ -164,8 +164,8 @@
 		"@types/chai": "^4.3.5",
 		"@types/lodash-es": "^4.17.8",
 		"@types/mocha": "^10.0.1",
-		"@typescript-eslint/eslint-plugin": "^6.3.0",
-		"@typescript-eslint/parser": "^6.5.0",
+		"@typescript-eslint/eslint-plugin": "^6.13.2",
+		"@typescript-eslint/parser": "^6.13.2",
 		"@web/dev-server-esbuild": "^0.4.1",
 		"@web/dev-server-import-maps": "^0.1.1",
 		"@web/dev-server-rollup": "^0.6.0",
@@ -180,7 +180,7 @@
 		"eslint-plugin-local-rules": "^1.3.2",
 		"eslint-plugin-storybook": "^0.6.15",
 		"eslint-plugin-wc": "^2.0.4",
-		"eslint": "^8.46.0",
+		"eslint": "^8.55.0",
 		"lucide-static": "^0.290.0",
 		"msw": "^1.2.3",
 		"openapi-typescript-codegen": "^0.25.0",
@@ -199,7 +199,7 @@
 		"tiny-glob": "^0.2.9",
 		"tsc-alias": "^1.8.8",
 		"typescript-json-schema": "^0.62.0",
-		"typescript": "^5.1.6",
+		"typescript": "^5.3.2",
 		"vite-plugin-static-copy": "^0.17.0",
 		"vite-tsconfig-paths": "^4.2.0",
 		"vite": "^4.4.9",

src/apps/backoffice/components/backoffice-header-sections.element.ts

@@ -1,6 +1,6 @@
 import { UMB_BACKOFFICE_CONTEXT_TOKEN } from '../backoffice.context.js';
 import type { UmbBackofficeContext } from '../backoffice.context.js';
-import { css, CSSResultGroup, html, when, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, CSSResultGroup, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import type { ManifestSection } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbExtensionManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
@@ -28,22 +28,30 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 	private _observeSections() {
 		if (!this._backofficeContext) return;
 
-		this.observe(this._backofficeContext.allowedSections, (allowedSections) => {
-			const oldValue = this._sections;
-			this._sections = allowedSections;
-			this.requestUpdate('_sections', oldValue);
-		});
+		this.observe(
+			this._backofficeContext.allowedSections,
+			(allowedSections) => {
+				const oldValue = this._sections;
+				this._sections = allowedSections;
+				this.requestUpdate('_sections', oldValue);
+			},
+			'observeSections',
+		);
 	}
 
 	private _observeCurrentSection() {
 		if (!this._backofficeContext) return;
 
-		this.observe(this._backofficeContext.activeSectionAlias, (currentSectionAlias) => {
-			this._currentSectionAlias = currentSectionAlias || '';
-		});
+		this.observe(
+			this._backofficeContext.activeSectionAlias,
+			(currentSectionAlias) => {
+				this._currentSectionAlias = currentSectionAlias || '';
+			},
+			'observeCurrentSection',
+		);
 	}
 
-	private _renderSections() {
+	render() {
 		return html`
 			<uui-tab-group id="tabs">
 				${repeat(
@@ -60,10 +68,6 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 		`;
 	}
 
-	render() {
-		return html` ${this._renderSections()} `;
-	}
-
 	static styles: CSSResultGroup = [
 		css`
 			:host {

src/apps/backoffice/components/backoffice-main.element.ts

@@ -3,9 +3,7 @@
 import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/section';
 import type { UmbRoute, UmbRouterSlotChangeEvent } from '@umbraco-cms/backoffice/router';
 import type { ManifestSection, UmbSectionElement } from '@umbraco-cms/backoffice/extension-registry';
-import {
-	UmbExtensionManifestInitializer, createExtensionElement
-} from '@umbraco-cms/backoffice/extension-api';
+import { UmbExtensionManifestInitializer, createExtensionElement } from '@umbraco-cms/backoffice/extension-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-backoffice-main')
@@ -37,7 +35,7 @@
 					this._sections = sections;
 					this._createRoutes();
 				},
-				'observeAllowedSections'
+				'observeAllowedSections',
 			);
 		}
 	}
@@ -47,21 +45,23 @@
 		const oldValue = this._routes;
 
 		// TODO: Refactor this for re-use across the app where the routes are re-generated at any time.
-		this._routes = this._sections.filter(x => x.manifest).map((section) => {
-			const existingRoute = this._routes.find((r) => r.alias === section.alias);
-			if (existingRoute) {
-				return existingRoute;
-			} else {
-				return {
-					alias: section.alias,
-					path: this._routePrefix + (section.manifest as ManifestSection).meta.pathname,
-					component: () => createExtensionElement(section.manifest!, 'umb-section-default'),
-					setup: (component) => {
-						(component as UmbSectionElement).manifest = section.manifest as ManifestSection;
-					},
-				};
-			}
-		});
+		this._routes = this._sections
+			.filter((x) => x.manifest)
+			.map((section) => {
+				const existingRoute = this._routes.find((r) => r.alias === section.alias);
+				if (existingRoute) {
+					return existingRoute;
+				} else {
+					return {
+						alias: section.alias,
+						path: this._routePrefix + (section.manifest as ManifestSection).meta.pathname,
+						component: () => createExtensionElement(section.manifest!, 'umb-section-default'),
+						setup: (component) => {
+							(component as UmbSectionElement).manifest = section.manifest as ManifestSection;
+						},
+					};
+				}
+			});
 
 		if (this._sections.length > 0) {
 			this._routes.push({
@@ -76,10 +76,10 @@
 
 	private _onRouteChange = async (event: UmbRouterSlotChangeEvent) => {
 		const currentPath = event.target.localActiveViewPath || '';
 		const section = this._sections.find((s) => this._routePrefix + (s.manifest as any).meta.pathname === currentPath);
 		if (!section) return;
 		await section.asPromise();
-		if(section.manifest) {
+		if (section.manifest) {
 			this._backofficeContext?.setActiveSectionAlias(section.alias);
 			this._provideSectionContext(section.manifest);
 		}
@@ -105,7 +105,9 @@
 			:host {
 				background-color: var(--uui-color-background);
 				display: block;
-				height: calc(100% - 60px); // 60 => top header height, TODO: Make sure this comes from somewhere so it is maintainable and eventually responsive.
+				height: calc(
+					100% - 60px
+				); // 60 => top header height, TODO: Make sure this comes from somewhere so it is maintainable and eventually responsive.
 			}
 		`,
 	];

src/apps/installer/database/installer-database.element.ts

@@ -169,7 +169,7 @@ export class UmbInstallerDatabaseElement extends UmbLitElement {
 				};
 
 				const { error } = await tryExecute(
-					InstallResource.postInstallValidateDatabase({ requestBody: databaseDetails })
+					InstallResource.postInstallValidateDatabase({ requestBody: databaseDetails }),
 				);
 
 				if (error) {
@@ -199,7 +199,7 @@ export class UmbInstallerDatabaseElement extends UmbLitElement {
 		this._installerContext.nextStep();
 
 		const { error } = await tryExecute(
-			InstallResource.postInstallSetup({ requestBody: this._installerContext.getData() })
+			InstallResource.postInstallSetup({ requestBody: this._installerContext.getData() }),
 		);
 
 		if (error) {
@@ -243,7 +243,7 @@ export class UmbInstallerDatabaseElement extends UmbLitElement {
 		}
 
 		result.push(
-			this._renderDatabaseName(this.databaseFormData.name ?? this._selectedDatabase.defaultDatabaseName ?? 'umbraco')
+			this._renderDatabaseName(this.databaseFormData.name ?? this._selectedDatabase.defaultDatabaseName ?? 'umbraco'),
 		);
 
 		if (this._selectedDatabase.requiresCredentials) {
@@ -271,19 +271,20 @@ export class UmbInstallerDatabaseElement extends UmbLitElement {
 		</uui-form-layout-item>
 	`;
 
-	private _renderDatabaseName = (value: string) => html` <uui-form-layout-item>
-		<uui-label for="database-name" slot="label" required>Database Name</uui-label>
-		<uui-input
-			type="text"
-			.value=${value}
-			id="database-name"
-			name="name"
-			label="Database name"
-			@input=${this._handleChange}
-			placeholder="umbraco"
-			required
-			required-message="Database name is required"></uui-input>
-	</uui-form-layout-item>`;
+	private _renderDatabaseName = (value: string) =>
+		html` <uui-form-layout-item>
+			<uui-label for="database-name" slot="label" required>Database Name</uui-label>
+			<uui-input
+				type="text"
+				.value=${value}
+				id="database-name"
+				name="name"
+				label="Database name"
+				@input=${this._handleChange}
+				placeholder="umbraco"
+				required
+				required-message="Database name is required"></uui-input>
+		</uui-form-layout-item>`;
 
 	private _renderCredentials = () => html`
 		<h2 class="uui-h4">Credentials</h2>

src/apps/installer/shared/layout/installer-layout.element.ts

@@ -60,8 +60,11 @@ export class UmbInstallerLayoutElement extends LitElement {
 				max-width: 1200px;
 				height: 100%;
 				max-height: 900px;
-				box-shadow: 0px 1.1px 3.7px rgba(0, 0, 0, 0.091), 0px 3.1px 10.1px rgba(0, 0, 0, 0.13),
-					0px 7.5px 24.4px rgba(0, 0, 0, 0.169), 0px 25px 81px rgba(0, 0, 0, 0.26);
+				box-shadow:
+					0px 1.1px 3.7px rgba(0, 0, 0, 0.091),
+					0px 3.1px 10.1px rgba(0, 0, 0, 0.13),
+					0px 7.5px 24.4px rgba(0, 0, 0, 0.169),
+					0px 25px 81px rgba(0, 0, 0, 0.26);
 			}
 
 			#grid {

src/apps/installer/shared/utils.story-helpers.ts

@@ -1,7 +1,10 @@
 import { UmbInstallerContext } from '../installer.context.js';
 import { html, type TemplateResult } from '@umbraco-cms/backoffice/external/lit';
 
-export const installerContextProvider = (story: () => Node | string | TemplateResult, installerContext = new UmbInstallerContext()) => html`
+export const installerContextProvider = (
+	story: () => Node | string | TemplateResult,
+	installerContext = new UmbInstallerContext(),
+) => html`
 	<umb-context-provider
 		style="display: block;margin: 2rem 25%;padding: 1rem;border: 1px solid #ddd;"
 		key="umbInstallerContext"

src/external/router-slot/config.ts

@@ -1,9 +1,9 @@
-import { PathMatch } from "./model.js";
+import { PathMatch } from './model.js';
 
-export const CATCH_ALL_WILDCARD: string = "**";
-export const TRAVERSE_FLAG: string = "\\.\\.\\/";
+export const CATCH_ALL_WILDCARD: string = '**';
+export const TRAVERSE_FLAG: string = '\\.\\.\\/';
 export const PARAM_IDENTIFIER: RegExp = /:([^\\/]+)/g;
-export const ROUTER_SLOT_TAG_NAME: string = "router-slot";
+export const ROUTER_SLOT_TAG_NAME: string = 'router-slot';
 export const GLOBAL_ROUTER_EVENTS_TARGET = window;
 export const HISTORY_PATCH_NATIVE_KEY: string = `native`;
-export const DEFAULT_PATH_MATCH: PathMatch = "prefix";
+export const DEFAULT_PATH_MATCH: PathMatch = 'prefix';