From ef668ad3f88b6a19b1bf3b136b43612f8169409c Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Thu, 25 Jul 2024 13:14:55 +0200 Subject: [PATCH 01/21] feat: add bundling for the 'tiny-mce' package --- package-lock.json | 6 ++++++ package.json | 1 + src/packages/tiny-mce/package.json | 8 ++++++++ src/packages/tiny-mce/vite.config.ts | 19 +++++++++++++++++++ 4 files changed, 34 insertions(+) create mode 100644 src/packages/tiny-mce/package.json create mode 100644 src/packages/tiny-mce/vite.config.ts diff --git a/package-lock.json b/package-lock.json index 5a1f3cde7f..7926cf8773 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "./src/packages/property-editors", "./src/packages/tags", "./src/packages/templating", + "./src/packages/tiny-mce", "./src/packages/umbraco-news", "./src/packages/user", "./src/packages/webhook" @@ -7407,6 +7408,10 @@ "resolved": "src/packages/templating", "link": true }, + "node_modules/@umbraco-backoffice/tiny-mce": { + "resolved": "src/packages/tiny-mce", + "link": true + }, "node_modules/@umbraco-backoffice/umbraco-news": { "resolved": "src/packages/umbraco-news", "link": true @@ -21733,6 +21738,7 @@ "src/packages/templating": { "name": "@umbraco-backoffice/templating" }, + "src/packages/tiny-mce": {}, "src/packages/umbraco-news": { "name": "@umbraco-backoffice/umbraco-news" }, diff --git a/package.json b/package.json index 1d62ade7fe..a2f9bb6075 100644 --- a/package.json +++ b/package.json @@ -142,6 +142,7 @@ "./src/packages/property-editors", "./src/packages/tags", "./src/packages/templating", + "./src/packages/tiny-mce", "./src/packages/umbraco-news", "./src/packages/user", "./src/packages/webhook" diff --git a/src/packages/tiny-mce/package.json b/src/packages/tiny-mce/package.json new file mode 100644 index 0000000000..6362dc5347 --- /dev/null +++ b/src/packages/tiny-mce/package.json @@ -0,0 +1,8 @@ +{ + "name": "@umbraco-backoffice/tiny-mce", + "private": true, + "type": "module", + "scripts": { + "build": "vite build" + } +} diff --git a/src/packages/tiny-mce/vite.config.ts b/src/packages/tiny-mce/vite.config.ts new file mode 100644 index 0000000000..72556d1777 --- /dev/null +++ b/src/packages/tiny-mce/vite.config.ts @@ -0,0 +1,19 @@ +import { defineConfig } from 'vite'; +import { rmSync } from 'fs'; +import { getDefaultConfig } from '../../vite-config-base'; + +const dist = '../../../dist-cms/packages/tiny-mce'; + +// delete the unbundled dist folder +rmSync(dist, { recursive: true, force: true }); + +export default defineConfig({ + ...getDefaultConfig({ + dist, + entry: { + index: 'index.ts', + 'umbraco-package': 'umbraco-package.ts', + manifests: 'manifests.ts', + }, + }), +}); From 1fd3b667171945def605e6bc9ba5a481079a893a Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 11:29:47 +0200 Subject: [PATCH 02/21] update lockfile --- package-lock.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 6fddbdbd5c..0c8211ee8a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21746,7 +21746,9 @@ "src/packages/templating": { "name": "@umbraco-backoffice/templating" }, - "src/packages/tiny-mce": {}, + "src/packages/tiny-mce": { + "name": "@umbraco-backoffice/tiny-mce" + }, "src/packages/umbraco-news": { "name": "@umbraco-backoffice/umbraco-news" }, From 1b35768e26029f62a9bccdc15dff33c58c3b417c Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 11:37:31 +0200 Subject: [PATCH 03/21] add fallback for tinymce --- .../core/localization/registry/localization.registry.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/packages/core/localization/registry/localization.registry.ts b/src/packages/core/localization/registry/localization.registry.ts index f2b5e98a4e..89174aecfd 100644 --- a/src/packages/core/localization/registry/localization.registry.ts +++ b/src/packages/core/localization/registry/localization.registry.ts @@ -1,8 +1,8 @@ -import type { +import { UmbLocalizationSetBase, UmbLocalizationDictionary, - UmbLocalizationFlatDictionary, -} from '@umbraco-cms/backoffice/localization-api'; + UmbLocalizationFlatDictionary, UMB_DEFAULT_LOCALIZATION_CULTURE +} from "@umbraco-cms/backoffice/localization-api"; import { umbLocalizationManager } from '@umbraco-cms/backoffice/localization-api'; import type { ManifestLocalization, UmbBackofficeExtensionRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; @@ -36,7 +36,7 @@ export class UmbLocalizationRegistry { constructor(extensionRegistry: UmbBackofficeExtensionRegistry) { combineLatest([this.currentLanguage, extensionRegistry.byType('localization')]).subscribe( async ([currentLanguage, extensions]) => { - const locale = new Intl.Locale(currentLanguage); + const locale = new Intl.Locale(!!currentLanguage ? currentLanguage : UMB_DEFAULT_LOCALIZATION_CULTURE); const filteredExt = extensions.filter( (ext) => ext.meta.culture.toLowerCase() === locale.baseName.toLowerCase() || From c11ac805e5d8c7fda7c3a32eac8ac22a52ed4b6d Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 11:44:47 +0200 Subject: [PATCH 04/21] chore: linting --- .../core/localization/registry/localization.registry.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/packages/core/localization/registry/localization.registry.ts b/src/packages/core/localization/registry/localization.registry.ts index 89174aecfd..d63cdce44b 100644 --- a/src/packages/core/localization/registry/localization.registry.ts +++ b/src/packages/core/localization/registry/localization.registry.ts @@ -36,7 +36,7 @@ export class UmbLocalizationRegistry { constructor(extensionRegistry: UmbBackofficeExtensionRegistry) { combineLatest([this.currentLanguage, extensionRegistry.byType('localization')]).subscribe( async ([currentLanguage, extensions]) => { - const locale = new Intl.Locale(!!currentLanguage ? currentLanguage : UMB_DEFAULT_LOCALIZATION_CULTURE); + const locale = new Intl.Locale(currentLanguage ? currentLanguage : UMB_DEFAULT_LOCALIZATION_CULTURE); const filteredExt = extensions.filter( (ext) => ext.meta.culture.toLowerCase() === locale.baseName.toLowerCase() || From d90c891a8d948eb958cc954c93bce9e3613df40d Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 11:45:22 +0200 Subject: [PATCH 05/21] chore: linting --- .../core/localization/registry/localization.registry.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/packages/core/localization/registry/localization.registry.ts b/src/packages/core/localization/registry/localization.registry.ts index d63cdce44b..60ac072049 100644 --- a/src/packages/core/localization/registry/localization.registry.ts +++ b/src/packages/core/localization/registry/localization.registry.ts @@ -1,7 +1,8 @@ import { - UmbLocalizationSetBase, - UmbLocalizationDictionary, - UmbLocalizationFlatDictionary, UMB_DEFAULT_LOCALIZATION_CULTURE + type UmbLocalizationSetBase, + type UmbLocalizationDictionary, + type UmbLocalizationFlatDictionary, + UMB_DEFAULT_LOCALIZATION_CULTURE } from "@umbraco-cms/backoffice/localization-api"; import { umbLocalizationManager } from '@umbraco-cms/backoffice/localization-api'; import type { ManifestLocalization, UmbBackofficeExtensionRegistry } from '@umbraco-cms/backoffice/extension-registry'; From 1148f85ff63dd65be1c0b6a3586faf2098abeceb Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 26 Jul 2024 11:50:11 +0200 Subject: [PATCH 06/21] fix: move assignment to state --- .../core/localization/registry/localization.registry.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/packages/core/localization/registry/localization.registry.ts b/src/packages/core/localization/registry/localization.registry.ts index 60ac072049..cc755ebd24 100644 --- a/src/packages/core/localization/registry/localization.registry.ts +++ b/src/packages/core/localization/registry/localization.registry.ts @@ -22,7 +22,7 @@ function addOrUpdateDictionary( } export class UmbLocalizationRegistry { - #currentLanguage = new UmbStringState(document.documentElement.lang ?? 'en-us'); + #currentLanguage = new UmbStringState(document.documentElement.lang !== '' ? document.documentElement.lang : UMB_DEFAULT_LOCALIZATION_CULTURE); readonly currentLanguage = this.#currentLanguage.asObservable(); #loadedExtAliases: Array = []; @@ -37,7 +37,7 @@ export class UmbLocalizationRegistry { constructor(extensionRegistry: UmbBackofficeExtensionRegistry) { combineLatest([this.currentLanguage, extensionRegistry.byType('localization')]).subscribe( async ([currentLanguage, extensions]) => { - const locale = new Intl.Locale(currentLanguage ? currentLanguage : UMB_DEFAULT_LOCALIZATION_CULTURE); + const locale = new Intl.Locale(currentLanguage); const filteredExt = extensions.filter( (ext) => ext.meta.culture.toLowerCase() === locale.baseName.toLowerCase() || From 9bb31d7feba231ef6beacd86fedebf8f5f71e93c Mon Sep 17 00:00:00 2001 From: Markus Johansson Date: Sat, 27 Jul 2024 15:55:00 +0200 Subject: [PATCH 07/21] Added example of modal route with issue --- examples/modal-routed/dashboard.element.ts | 72 +++++++++++++++++++ examples/modal-routed/dashboard2.element.ts | 36 ++++++++++ examples/modal-routed/index.ts | 48 +++++++++++++ .../modal-routed/modal/example-modal-token.ts | 15 ++++ .../modal/example-modal.element.ts | 66 +++++++++++++++++ .../steps/example-modal-step1.element.ts | 31 ++++++++ .../steps/example-modal-step2.element.ts | 31 ++++++++ examples/modal-routed/tabs/tab1.element.ts | 41 +++++++++++ examples/modal-routed/tabs/tab2.element.ts | 59 +++++++++++++++ 9 files changed, 399 insertions(+) create mode 100644 examples/modal-routed/dashboard.element.ts create mode 100644 examples/modal-routed/dashboard2.element.ts create mode 100644 examples/modal-routed/index.ts create mode 100644 examples/modal-routed/modal/example-modal-token.ts create mode 100644 examples/modal-routed/modal/example-modal.element.ts create mode 100644 examples/modal-routed/modal/steps/example-modal-step1.element.ts create mode 100644 examples/modal-routed/modal/steps/example-modal-step2.element.ts create mode 100644 examples/modal-routed/tabs/tab1.element.ts create mode 100644 examples/modal-routed/tabs/tab2.element.ts diff --git a/examples/modal-routed/dashboard.element.ts b/examples/modal-routed/dashboard.element.ts new file mode 100644 index 0000000000..b7d8714b7d --- /dev/null +++ b/examples/modal-routed/dashboard.element.ts @@ -0,0 +1,72 @@ +import { css, html, LitElement } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import { UmbModalRouteRegistrationController, UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; +import { EXAMPLE_ROUTED_MODAL } from './modal/example-modal-token'; + +@customElement('umb-dashboard') +export class UmbDashboardElement extends UmbElementMixin(LitElement) { + + #workspaceModal?: UmbModalRouteRegistrationController; + + @state() + private _routes: UmbRoute[] = [ + { + path: `/tab1`, + component: () => import('./tabs/tab1.element.js'), + setup: (component, info) => { + }, + }, + { + path: `/tab2`, + component: () => import('./tabs/tab2.element.js'), + setup: (component, info) => { + }, + }, + { + path: '', + redirectTo: 'tab1', + }, + ]; + + /** + * + */ + constructor() { + super(); + console.log('modal element loaded'); + } + + override render() { + return html` +
+ umb-example modal + +
+ { + console.log('modal routes init'); + }} + @change=${(event: UmbRouterSlotChangeEvent) => { + console.log('modal routes change'); + }}> +
+ `; + } + + static override styles = [UmbTextStyles, css``]; +} + +export default UmbDashboardElement + +declare global { + interface HTMLElementTagNameMap { + 'umb-dashboard': UmbDashboardElement; + } +} diff --git a/examples/modal-routed/dashboard2.element.ts b/examples/modal-routed/dashboard2.element.ts new file mode 100644 index 0000000000..cd08bae781 --- /dev/null +++ b/examples/modal-routed/dashboard2.element.ts @@ -0,0 +1,36 @@ +import { css, html, LitElement } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; +import { EXAMPLE_ROUTED_MODAL } from './modal/example-modal-token'; + +@customElement('umb-dashboard2') +export class UmbDashboard2Element extends UmbElementMixin(LitElement) { + + constructor() { + super(); + } + + override render() { + return html` +
+

Link to modal route

+

This page only shows how to link to the routed modal that is placed on a tab on the "Modal Dashboard". Clicking this link will not load the slots inside the modal, however, going to the "Modal Dashboard", clicking on tab 2 and opening the modal from there will work.

+ Open Modal Route +
+ ` + + } + + static override styles = [UmbTextStyles, css``]; +} + +export default UmbDashboard2Element + +declare global { + interface HTMLElementTagNameMap { + 'umb-dashboard2': UmbDashboard2Element; + } +} diff --git a/examples/modal-routed/index.ts b/examples/modal-routed/index.ts new file mode 100644 index 0000000000..21a3f2085e --- /dev/null +++ b/examples/modal-routed/index.ts @@ -0,0 +1,48 @@ +import { ManifestDashboard, ManifestModal, ManifestSection } from '@umbraco-cms/backoffice/extension-registry'; + +// const section : ManifestSection = { +// type: "section", +// alias: 'demo.section', +// name: "Demo Section", +// meta: { +// label: "Demo", +// pathname: "demo" +// } +// } + +let dashboard : ManifestDashboard = { + type: 'dashboard', + name: 'Example Modal Dashboard', + alias: 'example.dashboard.dataset', + element: () => import('./dashboard.element.js'), + weight: 15000, + meta: { + label: 'Modal Dashboard', + pathname: 'example', + }, +}; + +let dashboard2 : ManifestDashboard = { + type: 'dashboard', + name: 'Example Modal Dashboard2', + alias: 'example.dashboard.dataset2', + element: () => import('./dashboard2.element.js'), + weight: 15001, + meta: { + label: 'Link Dashboard', + pathname: 'example-2', + }, +}; + +const modal : ManifestModal = { + type: 'modal', + name: 'Example Modal', + alias: 'example.routed.modal', + element : () => import('./modal/example-modal.element.js'), +}; + +export const manifests = [ + dashboard, + dashboard2, + modal +]; diff --git a/examples/modal-routed/modal/example-modal-token.ts b/examples/modal-routed/modal/example-modal-token.ts new file mode 100644 index 0000000000..0668cd9993 --- /dev/null +++ b/examples/modal-routed/modal/example-modal-token.ts @@ -0,0 +1,15 @@ +import { UmbModalToken } from "@umbraco-cms/backoffice/modal"; + +export type Data = {} +export type RetData = {} + +export const EXAMPLE_ROUTED_MODAL = new UmbModalToken< +Data, +RetData +>('example.routed.modal', // this needs to match the alias of the modal registered in manifest.ts +{ + modal : { + type : 'dialog', + size : 'full' + } +}); diff --git a/examples/modal-routed/modal/example-modal.element.ts b/examples/modal-routed/modal/example-modal.element.ts new file mode 100644 index 0000000000..25992faf05 --- /dev/null +++ b/examples/modal-routed/modal/example-modal.element.ts @@ -0,0 +1,66 @@ +import { css, html, LitElement } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; +import { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; + +@customElement('umb-example-modal') +export class UmbExampleModal extends UmbModalBaseElement { + + @state() + private _routes: UmbRoute[] = [ + { + path: `/overview`, + component: () => import('./steps/example-modal-step1.element.js'), + setup: (component, info) => { + }, + }, + { + path: `/details`, + component: () => import('./steps/example-modal-step2.element.js'), + setup: (component, info) => { + }, + }, + { + path: '', + redirectTo: 'overview', + }, + ]; + + /** + * + */ + constructor() { + super(); + console.log('modal element loaded'); + } + + override render() { + return html` +
+ umb-example modal +
+ { + console.log('modal routes init'); + }} + @change=${(event: UmbRouterSlotChangeEvent) => { + console.log('modal routes change'); + }}> +
+ `; + } + + static override styles = [UmbTextStyles, css``]; +} + +export default UmbExampleModal; + +declare global { + interface HTMLElementTagNameMap { + 'umb-example-modal': UmbExampleModal; + } +} diff --git a/examples/modal-routed/modal/steps/example-modal-step1.element.ts b/examples/modal-routed/modal/steps/example-modal-step1.element.ts new file mode 100644 index 0000000000..35f39147fd --- /dev/null +++ b/examples/modal-routed/modal/steps/example-modal-step1.element.ts @@ -0,0 +1,31 @@ +import { css, html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; +import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; + +@customElement('umb-example-modal-step1') +export class UmbExampleModalStep1 extends UmbModalBaseElement { + + override render() { + return html` +
+ example modal step1 + + +
+ `; + } + + static override styles = [UmbTextStyles, css``]; +} + +export default UmbExampleModalStep1; + +declare global { + interface HTMLElementTagNameMap { + 'umb-example-modal-step1': UmbExampleModalStep1; + } +} diff --git a/examples/modal-routed/modal/steps/example-modal-step2.element.ts b/examples/modal-routed/modal/steps/example-modal-step2.element.ts new file mode 100644 index 0000000000..32dadca5b8 --- /dev/null +++ b/examples/modal-routed/modal/steps/example-modal-step2.element.ts @@ -0,0 +1,31 @@ +import { css, html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; +import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; + +@customElement('umb-example-modal-step2') +export class UmbExampleModalStep2 extends UmbModalBaseElement { + + override render() { + return html` +
+ example modal step1 + + +
+ `; + } + + static override styles = [UmbTextStyles, css``]; +} + +export default UmbExampleModalStep2; + +declare global { + interface HTMLElementTagNameMap { + 'umb-example-modal-step2': UmbExampleModalStep2; + } +} diff --git a/examples/modal-routed/tabs/tab1.element.ts b/examples/modal-routed/tabs/tab1.element.ts new file mode 100644 index 0000000000..1c361976a0 --- /dev/null +++ b/examples/modal-routed/tabs/tab1.element.ts @@ -0,0 +1,41 @@ +import { css, html, LitElement } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; +import { EXAMPLE_ROUTED_MODAL } from './modal/example-modal-token'; + +@customElement('umb-dashboard-tab1') +export class UmbDashboardTab1Element extends UmbElementMixin(LitElement) { + + #workspaceModal?: UmbModalRouteRegistrationController; + + @state() + _editLinkPath?: string; + + constructor() { + super(); + + } + + override render() { + return html` +
+

tab 1

+ +
+ ` + + } + + static override styles = [UmbTextStyles, css``]; +} + +export default UmbDashboardTab1Element + +declare global { + interface UmbDashboardTab1Element { + 'umb-dashboard-tab1': UmbDashboardTab1Element; + } +} diff --git a/examples/modal-routed/tabs/tab2.element.ts b/examples/modal-routed/tabs/tab2.element.ts new file mode 100644 index 0000000000..85c761a461 --- /dev/null +++ b/examples/modal-routed/tabs/tab2.element.ts @@ -0,0 +1,59 @@ +import { css, html, LitElement } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; +import { EXAMPLE_ROUTED_MODAL } from './../modal/example-modal-token'; + +@customElement('umb-dashboard-tab2') +export class UmbDashboardTab2Element extends UmbElementMixin(LitElement) { + + #workspaceModal?: UmbModalRouteRegistrationController; + + @state() + _editLinkPath?: string; + + constructor() { + super(); + + // Using workspace modal context + this.#workspaceModal?.destroy(); + this.#workspaceModal = new UmbModalRouteRegistrationController(this, EXAMPLE_ROUTED_MODAL) + .addAdditionalPath('view/:entityKey') + .onSetup(() => { + return { + data: {}, + value: {} + }; + }) + .observeRouteBuilder((routeBuilder) => { + this._editLinkPath = routeBuilder({entityKey : 'abc123'}); + }); + } + + override render() { + return html` +
+

tab 2

+

This element hosts the UmbModalRouteRegistrationController

+ + Open modal +
+ + Path: ${this._editLinkPath} +
+ ` + + } + + static override styles = [UmbTextStyles, css``]; +} + +export default UmbDashboardTab2Element + +declare global { + interface UmbDashboardTab2Element { + 'umb-dashboard-tab2': UmbDashboardTab2Element; + } +} From e474e72c611f58d2f791a346dc8844a324f2c60f Mon Sep 17 00:00:00 2001 From: Markus Johansson Date: Sat, 27 Jul 2024 16:43:43 +0200 Subject: [PATCH 08/21] #16834 potential fix for um-router-slot --- examples/modal-routed/dashboard.element.ts | 2 +- .../modal/example-modal.element.ts | 49 ++++++++++++------- .../core/router/router-slot.element.ts | 4 ++ 3 files changed, 37 insertions(+), 18 deletions(-) diff --git a/examples/modal-routed/dashboard.element.ts b/examples/modal-routed/dashboard.element.ts index b7d8714b7d..add1ec69de 100644 --- a/examples/modal-routed/dashboard.element.ts +++ b/examples/modal-routed/dashboard.element.ts @@ -51,7 +51,7 @@ export class UmbDashboardElement extends UmbElementMixin(LitElement) { { - console.log('modal routes init'); + console.log('tab routes init'); }} @change=${(event: UmbRouterSlotChangeEvent) => { console.log('modal routes change'); diff --git a/examples/modal-routed/modal/example-modal.element.ts b/examples/modal-routed/modal/example-modal.element.ts index 25992faf05..a36ba43bc5 100644 --- a/examples/modal-routed/modal/example-modal.element.ts +++ b/examples/modal-routed/modal/example-modal.element.ts @@ -11,22 +11,7 @@ export class UmbExampleModal extends UmbModalBaseElement { @state() private _routes: UmbRoute[] = [ - { - path: `/overview`, - component: () => import('./steps/example-modal-step1.element.js'), - setup: (component, info) => { - }, - }, - { - path: `/details`, - component: () => import('./steps/example-modal-step2.element.js'), - setup: (component, info) => { - }, - }, - { - path: '', - redirectTo: 'overview', - }, + ]; /** @@ -37,6 +22,36 @@ export class UmbExampleModal extends UmbModalBaseElement { console.log('modal element loaded'); } + override connectedCallback(): void { + super.connectedCallback(); + this._routes = [{ + path: `/overview`, + component: () => import('./steps/example-modal-step1.element.js'), + setup: (component, info) => { + }, + }, + { + path: `/details`, + component: () => import('./steps/example-modal-step2.element.js'), + setup: (component, info) => { + }, + }, + { + path: '', + redirectTo: 'overview', + }, + { + path: '', + redirectTo: 'test', + } +]; + + setTimeout(()=>{ + //this._routes = [this._routes[0],this._routes[1],this._routes[2]] + },20); + + } + override render() { return html`
@@ -45,7 +60,7 @@ export class UmbExampleModal extends UmbModalBaseElement { { - console.log('modal routes init'); + console.log('modal route init fired'); }} @change=${(event: UmbRouterSlotChangeEvent) => { console.log('modal routes change'); diff --git a/src/packages/core/router/router-slot.element.ts b/src/packages/core/router/router-slot.element.ts index ae9f336236..2ca1edb543 100644 --- a/src/packages/core/router/router-slot.element.ts +++ b/src/packages/core/router/router-slot.element.ts @@ -97,6 +97,10 @@ export class UmbRouterSlotElement extends UmbLitElement { this._routerPath = this._constructAbsoluteRouterPath(); this.#routeContext._internal_routerGotBasePath(this._routerPath); this.dispatchEvent(new UmbRouterSlotInitEvent()); + const newActiveLocalPath = this._constructLocalRouterPath(); + if (this._activeLocalPath !== newActiveLocalPath) { + this.#router.routes = [...this.#router.routes]; + } } protected _updateRouterPath() { From e8a65c8f0cb4f4cbc754e378d816bb19e7932a09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 6 Aug 2024 10:19:24 +0200 Subject: [PATCH 09/21] clean up --- examples/modal-routed/dashboard.element.ts | 67 ++++++++---------- examples/modal-routed/dashboard2.element.ts | 38 +++++----- .../modal/example-modal.element.ts | 70 ++++++++----------- .../steps/example-modal-step1.element.ts | 15 +--- .../steps/example-modal-step2.element.ts | 17 +---- 5 files changed, 85 insertions(+), 122 deletions(-) diff --git a/examples/modal-routed/dashboard.element.ts b/examples/modal-routed/dashboard.element.ts index add1ec69de..a4b1cd73d1 100644 --- a/examples/modal-routed/dashboard.element.ts +++ b/examples/modal-routed/dashboard.element.ts @@ -1,35 +1,30 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { css, html, LitElement, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; -import { UmbModalRouteRegistrationController, UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; -import { EXAMPLE_ROUTED_MODAL } from './modal/example-modal-token'; +import type { + UmbModalRouteRegistrationController, + UmbRoute, + UmbRouterSlotChangeEvent, + UmbRouterSlotInitEvent, +} from '@umbraco-cms/backoffice/router'; @customElement('umb-dashboard') export class UmbDashboardElement extends UmbElementMixin(LitElement) { - - #workspaceModal?: UmbModalRouteRegistrationController; - - @state() - private _routes: UmbRoute[] = [ - { - path: `/tab1`, - component: () => import('./tabs/tab1.element.js'), - setup: (component, info) => { - }, - }, - { - path: `/tab2`, - component: () => import('./tabs/tab2.element.js'), - setup: (component, info) => { - }, - }, - { - path: '', - redirectTo: 'tab1', - }, - ]; + @state() + private _routes: UmbRoute[] = [ + { + path: `/tab1`, + component: () => import('./tabs/tab1.element.js'), + }, + { + path: `/tab2`, + component: () => import('./tabs/tab2.element.js'), + }, + { + path: '', + redirectTo: 'tab1', + }, + ]; /** * @@ -47,15 +42,15 @@ export class UmbDashboardElement extends UmbElementMixin(LitElement) {
  • Tab 1
  • Tab 2 (with modal)
    • -
    +
    { - console.log('tab routes init'); - }} - @change=${(event: UmbRouterSlotChangeEvent) => { - console.log('modal routes change'); - }}> + .routes=${this._routes} + @init=${(event: UmbRouterSlotInitEvent) => { + console.log('tab routes init', event); + }} + @change=${(event: UmbRouterSlotChangeEvent) => { + console.log('modal routes change', event); + }}>
    `; } @@ -63,7 +58,7 @@ export class UmbDashboardElement extends UmbElementMixin(LitElement) { static override styles = [UmbTextStyles, css``]; } -export default UmbDashboardElement +export default UmbDashboardElement; declare global { interface HTMLElementTagNameMap { diff --git a/examples/modal-routed/dashboard2.element.ts b/examples/modal-routed/dashboard2.element.ts index cd08bae781..aedf64759c 100644 --- a/examples/modal-routed/dashboard2.element.ts +++ b/examples/modal-routed/dashboard2.element.ts @@ -1,33 +1,33 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; -import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; -import { EXAMPLE_ROUTED_MODAL } from './modal/example-modal-token'; @customElement('umb-dashboard2') export class UmbDashboard2Element extends UmbElementMixin(LitElement) { - - constructor() { - super(); + constructor() { + super(); } - override render() { - return html` -
    -

    Link to modal route

    -

    This page only shows how to link to the routed modal that is placed on a tab on the "Modal Dashboard". Clicking this link will not load the slots inside the modal, however, going to the "Modal Dashboard", clicking on tab 2 and opening the modal from there will work.

    - Open Modal Route -
    - ` - - } + override render() { + return html` +
    +

    Link to modal route

    +

    + This page only shows how to link to the routed modal that is placed on a tab on the "Modal Dashboard". + Clicking this link will not load the slots inside the modal, however, going to the "Modal Dashboard", clicking + on tab 2 and opening the modal from there will work. +

    + Open Modal Route +
    + `; + } static override styles = [UmbTextStyles, css``]; } -export default UmbDashboard2Element +export default UmbDashboard2Element; declare global { interface HTMLElementTagNameMap { diff --git a/examples/modal-routed/modal/example-modal.element.ts b/examples/modal-routed/modal/example-modal.element.ts index a36ba43bc5..a0d71b8ff4 100644 --- a/examples/modal-routed/modal/example-modal.element.ts +++ b/examples/modal-routed/modal/example-modal.element.ts @@ -1,18 +1,12 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; -import { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; +import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; @customElement('umb-example-modal') export class UmbExampleModal extends UmbModalBaseElement { - @state() - private _routes: UmbRoute[] = [ - - ]; + private _routes: UmbRoute[] = []; /** * @@ -24,47 +18,43 @@ export class UmbExampleModal extends UmbModalBaseElement { override connectedCallback(): void { super.connectedCallback(); - this._routes = [{ - path: `/overview`, - component: () => import('./steps/example-modal-step1.element.js'), - setup: (component, info) => { + this._routes = [ + { + path: `/overview`, + component: () => import('./steps/example-modal-step1.element.js'), }, - }, - { - path: `/details`, - component: () => import('./steps/example-modal-step2.element.js'), - setup: (component, info) => { + { + path: `/details`, + component: () => import('./steps/example-modal-step2.element.js'), }, - }, - { - path: '', - redirectTo: 'overview', - }, - { - path: '', - redirectTo: 'test', - } -]; - - setTimeout(()=>{ - //this._routes = [this._routes[0],this._routes[1],this._routes[2]] - },20); + { + path: '', + redirectTo: 'overview', + }, + { + path: '', + redirectTo: 'test', + }, + ]; + setTimeout(() => { + //this._routes = [this._routes[0],this._routes[1],this._routes[2]] + }, 20); } override render() { return html`
    umb-example modal -
    +
    { - console.log('modal route init fired'); - }} - @change=${(event: UmbRouterSlotChangeEvent) => { - console.log('modal routes change'); - }}> + .routes=${this._routes} + @init=${(event: UmbRouterSlotInitEvent) => { + console.log('modal route init fired', event); + }} + @change=${(event: UmbRouterSlotChangeEvent) => { + console.log('modal routes change', event); + }}>
    `; } diff --git a/examples/modal-routed/modal/steps/example-modal-step1.element.ts b/examples/modal-routed/modal/steps/example-modal-step1.element.ts index 35f39147fd..9098546e6a 100644 --- a/examples/modal-routed/modal/steps/example-modal-step1.element.ts +++ b/examples/modal-routed/modal/steps/example-modal-step1.element.ts @@ -1,22 +1,11 @@ -import { css, html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; -import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; @customElement('umb-example-modal-step1') export class UmbExampleModalStep1 extends UmbModalBaseElement { - override render() { - return html` -
    - example modal step1 - - -
    - `; + return html`
    example modal step1
    `; } static override styles = [UmbTextStyles, css``]; diff --git a/examples/modal-routed/modal/steps/example-modal-step2.element.ts b/examples/modal-routed/modal/steps/example-modal-step2.element.ts index 32dadca5b8..c6a9f6a5d5 100644 --- a/examples/modal-routed/modal/steps/example-modal-step2.element.ts +++ b/examples/modal-routed/modal/steps/example-modal-step2.element.ts @@ -1,25 +1,14 @@ -import { css, html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { html, customElement } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; -import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; @customElement('umb-example-modal-step2') export class UmbExampleModalStep2 extends UmbModalBaseElement { - override render() { - return html` -
    - example modal step1 - - -
    - `; + return html`
    example modal step1
    `; } - static override styles = [UmbTextStyles, css``]; + static override styles = [UmbTextStyles]; } export default UmbExampleModalStep2; From 054cf53076718a28e1c60e972dd205eb0b74815b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 6 Aug 2024 10:20:56 +0200 Subject: [PATCH 10/21] more clean up --- examples/modal-routed/dashboard.element.ts | 7 +-- examples/modal-routed/tabs/tab1.element.ts | 36 +++++------- examples/modal-routed/tabs/tab2.element.ts | 68 ++++++++++------------ 3 files changed, 46 insertions(+), 65 deletions(-) diff --git a/examples/modal-routed/dashboard.element.ts b/examples/modal-routed/dashboard.element.ts index a4b1cd73d1..6fcae676ba 100644 --- a/examples/modal-routed/dashboard.element.ts +++ b/examples/modal-routed/dashboard.element.ts @@ -1,12 +1,7 @@ import { css, html, LitElement, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; -import type { - UmbModalRouteRegistrationController, - UmbRoute, - UmbRouterSlotChangeEvent, - UmbRouterSlotInitEvent, -} from '@umbraco-cms/backoffice/router'; +import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; @customElement('umb-dashboard') export class UmbDashboardElement extends UmbElementMixin(LitElement) { diff --git a/examples/modal-routed/tabs/tab1.element.ts b/examples/modal-routed/tabs/tab1.element.ts index 1c361976a0..463b31824e 100644 --- a/examples/modal-routed/tabs/tab1.element.ts +++ b/examples/modal-routed/tabs/tab1.element.ts @@ -1,38 +1,28 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { css, html, LitElement, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; -import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; -import { EXAMPLE_ROUTED_MODAL } from './modal/example-modal-token'; @customElement('umb-dashboard-tab1') export class UmbDashboardTab1Element extends UmbElementMixin(LitElement) { - - #workspaceModal?: UmbModalRouteRegistrationController; - - @state() + @state() _editLinkPath?: string; - constructor() { - super(); - - } - - override render() { - return html` -
    -

    tab 1

    - -
    - ` + constructor() { + super(); + } - } + override render() { + return html` +
    +

    tab 1

    +
    + `; + } static override styles = [UmbTextStyles, css``]; } -export default UmbDashboardTab1Element +export default UmbDashboardTab1Element; declare global { interface UmbDashboardTab1Element { diff --git a/examples/modal-routed/tabs/tab2.element.ts b/examples/modal-routed/tabs/tab2.element.ts index 85c761a461..11799d01b0 100644 --- a/examples/modal-routed/tabs/tab2.element.ts +++ b/examples/modal-routed/tabs/tab2.element.ts @@ -1,56 +1,52 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { EXAMPLE_ROUTED_MODAL } from '../modal/example-modal-token.js'; +import { css, html, LitElement, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; -import { EXAMPLE_ROUTED_MODAL } from './../modal/example-modal-token'; @customElement('umb-dashboard-tab2') export class UmbDashboardTab2Element extends UmbElementMixin(LitElement) { - #workspaceModal?: UmbModalRouteRegistrationController; - @state() + @state() _editLinkPath?: string; - constructor() { - super(); - - // Using workspace modal context - this.#workspaceModal?.destroy(); - this.#workspaceModal = new UmbModalRouteRegistrationController(this, EXAMPLE_ROUTED_MODAL) - .addAdditionalPath('view/:entityKey') - .onSetup(() => { - return { - data: {}, - value: {} - }; - }) - .observeRouteBuilder((routeBuilder) => { - this._editLinkPath = routeBuilder({entityKey : 'abc123'}); - }); - } - - override render() { - return html` -
    -

    tab 2

    -

    This element hosts the UmbModalRouteRegistrationController

    + constructor() { + super(); + + // Using workspace modal context + this.#workspaceModal?.destroy(); + this.#workspaceModal = new UmbModalRouteRegistrationController(this, EXAMPLE_ROUTED_MODAL) + .addAdditionalPath('view/:entityKey') + .onSetup(() => { + return { + data: {}, + value: {}, + }; + }) + .observeRouteBuilder((routeBuilder) => { + this._editLinkPath = routeBuilder({ entityKey: 'abc123' }); + }); + } - Open modal -
    + override render() { + return html` +
    +

    tab 2

    +

    This element hosts the UmbModalRouteRegistrationController

    - Path: ${this._editLinkPath} -
    - ` + Open modal +
    - } + Path: ${this._editLinkPath} +
    + `; + } static override styles = [UmbTextStyles, css``]; } -export default UmbDashboardTab2Element +export default UmbDashboardTab2Element; declare global { interface UmbDashboardTab2Element { From 6f8a9ab573e6fc0728cf35ffda1338f0bd345735 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 6 Aug 2024 10:21:28 +0200 Subject: [PATCH 11/21] remove test route --- examples/modal-routed/modal/example-modal.element.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/examples/modal-routed/modal/example-modal.element.ts b/examples/modal-routed/modal/example-modal.element.ts index a0d71b8ff4..312f9a8013 100644 --- a/examples/modal-routed/modal/example-modal.element.ts +++ b/examples/modal-routed/modal/example-modal.element.ts @@ -31,10 +31,6 @@ export class UmbExampleModal extends UmbModalBaseElement { path: '', redirectTo: 'overview', }, - { - path: '', - redirectTo: 'test', - }, ]; setTimeout(() => { From 0a00aad2908c2e727a03bcc712ec40da2058a0e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 6 Aug 2024 10:21:43 +0200 Subject: [PATCH 12/21] remove timeout --- examples/modal-routed/modal/example-modal.element.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/examples/modal-routed/modal/example-modal.element.ts b/examples/modal-routed/modal/example-modal.element.ts index 312f9a8013..8b0f4ad60e 100644 --- a/examples/modal-routed/modal/example-modal.element.ts +++ b/examples/modal-routed/modal/example-modal.element.ts @@ -32,10 +32,6 @@ export class UmbExampleModal extends UmbModalBaseElement { redirectTo: 'overview', }, ]; - - setTimeout(() => { - //this._routes = [this._routes[0],this._routes[1],this._routes[2]] - }, 20); } override render() { From cc2af6217a01e054028cb79a652d6939462f182b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 6 Aug 2024 10:25:19 +0200 Subject: [PATCH 13/21] prettier --- .../modal-routed/modal/example-modal-token.ts | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/examples/modal-routed/modal/example-modal-token.ts b/examples/modal-routed/modal/example-modal-token.ts index 0668cd9993..e9092a0b32 100644 --- a/examples/modal-routed/modal/example-modal-token.ts +++ b/examples/modal-routed/modal/example-modal-token.ts @@ -1,15 +1,14 @@ -import { UmbModalToken } from "@umbraco-cms/backoffice/modal"; +import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; -export type Data = {} -export type RetData = {} +export type Data = object; +export type RetData = object; -export const EXAMPLE_ROUTED_MODAL = new UmbModalToken< -Data, -RetData ->('example.routed.modal', // this needs to match the alias of the modal registered in manifest.ts -{ - modal : { - type : 'dialog', - size : 'full' - } -}); +export const EXAMPLE_ROUTED_MODAL = new UmbModalToken( + 'example.routed.modal', // this needs to match the alias of the modal registered in manifest.ts + { + modal: { + type: 'dialog', + size: 'full', + }, + }, +); From f4cdd57f5b8d8a38eb2dd17dc78fdd0e12b275ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 6 Aug 2024 10:29:39 +0200 Subject: [PATCH 14/21] more corrections --- examples/modal-routed/index.ts | 22 ++++++++----------- .../modal-routed/modal/example-modal-token.ts | 1 - .../modal/example-modal.element.ts | 4 ++-- .../steps/example-modal-step2.element.ts | 2 +- 4 files changed, 12 insertions(+), 17 deletions(-) diff --git a/examples/modal-routed/index.ts b/examples/modal-routed/index.ts index 21a3f2085e..5aca09fe79 100644 --- a/examples/modal-routed/index.ts +++ b/examples/modal-routed/index.ts @@ -1,4 +1,4 @@ -import { ManifestDashboard, ManifestModal, ManifestSection } from '@umbraco-cms/backoffice/extension-registry'; +import type { ManifestDashboard, ManifestModal } from '@umbraco-cms/backoffice/extension-registry'; // const section : ManifestSection = { // type: "section", @@ -10,7 +10,7 @@ import { ManifestDashboard, ManifestModal, ManifestSection } from '@umbraco-cms/ // } // } -let dashboard : ManifestDashboard = { +const dashboard: ManifestDashboard = { type: 'dashboard', name: 'Example Modal Dashboard', alias: 'example.dashboard.dataset', @@ -22,7 +22,7 @@ let dashboard : ManifestDashboard = { }, }; -let dashboard2 : ManifestDashboard = { +const dashboard2: ManifestDashboard = { type: 'dashboard', name: 'Example Modal Dashboard2', alias: 'example.dashboard.dataset2', @@ -34,15 +34,11 @@ let dashboard2 : ManifestDashboard = { }, }; -const modal : ManifestModal = { - type: 'modal', - name: 'Example Modal', - alias: 'example.routed.modal', - element : () => import('./modal/example-modal.element.js'), +const modal: ManifestModal = { + type: 'modal', + name: 'Example Modal', + alias: 'example.routed.modal', + element: () => import('./modal/example-modal.element.js'), }; -export const manifests = [ - dashboard, - dashboard2, - modal -]; +export const manifests = [dashboard, dashboard2, modal]; diff --git a/examples/modal-routed/modal/example-modal-token.ts b/examples/modal-routed/modal/example-modal-token.ts index e9092a0b32..b44e2f4ae9 100644 --- a/examples/modal-routed/modal/example-modal-token.ts +++ b/examples/modal-routed/modal/example-modal-token.ts @@ -8,7 +8,6 @@ export const EXAMPLE_ROUTED_MODAL = new UmbModalToken( { modal: { type: 'dialog', - size: 'full', }, }, ); diff --git a/examples/modal-routed/modal/example-modal.element.ts b/examples/modal-routed/modal/example-modal.element.ts index 8b0f4ad60e..df982abe9e 100644 --- a/examples/modal-routed/modal/example-modal.element.ts +++ b/examples/modal-routed/modal/example-modal.element.ts @@ -20,11 +20,11 @@ export class UmbExampleModal extends UmbModalBaseElement { super.connectedCallback(); this._routes = [ { - path: `/overview`, + path: `overview`, component: () => import('./steps/example-modal-step1.element.js'), }, { - path: `/details`, + path: `details`, component: () => import('./steps/example-modal-step2.element.js'), }, { diff --git a/examples/modal-routed/modal/steps/example-modal-step2.element.ts b/examples/modal-routed/modal/steps/example-modal-step2.element.ts index c6a9f6a5d5..ea5c711b25 100644 --- a/examples/modal-routed/modal/steps/example-modal-step2.element.ts +++ b/examples/modal-routed/modal/steps/example-modal-step2.element.ts @@ -5,7 +5,7 @@ import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; @customElement('umb-example-modal-step2') export class UmbExampleModalStep2 extends UmbModalBaseElement { override render() { - return html`
    example modal step1
    `; + return html`
    example modal step2
    `; } static override styles = [UmbTextStyles]; From 13bceb0a2738b91e1f090612a1ab35e3e7944ea6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 6 Aug 2024 10:32:11 +0200 Subject: [PATCH 15/21] note --- examples/modal-routed/modal/example-modal.element.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/examples/modal-routed/modal/example-modal.element.ts b/examples/modal-routed/modal/example-modal.element.ts index df982abe9e..453935be03 100644 --- a/examples/modal-routed/modal/example-modal.element.ts +++ b/examples/modal-routed/modal/example-modal.element.ts @@ -27,10 +27,11 @@ export class UmbExampleModal extends UmbModalBaseElement { path: `details`, component: () => import('./steps/example-modal-step2.element.js'), }, - { + // NL: There is a problem with this one, but there is more problems as the modal does not close when navigating the browser history. + /*{ path: '', redirectTo: 'overview', - }, + },*/ ]; } From 82de9c697d95033bdeeab5ea7e663ee43744ea1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 7 Nov 2024 15:45:45 +0100 Subject: [PATCH 16/21] clean up --- examples/modal-routed/dashboard.element.ts | 19 +------ examples/modal-routed/dashboard2.element.ts | 4 +- .../modal/example-modal.element.ts | 53 ++++++------------- 3 files changed, 19 insertions(+), 57 deletions(-) diff --git a/examples/modal-routed/dashboard.element.ts b/examples/modal-routed/dashboard.element.ts index 6fcae676ba..9794dcb785 100644 --- a/examples/modal-routed/dashboard.element.ts +++ b/examples/modal-routed/dashboard.element.ts @@ -21,31 +21,16 @@ export class UmbDashboardElement extends UmbElementMixin(LitElement) { }, ]; - /** - * - */ - constructor() { - super(); - console.log('modal element loaded'); - } - override render() { return html`
    - umb-example modal + Dashboard 1
    - { - console.log('tab routes init', event); - }} - @change=${(event: UmbRouterSlotChangeEvent) => { - console.log('modal routes change', event); - }}> +
    `; } diff --git a/examples/modal-routed/dashboard2.element.ts b/examples/modal-routed/dashboard2.element.ts index aedf64759c..2a3f02e7bf 100644 --- a/examples/modal-routed/dashboard2.element.ts +++ b/examples/modal-routed/dashboard2.element.ts @@ -17,9 +17,7 @@ export class UmbDashboard2Element extends UmbElementMixin(LitElement) { Clicking this link will not load the slots inside the modal, however, going to the "Modal Dashboard", clicking on tab 2 and opening the modal from there will work.

    - Open Modal Route + Open Modal Route `; } diff --git a/examples/modal-routed/modal/example-modal.element.ts b/examples/modal-routed/modal/example-modal.element.ts index 453935be03..29f70ed38e 100644 --- a/examples/modal-routed/modal/example-modal.element.ts +++ b/examples/modal-routed/modal/example-modal.element.ts @@ -6,48 +6,27 @@ import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from @customElement('umb-example-modal') export class UmbExampleModal extends UmbModalBaseElement { @state() - private _routes: UmbRoute[] = []; - - /** - * - */ - constructor() { - super(); - console.log('modal element loaded'); - } - - override connectedCallback(): void { - super.connectedCallback(); - this._routes = [ - { - path: `overview`, - component: () => import('./steps/example-modal-step1.element.js'), - }, - { - path: `details`, - component: () => import('./steps/example-modal-step2.element.js'), - }, - // NL: There is a problem with this one, but there is more problems as the modal does not close when navigating the browser history. - /*{ - path: '', - redirectTo: 'overview', - },*/ - ]; - } + private _routes: UmbRoute[] = [ + { + path: `overview`, + component: () => import('./steps/example-modal-step1.element.js'), + }, + { + path: `details`, + component: () => import('./steps/example-modal-step2.element.js'), + }, + { + path: '', + redirectTo: 'overview', + }, + ]; override render() { return html`
    - umb-example modal + umb-example modal element
    - { - console.log('modal route init fired', event); - }} - @change=${(event: UmbRouterSlotChangeEvent) => { - console.log('modal routes change', event); - }}> +
    `; } From f8e6648e015e092e24684c4ad3f03f3946f1ed06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 7 Nov 2024 15:46:08 +0100 Subject: [PATCH 17/21] fix firstUpdated callback in case where parent is also newly created --- src/external/router-slot/router-slot.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/external/router-slot/router-slot.ts b/src/external/router-slot/router-slot.ts index 06fddd335b..b93152ba63 100644 --- a/src/external/router-slot/router-slot.ts +++ b/src/external/router-slot/router-slot.ts @@ -162,9 +162,11 @@ export class RouterSlot extends HTMLElement implements IRouter this._setParent(null); } } - if (this.parent && this.parent.match !== null && this.match === null) { + if (this.parent) { requestAnimationFrame(() => { - this.render(); + if (this.parent && this.parent.match !== null && this.match === null) { + this.render(); + } }); } } From eb90d8dcddecce053aa38a829325e7222869eaa5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 7 Nov 2024 15:46:21 +0100 Subject: [PATCH 18/21] call _updateRouterPath --- src/packages/core/router/router-slot.element.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/packages/core/router/router-slot.element.ts b/src/packages/core/router/router-slot.element.ts index f1dab85e56..e2bc6353c9 100644 --- a/src/packages/core/router/router-slot.element.ts +++ b/src/packages/core/router/router-slot.element.ts @@ -94,13 +94,7 @@ export class UmbRouterSlotElement extends UmbLitElement { protected override firstUpdated(_changedProperties: PropertyValueMap | Map): void { super.firstUpdated(_changedProperties); - this._routerPath = this._constructAbsoluteRouterPath(); - this.#routeContext._internal_routerGotBasePath(this._routerPath); - this.dispatchEvent(new UmbRouterSlotInitEvent()); - const newActiveLocalPath = this._constructLocalRouterPath(); - if (this._activeLocalPath !== newActiveLocalPath) { - this.#router.routes = [...this.#router.routes]; - } + this._updateRouterPath(); } protected _updateRouterPath() { From f6ed4d2aa16382b8d86641a56d0ab36625259f90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 7 Nov 2024 15:55:34 +0100 Subject: [PATCH 19/21] clean up --- examples/modal-routed/dashboard.element.ts | 2 +- examples/modal-routed/modal/example-modal-token.ts | 4 ++-- examples/modal-routed/modal/example-modal.element.ts | 6 +++--- examples/modal-routed/tabs/tab2.element.ts | 5 ++++- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/examples/modal-routed/dashboard.element.ts b/examples/modal-routed/dashboard.element.ts index 9794dcb785..967a4a7a88 100644 --- a/examples/modal-routed/dashboard.element.ts +++ b/examples/modal-routed/dashboard.element.ts @@ -1,7 +1,7 @@ import { css, html, LitElement, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; -import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; +import type { UmbRoute } from '@umbraco-cms/backoffice/router'; @customElement('umb-dashboard') export class UmbDashboardElement extends UmbElementMixin(LitElement) { diff --git a/examples/modal-routed/modal/example-modal-token.ts b/examples/modal-routed/modal/example-modal-token.ts index b44e2f4ae9..1755a7ef3a 100644 --- a/examples/modal-routed/modal/example-modal-token.ts +++ b/examples/modal-routed/modal/example-modal-token.ts @@ -1,9 +1,9 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; export type Data = object; -export type RetData = object; +export type ModalValue = object; -export const EXAMPLE_ROUTED_MODAL = new UmbModalToken( +export const EXAMPLE_ROUTED_MODAL = new UmbModalToken( 'example.routed.modal', // this needs to match the alias of the modal registered in manifest.ts { modal: { diff --git a/examples/modal-routed/modal/example-modal.element.ts b/examples/modal-routed/modal/example-modal.element.ts index 29f70ed38e..e1f0f5bdd4 100644 --- a/examples/modal-routed/modal/example-modal.element.ts +++ b/examples/modal-routed/modal/example-modal.element.ts @@ -1,14 +1,14 @@ import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; -import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; +import type { UmbRoute } from '@umbraco-cms/backoffice/router'; @customElement('umb-example-modal') export class UmbExampleModal extends UmbModalBaseElement { @state() private _routes: UmbRoute[] = [ { - path: `overview`, + path: `modalOverview`, component: () => import('./steps/example-modal-step1.element.js'), }, { @@ -17,7 +17,7 @@ export class UmbExampleModal extends UmbModalBaseElement { }, { path: '', - redirectTo: 'overview', + redirectTo: 'modalOverview', }, ]; diff --git a/examples/modal-routed/tabs/tab2.element.ts b/examples/modal-routed/tabs/tab2.element.ts index 11799d01b0..7dca0365ac 100644 --- a/examples/modal-routed/tabs/tab2.element.ts +++ b/examples/modal-routed/tabs/tab2.element.ts @@ -6,7 +6,10 @@ import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/rou @customElement('umb-dashboard-tab2') export class UmbDashboardTab2Element extends UmbElementMixin(LitElement) { - #workspaceModal?: UmbModalRouteRegistrationController; + #workspaceModal?: UmbModalRouteRegistrationController< + typeof EXAMPLE_ROUTED_MODAL.DATA, + typeof EXAMPLE_ROUTED_MODAL.VALUE + >; @state() _editLinkPath?: string; From 9beab6a502cfacc925e01a95166567d34c3820b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 7 Nov 2024 16:50:46 +0100 Subject: [PATCH 20/21] use match.route.path --- src/packages/core/router/route.context.ts | 2 +- src/packages/core/router/router-slot.element.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/packages/core/router/route.context.ts b/src/packages/core/router/route.context.ts index 7fda170903..f8f15291d4 100644 --- a/src/packages/core/router/route.context.ts +++ b/src/packages/core/router/route.context.ts @@ -123,7 +123,7 @@ export class UmbRouteContext extends UmbContextBase { if (this.#activeModalPath) { // If if there is a modal using the old path. const activeModal = this.#modalRegistrations.find((registration) => { - return registration.generateModalPath() === this.#activeModalPath; + return '/' + registration.generateModalPath() === this.#activeModalPath; }); if (activeModal) { this.#modalContext?.close(activeModal.key); diff --git a/src/packages/core/router/router-slot.element.ts b/src/packages/core/router/router-slot.element.ts index e2bc6353c9..a78f0e2ac6 100644 --- a/src/packages/core/router/router-slot.element.ts +++ b/src/packages/core/router/router-slot.element.ts @@ -122,7 +122,7 @@ export class UmbRouterSlotElement extends UmbLitElement { this.dispatchEvent(new UmbRouterSlotChangeEvent()); } } else if (event.detail.slot === this.#modalRouter) { - const newActiveModalLocalPath = this.#modalRouter.match?.fragments.consumed ?? ''; + const newActiveModalLocalPath = this.#modalRouter.match?.route.path ?? ''; this.#routeContext._internal_modalRouterChanged(newActiveModalLocalPath); } }; From 3cf9fc87a8986bccec59148aa4415935dd34faee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 7 Nov 2024 16:52:53 +0100 Subject: [PATCH 21/21] simplifying --- examples/modal-routed/tabs/tab2.element.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/examples/modal-routed/tabs/tab2.element.ts b/examples/modal-routed/tabs/tab2.element.ts index 7dca0365ac..66346df3de 100644 --- a/examples/modal-routed/tabs/tab2.element.ts +++ b/examples/modal-routed/tabs/tab2.element.ts @@ -39,9 +39,6 @@ export class UmbDashboardTab2Element extends UmbElementMixin(LitElement) {

    This element hosts the UmbModalRouteRegistrationController

    Open modal -
    - - Path: ${this._editLinkPath} `; }