@luck-design-biz/luckda 0.0.22-5 → 0.0.22-6

package/es/lowcode/painter/style/design.less

@@ -4,11 +4,22 @@
   height: 0;
   top: 0;
   left: 0;
-  display: none;
   pointer-events: none;
   cursor: pointer;
   overflow: visible;
-  z-index: 9999;
+  z-index: 98;
+}
+
+.selector-item {
+  height: 20px;
+  background-color: var(--ant-primary-color);
+  color: #fff;
+  font-size: 16px;
+  line-height: 20px;
+  min-width: 20px;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 3px;
 }
 
 .lc-painter-design {
@@ -31,20 +42,23 @@
       width: 125px;
       padding: 0 8px;
     }
+
     .toolbar-item {
       display: inline-block;
       width: 32px;
       height: 32px;
       border-radius: 3px;
       padding: 6px;
-      margin: 0 4px;
+      margin: 0 2px;
       cursor: pointer;
       text-align: center;
       color: #8c8c8c;
     }
+
     .toolbar-item:hover {
       color: #262626;
     }
+
     .toolbar-item.actived {
       color: #8c8c8c;
       background: #f1f2f3;
@@ -59,9 +73,11 @@
     background-color: #fff;
     overflow: hidden;
   }
+
   &-simulator {
     overflow-x: hidden;
     overflow-y: auto;
+
     :global {
       .ant-form-item {
         pointer-events: none;
@@ -78,5 +94,42 @@
   &-selector {
     border: 2px solid var(--ant-primary-6);
     .box();
+
+    .lc-borders-actions {
+      position: absolute;
+      right: -2px;
+      pointer-events: all;
+      cursor: default;
+      display: flex;
+
+      &>div {
+        .selector-item();
+      }
+
+      :local {
+        .instance-node-selector {
+          padding: 0 6px;
+          margin-right: 3px;
+          font-size: 12px!important;
+        }
+      }
+    }
+
   }
 }
+
+.next-overlay-wrapper {
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  &>div>span {
+    display: inline-block;
+    .selector-item();
+    font-size: 12px;
+    padding: 0 6px;
+    background-color: #78869a;
+    &:not(:last-child) {
+      margin-bottom: 3px;
+    }
+  }
+}

package/es/lowcode/view/Canvas.js

@@ -8,15 +8,16 @@ var _excluded = ["props", "children"],
 import React, { useRef, useState } from 'react';
 import { dynamic } from 'umi';
 import { useMemoizedFn, useDeepCompareLayoutEffect } from 'ahooks';
-import { reduce } from 'lodash';
+import { reduce, upperFirst } from 'lodash';
+import { useLDContext } from "../engine/provider/ContextProvider";
 import Box from "./lc-components/Box";
 import { CELL_KEY } from "../constants";
 import styles from "./style/canvas.less";
 var PAGE_CELL = [CELL_KEY.PAGE_HEADER, CELL_KEY.PAGE_CONTENT, CELL_KEY.PAGE_FOOTER];
 var Canvas = function Canvas(_ref) {
   var dataSource = _ref.dataSource;
-  console.log('dataSource', dataSource);
   var dynamicCompMap = useRef({});
+  var context = useLDContext();
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     header = _useState2[0],
@@ -51,17 +52,18 @@ var Canvas = function Canvas(_ref) {
         dynamicCompMap.current[component] = dynamic({
           loader: function () {
             var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-              var _yield$import, _Comp;
+              var _runtime, _yield$import, _Comp;
               return _regeneratorRuntime().wrap(function _callee$(_context) {
                 while (1) switch (_context.prev = _context.next) {
                   case 0:
-                    _context.next = 2;
-                    return import("./lc-components/".concat(component));
-                  case 2:
+                    _runtime = upperFirst(context.runtime);
+                    _context.next = 3;
+                    return import("./lc-components/".concat(component, "/Function").concat(_runtime));
+                  case 3:
                     _yield$import = _context.sent;
                     _Comp = _yield$import.default;
                     return _context.abrupt("return", _Comp);
-                  case 5:
+                  case 6:
                   case "end":
                     return _context.stop();
                 }
@@ -77,7 +79,8 @@ var Canvas = function Canvas(_ref) {
       var Comp = dynamicCompMap.current[component];
       return /*#__PURE__*/React.createElement(Comp, _extends({
         key: id,
-        id: id
+        id: id,
+        context: context
       }, rest), (children || []).map(function (_id) {
         return render(childrenMap[_id]);
       }));

package/es/lowcode/view/Page.js

@@ -85,7 +85,6 @@ var d = {
           group: 'container',
           groupName: '布局',
           order: 3,
-          className: 'lc-component-layout-item',
           style: {
             gridColumn: 'span 12',
             height: 'auto'
@@ -99,7 +98,8 @@ var d = {
             parentId: 'box_ihj2n8cv',
             group: 'basic',
             component: 'Button',
-            name: '按钮'
+            name: '按钮',
+            type: 'primary'
           }
         },
         text_nmu9wqqw: {
@@ -121,7 +121,6 @@ var d = {
           group: 'container',
           groupName: '布局',
           order: 3,
-          className: 'lc-component-layout-item',
           style: {
             gridColumn: 'span 3',
             height: '60px'
@@ -148,7 +147,6 @@ var d = {
           group: 'container',
           groupName: '布局',
           order: 3,
-          className: 'lc-component-layout-item',
           style: {
             gridColumn: 'span 9',
             height: '60px'

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

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import { useCreation } from 'ahooks';
+import classNames from 'classnames';
+import Index from "./index";
+import styles from "./index.less";
+var FunctionDesign = function FunctionDesign(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var isEmpty = useCreation(function () {
+    return !children || React.Children.count(children) === 0;
+  }, [children]);
+  return /*#__PURE__*/React.createElement(Index, _extends({
+    className: classNames(styles['lc-component-box-design'], _defineProperty({}, styles.placeholder, isEmpty))
+  }, props), isEmpty ? '点击组件库的组件或拖拽组件到这里' : children);
+};
+export default FunctionDesign;

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

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/Box/index.js

@@ -1,12 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "children"];
+var _excluded = ["id", "children", "context", "className"];
 import React, { useRef } from 'react';
 import { useMemoizedFn } from 'ahooks';
+import classNames from 'classnames';
 import Wrapper from "../Wrapper";
+import styles from "./index.less";
 var LCBox = function LCBox(_ref) {
   var id = _ref.id,
     children = _ref.children,
+    context = _ref.context,
+    className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var ref = useRef();
   var getTargetDom = useMemoizedFn(function () {
@@ -16,7 +21,8 @@ var LCBox = function LCBox(_ref) {
     id: id,
     getTargetDom: getTargetDom
   }, /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
+    ref: ref,
+    className: classNames(styles['lc-component-box'], _defineProperty({}, className, !!className))
   }, props, {
     name: "box"
   }), children));

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

@@ -0,0 +1,14 @@
+.lc-component-box {
+  &-design.placeholder {
+    width: 100%;
+    height: 100%;
+    min-height: 60px;
+    background-color: #f0f0f0;
+    border: 1px dotted;
+    color: #a7b1bd;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+  }
+}

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

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "children", "context", "className"];
+import React from 'react';
+import classNames from 'classnames';
+import Index from "./index";
+import { CELL_CLASS_NAME } from "../../../constants/index";
+var FunctionDesign = function FunctionDesign(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    context = _ref.context,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Index, _extends({
+    id: id,
+    className: classNames(CELL_CLASS_NAME, _defineProperty({}, className, !!className)),
+    context: context
+  }, props), children);
+};
+export default FunctionDesign;

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

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/CardList/FunctionDesign.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/CardList/FunctionLive.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/Dialog/FunctionDesign.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/Dialog/FunctionLive.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/Drawer/FunctionDesign.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/Drawer/FunctionLive.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/Drawer/index.js

@@ -56,7 +56,7 @@ var LCDrawer = function LCDrawer(_ref) {
     style: {
       position: context.runtime === RUNTIME.DESIGN ? 'absolute' : 'fixed'
     },
-    className: classNames(className, _defineProperty({}, styles['runtime-drawer'], context.runtime === RUNTIME.DESIGN))
+    className: classNames(_defineProperty(_defineProperty({}, styles['runtime-drawer'], context.runtime === RUNTIME.DESIGN), className, !!className))
   }, /*#__PURE__*/React.createElement("div", null, "LCDrawer-", id), children));
 };
 export default LCDrawer;

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

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/Form/FunctionLive.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/Iframe/FunctionDesign.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/Iframe/FunctionLive.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/ImEx/FunctionDesign.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/ImEx/FunctionLive.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/Image/FunctionDesign.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/Image/FunctionLive.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/JSX/FunctionDesign.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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/JSX/FunctionLive.js

@@ -0,0 +1,9 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+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;