mtxuilib 0.1.300 → 0.1.301

package/dist/layouts/dash5/DashSider.js

@@ -6,7 +6,7 @@ import { cn } from "mtxuilib/lib/utils";
 import { useDash } from "../DashLayoutProvider";
 import { SiderNavItem } from "./SiderNavItem";
 export const DashSider = (props) => {
-    const isSideCollapsed = useDash5Store((x) => x.isSideCollapsed);
+    const isSideCollapsed = useDash5Store((x) => x.layoutConfig.asideIsCollapsed);
     const setIsSideCollapsed = useDash5Store((x) => x.setIsSideCollapsed);
     const siderNavMenus = useDash(x => x.config?.siderNavMenus);
     return (_jsxs("div", { className: "flex flex-col gap-2 p-1 h-full", children: [_jsx("div", { className: "mb-2 flex items-center justify-between", children: _jsx("img", { src: "/media/logo.svg", alt: "mtmai-logo", width: 200, height: 26, loading: "lazy", className: cn("m-1 max-w-none duration-75  group-hover:[clip-path:none] 2xl:[clip-path:none] block dark:hidden", isSideCollapsed && "[clip-path:inset(0%_75%_0%_0%)]") }) }), _jsx("div", { className: "flex-1", children: _jsx(SiderNavItem, { isCollapsed: props.isCollapsed, items: siderNavMenus || [] }) }), _jsx("div", { children: _jsx(SiderToggleButton, { isCollapsed: !!isSideCollapsed, setIsCollapsed: setIsSideCollapsed }) })] }));

package/dist/layouts/dash5/DetailViewExample.d.ts

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

package/dist/layouts/dash5/DetailViewExample.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DetailViewExample() {
+    return _jsx("div", { className: "p-2 bg-red-200 rounded-md w-full h-full", children: _jsx("h1", { children: "detail view" }) });
+}

package/dist/layouts/dash5/ListViewExample.d.ts

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

package/dist/layouts/dash5/ListViewExample.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ListViewExample() {
+    return _jsx("div", { className: "p-2 bg-red-200 rounded-md w-full h-full", children: _jsx("h1", { children: "list view" }) });
+}

package/dist/layouts/dash5/dash5.store.d.ts

@@ -2,17 +2,25 @@ import { type ReactNode } from "react";
 import { type StateCreator } from "zustand";
 import type { Renderable } from "../../lib/render";
 import { DashSiderProps } from "../types";
+export declare const dash5LayoutDefaultConfig: {
+    asideIsCollapsed: boolean;
+    asideCollapsedSize: number;
+    asideDefaultSize: number;
+    asiderMinSize: number;
+    asiderMaxSize: number;
+    mainPanelDefaultSize: number;
+    mainPanelMinSize: number;
+    mainPanelMaxSize: number;
+    middlePanelDefaultSize: number;
+};
 export type Dash5LayoutProps = {
-    defaultAsideCollapsed?: boolean;
-    navCollapsedSize?: number;
-    isSideCollapsed?: boolean;
     siderComponent?: Renderable<DashSiderProps>;
     headerComponent?: Renderable<DashSiderProps>;
 };
 export interface Dash5LayoutState extends Dash5LayoutProps {
     _hasHydrated?: boolean;
+    layoutConfig: typeof dash5LayoutDefaultConfig;
     setHasHydrated: (_hasHydrated: boolean) => void;
-    defaultLayout: number[];
     setIsSideCollapsed: (isSideCollapsed: boolean) => void;
     setSiderComponent: (siderComponent: ReactNode) => void;
 }

package/dist/layouts/dash5/dash5.store.js

@@ -5,16 +5,28 @@ import { createStore, useStore } from "zustand";
 import { devtools, persist } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import { useShallow } from "zustand/react/shallow";
+export const dash5LayoutDefaultConfig = {
+    asideIsCollapsed: false,
+    asideCollapsedSize: 20,
+    asideDefaultSize: 20,
+    asiderMinSize: 12,
+    asiderMaxSize: 30,
+    mainPanelDefaultSize: 80,
+    mainPanelMinSize: 50,
+    mainPanelMaxSize: 90,
+    middlePanelDefaultSize: 0,
+};
 export const createAppSlice = (set, get, init) => {
     return {
         isDev: false,
         isCollapsed: false,
-        defaultLayout: [30, 70],
+        layoutConfig: dash5LayoutDefaultConfig,
         ...init,
         setHasHydrated: (_hasHydrated) => set({ _hasHydrated }),
         setIsSideCollapsed: (isSideCollapsed) => {
             console.log("isSideCollapsed", isSideCollapsed);
-            set({ isSideCollapsed });
+            const pre = get().layoutConfig;
+            set({ layoutConfig: { ...pre, asideIsCollapsed: isSideCollapsed } });
         },
         setSiderComponent: (siderComponent) => set({ siderComponent }),
     };
@@ -29,7 +41,7 @@ const createMtAppStore = (initProps) => {
     }), {
         name: "Dash5Layout",
         skipHydration: true,
-        version: 2,
+        version: 3,
         onRehydrateStorage: () => (state, error) => {
             state?.setHasHydrated(true);
         },

package/dist/layouts/dash5/index.js

@@ -4,27 +4,28 @@ import { cn } from "mtxuilib/lib/utils";
 import { useRef } from "react";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "../../ui/resizable";
 import { TooltipProvider } from "../../ui/tooltip";
-import { useDash } from "../DashLayoutProvider";
 import { Dash5LayoutProvider, useDash5Store, } from "./dash5.store";
 import { DashSider } from "./DashSider";
 export function Dash5Layout(props) {
     return (_jsx(Dash5LayoutProvider, { ...props, children: _jsx(DashLayoutInner, { children: props.children }) }));
 }
 const DashLayoutInner = (props) => {
-    const isSideCollapsed = useDash5Store((x) => x.isSideCollapsed);
-    const defaultLayout = useDash5Store((x) => x.defaultLayout);
-    const navCollapsedSize = useDash5Store((x) => x.navCollapsedSize);
+    const asideIsCollapsed = useDash5Store((x) => x.layoutConfig?.asideIsCollapsed);
+    const asideDefaultSize = useDash5Store(x => x.layoutConfig.asideDefaultSize);
+    const asideCollapsedSize = useDash5Store(x => x.layoutConfig.asideCollapsedSize);
+    const asideMinSize = useDash5Store(x => x.layoutConfig.asiderMinSize);
+    const asideMaxSize = useDash5Store(x => x.layoutConfig.asiderMaxSize);
     const setIsSideCollapsed = useDash5Store((x) => x.setIsSideCollapsed);
-    const siderComponent = useDash5Store((x) => x.siderComponent);
+    const mainPanelDefaultSize = useDash5Store(x => x.layoutConfig.mainPanelDefaultSize);
+    const mainPanelMinSize = useDash5Store(x => x.layoutConfig.mainPanelMinSize);
+    const mainPanelMaxSize = useDash5Store(x => x.layoutConfig.mainPanelMaxSize);
     const navPanelRef = useRef(null);
-    const logo = useDash(x => x.config?.logo);
-    const siderNavMenus = useDash(x => x.config?.siderNavMenus);
     return (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs(ResizablePanelGroup, { direction: "horizontal", onLayout: (sizes) => {
                 document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
-            }, className: "h-full items-stretch", children: [_jsx(ResizablePanel, { ref: navPanelRef, defaultSize: defaultLayout[0], collapsedSize: navCollapsedSize, collapsible: true, minSize: 12, maxSize: 30, onCollapse: () => {
+            }, className: "h-full items-stretch", children: [_jsx(ResizablePanel, { ref: navPanelRef, defaultSize: asideDefaultSize, collapsedSize: asideCollapsedSize, collapsible: true, minSize: asideMinSize, maxSize: asideMaxSize, onCollapse: () => {
                         setIsSideCollapsed(true);
                     }, onExpand: () => {
                         setIsSideCollapsed(false);
-                    }, className: cn(isSideCollapsed &&
-                        "min-w-[60px] transition-all duration-300 ease-in-out", "hidden sm:flex sm:flex-col"), children: _jsx(_Fragment, { children: _jsx(DashSider, { isCollapsed: !!isSideCollapsed }) }) }), _jsx(ResizableHandle, { withHandle: true, className: "hidden md:flex" }), _jsx(ResizablePanel, { defaultSize: defaultLayout[1], minSize: 30, children: _jsx("div", { className: "bg-muted/40 flex min-h-screen w-full flex-col", children: _jsxs("div", { className: cn("flex min-h-dvh flex-col"), children: [_jsx("main", { className: cn("flex h-full min-h-full flex-1 p-1 flex-col px-1"), children: _jsx("div", { className: "min-h-full w-full flex-1 flex flex-col", children: props.children }) }), _jsx("div", { className: "bg-slate-50" })] }) }) })] }) }));
+                    }, className: cn(asideIsCollapsed &&
+                        "min-w-[60px] transition-all duration-300 ease-in-out", "hidden sm:flex sm:flex-col"), children: _jsx(_Fragment, { children: _jsx(DashSider, { isCollapsed: !!asideIsCollapsed }) }) }), _jsx(ResizableHandle, { withHandle: true, className: "hidden md:flex" }), _jsx(ResizablePanel, { defaultSize: mainPanelDefaultSize, minSize: mainPanelMinSize, maxSize: mainPanelMaxSize, children: _jsx("div", { className: "bg-muted/40 flex min-h-screen w-full flex-col", children: _jsxs("div", { className: cn("flex min-h-dvh flex-col"), children: [_jsx("main", { className: cn("flex h-full min-h-full flex-1 p-1 flex-col px-1"), children: _jsx("div", { className: "min-h-full w-full flex-1 flex flex-col", children: props.children }) }), _jsx("div", { className: "bg-slate-50" })] }) }) })] }) }));
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mtxuilib",
   "private": false,
-  "version": "0.1.300",
+  "version": "0.1.301",
   "publishConfig": {
     "access": "public"
   },
@@ -166,7 +166,7 @@
     "react-intersection-observer": "^9.13.0",
     "react-markdown": "9.0.1",
     "react-moveable": "^0.56.0",
-    "react-resizable-panels": "^2.0.23",
+    "react-resizable-panels": "^2.1.3",
     "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.5.3",
     "react-tweet": "^3.2.1",