implement section
This commit is contained in:
@@ -11,6 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/element';
|
||||
|
||||
import './section-sidebar-menu/section-sidebar-menu.element.ts';
|
||||
import './section-views/section-views.element.ts';
|
||||
import { UmbRouterSlotChangeEvent } from '@umbraco-cms/router';
|
||||
|
||||
@customElement('umb-section')
|
||||
export class UmbSectionElement extends UmbLitElement {
|
||||
@@ -173,9 +174,6 @@ export class UmbSectionElement extends UmbLitElement {
|
||||
return {
|
||||
path: 'view/' + view.meta.pathname,
|
||||
component: () => createExtensionElement(view),
|
||||
setup: () => {
|
||||
this._sectionContext?.setActiveView(view);
|
||||
},
|
||||
};
|
||||
}) ?? [];
|
||||
|
||||
@@ -187,6 +185,13 @@ export class UmbSectionElement extends UmbLitElement {
|
||||
}
|
||||
}
|
||||
|
||||
private _onRouteChange = (event: UmbRouterSlotChangeEvent) => {
|
||||
const currentPath = event.target.localActiveViewPath;
|
||||
const view = this._views?.find((view) => 'view/' + view.meta.pathname === currentPath);
|
||||
if (!view) return;
|
||||
this._sectionContext?.setActiveView(view);
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
${this._menuItems && this._menuItems.length > 0
|
||||
@@ -199,7 +204,7 @@ export class UmbSectionElement extends UmbLitElement {
|
||||
<umb-section-main>
|
||||
${this._views && this._views.length > 0 ? html`<umb-section-views></umb-section-views>` : nothing}
|
||||
${this._routes && this._routes.length > 0
|
||||
? html`<umb-router-slot id="router-slot" .routes="${this._routes}"></umb-router-slot>`
|
||||
? html`<umb-router-slot id="router-slot" .routes="${this._routes}" @change=${this._onRouteChange}></umb-router-slot>`
|
||||
: nothing}
|
||||
<slot></slot>
|
||||
</umb-section-main>
|
||||
|
||||
Reference in New Issue
Block a user