yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean up

Browse Source
This commit is contained in:
Niels Lyngsø
2024-08-06 10:19:24 +02:00
parent cdf46a7813
commit fa7ae1e180
5 changed files with 85 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts
View File

@@ -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) {
<li><a href="section/content/dashboard/example/tab1">Tab 1</a></li>
<li><a href="section/content/dashboard/example/tab2">Tab 2 (with modal)</a></li>
</ul>
<hr/>
<hr />
<umb-router-slot
.routes=${this._routes}
@init=${(event: UmbRouterSlotInitEvent) => {
console.log('tab routes init');
}}
@change=${(event: UmbRouterSlotChangeEvent) => {
console.log('modal routes change');
}}></umb-router-slot>
.routes=${this._routes}
@init=${(event: UmbRouterSlotInitEvent) => {
console.log('tab routes init', event);
}}
@change=${(event: UmbRouterSlotChangeEvent) => {
console.log('modal routes change', event);
}}></umb-router-slot>
</div>
`;
}
@@ -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 {

38
src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard2.element.ts
View File

@@ -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`
<div>
<h2>Link to modal route</h2>
<p>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.</p>
<a href="section/content/dashboard/example/tab2/modal/example-routed-modal/view/abc123/overview">Open Modal Route</a>
</div>
`
}
override render() {
return html`
<div>
<h2>Link to modal route</h2>
<p>
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.
</p>
<a href="section/content/dashboard/example/tab2/modal/example-routed-modal/view/abc123/overview"
>Open Modal Route</a
>
</div>
`;
}
static override styles = [UmbTextStyles, css``];
}
export default UmbDashboard2Element
export default UmbDashboard2Element;
declare global {
interface HTMLElementTagNameMap {

70
src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts
View File

@@ -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`
<div>
umb-example modal
<hr/>
<hr />
<umb-router-slot
.routes=${this._routes}
@init=${(event: UmbRouterSlotInitEvent) => {
console.log('modal route init fired');
}}
@change=${(event: UmbRouterSlotChangeEvent) => {
console.log('modal routes change');
}}></umb-router-slot>
.routes=${this._routes}
@init=${(event: UmbRouterSlotInitEvent) => {
console.log('modal route init fired', event);
}}
@change=${(event: UmbRouterSlotChangeEvent) => {
console.log('modal routes change', event);
}}></umb-router-slot>
</div>
`;
}

15
src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step1.element.ts
View File

@@ -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`
<div>
example modal step1
</div>
`;
return html` <div>example modal step1</div> `;
}
static override styles = [UmbTextStyles, css``];

17
src/Umbraco.Web.UI.Client/examples/modal-routed/modal/steps/example-modal-step2.element.ts
View File

@@ -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`
<div>
example modal step1
</div>
`;
return html` <div>example modal step1</div> `;
}
static override styles = [UmbTextStyles, css``];
static override styles = [UmbTextStyles];
}
export default UmbExampleModalStep2;