@wuisdk/shell 0.1.0 → 0.1.1

package/dist/{base.shell-BD3tzDD9.d.ts → base.shell-DBBzp_82.d.ts}

@@ -1,4 +1,4 @@
-import { a as ViewportSize, i as ThemeMode, r as SidebarState } from "./types-ayz5MABs.js";
+import { a as ThemeMode, i as SidebarState, o as ViewportSize } from "./types-BWnVOqPT.js";
 import { BaseComponent, IAppShell, ShellType, StoreListener, StoreSelector, SubscribeOptions } from "@wuisdk/core";
 //#region src/store.d.ts
 declare module '@wuisdk/core' {

package/dist/desktop/index.d.ts

@@ -1,5 +1,5 @@
-import { n as RegionsConfig } from "../types-ayz5MABs.js";
-import { n as ShellLayoutStore, t as BaseShell } from "../base.shell-BD3tzDD9.js";
+import { r as RegionsConfig } from "../types-BWnVOqPT.js";
+import { n as ShellLayoutStore, t as BaseShell } from "../base.shell-DBBzp_82.js";
 //#region src/shell/desktop.d.ts
 declare class DesktopShell extends BaseShell {
   private sidebar;

package/dist/desktop/index.js

@@ -1,2 +1,2 @@
 import './index.css';
-import{i as e,n as t,o as n,r,t as i}from"../viewport-BEoQW1zd.js";var a=class extends e{sidebar;viewport;indicator=new i;layoutStore=new r;constructor(e={}){super(),this.sidebar=new n(e.sidebar),this.viewport=new t(this.layoutStore)}render(){}onShellMount(){this.sidebar.injectContext(this.ctx).mount(this.element),this.wuiShell.injectContext(this.ctx).mount(this.element),this.indicator.injectContext(this.ctx).mount(this.element),this.setupPrefState(),this.viewport.observe()}onShellDestroy(){this.sidebar.destroy(),this.viewport.disconnect()}setupPrefState(){let{storage:e}=this.ctx.config,t=localStorage.getItem(e.SIDEBAR_STATE);t&&[`expanded`,`collapsed`].includes(t)&&this.layoutStore.updateLayout({sidebarPref:t}),this.layoutStore.subscribe(e=>e.sidebarPref,t=>{t&&[`expanded`,`collapsed`].includes(t)&&localStorage.setItem(e.SIDEBAR_STATE,t)},{signal:this.signal})}};export{a as DesktopShell};
+import{i as e,n as t,o as n,r,t as i}from"../viewport-CICwvFMQ.js";var a=class extends e{sidebar;viewport;indicator=new i;layoutStore=new r;constructor(e={}){super(),this.sidebar=new n(e.sidebar),this.viewport=new t(this.layoutStore)}render(){}onShellMount(){this.sidebar.injectContext(this.ctx).mount(this.element),this.wuiShell.injectContext(this.ctx).mount(this.element),this.indicator.injectContext(this.ctx).mount(this.element),this.setupPrefState(),this.viewport.observe()}onShellDestroy(){this.sidebar.destroy(),this.viewport.disconnect()}setupPrefState(){let{storage:e}=this.ctx.config,t=localStorage.getItem(e.SIDEBAR_STATE);t&&[`expanded`,`collapsed`].includes(t)&&this.layoutStore.updateLayout({sidebarPref:t}),this.layoutStore.subscribe(e=>e.sidebarPref,t=>{t&&[`expanded`,`collapsed`].includes(t)&&localStorage.setItem(e.SIDEBAR_STATE,t)},{signal:this.signal})}};export{a as DesktopShell};

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-import { t as NavItem } from "./types-ayz5MABs.js";
+import { n as ProfileMenuFactory, t as NavMenuItem } from "./types-BWnVOqPT.js";
 //#region src/index.d.ts
 declare const info: () => {
   version: string;
   name: string;
 };
 //#endregion
-export { type NavItem, info };
+export { type NavMenuItem, type ProfileMenuFactory, info };

package/dist/index.js

@@ -1,2 +1,2 @@
 import './index.css';
-const e=()=>({version:`0.1.0`,name:`@wuisdk/shell`.split(`/`)[1]});export{e as info};
+const e=()=>({version:`0.1.1`,name:`@wuisdk/shell`.split(`/`)[1]});export{e as info};

package/dist/mobile/index.d.ts

@@ -1,5 +1,5 @@
-import { n as RegionsConfig } from "../types-ayz5MABs.js";
-import { n as ShellLayoutStore, t as BaseShell } from "../base.shell-BD3tzDD9.js";
+import { r as RegionsConfig } from "../types-BWnVOqPT.js";
+import { n as ShellLayoutStore, t as BaseShell } from "../base.shell-DBBzp_82.js";
 //#region src/shell/mobile.d.ts
 declare class MobileShell extends BaseShell {
   private tabbar;

package/dist/mobile/index.js

@@ -1,2 +1,2 @@
 import './index.css';
-import{a as e,i as t,n,r}from"../viewport-BEoQW1zd.js";var i=class extends t{tabbar;viewport;layoutStore=new r;constructor(t={}){super(),this.tabbar=new e(t.tabbar),this.viewport=new n(this.layoutStore)}render(){}onShellMount(){this.wuiShell.injectContext(this.ctx).mount(this.element),this.tabbar.injectContext(this.ctx).mount(this.element),this.viewport.observe()}onShellDestroy(){this.tabbar.destroy(),this.viewport.disconnect()}};export{i as MobileShell};
+import{a as e,i as t,n,r}from"../viewport-CICwvFMQ.js";var i=class extends t{tabbar;viewport;layoutStore=new r;constructor(t={}){super(),this.tabbar=new e(t.tabbar),this.viewport=new n(this.layoutStore)}render(){}onShellMount(){this.wuiShell.injectContext(this.ctx).mount(this.element),this.tabbar.injectContext(this.ctx).mount(this.element),this.viewport.observe()}onShellDestroy(){this.tabbar.destroy(),this.viewport.disconnect()}};export{i as MobileShell};

package/dist/{types-ayz5MABs.d.ts → types-BWnVOqPT.d.ts}

@@ -1,15 +1,16 @@
+import { WuiContext } from "@wuisdk/core";
+import { ActionMenuItem } from "@wuisdk/comps/dropdown";
 //#region src/types.d.ts
 type ThemeMode = 'light' | 'dark' | 'system';
 type ViewportSize = 'sm' | 'md' | 'lg';
 type SidebarState = 'expanded' | 'collapsed' | 'overlay' | 'hidden';
-interface RegionBaseConfig {
-  readonly enabled?: boolean;
+type ProfileMenuFactory = (ctx: WuiContext) => ActionMenuItem[];
+interface SidebarConfig {
+  readonly sidebarMenu?: NavMenuItem[];
+  readonly profileMenu?: ActionMenuItem[] | ProfileMenuFactory;
 }
-interface SidebarConfig extends RegionBaseConfig {
-  readonly menu?: NavItem[];
-}
-interface TabbarConfig extends RegionBaseConfig {
-  readonly menu?: NavItem[];
+interface TabbarConfig {
+  readonly tabbarMenu?: NavMenuItem[];
 }
 interface RegionsConfig {
   readonly sidebar?: SidebarConfig;
@@ -29,13 +30,13 @@ interface NavLink extends BaseNavItem {
 }
 interface NavGroup extends BaseNavItem {
   type: 'group';
-  children: NavItem[];
+  children: NavMenuItem[];
   defaultOpen?: boolean;
 }
 type Role = 'admin' | 'user' | 'guest';
 interface WithPermission {
   roles?: Role[];
 }
-type NavItem = (NavLink & WithPermission) | (NavGroup & WithPermission);
+type NavMenuItem = (NavLink & WithPermission) | (NavGroup & WithPermission);
 //#endregion
-export { ViewportSize as a, ThemeMode as i, RegionsConfig as n, SidebarState as r, NavItem as t };
+export { ThemeMode as a, SidebarState as i, ProfileMenuFactory as n, ViewportSize as o, RegionsConfig as r, NavMenuItem as t };

package/dist/viewport-CICwvFMQ.js

@@ -0,0 +1,17 @@
+import{BaseComponent as e,Store as t}from"@wuisdk/core";import{dom as n}from"@wuisdk/utils";import{WuiActionMenu as r}from"@wuisdk/comps/dropdown";var i=class extends e{content=n.createElement(`main`,{className:`wui-content`});loader=n.createElement(`div`,{className:`wui-loader`});constructor(){super(`div`,{className:`wui-shell`})}render(){let e=n.createElement(`div`,{className:`wui-spinner`}),t=Array.from({length:12},()=>n.createElement(`div`));e.append(...t),this.loader.replaceChildren(e),this.element.append(this.content,this.loader)}onDestroy(){this.content.remove(),this.loader.remove()}get wuiContent(){return this.content}};const a=(e,t)=>{if(!e||!t)return;let n=`admin`,r=document.createDocumentFragment();t.forEach(e=>{e.roles&&!e.roles.includes(n)||e.hidden||(e.type===`item`&&r.append(o(e)),e.type===`group`&&r.append(s(e,n)))}),e.replaceChildren(r)},o=(e,t=!1)=>{let r=n.createElement(`a`,{className:t?`nav-subitem`:`nav-item`,attributes:{href:e.path??`#`},dataset:{wuiLink:``}}),i=n.createElement(`span`,{className:`nav-icon`},e.icon??``),a=n.createElement(`span`,{className:`nav-label`},e.label??``);return r.append(i,a),e.disabled&&r.classList.add(`is-disabled`),r},s=(e,t)=>{let r=n.createElement(`div`,{className:`nav-group`,dataset:{open:String(e.defaultOpen||!1)}}),i=n.createElement(`button`,{className:[`nav-item`,`has-children`]}),a=n.createElement(`span`,{className:`nav-icon`},e.icon??``),c=n.createElement(`span`,{className:`nav-label`},e.label??``),l=n.createElement(`span`,{className:`nav-caret`},``);i.append(a,c,l);let u=n.createElement(`div`,{className:`nav-children`}),d=n.createElement(`div`,{className:`nav-children__wrapper`});return e.children.forEach(e=>{e.roles&&!e.roles.includes(t)||(e.type===`item`?d.append(o(e,!0)):d.append(s(e,t)))}),u.appendChild(d),r.append(i,u),r};var c=`<div class="sidebar__header">
+    <div class="sidebar__logo">
+        <i class="fa-regular fa-fire"></i>
+        <span class="app-name">App Name</span>
+    </div>
+    <button class="sidebar__toggle">&#x2630;</button>
+</div>
+<nav class="sidebar__nav"></nav>
+<div class="sidebar__footer">
+    <button class="profile">
+        <div class="profile__avatar"></div>
+        <div class="profile__info">
+            <div class="name">Display Name</div>
+            <div class="unit">Department Name</div>
+        </div>
+    </button>
+</div>`,l=class extends e{config;navLink=[];profileAction=null;constructor(e={}){super(`aside`,{className:`wui-sidebar`}),this.config=e}render(){let e=n.renderTemplate(c);this.element.replaceChildren(e)}onMount(){this.setupNavMenu(),this.setProfileAction(),this.element.addEventListener(`click`,this.handleClick,{signal:this.signal}),this.ctx.events.on(`sys:route-changed`,e=>{this.setNavActive(e.path)},this.signal);let e=this.element.querySelector(`.app-name`);e&&(e.textContent=this.ctx.config.appName),this.ctx.stores.auth?.subscribe(e=>e.user,e=>this.setProfile(e),{signal:this.signal}),this.ctx.stores.fiber.subscribe(e=>e.user,e=>this.setAccess(e),{signal:this.signal})}onUnmount(){this.profileAction?.destroy(),this.profileAction=null}setNavActive(e){this.navLink.forEach(t=>{let n=t.getAttribute(`href`),r=n===e||n===`/${e}`;if(t.toggleAttribute(`data-active`,r),r){let e=t.closest(`.nav-group`);for(;e;)e.dataset.open=`true`,e=e.parentElement?.closest(`.nav-group`)||null}})}setupNavMenu(){let e=this.element.querySelector(`nav`);e&&this.config.sidebarMenu&&(a(e,this.config.sidebarMenu),this.navLink=Array.from(e.querySelectorAll(`[data-wui-link]`)))}handleClick=e=>{let t=e.target;if(t.closest(`.sidebar__toggle`)){this.ctx.stores.layout.toggleSidebar();return}let n=t.closest(`.nav-item.has-children`);if(n){e.preventDefault();let t=n.closest(`.nav-group`);if(t){let e=t.dataset.open===`true`;t.dataset.open=String(!e)}}};setProfile(e){if(!e)return;let t=this.element.querySelector(`.profile__avatar`);if(t&&e.picture){let r=n.createElement(`img`,{attributes:{src:e.picture}});t.replaceChildren(r)}let r=this.element.querySelector(`.profile__info .name`),i=this.element.querySelector(`.profile__info .unit`);r&&(r.textContent=e.name),i&&(i.textContent=e.unit)}setAccess(e){if(!e)return;let t=this.element.querySelector(`.profile__avatar`);if(t){let e=n.createElement(`img`,{attributes:{src:`https://cdn.jsdelivr.net/gh/wkrdev/assets/img/icon/icon-03.png`}});t.replaceChildren(e)}let r=this.element.querySelector(`.profile__info .name`),i=this.element.querySelector(`.profile__info .unit`);r&&(r.textContent=e.full_name),i&&(i.textContent=e.sect?e.sect_name:e.dvsn_name)}setProfileAction(){let e=this.config.profileMenu;if(!e)return;let t=typeof e==`function`?e(this.ctx):e;if(t.length===0)return;let n=this.element.querySelector(`.profile`);n&&(this.profileAction=new r({trigger:n,items:t,placement:`top-start`,signal:this.signal}).injectContext(this.ctx))}},u=`<div class="tabbar__list"></div>`,d=class extends e{config;navLink=[];constructor(e={}){super(`nav`,{className:`wui-tabbar`}),this.config=e}render(){let e=n.renderTemplate(u);this.element.replaceChildren(e)}onMount(){this.setupTabMenu(),this.ctx.events.on(`sys:route-changed`,e=>{this.setNavActive(e.path)},this.signal)}setNavActive(e){this.navLink.forEach(t=>{let n=t.getAttribute(`href`),r=n===e||n===`/${e}`;t.toggleAttribute(`data-active`,r)})}setupTabMenu(){let e=this.element.querySelector(`.tabbar__list`);if(e&&this.config.tabbarMenu){let t=document.createDocumentFragment();this.config.tabbarMenu.forEach(e=>{if(e.type!==`item`)return;let r=n.createElement(`a`,{className:`tabbar__item`,attributes:{href:e.path,"data-wui-link":``}},n.createElement(`span`,{className:`tabbar__icon`},e.icon),n.createElement(`span`,{className:`tabbar__label`},e.label));t.appendChild(r)}),e.replaceChildren(t),this.navLink=Array.from(e.querySelectorAll(`[data-wui-link]`))}}},f=class extends e{wuiShell;constructor(){super(`div`,{className:`wui`}),this.wuiShell=new i}onMount(){this.ctx.registerStore(`layout`,this.layoutStore),this.setupLayoutStateListener(),this.setupSystemStateListener(),this.ctx.events.on(`sys:page-mounted`,e=>{this.layoutStore.updateLayout({shell:e.shell})}),this.onShellMount()}onDestroy(){this.wuiShell.destroy(),this.onShellDestroy()}get wuiRoot(){return this.element}get wuiContent(){return this.wuiShell.wuiContent}setupLayoutStateListener(){let e=this.layoutStore.state;Object.entries(e).forEach(([e,t])=>{e!==`sidebarPref`&&(this.element.dataset[e]=String(t))}),this.layoutStore.subscribe(e=>e,(e,t)=>{Object.entries(e).forEach(([e,n])=>{e!==`sidebarPref`&&(!t||t[e]!==n)&&(this.element.dataset[e]=String(n))})},{isEqual:(e,t)=>e===t?!0:!e||!t?!1:Object.keys(e).every(n=>e[n]===t[n]),signal:this.signal})}setupSystemStateListener(){let e=this.ctx.stores.sys,t=e.state;this.element.dataset.loading=String(t.loading),this.element.dataset.ready=String(t.ready),e.subscribe(e=>({loading:e.loading,ready:e.ready}),(e,t)=>{t.loading!==e.loading&&(this.element.dataset.loading=String(e.loading)),t.ready!==e.ready&&(this.element.dataset.ready=String(e.ready))},{isEqual:(e,t)=>e.loading===t.loading&&e.ready===t.ready,signal:this.signal})}},p=class{store=new t({theme:`system`,shell:`blank`,viewport:`sm`,sidebar:`hidden`});get state(){return this.store.getState()}subscribe(e,t,n){return this.store.subscribe(e,t,n)}updateLayout(e){this.store.setState(t=>{let n={...t,...e};return(e.shell!==void 0||e.viewport!==void 0)&&(n.sidebar=this.calcSidebarState(n.shell,n.viewport,n.sidebarPref)),n})}toggleSidebar(){this.store.setState(e=>{let{viewport:t,sidebar:n,shell:r,sidebarPref:i}=e;if(r!==`dashboard`)return{};let a,o=i;return t===`sm`?a=n===`hidden`?`overlay`:`hidden`:(a=n===`expanded`?`collapsed`:`expanded`,o=a),{sidebar:a,sidebarPref:o}})}calcSidebarState(e,t,n){return e!==`dashboard`||t===`sm`?`hidden`:n&&[`expanded`,`collapsed`].includes(n)?n:t===`md`?`collapsed`:`expanded`}},m=class{store;abortController=null;mediaQueries;constructor(e,t={md:`(min-width: 600px)`,lg:`(min-width: 800px)`}){this.store=e,this.mediaQueries={md:window.matchMedia(t.md),lg:window.matchMedia(t.lg)}}observe(){if(this.abortController)return;this.abortController=new AbortController;let{signal:e}=this.abortController,t=()=>{let e=`sm`;this.mediaQueries.lg.matches?e=`lg`:this.mediaQueries.md.matches&&(e=`md`),this.store.state.viewport!==e&&this.store.updateLayout({viewport:e})};Object.values(this.mediaQueries).forEach(n=>{n.addEventListener(`change`,t,{signal:e})}),t()}disconnect(){this.abortController&&=(this.abortController.abort(),null)}},h=class extends e{isTicking=!1;constructor(){super(`div`,{className:`wui-viewport`})}render(){this.updateDimensions()}onMount(){window.addEventListener(`resize`,this.handleResize,{signal:this.signal})}handleResize=()=>{this.isTicking||=(window.requestAnimationFrame(()=>{this.updateDimensions(),this.isTicking=!1}),!0)};updateDimensions(){let e=window.innerWidth,t=window.innerHeight;this.element.textContent=`${e}x${t}`}};export{d as a,f as i,m as n,l as o,p as r,h as t};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wuisdk/shell",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "type": "module",
     "exports": {
         ".": {

package/dist/viewport-BEoQW1zd.js

@@ -1,17 +0,0 @@
-import{BaseComponent as e,Store as t}from"@wuisdk/core";import{dom as n}from"@wuisdk/utils";import{WuiActionMenu as r}from"@wuisdk/comps/dropdown";var i=class extends e{content=n.createElement(`main`,{className:`wui-content`});loader=n.createElement(`div`,{className:`wui-loader`});constructor(){super(`div`,{className:`wui-shell`})}render(){let e=n.createElement(`div`,{className:`wui-spinner`}),t=Array.from({length:12},()=>n.createElement(`div`));e.append(...t),this.loader.replaceChildren(e),this.element.append(this.content,this.loader)}onDestroy(){this.content.remove(),this.loader.remove()}get wuiContent(){return this.content}};const a=(e,t)=>{if(!e||!t)return;let n=`admin`,r=document.createDocumentFragment();t.forEach(e=>{e.roles&&!e.roles.includes(n)||e.hidden||(e.type===`item`&&r.append(o(e)),e.type===`group`&&r.append(s(e,n)))}),e.replaceChildren(r)},o=(e,t=!1)=>{let r=n.createElement(`a`,{className:t?`nav-subitem`:`nav-item`,attributes:{href:e.path??`#`},dataset:{wuiLink:``}}),i=n.createElement(`span`,{className:`nav-icon`},e.icon??``),a=n.createElement(`span`,{className:`nav-label`},e.label??``);return r.append(i,a),e.disabled&&r.classList.add(`is-disabled`),r},s=(e,t)=>{let r=n.createElement(`div`,{className:`nav-group`,dataset:{open:String(e.defaultOpen||!1)}}),i=n.createElement(`button`,{className:[`nav-item`,`has-children`]}),a=n.createElement(`span`,{className:`nav-icon`},e.icon??``),c=n.createElement(`span`,{className:`nav-label`},e.label??``),l=n.createElement(`span`,{className:`nav-caret`},``);i.append(a,c,l);let u=n.createElement(`div`,{className:`nav-children`}),d=n.createElement(`div`,{className:`nav-children__wrapper`});return e.children.forEach(e=>{e.roles&&!e.roles.includes(t)||(e.type===`item`?d.append(o(e,!0)):d.append(s(e,t)))}),u.appendChild(d),r.append(i,u),r};var c=`<div class="sidebar__header">
-    <div class="sidebar__logo">
-        <i class="fa-regular fa-fire"></i>
-        <span class="app-name">App Name</span>
-    </div>
-    <button class="sidebar__toggle">&#x2630;</button>
-</div>
-<nav class="sidebar__nav"></nav>
-<div class="sidebar__footer">
-    <button class="profile">
-        <div class="profile__avatar"></div>
-        <div class="profile__info">
-            <div class="name">Display Name</div>
-            <div class="unit">Department Name</div>
-        </div>
-    </button>
-</div>`,l=class extends e{config;navLink=[];profileAction=null;constructor(e={}){super(`aside`,{className:`wui-sidebar`}),this.config=e}render(){let e=n.renderTemplate(c);this.element.replaceChildren(e)}onMount(){this.setupNavMenu(),this.setProfileAction(),this.element.addEventListener(`click`,this.handleClick,{signal:this.signal}),this.ctx.events.on(`sys:route-changed`,e=>{this.setNavActive(e.path)},this.signal);let e=this.element.querySelector(`.app-name`);e&&(e.textContent=this.ctx.config.appName),this.ctx.stores.auth?.subscribe(e=>e.user,e=>this.setProfile(e),{signal:this.signal}),this.ctx.stores.fiber.subscribe(e=>e.user,e=>this.setAccess(e),{signal:this.signal})}onUnmount(){this.profileAction?.destroy(),this.profileAction=null}setNavActive(e){this.navLink.forEach(t=>{let n=t.getAttribute(`href`),r=n===e||n===`/${e}`;t.toggleAttribute(`data-active`,r)})}setupNavMenu(){let e=this.element.querySelector(`nav`);e&&this.config.menu&&(a(e,this.config.menu),this.navLink=Array.from(e.querySelectorAll(`[data-wui-link]`)))}handleClick=e=>{let t=e.target;if(t.closest(`.sidebar__toggle`)){this.ctx.stores.layout.toggleSidebar();return}let n=t.closest(`.nav-item.has-children`);if(n){e.preventDefault();let t=n.closest(`.nav-group`);if(t){let e=t.dataset.open===`true`;t.dataset.open=String(!e)}}};setProfile(e){if(!e)return;let t=this.element.querySelector(`.profile__avatar`);if(t&&e.picture){let r=n.createElement(`img`,{attributes:{src:e.picture}});t.replaceChildren(r)}let r=this.element.querySelector(`.profile__info .name`),i=this.element.querySelector(`.profile__info .unit`);r&&(r.textContent=e.name),i&&(i.textContent=e.unit)}setAccess(e){if(!e)return;let t=this.element.querySelector(`.profile__avatar`);if(t){let e=n.createElement(`img`,{attributes:{src:`https://cdn.jsdelivr.net/gh/wkrdev/assets/img/icon/icon-03.png`}});t.replaceChildren(e)}let r=this.element.querySelector(`.profile__info .name`),i=this.element.querySelector(`.profile__info .unit`);r&&(r.textContent=e.full_name),i&&(i.textContent=e.sect?e.sect_name:e.dvsn_name)}setProfileAction(){let e=[{id:`profile`,label:`โปรไฟล์`,icon:``},{id:`setting`,label:`การตั้งค่า`,icon:``},{id:`manual`,label:`ช่วยเหลือ`,icon:``},{id:`hwlink`,label:`HwLink`,icon:``},{divider:!0},{id:`logout`,label:`ลงชื่อออก`,icon:``,onClick:this.handleLogout}],t=this.element.querySelector(`.profile`);t&&(this.profileAction=new r({trigger:t,items:e,placement:`top-start`,signal:this.signal}).injectContext(this.ctx))}handleLogout=async()=>{await this.ctx.ui.dialog.confirm(`ยืนยัน.! การออกจากระบบ`)&&(this.ctx.plugins.auth&&this.ctx.plugins.auth.logout(),this.ctx.plugins.fiber&&this.ctx.plugins.fiber.logout())}},u=`<div class="tabbar__list"></div>`,d=class extends e{config;navLink=[];constructor(e={}){super(`nav`,{className:`wui-tabbar`}),this.config=e}render(){let e=n.renderTemplate(u);this.element.replaceChildren(e)}onMount(){this.setupTabMenu(),this.ctx.events.on(`sys:route-changed`,e=>{this.setNavActive(e.path)},this.signal)}setNavActive(e){this.navLink.forEach(t=>{let n=t.getAttribute(`href`),r=n===e||n===`/${e}`;t.toggleAttribute(`data-active`,r)})}setupTabMenu(){let e=this.element.querySelector(`.tabbar__list`);if(e&&this.config.menu){let t=document.createDocumentFragment();this.config.menu.forEach(e=>{if(e.type!==`item`)return;let r=n.createElement(`a`,{className:`tabbar__item`,attributes:{href:e.path,"data-wui-link":``}},n.createElement(`span`,{className:`tabbar__icon`},e.icon),n.createElement(`span`,{className:`tabbar__label`},e.label));t.appendChild(r)}),e.replaceChildren(t),this.navLink=Array.from(e.querySelectorAll(`[data-wui-link]`))}}},f=class extends e{wuiShell;constructor(){super(`div`,{className:`wui`}),this.wuiShell=new i}onMount(){this.ctx.registerStore(`layout`,this.layoutStore),this.setupLayoutStateListener(),this.setupSystemStateListener(),this.ctx.events.on(`sys:page-mounted`,e=>{this.layoutStore.updateLayout({shell:e.shell})}),this.onShellMount()}onDestroy(){this.wuiShell.destroy(),this.onShellDestroy()}get wuiRoot(){return this.element}get wuiContent(){return this.wuiShell.wuiContent}setupLayoutStateListener(){let e=this.layoutStore.state;Object.entries(e).forEach(([e,t])=>{e!==`sidebarPref`&&(this.element.dataset[e]=String(t))}),this.layoutStore.subscribe(e=>e,(e,t)=>{Object.entries(e).forEach(([e,n])=>{e!==`sidebarPref`&&(!t||t[e]!==n)&&(this.element.dataset[e]=String(n))})},{isEqual:(e,t)=>e===t?!0:!e||!t?!1:Object.keys(e).every(n=>e[n]===t[n]),signal:this.signal})}setupSystemStateListener(){let e=this.ctx.stores.sys,t=e.state;this.element.dataset.loading=String(t.loading),this.element.dataset.ready=String(t.ready),e.subscribe(e=>({loading:e.loading,ready:e.ready}),(e,t)=>{t.loading!==e.loading&&(this.element.dataset.loading=String(e.loading)),t.ready!==e.ready&&(this.element.dataset.ready=String(e.ready))},{isEqual:(e,t)=>e.loading===t.loading&&e.ready===t.ready,signal:this.signal})}},p=class{store=new t({theme:`system`,shell:`blank`,viewport:`sm`,sidebar:`hidden`});get state(){return this.store.getState()}subscribe(e,t,n){return this.store.subscribe(e,t,n)}updateLayout(e){this.store.setState(t=>{let n={...t,...e};return(e.shell!==void 0||e.viewport!==void 0)&&(n.sidebar=this.calcSidebarState(n.shell,n.viewport,n.sidebarPref)),n})}toggleSidebar(){this.store.setState(e=>{let{viewport:t,sidebar:n,shell:r,sidebarPref:i}=e;if(r!==`dashboard`)return{};let a,o=i;return t===`sm`?a=n===`hidden`?`overlay`:`hidden`:(a=n===`expanded`?`collapsed`:`expanded`,o=a),{sidebar:a,sidebarPref:o}})}calcSidebarState(e,t,n){return e!==`dashboard`||t===`sm`?`hidden`:n&&[`expanded`,`collapsed`].includes(n)?n:t===`md`?`collapsed`:`expanded`}},m=class{store;abortController=null;mediaQueries;constructor(e,t={md:`(min-width: 600px)`,lg:`(min-width: 800px)`}){this.store=e,this.mediaQueries={md:window.matchMedia(t.md),lg:window.matchMedia(t.lg)}}observe(){if(this.abortController)return;this.abortController=new AbortController;let{signal:e}=this.abortController,t=()=>{let e=`sm`;this.mediaQueries.lg.matches?e=`lg`:this.mediaQueries.md.matches&&(e=`md`),this.store.state.viewport!==e&&this.store.updateLayout({viewport:e})};Object.values(this.mediaQueries).forEach(n=>{n.addEventListener(`change`,t,{signal:e})}),t()}disconnect(){this.abortController&&=(this.abortController.abort(),null)}},h=class extends e{isTicking=!1;constructor(){super(`div`,{className:`wui-viewport`})}render(){this.updateDimensions()}onMount(){window.addEventListener(`resize`,this.handleResize,{signal:this.signal})}handleResize=()=>{this.isTicking||=(window.requestAnimationFrame(()=>{this.updateDimensions(),this.isTicking=!1}),!0)};updateDimensions(){let e=window.innerWidth,t=window.innerHeight;this.element.textContent=`${e}x${t}`}};export{d as a,f as i,m as n,l as o,p as r,h as t};