@adminui-dev/layout 1.0.0 → 1.0.1
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/FullScreenButton.d.ts +5 -0
- package/dist/components/LayoutContext.d.ts +1 -9
- package/dist/components/ThemeProvider.d.ts +1 -1
- package/dist/components/index.d.ts +3 -2
- package/dist/components/layout.d.ts +8 -1
- package/dist/components/typings.d.ts +10 -3
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +33 -6
- package/dist/index.esm.js +1 -1
- package/package.json +3 -3
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
type ConfigDispatcher = {
|
|
3
|
-
layoutConfig: LayoutConfig;
|
|
4
|
-
setLayoutConfig: (config: LayoutConfig) => void;
|
|
5
|
-
locale: string;
|
|
6
|
-
setLocale: (locale: string) => void;
|
|
7
|
-
getLanguages: () => Language[];
|
|
8
|
-
};
|
|
1
|
+
import type { ConfigDispatcher } from "./typings";
|
|
9
2
|
export declare const createConfigContext: () => import("react").Context<ConfigDispatcher>;
|
|
10
3
|
export declare const useConfigContext: () => ConfigDispatcher;
|
|
11
|
-
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import Layout from "./Layout";
|
|
2
2
|
import FullScreenButton from "./FullScreenButton";
|
|
3
3
|
import LayoutBackground from "./LayoutBackground";
|
|
4
|
-
import ThemeProvider from "./ThemeProvider";
|
|
5
|
-
|
|
4
|
+
import ThemeProvider, { useTheme } from "./ThemeProvider";
|
|
5
|
+
import { createConfigContext, useConfigContext } from "./LayoutContext";
|
|
6
|
+
export { Layout, LayoutBackground, FullScreenButton, useConfigContext, createConfigContext, ThemeProvider, useTheme };
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
-
import type { LayoutPros } from './typings';
|
|
1
|
+
import type { LayoutPros, LayoutConfig } from './typings';
|
|
2
|
+
/**
|
|
3
|
+
* Base layout
|
|
4
|
+
* @param props layout properites
|
|
5
|
+
* @returns
|
|
6
|
+
*/
|
|
2
7
|
declare function Layout(props: LayoutPros): import("react/jsx-runtime").JSX.Element;
|
|
3
8
|
declare namespace Layout {
|
|
4
9
|
var Aside: typeof import("./LayoutAside").default;
|
|
5
10
|
var Content: typeof import("./LayoutContent").default;
|
|
6
11
|
var Header: typeof import("./LayoutHeader").default;
|
|
7
12
|
}
|
|
13
|
+
declare function defineConfig(config: LayoutConfig): LayoutConfig;
|
|
14
|
+
export { defineConfig };
|
|
8
15
|
export default Layout;
|
|
@@ -3,6 +3,13 @@ type LayoutType = 'headMenu' | 'leftMenu';
|
|
|
3
3
|
type LayoutTheme = 'light' | 'dark' | 'system';
|
|
4
4
|
type ContainerMode = 'inline' | 'box' | 'panel';
|
|
5
5
|
type ContainerStretch = 'inline' | 'auto' | 'full';
|
|
6
|
+
type ConfigDispatcher = {
|
|
7
|
+
layoutConfig: LayoutConfig;
|
|
8
|
+
setLayoutConfig: (config: LayoutConfig) => void;
|
|
9
|
+
locale: string;
|
|
10
|
+
setLocale: (locale: string) => void;
|
|
11
|
+
getLanguages: () => Language[];
|
|
12
|
+
};
|
|
6
13
|
interface LayoutConfig {
|
|
7
14
|
layoutType?: LayoutType;
|
|
8
15
|
headerHeight?: number;
|
|
@@ -36,8 +43,9 @@ interface BrandInfo {
|
|
|
36
43
|
title: string;
|
|
37
44
|
logo?: React.ReactNode;
|
|
38
45
|
}
|
|
39
|
-
declare function defineConfig(config: LayoutConfig): LayoutConfig;
|
|
40
46
|
export interface LayoutPros extends React.HTMLAttributes<HTMLDivElement> {
|
|
47
|
+
}
|
|
48
|
+
export interface RootLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
41
49
|
layoutConfig?: LayoutConfig;
|
|
42
50
|
theme?: Theme;
|
|
43
51
|
locale?: string;
|
|
@@ -57,5 +65,4 @@ export interface ContainerProps {
|
|
|
57
65
|
transparent?: boolean;
|
|
58
66
|
children?: React.ReactNode;
|
|
59
67
|
}
|
|
60
|
-
export {
|
|
61
|
-
export type { Theme, LayoutTheme, LayoutType, LayoutConfig, Language, LocaleMessageData, UserInfo, BrandInfo };
|
|
68
|
+
export type { Theme, LayoutTheme, LayoutType, LayoutConfig, Language, LocaleMessageData, UserInfo, BrandInfo, ConfigDispatcher };
|
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react");function n(){return e.jsx("div",{style:{boxSizing:"border-box",pointerEvents:"none",
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react");function n(){return e.jsx("div",{style:{boxSizing:"border-box",pointerEvents:"none",overflow:"hidden",insetBlockStart:"0",insetInlineStart:"0",zIndex:"0",height:"100%",width:"100%"}})}function o(t){return e.jsx("div",{style:{boxSizing:"border-box",display:"flex",flex:"auto",position:"relative",flexDirection:"column",minHeight:"0"},children:t.children})}function r(t){return e.jsx(e.Fragment,{children:t.children})}o.displayName="LayoutContent",r.displayName="LayoutAside";const i=t.createContext({layoutConfig:{},setLayoutConfig:()=>{},locale:"en-US",setLocale:()=>{},getLanguages:()=>[]}),s=()=>t.useContext(i);function d(t){const n=s(),{layoutConfig:o}=n;let r={boxSizing:"border-box",position:"sticky",width:"100%",zIndex:"100",top:"0",paddingBlock:"0",paddingInline:"0",transition:"background-color .3s cubic-bezier(.645, .045, .355, 1)"};return o.headerHeight&&(r={...r,height:o.headerHeight+"px",minHeight:o.headerHeight+"px"}),e.jsx("header",{style:r,children:t.children})}d.displayName="LayoutHeader";var a="layout-module_rootBox__Y8bEx",l="layout-module_rootLayout__TePvr",u="layout-module_mainLayout__a8Tb9";function c(o){let r=null,i=null,s=null;return t.Children.forEach(o.children,e=>{const t=e.type.displayName;"LayoutHeader"===t?r=e:"LayoutContent"===t?i=e:"LayoutAside"===t&&(s=e)}),e.jsxs("div",{className:a,children:[e.jsx(n,{}),e.jsxs("div",{className:l,children:[s,e.jsxs("div",{className:u,children:[r,i]})]})]})}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('@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}\r\n.layout-module_rootBox__Y8bEx {\r\n box-sizing: border-box; \r\n position: relative;\r\n width: 100%;\r\n height:100%;\r\n overflow: hidden;\r\n background-color: transparent;\r\n}\r\n.layout-module_rootLayout__TePvr {\r\n box-sizing: border-box; \r\n inset: 0;\r\n display: flex;\r\n flex-flow: row;\r\n position: absolute;\r\n background-color: transparent;\r\n}\r\n.layout-module_mainLayout__a8Tb9 {\r\n box-sizing: border-box;\r\n display: flex;\r\n flex:auto; \r\n position: relative;\r\n flex-flow: column;\r\n min-height: 0px; \r\n}\r\n.layout-module_headerLayout__Jx8vy {\r\n box-sizing: border-box;\r\n position: sticky;\r\n width: 100%;\r\n z-index: 100;\r\n top: 0px;\r\n padding-block: 0px;\r\n padding-inline: 0px;\r\n transition: "background-color .3s cubic-bezier(.645, .045, .355, 1)"; \r\n}'),c.Aside=r,c.Content=o,c.Header=d;const m=t.createContext({theme:"system",setTheme:()=>{}});exports.FullScreenButton=function(n){const o=!!document.fullscreenElement,[r,i]=t.useState(o),s=()=>{i(!!document.fullscreenElement)},d=e=>{"F11"===e.code&&(e.preventDefault(),a())};t.useEffect(()=>(document.addEventListener("fullscreenchange",s),document.addEventListener("keydown",d,!0),()=>{document.removeEventListener("fullscreenchange",s),document.removeEventListener("keydown",d)}),[]);const a=()=>{r?document.exitFullscreen():document.documentElement.requestFullscreen()};if(!n.buttons||n.buttons.length<2)return e.jsx(e.Fragment,{});const[l,u]=n.buttons,c=r?l:u;return t.cloneElement(c,{onClick:e=>{console.log(e),a()}})},exports.Layout=c,exports.LayoutBackground=n,exports.ThemeProvider=function(n){const{children:o,storageKey:r="adminui-shadcn-theme"}=n,i=n.theme||localStorage.getItem(r)||n.defaultTheme||"system",[s,d]=t.useState(i);t.useEffect(()=>{const e=window.document.documentElement;if(e.classList.remove("light","dark"),"system"===s){const t=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";return void e.classList.add(t)}e.classList.add(s)},[s]);const a={theme:s,setTheme:e=>{localStorage.setItem(r,e),d(e)}};return e.jsx(m.Provider,{value:a,children:o})},exports.createConfigContext=()=>i,exports.useConfigContext=s,exports.useTheme=()=>{const e=t.useContext(m);if(void 0===e)throw new Error("useTheme must be used within a ThemeProvider");return e};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import React$1 from 'react';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
import React__default from 'react';
|
|
3
4
|
|
|
4
5
|
declare function LayoutHeader(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
5
6
|
declare namespace LayoutHeader {
|
|
@@ -21,6 +22,13 @@ type LayoutType = 'headMenu' | 'leftMenu';
|
|
|
21
22
|
type LayoutTheme = 'light' | 'dark' | 'system';
|
|
22
23
|
type ContainerMode = 'inline' | 'box' | 'panel';
|
|
23
24
|
type ContainerStretch = 'inline' | 'auto' | 'full';
|
|
25
|
+
type ConfigDispatcher = {
|
|
26
|
+
layoutConfig: LayoutConfig;
|
|
27
|
+
setLayoutConfig: (config: LayoutConfig) => void;
|
|
28
|
+
locale: string;
|
|
29
|
+
setLocale: (locale: string) => void;
|
|
30
|
+
getLanguages: () => Language[];
|
|
31
|
+
};
|
|
24
32
|
interface LayoutConfig {
|
|
25
33
|
layoutType?: LayoutType;
|
|
26
34
|
headerHeight?: number;
|
|
@@ -54,8 +62,9 @@ interface BrandInfo {
|
|
|
54
62
|
title: string;
|
|
55
63
|
logo?: React.ReactNode;
|
|
56
64
|
}
|
|
57
|
-
declare function defineConfig(config: LayoutConfig): LayoutConfig;
|
|
58
65
|
interface LayoutPros extends React.HTMLAttributes<HTMLDivElement> {
|
|
66
|
+
}
|
|
67
|
+
interface RootLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
59
68
|
layoutConfig?: LayoutConfig;
|
|
60
69
|
theme?: Theme;
|
|
61
70
|
locale?: string;
|
|
@@ -76,6 +85,11 @@ interface ContainerProps {
|
|
|
76
85
|
children?: React.ReactNode;
|
|
77
86
|
}
|
|
78
87
|
|
|
88
|
+
/**
|
|
89
|
+
* Base layout
|
|
90
|
+
* @param props layout properites
|
|
91
|
+
* @returns
|
|
92
|
+
*/
|
|
79
93
|
declare function Layout(props: LayoutPros): react_jsx_runtime.JSX.Element;
|
|
80
94
|
declare namespace Layout {
|
|
81
95
|
var Aside: typeof LayoutAside;
|
|
@@ -83,8 +97,13 @@ declare namespace Layout {
|
|
|
83
97
|
var Header: typeof LayoutHeader;
|
|
84
98
|
}
|
|
85
99
|
|
|
100
|
+
/**
|
|
101
|
+
* full screen buttons
|
|
102
|
+
* @param props max and min button icon
|
|
103
|
+
* @returns
|
|
104
|
+
*/
|
|
86
105
|
declare function export_default$2(props: {
|
|
87
|
-
buttons:
|
|
106
|
+
buttons: React__default.ReactElement[];
|
|
88
107
|
}): react_jsx_runtime.JSX.Element;
|
|
89
108
|
|
|
90
109
|
declare function export_default$1(): react_jsx_runtime.JSX.Element;
|
|
@@ -95,12 +114,20 @@ interface ThemeProviderProps {
|
|
|
95
114
|
defaultTheme?: Theme;
|
|
96
115
|
storageKey?: string;
|
|
97
116
|
}
|
|
117
|
+
type ThemeProviderState = {
|
|
118
|
+
theme: Theme;
|
|
119
|
+
setTheme: (theme: Theme) => void;
|
|
120
|
+
};
|
|
98
121
|
/**
|
|
99
|
-
*
|
|
122
|
+
* Light dark mode context
|
|
100
123
|
* @param props
|
|
101
124
|
* @returns
|
|
102
125
|
*/
|
|
103
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;
|
|
104
131
|
|
|
105
|
-
export { export_default$2 as FullScreenButton, Layout, export_default$1 as LayoutBackground, export_default as ThemeProvider,
|
|
106
|
-
export type { BrandInfo, ContainerProps, Language, LayoutConfig, LayoutPros, LayoutTheme, LayoutType, LocaleMessageData, MainLayoutProps, Theme, UserInfo };
|
|
132
|
+
export { export_default$2 as FullScreenButton, Layout, export_default$1 as LayoutBackground, export_default as ThemeProvider, createConfigContext, useConfigContext, useTheme };
|
|
133
|
+
export type { BrandInfo, ConfigDispatcher, ContainerProps, Language, LayoutConfig, LayoutPros, LayoutTheme, LayoutType, LocaleMessageData, MainLayoutProps, RootLayoutProps, Theme, UserInfo };
|
package/dist/index.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,
|
|
1
|
+
import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import o,{createContext as r,useContext as i,useState as d,useEffect as l}from"react";function a(){return e("div",{style:{boxSizing:"border-box",pointerEvents:"none",overflow:"hidden",insetBlockStart:"0",insetInlineStart:"0",zIndex:"0",height:"100%",width:"100%"}})}function s(n){return e("div",{style:{boxSizing:"border-box",display:"flex",flex:"auto",position:"relative",flexDirection:"column",minHeight:"0"},children:n.children})}function c(t){return e(n,{children:t.children})}s.displayName="LayoutContent",c.displayName="LayoutAside";const u=r({layoutConfig:{},setLayoutConfig:()=>{},locale:"en-US",setLocale:()=>{},getLanguages:()=>[]}),m=()=>u,h=()=>i(u);function y(n){const t=h(),{layoutConfig:o}=t;let r={boxSizing:"border-box",position:"sticky",width:"100%",zIndex:"100",top:"0",paddingBlock:"0",paddingInline:"0",transition:"background-color .3s cubic-bezier(.645, .045, .355, 1)"};return o.headerHeight&&(r={...r,height:o.headerHeight+"px",minHeight:o.headerHeight+"px"}),e("header",{style:r,children:n.children})}y.displayName="LayoutHeader";var g="layout-module_rootBox__Y8bEx",b="layout-module_rootLayout__TePvr",f="layout-module_mainLayout__a8Tb9";function p(n){let r=null,i=null,d=null;return o.Children.forEach(n.children,e=>{const n=e.type.displayName;"LayoutHeader"===n?r=e:"LayoutContent"===n?i=e:"LayoutAside"===n&&(d=e)}),t("div",{className:g,children:[e(a,{}),t("div",{className:b,children:[d,t("div",{className:f,children:[r,i]})]})]})}function x(t){const r=!!document.fullscreenElement,[i,a]=d(r),s=()=>{a(!!document.fullscreenElement)},c=e=>{"F11"===e.code&&(e.preventDefault(),u())};l(()=>(document.addEventListener("fullscreenchange",s),document.addEventListener("keydown",c,!0),()=>{document.removeEventListener("fullscreenchange",s),document.removeEventListener("keydown",c)}),[]);const u=()=>{i?document.exitFullscreen():document.documentElement.requestFullscreen()};if(!t.buttons||t.buttons.length<2)return e(n,{});const[m,h]=t.buttons,y=i?m:h;return o.cloneElement(y,{onClick:e=>{console.log(e),u()}})}!function(e,n){void 0===n&&(n={});var t=n.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('@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}\r\n.layout-module_rootBox__Y8bEx {\r\n box-sizing: border-box; \r\n position: relative;\r\n width: 100%;\r\n height:100%;\r\n overflow: hidden;\r\n background-color: transparent;\r\n}\r\n.layout-module_rootLayout__TePvr {\r\n box-sizing: border-box; \r\n inset: 0;\r\n display: flex;\r\n flex-flow: row;\r\n position: absolute;\r\n background-color: transparent;\r\n}\r\n.layout-module_mainLayout__a8Tb9 {\r\n box-sizing: border-box;\r\n display: flex;\r\n flex:auto; \r\n position: relative;\r\n flex-flow: column;\r\n min-height: 0px; \r\n}\r\n.layout-module_headerLayout__Jx8vy {\r\n box-sizing: border-box;\r\n position: sticky;\r\n width: 100%;\r\n z-index: 100;\r\n top: 0px;\r\n padding-block: 0px;\r\n padding-inline: 0px;\r\n transition: "background-color .3s cubic-bezier(.645, .045, .355, 1)"; \r\n}'),p.Aside=c,p.Content=s,p.Header=y;const v=r({theme:"system",setTheme:()=>{}});function L(n){const{children:t,storageKey:o="adminui-shadcn-theme"}=n,r=n.theme||localStorage.getItem(o)||n.defaultTheme||"system",[i,a]=d(r);l(()=>{const e=window.document.documentElement;if(e.classList.remove("light","dark"),"system"===i){const n=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";return void e.classList.add(n)}e.classList.add(i)},[i]);const s={theme:i,setTheme:e=>{localStorage.setItem(o,e),a(e)}};return e(v.Provider,{value:s,children:t})}const _=()=>{const e=i(v);if(void 0===e)throw new Error("useTheme must be used within a ThemeProvider");return e};export{x as FullScreenButton,p as Layout,a as LayoutBackground,L as ThemeProvider,m as createConfigContext,h as useConfigContext,_ 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.1",
|
|
4
4
|
"description": "adminui.dev's layout",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"layout",
|
|
@@ -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
|
}
|