@adminui-dev/layout 1.0.1 → 1.0.3
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/dist/components/BaseLayout.d.ts +11 -0
- package/dist/components/LayoutAside.d.ts +2 -0
- package/dist/components/LayoutContent.d.ts +2 -0
- package/dist/components/LayoutContext.d.ts +12 -3
- package/dist/components/LayoutHeader.d.ts +2 -0
- package/dist/components/common.d.ts +16 -0
- package/dist/components/hook.d.ts +6 -0
- package/dist/components/index.d.ts +4 -4
- package/dist/components/layout.d.ts +4 -6
- package/dist/components/typings.d.ts +70 -15
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +115 -57
- package/dist/index.esm.js +1 -1
- package/package.json +5 -5
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { LayoutPros, LayoutConfig } from './typings';
|
|
2
|
+
/**
|
|
3
|
+
* Base layout
|
|
4
|
+
* @param props layout properites
|
|
5
|
+
* @returns
|
|
6
|
+
*/
|
|
7
|
+
declare function BaseLayout(props: LayoutPros): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function defineConfig(config: LayoutConfig): LayoutConfig;
|
|
9
|
+
declare const defaultConfig: LayoutConfig;
|
|
10
|
+
export { defineConfig, defaultConfig };
|
|
11
|
+
export default BaseLayout;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { LAYOUT_ASIDE_KEY } from "./LayoutContext";
|
|
1
2
|
declare function LayoutAside(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
2
3
|
declare namespace LayoutAside {
|
|
3
4
|
var displayName: string;
|
|
5
|
+
var role: typeof LAYOUT_ASIDE_KEY;
|
|
4
6
|
}
|
|
5
7
|
export default LayoutAside;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { LAYOUT_CONTENT_KEY } from './LayoutContext';
|
|
1
2
|
declare function LayoutContent(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
2
3
|
declare namespace LayoutContent {
|
|
3
4
|
var displayName: string;
|
|
5
|
+
var role: typeof LAYOUT_CONTENT_KEY;
|
|
4
6
|
}
|
|
5
7
|
export default LayoutContent;
|
|
@@ -1,3 +1,12 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export declare
|
|
3
|
-
export declare const
|
|
1
|
+
import type { LayoutConfig, ThemeSkin, ConfigActionDispatcher, ConfigStateDispatcher } from "./typings";
|
|
2
|
+
export declare function defineConfig(config: LayoutConfig): LayoutConfig;
|
|
3
|
+
export declare const LAYOUT_ASIDE_KEY: unique symbol;
|
|
4
|
+
export declare const LAYOUT_CONTENT_KEY: unique symbol;
|
|
5
|
+
export declare const LAYOUT_HEADER_KEY: unique symbol;
|
|
6
|
+
export declare const defaultSkinData: ThemeSkin;
|
|
7
|
+
export declare const defaultConfig: LayoutConfig;
|
|
8
|
+
export declare const createConfigActionContext: () => import("react").Context<ConfigActionDispatcher>;
|
|
9
|
+
export declare const createConfigStateContext: () => import("react").Context<ConfigStateDispatcher>;
|
|
10
|
+
export declare const useConfigState: () => ConfigStateDispatcher;
|
|
11
|
+
export declare const useConfigAction: () => ConfigActionDispatcher;
|
|
12
|
+
export declare const useTheme: () => import("./typings").Theme;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { LAYOUT_HEADER_KEY } from "./LayoutContext";
|
|
1
2
|
declare function LayoutHeader(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
2
3
|
declare namespace LayoutHeader {
|
|
3
4
|
var displayName: string;
|
|
5
|
+
var role: typeof LAYOUT_HEADER_KEY;
|
|
4
6
|
}
|
|
5
7
|
export default LayoutHeader;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { LayoutTheme, Theme } from "./typings";
|
|
2
|
+
declare function getAvatarInitials(name: string): string;
|
|
3
|
+
declare const hexToRgba: (hex: string) => {
|
|
4
|
+
r: number;
|
|
5
|
+
g: number;
|
|
6
|
+
b: number;
|
|
7
|
+
a: string | number;
|
|
8
|
+
};
|
|
9
|
+
declare const hexToRgb: (color: string) => {
|
|
10
|
+
r: number;
|
|
11
|
+
g: number;
|
|
12
|
+
b: number;
|
|
13
|
+
};
|
|
14
|
+
declare const hexToRgbaString: (color: string, alpha?: number) => string;
|
|
15
|
+
declare const getLayoutTheme: (theme: Theme) => LayoutTheme;
|
|
16
|
+
export { getAvatarInitials, hexToRgb, hexToRgba, hexToRgbaString, getLayoutTheme };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { BaseLayout } from "./Layout";
|
|
2
2
|
import FullScreenButton from "./FullScreenButton";
|
|
3
3
|
import LayoutBackground from "./LayoutBackground";
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
export {
|
|
4
|
+
import { createConfigActionContext, createConfigStateContext, useConfigState, useConfigAction, useTheme, defaultConfig, defineConfig, defaultSkinData } from "./LayoutContext";
|
|
5
|
+
import { getAvatarInitials, hexToRgb, hexToRgbaString, getLayoutTheme } from "./common";
|
|
6
|
+
export { BaseLayout, LayoutBackground, FullScreenButton, createConfigActionContext, createConfigStateContext, useConfigState, useConfigAction, useTheme, getAvatarInitials, hexToRgb, hexToRgbaString, defaultConfig, defaultSkinData, getLayoutTheme, defineConfig };
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { BaseLayoutProps } from './typings';
|
|
2
2
|
/**
|
|
3
3
|
* Base layout
|
|
4
4
|
* @param props layout properites
|
|
5
5
|
* @returns
|
|
6
6
|
*/
|
|
7
|
-
declare function
|
|
8
|
-
declare namespace
|
|
7
|
+
declare function BaseLayout(props: BaseLayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare namespace BaseLayout {
|
|
9
9
|
var Aside: typeof import("./LayoutAside").default;
|
|
10
10
|
var Content: typeof import("./LayoutContent").default;
|
|
11
11
|
var Header: typeof import("./LayoutHeader").default;
|
|
12
12
|
}
|
|
13
|
-
|
|
14
|
-
export { defineConfig };
|
|
15
|
-
export default Layout;
|
|
13
|
+
export { BaseLayout };
|
|
@@ -1,14 +1,26 @@
|
|
|
1
1
|
type Theme = 'light' | 'dark' | 'system';
|
|
2
2
|
type LayoutType = 'headMenu' | 'leftMenu';
|
|
3
|
-
type LayoutTheme = 'light' | 'dark'
|
|
3
|
+
type LayoutTheme = 'light' | 'dark';
|
|
4
4
|
type ContainerMode = 'inline' | 'box' | 'panel';
|
|
5
|
-
type ContainerStretch = 'inline' | 'auto' | '
|
|
6
|
-
type
|
|
5
|
+
type ContainerStretch = 'inline' | 'auto' | 'fill';
|
|
6
|
+
type SkinType = 'tidy' | 'rich';
|
|
7
|
+
type ConfigStateDispatcher = {
|
|
7
8
|
layoutConfig: LayoutConfig;
|
|
8
|
-
setLayoutConfig: (config: LayoutConfig) => void;
|
|
9
9
|
locale: string;
|
|
10
|
+
theme: Theme;
|
|
11
|
+
themeSkin: ThemeSkin;
|
|
12
|
+
themeSkinMap: Record<SkinType, ThemeSkin[]>;
|
|
13
|
+
languages: Language[];
|
|
14
|
+
};
|
|
15
|
+
type ConfigActionDispatcher = {
|
|
16
|
+
setTheme: (theme: Theme) => void;
|
|
10
17
|
setLocale: (locale: string) => void;
|
|
11
|
-
|
|
18
|
+
setLayoutConfig: (config: LayoutConfig) => void;
|
|
19
|
+
};
|
|
20
|
+
type OutletContainer = {
|
|
21
|
+
title: string;
|
|
22
|
+
breadcrumbData: any[];
|
|
23
|
+
footer?: React.ReactNode;
|
|
12
24
|
};
|
|
13
25
|
interface LayoutConfig {
|
|
14
26
|
layoutType?: LayoutType;
|
|
@@ -17,9 +29,39 @@ interface LayoutConfig {
|
|
|
17
29
|
asideCollapsedWidth?: number;
|
|
18
30
|
theme?: Theme;
|
|
19
31
|
locale?: string;
|
|
32
|
+
disabledLocale?: boolean;
|
|
33
|
+
skinName?: string;
|
|
34
|
+
primaryColor?: string;
|
|
35
|
+
highlight?: boolean;
|
|
36
|
+
flated?: boolean;
|
|
37
|
+
menuIconSize?: number;
|
|
38
|
+
compact?: boolean;
|
|
39
|
+
splitMenu?: boolean;
|
|
40
|
+
asideMenuInline?: boolean;
|
|
41
|
+
asideMenuGroup?: boolean;
|
|
42
|
+
hideBorder?: boolean;
|
|
43
|
+
hideTitle?: boolean;
|
|
44
|
+
hideFooter?: boolean;
|
|
45
|
+
hideBreadcrumb?: boolean;
|
|
46
|
+
asideTransparent?: boolean;
|
|
47
|
+
headerTransparent?: boolean;
|
|
48
|
+
containerTransparent?: boolean;
|
|
20
49
|
userInfo?: UserInfo;
|
|
21
50
|
brandInfo?: BrandInfo;
|
|
22
51
|
}
|
|
52
|
+
interface ThemeSkin {
|
|
53
|
+
name: string;
|
|
54
|
+
icon: string;
|
|
55
|
+
label?: string;
|
|
56
|
+
theme: LayoutTheme[];
|
|
57
|
+
themeType: SkinType;
|
|
58
|
+
asideWidth?: number;
|
|
59
|
+
primaryColor?: string;
|
|
60
|
+
asideCollapsedWidth?: number;
|
|
61
|
+
layoutBorderColor?: string;
|
|
62
|
+
headerStyle?: React.CSSProperties;
|
|
63
|
+
asideStyle?: React.CSSProperties;
|
|
64
|
+
}
|
|
23
65
|
interface Language {
|
|
24
66
|
name: string;
|
|
25
67
|
locale: string;
|
|
@@ -43,26 +85,39 @@ interface BrandInfo {
|
|
|
43
85
|
title: string;
|
|
44
86
|
logo?: React.ReactNode;
|
|
45
87
|
}
|
|
46
|
-
|
|
88
|
+
interface MenuData {
|
|
89
|
+
id?: string;
|
|
90
|
+
name: string;
|
|
91
|
+
label?: string;
|
|
92
|
+
icon?: React.ReactNode;
|
|
93
|
+
path?: string;
|
|
94
|
+
extra?: React.ReactNode;
|
|
95
|
+
originalPath?: string;
|
|
96
|
+
params?: Record<string, string>;
|
|
97
|
+
children?: MenuData[];
|
|
98
|
+
}
|
|
99
|
+
interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
47
100
|
}
|
|
48
|
-
|
|
101
|
+
interface BaseLayoutProps extends LayoutProps {
|
|
102
|
+
headerHeight: number;
|
|
103
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
104
|
+
}
|
|
105
|
+
interface RootLayoutProps<T> extends LayoutProps {
|
|
49
106
|
layoutConfig?: LayoutConfig;
|
|
107
|
+
menuData?: MenuData[];
|
|
50
108
|
theme?: Theme;
|
|
51
109
|
locale?: string;
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
export interface MainLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
55
|
-
header?: React.ReactNode;
|
|
56
|
-
aside?: React.ReactNode;
|
|
110
|
+
localeMessages?: Record<string, T>;
|
|
111
|
+
themeSkins?: ThemeSkin[];
|
|
57
112
|
}
|
|
58
|
-
|
|
113
|
+
interface ContainerProps extends LayoutProps {
|
|
59
114
|
mode?: ContainerMode;
|
|
60
115
|
stretch?: ContainerStretch;
|
|
61
|
-
|
|
116
|
+
hideBorder?: boolean;
|
|
62
117
|
hideTitle?: boolean;
|
|
63
118
|
hideBreadcrumb?: boolean;
|
|
64
119
|
hideFooter?: boolean;
|
|
65
120
|
transparent?: boolean;
|
|
66
121
|
children?: React.ReactNode;
|
|
67
122
|
}
|
|
68
|
-
export type { Theme, LayoutTheme, LayoutType, LayoutConfig, Language, LocaleMessageData, UserInfo, BrandInfo,
|
|
123
|
+
export type { LayoutProps, BaseLayoutProps, RootLayoutProps, ContainerProps, ContainerMode, ContainerStretch, Theme, LayoutTheme, LayoutType, LayoutConfig, Language, LocaleMessageData, UserInfo, BrandInfo, ConfigStateDispatcher, ConfigActionDispatcher, SkinType, ThemeSkin, MenuData, OutletContainer };
|
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),
|
|
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;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,33 +1,30 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
declare function LayoutHeader(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
6
|
-
declare namespace LayoutHeader {
|
|
7
|
-
var displayName: string;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
declare function LayoutContent(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
11
|
-
declare namespace LayoutContent {
|
|
12
|
-
var displayName: string;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
declare function LayoutAside(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
16
|
-
declare namespace LayoutAside {
|
|
17
|
-
var displayName: string;
|
|
18
|
-
}
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import react__default from 'react';
|
|
19
4
|
|
|
20
5
|
type Theme = 'light' | 'dark' | 'system';
|
|
21
6
|
type LayoutType = 'headMenu' | 'leftMenu';
|
|
22
|
-
type LayoutTheme = 'light' | 'dark'
|
|
7
|
+
type LayoutTheme = 'light' | 'dark';
|
|
23
8
|
type ContainerMode = 'inline' | 'box' | 'panel';
|
|
24
|
-
type ContainerStretch = 'inline' | 'auto' | '
|
|
25
|
-
type
|
|
9
|
+
type ContainerStretch = 'inline' | 'auto' | 'fill';
|
|
10
|
+
type SkinType = 'tidy' | 'rich';
|
|
11
|
+
type ConfigStateDispatcher = {
|
|
26
12
|
layoutConfig: LayoutConfig;
|
|
27
|
-
setLayoutConfig: (config: LayoutConfig) => void;
|
|
28
13
|
locale: string;
|
|
14
|
+
theme: Theme;
|
|
15
|
+
themeSkin: ThemeSkin;
|
|
16
|
+
themeSkinMap: Record<SkinType, ThemeSkin[]>;
|
|
17
|
+
languages: Language[];
|
|
18
|
+
};
|
|
19
|
+
type ConfigActionDispatcher = {
|
|
20
|
+
setTheme: (theme: Theme) => void;
|
|
29
21
|
setLocale: (locale: string) => void;
|
|
30
|
-
|
|
22
|
+
setLayoutConfig: (config: LayoutConfig) => void;
|
|
23
|
+
};
|
|
24
|
+
type OutletContainer = {
|
|
25
|
+
title: string;
|
|
26
|
+
breadcrumbData: any[];
|
|
27
|
+
footer?: React.ReactNode;
|
|
31
28
|
};
|
|
32
29
|
interface LayoutConfig {
|
|
33
30
|
layoutType?: LayoutType;
|
|
@@ -36,9 +33,39 @@ interface LayoutConfig {
|
|
|
36
33
|
asideCollapsedWidth?: number;
|
|
37
34
|
theme?: Theme;
|
|
38
35
|
locale?: string;
|
|
36
|
+
disabledLocale?: boolean;
|
|
37
|
+
skinName?: string;
|
|
38
|
+
primaryColor?: string;
|
|
39
|
+
highlight?: boolean;
|
|
40
|
+
flated?: boolean;
|
|
41
|
+
menuIconSize?: number;
|
|
42
|
+
compact?: boolean;
|
|
43
|
+
splitMenu?: boolean;
|
|
44
|
+
asideMenuInline?: boolean;
|
|
45
|
+
asideMenuGroup?: boolean;
|
|
46
|
+
hideBorder?: boolean;
|
|
47
|
+
hideTitle?: boolean;
|
|
48
|
+
hideFooter?: boolean;
|
|
49
|
+
hideBreadcrumb?: boolean;
|
|
50
|
+
asideTransparent?: boolean;
|
|
51
|
+
headerTransparent?: boolean;
|
|
52
|
+
containerTransparent?: boolean;
|
|
39
53
|
userInfo?: UserInfo;
|
|
40
54
|
brandInfo?: BrandInfo;
|
|
41
55
|
}
|
|
56
|
+
interface ThemeSkin {
|
|
57
|
+
name: string;
|
|
58
|
+
icon: string;
|
|
59
|
+
label?: string;
|
|
60
|
+
theme: LayoutTheme[];
|
|
61
|
+
themeType: SkinType;
|
|
62
|
+
asideWidth?: number;
|
|
63
|
+
primaryColor?: string;
|
|
64
|
+
asideCollapsedWidth?: number;
|
|
65
|
+
layoutBorderColor?: string;
|
|
66
|
+
headerStyle?: React.CSSProperties;
|
|
67
|
+
asideStyle?: React.CSSProperties;
|
|
68
|
+
}
|
|
42
69
|
interface Language {
|
|
43
70
|
name: string;
|
|
44
71
|
locale: string;
|
|
@@ -62,22 +89,35 @@ interface BrandInfo {
|
|
|
62
89
|
title: string;
|
|
63
90
|
logo?: React.ReactNode;
|
|
64
91
|
}
|
|
65
|
-
interface
|
|
92
|
+
interface MenuData {
|
|
93
|
+
id?: string;
|
|
94
|
+
name: string;
|
|
95
|
+
label?: string;
|
|
96
|
+
icon?: React.ReactNode;
|
|
97
|
+
path?: string;
|
|
98
|
+
extra?: React.ReactNode;
|
|
99
|
+
originalPath?: string;
|
|
100
|
+
params?: Record<string, string>;
|
|
101
|
+
children?: MenuData[];
|
|
102
|
+
}
|
|
103
|
+
interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
66
104
|
}
|
|
67
|
-
interface
|
|
105
|
+
interface BaseLayoutProps extends LayoutProps {
|
|
106
|
+
headerHeight: number;
|
|
107
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
108
|
+
}
|
|
109
|
+
interface RootLayoutProps<T> extends LayoutProps {
|
|
68
110
|
layoutConfig?: LayoutConfig;
|
|
111
|
+
menuData?: MenuData[];
|
|
69
112
|
theme?: Theme;
|
|
70
113
|
locale?: string;
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
interface MainLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
74
|
-
header?: React.ReactNode;
|
|
75
|
-
aside?: React.ReactNode;
|
|
114
|
+
localeMessages?: Record<string, T>;
|
|
115
|
+
themeSkins?: ThemeSkin[];
|
|
76
116
|
}
|
|
77
|
-
interface ContainerProps {
|
|
117
|
+
interface ContainerProps extends LayoutProps {
|
|
78
118
|
mode?: ContainerMode;
|
|
79
119
|
stretch?: ContainerStretch;
|
|
80
|
-
|
|
120
|
+
hideBorder?: boolean;
|
|
81
121
|
hideTitle?: boolean;
|
|
82
122
|
hideBreadcrumb?: boolean;
|
|
83
123
|
hideFooter?: boolean;
|
|
@@ -85,13 +125,43 @@ interface ContainerProps {
|
|
|
85
125
|
children?: React.ReactNode;
|
|
86
126
|
}
|
|
87
127
|
|
|
128
|
+
declare function defineConfig(config: LayoutConfig): LayoutConfig;
|
|
129
|
+
declare const LAYOUT_ASIDE_KEY: unique symbol;
|
|
130
|
+
declare const LAYOUT_CONTENT_KEY: unique symbol;
|
|
131
|
+
declare const LAYOUT_HEADER_KEY: unique symbol;
|
|
132
|
+
declare const defaultSkinData: ThemeSkin;
|
|
133
|
+
declare const defaultConfig: LayoutConfig;
|
|
134
|
+
declare const createConfigActionContext: () => react.Context<ConfigActionDispatcher>;
|
|
135
|
+
declare const createConfigStateContext: () => react.Context<ConfigStateDispatcher>;
|
|
136
|
+
declare const useConfigState: () => ConfigStateDispatcher;
|
|
137
|
+
declare const useConfigAction: () => ConfigActionDispatcher;
|
|
138
|
+
declare const useTheme: () => Theme;
|
|
139
|
+
|
|
140
|
+
declare function LayoutHeader(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
141
|
+
declare namespace LayoutHeader {
|
|
142
|
+
var displayName: string;
|
|
143
|
+
var role: typeof LAYOUT_HEADER_KEY;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
declare function LayoutContent(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
147
|
+
declare namespace LayoutContent {
|
|
148
|
+
var displayName: string;
|
|
149
|
+
var role: typeof LAYOUT_CONTENT_KEY;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
declare function LayoutAside(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
153
|
+
declare namespace LayoutAside {
|
|
154
|
+
var displayName: string;
|
|
155
|
+
var role: typeof LAYOUT_ASIDE_KEY;
|
|
156
|
+
}
|
|
157
|
+
|
|
88
158
|
/**
|
|
89
159
|
* Base layout
|
|
90
160
|
* @param props layout properites
|
|
91
161
|
* @returns
|
|
92
162
|
*/
|
|
93
|
-
declare function
|
|
94
|
-
declare namespace
|
|
163
|
+
declare function BaseLayout(props: BaseLayoutProps): react_jsx_runtime.JSX.Element;
|
|
164
|
+
declare namespace BaseLayout {
|
|
95
165
|
var Aside: typeof LayoutAside;
|
|
96
166
|
var Content: typeof LayoutContent;
|
|
97
167
|
var Header: typeof LayoutHeader;
|
|
@@ -102,32 +172,20 @@ declare namespace Layout {
|
|
|
102
172
|
* @param props max and min button icon
|
|
103
173
|
* @returns
|
|
104
174
|
*/
|
|
105
|
-
declare function export_default$
|
|
106
|
-
buttons:
|
|
175
|
+
declare function export_default$1(props: {
|
|
176
|
+
buttons: react__default.ReactElement[];
|
|
107
177
|
}): react_jsx_runtime.JSX.Element;
|
|
108
178
|
|
|
109
|
-
declare function export_default
|
|
179
|
+
declare function export_default(): react_jsx_runtime.JSX.Element;
|
|
110
180
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
}
|
|
117
|
-
type ThemeProviderState = {
|
|
118
|
-
theme: Theme;
|
|
119
|
-
setTheme: (theme: Theme) => void;
|
|
181
|
+
declare function getAvatarInitials(name: string): string;
|
|
182
|
+
declare const hexToRgb: (color: string) => {
|
|
183
|
+
r: number;
|
|
184
|
+
g: number;
|
|
185
|
+
b: number;
|
|
120
186
|
};
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
* @param props
|
|
124
|
-
* @returns
|
|
125
|
-
*/
|
|
126
|
-
declare function export_default(props: ThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
127
|
-
declare const useTheme: () => ThemeProviderState;
|
|
128
|
-
|
|
129
|
-
declare const createConfigContext: () => React$1.Context<ConfigDispatcher>;
|
|
130
|
-
declare const useConfigContext: () => ConfigDispatcher;
|
|
187
|
+
declare const hexToRgbaString: (color: string, alpha?: number) => string;
|
|
188
|
+
declare const getLayoutTheme: (theme: Theme) => LayoutTheme;
|
|
131
189
|
|
|
132
|
-
export { export_default$
|
|
133
|
-
export type { BrandInfo,
|
|
190
|
+
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 };
|
package/dist/index.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
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};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@adminui-dev/layout",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "adminui.dev's layout",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"layout",
|
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
"@rollup/plugin-node-resolve": "^15.0.0",
|
|
46
46
|
"@rollup/plugin-typescript": "^11.0.0",
|
|
47
47
|
"@types/commander": "^2.12.5",
|
|
48
|
-
"@types/react": "^
|
|
49
|
-
"@types/react-dom": "^
|
|
48
|
+
"@types/react": "^19.2.0",
|
|
49
|
+
"@types/react-dom": "^19.2.0",
|
|
50
50
|
"postcss": "^8.5.6",
|
|
51
51
|
"postcss-modules": "^6.0.1",
|
|
52
52
|
"rollup": "^4.0.0",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"typescript": "^5.0.3"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
|
-
"react": "
|
|
60
|
-
"react-dom": "
|
|
59
|
+
"react": ">=19.2.0",
|
|
60
|
+
"react-dom": ">=19.2.0"
|
|
61
61
|
}
|
|
62
62
|
}
|