@pisell/materials 6.0.13 → 6.0.14

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: TreeItemType): React.ReactNode;
+    isBlocked?: boolean;
 }
 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,
+    isBlocked,
     ...otherProps
   } = props;
   if (renderItem) {

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

@@ -21,7 +21,9 @@ interface Props {
     onChange?: (items: TreeItems) => void;
     /** 删除节点前 */
     onRemoveBefore?: (item: TreeItem) => Promise<boolean>;
+    /** 最大层级 */
+    maxLevel?: number;
 }
-export declare function SortableTree({ collapsible, value, indicator, indentationWidth, removable, renderItem, onChange, onRemoveBefore, }: Props): React.JSX.Element;
+export declare function SortableTree({ collapsible, value, indicator, indentationWidth, removable, renderItem, onChange, onRemoveBefore, maxLevel, }: Props): React.JSX.Element;
 declare const Demo: () => React.JSX.Element;
 export default Demo;

package/lib/components/pisellDraggable/index.js

@@ -51,7 +51,7 @@ var initialItems = [
       { id: "Spring", children: [] },
       { id: "Summer", children: [] },
       { id: "Fall", children: [] },
-      { id: "Winter", children: [] }
+      { id: "Winter", children: [], disabledDrop: true }
     ]
   },
   {
@@ -101,7 +101,8 @@ function SortableTree({
   removable = true,
   renderItem,
   onChange,
-  onRemoveBefore
+  onRemoveBefore,
+  maxLevel = 3
 }) {
   const [items, setItems] = (0, import_react.useState)([]);
   const [activeId, setActiveId] = (0, import_react.useState)(null);
@@ -111,17 +112,20 @@ function SortableTree({
     console.log("初始化", value);
     setItems(value);
   }, [value]);
+  const flattenTreeData = (0, import_react.useMemo)(() => {
+    return (0, import_utilities2.flattenTree)(items);
+  }, [items]);
   const flattenedItems = (0, import_react.useMemo)(() => {
-    const flattenedTree = (0, import_utilities2.flattenTree)(items);
-    const collapsedItems = flattenedTree.reduce(
+    const collapsedItems = flattenTreeData.reduce(
       (acc, { children, collapsed, id }) => collapsed && children.length ? [...acc, id] : acc,
       []
     );
     return (0, import_utilities2.removeChildrenOf)(
-      flattenedTree,
+      flattenTreeData,
       activeId != null ? [activeId, ...collapsedItems] : collapsedItems
     );
-  }, [activeId, items]);
+  }, [activeId, flattenTreeData]);
+  console.log("flattenedItems", flattenedItems);
   const projected = activeId && overId ? (0, import_utilities2.getProjection)(
     flattenedItems,
     activeId,
@@ -148,6 +152,20 @@ function SortableTree({
   (0, import_react.useEffect)(() => {
     document.body.id = "body";
   }, []);
+  function checkSubtreeDepth(items2, itemId, baseDepth) {
+    const item = items2.find((i) => i.id === itemId);
+    if (!item)
+      return false;
+    if (baseDepth >= maxLevel)
+      return true;
+    const children = items2.filter((i) => i.parentId === itemId);
+    if (baseDepth >= maxLevel - 1 && children.length > 0)
+      return true;
+    return children.some((child) => {
+      const childNewDepth = baseDepth + 1;
+      return childNewDepth >= maxLevel || checkSubtreeDepth(items2, child.id, childNewDepth);
+    });
+  }
   return /* @__PURE__ */ import_react.default.createElement(
     import_core.DndContext,
     {
@@ -209,12 +227,46 @@ function SortableTree({
     setOffsetLeft(delta.x);
   }
   function handleDragOver({ over }) {
-    setOverId((over == null ? void 0 : over.id) ?? null);
+    if (!projected || !over) {
+      setOverId((over == null ? void 0 : over.id) ?? null);
+      return;
+    }
+    const targetParent = projected.parentId ? flattenedItems.find((item) => item.id === projected.parentId) : null;
+    if (targetParent == null ? void 0 : targetParent.disabledDrop) {
+      return;
+    }
+    if (projected.depth >= maxLevel) {
+      return;
+    }
+    const willExceedLimit = checkSubtreeDepth(
+      flattenTreeData,
+      activeId,
+      projected.depth
+    );
+    if (willExceedLimit) {
+      return;
+    }
+    setOverId(over.id);
   }
   function handleDragEnd({ active, over }) {
     resetState();
     if (projected && over) {
       const { depth, parentId } = projected;
+      const targetParent = parentId ? flattenedItems.find((item) => item.id === parentId) : null;
+      if (targetParent == null ? void 0 : targetParent.disabledDrop) {
+        return;
+      }
+      if (depth >= maxLevel) {
+        return;
+      }
+      const willExceedLimit = checkSubtreeDepth(
+        flattenTreeData,
+        active.id,
+        depth
+      );
+      if (willExceedLimit) {
+        return;
+      }
       const clonedItems = JSON.parse(
         JSON.stringify((0, import_utilities2.flattenTree)(items))
       );

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

@@ -4,6 +4,7 @@ export interface TreeItem {
     id: UniqueIdentifier;
     children: TreeItem[];
     collapsed?: boolean;
+    disabledDrop?: boolean;
 }
 export declare type TreeItems = TreeItem[];
 export interface FlattenedItem extends TreeItem {

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,18 +33,29 @@ __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)(() => {
+    var _a, _b;
     if (props.__designMode === "design") {
       return "Page content";
     }
-    return lowCodeProps.children;
+    return (_b = (_a = lowCodeProps == null ? void 0 : lowCodeProps.engine) == null ? void 0 : _a.props) == null ? void 0 : _b.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,38 @@ __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
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "pisell-layout-sider-content",
+        style: { overflowY: "auto", height: "100%" }
+      },
+      children
+    )
+  );
 };
 var sider_default = PisellSider;

package/lib/components/pisellMenu/PisellMenu.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 import './PisellMenu.less';
 import type { PisellMenuProps } from './types';
-declare const PisellMenu: React.FC<PisellMenuProps>;
+declare const PisellMenu: {
+    ({ className, style, mode, theme, defaultOpenKeys, defaultSelectedKeys, inlineCollapsed, openKeys, selectedKeys, onOpenChange, onSelect, dataSource, __designMode, children, other, ...restProps }: PisellMenuProps): React.JSX.Element;
+    Item: Omit<React.FunctionComponent<import("antd").MenuItemProps>, ""> & (<T extends import("antd").MenuItemProps>(props: T extends infer U extends import("antd").MenuItemProps ? unknown extends U ? import("antd").MenuItemProps : U : import("antd").MenuItemProps, context?: any) => React.ReactElement<any, any> | null);
+    SubMenu: React.FC<import("antd").SubMenuProps>;
+};
 export default PisellMenu;

package/lib/components/pisellMenu/PisellMenu.js

@@ -49,6 +49,8 @@ var PisellMenu = ({
   onSelect,
   dataSource,
   __designMode,
+  children,
+  other,
   ...restProps
 }) => {
   const _dataSource = (0, import_react.useMemo)(() => {
@@ -59,11 +61,13 @@ var PisellMenu = ({
       return [
         {
           label: "菜单项1",
-          key: "item-1"
+          key: "item-1",
+          path: "/item-1"
         },
         {
           label: "菜单项2",
-          key: "item-2"
+          key: "item-2",
+          path: "/item-2"
         }
       ];
     }
@@ -84,8 +88,12 @@ var PisellMenu = ({
       selectedKeys,
       onOpenChange,
       onSelect,
-      ...restProps
-    }
+      ...restProps,
+      ...other
+    },
+    children
   );
 };
+PisellMenu.Item = import_antd.Menu.Item;
+PisellMenu.SubMenu = import_antd.Menu.SubMenu;
 var PisellMenu_default = PisellMenu;

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

@@ -1,5 +1,5 @@
+/// <reference types="react" />
 import type { MenuProps } from 'antd';
-import type { ReactNode } from 'react';
 export interface PisellMenuProps extends Omit<MenuProps, 'items'> {
     className?: string;
     style?: React.CSSProperties;
@@ -11,20 +11,16 @@ export interface PisellMenuProps extends Omit<MenuProps, 'items'> {
     openKeys?: string[];
     selectedKeys?: string[];
     onOpenChange?: (openKeys: string[]) => void;
-    onSelect?: (info: {
-        key: string;
-        keyPath: string[];
-        item: ReactNode;
-        domEvent: Event;
-        selectedKeys: string[];
-    }) => void;
     dataSource?: any;
     __designMode?: string;
+    other?: PisellMenuProps;
 }
 export interface MenuItemType {
-    label: ReactNode;
     key: string;
-    icon?: ReactNode;
+    label: string;
+    path: string;
     children?: MenuItemType[];
+    icon?: string | React.ReactNode;
+    hide?: boolean;
     type?: 'group' | 'divider';
 }

package/lib/hooks/useEngineContext.js

@@ -28,6 +28,12 @@ var useEngineContext = () => {
   const context = (0, import_react.useContext)(
     window.__appContext || defaultContext
   );
+  if ((context == null ? void 0 : context.appHelper) === void 0) {
+    return {
+      ...context,
+      appHelper: window.__appHelper
+    };
+  }
   return context || {};
 };
 var useEngineContext_default = useEngineContext;

package/lowcode/data-source-menu/meta.ts

@@ -1,5 +1,18 @@
 import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
 
+/**
+ * 
+  defaultOpenKeys,
+  defaultSelectedKeys,
+  inlineCollapsed,
+  openKeys,
+  selectedKeys,
+  onOpenChange,
+  onSelect,
+  dataSource,
+  __designMode,
+ * 
+ */
 const DataSourceMenuMeta: IPublicTypeComponentMetadata = {
   componentName: 'DataSourceMenu',
   title: '菜单导航',
@@ -78,15 +91,52 @@ const DataSourceMenuMeta: IPublicTypeComponentMetadata = {
       }
     },
     {
-      name: 'className',
-      propType: 'string',
-      description: '类名',
-      setter: 'StringSetter'
+      name: 'defaultOpenKeys',
+      propType: 'array',
+      description: '默认展开的菜单项',
+      defaultValue: [],
+      setter: 'JsonSetter'
+    },
+    {
+      name: 'defaultSelectedKeys',
+      propType: 'array',
+      description: '默认选中的菜单项',
+      defaultValue: [],
+      setter: 'JsonSetter'
+    },
+    {
+      name: 'inlineCollapsed',
+      propType: "bool",
+      description: '是否内嵌折叠',
+      defaultValue: false,
+      setter: 'BoolSetter'
+    },
+    {
+      name: 'openKeys',
+      propType: 'array',
+      description: '展开的菜单项',
+      defaultValue: [],
+      setter: 'JsonSetter'
+    },
+    {
+      name: 'selectedKeys',
+      propType: 'array',
+      description: '选中的菜单项',
+      defaultValue: [],
+      setter: 'JsonSetter'
+    },
+    {
+      name: 'other',
+      propType: 'object',
+      description: '其他属性',
+      defaultValue: {},
+      setter: 'JsonSetter'
     },
     {
       name: 'style',
       propType: 'object',
       description: '样式',
+      defaultValue: {},
       setter: 'StyleSetter'
     }
   ],
@@ -96,8 +146,18 @@ const DataSourceMenuMeta: IPublicTypeComponentMetadata = {
     },
     supports: {
       style: true,
-      className: true
-    }
+      className: true,
+      events: [
+        {
+          name: 'onOpenChange',
+          template: "onOpenChange(openKeys,${extParams}){\n// 展开菜单项变化时的回调\nconsole.log('onOpenChange', openKeys);}",
+        },
+        {
+          name: 'onSelect',
+          template: "onSelect(selectedKeys,${extParams}){\n// 选中菜单项时的回调\nconsole.log('onSelect', selectedKeys);}",
+        },
+      ],
+    },
   }
 };
 

package/lowcode/form-item-translation/meta.ts

@@ -69,7 +69,7 @@ export default {
                       target.parent.setPropValue('transform', {
                         type: 'JSExpression',
                         value:
-                          '(value) => return Object.values(value || {}).join("")',
+                          '(value) => Object.values(value || {}).join("")',
                       });
                       target.node.getProps().setPropValue('required', value);
                     },

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',