From fa7ae1e180d59eda07e32ba4c7e682bcc55a1a92 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] clean up --- .../modal-routed/dashboard.element.ts | 67 ++++++++---------- .../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/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts index add1ec69de..a4b1cd73d1 100644 --- a/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts +++ b/src/Umbraco.Web.UI.Client/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/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard2.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard2.element.ts index cd08bae781..aedf64759c 100644 --- a/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard2.element.ts +++ b/src/Umbraco.Web.UI.Client/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/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts index a36ba43bc5..a0d71b8ff4 100644 --- a/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/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/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step1.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step1.element.ts index 35f39147fd..9098546e6a 100644 --- a/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step1.element.ts +++ b/src/Umbraco.Web.UI.Client/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/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step2.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step2.element.ts index 32dadca5b8..c6a9f6a5d5 100644 --- a/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step2.element.ts +++ b/src/Umbraco.Web.UI.Client/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;