listpage-next 0.0.194 → 0.0.196

package/dist/components/Menu/index.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Menu } from "antd";
-import { useActiveMenuKey } from "./hooks/useMenuNavigation.js";
+import { styled } from "styled-components";
 const Menu_Menu = (props)=>{
     const { menus, theme, style, baseUrl } = props;
-    const [activeKey, setActiveKey] = useActiveMenuKey(menus, baseUrl);
+    const [activeKey, setActiveKey] = useState(null);
     const menuItems = useMemo(()=>menus.map((item)=>({
                 key: item.key,
                 label: item.label,
@@ -17,7 +17,7 @@ const Menu_Menu = (props)=>{
             })), [
         menus
     ]);
-    return /*#__PURE__*/ jsx(Menu, {
+    return /*#__PURE__*/ jsx(MenuStyled, {
         mode: "inline",
         theme: theme,
         style: style,
@@ -30,4 +30,9 @@ const Menu_Menu = (props)=>{
         }
     });
 };
+const MenuStyled = styled(Menu)`
+  .ant-menu {
+    border-inline-end: none !important;
+  }
+`;
 export { Menu_Menu as Menu };

package/dist/components/PageLayout/components/LayoutContent/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface LayoutContentProps {
+    children?: ReactNode | ReactNode[];
+    title?: ReactNode;
+    extra?: ReactNode;
+    style?: CSSProperties;
+}
+export declare const LayoutContent: (props: LayoutContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PageLayout/components/LayoutContent/index.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { styled } from "styled-components";
+const LayoutContent = (props)=>{
+    const { children, title, extra, style } = props;
+    return /*#__PURE__*/ jsxs(LayoutContentStyled, {
+        style: style,
+        children: [
+            (Boolean(title) || Boolean(extra)) && /*#__PURE__*/ jsxs(HeaderSection, {
+                children: [
+                    /*#__PURE__*/ jsx(Title, {
+                        children: title
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        children: extra
+                    })
+                ]
+            }),
+            children
+        ]
+    });
+};
+const LayoutContentStyled = styled.div`
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  gap: 16px;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 16px 24px;
+  background-color: #eeeeee;
+`;
+const HeaderSection = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 0 0 auto;
+`;
+const Title = styled.div`
+  font-size: 20px;
+  font-weight: 500;
+  color: #333;
+  line-height: 1.5;
+`;
+export { LayoutContent };

package/dist/components/PageLayout/components/PageLogo/index.js

@@ -1,40 +1,56 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar, Image } from "antd";
 import { styled } from "styled-components";
+import { usePageContext } from "../PageProvider/index.js";
 const PageLogo = (props)=>{
     const { src, icon, title } = props;
+    const { collapsed } = usePageContext();
+    const image = src && /*#__PURE__*/ jsx(Image, {
+        width: 22,
+        height: 22,
+        src: src,
+        preview: true
+    });
+    const avatar = icon && /*#__PURE__*/ jsx(Avatar, {
+        icon: icon,
+        shape: "circle",
+        size: 22
+    });
+    if (collapsed) return /*#__PURE__*/ jsx(LogoContentCollapseWrapper, {
+        children: image || avatar
+    });
     return /*#__PURE__*/ jsxs(LogoContentWrapper, {
         children: [
-            src && /*#__PURE__*/ jsx(Image, {
-                width: 24,
-                height: 24,
-                src: src,
-                preview: true
-            }),
-            icon && /*#__PURE__*/ jsx(Avatar, {
-                icon: icon,
-                shape: "circle",
-                size: 24
-            }),
+            image || avatar,
             title && /*#__PURE__*/ jsx(TitleContentWrapper, {
                 children: title
             })
         ]
     });
 };
+const LogoContentCollapseWrapper = styled.div`
+  flex-shrink: 0;
+  flex-grow: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-block-end: 1px solid rgba(0, 0, 0, 0.06);
+  height: 55px;
+`;
 const LogoContentWrapper = styled.div`
   flex-shrink: 0;
   flex-grow: 0;
   display: flex;
   align-items: center;
-  gap: 8px;
-  height: 64px;
+  gap: 6px;
+  height: 55px;
 
-  padding: 0 22px;
+  border-block-end: 1px solid rgba(0, 0, 0, 0.06);
+  padding: 16px 12px;
 `;
 const TitleContentWrapper = styled.div`
-  font-size: 20px;
-  line-height: 24px;
+  font-size: 16px;
+  line-height: 22px;
   font-weight: 600;
   color: #333;
 `;

package/dist/components/PageLayout/components/PageSider/IconCollapse.d.ts

@@ -0,0 +1 @@
+export declare const IconCollapse: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/PageLayout/components/PageSider/IconCollapse.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+const IconCollapse = ()=>/*#__PURE__*/ jsx("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 12 12",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M6.432 7.967a.448.448 0 01-.318.133h-.228a.46.46 0 01-.318-.133L2.488 4.85a.305.305 0 010-.43l.427-.43a.293.293 0 01.42 0L6 6.687l2.665-2.699a.299.299 0 01.426 0l.42.431a.305.305 0 010 .43L6.432 7.967z"
+        })
+    });
+export { IconCollapse };

package/dist/components/PageLayout/components/PageSider/index.js

@@ -2,12 +2,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { Layout } from "antd";
 import { PageLogo } from "../PageLogo/index.js";
+import { IconCollapse } from "./IconCollapse.js";
+import { usePageContext } from "../PageProvider/index.js";
 const PageSider = (props)=>{
     const { logo, children, ...siderProps } = props;
+    const { collapsed, setCollapsed } = usePageContext();
     return /*#__PURE__*/ jsx(SiderStyled, {
         trigger: null,
         width: 256,
-        collapsedWidth: 80,
+        collapsedWidth: 48,
         breakpoint: "lg",
         collapsible: true,
         ...siderProps,
@@ -18,6 +21,11 @@ const PageSider = (props)=>{
                 }),
                 /*#__PURE__*/ jsx(SiderContentWrapper, {
                     children: children
+                }),
+                /*#__PURE__*/ jsx(CollapseButton, {
+                    collapsed: collapsed,
+                    onClick: ()=>setCollapsed(!collapsed),
+                    children: /*#__PURE__*/ jsx(IconCollapse, {})
                 })
             ]
         })
@@ -29,7 +37,7 @@ const SiderStyled = styled(Layout.Sider)`
   display: flex;
   flex-direction: column;
 
-  padding: 12px;
+  padding: 0px 8px;
 `;
 const SiderContent = styled.div`
   display: flex;
@@ -41,4 +49,31 @@ const SiderContentWrapper = styled.div`
   flex: 1;
   overflow: auto;
 `;
+const CollapseButton = styled.div`
+  position: absolute;
+  inset-block-start: 18px;
+  z-index: 101;
+  width: 24px;
+  height: 24px;
+  text-align: center;
+  border-radius: 40px;
+  inset-inline-end: -13px;
+  transition: transform 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #ffffff;
+  box-shadow:
+    0 2px 8px -2px rgba(0, 0, 0, 0.05),
+    0 1px 4px -1px rgba(25, 15, 15, 0.07),
+    0 0 1px 0 rgba(0, 0, 0, 0.08);
+
+  &:hover {
+    color: #000;
+  }
+
+  transform: ${({ collapsed })=>collapsed ? 'rotate(270deg)' : 'rotate(90deg)'};
+`;
 export { PageSider };

package/dist/components/PageLayout/index.d.ts

@@ -1,4 +1,5 @@
 export { PageLoading } from './components/PageLoading';
 export { PageLayout } from './components/PageLayout';
+export { LayoutContent, type LayoutContentProps, } from './components/LayoutContent';
 export type { PageLayoutProps } from './components/PageLayout';
 export { PageContext, usePageContext } from './components/PageProvider';

package/dist/components/PageLayout/index.js

@@ -1,4 +1,5 @@
 import { PageLoading } from "./components/PageLoading/index.js";
 import { PageLayout } from "./components/PageLayout/index.js";
+import { LayoutContent } from "./components/LayoutContent/index.js";
 import { PageContext, usePageContext } from "./components/PageProvider/index.js";
-export { PageContext, PageLayout, PageLoading, usePageContext };
+export { LayoutContent, PageContext, PageLayout, PageLoading, usePageContext };

package/dist/features/ChatClient/icons/IconSend.d.ts

@@ -0,0 +1,3 @@
+export declare const IconSend: (props: {
+    size?: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/icons/IconSend.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+const IconSend = (props)=>/*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        version: "1.1",
+        width: props.size,
+        height: props.size,
+        fontSize: "13",
+        viewBox: "0 0 12 12",
+        children: /*#__PURE__*/ jsx("g", {
+            children: /*#__PURE__*/ jsx("g", {
+                children: /*#__PURE__*/ jsx("g", {
+                    children: /*#__PURE__*/ jsx("path", {
+                        d: "M2.5892448413452147,1.0731753672753905L10.443560641345215,5.01422785727539C10.992402441345215,5.292121857275391,11.212822441345216,5.961596457275391,10.927351941345215,6.504752157275391C10.826088941345215,6.718707057275391,10.655646341345214,6.8922681572753905,10.443560641345215,6.997385957275391L2.576614341345215,10.93654155727539C2.0189285413452147,11.20812095727539,1.3450336413452149,10.98707095727539,1.0620861013452148,10.44454285727539C0.9361019133452149,10.18475245727539,0.9130878453452148,9.88691615727539,0.9976644513452149,9.61085795727539L1.857875821345215,6.830649357275391C1.9378719313452148,6.575499557275391,2.174690241345215,6.402173057275391,2.4420862413452147,6.4030685572753905L5.453454941345215,6.4030685572753905C5.676507941345215,6.401380557275391,5.857397041345215,6.221891357275391,5.860822641345215,5.99885845727539C5.859089841345215,5.775108357275391,5.6772108413452145,5.594640757275391,5.453454941345215,5.594647457275391L2.4439811413452146,5.594647457275391C2.175321541345215,5.595311157275391,1.9378442813452148,5.420153657275391,1.859139441345215,5.16328045727539L1.010297775345215,2.3735952572753907C0.8344821913452148,1.7857064572753907,1.1717939413452148,1.1672562972753906,1.7612447713452148,0.9967526872753907C2.0360918413452147,0.9105386212753906,2.334002541345215,0.9378270581753906,2.588612541345215,1.0725430872753907L2.5892448413452147,1.0731753672753905Z",
+                        fill: "#FFFFFF",
+                        "fill-opacity": "1"
+                    })
+                })
+            })
+        })
+    });
+export { IconSend };

package/dist/features/ChatClient/ui/ChatInput/index.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { Button, Divider, Dropdown } from "antd";
-import { ArrowUpOutlined, PauseCircleTwoTone } from "@ant-design/icons";
+import { PauseCircleTwoTone } from "@ant-design/icons";
 import { EditorContent } from "../EditorContent/index.js";
-import { ChatInputBottom, ChatInputContent, ChatInputPanel } from "./styles.js";
+import { ChatInputBottom, ChatInputContent, ChatInputPanel, ExtraContainer } from "./styles.js";
 import { useTrigger } from "./hooks/useTrigger.js";
+import { IconSend } from "../../icons/IconSend.js";
 const ChatInput = (props)=>{
     const { style, className, placeholder, extra, actions, loading, onSubmit, skills = [] } = props;
     const ref = useRef(null);
@@ -44,7 +45,7 @@ const ChatInput = (props)=>{
                         /*#__PURE__*/ jsx("div", {
                             children: actions
                         }),
-                        /*#__PURE__*/ jsxs("div", {
+                        /*#__PURE__*/ jsxs(ExtraContainer, {
                             children: [
                                 extra,
                                 extra && /*#__PURE__*/ jsx(Divider, {
@@ -60,7 +61,14 @@ const ChatInput = (props)=>{
                                     onClick: handleClickSend,
                                     onKeyDown: handleKeyDown,
                                     disabled: !inputValue && !loading,
-                                    icon: loading ? /*#__PURE__*/ jsx(PauseCircleTwoTone, {}) : /*#__PURE__*/ jsx(ArrowUpOutlined, {})
+                                    style: {
+                                        display: 'inline-flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center'
+                                    },
+                                    children: loading ? /*#__PURE__*/ jsx(PauseCircleTwoTone, {}) : /*#__PURE__*/ jsx(IconSend, {
+                                        size: 16
+                                    })
                                 })
                             ]
                         })

package/dist/features/ChatClient/ui/ChatInput/styles.d.ts

@@ -1,3 +1,4 @@
 export declare const ChatInputPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ChatInputContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ChatInputBottom: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ExtraContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/features/ChatClient/ui/ChatInput/styles.js

@@ -48,4 +48,9 @@ const ChatInputBottom = styled.div`
 
   flex-shrink: 0;
 `;
-export { ChatInputBottom, ChatInputContent, ChatInputPanel };
+const ExtraContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export { ChatInputBottom, ChatInputContent, ChatInputPanel, ExtraContainer };

package/dist/features/ListPage/components/ListPageContainer/index.js

@@ -1,24 +1,26 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useImperativeHandle } from "react";
 import { observer } from "mobx-react-lite";
-import { FilterForm } from "../../../../components/FilterGroup/index.js";
+import { LayoutContent } from "../../../../components/index.js";
 import { ListPageProvider, useListPageStore } from "../../context/index.js";
 import { useFloat } from "../../hooks/useFloat.js";
 import { useHeader } from "../../hooks/useHeader.js";
-import { FilterSection, ListPageWrapper, ToolbarSection } from "../../styles.js";
+import { FilterSection, ToolbarSection } from "../../styles.js";
 import { DataTable } from "../DataTable/index.js";
-import { useImperativeHandle } from "react";
+import { FilterForm } from "../../../../components/FilterGroup/index.js";
 const ListPageContainerComponent = observer((props)=>{
     const { styles, header, filter, toolbar, table, pageRef } = props;
     const store = useListPageStore();
-    const headerEle = useHeader(header);
+    const { title, extra } = useHeader(header);
     const floatEle = useFloat();
     useImperativeHandle(pageRef, ()=>store, [
         store
     ]);
-    return /*#__PURE__*/ jsxs(ListPageWrapper, {
+    return /*#__PURE__*/ jsxs(LayoutContent, {
         style: styles?.page,
+        title: title,
+        extra: extra,
         children: [
-            headerEle,
             filter && /*#__PURE__*/ jsx(FilterSection, {
                 children: /*#__PURE__*/ jsx(FilterForm, {
                     labelInline: filter.labelInline,

package/dist/features/ListPage/hooks/useHeader.d.ts

@@ -1,2 +1,8 @@
 import { ListPageHeaderProps } from '../types';
-export declare function useHeader(props?: ListPageHeaderProps): false | import("react/jsx-runtime").JSX.Element;
+export declare function useHeader(props?: ListPageHeaderProps): {
+    title?: undefined;
+    extra?: undefined;
+} | {
+    title: import("react").ReactNode;
+    extra: import("react").ReactNode;
+};

package/dist/features/ListPage/hooks/useHeader.js

@@ -1,20 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useListPageStore } from "../context/index.js";
-import { HeaderSection, Title } from "../styles.js";
 function useHeader(props) {
     const store = useListPageStore();
-    if (!props) return false;
+    if (!props) return {};
     const { title, extra } = props;
     const extraEle = 'function' == typeof extra ? extra(store) : extra;
-    return /*#__PURE__*/ jsxs(HeaderSection, {
-        children: [
-            /*#__PURE__*/ jsx(Title, {
-                children: title
-            }),
-            /*#__PURE__*/ jsx("div", {
-                children: extraEle
-            })
-        ]
-    });
+    return {
+        title,
+        extra: extraEle
+    };
 }
 export { useHeader };

package/dist/features/ListPage/styles.d.ts

@@ -1,6 +1,3 @@
-export declare const ListPageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const HeaderSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FilterSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ToolbarSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const BodySection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/features/ListPage/styles.js

@@ -1,27 +1,4 @@
 import styled_components from "styled-components";
-const ListPageWrapper = styled_components.div`
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  gap: 16px;
-  flex-direction: column;
-  overflow: hidden;
-  padding: 16px 24px;
-  background-color: #eeeeee;
-`;
-const HeaderSection = styled_components.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex: 0 0 auto;
-`;
-const Title = styled_components.div`
-  font-size: 20px;
-  font-weight: 500;
-  color: #333;
-  line-height: 1.5;
-`;
 const FilterSection = styled_components.div`
   background: #fff;
   padding: 24px 32px;
@@ -47,4 +24,4 @@ const TableContainer = styled_components.div`
     }
   }
 `;
-export { BodySection, FilterSection, HeaderSection, ListPageWrapper, PaginationContainer, TableContainer, Title, ToolbarSection };
+export { BodySection, FilterSection, PaginationContainer, TableContainer, ToolbarSection };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.194",
+  "version": "0.0.196",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",