vxe-table-demonic/lib/toolbar/src/toolbar.js

一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _conf = _interopRequireDefault(require("../../v-x-e-table/src/conf"));
var _vXETable = require("../../v-x-e-table");
var _size = require("../../hooks/size");
var _dom = require("../../tools/dom");
var _utils = require("../../tools/utils");
var _log = require("../../tools/log");
var _event = require("../../tools/event");
var _vn = require("../../tools/vn");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var _default = (0, _vue.defineComponent)({
  name: 'VxeToolbar',
  props: {
    loading: Boolean,
    refresh: [Boolean, Object],
    import: [Boolean, Object],
    export: [Boolean, Object],
    print: [Boolean, Object],
    zoom: [Boolean, Object],
    custom: [Boolean, Object],
    buttons: {
      type: Array,
      default: function () {
        return _conf.default.toolbar.buttons;
      }
    },
    tools: {
      type: Array,
      default: function () {
        return _conf.default.toolbar.tools;
      }
    },
    perfect: {
      type: Boolean,
      default: function () {
        return _conf.default.toolbar.perfect;
      }
    },
    size: {
      type: String,
      default: function () {
        return _conf.default.toolbar.size || _conf.default.size;
      }
    },
    className: [String, Function]
  },
  emits: ['button-click', 'tool-click'],
  setup: function (props, context) {
    var slots = context.slots,
      emit = context.emit;
    var xID = _xeUtils.default.uniqueId();
    var computeSize = (0, _size.useSize)(props);
    var reactData = (0, _vue.reactive)({
      isRefresh: false,
      columns: []
    });
    var refElem = (0, _vue.ref)();
    var refCustomWrapper = (0, _vue.ref)();
    var customStore = (0, _vue.reactive)({
      isAll: false,
      isIndeterminate: false,
      activeBtn: false,
      activeWrapper: false,
      visible: false
    });
    var refMaps = {
      refElem: refElem
    };
    var $xetoolbar = {
      xID: xID,
      props: props,
      context: context,
      reactData: reactData,
      getRefMaps: function () {
        return refMaps;
      }
    };
    var toolbarMethods = {};
    var $xegrid = (0, _vue.inject)('$xegrid', null);
    var $xetable;
    var computeRefreshOpts = (0, _vue.computed)(function () {
      return Object.assign({}, _conf.default.toolbar.refresh, props.refresh);
    });
    var computeImportOpts = (0, _vue.computed)(function () {
      return Object.assign({}, _conf.default.toolbar.import, props.import);
    });
    var computeExportOpts = (0, _vue.computed)(function () {
      return Object.assign({}, _conf.default.toolbar.export, props.export);
    });
    var computePrintOpts = (0, _vue.computed)(function () {
      return Object.assign({}, _conf.default.toolbar.print, props.print);
    });
    var computeZoomOpts = (0, _vue.computed)(function () {
      return Object.assign({}, _conf.default.toolbar.zoom, props.zoom);
    });
    var computeCustomOpts = (0, _vue.computed)(function () {
      return Object.assign({}, _conf.default.toolbar.custom, props.custom);
    });
    var checkTable = function () {
      if ($xetable) {
        return true;
      }
      (0, _log.errLog)('vxe.error.barUnableLink');
    };
    var checkCustomStatus = function () {
      var columns = reactData.columns;
      var computeTableCustomOpts = $xetable.getComputeMaps().computeCustomOpts;
      var tableCustomOpts = computeTableCustomOpts.value;
      var checkMethod = tableCustomOpts.checkMethod;
      customStore.isAll = columns.every(function (column) {
        return (checkMethod ? !checkMethod({
          column: column
        }) : false) || column.visible;
      });
      customStore.isIndeterminate = !customStore.isAll && columns.some(function (column) {
        return (!checkMethod || checkMethod({
          column: column
        })) && (column.visible || column.halfVisible);
      });
    };
    var showCustom = function () {
      customStore.visible = true;
      checkCustomStatus();
    };
    var handleTableCustom = function () {
      $xetable.handleCustom();
    };
    var closeCustom = function () {
      var custom = props.custom;
      var customOpts = computeCustomOpts.value;
      if (customStore.visible) {
        customStore.visible = false;
        if (custom && !customOpts.immediate) {
          handleTableCustom();
        }
      }
    };
    var emitCustomEvent = function (type, evnt) {
      var comp = $xegrid || $xetable;
      comp.dispatchEvent('custom', {
        type: type
      }, evnt);
    };
    var confirmCustomEvent = function (evnt) {
      closeCustom();
      emitCustomEvent('confirm', evnt);
    };
    var customOpenEvent = function (evnt) {
      if (checkTable()) {
        if (!customStore.visible) {
          showCustom();
          emitCustomEvent('open', evnt);
        }
      }
    };
    var customColseEvent = function (evnt) {
      if (customStore.visible) {
        closeCustom();
        emitCustomEvent('close', evnt);
      }
    };
    var resetCustomEvent = function (evnt) {
      $xetable.resetColumn(true);
      closeCustom();
      emitCustomEvent('reset', evnt);
    };
    var handleOptionCheck = function (column) {
      var columns = reactData.columns;
      var matchObj = _xeUtils.default.findTree(columns, function (item) {
        return item === column;
      });
      if (matchObj && matchObj.parent) {
        var parent_1 = matchObj.parent;
        if (parent_1.children && parent_1.children.length) {
          parent_1.visible = parent_1.children.every(function (column) {
            return column.visible;
          });
          parent_1.halfVisible = !parent_1.visible && parent_1.children.some(function (column) {
            return column.visible || column.halfVisible;
          });
          handleOptionCheck(parent_1);
        }
      }
    };
    var changeCheckboxOption = function (column) {
      var isChecked = !column.visible;
      var customOpts = computeCustomOpts.value;
      _xeUtils.default.eachTree([column], function (item) {
        item.visible = isChecked;
        item.halfVisible = false;
      });
      handleOptionCheck(column);
      if (props.custom && customOpts.immediate) {
        handleTableCustom();
      }
      checkCustomStatus();
    };
    var changeFixedOption = function (column, colFixed) {
      var computeIsMaxFixedColumn = $xetable.getComputeMaps().computeIsMaxFixedColumn;
      var isMaxFixedColumn = computeIsMaxFixedColumn.value;
      if (column.fixed === colFixed) {
        $xetable.clearColumnFixed(column);
      } else {
        if (!isMaxFixedColumn || column.fixed) {
          $xetable.setColumnFixed(column, colFixed);
        }
      }
    };
    var allCustomEvent = function () {
      var columns = reactData.columns;
      var computeTableCustomOpts = $xetable.getComputeMaps().computeCustomOpts;
      var tableCustomOpts = computeTableCustomOpts.value;
      var checkMethod = tableCustomOpts.checkMethod;
      var isAll = !customStore.isAll;
      _xeUtils.default.eachTree(columns, function (column) {
        if (!checkMethod || checkMethod({
          column: column
        })) {
          column.visible = isAll;
          column.halfVisible = false;
        }
      });
      customStore.isAll = isAll;
      checkCustomStatus();
    };
    var handleGlobalMousedownEvent = function (evnt) {
      var customWrapperElem = refCustomWrapper.value;
      if (!(0, _dom.getEventTargetNode)(evnt, customWrapperElem).flag) {
        customColseEvent(evnt);
      }
    };
    var handleGlobalBlurEvent = function (evnt) {
      customColseEvent(evnt);
    };
    var handleClickSettingEvent = function (evnt) {
      if (customStore.visible) {
        customColseEvent(evnt);
      } else {
        customOpenEvent(evnt);
      }
    };
    var handleMouseenterSettingEvent = function (evnt) {
      customStore.activeBtn = true;
      customOpenEvent(evnt);
    };
    var handleMouseleaveSettingEvent = function (evnt) {
      customStore.activeBtn = false;
      setTimeout(function () {
        if (!customStore.activeBtn && !customStore.activeWrapper) {
          customColseEvent(evnt);
        }
      }, 300);
    };
    var handleWrapperMouseenterEvent = function (evnt) {
      customStore.activeWrapper = true;
      customOpenEvent(evnt);
    };
    var handleWrapperMouseleaveEvent = function (evnt) {
      customStore.activeWrapper = false;
      setTimeout(function () {
        if (!customStore.activeBtn && !customStore.activeWrapper) {
          customColseEvent(evnt);
        }
      }, 300);
    };
    var refreshEvent = function (evnt) {
      var isRefresh = reactData.isRefresh;
      var refreshOpts = computeRefreshOpts.value;
      if (!isRefresh) {
        var queryMethod = refreshOpts.queryMethod || refreshOpts.query;
        if (queryMethod) {
          reactData.isRefresh = true;
          try {
            Promise.resolve(queryMethod({})).catch(function (e) {
              return e;
            }).then(function () {
              reactData.isRefresh = false;
            });
          } catch (e) {
            reactData.isRefresh = false;
          }
        } else if ($xegrid) {
          reactData.isRefresh = true;
          $xegrid.triggerToolbarCommitEvent({
            code: refreshOpts.code || 'reload'
          }, evnt).catch(function (e) {
            return e;
          }).then(function () {
            reactData.isRefresh = false;
          });
        }
      }
    };
    var zoomEvent = function (evnt) {
      if ($xegrid) {
        $xegrid.triggerZoomEvent(evnt);
      }
    };
    var btnEvent = function (evnt, item) {
      var code = item.code;
      if (code) {
        if ($xegrid) {
          $xegrid.triggerToolbarBtnEvent(item, evnt);
        } else {
          var gCommandOpts = _vXETable.VXETable.commands.get(code);
          var params = {
            code: code,
            button: item,
            $table: $xetable,
            $grid: $xegrid,
            $event: evnt
          };
          if (gCommandOpts) {
            if (gCommandOpts.commandMethod) {
              gCommandOpts.commandMethod(params);
            } else {
              if (process.env.NODE_ENV === 'development') {
                (0, _log.errLog)('vxe.error.notCommands', [code]);
              }
            }
          }
          $xetoolbar.dispatchEvent('button-click', params, evnt);
        }
      }
    };
    var tolEvent = function (evnt, item) {
      var code = item.code;
      if (code) {
        if ($xegrid) {
          $xegrid.triggerToolbarTolEvent(item, evnt);
        } else {
          var gCommandOpts = _vXETable.VXETable.commands.get(code);
          var params = {
            code: code,
            tool: item,
            $table: $xetable,
            $grid: $xegrid,
            $event: evnt
          };
          if (gCommandOpts) {
            if (gCommandOpts.commandMethod) {
              gCommandOpts.commandMethod(params);
            } else {
              if (process.env.NODE_ENV === 'development') {
                (0, _log.errLog)('vxe.error.notCommands', [code]);
              }
            }
          }
          $xetoolbar.dispatchEvent('tool-click', params, evnt);
        }
      }
    };
    var importEvent = function () {
      if (checkTable()) {
        $xetable.openImport();
      }
    };
    var exportEvent = function () {
      if (checkTable()) {
        $xetable.openExport();
      }
    };
    var printEvent = function () {
      if (checkTable()) {
        $xetable.openPrint();
      }
    };
    var renderDropdowns = function (item, isBtn) {
      var dropdowns = item.dropdowns;
      var downVNs = [];
      if (dropdowns) {
        return dropdowns.map(function (child, index) {
          if (child.visible === false) {
            return (0, _vue.createCommentVNode)();
          }
          return (0, _vue.h)((0, _vue.resolveComponent)('vxe-button'), {
            key: index,
            disabled: child.disabled,
            loading: child.loading,
            type: child.type,
            icon: child.icon,
            circle: child.circle,
            round: child.round,
            status: child.status,
            content: child.name,
            onClick: function (evnt) {
              return isBtn ? btnEvent(evnt, child) : tolEvent(evnt, child);
            }
          });
        });
      }
      return downVNs;
    };
    /**
     * 渲染按钮
     */
    var renderBtns = function () {
      var buttons = props.buttons;
      var buttonsSlot = slots.buttons;
      if (buttonsSlot) {
        return (0, _vn.getSlotVNs)(buttonsSlot({
          $grid: $xegrid,
          $table: $xetable
        }));
      }
      var btnVNs = [];
      if (buttons) {
        buttons.forEach(function (item) {
          var dropdowns = item.dropdowns,
            buttonRender = item.buttonRender;
          if (item.visible !== false) {
            var compConf = buttonRender ? _vXETable.VXETable.renderer.get(buttonRender.name) : null;
            if (buttonRender && compConf && compConf.renderToolbarButton) {
              var toolbarButtonClassName = compConf.toolbarButtonClassName;
              var params = {
                $grid: $xegrid,
                $table: $xetable,
                button: item
              };
              btnVNs.push((0, _vue.h)('span', {
                class: ['vxe-button--item', toolbarButtonClassName ? _xeUtils.default.isFunction(toolbarButtonClassName) ? toolbarButtonClassName(params) : toolbarButtonClassName : '']
              }, (0, _vn.getSlotVNs)(compConf.renderToolbarButton(buttonRender, params))));
            } else {
              btnVNs.push((0, _vue.h)((0, _vue.resolveComponent)('vxe-button'), {
                disabled: item.disabled,
                loading: item.loading,
                type: item.type,
                icon: item.icon,
                circle: item.circle,
                round: item.round,
                status: item.status,
                content: item.name,
                destroyOnClose: item.destroyOnClose,
                placement: item.placement,
                transfer: item.transfer,
                onClick: function (evnt) {
                  return btnEvent(evnt, item);
                }
              }, dropdowns && dropdowns.length ? {
                dropdowns: function () {
                  return renderDropdowns(item, true);
                }
              } : {}));
            }
          }
        });
      }
      return btnVNs;
    };
    /**
     * 渲染右侧工具
     */
    var renderRightTools = function () {
      var tools = props.tools;
      var toolsSlot = slots.tools;
      if (toolsSlot) {
        return (0, _vn.getSlotVNs)(toolsSlot({
          $grid: $xegrid,
          $table: $xetable
        }));
      }
      var btnVNs = [];
      if (tools) {
        tools.forEach(function (item) {
          var dropdowns = item.dropdowns,
            toolRender = item.toolRender;
          if (item.visible !== false) {
            var compConf = toolRender ? _vXETable.VXETable.renderer.get(toolRender.name) : null;
            if (toolRender && compConf && compConf.renderToolbarTool) {
              var toolbarToolClassName = compConf.toolbarToolClassName;
              var params = {
                $grid: $xegrid,
                $table: $xetable,
                tool: item
              };
              btnVNs.push((0, _vue.h)('span', {
                class: ['vxe-tool--item', toolbarToolClassName ? _xeUtils.default.isFunction(toolbarToolClassName) ? toolbarToolClassName(params) : toolbarToolClassName : '']
              }, (0, _vn.getSlotVNs)(compConf.renderToolbarTool(toolRender, params))));
            } else {
              btnVNs.push((0, _vue.h)((0, _vue.resolveComponent)('vxe-button'), {
                disabled: item.disabled,
                loading: item.loading,
                type: item.type,
                icon: item.icon,
                circle: item.circle,
                round: item.round,
                status: item.status,
                content: item.name,
                destroyOnClose: item.destroyOnClose,
                placement: item.placement,
                transfer: item.transfer,
                onClick: function (evnt) {
                  return tolEvent(evnt, item);
                }
              }, dropdowns && dropdowns.length ? {
                dropdowns: function () {
                  return renderDropdowns(item, false);
                }
              } : {}));
            }
          }
        });
      }
      return btnVNs;
    };
    var renderCustoms = function () {
      var columns = reactData.columns;
      var customOpts = computeCustomOpts.value;
      var isMaxFixedColumn = true;
      var colVNs = [];
      var customBtnOns = {};
      var customWrapperOns = {};
      var checkMethod;
      if ($xetable) {
        var _a = $xetable.getComputeMaps(),
          computeTableCustomOpts = _a.computeCustomOpts,
          computeIsMaxFixedColumn = _a.computeIsMaxFixedColumn;
        var tableCustomOpts = computeTableCustomOpts.value;
        checkMethod = tableCustomOpts.checkMethod;
        isMaxFixedColumn = computeIsMaxFixedColumn.value;
      }
      if (customOpts.trigger === 'manual') {
        // 手动触发
      } else if (customOpts.trigger === 'hover') {
        // hover 触发
        customBtnOns.onMouseenter = handleMouseenterSettingEvent;
        customBtnOns.onMouseleave = handleMouseleaveSettingEvent;
        customWrapperOns.onMouseenter = handleWrapperMouseenterEvent;
        customWrapperOns.onMouseleave = handleWrapperMouseleaveEvent;
      } else {
        // 点击触发
        customBtnOns.onClick = handleClickSettingEvent;
      }
      _xeUtils.default.eachTree(columns, function (column, index, items, path, parent) {
        var colTitle = (0, _utils.formatText)(column.getTitle(), 1);
        var colKey = column.getKey();
        var isColGroup = column.children && column.children.length;
        var isDisabled = checkMethod ? !checkMethod({
          column: column
        }) : false;
        if (isColGroup || colKey) {
          var isChecked = column.visible;
          var isIndeterminate = column.halfVisible;
          colVNs.push((0, _vue.h)('li', {
            class: ['vxe-custom--option', "level--".concat(column.level), {
              'is--group': isColGroup
            }]
          }, [(0, _vue.h)('div', {
            title: colTitle,
            class: ['vxe-custom--checkbox-option', {
              'is--checked': isChecked,
              'is--indeterminate': isIndeterminate,
              'is--disabled': isDisabled
            }],
            onClick: function () {
              if (!isDisabled) {
                changeCheckboxOption(column);
              }
            }
          }, [(0, _vue.h)('span', {
            class: ['vxe-checkbox--icon', isIndeterminate ? _conf.default.icon.TABLE_CHECKBOX_INDETERMINATE : isChecked ? _conf.default.icon.TABLE_CHECKBOX_CHECKED : _conf.default.icon.TABLE_CHECKBOX_UNCHECKED]
          }), (0, _vue.h)('span', {
            class: 'vxe-checkbox--label'
          }, colTitle)]), !parent && customOpts.allowFixed ? (0, _vue.h)('div', {
            class: 'vxe-custom--fixed-option'
          }, [(0, _vue.h)('span', {
            class: ['vxe-custom--fixed-left-option', column.fixed === 'left' ? _conf.default.icon.TOOLBAR_TOOLS_FIXED_LEFT_ACTIVED : _conf.default.icon.TOOLBAR_TOOLS_FIXED_LEFT, {
              'is--checked': column.fixed === 'left',
              'is--disabled': isMaxFixedColumn && !column.fixed
            }],
            title: _conf.default.i18n(column.fixed === 'left' ? 'vxe.toolbar.cancelfixed' : 'vxe.toolbar.fixedLeft'),
            onClick: function () {
              changeFixedOption(column, 'left');
            }
          }), (0, _vue.h)('span', {
            class: ['vxe-custom--fixed-right-option', column.fixed === 'right' ? _conf.default.icon.TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVED : _conf.default.icon.TOOLBAR_TOOLS_FIXED_RIGHT, {
              'is--checked': column.fixed === 'right',
              'is--disabled': isMaxFixedColumn && !column.fixed
            }],
            title: _conf.default.i18n(column.fixed === 'right' ? 'vxe.toolbar.cancelfixed' : 'vxe.toolbar.fixedRight'),
            onClick: function () {
              changeFixedOption(column, 'right');
            }
          })]) : null]));
        }
      });
      var isAllChecked = customStore.isAll;
      var isAllIndeterminate = customStore.isIndeterminate;
      return (0, _vue.h)('div', {
        class: ['vxe-custom--wrapper', {
          'is--active': customStore.visible
        }],
        ref: refCustomWrapper
      }, [(0, _vue.h)((0, _vue.resolveComponent)('vxe-button'), __assign({
        circle: true,
        icon: customOpts.icon || _conf.default.icon.TOOLBAR_TOOLS_CUSTOM,
        title: _conf.default.i18n('vxe.toolbar.custom')
      }, customBtnOns)), (0, _vue.h)('div', {
        class: 'vxe-custom--option-wrapper'
      }, [(0, _vue.h)('ul', {
        class: 'vxe-custom--header'
      }, [(0, _vue.h)('li', {
        class: 'vxe-custom--option'
      }, [(0, _vue.h)('div', {
        class: ['vxe-custom--checkbox-option', {
          'is--checked': isAllChecked,
          'is--indeterminate': isAllIndeterminate
        }],
        title: _conf.default.i18n('vxe.table.allTitle'),
        onClick: allCustomEvent
      }, [(0, _vue.h)('span', {
        class: ['vxe-checkbox--icon', isAllIndeterminate ? _conf.default.icon.TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? _conf.default.icon.TABLE_CHECKBOX_CHECKED : _conf.default.icon.TABLE_CHECKBOX_UNCHECKED]
      }), (0, _vue.h)('span', {
        class: 'vxe-checkbox--label'
      }, _conf.default.i18n('vxe.toolbar.customAll'))])])]), (0, _vue.h)('ul', __assign({
        class: 'vxe-custom--body'
      }, customWrapperOns), colVNs), customOpts.showFooter || customOpts.isFooter ? (0, _vue.h)('div', {
        class: 'vxe-custom--footer'
      }, [(0, _vue.h)('button', {
        class: 'btn--reset',
        onClick: resetCustomEvent
      }, customOpts.resetButtonText || _conf.default.i18n('vxe.toolbar.customRestore')), (0, _vue.h)('button', {
        class: 'btn--confirm',
        onClick: confirmCustomEvent
      }, customOpts.confirmButtonText || _conf.default.i18n('vxe.toolbar.customConfirm'))]) : null])]);
    };
    toolbarMethods = {
      dispatchEvent: function (type, params, evnt) {
        emit(type, Object.assign({
          $toolbar: $xetoolbar,
          $event: evnt
        }, params));
      },
      syncUpdate: function (params) {
        var collectColumn = params.collectColumn;
        $xetable = params.$table;
        reactData.columns = collectColumn;
      }
    };
    Object.assign($xetoolbar, toolbarMethods);
    (0, _vue.onMounted)(function () {
      _event.GlobalEvent.on($xetoolbar, 'mousedown', handleGlobalMousedownEvent);
      _event.GlobalEvent.on($xetoolbar, 'blur', handleGlobalBlurEvent);
    });
    (0, _vue.onUnmounted)(function () {
      _event.GlobalEvent.off($xetoolbar, 'mousedown');
      _event.GlobalEvent.off($xetoolbar, 'blur');
    });
    (0, _vue.nextTick)(function () {
      var refresh = props.refresh;
      var refreshOpts = computeRefreshOpts.value;
      var queryMethod = refreshOpts.queryMethod || refreshOpts.query;
      if (refresh && !$xegrid && !queryMethod) {
        (0, _log.warnLog)('vxe.error.notFunc', ['queryMethod']);
      }
      var customOpts = computeCustomOpts.value;
      if (process.env.NODE_ENV === 'development') {
        if (customOpts.isFooter) {
          (0, _log.warnLog)('vxe.error.notValidators', ['custom.isFooter', 'custom.showFooter']);
        }
      }
    });
    var renderVN = function () {
      var _a;
      var perfect = props.perfect,
        loading = props.loading,
        refresh = props.refresh,
        zoom = props.zoom,
        custom = props.custom,
        className = props.className;
      var vSize = computeSize.value;
      var refreshOpts = computeRefreshOpts.value;
      var importOpts = computeImportOpts.value;
      var exportOpts = computeExportOpts.value;
      var printOpts = computePrintOpts.value;
      var zoomOpts = computeZoomOpts.value;
      return (0, _vue.h)('div', {
        ref: refElem,
        class: ['vxe-toolbar', className ? _xeUtils.default.isFunction(className) ? className({
          $toolbar: $xetoolbar
        }) : className : '', (_a = {}, _a["size--".concat(vSize)] = vSize, _a['is--perfect'] = perfect, _a['is--loading'] = loading, _a)]
      }, [(0, _vue.h)('div', {
        class: 'vxe-buttons--wrapper'
      }, renderBtns()), (0, _vue.h)('div', {
        class: 'vxe-tools--wrapper'
      }, renderRightTools()), (0, _vue.h)('div', {
        class: 'vxe-tools--operate'
      }, [props.import ? (0, _vue.h)((0, _vue.resolveComponent)('vxe-button'), {
        circle: true,
        icon: importOpts.icon || _conf.default.icon.TOOLBAR_TOOLS_IMPORT,
        title: _conf.default.i18n('vxe.toolbar.import'),
        onClick: importEvent
      }) : (0, _vue.createCommentVNode)(), props.export ? (0, _vue.h)((0, _vue.resolveComponent)('vxe-button'), {
        circle: true,
        icon: exportOpts.icon || _conf.default.icon.TOOLBAR_TOOLS_EXPORT,
        title: _conf.default.i18n('vxe.toolbar.export'),
        onClick: exportEvent
      }) : (0, _vue.createCommentVNode)(), props.print ? (0, _vue.h)((0, _vue.resolveComponent)('vxe-button'), {
        circle: true,
        icon: printOpts.icon || _conf.default.icon.TOOLBAR_TOOLS_PRINT,
        title: _conf.default.i18n('vxe.toolbar.print'),
        onClick: printEvent
      }) : (0, _vue.createCommentVNode)(), refresh ? (0, _vue.h)((0, _vue.resolveComponent)('vxe-button'), {
        circle: true,
        icon: reactData.isRefresh ? refreshOpts.iconLoading || _conf.default.icon.TOOLBAR_TOOLS_REFRESH_LOADING : refreshOpts.icon || _conf.default.icon.TOOLBAR_TOOLS_REFRESH,
        title: _conf.default.i18n('vxe.toolbar.refresh'),
        onClick: refreshEvent
      }) : (0, _vue.createCommentVNode)(), zoom && $xegrid ? (0, _vue.h)((0, _vue.resolveComponent)('vxe-button'), {
        circle: true,
        icon: $xegrid.isMaximized() ? zoomOpts.iconOut || _conf.default.icon.TOOLBAR_TOOLS_MINIMIZE : zoomOpts.iconIn || _conf.default.icon.TOOLBAR_TOOLS_FULLSCREEN,
        title: _conf.default.i18n("vxe.toolbar.zoom".concat($xegrid.isMaximized() ? 'Out' : 'In')),
        onClick: zoomEvent
      }) : (0, _vue.createCommentVNode)(), custom ? renderCustoms() : (0, _vue.createCommentVNode)()])]);
    };
    $xetoolbar.renderVN = renderVN;
    return $xetoolbar;
  },
  render: function () {
    return this.renderVN();
  }
});
exports.default = _default;