vxe-pc-ui 0.0.2 → 0.2.0

package/es/textarea/src/textarea.js

@@ -0,0 +1,245 @@
+import { defineComponent, h, ref, computed, nextTick, watch, reactive, inject } from 'vue';
+import XEUtils from 'xe-utils';
+import globalConfigStore from '../../ui/src/globalStore';
+import { getFuncText } from '../../ui/src/utils';
+import { getI18n } from '../../ui/src/i18n';
+import { useSize } from '../../hooks/size';
+let autoTxtElem;
+export default defineComponent({
+    name: 'VxeTextarea',
+    props: {
+        modelValue: [String, Number],
+        className: String,
+        immediate: { type: Boolean, default: true },
+        name: String,
+        readonly: Boolean,
+        disabled: Boolean,
+        placeholder: {
+            type: String,
+            default: () => XEUtils.eqNull(globalConfigStore.textarea.placeholder) ? getI18n('vxe.base.pleaseInput') : globalConfigStore.textarea.placeholder
+        },
+        maxlength: [String, Number],
+        rows: { type: [String, Number], default: 2 },
+        cols: { type: [String, Number], default: null },
+        showWordCount: Boolean,
+        countMethod: Function,
+        autosize: [Boolean, Object],
+        form: String,
+        resize: { type: String, default: () => globalConfigStore.textarea.resize },
+        size: { type: String, default: () => globalConfigStore.textarea.size || globalConfigStore.size }
+    },
+    emits: [
+        'update:modelValue',
+        'input',
+        'keydown',
+        'keyup',
+        'click',
+        'change',
+        'focus',
+        'blur'
+    ],
+    setup(props, context) {
+        const { emit } = context;
+        const $xeform = inject('$xeForm', null);
+        const formItemInfo = inject('xeFormItemInfo', null);
+        const xID = XEUtils.uniqueId();
+        const computeSize = useSize(props);
+        const reactData = reactive({
+            inputValue: props.modelValue
+        });
+        const refElem = ref();
+        const refTextarea = ref();
+        const refMaps = {
+            refElem,
+            refTextarea
+        };
+        const $xetextarea = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps
+        };
+        let textareaMethods = {};
+        const computeInputCount = computed(() => {
+            return XEUtils.getSize(reactData.inputValue);
+        });
+        const computeIsCountError = computed(() => {
+            const inputCount = computeInputCount.value;
+            return props.maxlength && inputCount > XEUtils.toNumber(props.maxlength);
+        });
+        const computeSizeOpts = computed(() => {
+            return Object.assign({ minRows: 1, maxRows: 10 }, globalConfigStore.textarea.autosize, props.autosize);
+        });
+        const updateAutoTxt = () => {
+            const { size, autosize } = props;
+            const { inputValue } = reactData;
+            if (autosize) {
+                if (!autoTxtElem) {
+                    autoTxtElem = document.createElement('div');
+                }
+                if (!autoTxtElem.parentNode) {
+                    document.body.appendChild(autoTxtElem);
+                }
+                const textElem = refTextarea.value;
+                const textStyle = getComputedStyle(textElem);
+                autoTxtElem.className = ['vxe-textarea--autosize', size ? `size--${size}` : ''].join(' ');
+                autoTxtElem.style.width = `${textElem.clientWidth}px`;
+                autoTxtElem.style.padding = textStyle.padding;
+                autoTxtElem.innerText = ('' + (inputValue || '　')).replace(/\n$/, '\n　');
+            }
+        };
+        const handleResize = () => {
+            if (props.autosize) {
+                nextTick(() => {
+                    const sizeOpts = computeSizeOpts.value;
+                    const { minRows, maxRows } = sizeOpts;
+                    const textElem = refTextarea.value;
+                    const sizeHeight = autoTxtElem.clientHeight;
+                    const textStyle = getComputedStyle(textElem);
+                    const lineHeight = XEUtils.toNumber(textStyle.lineHeight);
+                    const paddingTop = XEUtils.toNumber(textStyle.paddingTop);
+                    const paddingBottom = XEUtils.toNumber(textStyle.paddingBottom);
+                    const borderTopWidth = XEUtils.toNumber(textStyle.borderTopWidth);
+                    const borderBottomWidth = XEUtils.toNumber(textStyle.borderBottomWidth);
+                    const intervalHeight = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;
+                    const rowNum = (sizeHeight - intervalHeight) / lineHeight;
+                    const textRows = rowNum && /[0-9]/.test('' + rowNum) ? rowNum : Math.floor(rowNum) + 1;
+                    let vaildRows = textRows;
+                    if (textRows < minRows) {
+                        vaildRows = minRows;
+                    }
+                    else if (textRows > maxRows) {
+                        vaildRows = maxRows;
+                    }
+                    textElem.style.height = `${(vaildRows * lineHeight) + intervalHeight}px`;
+                });
+            }
+        };
+        const triggerEvent = (evnt) => {
+            const value = reactData.inputValue;
+            $xetextarea.dispatchEvent(evnt.type, { value }, evnt);
+        };
+        const emitUpdate = (value, evnt) => {
+            reactData.inputValue = value;
+            emit('update:modelValue', value);
+            if (XEUtils.toValueString(props.modelValue) !== value) {
+                textareaMethods.dispatchEvent('change', { value }, evnt);
+                // 自动更新校验状态
+                if ($xeform && formItemInfo) {
+                    $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+                }
+            }
+        };
+        const inputEvent = (evnt) => {
+            const { immediate } = props;
+            const textElem = evnt.target;
+            const value = textElem.value;
+            reactData.inputValue = value;
+            if (immediate) {
+                emitUpdate(value, evnt);
+            }
+            $xetextarea.dispatchEvent('input', { value }, evnt);
+            handleResize();
+        };
+        const changeEvent = (evnt) => {
+            const { immediate } = props;
+            if (immediate) {
+                triggerEvent(evnt);
+            }
+            else {
+                emitUpdate(reactData.inputValue, evnt);
+            }
+        };
+        const blurEvent = (evnt) => {
+            const { immediate } = props;
+            const { inputValue } = reactData;
+            if (!immediate) {
+                emitUpdate(inputValue, evnt);
+            }
+            $xetextarea.dispatchEvent('blur', { value: inputValue }, evnt);
+        };
+        textareaMethods = {
+            dispatchEvent(type, params, evnt) {
+                emit(type, Object.assign({ $textarea: $xetextarea, $event: evnt }, params));
+            },
+            focus() {
+                const textElem = refTextarea.value;
+                textElem.focus();
+                return nextTick();
+            },
+            blur() {
+                const textElem = refTextarea.value;
+                textElem.blur();
+                return nextTick();
+            }
+        };
+        Object.assign($xetextarea, textareaMethods);
+        watch(() => props.modelValue, (val) => {
+            reactData.inputValue = val;
+            updateAutoTxt();
+        });
+        nextTick(() => {
+            const { autosize } = props;
+            if (autosize) {
+                updateAutoTxt();
+                handleResize();
+            }
+        });
+        const renderVN = () => {
+            const { className, resize, placeholder, disabled, maxlength, autosize, showWordCount, countMethod, rows, cols } = props;
+            const { inputValue } = reactData;
+            const vSize = computeSize.value;
+            const isCountError = computeIsCountError.value;
+            const inputCount = computeInputCount.value;
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-textarea', className, {
+                        [`size--${vSize}`]: vSize,
+                        'is--autosize': autosize,
+                        'is--count': showWordCount,
+                        'is--disabled': disabled,
+                        'def--rows': !XEUtils.eqNull(rows),
+                        'def--cols': !XEUtils.eqNull(cols)
+                    }]
+            }, [
+                h('textarea', {
+                    ref: refTextarea,
+                    class: 'vxe-textarea--inner',
+                    value: inputValue,
+                    name: props.name,
+                    placeholder: placeholder ? getFuncText(placeholder) : null,
+                    maxlength,
+                    readonly: props.readonly,
+                    disabled,
+                    rows,
+                    cols,
+                    style: resize
+                        ? {
+                            resize
+                        }
+                        : null,
+                    onInput: inputEvent,
+                    onChange: changeEvent,
+                    onKeydown: triggerEvent,
+                    onKeyup: triggerEvent,
+                    onClick: triggerEvent,
+                    onFocus: triggerEvent,
+                    onBlur: blurEvent
+                }),
+                showWordCount
+                    ? h('span', {
+                        class: ['vxe-textarea--count', {
+                                'is--error': isCountError
+                            }]
+                    }, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${maxlength ? `/${maxlength}` : ''}`)
+                    : null
+            ]);
+        };
+        $xetextarea.renderVN = renderVN;
+        return $xetextarea;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

package/es/textarea/style.css

@@ -0,0 +1,102 @@
+.vxe-textarea {
+  position: relative;
+  display: inline-block;
+}
+.vxe-textarea:not(.def--cols) {
+  width: 100%;
+}
+.vxe-textarea:not(.def--cols) .vxe-textarea--inner {
+  width: 100%;
+}
+
+.vxe-textarea--inner {
+  border-radius: var(--vxe-border-radius);
+  outline: 0;
+  font-size: inherit;
+  padding: 0 0.6em;
+  color: var(--vxe-font-color);
+  line-height: inherit;
+  border: 1px solid var(--vxe-ui-input-border-color);
+  background-color: var(--vxe-ui-textarea-background-color);
+  display: block;
+  padding: 0.3em 0.6em;
+}
+.vxe-textarea--inner::-moz-placeholder {
+  color: var(--vxe-ui-input-placeholder-color);
+}
+.vxe-textarea--inner::placeholder {
+  color: var(--vxe-ui-input-placeholder-color);
+}
+.vxe-textarea--inner:focus {
+  border: 1px solid var(--vxe-primary-color);
+}
+.vxe-textarea--inner[disabled] {
+  cursor: not-allowed;
+  background-color: var(--vxe-ui-input-disabled-background-color);
+}
+
+.vxe-textarea--inner,
+.vxe-textarea--autosize {
+  line-height: var(--vxe-ui-textarea-line-height);
+  color: var(--vxe-font-color);
+  font-family: var(--vxe-font-family);
+}
+
+.vxe-textarea--autosize {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0.3em 0.6em;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  z-index: -1;
+  visibility: hidden;
+}
+
+.vxe-textarea--count {
+  position: absolute;
+  bottom: 0.2em;
+  right: 1.4em;
+  padding-left: 0.2em;
+  color: var(--vxe-ui-input-count-color);
+  background-color: var(--vxe-ui-input-count-background-color);
+}
+.vxe-textarea--count.is--error {
+  color: var(--vxe-ui-input-count-error-color);
+}
+
+.vxe-textarea,
+.vxe-textarea--autosize {
+  font-size: var(--vxe-font-size);
+}
+.vxe-textarea.size--medium,
+.vxe-textarea--autosize.size--medium {
+  font-size: var(--vxe-font-size-medium);
+}
+.vxe-textarea.size--small,
+.vxe-textarea--autosize.size--small {
+  font-size: var(--vxe-font-size-small);
+}
+.vxe-textarea.size--mini,
+.vxe-textarea--autosize.size--mini {
+  font-size: var(--vxe-font-size-mini);
+}
+
+.vxe-textarea:not(.is--autosize) {
+  min-height: var(--vxe-ui-input-height-default);
+}
+.vxe-textarea.size--medium {
+  font-size: var(--vxe-font-size-medium);
+}
+.vxe-textarea.size--medium:not(.is--autosize) {
+  min-height: var(--vxe-ui-input-height-medium);
+}
+.vxe-textarea.size--small:not(.is--autosize) {
+  min-height: var(--vxe-ui-input-height-small);
+}
+.vxe-textarea.size--mini:not(.is--autosize) {
+  min-height: var(--vxe-ui-input-height-mini);
+}

package/es/textarea/style.min.css

@@ -0,0 +1 @@
+.vxe-textarea{position:relative;display:inline-block}.vxe-textarea:not(.def--cols){width:100%}.vxe-textarea:not(.def--cols) .vxe-textarea--inner{width:100%}.vxe-textarea--inner{border-radius:var(--vxe-border-radius);outline:0;font-size:inherit;padding:0 .6em;color:var(--vxe-font-color);line-height:inherit;border:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-textarea-background-color);display:block;padding:.3em .6em}.vxe-textarea--inner::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-textarea--inner::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-textarea--inner:focus{border:1px solid var(--vxe-primary-color)}.vxe-textarea--inner[disabled]{cursor:not-allowed;background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-textarea--autosize,.vxe-textarea--inner{line-height:var(--vxe-ui-textarea-line-height);color:var(--vxe-font-color);font-family:var(--vxe-font-family)}.vxe-textarea--autosize{display:block;position:fixed;top:0;left:0;width:100%;margin:0;padding:.3em .6em;word-wrap:break-word;white-space:pre-wrap;z-index:-1;visibility:hidden}.vxe-textarea--count{position:absolute;bottom:.2em;right:1.4em;padding-left:.2em;color:var(--vxe-ui-input-count-color);background-color:var(--vxe-ui-input-count-background-color)}.vxe-textarea--count.is--error{color:var(--vxe-ui-input-count-error-color)}.vxe-textarea,.vxe-textarea--autosize{font-size:var(--vxe-font-size)}.vxe-textarea--autosize.size--medium,.vxe-textarea.size--medium{font-size:var(--vxe-font-size-medium)}.vxe-textarea--autosize.size--small,.vxe-textarea.size--small{font-size:var(--vxe-font-size-small)}.vxe-textarea--autosize.size--mini,.vxe-textarea.size--mini{font-size:var(--vxe-font-size-mini)}.vxe-textarea:not(.is--autosize){min-height:var(--vxe-ui-input-height-default)}.vxe-textarea.size--medium{font-size:var(--vxe-font-size-medium)}.vxe-textarea.size--medium:not(.is--autosize){min-height:var(--vxe-ui-input-height-medium)}.vxe-textarea.size--small:not(.is--autosize){min-height:var(--vxe-ui-input-height-small)}.vxe-textarea.size--mini:not(.is--autosize){min-height:var(--vxe-ui-input-height-mini)}

package/es/tooltip/index.js

@@ -0,0 +1,8 @@
+import VxeTooltipComponent from './src/tooltip';
+const VxeTooltip = Object.assign({}, VxeTooltipComponent, {
+    install(app) {
+        app.component(VxeTooltipComponent.name, VxeTooltipComponent);
+    }
+});
+export const Tooltip = VxeTooltip;
+export default VxeTooltip;

package/es/tooltip/src/tooltip.js

@@ -0,0 +1,336 @@
+import { defineComponent, h, ref, nextTick, onBeforeUnmount, onMounted, reactive, watch } from 'vue';
+import XEUtils from 'xe-utils';
+import globalConfigStore from '../../ui/src/globalStore';
+import { useSize } from '../../hooks/size';
+import { getLastZIndex, nextZIndex, formatText } from '../../ui/src/utils';
+import { getAbsolutePos, getDomNode } from '../../ui/src/dom';
+import { getSlotVNs } from '../../ui/src/vn';
+export default defineComponent({
+    name: 'VxeTooltip',
+    props: {
+        modelValue: Boolean,
+        size: { type: String, default: () => globalConfigStore.tooltip.size || globalConfigStore.size },
+        trigger: { type: String, default: () => globalConfigStore.tooltip.trigger || 'hover' },
+        theme: { type: String, default: () => globalConfigStore.tooltip.theme || 'dark' },
+        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: () => globalConfigStore.tooltip.enterDelay },
+        leaveDelay: { type: Number, default: () => globalConfigStore.tooltip.leaveDelay }
+    },
+    emits: [
+        'update:modelValue'
+    ],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const xID = XEUtils.uniqueId();
+        const computeSize = useSize(props);
+        const reactData = reactive({
+            target: null,
+            isUpdate: false,
+            visible: false,
+            tipContent: '',
+            tipActive: false,
+            tipTarget: null,
+            tipZindex: 0,
+            tipStore: {
+                style: {},
+                placement: '',
+                arrowStyle: {}
+            }
+        });
+        const refElem = 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 = XEUtils.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 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 nextTick();
+            },
+            updatePlacement() {
+                return nextTick().then(() => {
+                    const { tipTarget } = reactData;
+                    const el = refElem.value;
+                    if (tipTarget && el) {
+                        updateTipStyle();
+                        return nextTick().then(updateTipStyle);
+                    }
+                });
+            },
+            isActived() {
+                return reactData.tipActive;
+            },
+            setActived(actived) {
+                reactData.tipActive = !!actived;
+            }
+        };
+        Object.assign($xetooltip, tooltipMethods);
+        watch(() => props.content, () => {
+            reactData.tipContent = props.content;
+        });
+        watch(() => props.modelValue, () => {
+            if (!reactData.isUpdate) {
+                if (props.modelValue) {
+                    tooltipMethods.open();
+                }
+                else {
+                    tooltipMethods.close();
+                }
+            }
+            reactData.isUpdate = false;
+        });
+        onMounted(() => {
+            nextTick(() => {
+                const { trigger, content, modelValue } = props;
+                const wrapperElem = refElem.value;
+                if (wrapperElem) {
+                    const parentNode = wrapperElem.parentNode;
+                    if (parentNode) {
+                        reactData.tipContent = content;
+                        reactData.tipZindex = nextZIndex();
+                        XEUtils.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();
+                        }
+                    }
+                }
+            });
+        });
+        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);
+                }
+            }
+        });
+        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'
+            }, 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 h('div', {
+                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({})) : [])
+            ]);
+        };
+        $xetooltip.renderVN = renderVN;
+        return $xetooltip;
+    },
+    render() {
+        return this.renderVN();
+    }
+});