@vxe-ui/plugin-render-element 4.2.3 → 4.2.4

package/dist/table/index.js

@@ -71,6 +71,15 @@ function defineTableRender(VxeUI) {
   function formatText(cellValue) {
     return '' + (isEmptyValue(cellValue) ? '' : cellValue);
   }
+  function updateFilterChangeOption(params, checked, option) {
+    var $table = params.$table;
+    $table.updateFilterOptionStatus(option, checked);
+  }
+  function saveFilterEvent(params) {
+    var $table = params.$table,
+      column = params.column;
+    $table.saveFilterByEvent(new Event('change'), column);
+  }
   function getCellLabelVNs(renderOpts, params, cellLabel) {
     var placeholder = renderOpts.placeholder;
     return [(0, _vue.h)('span', {
@@ -79,32 +88,45 @@ function defineTableRender(VxeUI) {
       "class": 'vxe-cell--placeholder'
     }, formatText(VxeUI.getI18n(placeholder)))] : formatText(cellLabel))];
   }
-  function getOns(renderOpts, params, inputFunc, changeFunc) {
+  var blurEvent = 'blur';
+  var clearEvent = 'clear';
+  /**
+  * 组件事件处理
+  * @param renderOpts
+  * @param params
+  * @param modelFunc
+  * @param changeFunc
+  */
+  function getComponentOns(renderOpts, params, eFns, eventOns) {
     var events = renderOpts.events;
     var modelEvent = getModelEvent(renderOpts);
     var changeEvent = getChangeEvent(renderOpts);
-    var isSameEvent = changeEvent === modelEvent;
+    var _ref = eFns || {},
+      modelFunc = _ref.model,
+      changeFunc = _ref.change,
+      blurFunc = _ref.blur,
+      clearFunc = _ref.clear;
     var ons = {};
     _xeUtils["default"].objectEach(events, function (func, key) {
       ons[getOnName(key)] = function () {
+        if (!_xeUtils["default"].isFunction(func)) {
+          console.error("Parameter \"".concat(func, "\" is not a method"));
+        }
         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) {
+    if (modelFunc) {
       ons[getOnName(modelEvent)] = function (targetEvnt) {
-        inputFunc(targetEvnt);
+        modelFunc(targetEvnt);
         if (events && events[modelEvent]) {
           events[modelEvent](params, targetEvnt);
         }
-        if (isSameEvent && changeFunc) {
-          changeFunc(targetEvnt);
-        }
       };
     }
-    if (!isSameEvent && changeFunc) {
+    if (changeFunc) {
       ons[getOnName(changeEvent)] = function () {
         for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
           args[_key2] = arguments[_key2];
@@ -115,25 +137,89 @@ function defineTableRender(VxeUI) {
         }
       };
     }
-    return ons;
+    if (blurFunc) {
+      ons[getOnName(blurEvent)] = function () {
+        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          args[_key3] = arguments[_key3];
+        }
+        blurFunc.apply(void 0, args);
+        if (events && events[blurEvent]) {
+          events[blurEvent].apply(events, [params].concat(args));
+        }
+      };
+    }
+    if (clearFunc) {
+      ons[getOnName(clearEvent)] = function () {
+        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+          args[_key4] = arguments[_key4];
+        }
+        clearFunc.apply(void 0, args);
+        if (events && events[clearEvent]) {
+          events[clearEvent].apply(events, [params].concat(args));
+        }
+      };
+    }
+    return eventOns ? Object.assign(ons, eventOns) : ons;
   }
   function getEditOns(renderOpts, params) {
     var $table = params.$table,
       row = params.row,
       column = params.column;
-    return getOns(renderOpts, params, function (value) {
-      // 处理 model 值双向绑定
-      _xeUtils["default"].set(row, column.field, value);
-    }, function () {
-      // 处理 change 事件相关逻辑
-      $table.updateStatus(params);
+    return getComponentOns(renderOpts, params, {
+      model: function model(value) {
+        // 处理 model 值双向绑定
+        _xeUtils["default"].set(row, column.field, value);
+      },
+      change: function change() {
+        // 处理 change 事件相关逻辑
+        $table.updateStatus(params);
+      }
     });
   }
   function getFilterOns(renderOpts, params, option, changeFunc) {
-    return getOns(renderOpts, params, function (value) {
-      // 处理 model 值双向绑定
-      option.data = value;
-    }, changeFunc);
+    return getComponentOns(renderOpts, params, {
+      model: function model(value) {
+        // 处理 model 值双向绑定
+        option.data = value;
+      },
+      change: changeFunc
+    });
+  }
+  function getFloatingFilterOns(renderOpts, params, option) {
+    var $table = params.$table,
+      column = params.column;
+    if ((0, _comp.hasInputType)(renderOpts)) {
+      return getComponentOns(renderOpts, params, {
+        model: function model(value) {
+          // 处理 model 值双向绑定
+          option.data = value;
+        },
+        change: function change() {
+          updateFilterChangeOption(params, !isEmptyValue(option.data), option);
+        },
+        clear: function clear() {
+          updateFilterChangeOption(params, !isEmptyValue(option.data), option);
+          saveFilterEvent(params);
+        },
+        blur: function blur() {
+          $table.saveFilterByEvent(new Event('change'), column);
+        }
+      });
+    }
+    return getComponentOns(renderOpts, params, {
+      model: function model(value) {
+        // 处理 model 值双向绑定
+        option.data = value;
+      },
+      clear: function clear() {
+        updateFilterChangeOption(params, !isEmptyValue(option.data), option);
+        $table.saveFilterByEvent(new Event('change'), column);
+      },
+      change: function change() {
+        updateFilterChangeOption(params, !isEmptyValue(option.data), option);
+        $table.saveFilterByEvent(new Event('change'), column);
+      }
+    });
   }
   function matchCascaderData(index, list, values, labels) {
     var val = values[index];
@@ -279,14 +365,16 @@ function defineTableRender(VxeUI) {
       var row = params.row,
         column = params.column;
       var name = renderOpts.name,
-        attrs = renderOpts.attrs;
+        attrs = renderOpts.attrs,
+        props = renderOpts.props;
       var cellValue = _xeUtils["default"].get(row, column.field);
-      return [(0, _vue.h)((0, _comp.getCurrComponent)(name), _objectSpread(_objectSpread(_objectSpread({}, attrs), getCellEditFilterProps(renderOpts, params, cellValue, defaultProps)), getEditOns(renderOpts, params)))];
+      return [(0, _vue.h)((0, _comp.getCurrComponent)(name), _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, attrs), props), getCellEditFilterProps(renderOpts, params, cellValue, defaultProps)), getEditOns(renderOpts, params)))];
     };
   }
   function defaultButtonEditRender(renderOpts, params) {
-    var attrs = renderOpts.attrs;
-    return [(0, _vue.h)((0, _comp.getCurrComponent)('el-button'), _objectSpread(_objectSpread(_objectSpread({}, attrs), getCellEditFilterProps(renderOpts, params, null)), getOns(renderOpts, params)), cellText(renderOpts.content))];
+    var attrs = renderOpts.attrs,
+      props = renderOpts.props;
+    return [(0, _vue.h)((0, _comp.getCurrComponent)('el-button'), _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, attrs), props), getCellEditFilterProps(renderOpts, params, null)), getComponentOns(renderOpts, params)), cellText(renderOpts.content))];
   }
   function defaultButtonsEditRender(renderOpts, params) {
     var children = renderOpts.children;
@@ -301,20 +389,31 @@ function defineTableRender(VxeUI) {
     return function (renderOpts, params) {
       var column = params.column;
       var name = renderOpts.name,
-        attrs = renderOpts.attrs;
+        attrs = renderOpts.attrs,
+        props = renderOpts.props;
       return [(0, _vue.h)('div', {
         "class": 'vxe-table--filter-element-wrapper'
       }, column.filters.map(function (option, oIndex) {
         var optionValue = option.data;
-        return (0, _vue.h)((0, _comp.getCurrComponent)(name), _objectSpread(_objectSpread(_objectSpread({
+        return (0, _vue.h)((0, _comp.getCurrComponent)(name), _objectSpread(_objectSpread(_objectSpread(_objectSpread({
           key: oIndex
-        }, attrs), getCellEditFilterProps(renderOpts, params, optionValue, defaultProps)), getFilterOns(renderOpts, params, option, function () {
+        }, attrs), props), getCellEditFilterProps(renderOpts, params, optionValue, defaultProps)), getFilterOns(renderOpts, params, option, function () {
           // 处理 change 事件相关逻辑
           handleConfirmFilter(params, !!option.data, option);
         })));
       }))];
     };
   }
+  function createFloatingFilterRender(defaultProps) {
+    return function (renderOpts, params) {
+      var option = params.option;
+      var name = renderOpts.name,
+        attrs = renderOpts.attrs,
+        props = renderOpts.props;
+      var optionValue = option.data;
+      return [(0, _vue.h)((0, _comp.getCurrComponent)(name), _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, attrs), props), getCellEditFilterProps(renderOpts, params, optionValue, defaultProps)), getFloatingFilterOns(renderOpts, params, option)))];
+    };
+  }
   function handleConfirmFilter(params, checked, option) {
     var $panel = params.$panel;
     $panel.changeOption(null, checked, option);
@@ -367,11 +466,17 @@ function defineTableRender(VxeUI) {
       return options && options.original ? _xeUtils["default"].get(row, column.field) : getExportCellValue(column.editRender || column.cellRender, params);
     };
   }
+  function defaultFilterOptions() {
+    return [{
+      data: null
+    }];
+  }
   VxeUI.renderer.mixin({
     ElAutocomplete: {
       tableAutoFocus: 'input',
       renderTableDefault: createEditRender(),
       renderTableEdit: createEditRender(),
+      createTableFilterOptions: defaultFilterOptions,
       renderTableFilter: createFilterRender(),
       tableFilterDefaultMethod: defaultExactFilterMethod
     },
@@ -379,14 +484,18 @@ function defineTableRender(VxeUI) {
       tableAutoFocus: 'input',
       renderTableDefault: createEditRender(),
       renderTableEdit: createEditRender(),
+      createTableFilterOptions: defaultFilterOptions,
       renderTableFilter: createFilterRender(),
+      renderTableFloatingFilter: createFloatingFilterRender(),
       tableFilterDefaultMethod: defaultFuzzyFilterMethod
     },
     ElInputNumber: {
       tableAutoFocus: 'input',
       renderTableDefault: createEditRender(),
       renderTableEdit: createEditRender(),
+      createTableFilterOptions: defaultFilterOptions,
       renderTableFilter: createFilterRender(),
+      renderTableFloatingFilter: createFloatingFilterRender(),
       tableFilterDefaultMethod: defaultFuzzyFilterMethod
     },
     ElSelect: {
@@ -432,6 +541,7 @@ function defineTableRender(VxeUI) {
       renderTableCell: function renderTableCell(renderOpts, params) {
         return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params));
       },
+      createTableFilterOptions: defaultFilterOptions,
       renderTableFilter: function renderTableFilter(renderOpts, params) {
         var _renderOpts$options3 = renderOpts.options,
           options = _renderOpts$options3 === void 0 ? [] : _renderOpts$options3,
@@ -518,6 +628,7 @@ function defineTableRender(VxeUI) {
       renderTableCell: function renderTableCell(renderOpts, params) {
         return getCellLabelVNs(renderOpts, params, getDatePickerCellValue(renderOpts, params));
       },
+      createTableFilterOptions: defaultFilterOptions,
       renderTableFilter: function renderTableFilter(renderOpts, params) {
         var column = params.column;
         var name = renderOpts.name,
@@ -534,6 +645,7 @@ function defineTableRender(VxeUI) {
           })));
         }))];
       },
+      renderTableFloatingFilter: createFloatingFilterRender(),
       tableFilterDefaultMethod: function tableFilterDefaultMethod(params) {
         var option = params.option,
           row = params.row,
@@ -574,6 +686,7 @@ function defineTableRender(VxeUI) {
     ElRate: {
       renderTableDefault: createEditRender(),
       renderTableEdit: createEditRender(),
+      createTableFilterOptions: defaultFilterOptions,
       renderTableFilter: createFilterRender(),
       tableFilterDefaultMethod: defaultExactFilterMethod
     },
@@ -601,6 +714,7 @@ function defineTableRender(VxeUI) {
     ElSlider: {
       renderTableDefault: createEditRender(),
       renderTableEdit: createEditRender(),
+      createTableFilterOptions: defaultFilterOptions,
       renderTableFilter: createFilterRender(),
       tableFilterDefaultMethod: defaultExactFilterMethod
     },

package/dist/util/comp.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getCurrComponent = getCurrComponent;
+exports.hasInputType = hasInputType;
 var _vue = require("vue");
 var _store = require("../store");
 function getCurrComponent(name) {
@@ -12,4 +13,13 @@ function getCurrComponent(name) {
     return comp;
   }
   return (0, _vue.resolveComponent)(name);
+}
+function hasInputType(renderOpts) {
+  switch (renderOpts.name) {
+    case 'ElInput':
+    case 'ElInputNumber':
+    case 'ElTextarea':
+      return true;
+  }
+  return false;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vxe-ui/plugin-render-element",
-  "version": "4.2.3",
+  "version": "4.2.4",
   "description": "Vxe UI plug-in for compatibility with the element-plus component.",
   "scripts": {
     "lib": "gulp build"