mtxuilib 0.1.301 → 0.1.303

package/dist/layouts/dash5/SiderToggleButton.js

@@ -1,5 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDash5Store } from './dash5.store';
 export const SiderToggleButton = ({ isCollapsed, setIsCollapsed }) => {
-    return (_jsx(_Fragment, { children: _jsx("button", { onClick: () => setIsCollapsed(!isCollapsed), className: "flex w-full items-center justify-center p-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition-colors", "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar", children: isCollapsed ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }) })) }) }));
+    const toggleAsideCollapsed = useDash5Store(x => x.toggleAsideCollapsed);
+    return (_jsx(_Fragment, { children: _jsx("button", { onClick: () => toggleAsideCollapsed(), className: "flex w-full items-center justify-center p-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition-colors", "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar", children: isCollapsed ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }) })) }) }));
 };

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

@@ -8,10 +8,12 @@ export declare const dash5LayoutDefaultConfig: {
     asideDefaultSize: number;
     asiderMinSize: number;
     asiderMaxSize: number;
+    asiderCollapsible: boolean;
     mainPanelDefaultSize: number;
     mainPanelMinSize: number;
     mainPanelMaxSize: number;
     middlePanelDefaultSize: number;
+    layoutStoreKey: string;
 };
 export type Dash5LayoutProps = {
     siderComponent?: Renderable<DashSiderProps>;
@@ -23,6 +25,7 @@ export interface Dash5LayoutState extends Dash5LayoutProps {
     setHasHydrated: (_hasHydrated: boolean) => void;
     setIsSideCollapsed: (isSideCollapsed: boolean) => void;
     setSiderComponent: (siderComponent: ReactNode) => void;
+    toggleAsideCollapsed: () => void;
 }
 export declare const createAppSlice: StateCreator<Dash5LayoutState, [
 ], [

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

@@ -7,14 +7,16 @@ import { immer } from "zustand/middleware/immer";
 import { useShallow } from "zustand/react/shallow";
 export const dash5LayoutDefaultConfig = {
     asideIsCollapsed: false,
-    asideCollapsedSize: 20,
+    asideCollapsedSize: 4,
     asideDefaultSize: 20,
-    asiderMinSize: 12,
-    asiderMaxSize: 30,
+    asiderMinSize: 8,
+    asiderMaxSize: 24,
+    asiderCollapsible: true,
     mainPanelDefaultSize: 80,
-    mainPanelMinSize: 50,
-    mainPanelMaxSize: 90,
+    mainPanelMinSize: 30,
+    mainPanelMaxSize: 100,
     middlePanelDefaultSize: 0,
+    layoutStoreKey: "dash-resizable-panels:layout",
 };
 export const createAppSlice = (set, get, init) => {
     return {
@@ -29,6 +31,10 @@ export const createAppSlice = (set, get, init) => {
             set({ layoutConfig: { ...pre, asideIsCollapsed: isSideCollapsed } });
         },
         setSiderComponent: (siderComponent) => set({ siderComponent }),
+        toggleAsideCollapsed: () => {
+            const pre = get().layoutConfig;
+            set({ layoutConfig: { ...pre, asideIsCollapsed: !pre.asideIsCollapsed } });
+        }
     };
 };
 const createMtAppStore = (initProps) => {

package/dist/layouts/dash5/index.js

@@ -15,17 +15,19 @@ const DashLayoutInner = (props) => {
     const asideCollapsedSize = useDash5Store(x => x.layoutConfig.asideCollapsedSize);
     const asideMinSize = useDash5Store(x => x.layoutConfig.asiderMinSize);
     const asideMaxSize = useDash5Store(x => x.layoutConfig.asiderMaxSize);
+    const asideCollapsible = useDash5Store(x => x.layoutConfig.asiderCollapsible);
     const setIsSideCollapsed = useDash5Store((x) => x.setIsSideCollapsed);
+    const layoutStoreKey = useDash5Store(x => x.layoutConfig.layoutStoreKey);
     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);
     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: asideDefaultSize, collapsedSize: asideCollapsedSize, collapsible: true, minSize: asideMinSize, maxSize: asideMaxSize, onCollapse: () => {
+                document.cookie = `${layoutStoreKey}=${JSON.stringify(sizes)}`;
+            }, className: "h-full items-stretch", children: [_jsx(ResizablePanel, { ref: navPanelRef, defaultSize: asideDefaultSize, collapsedSize: asideCollapsedSize, collapsible: asideCollapsible, minSize: asideMinSize, maxSize: asideMaxSize, onCollapse: () => {
                         setIsSideCollapsed(true);
                     }, onExpand: () => {
                         setIsSideCollapsed(false);
                     }, 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" })] }) }) })] }) }));
+                        "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 hover:cursor-col-resize hover:bg-gray-400" }), _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.301",
+  "version": "0.1.303",
   "publishConfig": {
     "access": "public"
   },

package/dist/layouts/DashLayoutRender.d.ts

@@ -1,2 +0,0 @@
-import { PropsWithChildren } from "react";
-export declare const DashLayoutRender: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/layouts/DashLayoutRender.js

@@ -1,7 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Dash5Layout } from "./dash5";
-export const DashLayoutRender = (props) => {
-    const { children, ...etc } = props;
-    return _jsx(Dash5Layout, { ...etc, children: children });
-};