@luck-design-biz/luckda 0.0.25 → 0.0.26-2

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

@@ -1,78 +0,0 @@
-import React from 'react';
-import { formatMessage } from '@luck-design-biz/base/utils';
-import { useStyle, useStyleDispatch } from "./StyleContext";
-import { Select } from 'luck-design/antd';
-var Option = Select.Option;
-
-/**
- * 间距选择组件
- */
-export default function (_ref) {
-  var _style$field;
-  var field = _ref.field;
-  var style = useStyle();
-  var dispatch = useStyleDispatch();
-  var handleChange = function handleChange(value) {
-    if (field == 'margin') {
-      delete style['margin-top'];
-      delete style['margin-right'];
-      delete style['margin-bottom'];
-      delete style['margin-left'];
-    }
-    if (field == 'padding') {
-      delete style['padding-top'];
-      delete style['padding-right'];
-      delete style['padding-bottom'];
-      delete style['padding-left'];
-    }
-    if (value && value != '') {
-      style[field] = value;
-    } else {
-      delete style[field];
-    }
-    dispatch({
-      type: 'new',
-      payload: style
-    });
-  };
-  return /*#__PURE__*/React.createElement(Select, {
-    size: "small",
-    onChange: handleChange,
-    value: (_style$field = style[field]) !== null && _style$field !== void 0 ? _style$field : ''
-  }, /*#__PURE__*/React.createElement(Option, {
-    value: "24px"
-  }, formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.style-panel.margin.superbig',
-    label: '超大（24px）'
-  })), /*#__PURE__*/React.createElement(Option, {
-    value: "20px"
-  }, ' ', formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.style-panel.margin.big',
-    label: '大（20px）'
-  })), /*#__PURE__*/React.createElement(Option, {
-    value: "16px"
-  }, ' ', formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.style-panel.margin.middle',
-    label: '中（16px）'
-  })), /*#__PURE__*/React.createElement(Option, {
-    value: "12px"
-  }, ' ', formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.style-panel.margin.small',
-    label: '小（12px）'
-  })), /*#__PURE__*/React.createElement(Option, {
-    value: "8px"
-  }, formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.style-panel.margin.supersmall',
-    label: '超小（8px）'
-  })), /*#__PURE__*/React.createElement(Option, {
-    value: "0"
-  }, formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.style-panel.margin.none',
-    label: '无（0px）'
-  })), /*#__PURE__*/React.createElement(Option, {
-    value: ""
-  }, formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.style-panel.margin.default',
-    label: '默认'
-  })));
-}

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

@@ -1,23 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "label", "highLightFields", "customStyle"];
-import React from 'react';
-import PanelItem from "../../components/PanelItem";
-import HighLigthtSpan from "./HighLigthtSpan";
-
-/**
- * 标签自动高亮控件
- */
-export default function (_ref) {
-  var children = _ref.children,
-    label = _ref.label,
-    highLightFields = _ref.highLightFields,
-    customStyle = _ref.customStyle,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(PanelItem, _extends({
-    label: /*#__PURE__*/React.createElement(HighLigthtSpan, {
-      highLightFields: highLightFields,
-      customStyle: customStyle
-    }, label)
-  }, rest), children);
-}

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

@@ -1,20 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "highLightFields", "customStyle"];
-import React from 'react';
-import { useStyle, isModified } from "./StyleContext";
-import panelStyles from "../../style/style-panel.less";
-
-/**
- * 标签自动高亮控件
- */
-export default function (_ref) {
-  var children = _ref.children,
-    highLightFields = _ref.highLightFields,
-    customStyle = _ref.customStyle,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var style = useStyle();
-  return /*#__PURE__*/React.createElement("span", _extends({
-    className: isModified(customStyle !== null && customStyle !== void 0 ? customStyle : style, highLightFields) ? panelStyles['label-over'] : ''
-  }, rest), children);
-}

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

@@ -1,23 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "field", "label", "highLightFields"];
-import React from 'react';
-import { useStyle, isModified } from "./StyleContext";
-import panelStyles from "../../style/style-panel.less";
-
-/**
- * 标签自动高亮SVG
- */
-export default function (_ref) {
-  var children = _ref.children,
-    field = _ref.field,
-    label = _ref.label,
-    highLightFields = _ref.highLightFields,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var style = useStyle();
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    className: isModified(style, [field]) ? panelStyles['label-over'] : '',
-    fill: "currentColor",
-    preserveAspectRatio: "xMidYMid meet"
-  }, rest), children);
-}

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

@@ -1,96 +0,0 @@
-import React, { useRef, useEffect, useCallback } from 'react';
-import { formatMessage } from '@luck-design-biz/base/utils';
-import { Button } from 'luck-design/antd';
-import Collapse from "../../components/Collapse";
-import PopConfirm from "../../components/PopConfirm";
-import CssEditor from "../../components/code-editor/CssEditor";
-import FullScreenEditor from "../../components/code-editor/FullScreenEditor";
-import styles from "../../style/style-panel.less";
-import { useStyle, useStyleDispatch, useEditor, styleToCSS } from "./StyleContext";
-import WidthHeight from "./WidthHeight";
-import Display from "./Display";
-import Margin from "./Margin";
-import Padding from "./Padding";
-import Font from "./Font";
-import BackGround from "./BackGround";
-import Border from "./Border";
-import BorderRadius from "./BorderRadius";
-import Shadow from "./Shadow";
-import Opacity from "./Opacity";
-import Pointer from "./Pointer";
-
-/**
- * 主样式面板
- */
-var MainPanel = function MainPanel() {
-  var style = useStyle();
-  var dispatch = useStyleDispatch();
-  var editorRef = useEditor();
-  var currentCoce = useRef();
-  useEffect(function () {
-    if (style) {
-      currentCoce.current = styleToCSS(style);
-    }
-  }, [style]);
-  var handleCodeChange = useCallback(function (code) {
-    dispatch({
-      type: 'code',
-      payload: code
-    });
-  }, []);
-  var handleEditorLoad = useCallback(function () {
-    editorRef.current.editor.setValue(currentCoce.current);
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles['lc-painter-panel-section-style-panel']
-  }, /*#__PURE__*/React.createElement(Collapse, {
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.group-name',
-      label: '样式设置'
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles['style-editor']
-  }, /*#__PURE__*/React.createElement(PopConfirm, {
-    placement: "bottomRight",
-    title: /*#__PURE__*/React.createElement(FullScreenEditor, {
-      ref: editorRef,
-      EditorComponent: CssEditor,
-      width: "280px",
-      height: "300px",
-      onChange: handleCodeChange,
-      onLoad: handleEditorLoad
-    })
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
-    size: "small"
-  }, formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
-    label: '源码编辑'
-  })))), /*#__PURE__*/React.createElement(WidthHeight, {
-    field: "width",
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.width',
-      label: '宽'
-    }),
-    placeholder: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.width',
-      label: '请输入宽度'
-    })
-  }), /*#__PURE__*/React.createElement(WidthHeight, {
-    field: "height",
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.width',
-      label: '高'
-    }),
-    placeholder: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.width',
-      label: '请输入宽高度'
-    })
-  }), /*#__PURE__*/React.createElement(Display, {
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.display',
-      label: '显示'
-    })
-  }), /*#__PURE__*/React.createElement(Margin, null), /*#__PURE__*/React.createElement(Padding, null), /*#__PURE__*/React.createElement(Font, null), /*#__PURE__*/React.createElement(BackGround, null), /*#__PURE__*/React.createElement(Border, null), /*#__PURE__*/React.createElement(BorderRadius, null), /*#__PURE__*/React.createElement(Shadow, null), /*#__PURE__*/React.createElement(Opacity, null), /*#__PURE__*/React.createElement(Pointer, null)));
-};
-export default MainPanel;

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

@@ -1,60 +0,0 @@
-import React from 'react';
-import { formatMessage } from '@luck-design-biz/base/utils';
-import GapSelector from "./GapSelector";
-import { useStyle } from "./StyleContext";
-import HighLightPanel from "./HighLightPanel";
-var textRelatedStyles = ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'];
-var field = 'margin';
-export default function () {
-  return /*#__PURE__*/React.createElement(HighLightPanel, {
-    label: "Margin",
-    highLightFields: textRelatedStyles,
-    addon: /*#__PURE__*/React.createElement(MarginGroup, null)
-  }, /*#__PURE__*/React.createElement(GapSelector, {
-    field: field
-  }));
-}
-
-/**
- * 边距样式设置组件
- */
-var MarginGroup = function MarginGroup() {
-  var style = useStyle();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HighLightPanel, {
-    suppressPadding: true,
-    highLightFields: ['margin-top'],
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.margin.top',
-      label: '上间距'
-    })
-  }, /*#__PURE__*/React.createElement(GapSelector, {
-    field: "margin-top"
-  })), /*#__PURE__*/React.createElement(HighLightPanel, {
-    highLightFields: ['margin-right'],
-    suppressPadding: true,
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.margin.right',
-      label: '右间距'
-    })
-  }, /*#__PURE__*/React.createElement(GapSelector, {
-    field: "margin-right"
-  })), /*#__PURE__*/React.createElement(HighLightPanel, {
-    highLightFields: ['margin-bottom'],
-    suppressPadding: true,
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.margin.down',
-      label: '下间距'
-    })
-  }, /*#__PURE__*/React.createElement(GapSelector, {
-    field: "margin-bottom"
-  })), /*#__PURE__*/React.createElement(HighLightPanel, {
-    highLightFields: ['margin-left'],
-    suppressPadding: true,
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.margin.left',
-      label: '左间距'
-    })
-  }, /*#__PURE__*/React.createElement(GapSelector, {
-    field: "margin-left"
-  })));
-};

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

@@ -1,50 +0,0 @@
-import React from 'react';
-import { formatMessage } from '@luck-design-biz/base/utils';
-import { useStyle, useStyleDispatch, isModified } from "./StyleContext";
-import Size from "./Size";
-import { isNil } from 'lodash';
-import HighLightPanel from "./HighLightPanel";
-var field = 'opacity';
-
-/**
- * 透明度设置组件
- */
-export default function () {
-  var style = useStyle();
-  var dispatch = useStyleDispatch();
-  var opacityValue = null;
-  if (style[field]) {
-    opacityValue = parseFloat(style[field]) * 100;
-  }
-  var handleChange = function handleChange(value) {
-    if (!isNil(value)) value = parseFloat(value) / 100;
-    dispatch({
-      type: 'edit',
-      payload: {
-        id: field,
-        value: value
-      }
-    });
-  };
-  return /*#__PURE__*/React.createElement(HighLightPanel, {
-    highLightFields: [field],
-    label: formatMessage({
-      id: "luckda.lowcode.painter.panel-section.style-panel.opacity",
-      label: '透明度'
-    })
-  }, /*#__PURE__*/React.createElement(Size, {
-    customValue: opacityValue,
-    customOption: sizeOptions,
-    onChange: handleChange,
-    placeholder: formatMessage({
-      id: "luckda.lowcode.painter.panel-section.style-panel.opacity.ph",
-      label: '透明度'
-    }),
-    min: 0,
-    max: 100
-  }));
-}
-var sizeOptions = [{
-  label: '%',
-  value: '%'
-}];

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

@@ -1,61 +0,0 @@
-import React from 'react';
-import { formatMessage } from '@luck-design-biz/base/utils';
-import GapSelector from "./GapSelector";
-import { useStyle, isModified } from "./StyleContext";
-import HighLightPanel from "./HighLightPanel";
-var textRelatedStyles = ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'];
-var field = 'padding';
-
-/**
- * 间距样式设置组件
- */
-export default function () {
-  var style = useStyle();
-  return /*#__PURE__*/React.createElement(HighLightPanel, {
-    label: "Padding",
-    highLightFields: textRelatedStyles,
-    addon: /*#__PURE__*/React.createElement(MarginGroup, null)
-  }, /*#__PURE__*/React.createElement(GapSelector, {
-    field: field
-  }));
-}
-var MarginGroup = function MarginGroup() {
-  var style = useStyle();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HighLightPanel, {
-    highLightFields: ['padding-top'],
-    suppressPadding: true,
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.padding.top',
-      label: '上边距'
-    })
-  }, /*#__PURE__*/React.createElement(GapSelector, {
-    field: "padding-top"
-  })), /*#__PURE__*/React.createElement(HighLightPanel, {
-    highLightFields: ['padding-right'],
-    suppressPadding: true,
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.padding.right',
-      label: '右边距'
-    })
-  }, /*#__PURE__*/React.createElement(GapSelector, {
-    field: "padding-right"
-  })), /*#__PURE__*/React.createElement(HighLightPanel, {
-    highLightFields: ['padding-bottom'],
-    suppressPadding: true,
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.padding.down',
-      label: '下边距'
-    })
-  }, /*#__PURE__*/React.createElement(GapSelector, {
-    field: "padding-bottom"
-  })), /*#__PURE__*/React.createElement(HighLightPanel, {
-    highLightFields: ['padding-left'],
-    suppressPadding: true,
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.padding.left',
-      label: '左边距'
-    })
-  }, /*#__PURE__*/React.createElement(GapSelector, {
-    field: "padding-left"
-  })));
-};

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

@@ -1,41 +0,0 @@
-import React from 'react';
-import { formatMessage } from '@luck-design-biz/base/utils';
-import { useStyle, useStyleDispatch, isModified } from "./StyleContext";
-import { Select } from 'luck-design/antd';
-import HighLightPanel from "./HighLightPanel";
-var Option = Select.Option;
-var field = 'cursor';
-/**
- * 指针样式设置组件
- */
-export default function () {
-  var _style$field;
-  var style = useStyle();
-  var dispatch = useStyleDispatch();
-  var handleChange = function handleChange(value) {
-    dispatch({
-      type: 'edit',
-      payload: {
-        id: field,
-        value: value
-      }
-    });
-  };
-  return /*#__PURE__*/React.createElement(HighLightPanel, {
-    highLightFields: [field],
-    label: formatMessage({
-      id: "luckda.lowcode.painter.panel-section.style-panel.cursor",
-      label: '鼠标手势'
-    })
-  }, /*#__PURE__*/React.createElement(Select, {
-    size: "small",
-    onChange: handleChange,
-    value: (_style$field = style[field]) !== null && _style$field !== void 0 ? _style$field : ''
-  }, /*#__PURE__*/React.createElement(Option, {
-    value: ""
-  }, "none"), /*#__PURE__*/React.createElement(Option, {
-    value: "default"
-  }, "default"), /*#__PURE__*/React.createElement(Option, {
-    value: "pointer"
-  }, "pointer")));
-}

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

@@ -1,216 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState } from 'react';
-import { useStyle, useStyleDispatch, isModified } from "./StyleContext";
-import { formatMessage } from '@luck-design-biz/base/utils';
-import { Select } from 'luck-design/antd';
-import ColorInput from "../../components/ColorInput";
-import Size from "./Size";
-import HighLightPanel from "./HighLightPanel";
-var Option = Select.Option;
-var field = 'box-shadow';
-var textRelatedStyles = [field];
-var presetsShadowStyle = [{
-  id: 'big',
-  value: 'rgba(31, 56, 88, 0.2) 4px 4px 15px 0px'
-}, {
-  id: 'middle',
-  value: 'rgba(31, 56, 88, 0.2) 2px 2px 10px 0px'
-}, {
-  id: 'small',
-  value: 'rgba(31, 56, 88, 0.2) 1px 1px 4px 0px'
-}];
-
-/**
- * 阴影样式设置组件
- */
-export default function () {
-  var style = useStyle();
-  var dispatch = useStyleDispatch();
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    collapsed = _useState2[0],
-    setCollapsed = _useState2[1];
-  var boxShadow = style[field];
-  var handleChange = function handleChange(value) {
-    if (value) {
-      if (value == 'custom') {
-        setCollapsed(false);
-        value = 'rgba(31, 56, 88, 0.2) 0px 0px 0px 0px';
-      } else {
-        var matchPreset = presetsShadowStyle.find(function (preset) {
-          return preset.id === value;
-        });
-        if (matchPreset) {
-          value = matchPreset.value;
-        }
-      }
-    }
-    dispatch({
-      type: 'edit',
-      payload: {
-        id: field,
-        value: value
-      }
-    });
-  };
-  var selectValue = null;
-  if (boxShadow) {
-    var matchingPreset = presetsShadowStyle.find(function (preset) {
-      return preset.value === boxShadow;
-    });
-    // 如果找到匹配项，使用其 id，否则设置为 "custom"
-    selectValue = matchingPreset ? matchingPreset.id : 'custom';
-  }
-  return /*#__PURE__*/React.createElement(HighLightPanel, {
-    highLightFields: textRelatedStyles,
-    addon: /*#__PURE__*/React.createElement(ShowdowDetail, null),
-    collapsed: collapsed,
-    label: formatMessage({
-      id: "luckda.lowcode.painter.panel-section.style-panel.box-shadow",
-      label: '阴影'
-    })
-  }, /*#__PURE__*/React.createElement(Select, {
-    size: "small",
-    onChange: handleChange,
-    value: selectValue
-  }, /*#__PURE__*/React.createElement(Option, {
-    value: "big"
-  }, formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.style-panel.box-shadow.big',
-    label: '大'
-  })), /*#__PURE__*/React.createElement(Option, {
-    value: "middle"
-  }, formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.style-panel.box-shadow.middle',
-    label: '中'
-  })), /*#__PURE__*/React.createElement(Option, {
-    value: "small"
-  }, formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.style-panel.box-shadow.small',
-    label: '小'
-  })), /*#__PURE__*/React.createElement(Option, {
-    value: null
-  }, formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.style-panel.box-shadow.none',
-    label: '无'
-  })), /*#__PURE__*/React.createElement(Option, {
-    value: "custom"
-  }, formatMessage({
-    id: 'luckda.lowcode.painter.panel-section.style-panel.box-shadow.custom',
-    label: '自定义'
-  }))));
-}
-var ShowdowDetail = function ShowdowDetail() {
-  var style = useStyle();
-  var dispatch = useStyleDispatch();
-  var boxShadow = style[field];
-  var shadowStyle = parseBoxShadow(boxShadow);
-  var handleChange = function handleChange(shadowField, value) {
-    shadowStyle[shadowField] = value;
-    var shadowValue = composeBoxShadow(shadowStyle);
-    dispatch({
-      type: 'edit',
-      payload: {
-        id: field,
-        value: shadowValue
-      }
-    });
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HighLightPanel, {
-    customStyle: shadowStyle,
-    highLightFields: ['color'],
-    suppressPadding: true,
-    label: formatMessage({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.box-shadow.detail.color',
-      label: '颜色'
-    })
-  }, /*#__PURE__*/React.createElement(ColorInput, {
-    value: shadowStyle['color'],
-    onChange: function onChange(value) {
-      return handleChange('color', value);
-    }
-  })), /*#__PURE__*/React.createElement(HighLightPanel, {
-    customStyle: shadowStyle,
-    highLightFields: ['offsetX'],
-    suppressPadding: true,
-    label: "X"
-  }, /*#__PURE__*/React.createElement(Size, {
-    customValue: shadowStyle['offsetX'],
-    onChange: function onChange(value) {
-      return handleChange('offsetX', value);
-    }
-  })), /*#__PURE__*/React.createElement(HighLightPanel, {
-    customStyle: shadowStyle,
-    highLightFields: ['offsetY'],
-    suppressPadding: true,
-    label: 'Y'
-  }, /*#__PURE__*/React.createElement(Size, {
-    customValue: shadowStyle['offsetY'],
-    onChange: function onChange(value) {
-      return handleChange('offsetY', value);
-    }
-  })), /*#__PURE__*/React.createElement(HighLightPanel, {
-    customStyle: shadowStyle,
-    highLightFields: ['blurRadius'],
-    suppressPadding: true,
-    label: 'Blur'
-  }, /*#__PURE__*/React.createElement(Size, {
-    customValue: shadowStyle['blurRadius'],
-    onChange: function onChange(value) {
-      return handleChange('blurRadius', value);
-    }
-  })), /*#__PURE__*/React.createElement(HighLightPanel, {
-    customStyle: shadowStyle,
-    highLightFields: ['spreadRadius'],
-    suppressPadding: true,
-    label: 'Spread'
-  }, /*#__PURE__*/React.createElement(Size, {
-    customValue: shadowStyle['spreadRadius'],
-    onChange: function onChange(value) {
-      return handleChange('spreadRadius', value);
-    }
-  })));
-};
-function parseBoxShadow(shadowString) {
-  // 检查输入字符串是否为空或仅包含空白字符
-  if (!shadowString) {
-    return {}; // 或者返回一个空对象或默认值
-  }
-
-  // 移除 "box-shadow:" 前缀和尾部的分号（如果有），然后去除两端空格
-  shadowString = shadowString.replace(/^box-shadow:\s*/, '').replace(/;$/, '').trim();
-
-  // 使用正则表达式匹配 RGBA 颜色值
-  var rgbaMatch = shadowString.match(/rgba?\([^)]+\)/);
-  var color = rgbaMatch ? rgbaMatch[0] : 'No color found';
-
-  // 移除颜色值，剩余部分再进行拆分
-  var shadowParts = shadowString.replace(color, '').trim().split(/\s+/);
-
-  // 验证拆分后的部分是否符合预期的数量
-  if (shadowParts.length < 4) {
-    console.error('Invalid box-shadow format.');
-    return {}; // 或者返回一个空对象或默认值
-  }
-
-  // 解析并填充对象
-  var shadowObject = {
-    color: color,
-    offsetX: shadowParts[0],
-    offsetY: shadowParts[1],
-    blurRadius: shadowParts[2],
-    spreadRadius: shadowParts[3]
-  };
-  return shadowObject;
-}
-function composeBoxShadow(shadowObject) {
-  // 从对象中提取各个属性值
-  var color = shadowObject.color,
-    offsetX = shadowObject.offsetX,
-    offsetY = shadowObject.offsetY,
-    blurRadius = shadowObject.blurRadius,
-    spreadRadius = shadowObject.spreadRadius;
-
-  // 组合属性值形成 box-shadow 字符串
-  return "".concat(color, " ").concat(offsetX !== null && offsetX !== void 0 ? offsetX : 0, " ").concat(offsetY !== null && offsetY !== void 0 ? offsetY : 0, " ").concat(blurRadius !== null && blurRadius !== void 0 ? blurRadius : 0, " ").concat(spreadRadius !== null && spreadRadius !== void 0 ? spreadRadius : 0);
-}