@luck-design-biz/luckda 0.0.22 → 0.0.23

package/lib/lowcode/painter/components/RuleInput.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("luck-design/antd");
+var _ruleInput = _interopRequireDefault(require("../style/rule-input.less"));
+var _excluded = ["onValueChange", "rules", "value"];
+/**
+ * 带校验功能的输入组件。
+ *
+ * 此组件封装了antd的Input组件，并增加了输入值的校验功能。它允许开发者定义一组校验规则，
+ * 以确保用户输入符合特定要求。每条规则由一个校验函数和一个错误信息组成。如果用户的输入
+ * 不满足任何一条规则，将展示相应的错误信息提示。
+ *
+ * @component
+ * @example
+ * <RuleInput
+ *   value="示例值"
+ *   onValueChange={(e, newValue) => console.log('新值:', newValue)}
+ *   rules={[
+ *     { func: value => !!value, err: '输入不能为空' },
+ *     { func: value => /^\d+$/.test(value), err: '只允许输入数字' }
+ *   ]}
+ * />
+ *
+ * @param {Object} props 组件接收的props
+ * @param {string} props.value 输入框当前的值，可以由外部控制以实现受控组件。
+ * @param {Function} props.onValueChange 当输入值改变并通过所有校验时，触发的回调函数。
+ * 该函数接收原生的事件对象和新的输入值作为参数。
+ * @param {Array<{func: (value: string) => boolean, err: string}>} props.rules
+ * 定义输入校验规则的数组。每个元素是一个对象，其中`func`属性是一个函数，用于执行校验逻辑，
+ * 接收当前输入值作为参数，返回一个布尔值表示校验是否通过；`err`属性是一个字符串，指定当
+ * 校验失败时要显示的错误信息。
+ * @param {Object} rest 传递给内部Input组件的其他props，如`placeholder`、`disabled`等。
+ * @param {React.Ref} ref React ref对象，用于将ref传递给内部的Input DOM元素。
+ *
+ * @returns React元素，渲染一个带有校验功能的输入框和校验失败时的错误信息提示。
+ */
+var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var onValueChange = _ref.onValueChange,
+    rules = _ref.rules,
+    value = _ref.value,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(value),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1]; // 托管输入值的状态
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    err = _useState4[0],
+    setErr = _useState4[1];
+
+  // 使用useEffect钩子监听value的变化
+  (0, _react.useEffect)(function () {
+    setInputValue(value);
+    setErr(null);
+  }, [value]);
+  var handleInputChange = function handleInputChange(e) {
+    var value = e.target.value;
+    setInputValue(value); // 更新托管的输入值
+
+    if (value == '') onValueChange(e, value);
+    var error = null;
+
+    // 遍历rules，检查输入值是否满足条件
+    var _iterator = (0, _createForOfIteratorHelper2.default)(rules),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var rule = _step.value;
+        if (!rule.func(value)) {
+          error = rule.err;
+          break;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    if (!error) {
+      setErr(null);
+      onValueChange(e, value);
+    } else {
+      setErr(error);
+      console.log('err', error);
+    }
+  };
+  var className = _ruleInput.default['lc-painter-components-ruleinput'];
+  if (err) className += ' ' + _ruleInput.default['err'];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    title: err,
+    visible: err
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, (0, _extends2.default)({
+    className: className,
+    size: "small",
+    value: inputValue // 绑定输入值
+    ,
+    onChange: handleInputChange
+  }, rest, {
+    ref: ref
+  }))));
+});

package/lib/lowcode/painter/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _EventBusProvider = _interopRequireDefault(require("../engine/provider/EventBusProvider"));
+var _ContextProvider = _interopRequireDefault(require("../engine/provider/ContextProvider"));
+var _Ribbon = _interopRequireDefault(require("./Ribbon"));
+var _Design = _interopRequireDefault(require("./Design"));
+var _Panel = _interopRequireDefault(require("./Panel"));
+var _index = require("../constants/index");
+var _index2 = _interopRequireDefault(require("./style/index.less"));
+var Painter = function Painter(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/_react.default.createElement(_EventBusProvider.default, {
+    runtime: _index.RUNTIME.DESIGN
+  }, /*#__PURE__*/_react.default.createElement(_ContextProvider.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_index2.default['lc-painter'], (0, _defineProperty2.default)({}, className, !!className))
+  }, /*#__PURE__*/_react.default.createElement(_Ribbon.default, null), /*#__PURE__*/_react.default.createElement(_Design.default, null), /*#__PURE__*/_react.default.createElement(_Panel.default, null))));
+};
+var _default = exports.default = Painter;

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

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _layoutRatio = _interopRequireDefault(require("../style/layout-ratio.less"));
+var _utils = require("@luck-design-biz/base/utils");
+var _RuleInput = _interopRequireDefault(require("../components/RuleInput"));
+var _PanelItem = _interopRequireDefault(require("../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';
+
+/**
+ * 布局比例组件
+ * 
+ * @param {string} value 默认值
+ * @param {Function} onChange 当合法数据变化时触发
+ * @returns 
+ */
+var LayoutRatio = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(value || defaultRatio),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentRatio = _useState2[0],
+    setCurrentRatio = _useState2[1];
+  var handleInputChange = function handleInputChange(_, value) {
+    console.log('value', value);
+    if (!value) value = defaultRatio;
+    setCurrentRatio(value);
+  };
+  var handGridClick = function handGridClick(selectedRadio) {
+    // console.log('selectedRadio', selectedRadio);
+    setCurrentRatio(selectedRadio);
+    if (onChange) onChange(selectedRadio);
+  };
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      getValue: function getValue() {
+        return currentRatio;
+      }
+    };
+  });
+
+  // 定义验证规则
+  var rules = [{
+    func: function func(value) {
+      // 首先，检查value是否为字符串
+      if (typeof value !== 'string') return false;
+
+      // 使用正则表达式检查字符串是否只包含数字和冒号，并且不以冒号开始或结束
+      if (!/^[0-9]+(:[0-9]+)*$/.test(value)) return false;
+
+      // 使用冒号分割字符串，并将分割后的每个元素转换为数字
+      var numbers = value.split(':').map(Number);
+
+      // 计算所有数字的总和
+      var sum = numbers.reduce(function (acc, cur) {
+        return acc + cur;
+      }, 0);
+
+      // 判断总和是否等于12
+      return sum === 12;
+    },
+    err: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.err',
+      label: '必须是数字或者数字加:号的组合，且数字之和必须等于12'
+    })
+  }];
+  var isCurrentInRatios = ratios.includes(currentRatio);
+  var currentItemRatios = currentRatio.split(':');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['lc-painter-panel-section-layoutratio']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['ratio-view']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['gridbox-container']
+  }, ratios.map(function (ratio) {
+    var itemRatios = ratio.split(':');
+    var isCurrent = ratio == currentRatio;
+    var className = _layoutRatio.default['gridbox'];
+    if (isCurrent) className = className + ' ' + _layoutRatio.default['current'];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className,
+      onClick: function onClick() {
+        return handGridClick(ratio);
+      }
+    }, itemRatios.map(function (itemRatio) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: _layoutRatio.default['girditem'],
+        style: {
+          gridColumn: 'span ' + itemRatio
+        }
+      });
+    }));
+  }), !isCurrentInRatios && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_layoutRatio.default['gridbox'], " ").concat(_layoutRatio.default['current']),
+    onClick: function onClick() {
+      return handGridClick(ratio);
+    }
+  }, currentItemRatios.map(function (itemRatio) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _layoutRatio.default['girditem'],
+      style: {
+        gridColumn: 'span ' + itemRatio
+      }
+    });
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _layoutRatio.default['ratio-input']
+  }, /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
+    label: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.panel-section.Layoutratio.label',
+      label: '列比例'
+    }),
+    component: /*#__PURE__*/_react.default.createElement(_RuleInput.default, {
+      placeholder: (0, _utils.formatMessage)({
+        id: 'luckda.lowcode.painter.panel-section.Layoutratio.placeholder',
+        label: '请输入列比例'
+      }),
+      rules: rules,
+      onValueChange: handleInputChange,
+      value: currentRatio
+    })
+  })));
+});
+var _default = exports.default = LayoutRatio;

package/lib/lowcode/painter/panel-section/Radio.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _radio = _interopRequireDefault(require("../style/radio.less"));
+/**
+ * Radio组件允许用户从一组选项中选择一个。它接收一个`options`数组来渲染选项，以及一个可选的`onChange`回调函数，
+ * 当用户选择不同的选项时，`onChange`会被调用并传递当前选中的选项对象。
+ * 
+ * @component
+ * @example
+ * const options = [
+ *   { label: '小', value: 'small' },
+ *   { label: '中', value: 'middle' },
+ *   { label: '大', value: 'large' }
+ * ];
+ * 
+ * function handleChange(option) {
+ *   console.log(option);
+ * }
+ * 
+ * <Radio options={options} onChange={handleChange} />
+ * 
+ * @param {Object} props - 组件的props。
+ * @param {Object[]} props.options - 选项数组，每个对象都应包含`label`和`value`。
+ * @param {string} props.options[].label - 选项的显示文本。
+ * @param {string} props.options[].value - 选项的值，应唯一。
+ * @param {Function} [props.onChange] - 可选，当选项变化时调用的回调函数。传递当前选中的选项对象。
+ */
+var Radio = function Radio(_ref) {
+  var _options$;
+  var options = _ref.options,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)((_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeValue = _useState2[0],
+    setActiveValue = _useState2[1];
+
+  // 点击事件处理函数
+  var handleClick = function handleClick(option) {
+    // 设置当前激活的选项
+    setActiveValue(option.value);
+    if (onChange) {
+      onChange(option);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _radio.default['lc-painter-panel-section-radio']
+  }, options.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: option.value,
+      className: "".concat(_radio.default['radio-item'], " ").concat(activeValue === option.value ? 'active' : ''),
+      onClick: function onClick() {
+        return handleClick(option);
+      }
+    }, option.label);
+  }));
+};
+var _default = exports.default = Radio;

package/lib/lowcode/painter/style/components.less

@@ -0,0 +1,90 @@
+.lc-painter-components {
+  .components-search {
+    padding: 0 20px;
+  }
+
+  .components-content {
+    border-top: 1px solid #e3e3e3;
+    margin-top: 20px;
+    padding-top: 10px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    .components-wrapper {
+      padding: 0 20px;
+      flex-basis: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: 20px;
+
+      h3 {
+        width: 100%; // 使标题占满整行
+        margin-left: 0;
+        margin-bottom: 10px;
+      }
+    }
+
+    .components-item {
+      display: flex;
+      width: 121px;
+      height: 37px;
+      align-items: center;
+      justify-content: center; // 水平居中对齐
+      padding: 10px;
+      border: 1px solid #ddd;
+      margin-right: 10px; // 添加右边距来分隔项
+      margin-bottom: 10px; // 添加底边距来分隔行
+      border-radius: 4px;
+      transition: border-color 0.3s;
+      box-sizing: border-box; // 确保边框和填充不会增加元素的宽度
+
+      &:hover {
+        cursor: pointer;
+        border-color: #3478ff;
+        color: #3478ff; // 文本颜色
+        .icon-wrapper {
+          color: #3478ff; // Icon颜色（如果Icon组件接受color属性）
+        }
+      }
+
+      .icon-wrapper {
+        display: flex;
+        font-size: 12px;
+        align-items: center;
+        margin-right: 10px;
+      }
+
+      .text-content {
+        flex-grow: 1;
+        text-align: left;
+
+        span {
+          font-size: 12px;
+          color: #333;
+          white-space: nowrap; // 防止文字换行
+          overflow: hidden; // 隐藏溢出的文字
+          text-overflow: ellipsis; // 使用省略号表示溢出
+        }
+
+        p {
+          display: none; // 隐藏描述，因为在这个组件尺寸中无法显示
+        }
+      }
+    }
+  }
+
+  :global{
+    .ant-tabs-nav-scroll{
+      display: flex;
+      justify-content: center;
+      .ant-tabs-tab{
+        font-size: 14px!important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+.box {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 0;
+  display: none;
+  pointer-events: none;
+  cursor: pointer;
+  overflow: visible;
+  z-index: 9999;
+}
+
+.lc-painter-design {
+  position: relative;
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+
+  .simulator {
+    :global {
+      .ant-form-item {
+        pointer-events: none;
+      }
+    }
+  }
+
+  .detector {
+    border: 1px dashed var(--ant-primary-color);
+    background-color: color-mix(in sRGB, var(--ant-primary-color), transparent 95%);
+    .box();
+  }
+
+  .selector {
+    border: 2px solid var(--ant-primary-6);
+    .box();
+  }
+}

package/lib/lowcode/painter/style/index.less

@@ -0,0 +1,7 @@
+.lc-painter {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  background-color: #fff;
+}

package/lib/lowcode/painter/style/layout-ratio.less

@@ -0,0 +1,51 @@
+.lc-painter-panel-section-layoutratio {
+  @gridbox-width: 66px; // 定义变量
+  @grid-gap: 10px; // 间隔变量
+  @grid-items-per-row: 4; // 每行的gridbox数量
+
+  margin: 0;
+  align-items: center;
+
+  .ratio-view {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+
+    .gridbox-container {
+      width: calc(@grid-items-per-row * @gridbox-width + (@grid-items-per-row - 1) * @grid-gap);
+      margin: 0 auto; // 保持这个居中
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: @grid-gap;
+    }
+
+    .gridbox {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 2px;
+      width: @gridbox-width;
+      height: 34px;
+      border-radius: 5px;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      padding: 3px;
+
+      &:hover {
+        cursor: pointer;
+        border-color: #3478ff;
+      }
+
+      &.current {
+        border-color: #3478ff;
+      }
+
+      .girditem {
+        background-color: rgb(192, 194, 196);
+      }
+    }
+  }
+
+  .ratio-input {
+    margin-top: 20px;
+  }
+}

package/lib/lowcode/painter/style/outline.less

@@ -0,0 +1,26 @@
+.lc-painter-outline {
+  .page-node {
+    cursor: pointer;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    height: 32px;
+    box-sizing: border-box;
+    position: relative;
+    transform: translateZ(0);
+    padding: 0 5px;
+  }
+  .page-node:hover,
+  .page-node.page-node-active {
+    background-color: #f6f7f8;
+  }
+
+  :global {
+    .ant-tree.ant-tree-show-line li:not(:last-child)::before {
+      height: calc(100% - 34px);
+    }
+    .ant-tree-switcher-noop svg {
+      display: none;
+    }
+  }
+}

package/lib/lowcode/painter/style/panel-item.less

@@ -0,0 +1,21 @@
+.lc-painter-components-panelitem {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  align-items: center;
+  min-height: 28px;
+
+  .item-label {
+    font-size: 12px;
+  }
+
+  .item-component {
+    display: flex;
+    width: 215px;
+  }
+
+  /* 使.item-component-box的直接子元素铺满 */
+  .item-component > * {
+    flex-grow: 1;
+  }
+}

package/lib/lowcode/painter/style/panel.less

@@ -0,0 +1,5 @@
+.lc-painter-panel {
+  width: 320px;
+  height: 100%;
+  border-left: 1px solid #e8e8e8;
+}

package/lib/lowcode/painter/style/radio.less

@@ -0,0 +1,24 @@
+.lc-painter-panel-section-radio {
+  background-color: #f1f2f3;
+  border-radius: 6px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+
+  .radio-item {
+    display: flex;
+    flex: 1;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    font-size: 12px;
+    margin: 2px;
+    border-radius: 6px;
+    cursor: pointer;
+
+    &.active{
+      background-color: #ffffff;
+    }
+  }
+}

package/lib/lowcode/painter/style/ribbon.less

@@ -0,0 +1,4 @@
+.lc-painter-ribbon {
+  border-right: 1px solid #e8e8e8;
+  font-size: 16px;
+}

package/lib/lowcode/painter/style/rule-input.less

@@ -0,0 +1,13 @@
+.lc-painter-components-ruleinput {
+  &.err, &.err:hover {
+    border-color: #ff4d4f;
+    color: red;
+  }
+  &.err:focus {
+    border-color: #ff4d4f;
+    border-right-width: 1px !important;
+    outline: 0;
+    -webkit-box-shadow: 0 0 0 2px rgba(245,34,45,.2);
+    box-shadow: 0 0 0 2px rgba(245,34,45,.2);
+  }
+}