diff --git a/ui/element/src/element.ts b/ui/element/src/element.ts index 102efbaa0..9c4b771d3 100644 --- a/ui/element/src/element.ts +++ b/ui/element/src/element.ts @@ -3,9 +3,9 @@ import {LitElement} from 'lit'; import {LoggerMixin} from './mixins/logging.js'; import {SignalMixin} from './mixins/signal.js'; +import {AlwatrRootElement} from './root.js'; -export * from './mixins/logging.js'; -export * from './mixins/signal.js'; +export {LoggerMixin, SignalMixin, AlwatrRootElement}; export * from 'lit'; export * from 'lit/decorators.js'; @@ -22,4 +22,4 @@ alwatrRegisteredList.push({ }); export const AlwatrDummyElement = LoggerMixin(LitElement); -export const AlwatrElement = SignalMixin(LoggerMixin(LitElement)); +export const AlwatrSmartElement = SignalMixin(LoggerMixin(LitElement)); diff --git a/ui/element/src/root.ts b/ui/element/src/root.ts new file mode 100644 index 000000000..f7cd024e3 --- /dev/null +++ b/ui/element/src/root.ts @@ -0,0 +1,64 @@ +import {l10n} from '@alwatr/i18n'; +import {router} from '@alwatr/router'; +import {LitElement, css, CSSResultGroup, html} from 'lit'; + +import {LoggerMixin} from './mixins/logging.js'; + +import type {TemplateResult} from '@alwatr/element'; +import type {RoutesConfig} from '@alwatr/router'; + + +/** + * Alwatr Root Base Element + */ +export class AlwatrRootElement extends LoggerMixin(LitElement) { + static override styles: CSSResultGroup = css` + :host { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; + overflow: clip; + contain: layout size style; + } + + .page-container { + flex-grow: 1; + contain: size layout style; + } + `; + + protected _routes: RoutesConfig = { + map: (route) => route.sectionList[0]?.toString(), + list: { + home: { + render: () => html`

Page Home ;)

`, + }, + }, + }; + + constructor() { + super(); + this._initRouter(); + } + + protected _initRouter(): void { + l10n.config.defaultLocale = { + code: 'fa-IR', + direction: 'rtl', + language: 'fa', + }; + l10n.setLocal(); + + router.signal.addListener((route) => { + this._logger.logMethodArgs('routeChanged', {route}); + this.requestUpdate(); + }); + + router.initial(); + } + + override render(): TemplateResult { + return html`
${cache(router.outlet(this._routes))}
`; + } +}