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

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

var __assign = (this && this.__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);
};
import { defineComponent, h, ref, computed, inject, createCommentVNode, resolveComponent, reactive, nextTick, onMounted, onUnmounted } from 'vue';
import XEUtils from 'xe-utils';
import GlobalConfig from '../../v-x-e-table/src/conf';
import { VXETable } from '../../v-x-e-table';
import { useSize } from '../../hooks/size';
import { getEventTargetNode } from '../../tools/dom';
import { formatText } from '../../tools/utils';
import { warnLog, errLog } from '../../tools/log';
import { GlobalEvent } from '../../tools/event';
import { getSlotVNs } from '../../tools/vn';
export default 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 GlobalConfig.toolbar.buttons; } },
        tools: { type: Array, default: function () { return GlobalConfig.toolbar.tools; } },
        perfect: { type: Boolean, default: function () { return GlobalConfig.toolbar.perfect; } },
        size: { type: String, default: function () { return GlobalConfig.toolbar.size || GlobalConfig.size; } },
        className: [String, Function]
    },
    emits: [
        'button-click',
        'tool-click'
    ],
    setup: function (props, context) {
        var slots = context.slots, emit = context.emit;
        var xID = XEUtils.uniqueId();
        var computeSize = useSize(props);
        var reactData = reactive({
            isRefresh: false,
            columns: []
        });
        var refElem = ref();
        var refCustomWrapper = ref();
        var customStore = 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 = inject('$xegrid', null);
        var $xetable;
        var computeRefreshOpts = computed(function () {
            return Object.assign({}, GlobalConfig.toolbar.refresh, props.refresh);
        });
        var computeImportOpts = computed(function () {
            return Object.assign({}, GlobalConfig.toolbar.import, props.import);
        });
        var computeExportOpts = computed(function () {
            return Object.assign({}, GlobalConfig.toolbar.export, props.export);
        });
        var computePrintOpts = computed(function () {
            return Object.assign({}, GlobalConfig.toolbar.print, props.print);
        });
        var computeZoomOpts = computed(function () {
            return Object.assign({}, GlobalConfig.toolbar.zoom, props.zoom);
        });
        var computeCustomOpts = computed(function () {
            return Object.assign({}, GlobalConfig.toolbar.custom, props.custom);
        });
        var checkTable = function () {
            if ($xetable) {
                return true;
            }
            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.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.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.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 (!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.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') {
                                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.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') {
                                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 createCommentVNode();
                    }
                    return h(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 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.renderer.get(buttonRender.name) : null;
                        if (buttonRender && compConf && compConf.renderToolbarButton) {
                            var toolbarButtonClassName = compConf.toolbarButtonClassName;
                            var params = { $grid: $xegrid, $table: $xetable, button: item };
                            btnVNs.push(h('span', {
                                class: ['vxe-button--item', toolbarButtonClassName ? (XEUtils.isFunction(toolbarButtonClassName) ? toolbarButtonClassName(params) : toolbarButtonClassName) : '']
                            }, getSlotVNs(compConf.renderToolbarButton(buttonRender, params))));
                        }
                        else {
                            btnVNs.push(h(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 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.renderer.get(toolRender.name) : null;
                        if (toolRender && compConf && compConf.renderToolbarTool) {
                            var toolbarToolClassName = compConf.toolbarToolClassName;
                            var params = { $grid: $xegrid, $table: $xetable, tool: item };
                            btnVNs.push(h('span', {
                                class: ['vxe-tool--item', toolbarToolClassName ? (XEUtils.isFunction(toolbarToolClassName) ? toolbarToolClassName(params) : toolbarToolClassName) : '']
                            }, getSlotVNs(compConf.renderToolbarTool(toolRender, params))));
                        }
                        else {
                            btnVNs.push(h(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.eachTree(columns, function (column, index, items, path, parent) {
                var colTitle = 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(h('li', {
                        class: ['vxe-custom--option', "level--".concat(column.level), {
                                'is--group': isColGroup
                            }]
                    }, [
                        h('div', {
                            title: colTitle,
                            class: ['vxe-custom--checkbox-option', {
                                    'is--checked': isChecked,
                                    'is--indeterminate': isIndeterminate,
                                    'is--disabled': isDisabled
                                }],
                            onClick: function () {
                                if (!isDisabled) {
                                    changeCheckboxOption(column);
                                }
                            }
                        }, [
                            h('span', {
                                class: ['vxe-checkbox--icon', isIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
                            }),
                            h('span', {
                                class: 'vxe-checkbox--label'
                            }, colTitle)
                        ]),
                        !parent && customOpts.allowFixed ? h('div', {
                            class: 'vxe-custom--fixed-option'
                        }, [
                            h('span', {
                                class: ['vxe-custom--fixed-left-option', column.fixed === 'left' ? GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_LEFT_ACTIVED : GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_LEFT, {
                                        'is--checked': column.fixed === 'left',
                                        'is--disabled': isMaxFixedColumn && !column.fixed
                                    }],
                                title: GlobalConfig.i18n(column.fixed === 'left' ? 'vxe.toolbar.cancelfixed' : 'vxe.toolbar.fixedLeft'),
                                onClick: function () {
                                    changeFixedOption(column, 'left');
                                }
                            }),
                            h('span', {
                                class: ['vxe-custom--fixed-right-option', column.fixed === 'right' ? GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVED : GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_RIGHT, {
                                        'is--checked': column.fixed === 'right',
                                        'is--disabled': isMaxFixedColumn && !column.fixed
                                    }],
                                title: GlobalConfig.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 h('div', {
                class: ['vxe-custom--wrapper', {
                        'is--active': customStore.visible
                    }],
                ref: refCustomWrapper
            }, [
                h(resolveComponent('vxe-button'), __assign({ circle: true, icon: customOpts.icon || GlobalConfig.icon.TOOLBAR_TOOLS_CUSTOM, title: GlobalConfig.i18n('vxe.toolbar.custom') }, customBtnOns)),
                h('div', {
                    class: 'vxe-custom--option-wrapper'
                }, [
                    h('ul', {
                        class: 'vxe-custom--header'
                    }, [
                        h('li', {
                            class: 'vxe-custom--option'
                        }, [
                            h('div', {
                                class: ['vxe-custom--checkbox-option', {
                                        'is--checked': isAllChecked,
                                        'is--indeterminate': isAllIndeterminate
                                    }],
                                title: GlobalConfig.i18n('vxe.table.allTitle'),
                                onClick: allCustomEvent
                            }, [
                                h('span', {
                                    class: ['vxe-checkbox--icon', isAllIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
                                }),
                                h('span', {
                                    class: 'vxe-checkbox--label'
                                }, GlobalConfig.i18n('vxe.toolbar.customAll'))
                            ])
                        ])
                    ]),
                    h('ul', __assign({ class: 'vxe-custom--body' }, customWrapperOns), colVNs),
                    customOpts.showFooter || customOpts.isFooter ? h('div', {
                        class: 'vxe-custom--footer'
                    }, [
                        h('button', {
                            class: 'btn--reset',
                            onClick: resetCustomEvent
                        }, customOpts.resetButtonText || GlobalConfig.i18n('vxe.toolbar.customRestore')),
                        h('button', {
                            class: 'btn--confirm',
                            onClick: confirmCustomEvent
                        }, customOpts.confirmButtonText || GlobalConfig.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);
        onMounted(function () {
            GlobalEvent.on($xetoolbar, 'mousedown', handleGlobalMousedownEvent);
            GlobalEvent.on($xetoolbar, 'blur', handleGlobalBlurEvent);
        });
        onUnmounted(function () {
            GlobalEvent.off($xetoolbar, 'mousedown');
            GlobalEvent.off($xetoolbar, 'blur');
        });
        nextTick(function () {
            var refresh = props.refresh;
            var refreshOpts = computeRefreshOpts.value;
            var queryMethod = refreshOpts.queryMethod || refreshOpts.query;
            if (refresh && !$xegrid && !queryMethod) {
                warnLog('vxe.error.notFunc', ['queryMethod']);
            }
            var customOpts = computeCustomOpts.value;
            if (process.env.NODE_ENV === 'development') {
                if (customOpts.isFooter) {
                    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 h('div', {
                ref: refElem,
                class: ['vxe-toolbar', className ? (XEUtils.isFunction(className) ? className({ $toolbar: $xetoolbar }) : className) : '', (_a = {},
                        _a["size--".concat(vSize)] = vSize,
                        _a['is--perfect'] = perfect,
                        _a['is--loading'] = loading,
                        _a)]
            }, [
                h('div', {
                    class: 'vxe-buttons--wrapper'
                }, renderBtns()),
                h('div', {
                    class: 'vxe-tools--wrapper'
                }, renderRightTools()),
                h('div', {
                    class: 'vxe-tools--operate'
                }, [
                    props.import ? h(resolveComponent('vxe-button'), {
                        circle: true,
                        icon: importOpts.icon || GlobalConfig.icon.TOOLBAR_TOOLS_IMPORT,
                        title: GlobalConfig.i18n('vxe.toolbar.import'),
                        onClick: importEvent
                    }) : createCommentVNode(),
                    props.export ? h(resolveComponent('vxe-button'), {
                        circle: true,
                        icon: exportOpts.icon || GlobalConfig.icon.TOOLBAR_TOOLS_EXPORT,
                        title: GlobalConfig.i18n('vxe.toolbar.export'),
                        onClick: exportEvent
                    }) : createCommentVNode(),
                    props.print ? h(resolveComponent('vxe-button'), {
                        circle: true,
                        icon: printOpts.icon || GlobalConfig.icon.TOOLBAR_TOOLS_PRINT,
                        title: GlobalConfig.i18n('vxe.toolbar.print'),
                        onClick: printEvent
                    }) : createCommentVNode(),
                    refresh ? h(resolveComponent('vxe-button'), {
                        circle: true,
                        icon: reactData.isRefresh ? (refreshOpts.iconLoading || GlobalConfig.icon.TOOLBAR_TOOLS_REFRESH_LOADING) : (refreshOpts.icon || GlobalConfig.icon.TOOLBAR_TOOLS_REFRESH),
                        title: GlobalConfig.i18n('vxe.toolbar.refresh'),
                        onClick: refreshEvent
                    }) : createCommentVNode(),
                    zoom && $xegrid ? h(resolveComponent('vxe-button'), {
                        circle: true,
                        icon: $xegrid.isMaximized() ? (zoomOpts.iconOut || GlobalConfig.icon.TOOLBAR_TOOLS_MINIMIZE) : (zoomOpts.iconIn || GlobalConfig.icon.TOOLBAR_TOOLS_FULLSCREEN),
                        title: GlobalConfig.i18n("vxe.toolbar.zoom".concat($xegrid.isMaximized() ? 'Out' : 'In')),
                        onClick: zoomEvent
                    }) : createCommentVNode(),
                    custom ? renderCustoms() : createCommentVNode()
                ])
            ]);
        };
        $xetoolbar.renderVN = renderVN;
        return $xetoolbar;
    },
    render: function () {
        return this.renderVN();
    }
});