@luck-design-biz/luckda 0.0.24-1 → 0.0.24-2

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

@@ -0,0 +1,150 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useStyle, useStyleDispatch, isModified } from "./StyleContext";
+import BorderSelector from "./BorderSelector";
+import styles from "../../style/border-editor.less";
+import { Select } from 'luck-design/antd';
+import Size from "./Size";
+import ColorInput from "../../components/ColorInput";
+import HighLightPanel from "./HighLightPanel";
+import HighLigthtSpan from "./HighLigthtSpan";
+var Option = Select.Option;
+var borderMainProps = ['border-width', 'border-color', 'border-style'];
+var borderSideProps = ['border-top-width', 'border-top-color', 'border-top-style', 'border-right-width', 'border-right-color', 'border-right-style', 'border-bottom-width', 'border-bottom-color', 'border-bottom-style', 'border-left-width', 'border-left-color', 'border-left-style'];
+var textRelatedStyles = [].concat(borderMainProps, borderSideProps);
+var getPropName = function getPropName(str) {
+  return str.split('-').pop();
+};
+
+/**
+ * 边框样式设置控件
+ */
+export default function () {
+  return /*#__PURE__*/React.createElement(HighLightPanel, {
+    highLightFields: textRelatedStyles,
+    addon: /*#__PURE__*/React.createElement(BorderEditor, null),
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.border',
+      label: '边框'
+    })
+  });
+}
+var BorderEditor = function BorderEditor() {
+  var _style$styleField;
+  var _useState = useState('all'),
+    _useState2 = _slicedToArray(_useState, 2),
+    curDirection = _useState2[0],
+    setCurDirection = _useState2[1];
+  var style = useStyle();
+  var dispatch = useStyleDispatch();
+  var handleChange = function handleChange(field, value) {
+    if (curDirection == 'all') {
+      var mainPropsName = getPropName(field);
+      borderSideProps.forEach(function (item) {
+        if (mainPropsName === getPropName(item)) delete style[item];
+      });
+    }
+    if (value) {
+      style[field] = value;
+    } else {
+      delete style[field];
+    }
+    dispatch({
+      type: 'new',
+      payload: style
+    });
+  };
+  var handleDirectChange = function handleDirectChange(value) {
+    setCurDirection(value);
+  };
+  var styleField = 'border-style';
+  var widthField = 'border-width';
+  var colorField = 'border-color';
+  if (curDirection != 'all') {
+    styleField = "border-".concat(curDirection, "-style");
+    widthField = "border-".concat(curDirection, "-width");
+    colorField = "border-".concat(curDirection, "-color");
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-style-panel-border-editor']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['border-editor-wrapper']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['wrapper-left']
+  }, /*#__PURE__*/React.createElement(BorderSelector, {
+    onChange: handleDirectChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['wrapper-right']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['editor-item']
+  }, /*#__PURE__*/React.createElement(HighLigthtSpan, {
+    highLightFields: [styleField]
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style',
+    label: '边框'
+  })), /*#__PURE__*/React.createElement(Select, {
+    style: {
+      flex: 1
+    },
+    size: "small",
+    onChange: function onChange(value) {
+      handleChange(styleField, value);
+    },
+    value: (_style$styleField = style[styleField]) !== null && _style$styleField !== void 0 ? _style$styleField : ''
+  }, /*#__PURE__*/React.createElement(Option, {
+    value: ""
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.none',
+    label: '无'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "solid"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.solid',
+    label: '实线条'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "dotted"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.dotted',
+    label: '点线'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "dashed"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.style.dashed',
+    label: '虚线'
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: styles['editor-item']
+  }, /*#__PURE__*/React.createElement(HighLigthtSpan, {
+    highLightFields: [widthField]
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.width',
+    label: '线宽'
+  })), /*#__PURE__*/React.createElement(Size, {
+    field: widthField,
+    style: {
+      flex: 1
+    },
+    placeholder: formatMessage({
+      id: "luckda.lowcode.painter.panel-section.style-panel.border.width.ph",
+      label: '线宽'
+    }),
+    onChange: function onChange(value) {
+      return handleChange(widthField, value);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['editor-item']
+  }, /*#__PURE__*/React.createElement(HighLigthtSpan, {
+    highLightFields: [colorField]
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border.color',
+    label: '颜色'
+  })), /*#__PURE__*/React.createElement(ColorInput, {
+    wrapperStyle: {
+      flex: 1
+    },
+    value: style[colorField],
+    onChange: function onChange(value) {
+      return handleChange(colorField, value);
+    }
+  })))));
+};

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

@@ -0,0 +1,87 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useStyle, useStyleDispatch, isModified } from "./StyleContext";
+import BorderRadiusSelector from "./BorderRadiusSelector";
+import styles from "../../style/border-editor.less";
+import Size from "./Size";
+import HighLightPanel from "./HighLightPanel";
+import HighLigthtSpan from "./HighLigthtSpan";
+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, {
+    highLightFields: textRelatedStyles,
+    addon: /*#__PURE__*/React.createElement(BorderRadiusEditor, null),
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.border-radius',
+      label: ' 圆角'
+    })
+  });
+}
+var BorderRadiusEditor = function BorderRadiusEditor() {
+  var _useState = useState('all'),
+    _useState2 = _slicedToArray(_useState, 2),
+    curDirection = _useState2[0],
+    setCurDirection = _useState2[1];
+  var style = useStyle();
+  var dispatch = useStyleDispatch();
+  var handleChange = function handleChange(field, value) {
+    if (curDirection == 'all') {
+      borderSideProps.forEach(function (item) {
+        delete style[item];
+      });
+    }
+    if (value) {
+      style[field] = value;
+    } else {
+      delete style[field];
+    }
+    dispatch({
+      type: 'new',
+      payload: style
+    });
+  };
+  var handleDirectChange = function handleDirectChange(value) {
+    setCurDirection(value);
+  };
+  var field = 'border-radius';
+  if (curDirection != 'all') {
+    field = "border-".concat(curDirection, "-radius");
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-style-panel-border-editor']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['border-editor-wrapper']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['wrapper-left']
+  }, /*#__PURE__*/React.createElement(BorderRadiusSelector, {
+    onChange: handleDirectChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['wrapper-right-single']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['editor-item']
+  }, /*#__PURE__*/React.createElement(HighLigthtSpan, {
+    highLightFields: [field]
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.border-radius.width',
+    label: '半径'
+  })), /*#__PURE__*/React.createElement(Size, {
+    field: field,
+    style: {
+      flex: 1
+    },
+    placeholder: formatMessage({
+      id: "luckda.lowcode.painter.panel-section.style-panel.border-radius.width.ph",
+      label: '半径'
+    }),
+    onChange: function onChange(value) {
+      return handleChange(field, value);
+    }
+  })))));
+};

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

@@ -0,0 +1,66 @@
+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;
+  var _useState = useState('all'),
+    _useState2 = _slicedToArray(_useState, 2),
+    curSelect = _useState2[0],
+    setCurSelect = _useState2[1];
+  var handleSelected = function handleSelected(direction) {
+    if (onChange) onChange(direction);
+    setCurSelect(direction);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-style-panel-border-radius-selector']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-box']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-row']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-left'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'top-left' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('top-left');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u250F")), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'bottom-left' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('bottom-left');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u2517")))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-center'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'all' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('all');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u254B"))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-right'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'top-right' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('top-right');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u2513")), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'bottom-right' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('bottom-right');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u251B")))));
+}

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

@@ -0,0 +1,66 @@
+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;
+  var _useState = useState('all'),
+    _useState2 = _slicedToArray(_useState, 2),
+    curSelect = _useState2[0],
+    setCurSelect = _useState2[1];
+  var handleSelected = function handleSelected(direction) {
+    if (onChange) onChange(direction);
+    setCurSelect(direction);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-style-panel-border-selector']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-box']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['selector-row']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-left'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'left' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('left');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u2523")))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-center'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'top' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('top');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u2533")), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'all' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('all');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u254B")), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'bottom' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('bottom');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u253B"))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-row'], " ").concat(styles['b-right'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles['selector-wrapper']).concat(curSelect === 'right' ? " ".concat(styles['selector-over']) : ''),
+    onClick: function onClick() {
+      return handleSelected('right');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['selector-item']
+  }, "\u252B")))));
+}

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

@@ -1,12 +1,18 @@
 import React from 'react';
-import PanelItem from "../../components/PanelItem";
 import { Segmented } from '@luck-helper/ui-design';
 import { formatMessage } from '@luck-design-biz/base/utils';
 import { Tooltip } from 'luck-design/antd';
 import styles from "../../style/display.less";
 import DisplaySvg from "./DisplaySvg";
 import { useStyle, useStyleDispatch } from "./StyleContext";
-export default function () {
+import HighLightPanel from "./HighLightPanel";
+var textRelatedStyles = ['display', 'flex-direction', 'align-items', 'justify-content'];
+
+/**
+ * 显示样式设置控件
+ */
+export default function (_ref) {
+  var label = _ref.label;
   var style = useStyle();
   var dispatch = useStyleDispatch();
   var handleDisplayChange = function handleDisplayChange(id, value) {
@@ -18,11 +24,9 @@ export default function () {
       }
     });
   };
-  return /*#__PURE__*/React.createElement(PanelItem, {
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.display',
-      label: '显示'
-    }),
+  return /*#__PURE__*/React.createElement(HighLightPanel, {
+    label: label,
+    highLightFields: textRelatedStyles,
     collapsed: style.display != 'flex',
     addon: style.display == 'flex' ? /*#__PURE__*/React.createElement(FlexTypeSelector, {
       dispatch: dispatch
@@ -115,10 +119,10 @@ function parseDirection(input) {
     isReverse: isReverse
   };
 }
-var SvgLabel = function SvgLabel(_ref) {
-  var name = _ref.name,
-    tip = _ref.tip,
-    pre = _ref.pre;
+var SvgLabel = function SvgLabel(_ref2) {
+  var name = _ref2.name,
+    tip = _ref2.tip,
+    pre = _ref2.pre;
   var style = useStyle();
   var direct = null;
   var SvgComponent = null;

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

@@ -0,0 +1,162 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { Select } from 'luck-design/antd';
+import FontEditor from "./FontEditor";
+import { useStyle, useStyleDispatch, isModified } from "./StyleContext";
+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();
+  var dispatch = useStyleDispatch();
+  var _useState = useState(determineSelected(style)),
+    _useState2 = _slicedToArray(_useState, 2),
+    curSelected = _useState2[0],
+    setCurSelected = _useState2[1];
+  var _useState3 = useState(curSelected !== 'custom'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    collapsed = _useState4[0],
+    setCollapsed = _useState4[1];
+  var handleChange = function handleChange(value) {
+    if (value == 'custom') {
+      setCollapsed(false);
+    }
+    if (value == 'default') {
+      textRelatedStyles.forEach(function (item) {
+        delete style[item];
+      });
+    }
+    var newStyle = _objectSpread(_objectSpread({}, style), presetStyles[value]);
+    setCurSelected(value);
+    dispatch({
+      type: 'new',
+      payload: newStyle
+    });
+  };
+  return /*#__PURE__*/React.createElement(HighLightPanel, {
+    addon: /*#__PURE__*/React.createElement(FontEditor, null),
+    collapsed: collapsed,
+    highLightFields: textRelatedStyles,
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.font',
+      label: '文字'
+    })
+  }, /*#__PURE__*/React.createElement(Select, {
+    size: "small",
+    onChange: handleChange,
+    value: curSelected
+  }, /*#__PURE__*/React.createElement(Option, {
+    value: "h1"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.h1',
+    label: '一级标题'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "h2"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.h2',
+    label: '二级标题'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "h3"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.h3',
+    label: '三级标题'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "paragraph"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.paragraph',
+    label: '段落'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "default"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.default',
+    label: '无'
+  })), /*#__PURE__*/React.createElement(Option, {
+    value: "custom"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.font.custom',
+    label: '自定义'
+  }))));
+}
+var presetStyles = {
+  h1: {
+    'font-weight': 700,
+    'font-size': '20px',
+    'line-height': '30px'
+  },
+  h2: {
+    'font-weight': 700,
+    'font-size': '16px',
+    'line-height': '24px'
+  },
+  h3: {
+    'font-weight': 700,
+    'font-size': '14px',
+    'line-height': '22px'
+  },
+  paragraph: {
+    'font-weight': 'normal',
+    'font-size': '14px',
+    'line-height': '22px'
+  },
+  default: {},
+  custom: {}
+};
+function determineSelected(style) {
+  // 检查style是否包含任何与文字相关的样式属性
+  var styleProps = Object.keys(style);
+  var containsTextRelatedProps = styleProps.some(function (prop) {
+    return textRelatedStyles.includes(prop);
+  });
+  if (!containsTextRelatedProps) {
+    return 'default';
+  }
+  var _loop = function _loop() {
+      var key = _Object$keys[_i];
+      if (key === 'default' || key === 'custom') return 0; // continue
+      var preset = presetStyles[key];
+      var isPresetMatch = true;
+      var _iterator = _createForOfIteratorHelper(textRelatedStyles),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var prop = _step.value;
+          // 将两边的值都转换为字符串再比较
+          var styleValue = String(style[prop]);
+          var presetValue = String(preset[prop]);
+          if (style[prop] !== undefined && preset[prop] !== undefined && styleValue !== presetValue) {
+            isPresetMatch = false;
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      if (isPresetMatch) {
+        // 检查style中是否有额外的与文字相关的属性不在当前preset中
+        var isExtraPropsInStyle = styleProps.some(function (prop) {
+          return textRelatedStyles.includes(prop) && !(prop in preset);
+        });
+        if (!isExtraPropsInStyle) {
+          return {
+            v: key
+          }; // 找到完全匹配的预设
+        }
+      }
+    },
+    _ret;
+  for (var _i = 0, _Object$keys = Object.keys(presetStyles); _i < _Object$keys.length; _i++) {
+    _ret = _loop();
+    if (_ret === 0) continue;
+    if (_ret) return _ret.v;
+  }
+  return 'custom';
+}