@adminui-dev/layout 1.0.2 → 1.0.3

package/dist/components/typings.d.ts

@@ -37,10 +37,14 @@ interface LayoutConfig {
     menuIconSize?: number;
     compact?: boolean;
     splitMenu?: boolean;
+    asideMenuInline?: boolean;
+    asideMenuGroup?: boolean;
     hideBorder?: boolean;
     hideTitle?: boolean;
     hideFooter?: boolean;
     hideBreadcrumb?: boolean;
+    asideTransparent?: boolean;
+    headerTransparent?: boolean;
     containerTransparent?: boolean;
     userInfo?: UserInfo;
     brandInfo?: BrandInfo;
@@ -109,7 +113,7 @@ interface RootLayoutProps<T> extends LayoutProps {
 interface ContainerProps extends LayoutProps {
     mode?: ContainerMode;
     stretch?: ContainerStretch;
-    bordered?: boolean;
+    hideBorder?: boolean;
     hideTitle?: boolean;
     hideBreadcrumb?: boolean;
     hideFooter?: boolean;

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react");function n(e,r){void 0===r&&(r={});var n=r.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var t="Layout-module_rootBackground__j3UVG",o="Layout-module_mainLayout__6W9W9";function i(){return e.jsx("div",{className:t,children:"55555"})}n('@layer base {\r\n    html, body {\r\n        padding: 0;\r\n        margin: 0;\r\n        border: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        overflow: hidden;\r\n    }\r\n    #Layout-module_root__3x-pW {        \r\n        text-align: initial;\r\n        width: 100%;\r\n        height: 100%;\r\n    }   \r\n}\r\n.Layout-module_rootBox__3JHjy {\r\n    box-sizing: border-box;  \r\n    width: 100%;\r\n    height:100%;    \r\n    text-align: initial;  \r\n    display: grid;\r\n    grid-template-areas: "root";\r\n    background-color: transparent;\r\n}\r\n.Layout-module_rootBackground__j3UVG {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    overflow: hidden;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;     \r\n    height:100%;\r\n    width: 100%;\r\n    z-index: 0;\r\n    grid-area: root;\r\n}\r\n.Layout-module_rootLayout__jVEEF {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-area: root;\r\n    grid-template-columns: auto 1fr;\r\n    grid-template-rows: 50px 1fr;   \r\n    z-index: 1;   \r\n    overflow: auto;\r\n    background-color: transparent;    \r\n}\r\n.Layout-module_mainLayout__6W9W9 {\r\n    box-sizing: border-box;\r\n    grid-row: 2;\r\n    grid-column: 2;\r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 0;\r\n}\r\n');const a=Symbol("LayoutAside"),l=Symbol("LayoutContent"),d=Symbol("LayoutHeader"),s={icon:"",name:"default",themeType:"tidy",theme:["light","dark"]},u={headerHeight:50,asideCollapsedWidth:52,asideWidth:260,layoutType:"leftMenu",theme:"system",primaryColor:"#417ffb",skinName:s.name},c=r.createContext({setTheme:()=>{},setLayoutConfig:()=>{},setLocale:()=>{}}),h=r.createContext({locale:"en-US",languages:[],theme:"system",layoutConfig:{},themeSkin:s,themeSkinMap:{tidy:[],rich:[]}}),m=()=>r.useContext(h);function g(r){return e.jsx("div",{className:o,...r,children:r.children})}function x(r){return e.jsx(e.Fragment,{children:r.children})}function y(r){return e.jsx(e.Fragment,{children:r.children})}g.displayName="LayoutContent",g.role=l,x.displayName="LayoutAside",x.role=a,y.displayName="LayoutHeader",y.role=d;var f="layout-module_rootBox__Y8bEx",p="layout-module_rootLayout__TePvr";function b(n){let t=null,o=null,s=null;r.Children.forEach(n.children,e=>{const r=e.type.role;r===d?t=e:r===l?o=e:r===a&&(s=e)});const u={gridTemplateRows:`${n.headerHeight}px 1fr`};return e.jsx(e.Fragment,{children:e.jsxs("div",{ref:n.ref,className:f,style:{...n.style},children:[e.jsx(i,{}),e.jsxs("div",{className:p,style:u,children:[s,t,o]})]})})}n('@layer base {\r\n    html, body {\r\n        padding: 0;\r\n        margin: 0;\r\n        border: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        overflow: hidden;\r\n    }\r\n    #layout-module_root__0efzq {        \r\n        text-align: initial;\r\n        width: 100%;\r\n        height: 100%;\r\n    }   \r\n}\r\n.layout-module_rootBox__Y8bEx {\r\n    box-sizing: border-box;  \r\n    width: 100%;\r\n    height:100%;    \r\n    text-align: initial;  \r\n    display: grid;\r\n    grid-template-areas: "root";\r\n    background-color: transparent;\r\n}\r\n.layout-module_rootBackground__vEs6e {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    overflow: hidden;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;     \r\n    height:100%;\r\n    width: 100%;\r\n    z-index: 0;\r\n    grid-area: root;\r\n}\r\n.layout-module_rootLayout__TePvr {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-area: root;\r\n    grid-template-columns: auto 1fr;\r\n    grid-template-rows: 50px 1fr;   \r\n    z-index: 1;   \r\n    overflow: auto;\r\n    background-color: transparent;    \r\n}\r\n.layout-module_mainLayout__a8Tb9 {\r\n    box-sizing: border-box;\r\n    grid-row: 2;\r\n    grid-column: 2;\r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 0;\r\n}\r\n'),b.Aside=x,b.Content=g,b.Header=y;const _=e=>({r:parseInt(e.slice(1,3),16),g:parseInt(e.slice(3,5),16),b:parseInt(e.slice(5,7),16),a:9===e.length?(parseInt(e.slice(7,9),16)/255).toFixed(2):1});exports.BaseLayout=b,exports.FullScreenButton=function(n){const t=!!document.fullscreenElement,[o,i]=r.useState(t),a=()=>{i(!!document.fullscreenElement)},l=e=>{"F11"===e.code&&(e.preventDefault(),d())};r.useEffect(()=>(document.addEventListener("fullscreenchange",a),document.addEventListener("keydown",l,!0),()=>{document.removeEventListener("fullscreenchange",a),document.removeEventListener("keydown",l)}),[]);const d=()=>{o?document.exitFullscreen():document.documentElement.requestFullscreen()};if(!n.buttons||n.buttons.length<2)return e.jsx(e.Fragment,{});const[s,u]=n.buttons,c=o?s:u;return r.cloneElement(c,{onClick:e=>{console.log(e),d()}})},exports.LayoutBackground=i,exports.createConfigActionContext=()=>c,exports.createConfigStateContext=()=>h,exports.defaultConfig=u,exports.defaultSkinData=s,exports.defineConfig=function(e){return e},exports.getAvatarInitials=function(e){if(!e)return"";const r=Array.from(e);if(0===r.length)return"";const n=r[0];return function(e){if(0===e.length)return!1;const r=e.codePointAt(0);return r>=19968&&r<=40959||r>=13312&&r<=19903||r>=12352&&r<=12543||r>=44032&&r<=55215||r>=65280&&r<=65519||r>=126976&&r<=129791||r>=127744&&r<=128511||r>=128640&&r<=128767||r>=129280&&r<=129535||r>=9728&&r<=9983||r>=9984&&r<=10175}(n)?n:r.slice(0,2).join("")},exports.getLayoutTheme=e=>{if("system"==e){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}return e},exports.hexToRgb=e=>{const{r:r,g:n,b:t}=_(e);return{r:r,g:n,b:t}},exports.hexToRgbaString=(e,r)=>{const{r:n,g:t,b:o,a:i}=_(e);return`rgba(${n}, ${t}, ${o}, ${r??i})`},exports.useConfigAction=()=>r.useContext(c),exports.useConfigState=m,exports.useTheme=()=>m().theme;
+"use strict";var e=require("react/jsx-runtime"),n=require("react");function r(e,n){void 0===n&&(n={});var r=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var t="Layout-module_rootBackground__j3UVG",o="Layout-module_mainLayout__6W9W9";function i(){return e.jsx("div",{className:t,children:"55555"})}r('@layer base {\r\n    html, body {\r\n        padding: 0;\r\n        margin: 0;\r\n        border: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        overflow: hidden;\r\n    }\r\n    #Layout-module_root__3x-pW {        \r\n        text-align: initial;\r\n        width: 100%;\r\n        height: 100%;\r\n    }   \r\n}\r\n.Layout-module_rootBox__3JHjy {\r\n    box-sizing: border-box;  \r\n    width: 100%;\r\n    height:100%;    \r\n    text-align: initial;  \r\n    display: grid;\r\n    grid-template-areas: "root";\r\n    background-color: transparent;\r\n}\r\n.Layout-module_rootBackground__j3UVG {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    overflow: hidden;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;     \r\n    height:100%;\r\n    width: 100%;\r\n    z-index: 0;\r\n    grid-area: root;\r\n}\r\n.Layout-module_rootLayout__jVEEF {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-area: root;\r\n    grid-template-columns: min-content minmax(0,1fr);\r\n    grid-template-rows: 50px minmax(0,1fr);   \r\n    z-index: 1;   \r\n    overflow: auto;\r\n    overflow-x: hidden;\r\n    background-color: transparent;\r\n    container-type: inline-size;\r\n}\r\n.Layout-module_mainLayout__6W9W9 {\r\n    box-sizing: border-box;\r\n    z-index: 2;\r\n    grid-row: 2;\r\n    grid-column: 2;\r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 0;\r\n}\r\n\r\n@container (max-width: 576px) {\r\n  .Layout-module_mainLayout__6W9W9 {    \r\n    grid-column: 1 / span 2 ;\r\n }\r\n}\r\n');const a=Symbol("LayoutAside"),d=Symbol("LayoutContent"),l=Symbol("LayoutHeader"),s={icon:"",name:"default",themeType:"tidy",theme:["light","dark"]},u={headerHeight:50,asideCollapsedWidth:52,asideWidth:260,layoutType:"leftMenu",theme:"system",primaryColor:"#417ffb",skinName:s.name},c=n.createContext({setTheme:()=>{},setLayoutConfig:()=>{},setLocale:()=>{}}),m=n.createContext({locale:"en-US",languages:[],theme:"system",layoutConfig:{},themeSkin:s,themeSkinMap:{tidy:[],rich:[]}}),h=()=>n.useContext(m);function g(n){return e.jsx("div",{className:o,...n,children:n.children})}function x(n){return e.jsx(e.Fragment,{children:n.children})}function y(n){return e.jsx(e.Fragment,{children:n.children})}g.displayName="LayoutContent",g.role=d,x.displayName="LayoutAside",x.role=a,y.displayName="LayoutHeader",y.role=l;var f="layout-module_rootBox__Y8bEx",p="layout-module_rootLayout__TePvr";function b(r){let t=null,o=null,s=null;n.Children.forEach(r.children,e=>{const n=e.type.role;n===l?t=e:n===d?o=e:n===a&&(s=e)});const u={gridTemplateRows:`${r.headerHeight}px 1fr`};return e.jsx(e.Fragment,{children:e.jsxs("div",{ref:r.ref,className:f,style:{...r.style},children:[e.jsx(i,{}),e.jsxs("div",{className:p,style:u,children:[s,t,o]})]})})}r('@layer base {\r\n    html, body {\r\n        padding: 0;\r\n        margin: 0;\r\n        border: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        overflow: hidden;\r\n    }\r\n    #layout-module_root__0efzq {        \r\n        text-align: initial;\r\n        width: 100%;\r\n        height: 100%;\r\n    }   \r\n}\r\n.layout-module_rootBox__Y8bEx {\r\n    box-sizing: border-box;  \r\n    width: 100%;\r\n    height:100%;    \r\n    text-align: initial;  \r\n    display: grid;\r\n    grid-template-areas: "root";\r\n    background-color: transparent;\r\n}\r\n.layout-module_rootBackground__vEs6e {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    overflow: hidden;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;     \r\n    height:100%;\r\n    width: 100%;\r\n    z-index: 0;\r\n    grid-area: root;\r\n}\r\n.layout-module_rootLayout__TePvr {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-area: root;\r\n    grid-template-columns: min-content minmax(0,1fr);\r\n    grid-template-rows: 50px minmax(0,1fr);   \r\n    z-index: 1;   \r\n    overflow: auto;\r\n    overflow-x: hidden;\r\n    background-color: transparent;\r\n    container-type: inline-size;\r\n}\r\n.layout-module_mainLayout__a8Tb9 {\r\n    box-sizing: border-box;\r\n    z-index: 2;\r\n    grid-row: 2;\r\n    grid-column: 2;\r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 0;\r\n}\r\n\r\n@container (max-width: 576px) {\r\n  .layout-module_mainLayout__a8Tb9 {    \r\n    grid-column: 1 / span 2 ;\r\n }\r\n}\r\n'),b.Aside=x,b.Content=g,b.Header=y;const _=e=>({r:parseInt(e.slice(1,3),16),g:parseInt(e.slice(3,5),16),b:parseInt(e.slice(5,7),16),a:9===e.length?(parseInt(e.slice(7,9),16)/255).toFixed(2):1});exports.BaseLayout=b,exports.FullScreenButton=function(r){const t=!!document.fullscreenElement,[o,i]=n.useState(t),a=()=>{i(!!document.fullscreenElement)},d=e=>{"F11"===e.code&&(e.preventDefault(),l())};n.useEffect(()=>(document.addEventListener("fullscreenchange",a),document.addEventListener("keydown",d,!0),()=>{document.removeEventListener("fullscreenchange",a),document.removeEventListener("keydown",d)}),[]);const l=()=>{o?document.exitFullscreen():document.documentElement.requestFullscreen()};if(!r.buttons||r.buttons.length<2)return e.jsx(e.Fragment,{});const[s,u]=r.buttons,c=o?s:u;return n.cloneElement(c,{onClick:e=>{console.log(e),l()}})},exports.LayoutBackground=i,exports.createConfigActionContext=()=>c,exports.createConfigStateContext=()=>m,exports.defaultConfig=u,exports.defaultSkinData=s,exports.defineConfig=function(e){return e},exports.getAvatarInitials=function(e){if(!e)return"";const n=Array.from(e);if(0===n.length)return"";const r=n[0];return function(e){if(0===e.length)return!1;const n=e.codePointAt(0);return n>=19968&&n<=40959||n>=13312&&n<=19903||n>=12352&&n<=12543||n>=44032&&n<=55215||n>=65280&&n<=65519||n>=126976&&n<=129791||n>=127744&&n<=128511||n>=128640&&n<=128767||n>=129280&&n<=129535||n>=9728&&n<=9983||n>=9984&&n<=10175}(r)?r:n.slice(0,2).join("")},exports.getLayoutTheme=e=>{if("system"==e){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}return e},exports.hexToRgb=e=>{const{r:n,g:r,b:t}=_(e);return{r:n,g:r,b:t}},exports.hexToRgbaString=(e,n)=>{const{r:r,g:t,b:o,a:i}=_(e);return`rgba(${r}, ${t}, ${o}, ${n??i})`},exports.useConfigAction=()=>n.useContext(c),exports.useConfigState=h,exports.useTheme=()=>h().theme;

package/dist/index.d.ts

@@ -41,10 +41,14 @@ interface LayoutConfig {
     menuIconSize?: number;
     compact?: boolean;
     splitMenu?: boolean;
+    asideMenuInline?: boolean;
+    asideMenuGroup?: boolean;
     hideBorder?: boolean;
     hideTitle?: boolean;
     hideFooter?: boolean;
     hideBreadcrumb?: boolean;
+    asideTransparent?: boolean;
+    headerTransparent?: boolean;
     containerTransparent?: boolean;
     userInfo?: UserInfo;
     brandInfo?: BrandInfo;
@@ -113,7 +117,7 @@ interface RootLayoutProps<T> extends LayoutProps {
 interface ContainerProps extends LayoutProps {
     mode?: ContainerMode;
     stretch?: ContainerStretch;
-    bordered?: boolean;
+    hideBorder?: boolean;
     hideTitle?: boolean;
     hideBreadcrumb?: boolean;
     hideFooter?: boolean;

package/dist/index.esm.js

@@ -1 +1 @@
-import{jsx as r,Fragment as e,jsxs as n}from"react/jsx-runtime";import t,{createContext as o,useContext as i,useState as a,useEffect as d}from"react";function l(r,e){void 0===e&&(e={});var n=e.insertAt;if(r&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=r:o.appendChild(document.createTextNode(r))}}var s="Layout-module_rootBackground__j3UVG",u="Layout-module_mainLayout__6W9W9";function c(){return r("div",{className:s,children:"55555"})}function h(r){return r}l('@layer base {\r\n    html, body {\r\n        padding: 0;\r\n        margin: 0;\r\n        border: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        overflow: hidden;\r\n    }\r\n    #Layout-module_root__3x-pW {        \r\n        text-align: initial;\r\n        width: 100%;\r\n        height: 100%;\r\n    }   \r\n}\r\n.Layout-module_rootBox__3JHjy {\r\n    box-sizing: border-box;  \r\n    width: 100%;\r\n    height:100%;    \r\n    text-align: initial;  \r\n    display: grid;\r\n    grid-template-areas: "root";\r\n    background-color: transparent;\r\n}\r\n.Layout-module_rootBackground__j3UVG {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    overflow: hidden;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;     \r\n    height:100%;\r\n    width: 100%;\r\n    z-index: 0;\r\n    grid-area: root;\r\n}\r\n.Layout-module_rootLayout__jVEEF {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-area: root;\r\n    grid-template-columns: auto 1fr;\r\n    grid-template-rows: 50px 1fr;   \r\n    z-index: 1;   \r\n    overflow: auto;\r\n    background-color: transparent;    \r\n}\r\n.Layout-module_mainLayout__6W9W9 {\r\n    box-sizing: border-box;\r\n    grid-row: 2;\r\n    grid-column: 2;\r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 0;\r\n}\r\n');const m=Symbol("LayoutAside"),g=Symbol("LayoutContent"),y=Symbol("LayoutHeader"),f={icon:"",name:"default",themeType:"tidy",theme:["light","dark"]},b={headerHeight:50,asideCollapsedWidth:52,asideWidth:260,layoutType:"leftMenu",theme:"system",primaryColor:"#417ffb",skinName:f.name},p=o({setTheme:()=>{},setLayoutConfig:()=>{},setLocale:()=>{}}),x=o({locale:"en-US",languages:[],theme:"system",layoutConfig:{},themeSkin:f,themeSkinMap:{tidy:[],rich:[]}}),_=()=>p,w=()=>x,v=()=>i(x),L=()=>i(p),k=()=>v().theme;function E(e){return r("div",{className:u,...e,children:e.children})}function z(n){return r(e,{children:n.children})}function C(n){return r(e,{children:n.children})}E.displayName="LayoutContent",E.role=g,z.displayName="LayoutAside",z.role=m,C.displayName="LayoutHeader",C.role=y;var N="layout-module_rootBox__Y8bEx",T="layout-module_rootLayout__TePvr";function B(o){let i=null,a=null,d=null;t.Children.forEach(o.children,r=>{const e=r.type.role;e===y?i=r:e===g?a=r:e===m&&(d=r)});const l={gridTemplateRows:`${o.headerHeight}px 1fr`};return r(e,{children:n("div",{ref:o.ref,className:N,style:{...o.style},children:[r(c,{}),n("div",{className:T,style:l,children:[d,i,a]})]})})}function S(n){const o=!!document.fullscreenElement,[i,l]=a(o),s=()=>{l(!!document.fullscreenElement)},u=r=>{"F11"===r.code&&(r.preventDefault(),c())};d(()=>(document.addEventListener("fullscreenchange",s),document.addEventListener("keydown",u,!0),()=>{document.removeEventListener("fullscreenchange",s),document.removeEventListener("keydown",u)}),[]);const c=()=>{i?document.exitFullscreen():document.documentElement.requestFullscreen()};if(!n.buttons||n.buttons.length<2)return r(e,{});const[h,m]=n.buttons,g=i?h:m;return t.cloneElement(g,{onClick:r=>{console.log(r),c()}})}function W(r){if(!r)return"";const e=Array.from(r);if(0===e.length)return"";const n=e[0];return function(r){if(0===r.length)return!1;const e=r.codePointAt(0);return e>=19968&&e<=40959||e>=13312&&e<=19903||e>=12352&&e<=12543||e>=44032&&e<=55215||e>=65280&&e<=65519||e>=126976&&e<=129791||e>=127744&&e<=128511||e>=128640&&e<=128767||e>=129280&&e<=129535||e>=9728&&e<=9983||e>=9984&&e<=10175}(n)?n:e.slice(0,2).join("")}l('@layer base {\r\n    html, body {\r\n        padding: 0;\r\n        margin: 0;\r\n        border: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        overflow: hidden;\r\n    }\r\n    #layout-module_root__0efzq {        \r\n        text-align: initial;\r\n        width: 100%;\r\n        height: 100%;\r\n    }   \r\n}\r\n.layout-module_rootBox__Y8bEx {\r\n    box-sizing: border-box;  \r\n    width: 100%;\r\n    height:100%;    \r\n    text-align: initial;  \r\n    display: grid;\r\n    grid-template-areas: "root";\r\n    background-color: transparent;\r\n}\r\n.layout-module_rootBackground__vEs6e {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    overflow: hidden;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;     \r\n    height:100%;\r\n    width: 100%;\r\n    z-index: 0;\r\n    grid-area: root;\r\n}\r\n.layout-module_rootLayout__TePvr {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-area: root;\r\n    grid-template-columns: auto 1fr;\r\n    grid-template-rows: 50px 1fr;   \r\n    z-index: 1;   \r\n    overflow: auto;\r\n    background-color: transparent;    \r\n}\r\n.layout-module_mainLayout__a8Tb9 {\r\n    box-sizing: border-box;\r\n    grid-row: 2;\r\n    grid-column: 2;\r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 0;\r\n}\r\n'),B.Aside=z,B.Content=E,B.Header=C;const j=r=>({r:parseInt(r.slice(1,3),16),g:parseInt(r.slice(3,5),16),b:parseInt(r.slice(5,7),16),a:9===r.length?(parseInt(r.slice(7,9),16)/255).toFixed(2):1}),A=r=>{const{r:e,g:n,b:t}=j(r);return{r:e,g:n,b:t}},H=(r,e)=>{const{r:n,g:t,b:o,a:i}=j(r);return`rgba(${n}, ${t}, ${o}, ${e??i})`},F=r=>{if("system"==r){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}return r};export{B as BaseLayout,S as FullScreenButton,c as LayoutBackground,_ as createConfigActionContext,w as createConfigStateContext,b as defaultConfig,f as defaultSkinData,h as defineConfig,W as getAvatarInitials,F as getLayoutTheme,A as hexToRgb,H as hexToRgbaString,L as useConfigAction,v as useConfigState,k as useTheme};
+import{jsx as n,Fragment as r,jsxs as e}from"react/jsx-runtime";import t,{createContext as o,useContext as i,useState as a,useEffect as d}from"react";function l(n,r){void 0===r&&(r={});var e=r.insertAt;if(n&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===e&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n))}}var u="Layout-module_rootBackground__j3UVG",s="Layout-module_mainLayout__6W9W9";function c(){return n("div",{className:u,children:"55555"})}function m(n){return n}l('@layer base {\r\n    html, body {\r\n        padding: 0;\r\n        margin: 0;\r\n        border: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        overflow: hidden;\r\n    }\r\n    #Layout-module_root__3x-pW {        \r\n        text-align: initial;\r\n        width: 100%;\r\n        height: 100%;\r\n    }   \r\n}\r\n.Layout-module_rootBox__3JHjy {\r\n    box-sizing: border-box;  \r\n    width: 100%;\r\n    height:100%;    \r\n    text-align: initial;  \r\n    display: grid;\r\n    grid-template-areas: "root";\r\n    background-color: transparent;\r\n}\r\n.Layout-module_rootBackground__j3UVG {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    overflow: hidden;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;     \r\n    height:100%;\r\n    width: 100%;\r\n    z-index: 0;\r\n    grid-area: root;\r\n}\r\n.Layout-module_rootLayout__jVEEF {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-area: root;\r\n    grid-template-columns: min-content minmax(0,1fr);\r\n    grid-template-rows: 50px minmax(0,1fr);   \r\n    z-index: 1;   \r\n    overflow: auto;\r\n    overflow-x: hidden;\r\n    background-color: transparent;\r\n    container-type: inline-size;\r\n}\r\n.Layout-module_mainLayout__6W9W9 {\r\n    box-sizing: border-box;\r\n    z-index: 2;\r\n    grid-row: 2;\r\n    grid-column: 2;\r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 0;\r\n}\r\n\r\n@container (max-width: 576px) {\r\n  .Layout-module_mainLayout__6W9W9 {    \r\n    grid-column: 1 / span 2 ;\r\n }\r\n}\r\n');const h=Symbol("LayoutAside"),g=Symbol("LayoutContent"),y=Symbol("LayoutHeader"),f={icon:"",name:"default",themeType:"tidy",theme:["light","dark"]},p={headerHeight:50,asideCollapsedWidth:52,asideWidth:260,layoutType:"leftMenu",theme:"system",primaryColor:"#417ffb",skinName:f.name},x=o({setTheme:()=>{},setLayoutConfig:()=>{},setLocale:()=>{}}),b=o({locale:"en-US",languages:[],theme:"system",layoutConfig:{},themeSkin:f,themeSkinMap:{tidy:[],rich:[]}}),_=()=>x,w=()=>b,v=()=>i(b),L=()=>i(x),k=()=>v().theme;function z(r){return n("div",{className:s,...r,children:r.children})}function E(e){return n(r,{children:e.children})}function C(e){return n(r,{children:e.children})}z.displayName="LayoutContent",z.role=g,E.displayName="LayoutAside",E.role=h,C.displayName="LayoutHeader",C.role=y;var T="layout-module_rootBox__Y8bEx",N="layout-module_rootLayout__TePvr";function W(o){let i=null,a=null,d=null;t.Children.forEach(o.children,n=>{const r=n.type.role;r===y?i=n:r===g?a=n:r===h&&(d=n)});const l={gridTemplateRows:`${o.headerHeight}px 1fr`};return n(r,{children:e("div",{ref:o.ref,className:T,style:{...o.style},children:[n(c,{}),e("div",{className:N,style:l,children:[d,i,a]})]})})}function B(e){const o=!!document.fullscreenElement,[i,l]=a(o),u=()=>{l(!!document.fullscreenElement)},s=n=>{"F11"===n.code&&(n.preventDefault(),c())};d(()=>(document.addEventListener("fullscreenchange",u),document.addEventListener("keydown",s,!0),()=>{document.removeEventListener("fullscreenchange",u),document.removeEventListener("keydown",s)}),[]);const c=()=>{i?document.exitFullscreen():document.documentElement.requestFullscreen()};if(!e.buttons||e.buttons.length<2)return n(r,{});const[m,h]=e.buttons,g=i?m:h;return t.cloneElement(g,{onClick:n=>{console.log(n),c()}})}function S(n){if(!n)return"";const r=Array.from(n);if(0===r.length)return"";const e=r[0];return function(n){if(0===n.length)return!1;const r=n.codePointAt(0);return r>=19968&&r<=40959||r>=13312&&r<=19903||r>=12352&&r<=12543||r>=44032&&r<=55215||r>=65280&&r<=65519||r>=126976&&r<=129791||r>=127744&&r<=128511||r>=128640&&r<=128767||r>=129280&&r<=129535||r>=9728&&r<=9983||r>=9984&&r<=10175}(e)?e:r.slice(0,2).join("")}l('@layer base {\r\n    html, body {\r\n        padding: 0;\r\n        margin: 0;\r\n        border: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        overflow: hidden;\r\n    }\r\n    #layout-module_root__0efzq {        \r\n        text-align: initial;\r\n        width: 100%;\r\n        height: 100%;\r\n    }   \r\n}\r\n.layout-module_rootBox__Y8bEx {\r\n    box-sizing: border-box;  \r\n    width: 100%;\r\n    height:100%;    \r\n    text-align: initial;  \r\n    display: grid;\r\n    grid-template-areas: "root";\r\n    background-color: transparent;\r\n}\r\n.layout-module_rootBackground__vEs6e {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    overflow: hidden;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;     \r\n    height:100%;\r\n    width: 100%;\r\n    z-index: 0;\r\n    grid-area: root;\r\n}\r\n.layout-module_rootLayout__TePvr {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-area: root;\r\n    grid-template-columns: min-content minmax(0,1fr);\r\n    grid-template-rows: 50px minmax(0,1fr);   \r\n    z-index: 1;   \r\n    overflow: auto;\r\n    overflow-x: hidden;\r\n    background-color: transparent;\r\n    container-type: inline-size;\r\n}\r\n.layout-module_mainLayout__a8Tb9 {\r\n    box-sizing: border-box;\r\n    z-index: 2;\r\n    grid-row: 2;\r\n    grid-column: 2;\r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 0;\r\n}\r\n\r\n@container (max-width: 576px) {\r\n  .layout-module_mainLayout__a8Tb9 {    \r\n    grid-column: 1 / span 2 ;\r\n }\r\n}\r\n'),W.Aside=E,W.Content=z,W.Header=C;const j=n=>({r:parseInt(n.slice(1,3),16),g:parseInt(n.slice(3,5),16),b:parseInt(n.slice(5,7),16),a:9===n.length?(parseInt(n.slice(7,9),16)/255).toFixed(2):1}),A=n=>{const{r:r,g:e,b:t}=j(n);return{r:r,g:e,b:t}},H=(n,r)=>{const{r:e,g:t,b:o,a:i}=j(n);return`rgba(${e}, ${t}, ${o}, ${r??i})`},F=n=>{if("system"==n){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}return n};export{W as BaseLayout,B as FullScreenButton,c as LayoutBackground,_ as createConfigActionContext,w as createConfigStateContext,p as defaultConfig,f as defaultSkinData,m as defineConfig,S as getAvatarInitials,F as getLayoutTheme,A as hexToRgb,H as hexToRgbaString,L as useConfigAction,v as useConfigState,k as useTheme};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminui-dev/layout",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "adminui.dev's layout",
   "keywords": [
     "layout",