@pisell/materials 1.0.611 → 1.0.613

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts

@@ -17,7 +17,7 @@ interface UseTablePropsProps {
  * @returns
  */
 declare const useTableProps: (props: UseTablePropsProps) => {
-    title: number | boolean | React.JSX.Element | Iterable<React.ReactNode> | (() => React.ReactNode) | null | undefined;
+    title: number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
     pagination: {
         total: number;
         current: number;
@@ -26,7 +26,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         showSizeChanger: boolean;
     };
     columns: import("./useColumns").Column[];
-    subTitle: number | boolean | React.JSX.Element | Iterable<React.ReactNode> | (() => React.ReactNode) | null | undefined;
+    subTitle: number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
     buttons: any[] | null;
     filter: React.JSX.Element | null;
     onRow: (record: any) => any;
@@ -47,7 +47,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         width: number;
         align: "center" | "left" | "right";
         fixed: false | "left" | "right";
-        type: "link" | "button";
+        type: "button" | "link";
         items: OperationItem[];
     } | undefined;
     operationContent?: {
@@ -65,7 +65,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         useCustomAction: boolean;
         actionType: string;
         openMode: "modal" | "drawer";
-        openContentSize: "small" | "large" | "middle";
+        openContentSize: "small" | "middle" | "large";
         openTitle: string;
         key: string;
     } | undefined;

package/lib/components/dataSourceComponents/fields/DatePicker/ReadPretty.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { DatePickerProps } from './type';
 import './ReadPretty.less';
-declare const DatePickerReadPretty: (props: DatePickerProps) => React.JSX.Element;
+declare const DatePickerReadPretty: React.FC<DatePickerProps>;
 export default DatePickerReadPretty;

package/lib/components/dataSourceComponents/fields/DatePicker/ReadPretty.js

@@ -35,9 +35,36 @@ module.exports = __toCommonJS(ReadPretty_exports);
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
 var import_dayjs = __toESM(require("dayjs"));
+var import_usePisellConfig = __toESM(require("../../../pisell-config-provider/hooks/usePisellConfig"));
 var import_ReadPretty = require("./ReadPretty.less");
-var DatePickerReadPretty = (props) => {
-  const { value, renderMode } = props;
+var DEFAULT_FORMAT = "YYYY-MM-DD HH:mm:ss";
+var DATE_FORMATS = {
+  "zh-CN": "YYYY-MM-DD HH:mm:ss",
+  "en-US": "HH:mm:ss YYYY-MM-DD"
+};
+var DatePickerReadPretty = ({ value, renderMode }) => {
+  const { locale = "zh-CN" } = (0, import_usePisellConfig.default)();
+  const dateFormat = (0, import_react.useMemo)(() => {
+    if (locale in DATE_FORMATS) {
+      return DATE_FORMATS[locale];
+    }
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`Unsupported locale: ${locale}, falling back to default format`);
+    }
+    return DEFAULT_FORMAT;
+  }, [locale]);
+  const formattedDate = (0, import_react.useMemo)(() => {
+    if (!value)
+      return "";
+    try {
+      return (0, import_dayjs.default)(value).format(dateFormat);
+    } catch (error) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("Error formatting date:", error);
+      }
+      return "";
+    }
+  }, [value, dateFormat]);
   return /* @__PURE__ */ import_react.default.createElement(
     "span",
     {
@@ -45,7 +72,7 @@ var DatePickerReadPretty = (props) => {
         "pisell-date-picker-read-pretty-table-view": renderMode === "tableView"
       })
     },
-    value ? (0, import_dayjs.default)(value).format("YYYY-MM-DD HH:mm:ss") : ""
+    formattedDate
   );
 };
 var ReadPretty_default = DatePickerReadPretty;

package/lib/components/dataSourceComponents/hooks/useActions.js

@@ -107,6 +107,9 @@ var useActions = ({
           body
         });
         if (["pisell2-api", "mypisell-api"].includes(dataSourceKey)) {
+          if ("mypisell-api" === dataSourceKey && designMode === "design") {
+            return result;
+          }
           return result.data;
         }
         return result;

package/lib/components/pisellDraggable/components/TreeItem/SortableTreeItem.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import { Props as TreeItemProps } from './TreeItem';
 interface Props extends TreeItemProps {
     id: UniqueIdentifier;
+    __designMode?: string;
 }
 export declare function SortableTreeItem({ id, depth, ...props }: Props): React.JSX.Element;
 export {};

package/lib/components/pisellDraggable/components/TreeItem/TreeItem.d.ts

@@ -17,5 +17,6 @@ export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
     wrapperRef?(node: HTMLLIElement): void;
     item: TreeItemType;
     renderItem?(item: Props, ref: React.ForwardedRef<HTMLDivElement>): React.ReactNode;
+    __designMode?: string;
 }
 export declare const TreeItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;

package/lib/components/pisellDraggable/components/TreeItem/TreeItem.js

@@ -54,6 +54,7 @@ var TreeItem = (0, import_react.forwardRef)((props, ref) => {
     wrapperRef,
     item,
     renderItem,
+    __designMode,
     ...otherProps
   } = props;
   if (renderItem) {
@@ -76,7 +77,12 @@ var TreeItem = (0, import_react.forwardRef)((props, ref) => {
       },
       ...otherProps
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "TreeItem", ref, style }, /* @__PURE__ */ import_react.default.createElement(import_components.Handle, { ...handleProps }), onCollapse && /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "TreeItem", ref, style }, /* @__PURE__ */ import_react.default.createElement(
+      import_components.Handle,
+      {
+        ...__designMode === "design" ? {} : { ...handleProps }
+      }
+    ), onCollapse && /* @__PURE__ */ import_react.default.createElement(
       import_components.Action,
       {
         onClick: onCollapse,

package/lib/components/pisellDraggable/index.d.ts

@@ -22,7 +22,9 @@ interface Props {
     onChange?: (items: TreeItems) => void;
     /** 删除节点前 */
     onRemoveBefore?: (item: TreeItem) => Promise<boolean>;
+    /** 设计模式 */
+    __designMode?: string;
 }
-export declare function SortableTree({ collapsible, value, indicator, indentationWidth, removable, renderItem, onChange, onRemoveBefore, }: Props): React.JSX.Element;
-declare const Demo: () => React.JSX.Element;
+export declare function SortableTree({ collapsible, value, indicator, indentationWidth, removable, renderItem, onChange, onRemoveBefore, __designMode, }: Props): React.JSX.Element;
+declare const Demo: (props: Props) => React.JSX.Element;
 export default Demo;

package/lib/components/pisellDraggable/index.js

@@ -101,7 +101,8 @@ function SortableTree({
   removable = true,
   renderItem,
   onChange,
-  onRemoveBefore
+  onRemoveBefore,
+  __designMode
 }) {
   const [items, setItems] = (0, import_react.useState)([]);
   const [activeId, setActiveId] = (0, import_react.useState)(null);
@@ -148,6 +149,7 @@ function SortableTree({
   (0, import_react.useEffect)(() => {
     document.body.id = "body";
   }, []);
+  console.log(__designMode, "__designMode");
   return /* @__PURE__ */ import_react.default.createElement(
     import_core.DndContext,
     {
@@ -174,7 +176,8 @@ function SortableTree({
           collapsed: Boolean(collapsed && children.length),
           onCollapse: collapsible && children.length ? () => handleCollapse(id) : void 0,
           onRemove: removable ? () => handleRemove(item) : void 0,
-          renderItem
+          renderItem,
+          __designMode
         }
       );
     }), (0, import_react_dom.createPortal)(
@@ -261,8 +264,8 @@ var adjustTranslate = ({ transform }) => {
     y: transform.y - 25
   };
 };
-var Demo = () => {
-  return /* @__PURE__ */ import_react.default.createElement(SortableTree, null);
+var Demo = (props) => {
+  return /* @__PURE__ */ import_react.default.createElement(SortableTree, { ...props });
 };
 var pisellDraggable_default = Demo;
 // Annotate the CommonJS export names for ESM import in node:

package/lib/components/pisellDropSort/PisellDropSort.js

@@ -57,7 +57,8 @@ var PisellDropSort = ({
   onAdd,
   renderItem: propsRenderItem,
   leftContent,
-  onAddRoot
+  onAddRoot,
+  __designMode
 }) => {
   const treeItems = (0, import_react.useMemo)(() => {
     return value.map((item) => {
@@ -87,7 +88,8 @@ var PisellDropSort = ({
           onDelete,
           showBorder,
           spacing,
-          maxLevel
+          maxLevel,
+          __designMode
         }
       );
     },

package/lib/components/pisellDropSort/components/SortableItem/index.d.ts

@@ -14,6 +14,8 @@ interface SortableItemProps {
     showBorder?: boolean;
     spacing?: number;
     maxLevel?: number;
+    /** 设计模式 */
+    __designMode?: string;
 }
 declare const SortableItem: (props: SortableItemProps) => React.JSX.Element;
 export default SortableItem;

package/lib/components/pisellDropSort/components/SortableItem/index.js

@@ -51,7 +51,8 @@ var SortableItem = (props) => {
     onDelete,
     showBorder,
     spacing,
-    maxLevel
+    maxLevel,
+    __designMode
   } = props;
   const {
     item,
@@ -104,7 +105,7 @@ var SortableItem = (props) => {
           icon: /* @__PURE__ */ import_react.default.createElement(import_DotsSix.default, { className: "pisell-lowcode-drop-sort-item-drag-handle-icon" }),
           type: "text",
           className: "pisell-lowcode-drop-sort-item-button",
-          ...handleProps
+          ...__designMode === "design" ? {} : { ...handleProps }
         }
       ),
       onCollapse && /* @__PURE__ */ import_react.default.createElement(

package/lib/components/pisellDropSort/types.d.ts

@@ -39,4 +39,6 @@ export interface PisellDropSortProps {
     onAddRoot?: () => void;
     /** 左侧自定义内容 */
     leftContent?: React.ReactNode;
+    /** 设计模式 */
+    __designMode?: string;
 }

package/lib/components/pisellLayout/content.d.ts

@@ -3,6 +3,8 @@ import React from 'react';
 export interface PisellContentProps extends Omit<LayoutProps, 'prefixCls'> {
     children?: React.ReactNode;
     __designMode?: string;
+    height?: number;
+    scroll?: boolean;
 }
 declare const PisellContent: React.FC<PisellContentProps>;
 export default PisellContent;

package/lib/components/pisellLayout/content.js

@@ -33,11 +33,12 @@ __export(content_exports, {
 });
 module.exports = __toCommonJS(content_exports);
 var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
 var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
 var { Content } = import_antd.Layout;
 var PisellContent = (props) => {
-  const { children, ...rest } = props;
+  const { children, className, height, scroll, ...rest } = props;
   const lowCodeProps = (0, import_useEngineContext.default)();
   const pageContent = (0, import_react.useMemo)(() => {
     if (props.__designMode === "design") {
@@ -45,6 +46,15 @@ var PisellContent = (props) => {
     }
     return lowCodeProps.children;
   }, [props.__designMode]);
-  return /* @__PURE__ */ import_react.default.createElement(Content, { ...rest }, children, pageContent);
+  const contentStyle = (0, import_react.useMemo)(() => {
+    return {
+      height,
+      ...rest.style
+    };
+  }, [height, rest.style]);
+  const contentClassName = (0, import_classnames.default)("pisell-layout-content", className, {
+    "pisell-layout-content-scroll": scroll
+  });
+  return /* @__PURE__ */ import_react.default.createElement(Content, { ...rest, style: contentStyle, className: contentClassName }, children, pageContent);
 };
 var content_default = PisellContent;

package/lib/components/pisellLayout/footer.d.ts

@@ -2,6 +2,7 @@ import type { LayoutProps } from 'antd';
 import React from 'react';
 export interface PisellFooterProps extends Omit<LayoutProps, 'prefixCls'> {
     children?: React.ReactNode;
+    height?: number;
 }
 declare const PisellFooter: React.FC<PisellFooterProps>;
 export default PisellFooter;

package/lib/components/pisellLayout/footer.js

@@ -36,7 +36,13 @@ var import_antd = require("antd");
 var import_react = __toESM(require("react"));
 var { Footer } = import_antd.Layout;
 var PisellFooter = (props) => {
-  const { children, ...rest } = props;
-  return /* @__PURE__ */ import_react.default.createElement(Footer, { ...rest }, children);
+  const { children, height, ...rest } = props;
+  const footerStyle = (0, import_react.useMemo)(() => {
+    return {
+      height,
+      ...rest.style
+    };
+  }, [height, rest.style]);
+  return /* @__PURE__ */ import_react.default.createElement(Footer, { ...rest, style: footerStyle }, children);
 };
 var footer_default = PisellFooter;

package/lib/components/pisellLayout/header.d.ts

@@ -1,7 +1,10 @@
 import type { LayoutProps } from 'antd';
 import React from 'react';
+import './index.less';
 export interface PisellHeaderProps extends Omit<LayoutProps, 'prefixCls'> {
     children?: React.ReactNode;
+    height?: number;
+    fixed?: boolean;
 }
 declare const PisellHeader: React.FC<PisellHeaderProps>;
 export default PisellHeader;

package/lib/components/pisellLayout/header.js

@@ -33,10 +33,21 @@ __export(header_exports, {
 });
 module.exports = __toCommonJS(header_exports);
 var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
+var import_index = require("./index.less");
 var { Header } = import_antd.Layout;
 var PisellHeader = (props) => {
-  const { children, ...rest } = props;
-  return /* @__PURE__ */ import_react.default.createElement(Header, { ...rest }, children);
+  const { children, className, height, fixed, ...rest } = props;
+  const headerStyle = (0, import_react.useMemo)(() => {
+    return {
+      height,
+      ...rest.style
+    };
+  }, [height, rest.style]);
+  const headerClassName = (0, import_classnames.default)("pisell-layout-header", className, {
+    // 'pisell-layout-header-fixed': fixed,
+  });
+  return /* @__PURE__ */ import_react.default.createElement(Header, { ...rest, style: headerStyle, className: headerClassName }, children);
 };
 var header_default = PisellHeader;

package/lib/components/pisellLayout/index.js

@@ -36,6 +36,9 @@ var import_antd = require("antd");
 var import_react = __toESM(require("react"));
 var PisellLayout = (props) => {
   const { children, ...rest } = props;
+  (0, import_react.useEffect)(() => {
+    document.body.id = "body";
+  }, []);
   return /* @__PURE__ */ import_react.default.createElement(import_antd.Layout, { ...rest }, children);
 };
 PisellLayout.Header = import_antd.Layout.Header;

package/lib/components/pisellLayout/index.less

@@ -0,0 +1,23 @@
+.pisell-layout {
+  position: relative;
+}
+
+.pisell-layout-header {}
+
+.pisell-layout-header-fixed {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.pisell-layout-content {}
+
+.pisell-layout-content-scroll {
+  overflow-y: auto;
+}
+
+.pisell-layout-sider {}
+
+.pisell-lowcode-layout-sider-trigger {
+  position: unset;
+}

package/lib/components/pisellLayout/sider.d.ts

@@ -1,5 +1,6 @@
 import type { SiderProps } from 'antd/es/layout/Sider';
 import React from 'react';
+import './index.less';
 export interface PisellSiderProps extends SiderProps {
     children?: React.ReactNode;
 }

package/lib/components/pisellLayout/sider.js

@@ -33,10 +33,31 @@ __export(sider_exports, {
 });
 module.exports = __toCommonJS(sider_exports);
 var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
+var import_index = require("./index.less");
 var { Sider } = import_antd.Layout;
 var PisellSider = (props) => {
-  const { children, ...rest } = props;
-  return /* @__PURE__ */ import_react.default.createElement(Sider, { ...rest }, children);
+  const { children, collapsible, collapsed, onCollapse, ...rest } = props;
+  const [collapsedState, setCollapsedState] = (0, import_react.useState)(collapsed);
+  const className = (0, import_classnames.default)("pisell-layout-sider", props.className);
+  const _onCollapse = (val, type) => {
+    onCollapse == null ? void 0 : onCollapse(val, type);
+    setCollapsedState(val);
+  };
+  (0, import_react.useEffect)(() => {
+    setCollapsedState(collapsed);
+  }, [collapsed]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    Sider,
+    {
+      ...rest,
+      collapsible,
+      collapsed: collapsedState,
+      onCollapse: _onCollapse,
+      className
+    },
+    children
+  );
 };
 var sider_default = PisellSider;

package/lowcode/pisell-content/meta.ts

@@ -2,10 +2,11 @@ import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
 
 const PisellContentMeta: ComponentMetadata = {
   componentName: 'PisellContent',
-  title: 'PisellContent',
+  title: '内容',
   docUrl: '',
-  screenshot: '',
+  screenshot: require('./__screenshots__/content.png'),
   devMode: 'proCode',
+  category: "布局",
   npm: {
     package: '@pisell/materials',
     version: '1.0.3',
@@ -26,6 +27,17 @@ const PisellContentMeta: ComponentMetadata = {
       name: 'className',
       setter: 'StringSetter',
     },
+    {
+      title: {
+        label: {
+          type: 'i18n',
+          'en-US': 'height',
+          'zh-CN': '高度',
+        },
+      },
+      name: 'height',
+      setter: 'NumberSetter',
+    },
     {
       title: {
         label: {
@@ -37,6 +49,17 @@ const PisellContentMeta: ComponentMetadata = {
       name: 'children',
       setter: ['SlotSetter'],
     },
+    {
+      title: {
+        label: {
+          type: 'i18n',
+          'en-US': 'Content scrolling',
+          'zh-CN': '内容滚动',
+        },
+      },
+      name: 'scroll',
+      setter: 'BoolSetter',
+    },
     {
       title: {
         label: {
@@ -62,8 +85,8 @@ const PisellContentMeta: ComponentMetadata = {
 
 const snippets: Snippet[] = [
   {
-    title: 'PisellContent',
-    screenshot: '',
+    title: '内容',
+    screenshot: require('./__screenshots__/content.png'),
     schema: {
       componentName: 'PisellContent',
       props: {
@@ -74,7 +97,7 @@ const snippets: Snippet[] = [
           lineHeight: '120px',
           textAlign: 'center',
         },
-
+        scroll: true,
       },
     },
   },

package/lowcode/pisell-footer/meta.ts

@@ -2,10 +2,11 @@ import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
 
 const PisellFooterMeta: ComponentMetadata = {
   componentName: 'PisellFooter',
-  title: 'PisellFooter',
+  title: '底部',
   docUrl: '',
-  screenshot: '',
+  screenshot: require('./__screenshots__/footer.png'),
   devMode: 'proCode',
+  category: "布局",
   npm: {
     package: '@pisell/materials',
     version: '1.0.3',
@@ -26,6 +27,17 @@ const PisellFooterMeta: ComponentMetadata = {
       name: 'className',
       setter: 'StringSetter',
     },
+    {
+      title: {
+        label: {
+          type: 'i18n',
+          'en-US': 'height',
+          'zh-CN': '高度',
+        },
+      },
+      name: 'height',
+      setter: 'NumberSetter',
+    },
     {
       title: {
         label: {
@@ -51,8 +63,8 @@ const PisellFooterMeta: ComponentMetadata = {
 
 const snippets: Snippet[] = [
   {
-    title: 'PisellFooter',
-    screenshot: '',
+    title: '底部',
+    screenshot: require('./__screenshots__/footer.png'),
     schema: {
       componentName: 'PisellFooter',
       props: {
@@ -61,6 +73,7 @@ const snippets: Snippet[] = [
           color: '#fff',
           textAlign: 'center',
         },
+        height: 80,
       },
       children: [{
         componentName: 'PisellText',

package/lowcode/pisell-header/meta.ts

@@ -2,10 +2,11 @@ import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
 
 const PisellHeaderMeta: ComponentMetadata = {
   componentName: 'PisellHeader',
-  title: 'PisellHeader',
+  title: '头部',
   docUrl: '',
-  screenshot: '',
+  screenshot: require('./__screenshots__/header.png'),
   devMode: 'proCode',
+  category: "布局",
   npm: {
     package: '@pisell/materials',
     version: '1.0.3',
@@ -26,6 +27,28 @@ const PisellHeaderMeta: ComponentMetadata = {
       name: 'className',
       setter: 'StringSetter',
     },
+    {
+      title: {
+        label: {
+          type: 'i18n',
+          'en-US': 'height',
+          'zh-CN': '高度',
+        },
+      },
+      name: 'height',
+      setter: 'NumberSetter',
+    },
+    {
+      title: {
+        label: {
+          type: 'i18n',
+          'en-US': 'Fixed header',
+          'zh-CN': '固定头部',
+        },
+      },
+      name: 'fixed',
+      setter: 'BoolSetter',
+    },
     {
       title: {
         label: {
@@ -51,18 +74,19 @@ const PisellHeaderMeta: ComponentMetadata = {
 
 const snippets: Snippet[] = [
   {
-    title: 'PisellHeader',
-    screenshot: '',
+    title: '头部',
+    screenshot: require('./__screenshots__/header.png'),
     schema: {
       componentName: 'PisellHeader',
       props: {
         style: {
           backgroundColor: '#1890ff',
           color: '#fff',
-          height: 64,
           lineHeight: '64px',
           textAlign: 'center',
         },
+        height: 64,
+        fixed: true,
       },
       children: [{
         componentName: 'PisellText',