mtxuilib 0.1.260 → 0.1.262

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

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import { type StateCreator } from "zustand";
 import type { Renderable } from "../../lib/render";
 export type Dash5LayoutProps = {
@@ -6,13 +7,13 @@ export type Dash5LayoutProps = {
     isSideCollapsed?: boolean;
     siderComponent?: Renderable;
     postion?: "fullScreen" | "inline";
-    setSiderComponent: (siderComponent: Renderable) => void;
 };
 export interface Dash5LayoutState extends Dash5LayoutProps {
     _hasHydrated?: boolean;
     setHasHydrated: (_hasHydrated: boolean) => void;
     defaultLayout: number[];
     setIsSideCollapsed: (isSideCollapsed: boolean) => void;
+    setSiderComponent: (siderComponent: ReactNode) => void;
 }
 export declare const createAppSlice: StateCreator<Dash5LayoutState, [
 ], [

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

@@ -13,7 +13,10 @@ export const createAppSlice = (set, get, init) => {
         postion: "fullScreen",
         ...init,
         setHasHydrated: (_hasHydrated) => set({ _hasHydrated }),
-        setIsSideCollapsed: (isSideCollapsed) => set({ isSideCollapsed }),
+        setIsSideCollapsed: (isSideCollapsed) => {
+            console.log("isSideCollapsed", isSideCollapsed);
+            set({ isSideCollapsed });
+        },
         setSiderComponent: (siderComponent) => set({ siderComponent }),
     };
 };
@@ -36,11 +39,10 @@ const createMtAppStore = (initProps) => {
                 return ![
                     "cookieStr",
                     "children",
-                    "openFab",
-                    "userInfo",
                     "_hasHydrated",
                     "socket",
                     "session",
+                    "siderComponent",
                 ].includes(key);
             }));
         },

package/dist/layouts/dash5/index.js

@@ -1,8 +1,9 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "mtxuilib/lib/utils";
 import { useRef } from "react";
 import { Users2 } from "lucide-react";
+import { flexRender } from "../../lib/render";
 import { ScreenPanel } from "../../ui/mt/ScreenPanel";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "../../ui/resizable";
 import { Dash5LayoutProvider, useDash5Store, } from "./dash5.store";
@@ -23,20 +24,21 @@ const DashLayoutInner = (props) => {
     const defaultLayout = useDash5Store((x) => x.defaultLayout);
     const navCollapsedSize = useDash5Store((x) => x.navCollapsedSize);
     const setIsSideCollapsed = useDash5Store((x) => x.setIsSideCollapsed);
+    const siderComponent = useDash5Store((x) => x.siderComponent);
     const navPanelRef = useRef(null);
     return (_jsxs(ResizablePanelGroup, { direction: "horizontal", onLayout: (sizes) => {
             document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
-        }, className: "h-full max-h-[940px] items-stretch", children: [_jsx(ResizablePanel, { ref: navPanelRef, defaultSize: defaultLayout[0], collapsedSize: navCollapsedSize, collapsible: true, minSize: 12, maxSize: 20, onCollapse: () => {
+        }, className: "h-full items-stretch", children: [_jsx(ResizablePanel, { ref: navPanelRef, defaultSize: defaultLayout[0], collapsedSize: navCollapsedSize, collapsible: true, minSize: 12, maxSize: 30, onCollapse: () => {
                     setIsSideCollapsed(true);
                 }, onExpand: () => {
                     setIsSideCollapsed(false);
                 }, className: cn(isSideCollapsed &&
-                    "min-w-[50px] transition-all duration-300 ease-in-out", "hidden sm:flex sm:flex-col"), children: _jsx(Nav, { isCollapsed: isSideCollapsed || false, links: childrenDashRouters?.map((x) => {
-                        return {
-                            title: x.label || "no-title",
-                            label: x.label || "no-label",
-                            icon: Users2,
-                            variant: "ghost",
-                        };
-                    }) }) }), _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(Header, {}), _jsx("div", { className: "flex p-1", children: _jsx("main", { className: cn("flex h-full min-h-full flex-1", "flex-col px-1"), children: props.children }) }), _jsx("div", { className: "bg-slate-50" })] }) }) })] }));
+                    "min-w-[50px] transition-all duration-300 ease-in-out", "hidden sm:flex sm:flex-col"), children: _jsxs(_Fragment, { children: [_jsx(Nav, { isCollapsed: isSideCollapsed || false, links: childrenDashRouters?.map((x) => {
+                                return {
+                                    title: x.label || "no-title",
+                                    label: x.label || "no-label",
+                                    icon: Users2,
+                                    variant: "ghost",
+                                };
+                            }) }), siderComponent && flexRender(siderComponent, {})] }) }), _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(Header, {}), _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/dist/layouts/dash5/nav.js

@@ -7,8 +7,6 @@ import { MtButton } from "../../ui/mt/Button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";
 import { useDash5Store } from "./dash5.store";
 export function Nav({ links, isCollapsed }) {
-    const isSideCollapsed = useDash5Store((x) => x.isSideCollapsed);
-    const setIsSideCollapsed = useDash5Store((x) => x.setIsSideCollapsed);
     return (_jsxs("div", { "data-collapsed": isCollapsed, className: "group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2", children: [_jsx("nav", { className: "grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2", children: links.map((link, index) => isCollapsed ? (_jsxs(Tooltip, { delayDuration: 0, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Link, { href: "#", className: cn(buttonVariants({ variant: link.variant, size: "icon" }), "h-9 w-9", link.variant === "default" &&
                                     "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white"), children: [_jsx(link.icon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: link.title })] }) }), _jsxs(TooltipContent, { side: "right", className: "flex items-center gap-4", children: [link.title, link.label && (_jsx("span", { className: "ml-auto text-muted-foreground", children: link.label }))] })] }, index)) : (_jsxs(Link, { href: "#", className: cn(buttonVariants({ variant: link.variant, size: "sm" }), link.variant === "default" &&
                         "dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white", "justify-start"), children: [_jsx(link.icon, { className: "mr-2 h-4 w-4" }), link.title, link.label && (_jsx("span", { className: cn("ml-auto", link.variant === "default" &&

package/dist/ui/mt/dialog/MtDialog.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentProps } from "react";
+import { Dialog } from "../../dialog";
+interface MtDialogProps extends ComponentProps<typeof Dialog> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+}
+export declare function MtDialog(props: React.PropsWithChildren<MtDialogProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/mt/dialog/MtDialog.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useMediaQuery } from "../../../hooks/use-media-query";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../../dialog";
+import { Drawer, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, } from "../../drawer";
+export function MtDialog(props) {
+    const [open, setOpen] = useState(props.open || false);
+    const isDesktop = useMediaQuery("(min-width: 768px)");
+    const handleOpenChange = (open) => {
+        setOpen(open);
+        props.onOpenChange?.(open);
+    };
+    if (isDesktop) {
+        return (_jsx(Dialog, { open: open, onOpenChange: handleOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: props.title }), props.description && (_jsx(DialogDescription, { children: props.description }))] }), props.children, props.actions && _jsx(DialogFooter, { children: props.actions })] }) }));
+    }
+    return (_jsx(Drawer, { open: open, onOpenChange: handleOpenChange, children: _jsxs(DrawerContent, { children: [_jsxs(DrawerHeader, { className: "text-left", children: [_jsx(DrawerTitle, { children: props.title }), props.description && (_jsx(DrawerDescription, { children: props.description }))] }), props.children, props.actions && (_jsx(DrawerFooter, { className: "pt-2", children: props.actions }))] }) }));
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mtxuilib",
   "private": false,
-  "version": "0.1.260",
+  "version": "0.1.262",
   "publishConfig": {
     "access": "public"
   },