@adminui-dev/layout 1.0.3 → 1.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 zhouwenqi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+adminui-layout

package/dist/components/typings.d.ts

@@ -4,6 +4,8 @@ type LayoutTheme = 'light' | 'dark';
 type ContainerMode = 'inline' | 'box' | 'panel';
 type ContainerStretch = 'inline' | 'auto' | 'fill';
 type SkinType = 'tidy' | 'rich';
+type Position = "top" | "center" | "bottom";
+type AvatarPosition = "rightTop" | "leftBottom" | "none";
 type ConfigStateDispatcher = {
     layoutConfig: LayoutConfig;
     locale: string;
@@ -26,7 +28,6 @@ interface LayoutConfig {
     layoutType?: LayoutType;
     headerHeight?: number;
     asideWidth?: number;
-    asideCollapsedWidth?: number;
     theme?: Theme;
     locale?: string;
     disabledLocale?: boolean;
@@ -36,6 +37,7 @@ interface LayoutConfig {
     flated?: boolean;
     menuIconSize?: number;
     compact?: boolean;
+    largeBrand?: boolean;
     splitMenu?: boolean;
     asideMenuInline?: boolean;
     asideMenuGroup?: boolean;
@@ -46,6 +48,8 @@ interface LayoutConfig {
     asideTransparent?: boolean;
     headerTransparent?: boolean;
     containerTransparent?: boolean;
+    collapsedPosition?: Position;
+    avatarPosition?: AvatarPosition;
     userInfo?: UserInfo;
     brandInfo?: BrandInfo;
 }
@@ -77,13 +81,14 @@ interface UserInfo {
     id?: number;
     uid: string;
     title: string;
-    avatar?: string;
+    avatar?: string | React.ReactNode;
 }
 interface BrandInfo {
     id?: number;
     name: string;
     title: string;
-    logo?: React.ReactNode;
+    url?: string;
+    logo?: string | React.ReactNode;
 }
 interface MenuData {
     id?: string;
@@ -99,7 +104,6 @@ interface MenuData {
 interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 interface BaseLayoutProps extends LayoutProps {
-    headerHeight: number;
     ref?: React.Ref<HTMLDivElement>;
 }
 interface RootLayoutProps<T> extends LayoutProps {
@@ -120,4 +124,4 @@ interface ContainerProps extends LayoutProps {
     transparent?: boolean;
     children?: React.ReactNode;
 }
-export type { LayoutProps, BaseLayoutProps, RootLayoutProps, ContainerProps, ContainerMode, ContainerStretch, Theme, LayoutTheme, LayoutType, LayoutConfig, Language, LocaleMessageData, UserInfo, BrandInfo, ConfigStateDispatcher, ConfigActionDispatcher, SkinType, ThemeSkin, MenuData, OutletContainer };
+export type { LayoutProps, BaseLayoutProps, RootLayoutProps, ContainerProps, ContainerMode, ContainerStretch, Theme, LayoutTheme, LayoutType, LayoutConfig, Language, LocaleMessageData, UserInfo, BrandInfo, ConfigStateDispatcher, ConfigActionDispatcher, SkinType, ThemeSkin, MenuData, Position, AvatarPosition, OutletContainer };

package/dist/index.cjs.js

@@ -1 +1 @@
-"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;
+"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;

package/dist/index.d.ts

@@ -8,6 +8,8 @@ type LayoutTheme = 'light' | 'dark';
 type ContainerMode = 'inline' | 'box' | 'panel';
 type ContainerStretch = 'inline' | 'auto' | 'fill';
 type SkinType = 'tidy' | 'rich';
+type Position = "top" | "center" | "bottom";
+type AvatarPosition = "rightTop" | "leftBottom" | "none";
 type ConfigStateDispatcher = {
     layoutConfig: LayoutConfig;
     locale: string;
@@ -30,7 +32,6 @@ interface LayoutConfig {
     layoutType?: LayoutType;
     headerHeight?: number;
     asideWidth?: number;
-    asideCollapsedWidth?: number;
     theme?: Theme;
     locale?: string;
     disabledLocale?: boolean;
@@ -40,6 +41,7 @@ interface LayoutConfig {
     flated?: boolean;
     menuIconSize?: number;
     compact?: boolean;
+    largeBrand?: boolean;
     splitMenu?: boolean;
     asideMenuInline?: boolean;
     asideMenuGroup?: boolean;
@@ -50,6 +52,8 @@ interface LayoutConfig {
     asideTransparent?: boolean;
     headerTransparent?: boolean;
     containerTransparent?: boolean;
+    collapsedPosition?: Position;
+    avatarPosition?: AvatarPosition;
     userInfo?: UserInfo;
     brandInfo?: BrandInfo;
 }
@@ -81,13 +85,14 @@ interface UserInfo {
     id?: number;
     uid: string;
     title: string;
-    avatar?: string;
+    avatar?: string | React.ReactNode;
 }
 interface BrandInfo {
     id?: number;
     name: string;
     title: string;
-    logo?: React.ReactNode;
+    url?: string;
+    logo?: string | React.ReactNode;
 }
 interface MenuData {
     id?: string;
@@ -103,7 +108,6 @@ interface MenuData {
 interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 interface BaseLayoutProps extends LayoutProps {
-    headerHeight: number;
     ref?: React.Ref<HTMLDivElement>;
 }
 interface RootLayoutProps<T> extends LayoutProps {
@@ -188,4 +192,4 @@ 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 type { BaseLayoutProps, BrandInfo, ConfigActionDispatcher, ConfigStateDispatcher, ContainerMode, ContainerProps, ContainerStretch, Language, LayoutConfig, LayoutProps, LayoutTheme, LayoutType, LocaleMessageData, MenuData, OutletContainer, RootLayoutProps, SkinType, Theme, ThemeSkin, UserInfo };
+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 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};
+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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminui-dev/layout",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "adminui.dev's layout",
   "keywords": [
     "layout",
@@ -8,6 +8,7 @@
     "admin",
     "dashboard"
   ],
+  
   "license": "MIT",
   "author": "zhouwenqi",
   "type": "commonjs",
@@ -30,6 +31,11 @@
   "files": [
     "dist"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zhouwenqi/adminui-layout.git"
+  },
+  "homepage": "https://demo.adminui.dev",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",