@adminui-dev/layout 1.0.0

package/dist/components/FullScreenButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export default function (props: {
+    buttons: React.ReactElement[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/LayoutAside.d.ts

@@ -0,0 +1,5 @@
+declare function LayoutAside(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace LayoutAside {
+    var displayName: string;
+}
+export default LayoutAside;

package/dist/components/LayoutBackground.d.ts

@@ -0,0 +1 @@
+export default function (): import("react/jsx-runtime").JSX.Element;

package/dist/components/LayoutContent.d.ts

@@ -0,0 +1,5 @@
+declare function LayoutContent(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace LayoutContent {
+    var displayName: string;
+}
+export default LayoutContent;

package/dist/components/LayoutContext.d.ts

@@ -0,0 +1,11 @@
+import type { Language, LayoutConfig } from "./typings";
+type ConfigDispatcher = {
+    layoutConfig: LayoutConfig;
+    setLayoutConfig: (config: LayoutConfig) => void;
+    locale: string;
+    setLocale: (locale: string) => void;
+    getLanguages: () => Language[];
+};
+export declare const createConfigContext: () => import("react").Context<ConfigDispatcher>;
+export declare const useConfigContext: () => ConfigDispatcher;
+export {};

package/dist/components/LayoutHeader.d.ts

@@ -0,0 +1,5 @@
+declare function LayoutHeader(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace LayoutHeader {
+    var displayName: string;
+}
+export default LayoutHeader;

package/dist/components/ThemeProvider.d.ts

@@ -0,0 +1,19 @@
+import type { Theme } from "./typings";
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    theme?: Theme;
+    defaultTheme?: Theme;
+    storageKey?: string;
+}
+type ThemeProviderState = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+/**
+ * 明亮模式上下文
+ * @param props
+ * @returns
+ */
+export default function (props: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const useTheme: () => ThemeProviderState;
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+import Layout from "./Layout";
+import FullScreenButton from "./FullScreenButton";
+import LayoutBackground from "./LayoutBackground";
+import ThemeProvider from "./ThemeProvider";
+export { Layout, ThemeProvider, LayoutBackground, FullScreenButton };

package/dist/components/layout.d.ts

@@ -0,0 +1,8 @@
+import type { LayoutPros } from './typings';
+declare function Layout(props: LayoutPros): import("react/jsx-runtime").JSX.Element;
+declare namespace Layout {
+    var Aside: typeof import("./LayoutAside").default;
+    var Content: typeof import("./LayoutContent").default;
+    var Header: typeof import("./LayoutHeader").default;
+}
+export default Layout;

package/dist/components/typings.d.ts

@@ -0,0 +1,61 @@
+type Theme = 'light' | 'dark' | 'system';
+type LayoutType = 'headMenu' | 'leftMenu';
+type LayoutTheme = 'light' | 'dark' | 'system';
+type ContainerMode = 'inline' | 'box' | 'panel';
+type ContainerStretch = 'inline' | 'auto' | 'full';
+interface LayoutConfig {
+    layoutType?: LayoutType;
+    headerHeight?: number;
+    asideWidth?: number;
+    asideCollapsedWidth?: number;
+    theme?: Theme;
+    locale?: string;
+    userInfo?: UserInfo;
+    brandInfo?: BrandInfo;
+}
+interface Language {
+    name: string;
+    locale: string;
+    flag?: React.ReactNode;
+}
+interface LocaleMessageData {
+    locale: string;
+    name: string;
+    flag?: string;
+    messages: Record<string, string>;
+}
+interface UserInfo {
+    id?: number;
+    uid: string;
+    title: string;
+    avatar?: string;
+}
+interface BrandInfo {
+    id?: number;
+    name: string;
+    title: string;
+    logo?: React.ReactNode;
+}
+declare function defineConfig(config: LayoutConfig): LayoutConfig;
+export interface LayoutPros extends React.HTMLAttributes<HTMLDivElement> {
+    layoutConfig?: LayoutConfig;
+    theme?: Theme;
+    locale?: string;
+    localeMessageData?: Record<string, LocaleMessageData>;
+}
+export interface MainLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    header?: React.ReactNode;
+    aside?: React.ReactNode;
+}
+export interface ContainerProps {
+    mode?: ContainerMode;
+    stretch?: ContainerStretch;
+    bordered?: boolean;
+    hideTitle?: boolean;
+    hideBreadcrumb?: boolean;
+    hideFooter?: boolean;
+    transparent?: boolean;
+    children?: React.ReactNode;
+}
+export { defineConfig };
+export type { Theme, LayoutTheme, LayoutType, LayoutConfig, Language, LocaleMessageData, UserInfo, BrandInfo };

package/dist/index.cjs.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react");function n(){return e.jsx("div",{style:{boxSizing:"border-box",pointerEvents:"none",position:"fixed",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("div",{children:t.children})}o.displayName="LayoutContent",r.displayName="LayoutAside";const i=t.createContext({layoutConfig:{},setLayoutConfig:()=>{},locale:"en-US",setLocale:()=>{},getLanguages:()=>[]});function s(n){const o=t.useContext(i),{layoutConfig:r}=o;let s={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 r.headerHeight&&(s={...s,height:r.headerHeight+"px",minHeight:r.headerHeight+"px"}),e.jsx("header",{style:s,children:n.children})}s.displayName="LayoutHeader";var d="layout-module_rootBox__Y8bEx",l="layout-module_rootLayout__TePvr",a="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:d,children:[e.jsx(n,{}),e.jsxs("div",{className:l,children:[s,e.jsxs("div",{className:a,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))}}('.layout-module_rootBox__Y8bEx {\r\n    text-rendering: "optimizeLegibility";\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    height:100%;\r\n    background-color: transparent;\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}\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=s;const u=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(),l())};t.useEffect(()=>(document.addEventListener("fullscreenchange",s),document.addEventListener("keydown",d,!0),()=>{document.removeEventListener("fullscreenchange",s),document.removeEventListener("keydown",d)}),[]);const l=()=>{r?document.exitFullscreen():document.documentElement.requestFullscreen()};if(!n.buttons||n.buttons.length<2)return e.jsx(e.Fragment,{});const[a,c]=n.buttons,u=r?a:c;return t.cloneElement(u,{onClick:e=>{console.log(e),l()}})},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 l={theme:s,setTheme:e=>{localStorage.setItem(r,e),d(e)}};return e.jsx(u.Provider,{value:l,children:o})},exports.defineConfig=function(e){return e};

package/dist/index.d.ts

@@ -0,0 +1,106 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+
+declare function LayoutHeader(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare namespace LayoutHeader {
+    var displayName: string;
+}
+
+declare function LayoutContent(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare namespace LayoutContent {
+    var displayName: string;
+}
+
+declare function LayoutAside(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare namespace LayoutAside {
+    var displayName: string;
+}
+
+type Theme = 'light' | 'dark' | 'system';
+type LayoutType = 'headMenu' | 'leftMenu';
+type LayoutTheme = 'light' | 'dark' | 'system';
+type ContainerMode = 'inline' | 'box' | 'panel';
+type ContainerStretch = 'inline' | 'auto' | 'full';
+interface LayoutConfig {
+    layoutType?: LayoutType;
+    headerHeight?: number;
+    asideWidth?: number;
+    asideCollapsedWidth?: number;
+    theme?: Theme;
+    locale?: string;
+    userInfo?: UserInfo;
+    brandInfo?: BrandInfo;
+}
+interface Language {
+    name: string;
+    locale: string;
+    flag?: React.ReactNode;
+}
+interface LocaleMessageData {
+    locale: string;
+    name: string;
+    flag?: string;
+    messages: Record<string, string>;
+}
+interface UserInfo {
+    id?: number;
+    uid: string;
+    title: string;
+    avatar?: string;
+}
+interface BrandInfo {
+    id?: number;
+    name: string;
+    title: string;
+    logo?: React.ReactNode;
+}
+declare function defineConfig(config: LayoutConfig): LayoutConfig;
+interface LayoutPros extends React.HTMLAttributes<HTMLDivElement> {
+    layoutConfig?: LayoutConfig;
+    theme?: Theme;
+    locale?: string;
+    localeMessageData?: Record<string, LocaleMessageData>;
+}
+interface MainLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    header?: React.ReactNode;
+    aside?: React.ReactNode;
+}
+interface ContainerProps {
+    mode?: ContainerMode;
+    stretch?: ContainerStretch;
+    bordered?: boolean;
+    hideTitle?: boolean;
+    hideBreadcrumb?: boolean;
+    hideFooter?: boolean;
+    transparent?: boolean;
+    children?: React.ReactNode;
+}
+
+declare function Layout(props: LayoutPros): react_jsx_runtime.JSX.Element;
+declare namespace Layout {
+    var Aside: typeof LayoutAside;
+    var Content: typeof LayoutContent;
+    var Header: typeof LayoutHeader;
+}
+
+declare function export_default$2(props: {
+    buttons: React$1.ReactElement[];
+}): react_jsx_runtime.JSX.Element;
+
+declare function export_default$1(): react_jsx_runtime.JSX.Element;
+
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    theme?: Theme;
+    defaultTheme?: Theme;
+    storageKey?: string;
+}
+/**
+ * 明亮模式上下文
+ * @param props
+ * @returns
+ */
+declare function export_default(props: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+export { export_default$2 as FullScreenButton, Layout, export_default$1 as LayoutBackground, export_default as ThemeProvider, defineConfig };
+export type { BrandInfo, ContainerProps, Language, LayoutConfig, LayoutPros, LayoutTheme, LayoutType, LocaleMessageData, MainLayoutProps, Theme, UserInfo };

package/dist/index.esm.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n,Fragment 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",position:"fixed",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(n){return e("div",{children:n.children})}s.displayName="LayoutContent",c.displayName="LayoutAside";const u=r({layoutConfig:{},setLayoutConfig:()=>{},locale:"en-US",setLocale:()=>{},getLanguages:()=>[]});function m(n){const t=i(u),{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})}m.displayName="LayoutHeader";var h="layout-module_rootBox__Y8bEx",y="layout-module_rootLayout__TePvr",g="layout-module_mainLayout__a8Tb9";function x(t){let r=null,i=null,d=null;return o.Children.forEach(t.children,e=>{const n=e.type.displayName;"LayoutHeader"===n?r=e:"LayoutContent"===n?i=e:"LayoutAside"===n&&(d=e)}),n("div",{className:h,children:[e(a,{}),n("div",{className:y,children:[d,n("div",{className:g,children:[r,i]})]})]})}function f(n){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(!n.buttons||n.buttons.length<2)return e(t,{});const[m,h]=n.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))}}('.layout-module_rootBox__Y8bEx {\r\n    text-rendering: "optimizeLegibility";\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    height:100%;\r\n    background-color: transparent;\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}\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}'),x.Aside=c,x.Content=s,x.Header=m;const p=r({theme:"system",setTheme:()=>{}});function b(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(p.Provider,{value:s,children:t})}function v(e){return e}export{f as FullScreenButton,x as Layout,a as LayoutBackground,b as ThemeProvider,v as defineConfig};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@adminui-dev/layout",
+  "version": "1.0.0",
+  "description": "adminui.dev's layout",
+  "keywords": [
+    "layout",
+    "adminui",
+    "admin",
+    "dashboard"
+  ],
+  "license": "MIT",
+  "author": "zhouwenqi",
+  "type": "commonjs",
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "./dist/index.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "main": "./dist/index.cjs.js",
+  "types": "./dist/index.d.ts",
+  "authors": [
+    "zhouwenqi <zhouwenqi1982@live.com>"
+  ],
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "tslib": "^2.6.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@types/commander": "^2.12.5",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "postcss": "^8.5.6",
+    "postcss-modules": "^6.0.1",
+    "rollup": "^4.0.0",
+    "rollup-plugin-dts": "^6.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^5.0.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}