@adminui-dev/layout 1.0.5 → 1.0.6

package/dist/components/LayoutAside.d.ts

@@ -1,4 +1,9 @@
 import { LAYOUT_ASIDE_KEY } from "./LayoutContext";
+/**
+ * Aside for layout
+ * @param props
+ * @returns
+ */
 declare function LayoutAside(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace LayoutAside {
     var displayName: string;

package/dist/components/LayoutBackground.d.ts

@@ -1 +1,12 @@
-export default function (): import("react/jsx-runtime").JSX.Element;
+import { LAYOUT_BACKGROUND_KEY } from "./LayoutContext";
+/**
+ * Background for layout
+ * @param props
+ * @returns
+ */
+declare function LayoutBackground(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace LayoutBackground {
+    var displayName: string;
+    var role: typeof LAYOUT_BACKGROUND_KEY;
+}
+export default LayoutBackground;

package/dist/components/LayoutContent.d.ts

@@ -1,4 +1,9 @@
 import { LAYOUT_CONTENT_KEY } from './LayoutContext';
+/**
+ * Content for layout
+ * @param props
+ * @returns
+ */
 declare function LayoutContent(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace LayoutContent {
     var displayName: string;

package/dist/components/LayoutContext.d.ts

@@ -1,12 +1,12 @@
-import type { LayoutConfig, ThemeSkin, ConfigActionDispatcher, ConfigStateDispatcher } from "./typings";
+import type { LayoutConfig, ConfigActionDispatcher, ConfigStateDispatcher } from "./typings";
 export declare function defineConfig(config: LayoutConfig): LayoutConfig;
 export declare const LAYOUT_ASIDE_KEY: unique symbol;
 export declare const LAYOUT_CONTENT_KEY: unique symbol;
 export declare const LAYOUT_HEADER_KEY: unique symbol;
-export declare const defaultSkinData: ThemeSkin;
+export declare const LAYOUT_BACKGROUND_KEY: unique symbol;
 export declare const defaultConfig: LayoutConfig;
 export declare const createConfigActionContext: () => import("react").Context<ConfigActionDispatcher>;
 export declare const createConfigStateContext: () => import("react").Context<ConfigStateDispatcher>;
 export declare const useConfigState: () => ConfigStateDispatcher;
 export declare const useConfigAction: () => ConfigActionDispatcher;
-export declare const useTheme: () => import("./typings").Theme;
+export declare const useTheme: () => import("./typings").Theme | undefined;

package/dist/components/LayoutHeader.d.ts

@@ -1,4 +1,9 @@
 import { LAYOUT_HEADER_KEY } from "./LayoutContext";
+/**
+ * Header for layout
+ * @param props
+ * @returns
+ */
 declare function LayoutHeader(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace LayoutHeader {
     var displayName: string;

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
 import { BaseLayout } from "./Layout";
 import FullScreenButton from "./FullScreenButton";
 import LayoutBackground from "./LayoutBackground";
-import { createConfigActionContext, createConfigStateContext, useConfigState, useConfigAction, useTheme, defaultConfig, defineConfig, defaultSkinData } from "./LayoutContext";
+import { createConfigActionContext, createConfigStateContext, useConfigState, useConfigAction, useTheme, defaultConfig, defineConfig } from "./LayoutContext";
 import { getAvatarInitials, hexToRgb, hexToRgbaString, getLayoutTheme } from "./common";
-export { BaseLayout, LayoutBackground, FullScreenButton, createConfigActionContext, createConfigStateContext, useConfigState, useConfigAction, useTheme, getAvatarInitials, hexToRgb, hexToRgbaString, defaultConfig, defaultSkinData, getLayoutTheme, defineConfig };
+export { BaseLayout, LayoutBackground, FullScreenButton, createConfigActionContext, createConfigStateContext, useConfigState, useConfigAction, useTheme, getAvatarInitials, hexToRgb, hexToRgbaString, defaultConfig, getLayoutTheme, defineConfig };

package/dist/components/layout.d.ts

@@ -1,3 +1,4 @@
+import LayoutBackground from './LayoutBackground';
 import type { BaseLayoutProps } from './typings';
 /**
  * Base layout
@@ -9,5 +10,6 @@ declare namespace BaseLayout {
     var Aside: typeof import("./LayoutAside").default;
     var Content: typeof import("./LayoutContent").default;
     var Header: typeof import("./LayoutHeader").default;
+    var Background: typeof LayoutBackground;
 }
 export { BaseLayout };

package/dist/components/typings.d.ts

@@ -9,13 +9,12 @@ type AvatarPosition = "rightTop" | "leftBottom" | "none";
 type ConfigStateDispatcher = {
     layoutConfig: LayoutConfig;
     locale: string;
-    theme: Theme;
-    themeSkin: ThemeSkin;
+    themeSkin?: ThemeSkin;
     themeSkinMap: Record<SkinType, ThemeSkin[]>;
     languages: Language[];
+    menuDataMap?: Record<string, MenuData[]>;
 };
 type ConfigActionDispatcher = {
-    setTheme: (theme: Theme) => void;
     setLocale: (locale: string) => void;
     setLayoutConfig: (config: LayoutConfig) => void;
 };
@@ -48,6 +47,9 @@ interface LayoutConfig {
     asideTransparent?: boolean;
     headerTransparent?: boolean;
     containerTransparent?: boolean;
+    asideBlur?: boolean;
+    headerBlur?: boolean;
+    containerBlur?: boolean;
     collapsedPosition?: Position;
     avatarPosition?: AvatarPosition;
     userInfo?: UserInfo;
@@ -55,13 +57,16 @@ interface LayoutConfig {
 }
 interface ThemeSkin {
     name: string;
-    icon: string;
+    icon?: string;
     label?: string;
     theme: LayoutTheme[];
-    themeType: SkinType;
+    skinType: SkinType;
+    backgroundContent?: React.ReactNode;
     asideWidth?: number;
     primaryColor?: string;
-    asideCollapsedWidth?: number;
+    asideBlur?: boolean;
+    headerBlur?: boolean;
+    containerBlur?: boolean;
     layoutBorderColor?: string;
     headerStyle?: React.CSSProperties;
     asideStyle?: React.CSSProperties;
@@ -108,7 +113,7 @@ interface BaseLayoutProps extends LayoutProps {
 }
 interface RootLayoutProps<T> extends LayoutProps {
     layoutConfig?: LayoutConfig;
-    menuData?: MenuData[];
+    menuData?: MenuData;
     theme?: Theme;
     locale?: string;
     localeMessages?: Record<string, T>;

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),n=require("react");function t(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var r="Layout-module_rootBackground__j3UVG";function o(){return e.jsx("div",{className:r})}t("@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    }\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*, *:before, *:after {\r\n    box-sizing: border-box;\r\n}\r\n.Layout-module_rootBox__3JHjy {\r\n    text-rendering: optimizeLegibility;\r\n    -webkit-font-smoothing: antialiased;\r\n    -moz-osx-font-smoothing: grayscale;\r\n    width: 100%;\r\n    min-height: 100%;\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    min-height: 100%;\r\n    position: fixed;\r\n    z-index: 0;\r\n}\r\n.Layout-module_rootLayout__jVEEF {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    min-height: 100%;\r\n    display: flex; \r\n    flex-flow: row;\r\n    background-color: transparent;\r\n    container-type: inline-size;\r\n}\r\n\r\n.Layout-module_mainLayout__6W9W9 {\r\n    box-sizing: border-box;    \r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n}\r\n");const i=Symbol("LayoutAside"),a=Symbol("LayoutContent"),s=Symbol("LayoutHeader"),l={icon:"",name:"default",themeType:"tidy",theme:["light","dark"]},d={headerHeight:50,asideWidth:260,layoutType:"leftMenu",collapsedPosition:"bottom",avatarPosition:"rightTop",theme:"system",primaryColor:"#417ffb",skinName:l.name},u=n.createContext({setTheme:()=>{},setLayoutConfig:()=>{},setLocale:()=>{}}),c=n.createContext({locale:"en-US",languages:[],theme:"system",layoutConfig:{},themeSkin:l,themeSkinMap:{tidy:[],rich:[]}}),m=()=>n.useContext(c);function h(n){return e.jsx(e.Fragment,{children:n.children})}function g(n){return e.jsx(e.Fragment,{children:n.children})}function x(n){return e.jsx(e.Fragment,{children:n.children})}h.displayName="LayoutContent",h.role=a,g.displayName="LayoutAside",g.role=i,x.displayName="LayoutHeader",x.role=s;var f="layout-module_rootBox__Y8bEx",y="layout-module_rootLayout__TePvr",b="layout-module_mainLayout__a8Tb9";function p(t){let r=null,l=null,d=null;return n.Children.forEach(t.children,e=>{const n=e.type.role;n===s?r=e:n===a?l=e:n===i&&(d=e)}),e.jsx(e.Fragment,{children:e.jsxs("div",{ref:t.ref,className:f,style:{...t.style},children:[e.jsx(o,{}),e.jsxs("div",{className:y,children:[d,e.jsxs("div",{className:b,children:[r,l]})]})]})})}t("@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    }\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*, *:before, *:after {\r\n    box-sizing: border-box;\r\n}\r\n.layout-module_rootBox__Y8bEx {\r\n    text-rendering: optimizeLegibility;\r\n    -webkit-font-smoothing: antialiased;\r\n    -moz-osx-font-smoothing: grayscale;\r\n    width: 100%;\r\n    min-height: 100%;\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    min-height: 100%;\r\n    position: fixed;\r\n    z-index: 0;\r\n}\r\n.layout-module_rootLayout__TePvr {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    min-height: 100%;\r\n    display: flex; \r\n    flex-flow: row;\r\n    background-color: transparent;\r\n    container-type: inline-size;\r\n}\r\n\r\n.layout-module_mainLayout__a8Tb9 {\r\n    box-sizing: border-box;    \r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n}\r\n"),p.Aside=g,p.Content=h,p.Header=x;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=p,exports.FullScreenButton=function(t){const r=!!document.fullscreenElement,[o,i]=n.useState(r),a=()=>{i(!!document.fullscreenElement)},s=e=>{"F11"===e.code&&(e.preventDefault(),l())};n.useEffect(()=>(document.addEventListener("fullscreenchange",a),document.addEventListener("keydown",s,!0),()=>{document.removeEventListener("fullscreenchange",a),document.removeEventListener("keydown",s)}),[]);const l=()=>{o?document.exitFullscreen():document.documentElement.requestFullscreen()};if(!t.buttons||t.buttons.length<2)return e.jsx(e.Fragment,{});const[d,u]=t.buttons,c=o?d:u;return n.cloneElement(c,{onClick:e=>{console.log(e),l()}})},exports.LayoutBackground=o,exports.createConfigActionContext=()=>u,exports.createConfigStateContext=()=>c,exports.defaultConfig=d,exports.defaultSkinData=l,exports.defineConfig=function(e){return e},exports.getAvatarInitials=function(e){if(!e)return"";const n=Array.from(e);if(0===n.length)return"";const t=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}(t)?t: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:t,b:r}=_(e);return{r:n,g:t,b:r}},exports.hexToRgbaString=(e,n)=>{const{r:t,g:r,b:o,a:i}=_(e);return`rgba(${t}, ${r}, ${o}, ${n??i})`},exports.useConfigAction=()=>n.useContext(u),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";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    }\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*, *:before, *:after {\r\n    box-sizing: border-box;\r\n}\r\n.Layout-module_rootBox__3JHjy {\r\n    text-rendering: optimizeLegibility;\r\n    -webkit-font-smoothing: antialiased;\r\n    -moz-osx-font-smoothing: grayscale;\r\n    width: 100%;\r\n    min-height: 100%;\r\n}\r\n.Layout-module_rootBackground__j3UVG {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;   \r\n    width: 100%;  \r\n    min-width: 100vw;\r\n    height:100%;\r\n    min-height: 100vh;\r\n    overflow: hidden;\r\n    position: fixed;\r\n    z-index: 0;\r\n}\r\n.Layout-module_rootBackground__j3UVG>div{\r\n    width:100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n}\r\n.Layout-module_rootLayout__jVEEF {\r\n    position: relative;\r\n    z-index: 1;\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    min-height: 100%;\r\n    display: flex; \r\n    flex-flow: row;\r\n    background-color: transparent;\r\n    container-type: inline-size;\r\n}\r\n\r\n.Layout-module_mainLayout__6W9W9 {\r\n    box-sizing: border-box;    \r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n}\r\n");const o=Symbol("LayoutAside"),i=Symbol("LayoutContent"),a=Symbol("LayoutHeader"),l=Symbol("LayoutBackground"),s=n.createContext({setLayoutConfig:()=>{},setLocale:()=>{}}),d=n.createContext({locale:"en-US",languages:[],layoutConfig:{},themeSkinMap:{tidy:[],rich:[]}}),u=()=>n.useContext(d);function c(n){return e.jsx("div",{className:t,children:e.jsx(e.Fragment,{children:n.children})})}function h(n){return e.jsx(e.Fragment,{children:n.children})}function m(n){return e.jsx(e.Fragment,{children:n.children})}function g(n){return e.jsx(e.Fragment,{children:n.children})}c.displayName="LayoutBackground",c.role=l,h.displayName="LayoutContent",h.role=i,m.displayName="LayoutAside",m.role=o,g.displayName="LayoutHeader",g.role=a;var x="layout-module_rootBox__Y8bEx",y="layout-module_rootLayout__TePvr",f="layout-module_mainLayout__a8Tb9";function b(r){let t=null,s=null,d=null,u=null;return n.Children.forEach(r.children,e=>{const n=e.type.role;n===a?t=e:n===i?s=e:n===o?d=e:n===l&&(u=e)}),e.jsx(e.Fragment,{children:e.jsxs("div",{ref:r.ref,className:x,style:{...r.style},children:[u,e.jsxs("div",{className:y,children:[d,e.jsxs("div",{className:f,children:[t,s]})]})]})})}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    }\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*, *:before, *:after {\r\n    box-sizing: border-box;\r\n}\r\n.layout-module_rootBox__Y8bEx {\r\n    text-rendering: optimizeLegibility;\r\n    -webkit-font-smoothing: antialiased;\r\n    -moz-osx-font-smoothing: grayscale;\r\n    width: 100%;\r\n    min-height: 100%;\r\n}\r\n.layout-module_rootBackground__vEs6e {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;   \r\n    width: 100%;  \r\n    min-width: 100vw;\r\n    height:100%;\r\n    min-height: 100vh;\r\n    overflow: hidden;\r\n    position: fixed;\r\n    z-index: 0;\r\n}\r\n.layout-module_rootBackground__vEs6e>div{\r\n    width:100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n}\r\n.layout-module_rootLayout__TePvr {\r\n    position: relative;\r\n    z-index: 1;\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    min-height: 100%;\r\n    display: flex; \r\n    flex-flow: row;\r\n    background-color: transparent;\r\n    container-type: inline-size;\r\n}\r\n\r\n.layout-module_mainLayout__a8Tb9 {\r\n    box-sizing: border-box;    \r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n}\r\n"),b.Aside=m,b.Content=h,b.Header=g,b.Background=c;const p=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)},l=e=>{"F11"===e.code&&(e.preventDefault(),s())};n.useEffect(()=>(document.addEventListener("fullscreenchange",a),document.addEventListener("keydown",l,!0),()=>{document.removeEventListener("fullscreenchange",a),document.removeEventListener("keydown",l)}),[]);const s=()=>{o?document.exitFullscreen():document.documentElement.requestFullscreen()};if(!r.buttons||r.buttons.length<2)return e.jsx(e.Fragment,{});const[d,u]=r.buttons,c=o?d:u;return n.cloneElement(c,{onClick:e=>{console.log(e),s()}})},exports.LayoutBackground=c,exports.createConfigActionContext=()=>s,exports.createConfigStateContext=()=>d,exports.defaultConfig={headerHeight:50,asideWidth:260,layoutType:"leftMenu",collapsedPosition:"bottom",avatarPosition:"rightTop",theme:"system",primaryColor:"#417ffb"},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}=p(e);return{r:n,g:r,b:t}},exports.hexToRgbaString=(e,n)=>{const{r:r,g:t,b:o,a:i}=p(e);return`rgba(${r}, ${t}, ${o}, ${n??i})`},exports.useConfigAction=()=>n.useContext(s),exports.useConfigState=u,exports.useTheme=()=>u().layoutConfig.theme;

package/dist/index.d.ts

@@ -13,13 +13,12 @@ type AvatarPosition = "rightTop" | "leftBottom" | "none";
 type ConfigStateDispatcher = {
     layoutConfig: LayoutConfig;
     locale: string;
-    theme: Theme;
-    themeSkin: ThemeSkin;
+    themeSkin?: ThemeSkin;
     themeSkinMap: Record<SkinType, ThemeSkin[]>;
     languages: Language[];
+    menuDataMap?: Record<string, MenuData[]>;
 };
 type ConfigActionDispatcher = {
-    setTheme: (theme: Theme) => void;
     setLocale: (locale: string) => void;
     setLayoutConfig: (config: LayoutConfig) => void;
 };
@@ -52,6 +51,9 @@ interface LayoutConfig {
     asideTransparent?: boolean;
     headerTransparent?: boolean;
     containerTransparent?: boolean;
+    asideBlur?: boolean;
+    headerBlur?: boolean;
+    containerBlur?: boolean;
     collapsedPosition?: Position;
     avatarPosition?: AvatarPosition;
     userInfo?: UserInfo;
@@ -59,13 +61,16 @@ interface LayoutConfig {
 }
 interface ThemeSkin {
     name: string;
-    icon: string;
+    icon?: string;
     label?: string;
     theme: LayoutTheme[];
-    themeType: SkinType;
+    skinType: SkinType;
+    backgroundContent?: React.ReactNode;
     asideWidth?: number;
     primaryColor?: string;
-    asideCollapsedWidth?: number;
+    asideBlur?: boolean;
+    headerBlur?: boolean;
+    containerBlur?: boolean;
     layoutBorderColor?: string;
     headerStyle?: React.CSSProperties;
     asideStyle?: React.CSSProperties;
@@ -112,7 +117,7 @@ interface BaseLayoutProps extends LayoutProps {
 }
 interface RootLayoutProps<T> extends LayoutProps {
     layoutConfig?: LayoutConfig;
-    menuData?: MenuData[];
+    menuData?: MenuData;
     theme?: Theme;
     locale?: string;
     localeMessages?: Record<string, T>;
@@ -133,32 +138,58 @@ declare function defineConfig(config: LayoutConfig): LayoutConfig;
 declare const LAYOUT_ASIDE_KEY: unique symbol;
 declare const LAYOUT_CONTENT_KEY: unique symbol;
 declare const LAYOUT_HEADER_KEY: unique symbol;
-declare const defaultSkinData: ThemeSkin;
+declare const LAYOUT_BACKGROUND_KEY: unique symbol;
 declare const defaultConfig: LayoutConfig;
 declare const createConfigActionContext: () => react.Context<ConfigActionDispatcher>;
 declare const createConfigStateContext: () => react.Context<ConfigStateDispatcher>;
 declare const useConfigState: () => ConfigStateDispatcher;
 declare const useConfigAction: () => ConfigActionDispatcher;
-declare const useTheme: () => Theme;
+declare const useTheme: () => Theme | undefined;
 
+/**
+ * Header for layout
+ * @param props
+ * @returns
+ */
 declare function LayoutHeader(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare namespace LayoutHeader {
     var displayName: string;
     var role: typeof LAYOUT_HEADER_KEY;
 }
 
+/**
+ * Content for layout
+ * @param props
+ * @returns
+ */
 declare function LayoutContent(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare namespace LayoutContent {
     var displayName: string;
     var role: typeof LAYOUT_CONTENT_KEY;
 }
 
+/**
+ * Aside for layout
+ * @param props
+ * @returns
+ */
 declare function LayoutAside(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare namespace LayoutAside {
     var displayName: string;
     var role: typeof LAYOUT_ASIDE_KEY;
 }
 
+/**
+ * Background for layout
+ * @param props
+ * @returns
+ */
+declare function LayoutBackground(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare namespace LayoutBackground {
+    var displayName: string;
+    var role: typeof LAYOUT_BACKGROUND_KEY;
+}
+
 /**
  * Base layout
  * @param props layout properites
@@ -169,6 +200,7 @@ declare namespace BaseLayout {
     var Aside: typeof LayoutAside;
     var Content: typeof LayoutContent;
     var Header: typeof LayoutHeader;
+    var Background: typeof LayoutBackground;
 }
 
 /**
@@ -176,12 +208,10 @@ declare namespace BaseLayout {
  * @param props max and min button icon
  * @returns
  */
-declare function export_default$1(props: {
+declare function export_default(props: {
     buttons: react__default.ReactElement[];
 }): react_jsx_runtime.JSX.Element;
 
-declare function export_default(): react_jsx_runtime.JSX.Element;
-
 declare function getAvatarInitials(name: string): string;
 declare const hexToRgb: (color: string) => {
     r: number;
@@ -191,5 +221,5 @@ declare const hexToRgb: (color: string) => {
 declare const hexToRgbaString: (color: string, alpha?: number) => string;
 declare const getLayoutTheme: (theme: Theme) => LayoutTheme;
 
-export { BaseLayout, export_default$1 as FullScreenButton, export_default as LayoutBackground, createConfigActionContext, createConfigStateContext, defaultConfig, defaultSkinData, defineConfig, getAvatarInitials, getLayoutTheme, hexToRgb, hexToRgbaString, useConfigAction, useConfigState, useTheme };
+export { BaseLayout, export_default as FullScreenButton, LayoutBackground, createConfigActionContext, createConfigStateContext, defaultConfig, defineConfig, getAvatarInitials, getLayoutTheme, hexToRgb, hexToRgbaString, useConfigAction, useConfigState, useTheme };
 export type { AvatarPosition, BaseLayoutProps, BrandInfo, ConfigActionDispatcher, ConfigStateDispatcher, ContainerMode, ContainerProps, ContainerStretch, Language, LayoutConfig, LayoutProps, LayoutTheme, LayoutType, LocaleMessageData, MenuData, OutletContainer, Position, RootLayoutProps, SkinType, Theme, ThemeSkin, UserInfo };

package/dist/index.esm.js

@@ -1 +1 @@
-import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import t,{createContext as o,useContext as i,useState as l,useEffect as a}from"react";function d(n,e){void 0===e&&(e={});var r=e.insertAt;if(n&&"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=n:o.appendChild(document.createTextNode(n))}}var s="Layout-module_rootBackground__j3UVG";function u(){return n("div",{className:s})}function c(n){return n}d("@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    }\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*, *:before, *:after {\r\n    box-sizing: border-box;\r\n}\r\n.Layout-module_rootBox__3JHjy {\r\n    text-rendering: optimizeLegibility;\r\n    -webkit-font-smoothing: antialiased;\r\n    -moz-osx-font-smoothing: grayscale;\r\n    width: 100%;\r\n    min-height: 100%;\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    min-height: 100%;\r\n    position: fixed;\r\n    z-index: 0;\r\n}\r\n.Layout-module_rootLayout__jVEEF {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    min-height: 100%;\r\n    display: flex; \r\n    flex-flow: row;\r\n    background-color: transparent;\r\n    container-type: inline-size;\r\n}\r\n\r\n.Layout-module_mainLayout__6W9W9 {\r\n    box-sizing: border-box;    \r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n}\r\n");const m=Symbol("LayoutAside"),h=Symbol("LayoutContent"),y=Symbol("LayoutHeader"),f={icon:"",name:"default",themeType:"tidy",theme:["light","dark"]},g={headerHeight:50,asideWidth:260,layoutType:"leftMenu",collapsedPosition:"bottom",avatarPosition:"rightTop",theme:"system",primaryColor:"#417ffb",skinName:f.name},b=o({setTheme:()=>{},setLayoutConfig:()=>{},setLocale:()=>{}}),x=o({locale:"en-US",languages:[],theme:"system",layoutConfig:{},themeSkin:f,themeSkinMap:{tidy:[],rich:[]}}),p=()=>b,_=()=>x,L=()=>i(x),v=()=>i(b),w=()=>L().theme;function k(r){return n(e,{children:r.children})}function z(r){return n(e,{children:r.children})}function E(r){return n(e,{children:r.children})}k.displayName="LayoutContent",k.role=h,z.displayName="LayoutAside",z.role=m,E.displayName="LayoutHeader",E.role=y;var C="layout-module_rootBox__Y8bEx",T="layout-module_rootLayout__TePvr",N="layout-module_mainLayout__a8Tb9";function B(o){let i=null,l=null,a=null;return t.Children.forEach(o.children,n=>{const e=n.type.role;e===y?i=n:e===h?l=n:e===m&&(a=n)}),n(e,{children:r("div",{ref:o.ref,className:C,style:{...o.style},children:[n(u,{}),r("div",{className:T,children:[a,r("div",{className:N,children:[i,l]})]})]})})}function S(r){const o=!!document.fullscreenElement,[i,d]=l(o),s=()=>{d(!!document.fullscreenElement)},u=n=>{"F11"===n.code&&(n.preventDefault(),c())};a(()=>(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(!r.buttons||r.buttons.length<2)return n(e,{});const[m,h]=r.buttons,y=i?m:h;return t.cloneElement(y,{onClick:n=>{console.log(n),c()}})}function j(n){if(!n)return"";const e=Array.from(n);if(0===e.length)return"";const r=e[0];return function(n){if(0===n.length)return!1;const e=n.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}(r)?r:e.slice(0,2).join("")}d("@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    }\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*, *:before, *:after {\r\n    box-sizing: border-box;\r\n}\r\n.layout-module_rootBox__Y8bEx {\r\n    text-rendering: optimizeLegibility;\r\n    -webkit-font-smoothing: antialiased;\r\n    -moz-osx-font-smoothing: grayscale;\r\n    width: 100%;\r\n    min-height: 100%;\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    min-height: 100%;\r\n    position: fixed;\r\n    z-index: 0;\r\n}\r\n.layout-module_rootLayout__TePvr {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    min-height: 100%;\r\n    display: flex; \r\n    flex-flow: row;\r\n    background-color: transparent;\r\n    container-type: inline-size;\r\n}\r\n\r\n.layout-module_mainLayout__a8Tb9 {\r\n    box-sizing: border-box;    \r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n}\r\n"),B.Aside=z,B.Content=k,B.Header=E;const A=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}),F=n=>{const{r:e,g:r,b:t}=A(n);return{r:e,g:r,b:t}},H=(n,e)=>{const{r:r,g:t,b:o,a:i}=A(n);return`rgba(${r}, ${t}, ${o}, ${e??i})`},P=n=>{if("system"==n){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}return n};export{B as BaseLayout,S as FullScreenButton,u as LayoutBackground,p as createConfigActionContext,_ as createConfigStateContext,g as defaultConfig,f as defaultSkinData,c as defineConfig,j as getAvatarInitials,P as getLayoutTheme,F as hexToRgb,H as hexToRgbaString,v as useConfigAction,L as useConfigState,w as useTheme};
+import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import t,{createContext as o,useContext as i,useState as l,useEffect as d}from"react";function a(n,e){void 0===e&&(e={});var r=e.insertAt;if(n&&"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=n:o.appendChild(document.createTextNode(n))}}var s="Layout-module_rootBackground__j3UVG";function u(n){return n}a("@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    }\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*, *:before, *:after {\r\n    box-sizing: border-box;\r\n}\r\n.Layout-module_rootBox__3JHjy {\r\n    text-rendering: optimizeLegibility;\r\n    -webkit-font-smoothing: antialiased;\r\n    -moz-osx-font-smoothing: grayscale;\r\n    width: 100%;\r\n    min-height: 100%;\r\n}\r\n.Layout-module_rootBackground__j3UVG {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;   \r\n    width: 100%;  \r\n    min-width: 100vw;\r\n    height:100%;\r\n    min-height: 100vh;\r\n    overflow: hidden;\r\n    position: fixed;\r\n    z-index: 0;\r\n}\r\n.Layout-module_rootBackground__j3UVG>div{\r\n    width:100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n}\r\n.Layout-module_rootLayout__jVEEF {\r\n    position: relative;\r\n    z-index: 1;\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    min-height: 100%;\r\n    display: flex; \r\n    flex-flow: row;\r\n    background-color: transparent;\r\n    container-type: inline-size;\r\n}\r\n\r\n.Layout-module_mainLayout__6W9W9 {\r\n    box-sizing: border-box;    \r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n}\r\n");const c=Symbol("LayoutAside"),h=Symbol("LayoutContent"),m=Symbol("LayoutHeader"),y=Symbol("LayoutBackground"),g={headerHeight:50,asideWidth:260,layoutType:"leftMenu",collapsedPosition:"bottom",avatarPosition:"rightTop",theme:"system",primaryColor:"#417ffb"},f=o({setLayoutConfig:()=>{},setLocale:()=>{}}),b=o({locale:"en-US",languages:[],layoutConfig:{},themeSkinMap:{tidy:[],rich:[]}}),x=()=>f,_=()=>b,p=()=>i(b),v=()=>i(f),w=()=>p().layoutConfig.theme;function L(r){return n("div",{className:s,children:n(e,{children:r.children})})}function k(r){return n(e,{children:r.children})}function z(r){return n(e,{children:r.children})}function E(r){return n(e,{children:r.children})}L.displayName="LayoutBackground",L.role=y,k.displayName="LayoutContent",k.role=h,z.displayName="LayoutAside",z.role=c,E.displayName="LayoutHeader",E.role=m;var B="layout-module_rootBox__Y8bEx",C="layout-module_rootLayout__TePvr",N="layout-module_mainLayout__a8Tb9";function T(o){let i=null,l=null,d=null,a=null;return t.Children.forEach(o.children,n=>{const e=n.type.role;e===m?i=n:e===h?l=n:e===c?d=n:e===y&&(a=n)}),n(e,{children:r("div",{ref:o.ref,className:B,style:{...o.style},children:[a,r("div",{className:C,children:[d,r("div",{className:N,children:[i,l]})]})]})})}function S(r){const o=!!document.fullscreenElement,[i,a]=l(o),s=()=>{a(!!document.fullscreenElement)},u=n=>{"F11"===n.code&&(n.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(!r.buttons||r.buttons.length<2)return n(e,{});const[h,m]=r.buttons,y=i?h:m;return t.cloneElement(y,{onClick:n=>{console.log(n),c()}})}function j(n){if(!n)return"";const e=Array.from(n);if(0===e.length)return"";const r=e[0];return function(n){if(0===n.length)return!1;const e=n.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}(r)?r:e.slice(0,2).join("")}a("@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    }\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*, *:before, *:after {\r\n    box-sizing: border-box;\r\n}\r\n.layout-module_rootBox__Y8bEx {\r\n    text-rendering: optimizeLegibility;\r\n    -webkit-font-smoothing: antialiased;\r\n    -moz-osx-font-smoothing: grayscale;\r\n    width: 100%;\r\n    min-height: 100%;\r\n}\r\n.layout-module_rootBackground__vEs6e {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;   \r\n    width: 100%;  \r\n    min-width: 100vw;\r\n    height:100%;\r\n    min-height: 100vh;\r\n    overflow: hidden;\r\n    position: fixed;\r\n    z-index: 0;\r\n}\r\n.layout-module_rootBackground__vEs6e>div{\r\n    width:100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n}\r\n.layout-module_rootLayout__TePvr {\r\n    position: relative;\r\n    z-index: 1;\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    min-height: 100%;\r\n    display: flex; \r\n    flex-flow: row;\r\n    background-color: transparent;\r\n    container-type: inline-size;\r\n}\r\n\r\n.layout-module_mainLayout__a8Tb9 {\r\n    box-sizing: border-box;    \r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n}\r\n"),T.Aside=z,T.Content=k,T.Header=E,T.Background=L;const A=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}),F=n=>{const{r:e,g:r,b:t}=A(n);return{r:e,g:r,b:t}},H=(n,e)=>{const{r:r,g:t,b:o,a:i}=A(n);return`rgba(${r}, ${t}, ${o}, ${e??i})`},P=n=>{if("system"==n){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}return n};export{T as BaseLayout,S as FullScreenButton,L as LayoutBackground,x as createConfigActionContext,_ as createConfigStateContext,g as defaultConfig,u as defineConfig,j as getAvatarInitials,P as getLayoutTheme,F as hexToRgb,H as hexToRgbaString,v as useConfigAction,p as useConfigState,w as useTheme};

package/package.json

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