@adminui-dev/layout 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 zhouwenqi
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1 @@
1
+ adminui-layout
@@ -4,6 +4,7 @@ type LayoutTheme = 'light' | 'dark';
4
4
  type ContainerMode = 'inline' | 'box' | 'panel';
5
5
  type ContainerStretch = 'inline' | 'auto' | 'fill';
6
6
  type SkinType = 'tidy' | 'rich';
7
+ type Position = "top" | "center" | "bottom";
7
8
  type ConfigStateDispatcher = {
8
9
  layoutConfig: LayoutConfig;
9
10
  locale: string;
@@ -26,7 +27,6 @@ interface LayoutConfig {
26
27
  layoutType?: LayoutType;
27
28
  headerHeight?: number;
28
29
  asideWidth?: number;
29
- asideCollapsedWidth?: number;
30
30
  theme?: Theme;
31
31
  locale?: string;
32
32
  disabledLocale?: boolean;
@@ -36,6 +36,7 @@ interface LayoutConfig {
36
36
  flated?: boolean;
37
37
  menuIconSize?: number;
38
38
  compact?: boolean;
39
+ largeBrand?: boolean;
39
40
  splitMenu?: boolean;
40
41
  asideMenuInline?: boolean;
41
42
  asideMenuGroup?: boolean;
@@ -46,6 +47,7 @@ interface LayoutConfig {
46
47
  asideTransparent?: boolean;
47
48
  headerTransparent?: boolean;
48
49
  containerTransparent?: boolean;
50
+ collapsedPosition?: Position;
49
51
  userInfo?: UserInfo;
50
52
  brandInfo?: BrandInfo;
51
53
  }
@@ -77,13 +79,14 @@ interface UserInfo {
77
79
  id?: number;
78
80
  uid: string;
79
81
  title: string;
80
- avatar?: string;
82
+ avatar?: string | React.ReactNode;
81
83
  }
82
84
  interface BrandInfo {
83
85
  id?: number;
84
86
  name: string;
85
87
  title: string;
86
- logo?: React.ReactNode;
88
+ url?: string;
89
+ logo?: string | React.ReactNode;
87
90
  }
88
91
  interface MenuData {
89
92
  id?: string;
@@ -99,7 +102,6 @@ interface MenuData {
99
102
  interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
100
103
  }
101
104
  interface BaseLayoutProps extends LayoutProps {
102
- headerHeight: number;
103
105
  ref?: React.Ref<HTMLDivElement>;
104
106
  }
105
107
  interface RootLayoutProps<T> extends LayoutProps {
@@ -120,4 +122,4 @@ interface ContainerProps extends LayoutProps {
120
122
  transparent?: boolean;
121
123
  children?: React.ReactNode;
122
124
  }
123
- export type { LayoutProps, BaseLayoutProps, RootLayoutProps, ContainerProps, ContainerMode, ContainerStretch, Theme, LayoutTheme, LayoutType, LayoutConfig, Language, LocaleMessageData, UserInfo, BrandInfo, ConfigStateDispatcher, ConfigActionDispatcher, SkinType, ThemeSkin, MenuData, OutletContainer };
125
+ export type { LayoutProps, BaseLayoutProps, RootLayoutProps, ContainerProps, ContainerMode, ContainerStretch, Theme, LayoutTheme, LayoutType, LayoutConfig, Language, LocaleMessageData, UserInfo, BrandInfo, ConfigStateDispatcher, ConfigActionDispatcher, SkinType, ThemeSkin, MenuData, Position, OutletContainer };
package/dist/index.cjs.js CHANGED
@@ -1 +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;
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-width: 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",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 x(n){return e.jsx(e.Fragment,{children:n.children})}function g(n){return e.jsx(e.Fragment,{children:n.children})}h.displayName="LayoutContent",h.role=a,x.displayName="LayoutAside",x.role=i,g.displayName="LayoutHeader",g.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-width: 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=x,p.Content=h,p.Header=g;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 CHANGED
@@ -8,6 +8,7 @@ type LayoutTheme = 'light' | 'dark';
8
8
  type ContainerMode = 'inline' | 'box' | 'panel';
9
9
  type ContainerStretch = 'inline' | 'auto' | 'fill';
10
10
  type SkinType = 'tidy' | 'rich';
11
+ type Position = "top" | "center" | "bottom";
11
12
  type ConfigStateDispatcher = {
12
13
  layoutConfig: LayoutConfig;
13
14
  locale: string;
@@ -30,7 +31,6 @@ interface LayoutConfig {
30
31
  layoutType?: LayoutType;
31
32
  headerHeight?: number;
32
33
  asideWidth?: number;
33
- asideCollapsedWidth?: number;
34
34
  theme?: Theme;
35
35
  locale?: string;
36
36
  disabledLocale?: boolean;
@@ -40,6 +40,7 @@ interface LayoutConfig {
40
40
  flated?: boolean;
41
41
  menuIconSize?: number;
42
42
  compact?: boolean;
43
+ largeBrand?: boolean;
43
44
  splitMenu?: boolean;
44
45
  asideMenuInline?: boolean;
45
46
  asideMenuGroup?: boolean;
@@ -50,6 +51,7 @@ interface LayoutConfig {
50
51
  asideTransparent?: boolean;
51
52
  headerTransparent?: boolean;
52
53
  containerTransparent?: boolean;
54
+ collapsedPosition?: Position;
53
55
  userInfo?: UserInfo;
54
56
  brandInfo?: BrandInfo;
55
57
  }
@@ -81,13 +83,14 @@ interface UserInfo {
81
83
  id?: number;
82
84
  uid: string;
83
85
  title: string;
84
- avatar?: string;
86
+ avatar?: string | React.ReactNode;
85
87
  }
86
88
  interface BrandInfo {
87
89
  id?: number;
88
90
  name: string;
89
91
  title: string;
90
- logo?: React.ReactNode;
92
+ url?: string;
93
+ logo?: string | React.ReactNode;
91
94
  }
92
95
  interface MenuData {
93
96
  id?: string;
@@ -103,7 +106,6 @@ interface MenuData {
103
106
  interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
104
107
  }
105
108
  interface BaseLayoutProps extends LayoutProps {
106
- headerHeight: number;
107
109
  ref?: React.Ref<HTMLDivElement>;
108
110
  }
109
111
  interface RootLayoutProps<T> extends LayoutProps {
@@ -188,4 +190,4 @@ declare const hexToRgbaString: (color: string, alpha?: number) => string;
188
190
  declare const getLayoutTheme: (theme: Theme) => LayoutTheme;
189
191
 
190
192
  export { BaseLayout, export_default$1 as FullScreenButton, export_default as LayoutBackground, createConfigActionContext, createConfigStateContext, defaultConfig, defaultSkinData, defineConfig, getAvatarInitials, getLayoutTheme, hexToRgb, hexToRgbaString, useConfigAction, useConfigState, useTheme };
191
- export type { BaseLayoutProps, BrandInfo, ConfigActionDispatcher, ConfigStateDispatcher, ContainerMode, ContainerProps, ContainerStretch, Language, LayoutConfig, LayoutProps, LayoutTheme, LayoutType, LocaleMessageData, MenuData, OutletContainer, RootLayoutProps, SkinType, Theme, ThemeSkin, UserInfo };
193
+ export type { 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 CHANGED
@@ -1 +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};
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-width: 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",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,w=()=>i(x),L=()=>i(b),v=()=>w().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",N="layout-module_rootLayout__TePvr",T="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:N,children:[a,r("div",{className:T,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-width: 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})`},I=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,I as getLayoutTheme,F as hexToRgb,H as hexToRgbaString,L as useConfigAction,w as useConfigState,v as useTheme};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adminui-dev/layout",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "adminui.dev's layout",
5
5
  "keywords": [
6
6
  "layout",