@luck-design-biz/luckda 1.0.0-alpha → 1.0.1-10

package/es/lowcode/painter/panel-section/LayoutRatio.js

@@ -8,27 +8,27 @@ import PanelItem from "../components/PanelItem";
 var _RATIOS_ = ['12', '6:6', '3:9', '9:3', '4:4:4', '3:6:3', '3:3:3:3', '2:2:2:2:2:2'];
 var _DEFAULTRATIO_ = '12:3:9';
 
-/**
- * `LayoutRatio`组件提供了一个布局比例选择器，允许用户选择或输入特定的比例配置。
- * 支持的比例配置包括预定义的比例数组`_RATIOS_`，用户还可以通过输入框自定义比例，
- * 自定义比例需要符合一定的规则：是数字或数字与冒号的组合，且数字之和必须等于12。
- * ，
- * 允许父组件获取当前选中的布局比例。
- *
- * @component
- * @example
- * ```jsxsdsdsdsdsdsdsd
- * <LayoutRatio
- *   value="6:6"
- *   onChange={(option) => console.log(option)}
- * />
- * ```
- *
- * @param {Object} props
- * @param {string} [props.value='12'] 初始化时选中的布局比例，默认为"12"。
- * @param {Function} props.onChange 当用户选择一个新的布局比例时调用的回调函数。
- *
- * @returns {React.Element} 渲染的React元素。
+/**
+ * `LayoutRatio`组件提供了一个布局比例选择器，允许用户选择或输入特定的比例配置。
+ * 支持的比例配置包括预定义的比例数组`_RATIOS_`，用户还可以通过输入框自定义比例，
+ * 自定义比例需要符合一定的规则：是数字或数字与冒号的组合，且数字之和必须等于12。
+ * ，
+ * 允许父组件获取当前选中的布局比例。
+ *
+ * @component
+ * @example
+ * ```jsxsdsdsdsdsdsdsd
+ * <LayoutRatio
+ *   value="6:6"
+ *   onChange={(option) => console.log(option)}
+ * />
+ * ```
+ *
+ * @param {Object} props
+ * @param {string} [props.value='12'] 初始化时选中的布局比例，默认为"12"。
+ * @param {Function} props.onChange 当用户选择一个新的布局比例时调用的回调函数。
+ *
+ * @returns {React.Element} 渲染的React元素。
  */
 var LayoutRatio = function LayoutRatio(_ref) {
   var defaultValue = _ref.defaultValue,
@@ -116,6 +116,7 @@ var LayoutRatio = function LayoutRatio(_ref) {
       id: 'luckda.lowcode.painter.panel-section.Layoutratio.label',
       label: '列比例'
     }),
+    field: "columnRatio",
     suppressPadding: true
   }, /*#__PURE__*/React.createElement(RuleInput, {
     placeholder: formatMessage({

package/es/lowcode/painter/panel-section/PageVars.js

@@ -0,0 +1,300 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useReducer, useState } from 'react';
+import { useMemoizedFn, useUpdateEffect, useCreation, useDebounceFn, useSetState } from 'ahooks';
+import { Select, Input, Button, Menu, Dropdown, Drawer, Modal } from 'luck-design/antd';
+import styled from 'styled-components';
+import { reduce, isNil } from 'lodash';
+import { suid, formatMessage } from '@luck-design-biz/base/utils';
+import { SortBox, SortItem } from "../components/SortBox";
+import { ListEditor, ListEditorItem } from "../components/ListEditor";
+import { listReducer } from "../../engine/tools/helper";
+import VarEditor from "../components/VarEditor";
+import TipIcon from "../components/TipIcon";
+import styles from "../style/page-vars.less";
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.pageVars';
+var Wrapper = styled.div.withConfig({
+  displayName: "Wrapper",
+  componentId: "luckda-6530__sc-1qdz6c5-0"
+})(["padding:0 12px;"]);
+var SearchBar = styled.div.withConfig({
+  displayName: "SearchBar",
+  componentId: "luckda-6530__sc-1qdz6c5-1"
+})(["display:flex;margin-bottom:8px;"]);
+var ItemWrapper = styled.div.withConfig({
+  displayName: "ItemWrapper",
+  componentId: "luckda-6530__sc-1qdz6c5-2"
+})(["display:flex;align-items:center;"]);
+var _TYPES_ = {
+  var: {
+    name: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".var"),
+      label: '变量'
+    }),
+    color: '#87d068'
+  },
+  api: {
+    name: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".api"),
+      label: '远程 API'
+    }),
+    color: '#108ee9'
+  }
+};
+var _TYPE_KEYS_ = Object.keys(_TYPES_);
+var PageVars = function PageVars(_ref) {
+  var _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? [] : _ref$defaultValue,
+    onChange = _ref.onChange;
+  var _useReducer = useReducer(listReducer, defaultValue),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    vars = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var _useSetState = useSetState({}),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    filter = _useSetState2[0],
+    setFilter = _useSetState2[1];
+  useUpdateEffect(function () {
+    onChange(vars);
+  }, [vars]);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentItem = _useState2[0],
+    setCurrentItem = _useState2[1];
+  var handleSortChange = useMemoizedFn(function (sortItems) {
+    dispatch({
+      type: 'sort',
+      payload: sortItems
+    });
+  });
+  var handleAdd = useMemoizedFn(function (_item) {
+    dispatch({
+      type: 'add',
+      payload: _item
+    });
+    setCurrentItem(_item);
+  });
+  var _useDebounceFn = useDebounceFn(function (keyword) {
+      return setFilter({
+        keyword: isNil(keyword) || keyword === '' ? void 0 : keyword
+      });
+    }, {
+      wait: 400
+    }),
+    handleSearch = _useDebounceFn.run;
+  var renderItemLeft = useMemoizedFn(function (item) {
+    var _TYPES_$item$type = _TYPES_[item.type],
+      name = _TYPES_$item$type.name,
+      color = _TYPES_$item$type.color;
+    return /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: color
+      }
+    }, name.substring(0, 2)), /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginLeft: 4,
+        fontWeight: 'bold'
+      }
+    }, item.name));
+  });
+  var renderItemRight = useMemoizedFn(function (item) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TipIcon, {
+      type: "edit",
+      onClick: function onClick() {
+        return setCurrentItem(item);
+      },
+      style: {
+        marginRight: 4,
+        cursor: 'pointer'
+      },
+      title: formatMessage({
+        id: "".concat(_I18N_PREFIX_, ".edit"),
+        label: '编辑'
+      })
+    }), /*#__PURE__*/React.createElement(TipIcon, {
+      type: "copy",
+      onClick: function onClick() {
+        return handleAdd(_objectSpread(_objectSpread({}, item), {}, {
+          id: suid(),
+          name: "".concat(item.name, "_copy")
+        }));
+      },
+      style: {
+        marginRight: 4,
+        cursor: 'pointer'
+      },
+      title: formatMessage({
+        id: "".concat(_I18N_PREFIX_, ".copy"),
+        label: '拷贝'
+      })
+    }), /*#__PURE__*/React.createElement(TipIcon, {
+      type: "delete",
+      onClick: function onClick() {
+        return Modal.confirm({
+          title: formatMessage({
+            id: "".concat(_I18N_PREFIX_, ".confirm.delete"),
+            label: "\u786E\u8BA4\u5220\u9664\u5417\uFF1F"
+          }),
+          onOk: function onOk() {
+            if (currentItem.id === item.id) {
+              setCurrentItem(null);
+            }
+            dispatch({
+              type: 'delete',
+              payload: item.id
+            });
+          }
+        });
+      },
+      style: {
+        marginRight: 4,
+        cursor: 'pointer'
+      },
+      title: formatMessage({
+        id: "".concat(_I18N_PREFIX_, ".delete"),
+        label: '删除'
+      })
+    }));
+  });
+  var menu = useCreation(function () {
+    return /*#__PURE__*/React.createElement(Menu, {
+      onClick: function onClick(_ref2) {
+        var key = _ref2.key;
+        var id = suid();
+        handleAdd(_objectSpread({
+          id: id,
+          type: key,
+          name: id
+        }, {
+          var: {
+            data: ''
+          },
+          api: {
+            data: {
+              auto: true,
+              taskType: 'parallel',
+              method: 'get'
+            }
+          }
+        }[key]));
+      }
+    }, _TYPE_KEYS_.map(function (key) {
+      return /*#__PURE__*/React.createElement(Menu.Item, {
+        key: key
+      }, _TYPES_[key].name);
+    }));
+  }, []);
+  var _vars = useCreation(function () {
+    var keyword = filter.keyword,
+      type = filter.type;
+    var _vars = isNil(type) ? vars : vars.filter(function (_item) {
+      return _item.type === type;
+    });
+    if (isNil(keyword) || keyword === '') {
+      return _vars;
+    }
+    return reduce(_vars, function (ret, _item) {
+      if (JSON.stringify(_item).includes(keyword)) {
+        ret.push(_item);
+      }
+      return ret;
+    }, []);
+  }, [filter, vars]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(SearchBar, null, /*#__PURE__*/React.createElement(Select, {
+    size: "small",
+    defaultValue: "all",
+    style: {
+      width: 100,
+      marginRight: 8
+    },
+    onSelect: function onSelect(key) {
+      return setFilter({
+        type: key === 'all' ? void 0 : key
+      });
+    }
+  }, /*#__PURE__*/React.createElement(Select.Option, {
+    value: "all"
+  }, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".all"),
+    label: '全部'
+  })), _TYPE_KEYS_.map(function (key) {
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: key,
+      value: key
+    }, _TYPES_[key].name);
+  })), /*#__PURE__*/React.createElement(Input.Search, {
+    size: "small",
+    allowClear: true,
+    style: {
+      flex: 1
+    },
+    placeholder: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".placeholder.search"),
+      label: '请输入'
+    }),
+    onChange: function onChange(e) {
+      return handleSearch(e.target.value);
+    },
+    onSearch: handleSearch
+  })), /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: menu,
+    trigger: ['click'],
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('lc-design-workspace');
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    type: "primary"
+  }, formatMessage({
+    id: "".concat(_I18N_PREFIX_, ".add"),
+    label: '添加'
+  }))), /*#__PURE__*/React.createElement(SortBox, {
+    datas: vars.map(function (_ref3) {
+      var id = _ref3.id;
+      return id;
+    }),
+    onChange: handleSortChange
+  }, /*#__PURE__*/React.createElement(ListEditor, {
+    style: {
+      marginTop: 8
+    },
+    suppressAdd: true
+  }, _vars.map(function (item) {
+    return /*#__PURE__*/React.createElement(SortItem, {
+      key: item.id,
+      id: item.id
+    }, /*#__PURE__*/React.createElement(ListEditorItem, {
+      sortable: isNil(filter.keyword) && isNil(filter.type),
+      left: renderItemLeft(item),
+      right: renderItemRight(item),
+      item: item,
+      dispatch: dispatch
+    }));
+  })))), currentItem ? /*#__PURE__*/React.createElement(Drawer, {
+    visible: true,
+    width: 420,
+    mask: false,
+    onClose: function onClose() {
+      return setCurrentItem(null);
+    },
+    title: formatMessage({
+      id: "".concat(_I18N_PREFIX_, ".edit"),
+      label: '编辑数据源'
+    }),
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    destroyOnClose: true,
+    className: styles['lc-painter-panel-page-vars-drawer'],
+    style: {
+      position: 'absolute',
+      transform: 'none',
+      right: 320
+    }
+  }, /*#__PURE__*/React.createElement(VarEditor, {
+    key: currentItem.id,
+    item: currentItem,
+    dispatch: dispatch
+  })) : null);
+};
+export default PageVars;

package/es/lowcode/painter/panel-section/StylePanel/BackGround.js

@@ -9,8 +9,8 @@ import HighLightPanel from "./HighLightPanel";
 import HightLightSvg from "./HightLightSvg";
 var textRelatedStyles = ['background-color'];
 
-/**
- * 背景设置控件
+/**
+ * 背景设置控件
  */
 export default function () {
   return /*#__PURE__*/React.createElement(HighLightPanel, {

package/es/lowcode/painter/panel-section/StylePanel/Border.js

@@ -17,8 +17,8 @@ var getPropName = function getPropName(str) {
   return str.split('-').pop();
 };
 
-/**
- * 边框样式设置控件
+/**
+ * 边框样式设置控件
  */
 export default function () {
   return /*#__PURE__*/React.createElement(HighLightPanel, {

package/es/lowcode/painter/panel-section/StylePanel/BorderRadius.js

@@ -11,8 +11,8 @@ var borderMainProps = ['border-radius'];
 var borderSideProps = ['border-top-right-radius', 'border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'];
 var textRelatedStyles = [].concat(borderMainProps, borderSideProps);
 
-/**
- * 圆角样式设置控件
+/**
+ * 圆角样式设置控件
  */
 export default function () {
   return /*#__PURE__*/React.createElement(HighLightPanel, {

package/es/lowcode/painter/panel-section/StylePanel/BorderRadiusSelector.js

@@ -2,8 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import styles from "../../style/border-radius-selector.less";
 
-/**
- * 圆角设置组件
+/**
+ * 圆角设置组件
  */
 export default function (_ref) {
   var onChange = _ref.onChange;

package/es/lowcode/painter/panel-section/StylePanel/BorderSelector.js

@@ -2,8 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import styles from "../../style/border-selector.less";
 
-/**
- * 边框选择组件
+/**
+ * 边框选择组件
  */
 export default function (_ref) {
   var onChange = _ref.onChange;

package/es/lowcode/painter/panel-section/StylePanel/Display.js

@@ -8,8 +8,8 @@ import { useStyle, useStyleDispatch } from "./StyleContext";
 import HighLightPanel from "./HighLightPanel";
 var textRelatedStyles = ['display', 'flex-direction', 'align-items', 'justify-content'];
 
-/**
- * 显示样式设置控件
+/**
+ * 显示样式设置控件
  */
 export default function (_ref) {
   var label = _ref.label;

package/es/lowcode/painter/panel-section/StylePanel/Font.js

@@ -10,8 +10,8 @@ import HighLightPanel from "./HighLightPanel";
 var Option = Select.Option;
 var textRelatedStyles = ['font-weight', 'font-style', 'color', 'font-size', 'line-height', 'text-align', 'text-decoration'];
 
-/**
- * 文字设置组件
+/**
+ * 文字设置组件
  */
 export default function () {
   var style = useStyle();

package/es/lowcode/painter/panel-section/StylePanel/FontEditor.js

@@ -12,8 +12,8 @@ import Size from "./Size";
 import HightLightSvg from "./HightLightSvg";
 var Option = Select.Option;
 
-/**
- * 文字详细编辑组件
+/**
+ * 文字详细编辑组件
  */
 export default function () {
   var _style$fontWeight;

package/es/lowcode/painter/panel-section/StylePanel/GapSelector.js

@@ -4,8 +4,8 @@ import { useStyle, useStyleDispatch } from "./StyleContext";
 import { Select } from 'luck-design/antd';
 var Option = Select.Option;
 
-/**
- * 间距选择组件
+/**
+ * 间距选择组件
  */
 export default function (_ref) {
   var _style$field;

package/es/lowcode/painter/panel-section/StylePanel/HighLightPanel.js

@@ -5,8 +5,8 @@ import React from 'react';
 import PanelItem from "../../components/PanelItem";
 import HighLigthtSpan from "./HighLigthtSpan";
 
-/**
- * 标签自动高亮控件
+/**
+ * 标签自动高亮控件
  */
 export default function (_ref) {
   var children = _ref.children,

package/es/lowcode/painter/panel-section/StylePanel/HighLigthtSpan.js

@@ -5,8 +5,8 @@ import React from 'react';
 import { useStyle, isModified } from "./StyleContext";
 import panelStyles from "../../style/style-panel.less";
 
-/**
- * 标签自动高亮控件
+/**
+ * 标签自动高亮控件
  */
 export default function (_ref) {
   var children = _ref.children,

package/es/lowcode/painter/panel-section/StylePanel/HightLightSvg.js

@@ -5,8 +5,8 @@ import React from 'react';
 import { useStyle, isModified } from "./StyleContext";
 import panelStyles from "../../style/style-panel.less";
 
-/**
- * 标签自动高亮SVG
+/**
+ * 标签自动高亮SVG
  */
 export default function (_ref) {
   var children = _ref.children,

package/es/lowcode/painter/panel-section/StylePanel/MainPanel.js

@@ -19,8 +19,8 @@ import Shadow from "./Shadow";
 import Opacity from "./Opacity";
 import Pointer from "./Pointer";
 
-/**
- * 主样式面板
+/**
+ * 主样式面板
  */
 var MainPanel = function MainPanel() {
   var style = useStyle(true);

package/es/lowcode/painter/panel-section/StylePanel/Margin.js

@@ -15,8 +15,8 @@ export default function () {
   }));
 }
 
-/**
- * 边距样式设置组件
+/**
+ * 边距样式设置组件
  */
 var MarginGroup = function MarginGroup() {
   var style = useStyle();

package/es/lowcode/painter/panel-section/StylePanel/Opacity.js

@@ -6,8 +6,8 @@ import { isNil } from 'lodash';
 import HighLightPanel from "./HighLightPanel";
 var field = 'opacity';
 
-/**
- * 透明度设置组件
+/**
+ * 透明度设置组件
  */
 export default function () {
   var style = useStyle();

package/es/lowcode/painter/panel-section/StylePanel/Padding.js

@@ -6,8 +6,8 @@ import HighLightPanel from "./HighLightPanel";
 var textRelatedStyles = ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'];
 var field = 'padding';
 
-/**
- * 间距样式设置组件
+/**
+ * 间距样式设置组件
  */
 export default function () {
   var style = useStyle();

package/es/lowcode/painter/panel-section/StylePanel/Pointer.js

@@ -5,8 +5,8 @@ import { Select } from 'luck-design/antd';
 import HighLightPanel from "./HighLightPanel";
 var Option = Select.Option;
 var field = 'cursor';
-/**
- * 指针样式设置组件
+/**
+ * 指针样式设置组件
  */
 export default function () {
   var _style$field;

package/es/lowcode/painter/panel-section/StylePanel/Shadow.js

@@ -20,8 +20,8 @@ var presetsShadowStyle = [{
   value: 'rgba(31, 56, 88, 0.2) 1px 1px 4px 0px'
 }];
 
-/**
- * 阴影样式设置组件
+/**
+ * 阴影样式设置组件
  */
 export default function () {
   var style = useStyle();

package/es/lowcode/painter/panel-section/StylePanel/Size.js

@@ -5,8 +5,8 @@ import React from 'react';
 import { useStyle, useStyleDispatch } from "./StyleContext";
 import NumberInput from "../../components/NumberInput";
 
-/**
- * Size设置通用组件
+/**
+ * Size设置通用组件
  */
 export default function (_ref) {
   var field = _ref.field,

package/es/lowcode/painter/panel-section/StylePanel/StyleContext.js

@@ -2,6 +2,7 @@ import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIt
 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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { createContext, useContext, useReducer, useRef } from 'react';
 import { useMemoizedFn } from 'ahooks';
@@ -16,8 +17,8 @@ var StyleContext = /*#__PURE__*/createContext(null);
 var StyleDispatchContext = /*#__PURE__*/createContext(null);
 var EditorContext = /*#__PURE__*/createContext(null);
 
-/**
- * 样式上下文组件
+/**
+ * 样式上下文组件
  */
 export function StyleProvider(_ref) {
   var onChange = _ref.onChange,
@@ -44,7 +45,7 @@ export function StyleProvider(_ref) {
         }
       case 'new':
         {
-          var _newState = _objectSpread({}, action.payload);
+          var _newState = _defineProperty({}, _ROOT_KEY_, action.payload);
           if (editorRef.current) {
             styleToEditor(_newState).then(function (css) {
               return editorRef.current.editor.setValue(css);
@@ -115,7 +116,7 @@ export function StyleProvider(_ref) {
 }
 export function useStyle(full) {
   var _style = useContext(StyleContext);
-  return full ? _style : _style[_ROOT_KEY_];
+  return (full ? _style : _style[_ROOT_KEY_]) || {};
 }
 export function useStyleDispatch() {
   return useContext(StyleDispatchContext);
@@ -175,7 +176,7 @@ export var styleToEditor = /*#__PURE__*/function () {
         case 4:
           _yield$postcss$proces2 = _context2.sent;
           css = _yield$postcss$proces2.css;
-          return _context2.abrupt("return", css);
+          return _context2.abrupt("return", css === '' ? "".concat(_ROOT_KEY_, "{\n\t\n}") : css);
         case 7:
         case "end":
           return _context2.stop();

package/es/lowcode/painter/panel-section/StylePanel/StyleRow.js

@@ -4,8 +4,8 @@ var _excluded = ["children"];
 import React from 'react';
 import panelStyles from "../../style/style-panel.less";
 
-/**
- * 样式行通用组件
+/**
+ * 样式行通用组件
  */
 export default function (_ref) {
   var children = _ref.children,

package/es/lowcode/painter/panel-section/StylePanel/WidthHeight.js

@@ -16,8 +16,8 @@ var options = [{
   value: 'auto'
 }];
 
-/**
- * 宽高设置控件
+/**
+ * 宽高设置控件
  */
 export default function (_ref) {
   var field = _ref.field,