vxe-pc-ui 4.1.19 → 4.1.21

package/es/tabs/src/tab-pane.js

@@ -1,5 +1,6 @@
 import { defineComponent, ref, h, reactive, watch, inject, onMounted, onUnmounted } from 'vue';
 import XEUtils from 'xe-utils';
+import { createEvent } from '../../ui';
 import { assembleAnchorTab, destroyAnchorTab } from './util';
 export default defineComponent({
     name: 'VxeTabPane',
@@ -14,7 +15,7 @@ export default defineComponent({
     },
     emits: [],
     setup(props, context) {
-        const { slots } = context;
+        const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
         const refElem = ref();
         const $xeTabs = inject('$xeTabs', null);
@@ -44,6 +45,14 @@ export default defineComponent({
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $tabPane: $xeTabPane }, params));
+        };
+        const tabPaneMethods = {
+            dispatchEvent
+        };
+        const tabPanePrivateMethods = {};
+        Object.assign($xeTabPane, tabPaneMethods, tabPanePrivateMethods);
         watch(() => props.title, (val) => {
             tabConfig.title = val;
         });
@@ -57,8 +66,9 @@ export default defineComponent({
             tabConfig.permissionCode = val;
         });
         onMounted(() => {
-            if ($xeTabs && refElem.value) {
-                assembleAnchorTab($xeTabs, refElem.value, tabConfig);
+            const elem = refElem.value;
+            if ($xeTabs && elem) {
+                assembleAnchorTab($xeTabs, elem, tabConfig);
             }
         });
         onUnmounted(() => {

package/es/tabs/src/tabs.js

@@ -47,25 +47,19 @@ export default defineComponent({
             isTabOver: false,
             resizeFlag: 1
         });
+        const internalData = {
+            slTimeout: undefined
+        };
         const refMaps = {
             refElem
         };
-        const handleFilterTab = (item) => {
-            const { permissionCode } = item;
-            if (permissionCode) {
-                if (!permission.checkVisible(permissionCode)) {
-                    return false;
-                }
-            }
-            return true;
-        };
         const computeTabOptions = computed(() => {
             const { options } = props;
-            return (options || []).filter(handleFilterTab);
+            return (options || []).filter((item) => handleFilterTab(item));
         });
         const computeTabStaticOptions = computed(() => {
             const { staticTabs } = reactData;
-            return staticTabs.filter(handleFilterTab);
+            return staticTabs.filter((item) => handleFilterTab(item));
         });
         const computeMaps = {};
         const $xeTabs = {
@@ -76,6 +70,15 @@ export default defineComponent({
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
+        const handleFilterTab = (item) => {
+            const { permissionCode } = item;
+            if (permissionCode) {
+                if (!permission.checkVisible(permissionCode)) {
+                    return false;
+                }
+            }
+            return true;
+        };
         const callSlot = (slotFunc, params) => {
             if (slotFunc) {
                 if (XEUtils.isString(slotFunc)) {
@@ -199,12 +202,15 @@ export default defineComponent({
                 dispatchEvent('tab-close-fail', { value, name, nextName }, evnt);
             }
         };
-        let scrollTimeout = null;
         const startScrollAnimation = (offsetPos, offsetSize) => {
+            const { slTimeout } = internalData;
             let offsetLeft = offsetSize;
             let scrollCount = 6;
             let delayNum = 35;
-            clearTimeout(scrollTimeout);
+            if (slTimeout) {
+                clearTimeout(slTimeout);
+                internalData.slTimeout = undefined;
+            }
             const scrollAnimate = () => {
                 const headerWrapperEl = refHeadWrapperElem.value;
                 if (scrollCount > 0) {
@@ -216,14 +222,14 @@ export default defineComponent({
                             if (clientWidth + scrollLeft < scrollWidth) {
                                 headerWrapperEl.scrollLeft += offsetLeft;
                                 delayNum -= 4;
-                                scrollTimeout = setTimeout(scrollAnimate, delayNum);
+                                internalData.slTimeout = setTimeout(scrollAnimate, delayNum);
                             }
                         }
                         else {
                             if (scrollLeft > 0) {
                                 headerWrapperEl.scrollLeft -= offsetLeft;
                                 delayNum -= 4;
-                                scrollTimeout = setTimeout(scrollAnimate, delayNum);
+                                internalData.slTimeout = setTimeout(scrollAnimate, delayNum);
                             }
                         }
                         updateTabStyle();
@@ -273,41 +279,43 @@ export default defineComponent({
                 }
             });
         };
-        const createHandlePrevNext = (isNext) => {
-            return () => {
-                const { activeName } = reactData;
-                const tabOptions = computeTabOptions.value;
-                const tabStaticOptions = computeTabStaticOptions.value;
-                const list = tabStaticOptions.length ? tabStaticOptions : tabOptions;
-                const index = XEUtils.findIndexOf(list, item => item.name === activeName);
-                if (index > -1) {
-                    let item = null;
-                    if (isNext) {
-                        if (index < list.length - 1) {
-                            item = list[index + 1];
-                        }
-                    }
-                    else {
-                        if (index > 0) {
-                            item = list[index - 1];
-                        }
+        const handlePrevNext = (isNext) => {
+            const { activeName } = reactData;
+            const tabOptions = computeTabOptions.value;
+            const tabStaticOptions = computeTabStaticOptions.value;
+            const list = tabStaticOptions.length ? tabStaticOptions : tabOptions;
+            const index = XEUtils.findIndexOf(list, item => item.name === activeName);
+            if (index > -1) {
+                let item = null;
+                if (isNext) {
+                    if (index < list.length - 1) {
+                        item = list[index + 1];
                     }
-                    if (item) {
-                        const name = item.name;
-                        const value = name;
-                        reactData.activeName = name;
-                        emit('update:modelValue', value);
-                        addInitName(name, null);
+                }
+                else {
+                    if (index > 0) {
+                        item = list[index - 1];
                     }
                 }
-                return nextTick();
-            };
+                if (item) {
+                    const name = item.name;
+                    const value = name;
+                    reactData.activeName = name;
+                    emit('update:modelValue', value);
+                    addInitName(name, null);
+                }
+            }
+            return nextTick();
         };
         const tabsMethods = {
             dispatchEvent,
             scrollToTab,
-            prev: createHandlePrevNext(false),
-            next: createHandlePrevNext(true),
+            prev() {
+                return handlePrevNext(false);
+            },
+            next() {
+                return handlePrevNext(true);
+            },
             prevTab() {
                 if (process.env.NODE_ENV === 'development') {
                     warnLog('vxe.error.delFunc', ['prevTab', 'prev']);
@@ -445,9 +453,9 @@ export default defineComponent({
             const { activeName } = reactData;
             const activeDefaultTab = tabList.find(item => item.name === activeName);
             if (destroyOnClose) {
-                return activeDefaultTab ? [renderTabPane(activeDefaultTab)] : createCommentVNode();
+                return [activeDefaultTab ? renderTabPane(activeDefaultTab) : createCommentVNode()];
             }
-            return tabList.map(renderTabPane);
+            return tabList.map((item) => renderTabPane(item));
         };
         const renderVN = () => {
             const { type, height, padding, trigger } = props;
@@ -514,7 +522,9 @@ export default defineComponent({
             });
         }
         watch(() => reactData.resizeFlag, () => {
-            nextTick(updateTabStyle);
+            nextTick(() => {
+                updateTabStyle();
+            });
         });
         nextTick(() => {
             globalEvents.on($xeTabs, 'resize', updateTabStyle);
@@ -525,10 +535,10 @@ export default defineComponent({
         onUnmounted(() => {
             globalEvents.off($xeTabs, 'resize');
         });
-        $xeTabs.renderVN = renderVN;
         provide('$xeTabs', $xeTabs);
         addInitName(props.modelValue, null);
         initDefaultName(reactData.staticTabs.length ? reactData.staticTabs : props.options);
+        $xeTabs.renderVN = renderVN;
         return $xeTabs;
     },
     render() {

package/es/textarea/src/textarea.js

@@ -8,27 +8,45 @@ export default defineComponent({
     props: {
         modelValue: [String, Number],
         className: String,
-        immediate: { type: Boolean, default: true },
+        immediate: {
+            type: Boolean,
+            default: true
+        },
         name: String,
         readonly: {
             type: Boolean,
             default: null
         },
-        editable: { type: Boolean, default: true },
+        editable: {
+            type: Boolean,
+            default: true
+        },
         disabled: {
             type: Boolean,
             default: null
         },
         placeholder: String,
         maxLength: [String, Number],
-        rows: { type: [String, Number], default: null },
-        cols: { type: [String, Number], default: null },
+        rows: {
+            type: [String, Number],
+            default: null
+        },
+        cols: {
+            type: [String, Number],
+            default: null
+        },
         showWordCount: Boolean,
         countMethod: Function,
         autosize: [Boolean, Object],
         form: String,
-        resize: { type: String, default: () => getConfig().textarea.resize },
-        size: { type: String, default: () => getConfig().textarea.size || getConfig().size },
+        resize: {
+            type: String,
+            default: () => getConfig().textarea.resize
+        },
+        size: {
+            type: String,
+            default: () => getConfig().textarea.size || getConfig().size
+        },
         // 已废弃
         maxlength: [String, Number]
     },
@@ -171,7 +189,7 @@ export default defineComponent({
             const value = reactData.inputValue;
             $xeTextarea.dispatchEvent(evnt.type, { value }, evnt);
         };
-        const emitUpdate = (value, evnt) => {
+        const handleChange = (value, evnt) => {
             reactData.inputValue = value;
             emit('update:modelValue', value);
             if (XEUtils.toValueString(props.modelValue) !== value) {
@@ -188,7 +206,7 @@ export default defineComponent({
             const value = textElem.value;
             reactData.inputValue = value;
             if (immediate) {
-                emitUpdate(value, evnt);
+                handleChange(value, evnt);
             }
             $xeTextarea.dispatchEvent('input', { value }, evnt);
             handleResize();
@@ -199,14 +217,14 @@ export default defineComponent({
                 triggerEvent(evnt);
             }
             else {
-                emitUpdate(reactData.inputValue, evnt);
+                handleChange(reactData.inputValue, evnt);
             }
         };
         const blurEvent = (evnt) => {
             const { immediate } = props;
             const { inputValue } = reactData;
             if (!immediate) {
-                emitUpdate(inputValue, evnt);
+                handleChange(inputValue, evnt);
             }
             $xeTextarea.dispatchEvent('blur', { value: inputValue }, evnt);
         };

package/es/tooltip/src/tooltip.js

@@ -8,17 +8,38 @@ export default defineComponent({
     name: 'VxeTooltip',
     props: {
         modelValue: Boolean,
-        size: { type: String, default: () => getConfig().tooltip.size || getConfig().size },
-        trigger: { type: String, default: () => getConfig().tooltip.trigger || 'hover' },
-        theme: { type: String, default: () => getConfig().tooltip.theme || 'dark' },
-        content: { type: [String, Number], default: null },
+        size: {
+            type: String,
+            default: () => getConfig().tooltip.size || getConfig().size
+        },
+        trigger: {
+            type: String,
+            default: () => getConfig().tooltip.trigger || 'hover'
+        },
+        theme: {
+            type: String,
+            default: () => getConfig().tooltip.theme || 'dark'
+        },
+        content: {
+            type: [String, Number],
+            default: null
+        },
         useHTML: Boolean,
         zIndex: [String, Number],
         popupClassName: [String, Function],
-        isArrow: { type: Boolean, default: true },
+        isArrow: {
+            type: Boolean,
+            default: true
+        },
         enterable: Boolean,
-        enterDelay: { type: Number, default: () => getConfig().tooltip.enterDelay },
-        leaveDelay: { type: Number, default: () => getConfig().tooltip.leaveDelay }
+        enterDelay: {
+            type: Number,
+            default: () => getConfig().tooltip.enterDelay
+        },
+        leaveDelay: {
+            type: Number,
+            default: () => getConfig().tooltip.leaveDelay
+        }
     },
     emits: [
         'update:modelValue'
@@ -41,6 +62,7 @@ export default defineComponent({
                 arrowStyle: {}
             }
         });
+        const internalData = {};
         const refElem = ref();
         const refMaps = {
             refElem
@@ -50,6 +72,7 @@ export default defineComponent({
             props,
             context,
             reactData,
+            internalData,
             getRefMaps: () => refMaps
         };
         let tooltipMethods = {};
@@ -144,23 +167,28 @@ export default defineComponent({
             tipStore.arrowStyle = { left: '50%' };
             return tooltipMethods.updatePlacement();
         };
-        const showDelayTip = XEUtils.debounce(() => {
-            if (reactData.tipActive) {
-                showTip();
-            }
-        }, props.enterDelay, { leading: false, trailing: true });
+        const handleDelayFn = () => {
+            internalData.showDelayTip = XEUtils.debounce(() => {
+                if (reactData.tipActive) {
+                    showTip();
+                }
+            }, props.enterDelay, { leading: false, trailing: true });
+        };
         const handleVisible = (target, content) => {
             const contentSlot = slots.content;
             if (!contentSlot && (content === '' || XEUtils.eqNull(content))) {
                 return nextTick();
             }
             if (target) {
+                const { showDelayTip } = internalData;
                 const { trigger, enterDelay } = props;
                 reactData.tipActive = true;
                 reactData.tipTarget = target;
                 reactData.tipContent = content;
                 if (enterDelay && trigger === 'hover') {
-                    showDelayTip();
+                    if (showDelayTip) {
+                        showDelayTip();
+                    }
                 }
                 else {
                     return showTip();
@@ -195,20 +223,75 @@ export default defineComponent({
                     const el = refElem.value;
                     if (tipTarget && el) {
                         updateTipStyle();
-                        return nextTick().then(updateTipStyle);
+                        return nextTick().then(() => {
+                            updateTipStyle();
+                        });
                     }
                 });
             },
             isActived() {
                 return reactData.tipActive;
             },
-            setActived(actived) {
-                reactData.tipActive = !!actived;
+            setActived(active) {
+                reactData.tipActive = !!active;
             }
         };
         Object.assign($xeTooltip, tooltipMethods);
-        watch(() => props.content, () => {
-            reactData.tipContent = props.content;
+        const renderContent = () => {
+            const { useHTML } = props;
+            const { tipContent } = reactData;
+            const contentSlot = slots.content;
+            if (contentSlot) {
+                return h('div', {
+                    key: 1,
+                    class: 'vxe-table--tooltip-content'
+                }, getSlotVNs(contentSlot({})));
+            }
+            if (useHTML) {
+                return h('div', {
+                    key: 2,
+                    class: 'vxe-table--tooltip-content',
+                    innerHTML: tipContent
+                });
+            }
+            return h('div', {
+                key: 3,
+                class: 'vxe-table--tooltip-content'
+            }, `${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 h('div', Object.assign({ ref: refElem, class: ['vxe-table--tooltip-wrapper', `theme--${theme}`, popupClassName ? (XEUtils.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
+                    }], style: tipStore.style }, ons), [
+                renderContent(),
+                h('div', {
+                    class: 'vxe-table--tooltip-arrow',
+                    style: tipStore.arrowStyle
+                }),
+                ...(defaultSlot ? getSlotVNs(defaultSlot({})) : [])
+            ]);
+        };
+        watch(() => props.enterDelay, () => {
+            handleDelayFn();
+        });
+        watch(() => props.content, (val) => {
+            reactData.tipContent = val;
         });
         watch(() => props.modelValue, (val) => {
             if (!reactData.isUpdate) {
@@ -223,7 +306,7 @@ export default defineComponent({
         });
         onMounted(() => {
             nextTick(() => {
-                const { trigger, content, modelValue } = props;
+                const { trigger, content } = props;
                 const wrapperElem = refElem.value;
                 if (wrapperElem) {
                     const parentNode = wrapperElem.parentNode;
@@ -249,7 +332,7 @@ export default defineComponent({
                                 target.onclick = clickEvent;
                             }
                         }
-                        if (modelValue) {
+                        if (props.modelValue) {
                             handleVisible(target, content);
                         }
                     }
@@ -257,17 +340,12 @@ export default defineComponent({
             });
         });
         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;
-                }
+                target.onmouseenter = null;
+                target.onmouseleave = null;
+                target.onclick = null;
             }
             if (wrapperElem) {
                 const parentNode = wrapperElem.parentNode;
@@ -276,56 +354,7 @@ export default defineComponent({
                 }
             }
         });
-        const renderContent = () => {
-            const { useHTML } = props;
-            const { tipContent } = reactData;
-            const contentSlot = slots.content;
-            if (contentSlot) {
-                return h('div', {
-                    key: 1,
-                    class: 'vxe-table--tooltip-content'
-                }, getSlotVNs(contentSlot({})));
-            }
-            if (useHTML) {
-                return h('div', {
-                    key: 2,
-                    class: 'vxe-table--tooltip-content',
-                    innerHTML: tipContent
-                });
-            }
-            return h('div', {
-                key: 3,
-                class: 'vxe-table--tooltip-content'
-            }, `${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 h('div', Object.assign({ ref: refElem, class: ['vxe-table--tooltip-wrapper', `theme--${theme}`, popupClassName ? (XEUtils.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
-                    }], style: tipStore.style }, ons), [
-                renderContent(),
-                h('div', {
-                    class: 'vxe-table--tooltip-arrow',
-                    style: tipStore.arrowStyle
-                }),
-                ...(defaultSlot ? getSlotVNs(defaultSlot({})) : [])
-            ]);
-        };
+        handleDelayFn();
         $xeTooltip.renderVN = renderVN;
         return $xeTooltip;
     },

package/es/tree/src/tree.js

@@ -105,7 +105,10 @@ export default defineComponent({
             type: String,
             default: () => getConfig().tree.iconLoaded
         },
-        size: { type: String, default: () => getConfig().tree.size || getConfig().size }
+        size: {
+            type: String,
+            default: () => getConfig().tree.size || getConfig().size
+        }
     },
     emits: [
         'update:modelValue',
@@ -444,7 +447,7 @@ export default defineComponent({
                 const { lazy, transform } = props;
                 const { nodeMaps } = reactData;
                 if (!lazy) {
-                    return nextTick();
+                    return Promise.resolve([]);
                 }
                 const childrenField = computeChildrenField.value;
                 const parentNodeItem = nodeMaps[getNodeId(node)];
@@ -1069,7 +1072,6 @@ export default defineComponent({
                     : {})
             ]);
         };
-        $xeTree.renderVN = renderVN;
         const dataFlag = ref(0);
         watch(() => props.data ? props.data.length : 0, () => {
             dataFlag.value++;
@@ -1100,6 +1102,7 @@ export default defineComponent({
         });
         updateData(props.data || []);
         updateCheckboxChecked(props.checkNodeKeys || []);
+        $xeTree.renderVN = renderVN;
         return $xeTree;
     },
     render() {