listpage-next 0.0.212 → 0.0.214

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface CardProps {
+    title: string;
+    extra?: ReactNode;
+    bordered?: boolean;
+    children?: ReactNode;
+}
+export declare const Card: (props: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/index.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled_components from "styled-components";
+const Card = (props)=>{
+    const { title, extra, bordered, children } = props;
+    return /*#__PURE__*/ jsxs(CardContainer, {
+        bordered: bordered,
+        children: [
+            /*#__PURE__*/ jsxs(CardHeader, {
+                children: [
+                    /*#__PURE__*/ jsx(CardTitle, {
+                        children: title
+                    }),
+                    /*#__PURE__*/ jsx(CardExtra, {
+                        children: extra
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(CardBody, {
+                children: children
+            })
+        ]
+    });
+};
+const CardContainer = styled_components.div`
+  background-color: rgb(255 255 255 /1);
+  border-color: rgb(229 231 235 / 1);
+  border-bottom-width: 1px;
+  flex-direction: column;
+  display: flex;
+  min-height: 200px;
+  ${({ bordered })=>bordered && 'border: 1px solid rgb(229 231 235 / 1);'}
+}
+`;
+const CardHeader = styled_components.div`
+  padding: 7px 14px;
+  background-color: rgb(243 244 246 /1);
+  border-bottom: 1px solid rgb(229 231 235 /1);
+  border-bottom-width: 1px;
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+`;
+const CardTitle = styled_components.div`
+  color: rgb(75 85 99 / 1);
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 14px;
+  align-items: center;
+  display: flex;
+`;
+const CardExtra = styled_components.div`
+  display: flex;
+  align-items: center;
+`;
+const CardBody = styled_components.div`
+  background-color: rgb(255 255 255 /1);
+`;
+export { Card };

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

@@ -6,8 +6,10 @@ export interface PageModalProps extends Omit<ModalProps, 'visible' | 'open' | 'o
     onCancel?: () => void;
     okText?: string;
     cancelText?: string;
+    icon?: ReactNode;
     title: string;
     children?: ReactNode;
-    footerExtra?: ReactNode;
+    actionPosition?: 'top' | 'bottom' | 'none';
+    extraActions?: ReactNode;
 }
 export declare const PageModal: (props: PageModalProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,42 +1,17 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Button, Modal } from "antd";
+import { jsx } from "react/jsx-runtime";
+import { Modal } from "antd";
 import styled_components from "styled-components";
-import { AsyncButton } from "../../../AsyncButton/index.js";
+import { useActions } from "./useActions.js";
 const PageModal = (props)=>{
-    const { visible, onCancel, onOk, okText, cancelText, title, children, footerExtra, ...modalProps } = props;
-    const footer = /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(FooterExtraContainer, {
-                children: footerExtra
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                children: [
-                    /*#__PURE__*/ jsx(Button, {
-                        type: "text",
-                        onClick: onCancel,
-                        children: cancelText || '取消'
-                    }),
-                    /*#__PURE__*/ jsx(AsyncButton, {
-                        style: {
-                            marginLeft: '0.65rem'
-                        },
-                        type: "primary",
-                        onClick: onOk,
-                        children: okText || '确定'
-                    })
-                ]
-            })
-        ]
-    });
+    const { icon, visible, children, extraActions, actionPosition = 'bottom', ...modalProps } = props;
+    const { footer, header } = useActions(props);
     return /*#__PURE__*/ jsx(ModalStyled, {
         ...modalProps,
         open: visible,
-        title: title,
+        title: header,
         closeIcon: null,
-        closable: true,
         footer: footer,
-        onCancel: onCancel,
-        onOk: onOk,
+        closable: 'top' !== actionPosition,
         children: children
     });
 };
@@ -67,12 +42,7 @@ const ModalStyled = styled_components(Modal)`
     border-bottom: 1px solid rgb(243 244 246 / 1);
   }
   .ant-modal-body {
-    padding: 21px;
+    padding: 0px;
   }
 `;
-const FooterExtraContainer = styled_components.div`
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-`;
 export { PageModal };

package/dist/components/PageLayout/components/PageModal/useActions.d.ts

@@ -0,0 +1,5 @@
+import { type PageModalProps } from '.';
+export declare function useActions(props: PageModalProps): {
+    footer: import("react/jsx-runtime").JSX.Element | null;
+    header: import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/PageLayout/components/PageModal/useActions.js

@@ -0,0 +1,86 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "antd";
+import { AsyncButton } from "../../../AsyncButton/index.js";
+import { useMemo } from "react";
+import { styled } from "styled-components";
+function useActions(props) {
+    const { actionPosition = 'bottom', okText, cancelText, onOk, icon, title, onCancel, extraActions } = props;
+    const actions = 'none' === actionPosition ? null : /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                type: "text",
+                onClick: onCancel,
+                children: cancelText || '取消'
+            }),
+            /*#__PURE__*/ jsx(AsyncButton, {
+                style: {
+                    marginLeft: '0.65rem'
+                },
+                type: "primary",
+                onClick: onOk,
+                children: okText || '确定'
+            })
+        ]
+    });
+    const footer = useMemo(()=>{
+        if ('bottom' === actionPosition) return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(FlexContainer, {
+                    children: extraActions
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    children: actions
+                })
+            ]
+        });
+        return null;
+    }, [
+        actionPosition,
+        actions,
+        extraActions
+    ]);
+    const header = useMemo(()=>{
+        if ('top' === actionPosition) return /*#__PURE__*/ jsxs(HeaderContainer, {
+            children: [
+                /*#__PURE__*/ jsxs(FlexContainer, {
+                    children: [
+                        icon,
+                        title
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    children: [
+                        extraActions,
+                        actions
+                    ]
+                })
+            ]
+        });
+        return /*#__PURE__*/ jsxs(FlexContainer, {
+            children: [
+                icon,
+                title
+            ]
+        });
+    }, [
+        icon,
+        title,
+        actions,
+        extraActions
+    ]);
+    return {
+        footer,
+        header
+    };
+}
+const FlexContainer = styled.div`
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const HeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+export { useActions };

package/dist/components/index.d.ts

@@ -7,3 +7,4 @@ export * from './Menu';
 export * from './TextOverflow';
 export * from './PageLayout';
 export * from './FilterGroup';
+export * from './Card';

package/dist/components/index.js

@@ -7,3 +7,4 @@ export * from "./Menu/index.js";
 export * from "./TextOverflow/index.js";
 export * from "./PageLayout/index.js";
 export * from "./FilterGroup/index.js";
+export * from "./Card/index.js";

package/dist/features/JsonEditor/LineNumberEditor.js

@@ -5,7 +5,8 @@ import { calculateLineCount, highlightJson } from "./utils.js";
 const EditorContainer = styled_components.div`
   display: flex;
   height: 100%;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-family:
+    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   font-size: 12px;
   line-height: 1.5;
   overflow: hidden;
@@ -55,11 +56,11 @@ const StyledTextArea = styled_components.textarea`
   ${(props)=>props.hasError && `
     box-shadow: inset 0 0 0 1px #ff4d4f;
   `}
-  
+
   &:focus {
     box-shadow: none;
   }
-  
+
   &::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -73,7 +74,7 @@ const StyledTextArea = styled_components.textarea`
   &::-webkit-scrollbar-thumb {
     background: #c1c1c1;
     border-radius: 4px;
-    
+
     &:hover {
       background: #a8a8a8;
     }
@@ -113,7 +114,7 @@ const HighlightPreview = styled_components.div`
   .json-boolean {
     color: #f98280; /* 红色 */
   }
-  
+
   .json-null {
     color: #f18f01; /* 橙色 */
   }

package/dist/features/JsonEditor/style.js

@@ -33,7 +33,7 @@ const EditorWrapper = styled.div`
   overflow: hidden;
   border-radius: 0 0 8px 8px;
   background-color: #fafafa;
-  
+
   // 自定义滚动条样式
   ::-webkit-scrollbar {
     width: 8px;
@@ -48,7 +48,7 @@ const EditorWrapper = styled.div`
   ::-webkit-scrollbar-thumb {
     background: #c1c1c1;
     border-radius: 4px;
-    
+
     &:hover {
       background: #a8a8a8;
     }
@@ -69,7 +69,8 @@ const ErrorMessage = styled.div`
 const EditorContainer = styled.div`
   display: flex;
   height: 100%;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-family:
+    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   font-size: 12px;
   line-height: 1.5;
   overflow: hidden;
@@ -117,11 +118,11 @@ const StyledTextArea = styled.textarea`
   ${(props)=>props.hasError && `
     box-shadow: inset 0 0 0 1px #ff4d4f;
   `}
-  
+
   &:focus {
     box-shadow: none;
   }
-  
+
   &::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -135,7 +136,7 @@ const StyledTextArea = styled.textarea`
   &::-webkit-scrollbar-thumb {
     background: #c1c1c1;
     border-radius: 4px;
-    
+
     &:hover {
       background: #a8a8a8;
     }

package/dist/features/JsonEditor/utils.js

@@ -1,5 +1,5 @@
 const highlightJson = (jsonString)=>{
-    const escapeHtml = (unsafe)=>unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+    const escapeHtml = (unsafe)=>unsafe.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
     if (!jsonString.trim().startsWith('{') && !jsonString.trim().startsWith('[')) return escapeHtml(jsonString);
     try {
         return escapeHtml(jsonString).replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:))/g, '<span class="json-key">$1</span>').replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(?!\s*:))/g, '<span class="json-string">$1</span>').replace(/(?<=:)\s*(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g, ' <span class="json-number">$1</span>').replace(/(?<=:)\s*(true|false)/g, ' <span class="json-boolean">$1</span>').replace(/(?<=:)\s*(null)/g, ' <span class="json-null">$1</span>').replace(/([{}[\],:])/g, '<span class="json-punctuation">$1</span>');

package/package.json

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