vxe-table 4.6.0-beta.7 → 4.6.0-beta.8

package/README.en.md

@@ -104,8 +104,8 @@ createApp(App).use(VXETable).mount('#app')
 
 ### CDN
 
-Remember to lock the version number in CDN mode to avoid being affected by incompatible updates  
-***It is not recommended to use the CDN address of a third party for production, as the connection may fail at any time***  
+Use a third-party CDN to remember to lock the version number to avoid being affected by incompatible updates.  
+***It is not recommended to use the CDN address of a third party in a formal environment because the connection can fail at any time***  
 
 ```HTML
 <!-- Style -->

package/README.md

@@ -105,8 +105,8 @@ createApp(App).use(VXETable).mount('#app')
 
 ### CDN
 
-使用 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响  
-***不建议将第三方的 CDN 地址用于生产，因为该连接随时都可能会失效***  
+使用第三方 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响  
+***不建议将第三方的 CDN 地址用于正式环境，因为该连接随时都可能会失效***  
 
 ```HTML
 <!-- 引入样式 -->

package/README.zh-TW.md

@@ -103,8 +103,8 @@ createApp(App).use(VXETable).mount('#app')
 
 ### CDN
 
-使用 CDN 方式記得鎖定版本號，避免受到非兼容性更新的影響  
-***不建議將第三方的 CDN 地址用於生產，因爲該連接隨時都可能會失效***  
+使用第三方 CDN 方式記得鎖定版本號，避免受到非兼容性更新的影響  
+***不建議將第三方的 CDN 地址用於正式環境，因爲該連接隨時都可能會失效***  
 
 ```HTML
 <!-- 引入樣式 -->

package/es/all.js

@@ -6,6 +6,7 @@ import { VxeTableEditModule } from './edit';
 import { VxeTableExportModule } from './export';
 import { VxeTableKeyboardModule } from './keyboard';
 import { VxeTableValidatorModule } from './validator';
+import { VxeTableCustomModule } from './custom';
 import { VxeIcon } from './icon';
 import { VxeColumn } from './column';
 import { VxeColgroup } from './colgroup';
@@ -35,7 +36,7 @@ import { VxePulldown } from './pulldown';
 import { VxeTable } from './table';
 import zhCN from './locale/lang/zh-CN';
 // 按需加载的组件
-var components = [
+const components = [
     // 功能模块
     VxeTableFilterModule,
     VxeTableMenuModule,
@@ -43,6 +44,7 @@ var components = [
     VxeTableExportModule,
     VxeTableKeyboardModule,
     VxeTableValidatorModule,
+    VxeTableCustomModule,
     // 可选组件
     VxeIcon,
     VxeColumn,
@@ -75,29 +77,30 @@ var components = [
 ];
 // 默认中文
 config({
-    i18n: function (key, args) { return XEUtils.toFormatString(XEUtils.get(zhCN, key), args); }
+    i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
 });
 // 默认安装
 export function install(app, options) {
     if (XEUtils.isPlainObject(options)) {
         config(options);
     }
-    components.forEach(function (component) { return component.install(app); });
+    components.forEach(component => component.install(app));
 }
 export * from './v-x-e-table';
 // Table module
 export * from './filter';
+export * from './menu';
 export * from './edit';
 export * from './export';
 export * from './keyboard';
 export * from './validator';
+export * from './custom';
 // Components
 export * from './icon';
 export * from './table';
 export * from './column';
 export * from './colgroup';
 export * from './grid';
-export * from './menu';
 export * from './toolbar';
 export * from './pager';
 export * from './checkbox';

package/es/button/index.js

@@ -1,10 +1,10 @@
 import VxeButtonComponent from './src/button';
 import { dynamicApp } from '../dynamics';
-export var VxeButton = Object.assign(VxeButtonComponent, {
-    install: function (app) {
+export const VxeButton = Object.assign(VxeButtonComponent, {
+    install(app) {
         app.component(VxeButtonComponent.name, VxeButtonComponent);
     }
 });
-export var Button = VxeButton;
+export const Button = VxeButton;
 dynamicApp.component(VxeButtonComponent.name, VxeButtonComponent);
 export default VxeButton;

package/es/button/src/button.js

@@ -18,7 +18,7 @@ export default defineComponent({
         /**
          * 按钮尺寸
          */
-        size: { type: String, default: function () { return GlobalConfig.button.size || GlobalConfig.size; } },
+        size: { type: String, default: () => GlobalConfig.button.size || GlobalConfig.size },
         /**
          * 用来标识这一项
          */
@@ -35,6 +35,10 @@ export default defineComponent({
          * 按钮状态
          */
         status: String,
+        /**
+         * 标题
+         */
+        title: String,
         /**
          * 按钮的图标
          */
@@ -62,17 +66,19 @@ export default defineComponent({
         /**
          * 是否将弹框容器插入于 body 内
          */
-        transfer: { type: Boolean, default: function () { return GlobalConfig.button.transfer; } }
+        transfer: { type: Boolean, default: () => GlobalConfig.button.transfer }
     },
     emits: [
         'click',
+        'mouseenter',
+        'mouseleave',
         'dropdown-click'
     ],
-    setup: function (props, context) {
-        var slots = context.slots, emit = context.emit;
-        var xID = XEUtils.uniqueId();
-        var computeSize = useSize(props);
-        var reactData = reactive({
+    setup(props, context) {
+        const { slots, emit } = context;
+        const xID = XEUtils.uniqueId();
+        const computeSize = useSize(props);
+        const reactData = reactive({
             inited: false,
             showPanel: false,
             animatVisible: false,
@@ -80,75 +86,75 @@ export default defineComponent({
             panelStyle: {},
             panelPlacement: ''
         });
-        var internalData = {
+        const internalData = {
             showTime: null
         };
-        var refElem = ref();
-        var refButton = ref();
-        var refBtnPanel = ref();
-        var refMaps = {
-            refElem: refElem
+        const refElem = ref();
+        const refButton = ref();
+        const refBtnPanel = ref();
+        const refMaps = {
+            refElem
         };
-        var $xebutton = {
-            xID: xID,
-            props: props,
-            context: context,
-            reactData: reactData,
-            internalData: internalData,
-            getRefMaps: function () { return refMaps; }
+        const $xebutton = {
+            xID,
+            props,
+            context,
+            reactData,
+            internalData,
+            getRefMaps: () => refMaps
         };
-        var $xebuttonggroup = inject('$xebuttongroup', null);
-        var buttonMethods = {};
-        var computeIsFormBtn = computed(function () {
-            var type = props.type;
+        const $xebuttonggroup = inject('$xebuttongroup', null);
+        let buttonMethods = {};
+        const computeIsFormBtn = computed(() => {
+            const { type } = props;
             if (type) {
                 return ['submit', 'reset', 'button'].indexOf(type) > -1;
             }
             return false;
         });
-        var computeBtnType = computed(function () {
-            var type = props.type, mode = props.mode;
+        const computeBtnType = computed(() => {
+            const { type, mode } = props;
             return (mode === 'text' || type === 'text') ? 'text' : 'button';
         });
-        var updateZindex = function () {
+        const updateZindex = () => {
             if (reactData.panelIndex < getLastZIndex()) {
                 reactData.panelIndex = nextZIndex();
             }
         };
-        var updatePlacement = function () {
-            return nextTick().then(function () {
-                var transfer = props.transfer, placement = props.placement;
-                var panelIndex = reactData.panelIndex;
-                var targetElem = refButton.value;
-                var panelElem = refBtnPanel.value;
+        const updatePlacement = () => {
+            return nextTick().then(() => {
+                const { transfer, placement } = props;
+                const { panelIndex } = reactData;
+                const targetElem = refButton.value;
+                const panelElem = refBtnPanel.value;
                 if (panelElem && targetElem) {
-                    var targetHeight = targetElem.offsetHeight;
-                    var targetWidth = targetElem.offsetWidth;
-                    var panelHeight = panelElem.offsetHeight;
-                    var panelWidth = panelElem.offsetWidth;
-                    var marginSize = 5;
-                    var panelStyle = {
+                    const targetHeight = targetElem.offsetHeight;
+                    const targetWidth = targetElem.offsetWidth;
+                    const panelHeight = panelElem.offsetHeight;
+                    const panelWidth = panelElem.offsetWidth;
+                    const marginSize = 5;
+                    const panelStyle = {
                         zIndex: panelIndex
                     };
-                    var _a = getAbsolutePos(targetElem), top_1 = _a.top, left = _a.left, boundingTop = _a.boundingTop, visibleHeight = _a.visibleHeight, visibleWidth = _a.visibleWidth;
-                    var panelPlacement = 'bottom';
+                    const { top, left, boundingTop, visibleHeight, visibleWidth } = getAbsolutePos(targetElem);
+                    let panelPlacement = 'bottom';
                     if (transfer) {
-                        var btnLeft = left + targetWidth - panelWidth;
-                        var btnTop = top_1 + targetHeight;
+                        let btnLeft = left + targetWidth - panelWidth;
+                        let btnTop = top + targetHeight;
                         if (placement === 'top') {
                             panelPlacement = 'top';
-                            btnTop = top_1 - panelHeight;
+                            btnTop = top - panelHeight;
                         }
                         else if (!placement) {
                             // 如果下面不够放，则向上
                             if (boundingTop + targetHeight + panelHeight + marginSize > visibleHeight) {
                                 panelPlacement = 'top';
-                                btnTop = top_1 - panelHeight;
+                                btnTop = top - panelHeight;
                             }
                             // 如果上面不够放，则向下（优先）
                             if (btnTop < marginSize) {
                                 panelPlacement = 'bottom';
-                                btnTop = top_1 + targetHeight;
+                                btnTop = top + targetHeight;
                             }
                         }
                         // 如果溢出右边
@@ -160,16 +166,16 @@ export default defineComponent({
                             btnLeft = marginSize;
                         }
                         Object.assign(panelStyle, {
-                            left: "".concat(btnLeft, "px"),
+                            left: `${btnLeft}px`,
                             right: 'auto',
-                            top: "".concat(btnTop, "px"),
-                            minWidth: "".concat(targetWidth, "px")
+                            top: `${btnTop}px`,
+                            minWidth: `${targetWidth}px`
                         });
                     }
                     else {
                         if (placement === 'top') {
                             panelPlacement = 'top';
-                            panelStyle.bottom = "".concat(targetHeight, "px");
+                            panelStyle.bottom = `${targetHeight}px`;
                         }
                         else if (!placement) {
                             // 如果下面不够放，则向上
@@ -177,7 +183,7 @@ export default defineComponent({
                                 // 如果上面不够放，则向下（优先）
                                 if (boundingTop - targetHeight - panelHeight > marginSize) {
                                     panelPlacement = 'top';
-                                    panelStyle.bottom = "".concat(targetHeight, "px");
+                                    panelStyle.bottom = `${targetHeight}px`;
                                 }
                             }
                         }
@@ -188,7 +194,7 @@ export default defineComponent({
                 }
             });
         };
-        var clickEvent = function (evnt) {
+        const clickEvent = (evnt) => {
             if ($xebuttonggroup) {
                 $xebuttonggroup.handleClick({ name: props.name }, evnt);
             }
@@ -196,22 +202,22 @@ export default defineComponent({
                 buttonMethods.dispatchEvent('click', { $event: evnt }, evnt);
             }
         };
-        var mousedownDropdownEvent = function (evnt) {
-            var isLeftBtn = evnt.button === 0;
+        const mousedownDropdownEvent = (evnt) => {
+            const isLeftBtn = evnt.button === 0;
             if (isLeftBtn) {
                 evnt.stopPropagation();
             }
         };
-        var clickDropdownEvent = function (evnt) {
-            var dropdownElem = evnt.currentTarget;
-            var panelElem = refBtnPanel.value;
-            var _a = getEventTargetNode(evnt, dropdownElem, 'vxe-button'), flag = _a.flag, targetElem = _a.targetElem;
+        const clickDropdownEvent = (evnt) => {
+            const dropdownElem = evnt.currentTarget;
+            const panelElem = refBtnPanel.value;
+            const { flag, targetElem } = getEventTargetNode(evnt, dropdownElem, 'vxe-button');
             if (flag) {
                 if (panelElem) {
                     panelElem.dataset.active = 'N';
                 }
                 reactData.showPanel = false;
-                setTimeout(function () {
+                setTimeout(() => {
                     if (!panelElem || panelElem.dataset.active !== 'Y') {
                         reactData.animatVisible = false;
                     }
@@ -219,17 +225,17 @@ export default defineComponent({
                 buttonMethods.dispatchEvent('dropdown-click', { name: targetElem.getAttribute('name'), $event: evnt }, evnt);
             }
         };
-        var mouseenterEvent = function () {
-            var panelElem = refBtnPanel.value;
+        const mouseenterDropdownEvent = () => {
+            const panelElem = refBtnPanel.value;
             if (panelElem) {
                 panelElem.dataset.active = 'Y';
                 reactData.animatVisible = true;
-                setTimeout(function () {
+                setTimeout(() => {
                     if (panelElem.dataset.active === 'Y') {
                         reactData.showPanel = true;
                         updateZindex();
                         updatePlacement();
-                        setTimeout(function () {
+                        setTimeout(() => {
                             if (reactData.showPanel) {
                                 updatePlacement();
                             }
@@ -238,32 +244,39 @@ export default defineComponent({
                 }, 20);
             }
         };
-        var mouseenterTargetEvent = function () {
-            var panelElem = refBtnPanel.value;
+        const mouseenterTargetEvent = (evnt) => {
+            const panelElem = refBtnPanel.value;
             if (panelElem) {
                 panelElem.dataset.active = 'Y';
                 if (!reactData.inited) {
                     reactData.inited = true;
                 }
-                internalData.showTime = setTimeout(function () {
+                internalData.showTime = setTimeout(() => {
                     if (panelElem.dataset.active === 'Y') {
-                        mouseenterEvent();
+                        mouseenterDropdownEvent();
                     }
                     else {
                         reactData.animatVisible = false;
                     }
                 }, 250);
             }
+            mouseenterEvent(evnt);
+        };
+        const mouseenterEvent = (evnt) => {
+            emit('mouseenter', { $event: evnt });
+        };
+        const mouseleaveEvent = (evnt) => {
+            emit('mouseleave', { $event: evnt });
         };
-        var closePanel = function () {
-            var panelElem = refBtnPanel.value;
+        const closePanel = () => {
+            const panelElem = refBtnPanel.value;
             clearTimeout(internalData.showTime);
             if (panelElem) {
                 panelElem.dataset.active = 'N';
-                setTimeout(function () {
+                setTimeout(() => {
                     if (panelElem.dataset.active !== 'Y') {
                         reactData.showPanel = false;
-                        setTimeout(function () {
+                        setTimeout(() => {
                             if (panelElem.dataset.active !== 'Y') {
                                 reactData.animatVisible = false;
                             }
@@ -276,12 +289,12 @@ export default defineComponent({
                 reactData.showPanel = false;
             }
         };
-        var mouseleaveEvent = function () {
+        const mouseleaveDropdownEvent = () => {
             closePanel();
         };
-        var renderContent = function () {
-            var content = props.content, icon = props.icon, loading = props.loading;
-            var contVNs = [];
+        const renderContent = () => {
+            const { content, icon, loading } = props;
+            const contVNs = [];
             if (loading) {
                 contVNs.push(h('i', {
                     class: ['vxe-button--loading-icon', GlobalConfig.icon.BUTTON_LOADING]
@@ -310,63 +323,63 @@ export default defineComponent({
             return contVNs;
         };
         buttonMethods = {
-            dispatchEvent: function (type, params, evnt) {
+            dispatchEvent(type, params, evnt) {
                 emit(type, Object.assign({ $button: $xebutton, $event: evnt }, params));
             },
-            focus: function () {
-                var btnElem = refButton.value;
+            focus() {
+                const btnElem = refButton.value;
                 btnElem.focus();
                 return nextTick();
             },
-            blur: function () {
-                var btnElem = refButton.value;
+            blur() {
+                const btnElem = refButton.value;
                 btnElem.blur();
                 return nextTick();
             }
         };
         Object.assign($xebutton, buttonMethods);
-        onMounted(function () {
+        onMounted(() => {
             // if (process.env.NODE_ENV === 'development') {
             //   if (props.type === 'text') {
             //     warnLog('vxe.error.delProp', ['type=text', 'mode=text'])
             //   }
             // }
-            GlobalEvent.on($xebutton, 'mousewheel', function (evnt) {
-                var panelElem = refBtnPanel.value;
+            GlobalEvent.on($xebutton, 'mousewheel', (evnt) => {
+                const panelElem = refBtnPanel.value;
                 if (reactData.showPanel && !getEventTargetNode(evnt, panelElem).flag) {
                     closePanel();
                 }
             });
         });
-        onUnmounted(function () {
+        onUnmounted(() => {
             GlobalEvent.off($xebutton, 'mousewheel');
         });
-        var renderVN = function () {
-            var _a, _b, _c, _d;
-            var className = props.className, popupClassName = props.popupClassName, transfer = props.transfer, type = props.type, round = props.round, circle = props.circle, destroyOnClose = props.destroyOnClose, status = props.status, name = props.name, disabled = props.disabled, loading = props.loading;
-            var inited = reactData.inited, showPanel = reactData.showPanel;
-            var isFormBtn = computeIsFormBtn.value;
-            var btnType = computeBtnType.value;
-            var vSize = computeSize.value;
+        const renderVN = () => {
+            const { className, popupClassName, transfer, title, type, round, circle, destroyOnClose, status, name, disabled, loading } = props;
+            const { inited, showPanel } = reactData;
+            const isFormBtn = computeIsFormBtn.value;
+            const btnType = computeBtnType.value;
+            const vSize = computeSize.value;
             if (slots.dropdowns) {
                 return h('div', {
                     ref: refElem,
-                    class: ['vxe-button--dropdown', className ? (XEUtils.isFunction(className) ? className({ $button: $xebutton }) : className) : '', (_a = {},
-                            _a["size--".concat(vSize)] = vSize,
-                            _a['is--active'] = showPanel,
-                            _a)]
+                    class: ['vxe-button--dropdown', className ? (XEUtils.isFunction(className) ? className({ $button: $xebutton }) : className) : '', {
+                            [`size--${vSize}`]: vSize,
+                            'is--active': showPanel
+                        }]
                 }, [
                     h('button', {
                         ref: refButton,
-                        class: ['vxe-button', "type--".concat(btnType), (_b = {},
-                                _b["size--".concat(vSize)] = vSize,
-                                _b["theme--".concat(status)] = status,
-                                _b['is--round'] = round,
-                                _b['is--circle'] = circle,
-                                _b['is--disabled'] = disabled || loading,
-                                _b['is--loading'] = loading,
-                                _b)],
-                        name: name,
+                        class: ['vxe-button', `type--${btnType}`, {
+                                [`size--${vSize}`]: vSize,
+                                [`theme--${status}`]: status,
+                                'is--round': round,
+                                'is--circle': circle,
+                                'is--disabled': disabled || loading,
+                                'is--loading': loading
+                            }],
+                        title,
+                        name,
                         type: isFormBtn ? type : 'button',
                         disabled: disabled || loading,
                         onMouseenter: mouseenterTargetEvent,
@@ -374,7 +387,7 @@ export default defineComponent({
                         onClick: clickEvent
                     }, renderContent().concat([
                         h('i', {
-                            class: "vxe-button--dropdown-arrow ".concat(GlobalConfig.icon.BUTTON_DROPDOWN)
+                            class: `vxe-button--dropdown-arrow ${GlobalConfig.icon.BUTTON_DROPDOWN}`
                         })
                     ])),
                     h(Teleport, {
@@ -383,11 +396,11 @@ export default defineComponent({
                     }, [
                         h('div', {
                             ref: refBtnPanel,
-                            class: ['vxe-button--dropdown-panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $button: $xebutton }) : popupClassName) : '', (_c = {},
-                                    _c["size--".concat(vSize)] = vSize,
-                                    _c['animat--leave'] = reactData.animatVisible,
-                                    _c['animat--enter'] = showPanel,
-                                    _c)],
+                            class: ['vxe-button--dropdown-panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $button: $xebutton }) : popupClassName) : '', {
+                                    [`size--${vSize}`]: vSize,
+                                    'animat--leave': reactData.animatVisible,
+                                    'animat--enter': showPanel
+                                }],
                             placement: reactData.panelPlacement,
                             style: reactData.panelStyle
                         }, inited ? [
@@ -395,8 +408,8 @@ export default defineComponent({
                                 class: 'vxe-button--dropdown-wrapper',
                                 onMousedown: mousedownDropdownEvent,
                                 onClick: clickDropdownEvent,
-                                onMouseenter: mouseenterEvent,
-                                onMouseleave: mouseleaveEvent
+                                onMouseenter: mouseenterDropdownEvent,
+                                onMouseleave: mouseleaveDropdownEvent
                             }, destroyOnClose && !showPanel ? [] : slots.dropdowns({}))
                         ] : [])
                     ])
@@ -404,24 +417,27 @@ export default defineComponent({
             }
             return h('button', {
                 ref: refButton,
-                class: ['vxe-button', "type--".concat(btnType), (_d = {},
-                        _d["size--".concat(vSize)] = vSize,
-                        _d["theme--".concat(status)] = status,
-                        _d['is--round'] = round,
-                        _d['is--circle'] = circle,
-                        _d['is--disabled'] = disabled || loading,
-                        _d['is--loading'] = loading,
-                        _d)],
-                name: name,
+                class: ['vxe-button', `type--${btnType}`, className ? (XEUtils.isFunction(className) ? className({ $button: $xebutton }) : className) : '', {
+                        [`size--${vSize}`]: vSize,
+                        [`theme--${status}`]: status,
+                        'is--round': round,
+                        'is--circle': circle,
+                        'is--disabled': disabled || loading,
+                        'is--loading': loading
+                    }],
+                title,
+                name,
                 type: isFormBtn ? type : 'button',
                 disabled: disabled || loading,
-                onClick: clickEvent
+                onClick: clickEvent,
+                onMouseenter: mouseenterEvent,
+                onMouseleave: mouseleaveEvent
             }, renderContent());
         };
         $xebutton.renderVN = renderVN;
         return $xebutton;
     },
-    render: function () {
+    render() {
         return this.renderVN();
     }
 });