@luck-design-biz/luckda 1.0.1 → 1.0.2

package/es/lowcode/view/lc-components/Form/meta.json

@@ -66,7 +66,8 @@
               ["id", "page_root"],
               ["meta.group", "container"],
               ["meta.group", "build-in"]
-            ]
+            ],
+            "default": "page_content"
           },
           {
             "key": "renderFormLeft",
@@ -203,8 +204,18 @@
           "type": "_BlockEditor",
           "wrapper": "hidden",
           "default": {
-            "form": { "readOnly": false, "col": 4 },
-            "table": {
+            "auto": { "readOnly": false, "cols": 4 },
+            "grid": {
+              "readOnly": false,
+              "suppressPreset": false,
+              "height": "100%",
+              "bordered": false,
+              "draggable": false,
+              "orderByAdd": "asc",
+              "suppressActions": false,
+              "actionsColumnWidth": 160
+            },
+            "writer": {
               "readOnly": false,
               "suppressPreset": false,
               "height": "100%",
@@ -261,6 +272,11 @@
               }
             ],
             "_grid_props": [
+              {
+                "key": "height",
+                "name": "高度",
+                "type": "_WidthHeight"
+              },
               {
                 "key": "readOnly",
                 "name": "只读",
@@ -271,11 +287,6 @@
                 "name": "关闭预设",
                 "type": "switch"
               },
-              {
-                "key": "height",
-                "name": "高度",
-                "type": "_WidthHeight"
-              },
               {
                 "key": "bordered",
                 "name": "边框线",
@@ -286,6 +297,11 @@
                 "name": "拖拽排序",
                 "type": "switch"
               },
+              {
+                "key": "suppressbatch",
+                "name": "关闭批量",
+                "type": "switch"
+              },
               {
                 "key": "orderByAdd",
                 "name": "排序方式",
@@ -301,6 +317,26 @@
                   }
                 ]
               },
+              {
+                "key": "operates",
+                "name": "基础操作",
+                "type": "checkbox",
+                "options": [
+                  {
+                    "label": "添加",
+                    "value": "add"
+                  },
+                  {
+                    "label": "删除",
+                    "value": "delete"
+                  },
+                  {
+                    "label": "修改",
+                    "value": "update"
+                  }
+                ],
+                "defaultValue": ["add", "delete", "update"]
+              },
               {
                 "key": "actionsColumn",
                 "name": "操作列",

package/es/lowcode/view/lc-components/GroupTree/FunctionDesign.js

@@ -0,0 +1,10 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import Index from "./index";
+var FunctionDesign = function FunctionDesign(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Index, props, children);
+};
+export default FunctionDesign;

package/es/lowcode/view/lc-components/GroupTree/FunctionLive.js

@@ -0,0 +1,10 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import Index from "./index";
+var FunctionLive = function FunctionLive(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Index, props, children);
+};
+export default FunctionLive;

package/es/lowcode/view/lc-components/GroupTree/FunctionPreview.js

@@ -0,0 +1,10 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import Index from "./index";
+var FunctionPreview = function FunctionPreview(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Index, props, children);
+};
+export default FunctionPreview;

package/es/lowcode/view/lc-components/GroupTree/index.js

@@ -0,0 +1,212 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useMemoizedFn, useAsyncEffect, useBoolean, useLatest } from 'ahooks';
+import styled from 'styled-components';
+import { Tree, Empty, Spin } from 'luck-design/antd';
+import { isNil } from 'lodash';
+import classNames from 'classnames';
+import { useContext } from "../../../engine/provider/ContextProvider";
+import Wrapper from "../Wrapper";
+import { noAuthReadAllBySkey } from '@luck-design-biz/base/lib/sys/services';
+import { dataToTree } from '@luck-design-biz/base/utils';
+import { omitBadProps, executeCode, findFirstLeafNode } from "../../../engine/tools/helper";
+import defaultMeta from "../../../engine/meta/tree.props.default.json";
+import styles from "./index.less";
+var TreeBox = styled.div.withConfig({
+  displayName: "TreeBox",
+  componentId: "luckda-6530__sc-83o9ul-0"
+})(["", ""], function (props) {
+  return props.$css;
+});
+var Title = styled.div.withConfig({
+  displayName: "Title",
+  componentId: "luckda-6530__sc-83o9ul-1"
+})(["display:flex;align-items:center;justify-content:space-between;padding:0 8px;", ""], function (props) {
+  return props.$theme === 'base' ? "\n      height: 36px;\n      color: #1a1a1a;\n      font-weight: 500;\n      font-size: 16px;\n      border-bottom: 1px solid #f1f2f5;\n    " : "\n      height: 42px;\n      color: var(--ant-primary-color);\n      font-size: 14px;\n      border-bottom: 2px solid var(--ant-primary-color);\n    ";
+});
+var GroupTree = styled(Tree).withConfig({
+  displayName: "GroupTree",
+  componentId: "luckda-6530__sc-83o9ul-2"
+})([""]);
+var TreeNode = Tree.TreeNode;
+var LCGroupTree = function LCGroupTree(_ref) {
+  var id = _ref.id,
+    title = _ref.title,
+    groupClass = _ref.groupClass,
+    defaultExpandAll = _ref.defaultExpandAll,
+    onlySelectLeaf = _ref.onlySelectLeaf,
+    cancelSelect = _ref.cancelSelect,
+    defaultSelect = _ref.defaultSelect,
+    css = _ref.css,
+    advance = _ref.advance;
+  var ctx = useContext();
+  var ref = useRef();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    dataSource = _useState2[0],
+    setDataSource = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKeys = _useState4[0],
+    setSelectedKeys = _useState4[1];
+  var _useBoolean = useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    loading = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    setTrue = _useBoolean2$.setTrue,
+    setFalse = _useBoolean2$.setFalse;
+  var latestOnlySelectLeaf = useLatest(onlySelectLeaf);
+  useEffect(function () {
+    ctx.doAction(advance.events.onMount);
+    return function () {
+      return ctx.doAction(advance.events.onUnmount);
+    };
+  }, []);
+  var handleSelect = useMemoizedFn(function (_selectedKeys, e) {
+    if (cancelSelect || e.selected) {
+      setSelectedKeys(_selectedKeys);
+      ctx.doAction(advance.events.onSelect, {
+        selectedKeys: _selectedKeys,
+        e: e
+      });
+    }
+  });
+  useAsyncEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _yield$noAuthReadAllB, code, list, detail, treeData, firstNode, _selectKey;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!isNil(groupClass)) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          setTrue();
+          _context.next = 5;
+          return noAuthReadAllBySkey({
+            sclassKey: groupClass
+          });
+        case 5:
+          _yield$noAuthReadAllB = _context.sent;
+          code = _yield$noAuthReadAllB.code;
+          list = _yield$noAuthReadAllB.list;
+          detail = _yield$noAuthReadAllB.detail;
+          if (code === 1 && list.length > 0) {
+            treeData = dataToTree(list.map(function (_id) {
+              return detail[_id];
+            }));
+            firstNode = latestOnlySelectLeaf.current ? findFirstLeafNode(treeData[0]) : treeData[0];
+            if (!isNil(defaultSelect)) {
+              _selectKey = executeCode(ctx, defaultSelect, ['treeData', 'firstNode'], treeData, firstNode);
+              if (_selectKey) {
+                handleSelect([_selectKey], {
+                  selected: true,
+                  selectedNodes: [detail[_selectKey]]
+                });
+              }
+            }
+            setDataSource(treeData);
+          } else {
+            setDataSource(null);
+          }
+          setFalse();
+        case 11:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [groupClass]);
+  var renderTreeNode = useMemoizedFn(function (items) {
+    return items.map(function (item) {
+      var _item$children;
+      if (((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0) {
+        return /*#__PURE__*/React.createElement(TreeNode, {
+          title: item.sname,
+          key: item.id,
+          dataRef: item,
+          selectable: !onlySelectLeaf,
+          disabled: onlySelectLeaf
+        }, renderTreeNode(item.children));
+      }
+      return /*#__PURE__*/React.createElement(TreeNode, {
+        title: item.sname,
+        key: item.id,
+        dataRef: item,
+        selectable: true,
+        isLeaf: true
+      });
+    });
+  });
+  var getTargetDom = useMemoizedFn(function () {
+    return ref.current;
+  });
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    id: id,
+    displayName: "GroupTree",
+    getTargetDom: getTargetDom
+  }, /*#__PURE__*/React.createElement(TreeBox, {
+    ref: ref,
+    $css: css,
+    className: styles['lc-component-grouptree']
+  }, title ? /*#__PURE__*/React.createElement(Title, {
+    $theme: document.body.getAttribute('luck-theme')
+  }, title) : null, /*#__PURE__*/React.createElement(Spin, {
+    spinning: loading,
+    wrapperClassName: classNames(styles['lc-component-grouptree-spin'], _defineProperty({}, styles.hasTitle, !!title))
+  }, dataSource ? /*#__PURE__*/React.createElement(GroupTree, {
+    blockNode: true,
+    defaultExpandAll: defaultExpandAll,
+    selectedKeys: selectedKeys,
+    onSelect: handleSelect
+  }, renderTreeNode(dataSource)) : /*#__PURE__*/React.createElement(Empty, {
+    style: {
+      margin: '8px 0'
+    }
+  }))));
+};
+LCGroupTree.propTypes = {
+  /**
+   * @name 唯一标识
+   * @type string
+   * @disabled true
+   */
+  id: PropTypes.string.isRequired,
+  /**
+   * @name 标题
+   * @type string
+   * @disabled true
+   */
+  title: PropTypes.string,
+  /**
+   * @name 组维度
+   * @type _GroupClassSelector
+   */
+  groupClass: PropTypes.string,
+  /**
+   * @name 默认展开全部
+   * @type switch
+   */
+  defaultExpandAll: PropTypes.bool,
+  /**
+   * @name 仅叶子可选
+   * @type switch
+   */
+  onlySelectLeaf: PropTypes.bool,
+  /**
+   * @name 允许取消选中
+   * @type switch
+   */
+  cancelSelect: PropTypes.bool,
+  /**
+   * @name 允许取消选中
+   * @type _JSEditor
+   */
+  defaultSelect: PropTypes.string
+};
+LCGroupTree.defaultProps = omitBadProps(defaultMeta);
+export default LCGroupTree;

package/es/lowcode/view/lc-components/GroupTree/index.less

@@ -0,0 +1,12 @@
+.lc-component-grouptree {
+  overflow-y: auto;
+  &-spin.hasTitle {
+    height: calc(100% - 42px);
+    overflow-y: auto;
+  }
+
+  body[luck-theme='base'] &-spin.hasTitle {
+    height: calc(100% - 36px);
+    overflow-y: auto;
+  }
+}

package/es/lowcode/view/lc-components/GroupTree/meta.json

@@ -0,0 +1,83 @@
+{
+  "component": "GroupTree",
+  "name": "组织树",
+  "desc": "用于展示组织维度层级结构的数据。它提供了层级结构、节点展开/折叠、节点选择、节点操作和展示样式等功能。",
+  "icon": "icon-tree",
+  "group": "advance",
+  "groupName": "高级",
+  "order": 1,
+  "props": [
+    {
+      "key": "id",
+      "name": "唯一标识",
+      "type": "string",
+      "disabled": true
+    },
+    {
+      "key": "title",
+      "name": "标题",
+      "desc": "头部标题",
+      "type": "_I18nInput"
+    },
+    {
+      "key": "groupClass",
+      "name": "组维度",
+      "type": "_GroupClassSelector"
+    },
+    {
+      "key": "defaultExpandAll",
+      "name": "默认展开全部",
+      "type": "switch",
+      "default": true
+    },
+    {
+      "key": "onlySelectLeaf",
+      "name": "仅叶子可选",
+      "desc": "仅叶子节点可被选中，父节点不可选中",
+      "type": "switch",
+      "default": true
+    },
+    {
+      "key": "cancelSelect",
+      "name": "允许取消选中",
+      "desc": "是否可以取消选中",
+      "type": "switch",
+      "default": false
+    },
+    {
+      "key": "defaultSelect",
+      "name": "默认选中",
+      "desc": "返回默认选中的数据主键",
+      "type": "_JSEditor",
+      "defaultCode": "function defaultSelect(treeData, firstNode) { \n return firstNode.id; \n}",
+      "mustConfirm": true,
+      "wrapper": "collapse",
+      "wrapperProps": {
+        "suppressIcon": true
+      }
+    }
+  ],
+  "css": "width: 100%; height: 100%;",
+  "advance": {
+    "events": [
+      {
+        "key": "onMount",
+        "name": "组件首次渲染时",
+        "desc": "在组件首次渲染时，执行方法",
+        "func": "function onMount() {\n\t\n}"
+      },
+      {
+        "key": "onUnmount",
+        "name": "组件卸载时",
+        "desc": "在组件卸载时，执行方法。",
+        "func": "function onUnmount() {\n\t\n}"
+      },
+      {
+        "key": "onSelect",
+        "name": "选中事件",
+        "desc": "节点选中事件",
+        "func": "function onSelect(selectedKeys, e) {\n\t\n}"
+      }
+    ]
+  }
+}

package/es/lowcode/view/lc-components/Iframe/index.js

@@ -1,12 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id"];
-import React, { useRef } from 'react';
-import { useMemoizedFn } from 'ahooks';
+var _excluded = ["id", "path", "css", "supportFullScreen"];
+import React, { useEffect, useRef } from 'react';
+import { useFullscreen, useHover, useMemoizedFn } from 'ahooks';
+import { Icon, Tooltip } from 'luck-design/antd';
+import styled from 'styled-components';
 import Wrapper from "../Wrapper";
-var LCIfram = function LCIfram(_ref) {
+import { useContext } from "../../../engine/provider/ContextProvider";
+import { formatMessage } from '@luck-design-biz/base/utils';
+var StyledIframe = styled.iframe.withConfig({
+  displayName: "StyledIframe",
+  componentId: "luckda-6530__sc-82q9mj-0"
+})(["border:none;", ""], function (props) {
+  return props.$css;
+});
+var LCIframe = function LCIframe(_ref) {
   var id = _ref.id,
+    path = _ref.path,
+    css = _ref.css,
+    supportFullScreen = _ref.supportFullScreen,
     props = _objectWithoutProperties(_ref, _excluded);
   var ref = useRef();
+  var parentRef = useRef();
+  var isHovering = useHover(parentRef);
+  var _useFullscreen = useFullscreen(ref, {
+      pageFullscreen: true
+    }),
+    _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
+    isFullscreen = _useFullscreen2[0],
+    toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
   var getTargetDom = useMemoizedFn(function () {
     return ref.current;
   });
@@ -15,7 +38,34 @@ var LCIfram = function LCIfram(_ref) {
     displayName: "Iframe",
     getTargetDom: getTargetDom
   }, /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  }, "LCIfram"));
+    style: {
+      position: !isFullscreen ? 'relative' : 'static',
+      width: '100%',
+      height: '100%'
+    },
+    ref: parentRef
+  }, supportFullScreen && isHovering && /*#__PURE__*/React.createElement(Tooltip, {
+    title: isFullscreen ? formatMessage({
+      id: 'luckda.lowcode.painter.components.fullscreen-exit.tip',
+      label: '退出全屏'
+    }) : formatMessage({
+      id: 'luckda.lowcode.painter.components.fullscreen.tip',
+      label: '全屏'
+    })
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: isFullscreen ? 'fullscreen-exit' : 'fullscreen',
+    style: {
+      fontSize: 20,
+      position: isFullscreen ? 'fixed' : 'absolute',
+      top: 15,
+      right: 20,
+      zIndex: 9999999
+    },
+    onClick: toggleFullscreen
+  })), /*#__PURE__*/React.createElement(StyledIframe, _extends({}, props, {
+    ref: ref,
+    src: path,
+    $css: css
+  }))));
 };
-export default LCIfram;
+export default LCIframe;

package/es/lowcode/view/lc-components/Iframe/meta.json

@@ -9,7 +9,7 @@
   "props": [
     {
       "key": "id",
-      "desc": "唯一标识",
+      "name": "唯一标识",
       "type": "string",
       "disabled": true
     },
@@ -23,10 +23,9 @@
       "key": "supportFullScreen",
       "name": "支持全屏",
       "desc": "是否支持全屏展示",
-      "type": "boolean",
+      "type": "switch",
       "default": true
     }
   ],
-  "css": "",
-  "advance": {}
+  "css": "background: white; width: 100%; height: 100%"
 }

package/es/lowcode/view/lc-components/ImEx/meta.json

@@ -9,7 +9,7 @@
   "props": [
     {
       "key": "id",
-      "desc": "唯一标识",
+      "name": "唯一标识",
       "type": "string",
       "disabled": true
     },

package/es/lowcode/view/lc-components/Image/index.js

@@ -1,12 +1,63 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id"];
-import React, { useRef } from 'react';
-import { useMemoizedFn } from 'ahooks';
+var _excluded = ["id", "src", "css", "advance", "onClick"];
+import React, { useEffect, useRef } from 'react';
+import { useHover, useMemoizedFn, useSetState } from 'ahooks';
+import styled from 'styled-components';
+import { ImgPreview } from 'luck-design';
 import Wrapper from "../Wrapper";
+import styles from "./index.less";
+import { Icon } from 'luck-design/antd';
+import { useContext } from "../../../engine/provider/ContextProvider";
+var StyledImage = styled.img.withConfig({
+  displayName: "StyledImage",
+  componentId: "luckda-6530__sc-k6wbym-0"
+})(["width:", ";height:", ";object-fit:", ";cursor:", ";border-radius:", ";", ""], function (props) {
+  return props.autoWidth ? 'auto' : "".concat(props.width, "px");
+}, function (props) {
+  return props.autoHeight ? 'auto' : "".concat(props.height, "px");
+}, function (props) {
+  return props.fit;
+}, function (props) {
+  return props.preview && 'pointer';
+}, function (props) {
+  return props.roundRadios || "".concat(props.borderRadios, "px");
+}, function (props) {
+  return props.$css;
+});
 var LCImage = function LCImage(_ref) {
   var id = _ref.id,
+    src = _ref.src,
+    css = _ref.css,
+    advance = _ref.advance,
+    onClick = _ref.onClick,
     props = _objectWithoutProperties(_ref, _excluded);
   var ref = useRef();
+  var isHovering = useHover(ref);
+  var _useSetState = useSetState({
+      visible: false,
+      images: []
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var ctx = useContext();
+  useEffect(function () {
+    ctx.doAction(advance.events.onMount);
+    return function () {
+      return ctx.doAction(advance.events.onUnmount);
+    };
+  }, []);
+  var handleClick = useMemoizedFn(function (e) {
+    if (onClick) {
+      onClick(e);
+      return;
+    }
+    ctx.doAction(advance.events.onClick, {
+      e: e
+    });
+  });
   var getTargetDom = useMemoizedFn(function () {
     return ref.current;
   });
@@ -14,8 +65,33 @@ var LCImage = function LCImage(_ref) {
     id: id,
     displayName: "Image",
     getTargetDom: getTargetDom
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  }, "LCImage"));
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: props.preview && styles['lc-component-image'],
+    ref: ref,
+    onClick: props.preview ? function () {
+      return setState({
+        visible: true,
+        images: [{
+          src: src
+        }]
+      });
+    } : {}
+  }, /*#__PURE__*/React.createElement(StyledImage, _extends({
+    src: src,
+    $css: css
+  }, props)), props.preview && isHovering && /*#__PURE__*/React.createElement(Icon, {
+    type: "search",
+    className: styles.search
+  })), /*#__PURE__*/React.createElement(ImgPreview, {
+    visible: state.visible,
+    images: state.images,
+    activeIndex: 0,
+    onClose: function onClose() {
+      return setState({
+        visible: false
+      });
+    },
+    onClick: handleClick
+  })));
 };
 export default LCImage;

package/es/lowcode/view/lc-components/Image/index.less

@@ -0,0 +1,27 @@
+.lc-component-image {
+  position: relative;
+  width: fit-content;
+  cursor: pointer;
+
+  .search {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+  }
+
+  &:hover {
+    &::before {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin: -16px 0 0 -16px;
+      width: 32px;
+      height: 32px;
+      background-color: rgba(51, 51, 51, 0.6);
+      border-radius: 16px 16px;
+    }
+  }
+}