@vxe-ui/plugin-render-element 3.0.0

package/dist/form/index.js

@@ -0,0 +1,411 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defineFormRender = defineFormRender;
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * 表单 - 渲染器
+ */
+function defineFormRender(VxeUI) {
+  function isEmptyValue(cellValue) {
+    return cellValue === null || cellValue === undefined || cellValue === '';
+  }
+  function getOnName(type) {
+    return type;
+  }
+  function getModelProp(renderOpts) {
+    return 'value';
+  }
+  function getModelEvent(renderOpts) {
+    return 'input';
+  }
+  function getChangeEvent(renderOpts) {
+    var type = 'change';
+    switch (renderOpts.name) {
+      case 'ElAutocomplete':
+        type = 'select';
+        break;
+      case 'ElInput':
+      case 'ElInputNumber':
+        type = 'input';
+        break;
+    }
+    return type;
+  }
+  function getItemProps(renderOpts, params, value, defaultProps) {
+    return _xeUtils["default"].assign({}, defaultProps, renderOpts.props, _defineProperty({}, getModelProp(renderOpts), value));
+  }
+  function formatText(cellValue) {
+    return '' + (isEmptyValue(cellValue) ? '' : cellValue);
+  }
+  function getOns(renderOpts, params, inputFunc, changeFunc) {
+    var events = renderOpts.events;
+    var modelEvent = getModelEvent(renderOpts);
+    var changeEvent = getChangeEvent(renderOpts);
+    var isSameEvent = changeEvent === modelEvent;
+    var ons = {};
+    _xeUtils["default"].objectEach(events, function (func, key) {
+      ons[getOnName(key)] = function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        func.apply(void 0, [params].concat(args));
+      };
+    });
+    if (inputFunc) {
+      ons[getOnName(modelEvent)] = function (targetEvnt) {
+        inputFunc(targetEvnt);
+        if (events && events[modelEvent]) {
+          events[modelEvent](params, targetEvnt);
+        }
+        if (isSameEvent && changeFunc) {
+          changeFunc(targetEvnt);
+        }
+      };
+    }
+    if (!isSameEvent && changeFunc) {
+      ons[getOnName(changeEvent)] = function () {
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        changeFunc.apply(void 0, args);
+        if (events && events[changeEvent]) {
+          events[changeEvent].apply(events, [params].concat(args));
+        }
+      };
+    }
+    return ons;
+  }
+  function getItemOns(renderOpts, params) {
+    var $form = params.$form,
+      data = params.data,
+      field = params.field;
+    return getOns(renderOpts, params, function (value) {
+      // 处理 model 值双向绑定
+      _xeUtils["default"].set(data, field, value);
+    }, function () {
+      // 处理 change 事件相关逻辑
+      $form.updateStatus(params);
+    });
+  }
+  function renderOptions(h, options, optionProps) {
+    var labelProp = optionProps.label || 'label';
+    var valueProp = optionProps.value || 'value';
+    return _xeUtils["default"].map(options, function (item, oIndex) {
+      return h('el-option', {
+        key: oIndex,
+        props: {
+          value: item[valueProp],
+          label: item[labelProp],
+          disabled: item.disabled
+        }
+      });
+    });
+  }
+  function cellText(cellValue) {
+    return [formatText(cellValue)];
+  }
+  function createFormItemRender(defaultProps) {
+    return function (h, renderOpts, params) {
+      var data = params.data,
+        field = params.field;
+      var name = renderOpts.name;
+      var attrs = renderOpts.attrs;
+      var itemValue = _xeUtils["default"].get(data, field);
+      return [h(name, {
+        attrs: attrs,
+        props: _objectSpread({}, getItemProps(renderOpts, params, itemValue, defaultProps)),
+        on: getItemOns(renderOpts, params)
+      })];
+    };
+  }
+  function defaultButtonItemRender(h, renderOpts, params) {
+    var attrs = renderOpts.attrs;
+    var props = getItemProps(renderOpts, params, null);
+    return [h('el-button', {
+      attrs: attrs,
+      props: _objectSpread({}, props),
+      on: getOns(renderOpts, params),
+      scopedSlots: {
+        "default": function _default() {
+          return cellText(renderOpts.content || props.content);
+        }
+      }
+    })];
+  }
+  function defaultButtonsItemRender(h, renderOpts, params) {
+    var children = renderOpts.children;
+    if (children) {
+      return children.map(function (childRenderOpts) {
+        return defaultButtonItemRender(h, childRenderOpts, params)[0];
+      });
+    }
+    return [];
+  }
+  /**
+   * 已废弃
+   * @deprecated
+   */
+  function createOldFormItemRadioAndCheckboxRender() {
+    return function (h, renderOpts, params) {
+      var name = renderOpts.name,
+        _renderOpts$options = renderOpts.options,
+        options = _renderOpts$options === void 0 ? [] : _renderOpts$options,
+        _renderOpts$optionPro = renderOpts.optionProps,
+        optionProps = _renderOpts$optionPro === void 0 ? {} : _renderOpts$optionPro,
+        attrs = renderOpts.attrs;
+      var data = params.data,
+        field = params.field;
+      var labelProp = optionProps.label || 'label';
+      var valueProp = optionProps.value || 'value';
+      var itemValue = _xeUtils["default"].get(data, field);
+      return [h("".concat(name, "Group"), {
+        attrs: attrs,
+        props: _objectSpread({}, getItemProps(renderOpts, params, itemValue)),
+        on: getItemOns(renderOpts, params),
+        scopedSlots: {
+          "default": function _default() {
+            return options.map(function (option, oIndex) {
+              return h(name, {
+                key: oIndex,
+                props: {
+                  label: option[valueProp],
+                  disabled: option.disabled
+                },
+                scopedSlots: {
+                  "default": function _default() {
+                    return cellText(option[labelProp]);
+                  }
+                }
+              });
+            });
+          }
+        }
+      })];
+    };
+  }
+  /**
+  * 检查触发源是否属于目标节点
+  */
+  function getEventTargetNode(evnt, container, className) {
+    var targetElem;
+    var target = evnt.target;
+    while (target && target.nodeType && target !== document) {
+      if (className && target.className && target.className.split && target.className.split(' ').indexOf(className) > -1) {
+        targetElem = target;
+      } else if (target === container) {
+        return {
+          flag: className ? !!targetElem : true,
+          container: container,
+          targetElem: targetElem
+        };
+      }
+      target = target.parentNode;
+    }
+    return {
+      flag: false
+    };
+  }
+  /**
+  * 事件兼容性处理
+  */
+  function handleClearEvent(params) {
+    var $event = params.$event;
+    var bodyElem = document.body;
+    if (
+    // 远程搜索
+    getEventTargetNode($event, bodyElem, 'el-autocomplete-suggestion').flag ||
+    // 下拉框
+    getEventTargetNode($event, bodyElem, 'el-select-dropdown').flag ||
+    // 级联
+    getEventTargetNode($event, bodyElem, 'el-cascader__dropdown').flag || getEventTargetNode($event, bodyElem, 'el-cascader-menus').flag ||
+    // 日期
+    getEventTargetNode($event, bodyElem, 'el-time-panel').flag || getEventTargetNode($event, bodyElem, 'el-picker-panel').flag ||
+    // 颜色
+    getEventTargetNode($event, bodyElem, 'el-color-dropdown').flag) {
+      return false;
+    }
+  }
+  VxeUI.renderer.mixin({
+    ElAutocomplete: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElInput: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElInputNumber: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElSelect: {
+      renderFormItemContent: function renderFormItemContent(h, renderOpts, params) {
+        var _renderOpts$options2 = renderOpts.options,
+          options = _renderOpts$options2 === void 0 ? [] : _renderOpts$options2,
+          optionGroups = renderOpts.optionGroups,
+          _renderOpts$optionPro2 = renderOpts.optionProps,
+          optionProps = _renderOpts$optionPro2 === void 0 ? {} : _renderOpts$optionPro2,
+          _renderOpts$optionGro = renderOpts.optionGroupProps,
+          optionGroupProps = _renderOpts$optionGro === void 0 ? {} : _renderOpts$optionGro;
+        var data = params.data,
+          field = params.field;
+        var attrs = renderOpts.attrs;
+        var itemValue = _xeUtils["default"].get(data, field);
+        var props = getItemProps(renderOpts, params, itemValue);
+        var ons = getItemOns(renderOpts, params);
+        if (optionGroups) {
+          var groupOptions = optionGroupProps.options || 'options';
+          var groupLabel = optionGroupProps.label || 'label';
+          return [h('el-select', {
+            attrs: attrs,
+            props: _objectSpread({}, props),
+            on: ons,
+            scopedSlots: {
+              "default": function _default() {
+                return _xeUtils["default"].map(optionGroups, function (group, gIndex) {
+                  return h('el-option-group', {
+                    key: gIndex,
+                    props: {
+                      label: group[groupLabel]
+                    },
+                    scopedSlots: {
+                      "default": function _default() {
+                        return renderOptions(h, group[groupOptions], optionProps);
+                      }
+                    }
+                  });
+                });
+              }
+            }
+          })];
+        }
+        return [h('el-select', {
+          attrs: attrs,
+          props: _objectSpread({}, props),
+          on: ons,
+          scopedSlots: {
+            "default": function _default() {
+              return renderOptions(h, options, optionProps);
+            }
+          }
+        })];
+      }
+    },
+    ElCascader: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElDatePicker: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElTimePicker: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElTimeSelect: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElRate: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElSwitch: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElSlider: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ElRadioGroup: {
+      renderFormItemContent: function renderFormItemContent(h, renderOpts, params) {
+        var _renderOpts$options3 = renderOpts.options,
+          options = _renderOpts$options3 === void 0 ? [] : _renderOpts$options3,
+          _renderOpts$optionPro3 = renderOpts.optionProps,
+          optionProps = _renderOpts$optionPro3 === void 0 ? {} : _renderOpts$optionPro3,
+          attrs = renderOpts.attrs;
+        var data = params.data,
+          field = params.field;
+        var labelProp = optionProps.label || 'label';
+        var valueProp = optionProps.value || 'value';
+        var itemValue = _xeUtils["default"].get(data, field);
+        return [h('el-radio-group', {
+          attrs: attrs,
+          props: _objectSpread({}, getItemProps(renderOpts, params, itemValue)),
+          on: _objectSpread({}, getItemOns(renderOpts, params)),
+          scopedSlots: {
+            "default": function _default() {
+              return options.map(function (option, oIndex) {
+                return h('el-radio', {
+                  key: oIndex,
+                  props: {
+                    value: option[valueProp],
+                    disabled: option.disabled
+                  },
+                  scopedSlots: {
+                    "default": function _default() {
+                      return cellText(option[labelProp]);
+                    }
+                  }
+                });
+              });
+            }
+          }
+        })];
+      }
+    },
+    ElCheckboxGroup: {
+      renderFormItemContent: function renderFormItemContent(h, renderOpts, params) {
+        var _renderOpts$options4 = renderOpts.options,
+          options = _renderOpts$options4 === void 0 ? [] : _renderOpts$options4,
+          _renderOpts$optionPro4 = renderOpts.optionProps,
+          optionProps = _renderOpts$optionPro4 === void 0 ? {} : _renderOpts$optionPro4,
+          attrs = renderOpts.attrs;
+        var data = params.data,
+          field = params.field;
+        var labelProp = optionProps.label || 'label';
+        var valueProp = optionProps.value || 'value';
+        var itemValue = _xeUtils["default"].get(data, field);
+        return [h('el-checkbox-group', {
+          attrs: attrs,
+          props: _objectSpread({}, getItemProps(renderOpts, params, itemValue)),
+          on: _objectSpread({}, getItemOns(renderOpts, params)),
+          scopedSlots: {
+            "default": function _default() {
+              return options.map(function (option, oIndex) {
+                return h('el-checkbox', {
+                  key: oIndex,
+                  props: {
+                    value: option[valueProp],
+                    label: option[labelProp],
+                    disabled: option.disabled
+                  }
+                });
+              });
+            }
+          }
+        })];
+      }
+    },
+    ElButton: {
+      renderFormItemContent: defaultButtonItemRender
+    },
+    // 已废弃
+    ElRadio: {
+      renderFormItemContent: createOldFormItemRadioAndCheckboxRender()
+    },
+    ElCheckbox: {
+      renderFormItemContent: createOldFormItemRadioAndCheckboxRender()
+    },
+    ElButtons: {
+      renderFormItemContent: defaultButtonsItemRender
+    }
+  });
+  VxeUI.interceptor.add('event.clearFilter', handleClearEvent);
+  VxeUI.interceptor.add('event.clearEdit', handleClearEvent);
+  VxeUI.interceptor.add('event.clearAreas', handleClearEvent);
+  // 兼容老版本
+  VxeUI.interceptor.add('event.clearActived', handleClearEvent);
+}

package/dist/index.common.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.VxeUIPluginRenderElement = void 0;
+var _table = require("./table");
+var _form = require("./form");
+// eslint-disable-next-line no-unused-vars
+var ElementPlus;
+/**
+ * 检查触发源是否属于目标节点
+ */
+function getEventTargetNode(evnt, container, className) {
+  var targetElem;
+  var target = evnt.target;
+  while (target && target.nodeType && target !== document) {
+    if (className && target.className && target.className.split && target.className.split(' ').indexOf(className) > -1) {
+      targetElem = target;
+    } else if (target === container) {
+      return {
+        flag: className ? !!targetElem : true,
+        container: container,
+        targetElem: targetElem
+      };
+    }
+    target = target.parentNode;
+  }
+  return {
+    flag: false
+  };
+}
+/**
+ * 事件兼容性处理
+ */
+function handleClearEvent(params) {
+  var $event = params.$event;
+  var bodyElem = document.body;
+  if (
+  // 远程搜索
+  getEventTargetNode($event, bodyElem, 'el-autocomplete-suggestion').flag ||
+  // 下拉框
+  getEventTargetNode($event, bodyElem, 'el-select-dropdown').flag ||
+  // 级联
+  getEventTargetNode($event, bodyElem, 'el-cascader__dropdown').flag || getEventTargetNode($event, bodyElem, 'el-cascader-menus').flag ||
+  // 日期
+  getEventTargetNode($event, bodyElem, 'el-time-panel').flag || getEventTargetNode($event, bodyElem, 'el-picker-panel').flag ||
+  // 颜色
+  getEventTargetNode($event, bodyElem, 'el-color-dropdown').flag) {
+    return false;
+  }
+}
+var VxeUIPluginRenderElement = exports.VxeUIPluginRenderElement = {
+  install: function install(VxeUI, options) {
+    ElementPlus = options ? options.ElementPlus : {};
+    // 检查版本
+    if (!/^(3)\./.test(VxeUI.uiVersion)) {
+      console.error('[plugin-render-element 3.x] Version 3.x is required');
+    }
+    (0, _table.defineTableRender)(VxeUI);
+    (0, _form.defineFormRender)(VxeUI);
+    VxeUI.interceptor.add('event.clearFilter', handleClearEvent);
+    VxeUI.interceptor.add('event.clearEdit', handleClearEvent);
+    VxeUI.interceptor.add('event.clearAreas', handleClearEvent);
+    // 兼容老版本
+    VxeUI.interceptor.add('event.clearActived', handleClearEvent);
+  }
+};
+if (typeof window !== 'undefined' && window.VxeUI && window.VxeUI.use) {
+  window.VxeUI.use(VxeUIPluginRenderElement);
+}
+var _default = exports["default"] = VxeUIPluginRenderElement;

package/dist/index.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.VxeUIPluginRenderElement = void 0;
+var _table = require("./table");
+var _form = require("./form");
+// eslint-disable-next-line no-unused-vars
+var ElementPlus;
+/**
+ * 检查触发源是否属于目标节点
+ */
+function getEventTargetNode(evnt, container, className) {
+  var targetElem;
+  var target = evnt.target;
+  while (target && target.nodeType && target !== document) {
+    if (className && target.className && target.className.split && target.className.split(' ').indexOf(className) > -1) {
+      targetElem = target;
+    } else if (target === container) {
+      return {
+        flag: className ? !!targetElem : true,
+        container: container,
+        targetElem: targetElem
+      };
+    }
+    target = target.parentNode;
+  }
+  return {
+    flag: false
+  };
+}
+/**
+ * 事件兼容性处理
+ */
+function handleClearEvent(params) {
+  var $event = params.$event;
+  var bodyElem = document.body;
+  if (
+  // 远程搜索
+  getEventTargetNode($event, bodyElem, 'el-autocomplete-suggestion').flag ||
+  // 下拉框
+  getEventTargetNode($event, bodyElem, 'el-select-dropdown').flag ||
+  // 级联
+  getEventTargetNode($event, bodyElem, 'el-cascader__dropdown').flag || getEventTargetNode($event, bodyElem, 'el-cascader-menus').flag ||
+  // 日期
+  getEventTargetNode($event, bodyElem, 'el-time-panel').flag || getEventTargetNode($event, bodyElem, 'el-picker-panel').flag ||
+  // 颜色
+  getEventTargetNode($event, bodyElem, 'el-color-dropdown').flag) {
+    return false;
+  }
+}
+var VxeUIPluginRenderElement = exports.VxeUIPluginRenderElement = {
+  install: function install(VxeUI, options) {
+    ElementPlus = options ? options.ElementPlus : {};
+    // 检查版本
+    if (!/^(3)\./.test(VxeUI.uiVersion)) {
+      console.error('[plugin-render-element 3.x] Version 3.x is required');
+    }
+    (0, _table.defineTableRender)(VxeUI);
+    (0, _form.defineFormRender)(VxeUI);
+    VxeUI.interceptor.add('event.clearFilter', handleClearEvent);
+    VxeUI.interceptor.add('event.clearEdit', handleClearEvent);
+    VxeUI.interceptor.add('event.clearAreas', handleClearEvent);
+    // 兼容老版本
+    VxeUI.interceptor.add('event.clearActived', handleClearEvent);
+  }
+};
+if (typeof window !== 'undefined' && window.VxeUI && window.VxeUI.use) {
+  window.VxeUI.use(VxeUIPluginRenderElement);
+}
+var _default = exports["default"] = VxeUIPluginRenderElement;