vxe-table 4.6.7 → 4.6.8

package/lib/index.umd.js

@@ -2470,7 +2470,7 @@ const GlobalConfig = {
 ;// CONCATENATED MODULE: ./packages/tools/log.ts
 
 function getLog(message, params) {
-  return `[vxe-table v${"4.6.7"}] ${conf.i18n(message, params)}`;
+  return `[vxe-table v${"4.6.8"}] ${conf.i18n(message, params)}`;
 }
 function outLog(type) {
   return function (message, params) {
@@ -2497,7 +2497,7 @@ const interceptor = {
   add(type, callback) {
     // 检测类型
     if (true) {
-      const eventTypes = ['created', 'mounted', 'activated', 'beforeUnmount', 'unmounted', 'event.clearActived', 'event.clearFilter', 'event.clearAreas', 'event.showMenu', 'event.keydown', 'event.export', 'event.import'];
+      const eventTypes = ['created', 'mounted', 'activated', 'beforeUnmount', 'unmounted', 'event.clearEdit', 'event.clearActived', 'event.clearFilter', 'event.clearAreas', 'event.showMenu', 'event.keydown', 'event.export', 'event.import'];
       if (eventTypes.indexOf(type) === -1) {
         warnLog('vxe.error.errProp', [`Interceptor.${type}`, eventTypes.join('|')]);
       }
@@ -4935,7 +4935,7 @@ const setup = config;
 const globalStore = {};
 const VXETable = {
   v,
-  version: "4.6.7",
+  version: "4.6.8",
   config: config,
   globalStore,
   interceptor: interceptor,
@@ -5838,7 +5838,7 @@ const tableMenuHook = {
     /**
      * 显示快捷菜单
      */
-    const openContextMenu = (evnt, type, params) => {
+    const handleOpenMenuEvent = (evnt, type, params) => {
       const {
         ctxMenuStore
       } = reactData;
@@ -5977,6 +5977,7 @@ const tableMenuHook = {
           menuPrivateMethods.ctxMenuLinkEvent(evnt, ctxMenuStore[property]);
         }
       },
+      handleOpenMenuEvent,
       /**
        * 快捷菜单事件处理
        */
@@ -6021,7 +6022,7 @@ const tableMenuHook = {
               if (activeArea && activeArea.row && activeArea.column) {
                 params.row = activeArea.row;
                 params.column = activeArea.column;
-                openContextMenu(evnt, type, params);
+                handleOpenMenuEvent(evnt, type, params);
                 return;
               }
             } else if (mouseConfig && mouseOpts.selected) {
@@ -6029,7 +6030,7 @@ const tableMenuHook = {
               if (selected.row && selected.column) {
                 params.row = selected.row;
                 params.column = selected.column;
-                openContextMenu(evnt, type, params);
+                handleOpenMenuEvent(evnt, type, params);
                 return;
               }
             }
@@ -6069,14 +6070,14 @@ const tableMenuHook = {
                 }
               }
               const eventType = `${typePrefix}cell-menu`;
-              openContextMenu(evnt, layout, params);
+              handleOpenMenuEvent(evnt, layout, params);
               $xetable.dispatchEvent(eventType, params, evnt);
               return;
             } else if (getEventTargetNode(evnt, el, `vxe-table--${layout}-wrapper`, target => target.getAttribute('xid') === xID).flag) {
               if (menuOpts.trigger === 'cell') {
                 evnt.preventDefault();
               } else {
-                openContextMenu(evnt, layout, params);
+                handleOpenMenuEvent(evnt, layout, params);
               }
               return;
             }
@@ -6843,10 +6844,10 @@ const editHook = {
         return null;
       },
       clearActived(evnt) {
-        // if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
-        //   warnLog('vxe.error.delFunc', ['clearActived', 'clearEdit'])
-        // }
         // 即将废弃
+        if (true) {
+          warnLog('vxe.error.delFunc', ['clearActived', 'clearEdit']);
+        }
         return this.clearEdit(evnt);
       },
       /**
@@ -6857,7 +6858,8 @@ const editHook = {
           editStore
         } = reactData;
         const {
-          actived
+          actived,
+          focused
         } = editStore;
         const {
           row,
@@ -6883,6 +6885,8 @@ const editHook = {
             return $xetable.clearValidate();
           }
         }
+        focused.row = null;
+        focused.column = null;
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
       },
       /**
@@ -16470,10 +16474,7 @@ const VxeTableValidatorModule = {
 };
 const Validator = VxeTableValidatorModule;
 /* harmony default export */ var validator = ((/* unused pure expression or super */ null && (VxeTableValidatorModule)));
-;// CONCATENATED MODULE: ./packages/custom/src/panel.ts
-
-
-
+;// CONCATENATED MODULE: ./packages/tooltip/src/tooltip.ts
 
 
 
@@ -16481,379 +16482,687 @@ const Validator = VxeTableValidatorModule;
 
 
 
-/* harmony default export */ var custom_src_panel = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
-  name: 'VxeTableCustomPanel',
+/* harmony default export */ var tooltip = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
+  name: 'VxeTooltip',
   props: {
-    customStore: {
-      type: Object,
-      default: () => ({})
+    modelValue: Boolean,
+    size: {
+      type: String,
+      default: () => conf.tooltip.size || conf.size
+    },
+    trigger: {
+      type: String,
+      default: () => conf.tooltip.trigger
+    },
+    theme: {
+      type: String,
+      default: () => conf.tooltip.theme
+    },
+    content: {
+      type: [String, Number],
+      default: null
+    },
+    useHTML: Boolean,
+    zIndex: [String, Number],
+    popupClassName: [String, Function],
+    isArrow: {
+      type: Boolean,
+      default: true
+    },
+    enterable: Boolean,
+    enterDelay: {
+      type: Number,
+      default: () => conf.tooltip.enterDelay
+    },
+    leaveDelay: {
+      type: Number,
+      default: () => conf.tooltip.leaveDelay
     }
   },
-  setup(props) {
-    const $xetable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xetable', {});
-    const {
-      reactData
-    } = $xetable;
+  emits: ['update:modelValue'],
+  setup(props, context) {
     const {
-      computeCustomOpts,
-      computeIsMaxFixedColumn
-    } = $xetable.getComputeMaps();
+      slots,
+      emit
+    } = context;
+    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
+    const computeSize = useSize(props);
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
+      target: null,
+      isUpdate: false,
+      visible: false,
+      tipContent: '',
+      tipActive: false,
+      tipTarget: null,
+      tipZindex: 0,
+      tipStore: {
+        style: {},
+        placement: '',
+        arrowStyle: {}
+      }
+    });
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const bodyElemRef = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const dragHintElemRef = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const dragColumn = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    let prevDropTrEl;
-    const handleWrapperMouseenterEvent = evnt => {
-      const {
-        customStore
-      } = props;
-      customStore.activeWrapper = true;
-      $xetable.customOpenEvent(evnt);
-    };
-    const handleWrapperMouseleaveEvent = evnt => {
-      const {
-        customStore
-      } = props;
-      customStore.activeWrapper = false;
-      setTimeout(() => {
-        if (!customStore.activeBtn && !customStore.activeWrapper) {
-          $xetable.customColseEvent(evnt);
-        }
-      }, 300);
-    };
-    const confirmCustomEvent = evnt => {
-      $xetable.closeCustom();
-      $xetable.emitCustomEvent('confirm', evnt);
-    };
-    const cancelCustomEvent = evnt => {
-      $xetable.closeCustom();
-      $xetable.emitCustomEvent('cancel', evnt);
-    };
-    const resetCustomEvent = evnt => {
-      $xetable.resetColumn(true);
-      $xetable.closeCustom();
-      $xetable.emitCustomEvent('reset', evnt);
+    const refMaps = {
+      refElem
     };
-    const resetPopupCustomEvent = evnt => {
-      if (VXETable.modal) {
-        VXETable.modal.confirm({
-          content: conf.i18n('vxe.custom.cstmConfirmRestore'),
-          className: 'vxe-table--ignore-clear',
-          escClosable: true
-        }).then(type => {
-          if (type === 'confirm') {
-            resetCustomEvent(evnt);
-          }
-        });
-      } else {
-        resetCustomEvent(evnt);
-      }
+    const $xetooltip = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps
     };
-    const handleOptionCheck = column => {
+    let tooltipMethods = {};
+    const updateTipStyle = () => {
       const {
-        customColumnList
+        tipTarget,
+        tipStore
       } = reactData;
-      const matchObj = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(customColumnList, item => item === column);
-      if (matchObj && matchObj.parent) {
+      if (tipTarget) {
         const {
-          parent
-        } = matchObj;
-        if (parent.children && parent.children.length) {
-          parent.visible = parent.children.every(column => column.visible);
-          parent.halfVisible = !parent.visible && parent.children.some(column => column.visible || column.halfVisible);
-          handleOptionCheck(parent);
+          scrollTop,
+          scrollLeft,
+          visibleWidth
+        } = getDomNode();
+        const {
+          top,
+          left
+        } = getAbsolutePos(tipTarget);
+        const el = refElem.value;
+        const marginSize = 6;
+        const offsetHeight = el.offsetHeight;
+        const offsetWidth = el.offsetWidth;
+        let tipLeft = left;
+        let tipTop = top - offsetHeight - marginSize;
+        tipLeft = Math.max(marginSize, left + Math.floor((tipTarget.offsetWidth - offsetWidth) / 2));
+        if (tipLeft + offsetWidth + marginSize > scrollLeft + visibleWidth) {
+          tipLeft = scrollLeft + visibleWidth - offsetWidth - marginSize;
+        }
+        if (top - offsetHeight < scrollTop + marginSize) {
+          tipStore.placement = 'bottom';
+          tipTop = top + tipTarget.offsetHeight + marginSize;
         }
+        tipStore.style.top = `${tipTop}px`;
+        tipStore.style.left = `${tipLeft}px`;
+        tipStore.arrowStyle.left = `${left - tipLeft + tipTarget.offsetWidth / 2}px`;
       }
     };
-    const changeCheckboxOption = column => {
-      const isChecked = !column.visible;
-      const customOpts = computeCustomOpts.value;
-      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([column], item => {
-        item.visible = isChecked;
-        item.halfVisible = false;
-      });
-      handleOptionCheck(column);
-      if (customOpts.immediate) {
-        $xetable.handleCustom();
+    const updateValue = value => {
+      if (value !== reactData.visible) {
+        reactData.visible = value;
+        reactData.isUpdate = true;
+        emit('update:modelValue', value);
       }
-      $xetable.checkCustomStatus();
     };
-    const changeFixedOption = (column, colFixed) => {
-      const isMaxFixedColumn = computeIsMaxFixedColumn.value;
-      if (column.fixed === colFixed) {
-        $xetable.clearColumnFixed(column);
+    const updateZindex = () => {
+      if (reactData.tipZindex < getLastZIndex()) {
+        reactData.tipZindex = nextZIndex();
+      }
+    };
+    const clickEvent = () => {
+      if (reactData.visible) {
+        tooltipMethods.close();
       } else {
-        if (!isMaxFixedColumn || column.fixed) {
-          $xetable.setColumnFixed(column, colFixed);
-        }
+        tooltipMethods.open();
       }
     };
-    const changePopupFixedOption = column => {
-      const isMaxFixedColumn = computeIsMaxFixedColumn.value;
-      if (!isMaxFixedColumn) {
-        $xetable.setColumnFixed(column, column.fixed);
+    const targetMouseenterEvent = () => {
+      tooltipMethods.open();
+    };
+    const targetMouseleaveEvent = () => {
+      const {
+        trigger,
+        enterable,
+        leaveDelay
+      } = props;
+      reactData.tipActive = false;
+      if (enterable && trigger === 'hover') {
+        setTimeout(() => {
+          if (!reactData.tipActive) {
+            tooltipMethods.close();
+          }
+        }, leaveDelay);
+      } else {
+        tooltipMethods.close();
       }
     };
-    const allCustomEvent = () => {
+    const wrapperMouseenterEvent = () => {
+      reactData.tipActive = true;
+    };
+    const wrapperMouseleaveEvent = () => {
       const {
-        customStore
+        trigger,
+        enterable,
+        leaveDelay
       } = props;
+      reactData.tipActive = false;
+      if (enterable && trigger === 'hover') {
+        setTimeout(() => {
+          if (!reactData.tipActive) {
+            tooltipMethods.close();
+          }
+        }, leaveDelay);
+      }
+    };
+    const showTip = () => {
       const {
-        customColumnList
+        tipStore
       } = reactData;
-      const customOpts = computeCustomOpts.value;
-      const {
-        checkMethod
-      } = customOpts;
-      const isAll = !customStore.isAll;
-      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(customColumnList, column => {
-        if (!checkMethod || checkMethod({
-          column
-        })) {
-          column.visible = isAll;
-          column.halfVisible = false;
+      const el = refElem.value;
+      if (el) {
+        const parentNode = el.parentNode;
+        if (!parentNode) {
+          document.body.appendChild(el);
         }
-      });
-      customStore.isAll = isAll;
-      $xetable.checkCustomStatus();
-    };
-    const sortMousedownEvent = evnt => {
-      const btnEl = evnt.currentTarget;
-      const tdEl = btnEl.parentNode;
-      const trEl = tdEl.parentNode;
-      const colid = trEl.getAttribute('colid');
-      const column = $xetable.getColumnById(colid);
-      trEl.draggable = true;
-      dragColumn.value = column;
-      addClass(trEl, 'active--drag-origin');
-    };
-    const sortMouseupEvent = evnt => {
-      const btnEl = evnt.currentTarget;
-      const tdEl = btnEl.parentNode;
-      const trEl = tdEl.parentNode;
-      const dragHintEl = dragHintElemRef.value;
-      trEl.draggable = false;
-      dragColumn.value = null;
-      removeClass(trEl, 'active--drag-origin');
-      if (dragHintEl) {
-        dragHintEl.style.display = '';
       }
+      updateValue(true);
+      updateZindex();
+      tipStore.placement = 'top';
+      tipStore.style = {
+        width: 'auto',
+        left: 0,
+        top: 0,
+        zIndex: props.zIndex || reactData.tipZindex
+      };
+      tipStore.arrowStyle = {
+        left: '50%'
+      };
+      return tooltipMethods.updatePlacement();
     };
-    const sortDragstartEvent = evnt => {
-      const img = new Image();
-      if (evnt.dataTransfer) {
-        evnt.dataTransfer.setDragImage(img, 0, 0);
+    const showDelayTip = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().debounce(() => {
+      if (reactData.tipActive) {
+        showTip();
       }
-    };
-    const sortDragendEvent = evnt => {
-      const {
-        customColumnList
-      } = reactData;
-      const trEl = evnt.currentTarget;
-      const dragHintEl = dragHintElemRef.value;
-      if (prevDropTrEl) {
-        // 判断是否有拖动
-        if (prevDropTrEl !== trEl) {
-          const dragOffset = prevDropTrEl.getAttribute('drag-pos');
-          const colid = trEl.getAttribute('colid');
-          const column = $xetable.getColumnById(colid);
-          if (!column) {
-            return;
+    }, props.enterDelay, {
+      leading: false,
+      trailing: true
+    });
+    tooltipMethods = {
+      dispatchEvent(type, params, evnt) {
+        emit(type, Object.assign({
+          $tooltip: $xetooltip,
+          $event: evnt
+        }, params));
+      },
+      open(target, content) {
+        return tooltipMethods.toVisible(target || reactData.target, content);
+      },
+      close() {
+        reactData.tipTarget = null;
+        reactData.tipActive = false;
+        Object.assign(reactData.tipStore, {
+          style: {},
+          placement: '',
+          arrowStyle: null
+        });
+        updateValue(false);
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      toVisible(target, content) {
+        if (target) {
+          const {
+            trigger,
+            enterDelay
+          } = props;
+          reactData.tipActive = true;
+          reactData.tipTarget = target;
+          if (content) {
+            reactData.tipContent = content;
           }
-          const cIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === column.id);
-          const targetColid = prevDropTrEl.getAttribute('colid');
-          const targetColumn = $xetable.getColumnById(targetColid);
-          if (!targetColumn) {
-            return;
+          if (enterDelay && trigger === 'hover') {
+            showDelayTip();
+          } else {
+            return showTip();
           }
-          // 移出源位置
-          customColumnList.splice(cIndex, 1);
-          const tcIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === targetColumn.id);
-          // 插新位置
-          customColumnList.splice(tcIndex + (dragOffset === 'bottom' ? 1 : 0), 0, column);
         }
-        prevDropTrEl.draggable = false;
-        prevDropTrEl.removeAttribute('drag-pos');
-        removeClass(prevDropTrEl, 'active--drag-target');
-      }
-      dragColumn.value = null;
-      trEl.draggable = false;
-      trEl.removeAttribute('drag-pos');
-      if (dragHintEl) {
-        dragHintEl.style.display = '';
-      }
-      removeClass(trEl, 'active--drag-target');
-      removeClass(trEl, 'active--drag-origin');
-      // 更新顺序
-      customColumnList.forEach((column, index) => {
-        column.renderSortNumber = index;
-      });
-    };
-    const sortDragoverEvent = evnt => {
-      const trEl = evnt.currentTarget;
-      if (prevDropTrEl !== trEl) {
-        removeClass(prevDropTrEl, 'active--drag-target');
-      }
-      const colid = trEl.getAttribute('colid');
-      const column = $xetable.getColumnById(colid);
-      // 是否移入有效元行
-      if (column && column.level === 1) {
-        evnt.preventDefault();
-        const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
-        const dragOffset = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
-        addClass(trEl, 'active--drag-target');
-        trEl.setAttribute('drag-pos', dragOffset);
-        prevDropTrEl = trEl;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      updatePlacement() {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
+          const {
+            tipTarget
+          } = reactData;
+          const el = refElem.value;
+          if (tipTarget && el) {
+            updateTipStyle();
+            return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(updateTipStyle);
+          }
+        });
+      },
+      isActived() {
+        return reactData.tipActive;
+      },
+      setActived(actived) {
+        reactData.tipActive = !!actived;
       }
-      updateDropHint(evnt);
     };
-    const updateDropHint = evnt => {
-      const dragHintEl = dragHintElemRef.value;
-      const bodyEl = bodyElemRef.value;
-      if (!bodyEl) {
-        return;
-      }
-      if (dragHintEl) {
-        const warpperEl = bodyEl.parentNode;
-        const warpperRect = warpperEl.getBoundingClientRect();
-        dragHintEl.style.display = 'block';
-        dragHintEl.style.top = `${Math.min(warpperEl.clientHeight - warpperEl.scrollTop - dragHintEl.clientHeight, evnt.clientY - warpperRect.y)}px`;
-        dragHintEl.style.left = `${Math.min(warpperEl.clientWidth - warpperEl.scrollLeft - dragHintEl.clientWidth - 16, evnt.clientX - warpperRect.x)}px`;
+    Object.assign($xetooltip, tooltipMethods);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.content, () => {
+      reactData.tipContent = props.content;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, () => {
+      if (!reactData.isUpdate) {
+        if (props.modelValue) {
+          tooltipMethods.open();
+        } else {
+          tooltipMethods.close();
+        }
       }
-    };
-    const renderSimplePanel = () => {
+      reactData.isUpdate = false;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        const {
+          trigger,
+          content,
+          modelValue
+        } = props;
+        const wrapperElem = refElem.value;
+        if (wrapperElem) {
+          const parentNode = wrapperElem.parentNode;
+          if (parentNode) {
+            reactData.tipContent = content;
+            reactData.tipZindex = nextZIndex();
+            external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(wrapperElem.children, (elem, index) => {
+              if (index > 1) {
+                parentNode.insertBefore(elem, wrapperElem);
+                if (!reactData.target) {
+                  reactData.target = elem;
+                }
+              }
+            });
+            parentNode.removeChild(wrapperElem);
+            const {
+              target
+            } = reactData;
+            if (target) {
+              if (trigger === 'hover') {
+                target.onmouseenter = targetMouseenterEvent;
+                target.onmouseleave = targetMouseleaveEvent;
+              } else if (trigger === 'click') {
+                target.onclick = clickEvent;
+              }
+            }
+            if (modelValue) {
+              tooltipMethods.open();
+            }
+          }
+        }
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       const {
-        customStore
+        trigger
       } = props;
       const {
-        customColumnList
+        target
       } = reactData;
-      const customOpts = computeCustomOpts.value;
-      const {
-        maxHeight
-      } = customStore;
-      const {
-        checkMethod,
-        visibleMethod,
-        trigger
-      } = customOpts;
-      const isMaxFixedColumn = computeIsMaxFixedColumn.value;
-      const colVNs = [];
-      const customWrapperOns = {};
-      // hover 触发
-      if (trigger === 'hover') {
-        customWrapperOns.onMouseenter = handleWrapperMouseenterEvent;
-        customWrapperOns.onMouseleave = handleWrapperMouseleaveEvent;
+      const wrapperElem = refElem.value;
+      if (target) {
+        if (trigger === 'hover') {
+          target.onmouseenter = null;
+          target.onmouseleave = null;
+        } else if (trigger === 'click') {
+          target.onclick = null;
+        }
       }
-      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(customColumnList, (column, index, items, path, parent) => {
-        const isVisible = visibleMethod ? visibleMethod({
-          column
-        }) : true;
-        if (isVisible) {
-          const isChecked = column.visible;
-          const isIndeterminate = column.halfVisible;
-          const isColGroup = column.children && column.children.length;
-          const colTitle = formatText(column.getTitle(), 1);
-          const isDisabled = checkMethod ? !checkMethod({
-            column
-          }) : false;
-          colVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('li', {
-            key: column.id,
-            class: ['vxe-table-custom--option', `level--${column.level}`, {
-              'is--group': isColGroup
-            }]
-          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            title: colTitle,
-            class: ['vxe-table-custom--checkbox-option', {
-              'is--checked': isChecked,
-              'is--indeterminate': isIndeterminate,
-              'is--disabled': isDisabled
-            }],
-            onClick: () => {
-              if (!isDisabled) {
-                changeCheckboxOption(column);
-              }
-            }
-          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-            class: ['vxe-checkbox--icon', isIndeterminate ? conf.icon.TABLE_CHECKBOX_INDETERMINATE : isChecked ? conf.icon.TABLE_CHECKBOX_CHECKED : conf.icon.TABLE_CHECKBOX_UNCHECKED]
-          }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-            class: 'vxe-checkbox--label'
-          }, colTitle)]), !parent && customOpts.allowFixed ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: 'vxe-table-custom--fixed-option'
-          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-            class: ['vxe-table-custom--fixed-left-option', column.fixed === 'left' ? conf.icon.TOOLBAR_TOOLS_FIXED_LEFT_ACTIVED : conf.icon.TOOLBAR_TOOLS_FIXED_LEFT, {
-              'is--checked': column.fixed === 'left',
-              'is--disabled': isMaxFixedColumn && !column.fixed
-            }],
-            title: conf.i18n(column.fixed === 'left' ? 'vxe.toolbar.cancelfixed' : 'vxe.toolbar.fixedLeft'),
-            onClick: () => {
-              changeFixedOption(column, 'left');
-            }
-          }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-            class: ['vxe-table-custom--fixed-right-option', column.fixed === 'right' ? conf.icon.TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVED : conf.icon.TOOLBAR_TOOLS_FIXED_RIGHT, {
-              'is--checked': column.fixed === 'right',
-              'is--disabled': isMaxFixedColumn && !column.fixed
-            }],
-            title: conf.i18n(column.fixed === 'right' ? 'vxe.toolbar.cancelfixed' : 'vxe.toolbar.fixedRight'),
-            onClick: () => {
-              changeFixedOption(column, 'right');
-            }
-          })]) : null]));
+      if (wrapperElem) {
+        const parentNode = wrapperElem.parentNode;
+        if (parentNode) {
+          parentNode.removeChild(wrapperElem);
         }
-      });
-      const isAllChecked = customStore.isAll;
-      const isAllIndeterminate = customStore.isIndeterminate;
+      }
+    });
+    const renderContent = () => {
+      const {
+        useHTML
+      } = props;
+      const {
+        tipContent
+      } = reactData;
+      const contentSlot = slots.content;
+      if (contentSlot) {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: 1,
+          class: 'vxe-table--tooltip-content'
+        }, getSlotVNs(contentSlot({})));
+      }
+      if (useHTML) {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: 2,
+          class: 'vxe-table--tooltip-content',
+          innerHTML: tipContent
+        });
+      }
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        key: 3,
+        class: 'vxe-table--tooltip-content'
+      }, formatText(tipContent));
+    };
+    const renderVN = () => {
+      const {
+        popupClassName,
+        theme,
+        isArrow,
+        enterable
+      } = props;
+      const {
+        tipActive,
+        visible,
+        tipStore
+      } = reactData;
+      const defaultSlot = slots.default;
+      const vSize = computeSize.value;
+      let ons;
+      if (enterable) {
+        ons = {
+          onMouseenter: wrapperMouseenterEvent,
+          onMouseleave: wrapperMouseleaveEvent
+        };
+      }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        key: 'simple',
-        class: ['vxe-table-custom-wrapper', {
-          'is--active': customStore.visible
-        }]
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('ul', {
-        class: 'vxe-table-custom--header'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('li', {
-        class: 'vxe-table-custom--option'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: ['vxe-table-custom--checkbox-option', {
-          'is--checked': isAllChecked,
-          'is--indeterminate': isAllIndeterminate
+        class: ['vxe-table--tooltip-wrapper', `theme--${theme}`, popupClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(popupClassName) ? popupClassName({
+          $tooltip: $xetooltip
+        }) : popupClassName : '', {
+          [`size--${vSize}`]: vSize,
+          [`placement--${tipStore.placement}`]: tipStore.placement,
+          'is--enterable': enterable,
+          'is--visible': visible,
+          'is--arrow': isArrow,
+          'is--active': tipActive
         }],
-        title: conf.i18n('vxe.table.allTitle'),
-        onClick: allCustomEvent
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: ['vxe-checkbox--icon', isAllIndeterminate ? conf.icon.TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? conf.icon.TABLE_CHECKBOX_CHECKED : conf.icon.TABLE_CHECKBOX_UNCHECKED]
-      }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: 'vxe-checkbox--label'
-      }, conf.i18n('vxe.toolbar.customAll'))])])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('ul', {
-        class: 'vxe-table-custom--body',
-        style: maxHeight ? {
-          maxHeight: `${maxHeight}px`
-        } : {},
-        ...customWrapperOns
-      }, colVNs), customOpts.showFooter ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-table-custom--footer'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('button', {
-        class: 'btn--reset',
-        onClick: resetCustomEvent
-      }, customOpts.resetButtonText || conf.i18n('vxe.toolbar.customRestore')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('button', {
-        class: 'btn--confirm',
-        onClick: confirmCustomEvent
-      }, customOpts.confirmButtonText || conf.i18n('vxe.toolbar.customConfirm'))]) : null]);
+        style: tipStore.style,
+        ...ons
+      }, [renderContent(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-table--tooltip-arrow',
+        style: tipStore.arrowStyle
+      }), ...(defaultSlot ? getSlotVNs(defaultSlot({})) : [])]);
     };
-    const renderPopupPanel = () => {
+    $xetooltip.renderVN = renderVN;
+    return $xetooltip;
+  },
+  render() {
+    return this.renderVN();
+  }
+}));
+;// CONCATENATED MODULE: ./packages/custom/src/panel.ts
+
+
+
+
+
+
+
+
+
+
+
+/* harmony default export */ var custom_src_panel = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
+  name: 'VxeTableCustomPanel',
+  props: {
+    customStore: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const $xetable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xetable', {});
+    const {
+      reactData
+    } = $xetable;
+    const {
+      computeCustomOpts,
+      computeColumnOpts,
+      computeIsMaxFixedColumn
+    } = $xetable.getComputeMaps();
+    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const bodyElemRef = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const dragHintElemRef = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const dragColumn = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    let prevDropTrEl;
+    const handleWrapperMouseenterEvent = evnt => {
+      const {
+        customStore
+      } = props;
+      customStore.activeWrapper = true;
+      $xetable.customOpenEvent(evnt);
+    };
+    const handleWrapperMouseleaveEvent = evnt => {
       const {
         customStore
       } = props;
+      customStore.activeWrapper = false;
+      setTimeout(() => {
+        if (!customStore.activeBtn && !customStore.activeWrapper) {
+          $xetable.customColseEvent(evnt);
+        }
+      }, 300);
+    };
+    const confirmCustomEvent = evnt => {
+      $xetable.closeCustom();
+      $xetable.emitCustomEvent('confirm', evnt);
+    };
+    const cancelCustomEvent = evnt => {
+      $xetable.closeCustom();
+      $xetable.emitCustomEvent('cancel', evnt);
+    };
+    const resetCustomEvent = evnt => {
+      $xetable.resetColumn(true);
+      $xetable.closeCustom();
+      $xetable.emitCustomEvent('reset', evnt);
+    };
+    const resetPopupCustomEvent = evnt => {
+      if (VXETable.modal) {
+        VXETable.modal.confirm({
+          content: conf.i18n('vxe.custom.cstmConfirmRestore'),
+          className: 'vxe-table--ignore-clear',
+          escClosable: true
+        }).then(type => {
+          if (type === 'confirm') {
+            resetCustomEvent(evnt);
+          }
+        });
+      } else {
+        resetCustomEvent(evnt);
+      }
+    };
+    const handleOptionCheck = column => {
       const {
         customColumnList
       } = reactData;
-      const customOpts = computeCustomOpts.value;
-      const {
+      const matchObj = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(customColumnList, item => item === column);
+      if (matchObj && matchObj.parent) {
+        const {
+          parent
+        } = matchObj;
+        if (parent.children && parent.children.length) {
+          parent.visible = parent.children.every(column => column.visible);
+          parent.halfVisible = !parent.visible && parent.children.some(column => column.visible || column.halfVisible);
+          handleOptionCheck(parent);
+        }
+      }
+    };
+    const changeCheckboxOption = column => {
+      const isChecked = !column.visible;
+      const customOpts = computeCustomOpts.value;
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([column], item => {
+        item.visible = isChecked;
+        item.halfVisible = false;
+      });
+      handleOptionCheck(column);
+      if (customOpts.immediate) {
+        $xetable.handleCustom();
+      }
+      $xetable.checkCustomStatus();
+    };
+    const changeFixedOption = (column, colFixed) => {
+      const isMaxFixedColumn = computeIsMaxFixedColumn.value;
+      if (column.fixed === colFixed) {
+        $xetable.clearColumnFixed(column);
+      } else {
+        if (!isMaxFixedColumn || column.fixed) {
+          $xetable.setColumnFixed(column, colFixed);
+        }
+      }
+    };
+    const changePopupFixedOption = column => {
+      const isMaxFixedColumn = computeIsMaxFixedColumn.value;
+      if (!isMaxFixedColumn) {
+        $xetable.setColumnFixed(column, column.fixed);
+      }
+    };
+    const allCustomEvent = () => {
+      const {
+        customStore
+      } = props;
+      const {
+        customColumnList
+      } = reactData;
+      const customOpts = computeCustomOpts.value;
+      const {
+        checkMethod
+      } = customOpts;
+      const isAll = !customStore.isAll;
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(customColumnList, column => {
+        if (!checkMethod || checkMethod({
+          column
+        })) {
+          column.visible = isAll;
+          column.halfVisible = false;
+        }
+      });
+      customStore.isAll = isAll;
+      $xetable.checkCustomStatus();
+    };
+    const sortMousedownEvent = evnt => {
+      const btnEl = evnt.currentTarget;
+      const tdEl = btnEl.parentNode;
+      const trEl = tdEl.parentNode;
+      const colid = trEl.getAttribute('colid');
+      const column = $xetable.getColumnById(colid);
+      trEl.draggable = true;
+      dragColumn.value = column;
+      addClass(trEl, 'active--drag-origin');
+    };
+    const sortMouseupEvent = evnt => {
+      const btnEl = evnt.currentTarget;
+      const tdEl = btnEl.parentNode;
+      const trEl = tdEl.parentNode;
+      const dragHintEl = dragHintElemRef.value;
+      trEl.draggable = false;
+      dragColumn.value = null;
+      removeClass(trEl, 'active--drag-origin');
+      if (dragHintEl) {
+        dragHintEl.style.display = '';
+      }
+    };
+    const sortDragstartEvent = evnt => {
+      const img = new Image();
+      if (evnt.dataTransfer) {
+        evnt.dataTransfer.setDragImage(img, 0, 0);
+      }
+    };
+    const sortDragendEvent = evnt => {
+      const {
+        customColumnList
+      } = reactData;
+      const trEl = evnt.currentTarget;
+      const dragHintEl = dragHintElemRef.value;
+      if (prevDropTrEl) {
+        // 判断是否有拖动
+        if (prevDropTrEl !== trEl) {
+          const dragOffset = prevDropTrEl.getAttribute('drag-pos');
+          const colid = trEl.getAttribute('colid');
+          const column = $xetable.getColumnById(colid);
+          if (!column) {
+            return;
+          }
+          const cIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === column.id);
+          const targetColid = prevDropTrEl.getAttribute('colid');
+          const targetColumn = $xetable.getColumnById(targetColid);
+          if (!targetColumn) {
+            return;
+          }
+          // 移出源位置
+          customColumnList.splice(cIndex, 1);
+          const tcIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === targetColumn.id);
+          // 插新位置
+          customColumnList.splice(tcIndex + (dragOffset === 'bottom' ? 1 : 0), 0, column);
+        }
+        prevDropTrEl.draggable = false;
+        prevDropTrEl.removeAttribute('drag-pos');
+        removeClass(prevDropTrEl, 'active--drag-target');
+      }
+      dragColumn.value = null;
+      trEl.draggable = false;
+      trEl.removeAttribute('drag-pos');
+      if (dragHintEl) {
+        dragHintEl.style.display = '';
+      }
+      removeClass(trEl, 'active--drag-target');
+      removeClass(trEl, 'active--drag-origin');
+      // 更新顺序
+      customColumnList.forEach((column, index) => {
+        column.renderSortNumber = index;
+      });
+    };
+    const sortDragoverEvent = evnt => {
+      const trEl = evnt.currentTarget;
+      if (prevDropTrEl !== trEl) {
+        removeClass(prevDropTrEl, 'active--drag-target');
+      }
+      const colid = trEl.getAttribute('colid');
+      const column = $xetable.getColumnById(colid);
+      // 是否移入有效元行
+      if (column && column.level === 1) {
+        evnt.preventDefault();
+        const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
+        const dragOffset = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
+        addClass(trEl, 'active--drag-target');
+        trEl.setAttribute('drag-pos', dragOffset);
+        prevDropTrEl = trEl;
+      }
+      updateDropHint(evnt);
+    };
+    const updateDropHint = evnt => {
+      const dragHintEl = dragHintElemRef.value;
+      const bodyEl = bodyElemRef.value;
+      if (!bodyEl) {
+        return;
+      }
+      if (dragHintEl) {
+        const warpperEl = bodyEl.parentNode;
+        const warpperRect = warpperEl.getBoundingClientRect();
+        dragHintEl.style.display = 'block';
+        dragHintEl.style.top = `${Math.min(warpperEl.clientHeight - warpperEl.scrollTop - dragHintEl.clientHeight, evnt.clientY - warpperRect.y)}px`;
+        dragHintEl.style.left = `${Math.min(warpperEl.clientWidth - warpperEl.scrollLeft - dragHintEl.clientWidth - 16, evnt.clientX - warpperRect.x)}px`;
+      }
+    };
+    const renderSimplePanel = () => {
+      const {
+        customStore
+      } = props;
+      const {
+        customColumnList
+      } = reactData;
+      const customOpts = computeCustomOpts.value;
+      const {
+        maxHeight
+      } = customStore;
+      const {
         checkMethod,
-        visibleMethod
+        visibleMethod,
+        trigger
       } = customOpts;
       const isMaxFixedColumn = computeIsMaxFixedColumn.value;
-      const trVNs = [];
+      const colVNs = [];
+      const customWrapperOns = {};
+      // hover 触发
+      if (trigger === 'hover') {
+        customWrapperOns.onMouseenter = handleWrapperMouseenterEvent;
+        customWrapperOns.onMouseleave = handleWrapperMouseleaveEvent;
+      }
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(customColumnList, (column, index, items, path, parent) => {
         const isVisible = visibleMethod ? visibleMethod({
           column
@@ -16861,36 +17170,18 @@ const Validator = VxeTableValidatorModule;
         if (isVisible) {
           const isChecked = column.visible;
           const isIndeterminate = column.halfVisible;
-          const colTitle = formatText(column.getTitle(), 1);
           const isColGroup = column.children && column.children.length;
+          const colTitle = formatText(column.getTitle(), 1);
           const isDisabled = checkMethod ? !checkMethod({
             column
           }) : false;
-          trVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {
+          colVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('li', {
             key: column.id,
-            colid: column.id,
-            class: [`vxe-table-custom-popup--row level--${column.level}`, {
+            class: ['vxe-table-custom--option', `level--${column.level}`, {
               'is--group': isColGroup
-            }],
-            onDragstart: sortDragstartEvent,
-            onDragend: sortDragendEvent,
-            onDragover: sortDragoverEvent
-          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
-            class: 'vxe-table-custom-popup--column-item col--sort'
-          }, [column.level === 1 ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-            class: 'vxe-table-custom-popup--column-sort-btn',
-            onMousedown: sortMousedownEvent,
-            onMouseup: sortMouseupEvent
-          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-            class: 'vxe-icon-sort'
-          })]) : null]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
-            class: 'vxe-table-custom-popup--column-item col--name'
-          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: 'vxe-table-custom-popup--name',
-            title: colTitle
-          }, colTitle)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
-            class: 'vxe-table-custom-popup--column-item col--visible'
+            }]
           }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            title: colTitle,
             class: ['vxe-table-custom--checkbox-option', {
               'is--checked': isChecked,
               'is--indeterminate': isIndeterminate,
@@ -16903,40 +17194,168 @@ const Validator = VxeTableValidatorModule;
             }
           }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
             class: ['vxe-checkbox--icon', isIndeterminate ? conf.icon.TABLE_CHECKBOX_INDETERMINATE : isChecked ? conf.icon.TABLE_CHECKBOX_CHECKED : conf.icon.TABLE_CHECKBOX_UNCHECKED]
-          })])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
-            class: 'vxe-table-custom-popup--column-item col--fixed'
-          }, [!parent && customOpts.allowFixed ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(group, {
-            modelValue: column.fixed || '',
-            type: 'button',
-            size: 'mini',
-            options: [{
-              label: conf.i18n('vxe.custom.setting.fixedLeft'),
-              value: 'left',
-              disabled: isMaxFixedColumn
-            }, {
-              label: conf.i18n('vxe.custom.setting.fixedUnset'),
-              value: ''
-            }, {
-              label: conf.i18n('vxe.custom.setting.fixedRight'),
-              value: 'right',
-              disabled: isMaxFixedColumn
+          }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+            class: 'vxe-checkbox--label'
+          }, colTitle)]), !parent && customOpts.allowFixed ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: 'vxe-table-custom--fixed-option'
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+            class: ['vxe-table-custom--fixed-left-option', column.fixed === 'left' ? conf.icon.TOOLBAR_TOOLS_FIXED_LEFT_ACTIVED : conf.icon.TOOLBAR_TOOLS_FIXED_LEFT, {
+              'is--checked': column.fixed === 'left',
+              'is--disabled': isMaxFixedColumn && !column.fixed
             }],
-            'onUpdate:modelValue'(value) {
-              column.fixed = value;
-            },
-            onChange() {
-              changePopupFixedOption(column);
+            title: conf.i18n(column.fixed === 'left' ? 'vxe.toolbar.cancelfixed' : 'vxe.toolbar.fixedLeft'),
+            onClick: () => {
+              changeFixedOption(column, 'left');
             }
-          }) : null])]));
-        }
-      });
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(modal, {
+          }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+            class: ['vxe-table-custom--fixed-right-option', column.fixed === 'right' ? conf.icon.TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVED : conf.icon.TOOLBAR_TOOLS_FIXED_RIGHT, {
+              'is--checked': column.fixed === 'right',
+              'is--disabled': isMaxFixedColumn && !column.fixed
+            }],
+            title: conf.i18n(column.fixed === 'right' ? 'vxe.toolbar.cancelfixed' : 'vxe.toolbar.fixedRight'),
+            onClick: () => {
+              changeFixedOption(column, 'right');
+            }
+          })]) : null]));
+        }
+      });
+      const isAllChecked = customStore.isAll;
+      const isAllIndeterminate = customStore.isIndeterminate;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refElem,
+        key: 'simple',
+        class: ['vxe-table-custom-wrapper', {
+          'is--active': customStore.visible
+        }]
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('ul', {
+        class: 'vxe-table-custom--header'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('li', {
+        class: 'vxe-table-custom--option'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: ['vxe-table-custom--checkbox-option', {
+          'is--checked': isAllChecked,
+          'is--indeterminate': isAllIndeterminate
+        }],
+        title: conf.i18n('vxe.table.allTitle'),
+        onClick: allCustomEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        class: ['vxe-checkbox--icon', isAllIndeterminate ? conf.icon.TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? conf.icon.TABLE_CHECKBOX_CHECKED : conf.icon.TABLE_CHECKBOX_UNCHECKED]
+      }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        class: 'vxe-checkbox--label'
+      }, conf.i18n('vxe.toolbar.customAll'))])])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('ul', {
+        class: 'vxe-table-custom--body',
+        style: maxHeight ? {
+          maxHeight: `${maxHeight}px`
+        } : {},
+        ...customWrapperOns
+      }, colVNs), customOpts.showFooter ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-table-custom--footer'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('button', {
+        class: 'btn--reset',
+        onClick: resetCustomEvent
+      }, customOpts.resetButtonText || conf.i18n('vxe.toolbar.customRestore')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('button', {
+        class: 'btn--confirm',
+        onClick: confirmCustomEvent
+      }, customOpts.confirmButtonText || conf.i18n('vxe.toolbar.customConfirm'))]) : null]);
+    };
+    const renderPopupPanel = () => {
+      const {
+        customStore
+      } = props;
+      const {
+        customColumnList
+      } = reactData;
+      const customOpts = computeCustomOpts.value;
+      const {
+        checkMethod,
+        visibleMethod
+      } = customOpts;
+      const columnOpts = computeColumnOpts.value;
+      const isMaxFixedColumn = computeIsMaxFixedColumn.value;
+      const trVNs = [];
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(customColumnList, (column, index, items, path, parent) => {
+        const isVisible = visibleMethod ? visibleMethod({
+          column
+        }) : true;
+        if (isVisible) {
+          const isChecked = column.visible;
+          const isIndeterminate = column.halfVisible;
+          const colTitle = formatText(column.getTitle(), 1);
+          const isColGroup = column.children && column.children.length;
+          const isDisabled = checkMethod ? !checkMethod({
+            column
+          }) : false;
+          trVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {
+            key: column.id,
+            colid: column.id,
+            class: [`vxe-table-custom-popup--row level--${column.level}`, {
+              'is--group': isColGroup
+            }],
+            onDragstart: sortDragstartEvent,
+            onDragend: sortDragendEvent,
+            onDragover: sortDragoverEvent
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
+            class: 'vxe-table-custom-popup--column-item col--sort'
+          }, [column.level === 1 ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+            class: 'vxe-table-custom-popup--column-sort-btn',
+            onMousedown: sortMousedownEvent,
+            onMouseup: sortMouseupEvent
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+            class: 'vxe-icon-sort'
+          })]) : null]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
+            class: 'vxe-table-custom-popup--column-item col--name'
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: 'vxe-table-custom-popup--name',
+            title: colTitle
+          }, colTitle)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
+            class: 'vxe-table-custom-popup--column-item col--visible'
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: ['vxe-table-custom--checkbox-option', {
+              'is--checked': isChecked,
+              'is--indeterminate': isIndeterminate,
+              'is--disabled': isDisabled
+            }],
+            onClick: () => {
+              if (!isDisabled) {
+                changeCheckboxOption(column);
+              }
+            }
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+            class: ['vxe-checkbox--icon', isIndeterminate ? conf.icon.TABLE_CHECKBOX_INDETERMINATE : isChecked ? conf.icon.TABLE_CHECKBOX_CHECKED : conf.icon.TABLE_CHECKBOX_UNCHECKED]
+          })])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
+            class: 'vxe-table-custom-popup--column-item col--fixed'
+          }, [!parent && customOpts.allowFixed ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(group, {
+            modelValue: column.fixed || '',
+            type: 'button',
+            size: 'mini',
+            options: [{
+              label: conf.i18n('vxe.custom.setting.fixedLeft'),
+              value: 'left',
+              disabled: isMaxFixedColumn
+            }, {
+              label: conf.i18n('vxe.custom.setting.fixedUnset'),
+              value: ''
+            }, {
+              label: conf.i18n('vxe.custom.setting.fixedRight'),
+              value: 'right',
+              disabled: isMaxFixedColumn
+            }],
+            'onUpdate:modelValue'(value) {
+              column.fixed = value;
+            },
+            onChange() {
+              changePopupFixedOption(column);
+            }
+          }) : null])]));
+        }
+      });
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(modal, {
         key: 'popup',
         className: 'vxe-table-custom-popup-wrapper vxe-table--ignore-clear',
         modelValue: customStore.visible,
         title: conf.i18n('vxe.custom.cstmTitle'),
         width: '40vw',
-        minWidth: 500,
+        minWidth: 520,
         height: '50vh',
         minHeight: 300,
         mask: true,
@@ -16957,9 +17376,9 @@ const Validator = VxeTableValidatorModule;
             class: 'vxe-table-custom-popup--table-wrapper'
           }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('table', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('colgroup', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('col', {
             style: {
-              width: '60px'
+              width: '80px'
             }
-          }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('col'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('col', {
+          }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('col', {}), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('col', {
             style: {
               width: '80px'
             }
@@ -16967,7 +17386,18 @@ const Validator = VxeTableValidatorModule;
             style: {
               width: '200px'
             }
-          })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('thead', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, conf.i18n('vxe.custom.setting.colSort')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, conf.i18n('vxe.custom.setting.colTitle')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, conf.i18n('vxe.custom.setting.colVisible')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, conf.i18n('vxe.custom.setting.colFixed'))])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.TransitionGroup, {
+          })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('thead', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+            class: 'vxe-table-custom-popup--table-sort-help-title'
+          }, conf.i18n('vxe.custom.setting.colSort')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(tooltip, {
+            enterable: true,
+            content: conf.i18n('vxe.custom.setting.sortHelpTip')
+          }, {
+            default: () => {
+              return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+                class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
+              });
+            }
+          })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, conf.i18n('vxe.custom.setting.colTitle')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, conf.i18n('vxe.custom.setting.colVisible')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, conf.i18n('vxe.custom.setting.colFixed', [columnOpts.maxFixedSize || 0]))])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.TransitionGroup, {
             class: 'vxe-table-custom--body',
             tag: 'tbody',
             name: 'vxe-table-custom--flip'
@@ -20756,6 +21186,11 @@ const sortStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_SORT';
           row: null,
           column: null
         },
+        // 当前被强制聚焦单元格，只会在鼠标点击后算聚焦
+        focused: {
+          row: null,
+          column: null
+        },
         insertMaps: {},
         removeMaps: {}
       },
@@ -25243,6 +25678,7 @@ const sortStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_SORT';
         return !!rowExpandedMaps[rowid];
       },
       isExpandByRow(row) {
+        // 已废弃
         if (true) {
           warnLog('vxe.error.delFunc', ['isExpandByRow', 'isRowExpandByRow']);
         }
@@ -25824,7 +26260,7 @@ const sortStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_SORT';
               // 如果是激活状态，点击了单元格之外
               if (!getEventTargetNode(evnt, document.body, 'vxe-table--ignore-clear').flag) {
                 // 如果手动调用了激活单元格，避免触发源被移除后导致重复关闭
-                tablePrivateMethods.preventEvent(evnt, 'event.clearActived', actived.args, () => {
+                tablePrivateMethods.preventEvent(evnt, 'event.clearEdit', actived.args, () => {
                   let isClear;
                   if (editOpts.mode === 'row') {
                     const rowTargetNode = getEventTargetNode(evnt, el, 'vxe-body--row');
@@ -26770,7 +27206,12 @@ const sortStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_SORT';
         reactData.reColumnFlag++;
       },
       preventEvent(evnt, type, args, next, end) {
-        const evntList = VXETable.interceptor.get(type);
+        let evntList = VXETable.interceptor.get(type);
+        // 兼容老版本
+        if (!evntList.length && type === 'event.clearEdit') {
+          evntList = VXETable.interceptor.get('event.clearActived');
+        }
+        // 兼容老版本
         let rest;
         if (!evntList.some(func => func(Object.assign({
           $grid: $xegrid,
@@ -27488,7 +27929,7 @@ const sortStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_SORT';
         } = expandOpts;
         const rowid = getRowid($xetable, row);
         if (!lazy || !rowExpandLazyLoadedMaps[rowid]) {
-          const expanded = !tableMethods.isExpandByRow(row);
+          const expanded = !tableMethods.isRowExpandByRow(row);
           const columnIndex = tableMethods.getColumnIndex(column);
           const $columnIndex = tableMethods.getVMColumnIndex(column);
           tableMethods.setRowExpand(row, expanded);
@@ -29653,635 +30094,223 @@ dynamicApp.component(src_button.name, src_button);
         emit(type, Object.assign({
           $toolbar: $xetoolbar,
           $event: evnt
-        }, params));
-      },
-      syncUpdate(params) {
-        const {
-          collectColumn
-        } = params;
-        $xetable = params.$table;
-        reactData.columns = collectColumn;
-        connectFlag.value++;
-      }
-    };
-    Object.assign($xetoolbar, toolbarMethods);
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-      const {
-        refresh
-      } = props;
-      const refreshOpts = computeRefreshOpts.value;
-      const queryMethod = refreshOpts.queryMethod || refreshOpts.query;
-      if (refresh && !$xegrid && !queryMethod) {
-        warnLog('vxe.error.notFunc', ['queryMethod']);
-      }
-      const customOpts = computeCustomOpts.value;
-      if (true) {
-        if (customOpts.isFooter) {
-          warnLog('vxe.error.delProp', ['toolbar.custom.isFooter', 'table.custom-config.showFooter']);
-        }
-        if (customOpts.showFooter) {
-          warnLog('vxe.error.delProp', ['toolbar.custom.showFooter', 'table.custom-config.showFooter']);
-        }
-        if (customOpts.immediate) {
-          warnLog('vxe.error.delProp', ['toolbar.custom.immediate', 'table.custom-config.immediate']);
-        }
-        if (customOpts.trigger) {
-          warnLog('vxe.error.delProp', ['toolbar.custom.trigger', 'table.custom-config.trigger']);
-        }
-      }
-    });
-    const renderVN = () => {
-      const {
-        perfect,
-        loading,
-        refresh,
-        zoom,
-        custom,
-        className
-      } = props;
-      const vSize = computeSize.value;
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refElem,
-        class: ['vxe-toolbar', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
-          $toolbar: $xetoolbar
-        }) : className : '', {
-          [`size--${vSize}`]: vSize,
-          'is--perfect': perfect,
-          'is--loading': loading
-        }]
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-buttons--wrapper'
-      }, renderBtns()), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-tools--wrapper'
-      }, renderRightTools()), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-tools--operate'
-      }, [props.import ? renderToolImport() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), props.export ? renderToolExport() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), props.print ? renderToolPrint() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), refresh ? renderToolRefresh() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), zoom && $xegrid ? renderToolZoom() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), custom ? renderToolCustom() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)()])]);
-    };
-    $xetoolbar.renderVN = renderVN;
-    return $xetoolbar;
-  },
-  render() {
-    return this.renderVN();
-  }
-}));
-;// CONCATENATED MODULE: ./packages/toolbar/index.ts
-
-
-const VxeToolbar = Object.assign(toolbar, {
-  install: function (app) {
-    app.component(toolbar.name, toolbar);
-  }
-});
-const Toolbar = VxeToolbar;
-dynamicApp.component(toolbar.name, toolbar);
-/* harmony default export */ var packages_toolbar = (VxeToolbar);
-;// CONCATENATED MODULE: ./packages/form/src/itemInfo.ts
-
-class ItemInfo {
-  constructor($xeform, item) {
-    Object.assign(this, {
-      id: external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId('item_'),
-      title: item.title,
-      field: item.field,
-      span: item.span,
-      align: item.align,
-      titleAlign: item.titleAlign,
-      titleWidth: item.titleWidth,
-      titleColon: item.titleColon,
-      titleAsterisk: item.titleAsterisk,
-      titlePrefix: item.titlePrefix,
-      titleSuffix: item.titleSuffix,
-      titleOverflow: item.titleOverflow,
-      showTitle: item.showTitle,
-      resetValue: item.resetValue,
-      visibleMethod: item.visibleMethod,
-      visible: item.visible,
-      folding: item.folding,
-      collapseNode: item.collapseNode,
-      className: item.className,
-      contentClassName: item.contentClassName,
-      contentStyle: item.contentStyle,
-      titleClassName: item.titleClassName,
-      titleStyle: item.titleStyle,
-      itemRender: item.itemRender,
-      // 渲染属性
-      showError: false,
-      errRule: null,
-      slots: item.slots,
-      children: []
-    });
-  }
-  update(name, value) {
-    this[name] = value;
-  }
-}
-;// CONCATENATED MODULE: ./packages/form/src/util.ts
-
-
-
-
-
-function isFormItem(item) {
-  return item instanceof ItemInfo;
-}
-function createItem($xeform, _vm) {
-  return isFormItem(_vm) ? _vm : new ItemInfo($xeform, _vm);
-}
-function handleFieldOrItem($xeform, fieldOrItem) {
-  if (fieldOrItem) {
-    return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(fieldOrItem) ? $xeform.getItemByField(fieldOrItem) : fieldOrItem;
-  }
-  return null;
-}
-function isHiddenItem($xeform, formItem) {
-  const {
-    reactData
-  } = $xeform;
-  const {
-    collapseAll
-  } = reactData;
-  const {
-    folding,
-    visible
-  } = formItem;
-  return visible === false || folding && collapseAll;
-}
-function isActivetem($xeform, formItem) {
-  let {
-    visibleMethod,
-    itemRender,
-    visible,
-    field
-  } = formItem;
-  if (visible === false) {
-    return visible;
-  }
-  const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null;
-  if (!visibleMethod && compConf && compConf.itemVisibleMethod) {
-    visibleMethod = compConf.itemVisibleMethod;
-  }
-  if (!visibleMethod) {
-    return true;
-  }
-  const {
-    data
-  } = $xeform.props;
-  return visibleMethod({
-    data,
-    field,
-    property: field,
-    item: formItem,
-    $form: $xeform,
-    $grid: $xeform.xegrid
-  });
-}
-function watchItem(props, formItem) {
-  Object.keys(props).forEach(name => {
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props[name], value => {
-      formItem.update(name, value);
-    });
-  });
-}
-function assemItem($xeform, el, formItem, formGather) {
-  const {
-    reactData
-  } = $xeform;
-  const {
-    staticItems
-  } = reactData;
-  const parentElem = el.parentNode;
-  const parentItem = formGather ? formGather.formItem : null;
-  const parentItems = parentItem ? parentItem.children : staticItems;
-  if (parentElem) {
-    parentItems.splice(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayIndexOf(parentElem.children, el), 0, formItem);
-    reactData.staticItems = staticItems.slice(0);
-  }
-}
-function destroyItem($xeform, formItem) {
-  const {
-    reactData
-  } = $xeform;
-  const {
-    staticItems
-  } = reactData;
-  const index = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(staticItems, item => item.id === formItem.id);
-  if (index > -1) {
-    staticItems.splice(index, 1);
-  }
-  reactData.staticItems = staticItems.slice(0);
-}
-;// CONCATENATED MODULE: ./packages/tooltip/src/tooltip.ts
-
-
-
-
-
-
-
-/* harmony default export */ var tooltip = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
-  name: 'VxeTooltip',
-  props: {
-    modelValue: Boolean,
-    size: {
-      type: String,
-      default: () => conf.tooltip.size || conf.size
-    },
-    trigger: {
-      type: String,
-      default: () => conf.tooltip.trigger
-    },
-    theme: {
-      type: String,
-      default: () => conf.tooltip.theme
-    },
-    content: {
-      type: [String, Number],
-      default: null
-    },
-    useHTML: Boolean,
-    zIndex: [String, Number],
-    popupClassName: [String, Function],
-    isArrow: {
-      type: Boolean,
-      default: true
-    },
-    enterable: Boolean,
-    enterDelay: {
-      type: Number,
-      default: () => conf.tooltip.enterDelay
-    },
-    leaveDelay: {
-      type: Number,
-      default: () => conf.tooltip.leaveDelay
-    }
-  },
-  emits: ['update:modelValue'],
-  setup(props, context) {
-    const {
-      slots,
-      emit
-    } = context;
-    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
-    const computeSize = useSize(props);
-    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
-      target: null,
-      isUpdate: false,
-      visible: false,
-      tipContent: '',
-      tipActive: false,
-      tipTarget: null,
-      tipZindex: 0,
-      tipStore: {
-        style: {},
-        placement: '',
-        arrowStyle: {}
-      }
-    });
-    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const refMaps = {
-      refElem
-    };
-    const $xetooltip = {
-      xID,
-      props,
-      context,
-      reactData,
-      getRefMaps: () => refMaps
-    };
-    let tooltipMethods = {};
-    const updateTipStyle = () => {
-      const {
-        tipTarget,
-        tipStore
-      } = reactData;
-      if (tipTarget) {
-        const {
-          scrollTop,
-          scrollLeft,
-          visibleWidth
-        } = getDomNode();
-        const {
-          top,
-          left
-        } = getAbsolutePos(tipTarget);
-        const el = refElem.value;
-        const marginSize = 6;
-        const offsetHeight = el.offsetHeight;
-        const offsetWidth = el.offsetWidth;
-        let tipLeft = left;
-        let tipTop = top - offsetHeight - marginSize;
-        tipLeft = Math.max(marginSize, left + Math.floor((tipTarget.offsetWidth - offsetWidth) / 2));
-        if (tipLeft + offsetWidth + marginSize > scrollLeft + visibleWidth) {
-          tipLeft = scrollLeft + visibleWidth - offsetWidth - marginSize;
-        }
-        if (top - offsetHeight < scrollTop + marginSize) {
-          tipStore.placement = 'bottom';
-          tipTop = top + tipTarget.offsetHeight + marginSize;
-        }
-        tipStore.style.top = `${tipTop}px`;
-        tipStore.style.left = `${tipLeft}px`;
-        tipStore.arrowStyle.left = `${left - tipLeft + tipTarget.offsetWidth / 2}px`;
-      }
-    };
-    const updateValue = value => {
-      if (value !== reactData.visible) {
-        reactData.visible = value;
-        reactData.isUpdate = true;
-        emit('update:modelValue', value);
-      }
-    };
-    const updateZindex = () => {
-      if (reactData.tipZindex < getLastZIndex()) {
-        reactData.tipZindex = nextZIndex();
-      }
-    };
-    const clickEvent = () => {
-      if (reactData.visible) {
-        tooltipMethods.close();
-      } else {
-        tooltipMethods.open();
-      }
-    };
-    const targetMouseenterEvent = () => {
-      tooltipMethods.open();
-    };
-    const targetMouseleaveEvent = () => {
-      const {
-        trigger,
-        enterable,
-        leaveDelay
-      } = props;
-      reactData.tipActive = false;
-      if (enterable && trigger === 'hover') {
-        setTimeout(() => {
-          if (!reactData.tipActive) {
-            tooltipMethods.close();
-          }
-        }, leaveDelay);
-      } else {
-        tooltipMethods.close();
-      }
-    };
-    const wrapperMouseenterEvent = () => {
-      reactData.tipActive = true;
-    };
-    const wrapperMouseleaveEvent = () => {
-      const {
-        trigger,
-        enterable,
-        leaveDelay
-      } = props;
-      reactData.tipActive = false;
-      if (enterable && trigger === 'hover') {
-        setTimeout(() => {
-          if (!reactData.tipActive) {
-            tooltipMethods.close();
-          }
-        }, leaveDelay);
-      }
-    };
-    const showTip = () => {
-      const {
-        tipStore
-      } = reactData;
-      const el = refElem.value;
-      if (el) {
-        const parentNode = el.parentNode;
-        if (!parentNode) {
-          document.body.appendChild(el);
-        }
-      }
-      updateValue(true);
-      updateZindex();
-      tipStore.placement = 'top';
-      tipStore.style = {
-        width: 'auto',
-        left: 0,
-        top: 0,
-        zIndex: props.zIndex || reactData.tipZindex
-      };
-      tipStore.arrowStyle = {
-        left: '50%'
-      };
-      return tooltipMethods.updatePlacement();
-    };
-    const showDelayTip = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().debounce(() => {
-      if (reactData.tipActive) {
-        showTip();
-      }
-    }, props.enterDelay, {
-      leading: false,
-      trailing: true
-    });
-    tooltipMethods = {
-      dispatchEvent(type, params, evnt) {
-        emit(type, Object.assign({
-          $tooltip: $xetooltip,
-          $event: evnt
-        }, params));
-      },
-      open(target, content) {
-        return tooltipMethods.toVisible(target || reactData.target, content);
-      },
-      close() {
-        reactData.tipTarget = null;
-        reactData.tipActive = false;
-        Object.assign(reactData.tipStore, {
-          style: {},
-          placement: '',
-          arrowStyle: null
-        });
-        updateValue(false);
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      toVisible(target, content) {
-        if (target) {
-          const {
-            trigger,
-            enterDelay
-          } = props;
-          reactData.tipActive = true;
-          reactData.tipTarget = target;
-          if (content) {
-            reactData.tipContent = content;
-          }
-          if (enterDelay && trigger === 'hover') {
-            showDelayTip();
-          } else {
-            return showTip();
-          }
-        }
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      updatePlacement() {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
-          const {
-            tipTarget
-          } = reactData;
-          const el = refElem.value;
-          if (tipTarget && el) {
-            updateTipStyle();
-            return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(updateTipStyle);
-          }
-        });
-      },
-      isActived() {
-        return reactData.tipActive;
-      },
-      setActived(actived) {
-        reactData.tipActive = !!actived;
-      }
-    };
-    Object.assign($xetooltip, tooltipMethods);
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.content, () => {
-      reactData.tipContent = props.content;
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, () => {
-      if (!reactData.isUpdate) {
-        if (props.modelValue) {
-          tooltipMethods.open();
-        } else {
-          tooltipMethods.close();
-        }
-      }
-      reactData.isUpdate = false;
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-        const {
-          trigger,
-          content,
-          modelValue
-        } = props;
-        const wrapperElem = refElem.value;
-        if (wrapperElem) {
-          const parentNode = wrapperElem.parentNode;
-          if (parentNode) {
-            reactData.tipContent = content;
-            reactData.tipZindex = nextZIndex();
-            external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(wrapperElem.children, (elem, index) => {
-              if (index > 1) {
-                parentNode.insertBefore(elem, wrapperElem);
-                if (!reactData.target) {
-                  reactData.target = elem;
-                }
-              }
-            });
-            parentNode.removeChild(wrapperElem);
-            const {
-              target
-            } = reactData;
-            if (target) {
-              if (trigger === 'hover') {
-                target.onmouseenter = targetMouseenterEvent;
-                target.onmouseleave = targetMouseleaveEvent;
-              } else if (trigger === 'click') {
-                target.onclick = clickEvent;
-              }
-            }
-            if (modelValue) {
-              tooltipMethods.open();
-            }
-          }
-        }
-      });
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
-      const {
-        trigger
-      } = props;
-      const {
-        target
-      } = reactData;
-      const wrapperElem = refElem.value;
-      if (target) {
-        if (trigger === 'hover') {
-          target.onmouseenter = null;
-          target.onmouseleave = null;
-        } else if (trigger === 'click') {
-          target.onclick = null;
-        }
-      }
-      if (wrapperElem) {
-        const parentNode = wrapperElem.parentNode;
-        if (parentNode) {
-          parentNode.removeChild(wrapperElem);
-        }
+        }, params));
+      },
+      syncUpdate(params) {
+        const {
+          collectColumn
+        } = params;
+        $xetable = params.$table;
+        reactData.columns = collectColumn;
+        connectFlag.value++;
       }
-    });
-    const renderContent = () => {
+    };
+    Object.assign($xetoolbar, toolbarMethods);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
       const {
-        useHTML
+        refresh
       } = props;
-      const {
-        tipContent
-      } = reactData;
-      const contentSlot = slots.content;
-      if (contentSlot) {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          key: 1,
-          class: 'vxe-table--tooltip-content'
-        }, getSlotVNs(contentSlot({})));
+      const refreshOpts = computeRefreshOpts.value;
+      const queryMethod = refreshOpts.queryMethod || refreshOpts.query;
+      if (refresh && !$xegrid && !queryMethod) {
+        warnLog('vxe.error.notFunc', ['queryMethod']);
       }
-      if (useHTML) {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          key: 2,
-          class: 'vxe-table--tooltip-content',
-          innerHTML: tipContent
-        });
+      const customOpts = computeCustomOpts.value;
+      if (true) {
+        if (customOpts.isFooter) {
+          warnLog('vxe.error.delProp', ['toolbar.custom.isFooter', 'table.custom-config.showFooter']);
+        }
+        if (customOpts.showFooter) {
+          warnLog('vxe.error.delProp', ['toolbar.custom.showFooter', 'table.custom-config.showFooter']);
+        }
+        if (customOpts.immediate) {
+          warnLog('vxe.error.delProp', ['toolbar.custom.immediate', 'table.custom-config.immediate']);
+        }
+        if (customOpts.trigger) {
+          warnLog('vxe.error.delProp', ['toolbar.custom.trigger', 'table.custom-config.trigger']);
+        }
       }
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: 3,
-        class: 'vxe-table--tooltip-content'
-      }, formatText(tipContent));
-    };
+    });
     const renderVN = () => {
       const {
-        popupClassName,
-        theme,
-        isArrow,
-        enterable
+        perfect,
+        loading,
+        refresh,
+        zoom,
+        custom,
+        className
       } = props;
-      const {
-        tipActive,
-        visible,
-        tipStore
-      } = reactData;
-      const defaultSlot = slots.default;
       const vSize = computeSize.value;
-      let ons;
-      if (enterable) {
-        ons = {
-          onMouseenter: wrapperMouseenterEvent,
-          onMouseleave: wrapperMouseleaveEvent
-        };
-      }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        class: ['vxe-table--tooltip-wrapper', `theme--${theme}`, popupClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(popupClassName) ? popupClassName({
-          $tooltip: $xetooltip
-        }) : popupClassName : '', {
+        class: ['vxe-toolbar', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
+          $toolbar: $xetoolbar
+        }) : className : '', {
           [`size--${vSize}`]: vSize,
-          [`placement--${tipStore.placement}`]: tipStore.placement,
-          'is--enterable': enterable,
-          'is--visible': visible,
-          'is--arrow': isArrow,
-          'is--active': tipActive
-        }],
-        style: tipStore.style,
-        ...ons
-      }, [renderContent(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-table--tooltip-arrow',
-        style: tipStore.arrowStyle
-      }), ...(defaultSlot ? getSlotVNs(defaultSlot({})) : [])]);
+          'is--perfect': perfect,
+          'is--loading': loading
+        }]
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-buttons--wrapper'
+      }, renderBtns()), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-tools--wrapper'
+      }, renderRightTools()), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-tools--operate'
+      }, [props.import ? renderToolImport() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), props.export ? renderToolExport() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), props.print ? renderToolPrint() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), refresh ? renderToolRefresh() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), zoom && $xegrid ? renderToolZoom() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), custom ? renderToolCustom() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)()])]);
     };
-    $xetooltip.renderVN = renderVN;
-    return $xetooltip;
+    $xetoolbar.renderVN = renderVN;
+    return $xetoolbar;
   },
   render() {
     return this.renderVN();
   }
 }));
+;// CONCATENATED MODULE: ./packages/toolbar/index.ts
+
+
+const VxeToolbar = Object.assign(toolbar, {
+  install: function (app) {
+    app.component(toolbar.name, toolbar);
+  }
+});
+const Toolbar = VxeToolbar;
+dynamicApp.component(toolbar.name, toolbar);
+/* harmony default export */ var packages_toolbar = (VxeToolbar);
+;// CONCATENATED MODULE: ./packages/form/src/itemInfo.ts
+
+class ItemInfo {
+  constructor($xeform, item) {
+    Object.assign(this, {
+      id: external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId('item_'),
+      title: item.title,
+      field: item.field,
+      span: item.span,
+      align: item.align,
+      titleAlign: item.titleAlign,
+      titleWidth: item.titleWidth,
+      titleColon: item.titleColon,
+      titleAsterisk: item.titleAsterisk,
+      titlePrefix: item.titlePrefix,
+      titleSuffix: item.titleSuffix,
+      titleOverflow: item.titleOverflow,
+      showTitle: item.showTitle,
+      resetValue: item.resetValue,
+      visibleMethod: item.visibleMethod,
+      visible: item.visible,
+      folding: item.folding,
+      collapseNode: item.collapseNode,
+      className: item.className,
+      contentClassName: item.contentClassName,
+      contentStyle: item.contentStyle,
+      titleClassName: item.titleClassName,
+      titleStyle: item.titleStyle,
+      itemRender: item.itemRender,
+      // 渲染属性
+      showError: false,
+      errRule: null,
+      slots: item.slots,
+      children: []
+    });
+  }
+  update(name, value) {
+    this[name] = value;
+  }
+}
+;// CONCATENATED MODULE: ./packages/form/src/util.ts
+
+
+
+
+
+function isFormItem(item) {
+  return item instanceof ItemInfo;
+}
+function createItem($xeform, _vm) {
+  return isFormItem(_vm) ? _vm : new ItemInfo($xeform, _vm);
+}
+function handleFieldOrItem($xeform, fieldOrItem) {
+  if (fieldOrItem) {
+    return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(fieldOrItem) ? $xeform.getItemByField(fieldOrItem) : fieldOrItem;
+  }
+  return null;
+}
+function isHiddenItem($xeform, formItem) {
+  const {
+    reactData
+  } = $xeform;
+  const {
+    collapseAll
+  } = reactData;
+  const {
+    folding,
+    visible
+  } = formItem;
+  return visible === false || folding && collapseAll;
+}
+function isActivetem($xeform, formItem) {
+  let {
+    visibleMethod,
+    itemRender,
+    visible,
+    field
+  } = formItem;
+  if (visible === false) {
+    return visible;
+  }
+  const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null;
+  if (!visibleMethod && compConf && compConf.itemVisibleMethod) {
+    visibleMethod = compConf.itemVisibleMethod;
+  }
+  if (!visibleMethod) {
+    return true;
+  }
+  const {
+    data
+  } = $xeform.props;
+  return visibleMethod({
+    data,
+    field,
+    property: field,
+    item: formItem,
+    $form: $xeform,
+    $grid: $xeform.xegrid
+  });
+}
+function watchItem(props, formItem) {
+  Object.keys(props).forEach(name => {
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props[name], value => {
+      formItem.update(name, value);
+    });
+  });
+}
+function assemItem($xeform, el, formItem, formGather) {
+  const {
+    reactData
+  } = $xeform;
+  const {
+    staticItems
+  } = reactData;
+  const parentElem = el.parentNode;
+  const parentItem = formGather ? formGather.formItem : null;
+  const parentItems = parentItem ? parentItem.children : staticItems;
+  if (parentElem) {
+    parentItems.splice(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayIndexOf(parentElem.children, el), 0, formItem);
+    reactData.staticItems = staticItems.slice(0);
+  }
+}
+function destroyItem($xeform, formItem) {
+  const {
+    reactData
+  } = $xeform;
+  const {
+    staticItems
+  } = reactData;
+  const index = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(staticItems, item => item.id === formItem.id);
+  if (index > -1) {
+    staticItems.splice(index, 1);
+  }
+  reactData.staticItems = staticItems.slice(0);
+}
 ;// CONCATENATED MODULE: ./packages/tooltip/index.ts
 
 
@@ -34953,9 +34982,10 @@ dynamicApp.component(pulldown.name, pulldown);
       cstmDragTarget: '移动目标：{0}',
       setting: {
         colSort: '排序',
+        sortHelpTip: '点击并拖动图标可以调整列的排序',
         colTitle: '标题',
         colVisible: '是否显示',
-        colFixed: '冻结列',
+        colFixed: '冻结列（最多 {0} 列）',
         fixedLeft: '左侧',
         fixedUnset: '不设置',
         fixedRight: '右侧'