vxe-pc-ui 4.20.7 → 4.20.9

package/es/tabs/src/tabs.js

@@ -1,6 +1,6 @@
 import { ref, h, reactive, inject, provide, computed, onUnmounted, watch, nextTick, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
-import { VxeUI, useSize } from '../../ui';
+import { VxeUI, useFns } from '../../ui';
 import { getSlotVNs } from '../../ui/src/vn';
 import { toCssUnit, addClass, removeClass } from '../../ui/src/dom';
 import { isEnableConf } from '../../ui/src/utils';
@@ -72,7 +72,8 @@ export default defineVxeComponent({
         const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
         const $xeParentTabs = inject('$xeTabs', null);
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const refElem = ref();
         const refHeadWrapperElem = ref();
         const refHeadPrevElem = ref();
@@ -744,13 +745,13 @@ export default defineVxeComponent({
             ]);
         };
         const renderTabPane = (item) => {
-            const { useScrollbar } = props;
             const { initNames, activeName } = reactData;
             const { name, slots } = item;
             const defaultSlot = slots ? slots.default : null;
             const scrollbarProps = computeScrollbarProps.value;
+            const isVScrollbar = computeIsVScrollbar.value;
             if (name && initNames.includes(name)) {
-                return useScrollbar
+                return isVScrollbar
                     ? h(VxeScrollbarComponent, Object.assign({ key: `${name}`, class: ['vxe-tabs-pane--scrollbar-item', {
                                 'is--visible': activeName === name
                             }] }, scrollbarProps), {

package/es/tooltip/src/tooltip.js

@@ -1,7 +1,7 @@
 import { h, ref, nextTick, onBeforeUnmount, onMounted, computed, reactive, watch } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { VxeUI, useSize } from '../../ui';
+import { VxeUI, useFns } from '../../ui';
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils';
 import { getPopupAppendElement, toCssUnit, updatePanelPlacement } from '../../ui/src/dom';
 import { getSlotVNs } from '../../ui/src/vn';
@@ -129,7 +129,8 @@ export default defineVxeComponent({
     setup(props, context) {
         const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
         const refElem = ref();
@@ -309,7 +310,7 @@ export default defineVxeComponent({
             const { tipTarget: targetElem, tipStore, tipPos, tipZindex } = reactData;
             const panelElem = refElem.value;
             if (!targetElem || !panelElem) {
-                return;
+                return nextTick();
             }
             const targetRect = targetElem.getBoundingClientRect();
             const targetWidth = targetElem.offsetWidth;
@@ -346,6 +347,7 @@ export default defineVxeComponent({
             tipStore.placement = ppObj.placement;
             tipStore.style = panelStyle;
             tipStore.arrowStyle.left = ppObj.arrowLeft ? `${ppObj.arrowLeft}px` : '';
+            return nextTick();
         };
         const tooltipMethods = {
             dispatchEvent,
@@ -372,8 +374,13 @@ export default defineVxeComponent({
                 return handleVisible(target, content);
             },
             updatePlacement() {
-                updateTipStyle();
-                return nextTick().then(updateTipStyle);
+                return updateTipStyle().then(() => {
+                    return updateTipStyle();
+                }).then(() => {
+                    setTimeout(() => {
+                        updateTipStyle();
+                    }, 15);
+                });
             },
             isActived() {
                 return reactData.tipActive;
@@ -398,8 +405,9 @@ export default defineVxeComponent({
         };
         Object.assign($xeTooltip, tooltipMethods, tooltipPrivateMethods);
         const renderContent = () => {
-            const { useScrollbar, theme, useHtml, useHTML } = props;
+            const { theme, useHtml, useHTML } = props;
             const { tipContent } = reactData;
+            const isVScrollbar = computeIsVScrollbar.value;
             const wrapperStyle = computeWrapperStyle.value;
             const contentSlot = slots.content;
             const contVNs = [];
@@ -419,7 +427,7 @@ export default defineVxeComponent({
                     key: 'cd'
                 }, `${tipContent}`));
             }
-            if (useScrollbar) {
+            if (isVScrollbar) {
                 return h(VxeScrollbarComponent, {
                     key: 5,
                     ref: contentScrollbar,

package/es/tree/src/tree.js

@@ -1,6 +1,6 @@
 import { ref, h, reactive, computed, watch, onBeforeUnmount, nextTick, onMounted, provide } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
-import { VxeUI, domUtils, createEvent, useSize, globalEvents, globalResize, renderEmptyElement } from '../../ui';
+import { VxeUI, domUtils, createEvent, useFns, globalEvents, globalResize, renderEmptyElement } from '../../ui';
 import { calcTreeLine, getItemCacheObj } from './util';
 import { createComponentLog } from '../../ui/src/log';
 import { getCrossTreeDragNodeInfo } from './store';
@@ -246,11 +246,13 @@ export default defineVxeComponent({
     setup(props, context) {
         const { emit, slots } = context;
         const xID = XEUtils.uniqueId();
-        const { computeSize } = useSize(props);
+        const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const refElem = ref();
         const refHeaderWrapperElem = ref();
         const refFooterWrapperElem = ref();
         const refVirtualWrapper = ref();
+        const refVirtualSpaceElem = ref();
         const refVirtualBody = ref();
         const refTrackXElem = ref();
         const refTrackYElem = ref();
@@ -955,8 +957,14 @@ export default defineVxeComponent({
             });
         };
         const updateScrollbar = () => {
-            updateThumbSize();
-            updateThumbOffset();
+            const isVScrollbar = computeIsVScrollbar.value;
+            if (isVScrollbar) {
+                return nextTick().then(() => {
+                    updateThumbSize();
+                    updateThumbOffset();
+                });
+            }
+            return Promise.resolve();
         };
         /**
          * 重新计算列表
@@ -979,11 +987,11 @@ export default defineVxeComponent({
                     const parentPaddingSize = getPaddingTopBottomSize(parentEl);
                     reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
                 }
-                updateScrollbar();
                 updateHeight();
                 return computeScrollLoad().then(() => {
                     updateHeight();
                     updateYSpace();
+                    updateScrollbar();
                 });
             }
             return nextTick();
@@ -1008,7 +1016,7 @@ export default defineVxeComponent({
             }
         };
         const scrollEvent = (evnt) => {
-            const scrollBodyElem = evnt.target;
+            const scrollBodyElem = evnt.currentTarget;
             const scrollTop = scrollBodyElem.scrollTop;
             const scrollLeft = scrollBodyElem.scrollLeft;
             const isX = scrollLeft !== internalData.lastScrollLeft;
@@ -2996,6 +3004,26 @@ export default defineVxeComponent({
                 hideDropTip();
             }
         };
+        const bindScrollbarResize = () => {
+            const isVScrollbar = computeIsVScrollbar.value;
+            const { scrollObserver } = internalData;
+            if (isVScrollbar) {
+                if (!scrollObserver) {
+                    const el = refElem.value;
+                    const viewInnerEl = refVirtualSpaceElem.value;
+                    const scrollObserver = globalResize.create(() => {
+                        reScrollFlag.value++;
+                    });
+                    if (el) {
+                        scrollObserver.observe(el);
+                    }
+                    if (viewInnerEl) {
+                        scrollObserver.observe(viewInnerEl);
+                    }
+                    internalData.scrollObserver = scrollObserver;
+                }
+            }
+        };
         const updateThumbSize = () => {
             const viewEl = refVirtualWrapper.value;
             if (!viewEl) {
@@ -3461,9 +3489,10 @@ export default defineVxeComponent({
             return renderEmptyElement($xeTree);
         };
         const renderVN = () => {
-            const { loading, trigger, showLine, useScrollbar } = props;
+            const { loading, trigger, showLine } = props;
             const { bodyHeight, topSpaceHeight, treeList, tooltipStore, xThumbWidth, yThumbHeight } = reactData;
             const vSize = computeSize.value;
+            const isVScrollbar = computeIsVScrollbar.value;
             const radioOpts = computeRadioOpts.value;
             const checkboxOpts = computeCheckboxOpts.value;
             const loadingOpts = computeLoadingOpts.value;
@@ -3490,17 +3519,17 @@ export default defineVxeComponent({
             }
             return h('div', Object.assign({ ref: refElem, class: [
                     'vxe-tree',
-                    useScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
-                    useScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
-                    useScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
-                    useScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
+                    isVScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
+                    isVScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
+                    isVScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
+                    isVScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
                     {
                         [`size--${vSize}`]: vSize,
                         'show--line': showLine,
-                        'is--virtual-scrollbar': useScrollbar,
-                        'ov-padding': useScrollbar && scrollbarOpts.padding,
-                        'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
-                        'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+                        'is--virtual-scrollbar': isVScrollbar,
+                        'ov-padding': isVScrollbar && scrollbarOpts.padding,
+                        'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+                        'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
                         'overflow-y': yThumbHeight,
                         'overflow-x': xThumbWidth,
                         'checkbox--highlight': checkboxOpts.highlight,
@@ -3523,6 +3552,7 @@ export default defineVxeComponent({
                     onScroll: scrollEvent
                 }, [
                     h('div', {
+                        ref: refVirtualSpaceElem,
                         class: 'vxe-tree--y-space',
                         style: {
                             height: bodyHeight ? `${bodyHeight}px` : ''
@@ -3545,7 +3575,7 @@ export default defineVxeComponent({
                 /**
                  * 滚动条
                  */
-                useScrollbar
+                isVScrollbar
                     ? h('div', {
                         class: scrollbarWrapperClss
                     }, [
@@ -3668,42 +3698,53 @@ export default defineVxeComponent({
         watch(() => props.filterValue, () => {
             triggerSearchEvent(new Event('filter'));
         });
-        const reFlag = ref(0);
+        const reScrollFlag = ref(0);
+        const reLayoutFlag = ref(0);
         watch(() => props.height, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(() => props.minHeight, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(() => props.maxHeight, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
-        watch(() => props.useScrollbar, () => {
-            reFlag.value++;
+        watch(computeIsVScrollbar, () => {
+            nextTick(() => {
+                bindScrollbarResize();
+                nextTick(() => {
+                    reLayoutFlag.value++;
+                });
+            });
         });
         watch(computeScrollYWidth, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(computeScrollXHeight, () => {
-            reFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(computeScrollXVisible, () => {
             nextTick(() => {
-                reFlag.value++;
+                reLayoutFlag.value++;
             });
         });
         watch(computeScrollYVisible, () => {
             nextTick(() => {
-                reFlag.value++;
+                reLayoutFlag.value++;
             });
         });
-        watch(reFlag, () => {
+        watch(reLayoutFlag, () => {
             recalculate().then(() => {
                 recalculate();
             });
         });
+        watch(reScrollFlag, () => {
+            updateScrollbar().then(() => {
+                updateScrollbar();
+            });
+        });
         onMounted(() => {
-            const { transform, drag, menuConfig, showOverflow, lazy, loadMethod, autoResize, useScrollbar } = props;
+            const { transform, drag, menuConfig, showOverflow, lazy, loadMethod, autoResize } = props;
             const dragOpts = computeDragOpts.value;
             if (!showOverflow) {
                 errLog('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true']);
@@ -3724,25 +3765,12 @@ export default defineVxeComponent({
             if (menuConfig && !VxeUIContextMenu) {
                 errLog('vxe.error.reqComp', ['vxe-context-menu']);
             }
-            const el = refElem.value;
-            if (useScrollbar || autoResize) {
-                const viewInnerEl = refVirtualBody.value;
-                const scrollObserver = globalResize.create(() => {
-                    updateScrollbar();
-                });
-                if (el) {
-                    scrollObserver.observe(el);
-                }
-                if (viewInnerEl) {
-                    scrollObserver.observe(viewInnerEl);
-                }
-                internalData.scrollObserver = scrollObserver;
-            }
             if (autoResize) {
+                const el = refElem.value;
                 const parentEl = getParentElem();
                 const resizeObserver = globalResize.create(() => {
                     if (props.autoResize) {
-                        reFlag.value++;
+                        reLayoutFlag.value++;
                     }
                 });
                 if (el) {
@@ -3753,9 +3781,10 @@ export default defineVxeComponent({
                 }
                 internalData.resizeObserver = resizeObserver;
             }
-            reFlag.value++;
+            reLayoutFlag.value++;
+            bindScrollbarResize();
             globalEvents.on($xeTree, 'resize', () => {
-                reFlag.value++;
+                reLayoutFlag.value++;
             });
         });
         onBeforeUnmount(() => {

package/es/ui/index.js

@@ -1,7 +1,7 @@
 import { VxeUI, setConfig, setIcon } from '@vxe-ui/core';
 import { dynamicApp } from '../dynamics';
 import { warnLog } from './src/log';
-export const version = "4.20.7";
+export const version = "4.20.9";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 export function config(options) {

package/es/ui/src/log.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.20.7"}`;
+const uiVersion = `ui v${"4.20.9"}`;
 export function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';

package/lib/card/src/card.js

@@ -57,7 +57,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refElem = (0, _vue.ref)();
     const {
       computeSize
-    } = (0, _ui.useSize)(props);
+    } = _ui.useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = _ui.useFns.useVScrollbar(props);
     const reactData = (0, _vue.reactive)({});
     const refMaps = {
       refElem
@@ -120,8 +123,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         shadow,
         padding,
         loading,
-        showTitleOverflow,
-        useScrollbar
+        showTitleOverflow
       } = props;
       const defaultSlot = slots.default;
       const headerSlot = slots.header;
@@ -131,6 +133,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const leftSlot = slots.left;
       const rightSlot = slots.right;
       const vSize = computeSize.value;
+      const isVScrollbar = computeIsVScrollbar.value;
       const cardStyle = computeCardStyle.value;
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarProps = computeScrollbarProps.value;
@@ -157,7 +160,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         class: 'vxe-card--header-extra'
       }, (0, _vn.getSlotVNs)(extraSlot({}))) : (0, _ui.renderEmptyElement)($xeCard)]) : (0, _ui.renderEmptyElement)($xeCard), (0, _vue.h)('div', {
         class: 'vxe-card--body'
-      }, [leftSlot ? useScrollbar ? (0, _vue.h)(_scrollbar.default, Object.assign(Object.assign({
+      }, [leftSlot ? isVScrollbar ? (0, _vue.h)(_scrollbar.default, Object.assign(Object.assign({
         class: 'vxe-card--body-scrollbar-left'
       }, scrollbarProps), {
         viewClassName: 'vxe-card--body-scrollbar-left-view',
@@ -166,7 +169,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         default: () => (0, _vn.getSlotVNs)(leftSlot({}))
       }) : (0, _vue.h)('div', {
         class: 'vxe-card--body-left'
-      }, (0, _vn.getSlotVNs)(leftSlot({}))) : (0, _ui.renderEmptyElement)($xeCard), useScrollbar ? (0, _vue.h)(_scrollbar.default, Object.assign(Object.assign({
+      }, (0, _vn.getSlotVNs)(leftSlot({}))) : (0, _ui.renderEmptyElement)($xeCard), isVScrollbar ? (0, _vue.h)(_scrollbar.default, Object.assign(Object.assign({
         class: 'vxe-card--body-scrollbar-content'
       }, scrollbarProps), {
         viewClassName: 'vxe-card--body-scrollbar-content-view' + (viewClassName ? ' ' + viewClassName : ''),
@@ -175,7 +178,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         default: () => defaultSlot ? (0, _vn.getSlotVNs)(defaultSlot({})) : []
       }) : (0, _vue.h)('div', {
         class: 'vxe-card--body-content'
-      }, defaultSlot ? (0, _vn.getSlotVNs)(defaultSlot({})) : []), rightSlot ? useScrollbar ? (0, _vue.h)(_scrollbar.default, Object.assign(Object.assign({
+      }, defaultSlot ? (0, _vn.getSlotVNs)(defaultSlot({})) : []), rightSlot ? isVScrollbar ? (0, _vue.h)(_scrollbar.default, Object.assign(Object.assign({
         class: 'vxe-card--body-scrollbar-right'
       }, scrollbarProps), {
         viewClassName: 'vxe-card--body-scrollbar-right-view',

package/lib/card/src/card.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_vn=require("../../ui/src/vn"),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeCard",props:{title:String,showTitleOverflow:{type:Boolean,default:()=>(0,_ui.getConfig)().card.showTitleOverflow},width:[String,Number],height:[String,Number],border:{type:Boolean,default:()=>(0,_ui.getConfig)().card.border},loading:Boolean,shadow:{type:Boolean,default:()=>(0,_ui.getConfig)().card.shadow},padding:{type:Boolean,default:()=>(0,_ui.getConfig)().card.padding},size:{type:String,default:()=>(0,_ui.getConfig)().card.size||(0,_ui.getConfig)().size},useScrollbar:{type:Boolean,default:()=>(0,_utils.getDefaultConfig)((0,_ui.getConfig)().card.useScrollbar,(0,_ui.getConfig)().useScrollbar)},scrollbarConfig:Object},emits:[],setup(m,e){let{slots:x,emit:a}=e;var r=_xeUtils.default.uniqueId();let C=(0,_vue.ref)(),w=(0,_ui.useSize)(m).computeSize;var t=(0,_vue.reactive)({});let i={refElem:C},y=(0,_vue.computed)(()=>{var{height:e,width:r}=m,t={};return r&&(t.width=(0,_dom.toCssUnit)(r)),e&&(t.height=(0,_dom.toCssUnit)(e)),t}),N=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().card.scrollbarConfig,m.scrollbarConfig)),S=(0,_vue.computed)(()=>{var e=N.value;return{width:e.width,height:e.height,autoHide:e.autoHide,visible:e.visible,xConfig:e.xConfig,yConfig:e.yConfig,className:e.className,viewAttrs:e.viewAttrs}}),l={computeSize:w},V={xID:r,props:m,context:e,reactData:t,getRefMaps:()=>i,getComputeMaps:()=>l};Object.assign(V,{dispatchEvent:(e,r,t)=>{a(e,(0,_ui.createEvent)(t,{$card:V},r))}},{});return V.renderVN=()=>{var{title:e,border:r,shadow:t,padding:a,loading:i,showTitleOverflow:l,useScrollbar:s}=m;let o=x.default;var d=x.header,u=x.title,n=x.extra,v=x.footer;let c=x.left,g=x.right;var _=w.value,f=y.value,b=N.value,h=S.value,{viewClassName:b,viewInnerClassName:p}=b;return(0,_vue.h)("div",{ref:C,class:["vxe-card",{["size--"+_]:_,"is--border":r,"is--shadow":t,"is--padding":a}],style:f},[e||u||d?(0,_vue.h)("div",{class:"vxe-card--header"},d?(0,_vn.getSlotVNs)(d({})):[(0,_vue.h)("div",{class:["vxe-card--header-title",{"is--ellipsis":l}]},u?(0,_vn.getSlotVNs)(u({})):""+(e||"")),n?(0,_vue.h)("div",{class:"vxe-card--header-extra"},(0,_vn.getSlotVNs)(n({}))):(0,_ui.renderEmptyElement)(V)]):(0,_ui.renderEmptyElement)(V),(0,_vue.h)("div",{class:"vxe-card--body"},[c?s?(0,_vue.h)(_scrollbar.default,Object.assign(Object.assign({class:"vxe-card--body-scrollbar-left"},h),{viewClassName:"vxe-card--body-scrollbar-left-view",viewInnerClassName:"vxe-card--body-scrollbar-left-inner"}),{default:()=>(0,_vn.getSlotVNs)(c({}))}):(0,_vue.h)("div",{class:"vxe-card--body-left"},(0,_vn.getSlotVNs)(c({}))):(0,_ui.renderEmptyElement)(V),s?(0,_vue.h)(_scrollbar.default,Object.assign(Object.assign({class:"vxe-card--body-scrollbar-content"},h),{viewClassName:"vxe-card--body-scrollbar-content-view"+(b?" "+b:""),viewInnerClassName:"vxe-card--body-scrollbar-content-inner"+(b?" "+p:"")}),{default:()=>o?(0,_vn.getSlotVNs)(o({})):[]}):(0,_vue.h)("div",{class:"vxe-card--body-content"},o?(0,_vn.getSlotVNs)(o({})):[]),g?s?(0,_vue.h)(_scrollbar.default,Object.assign(Object.assign({class:"vxe-card--body-scrollbar-right"},h),{viewClassName:"vxe-card--body-scrollbar-right-view",viewInnerClassName:"vxe-card--body-scrollbar-right-inner"}),{default:()=>(0,_vn.getSlotVNs)(g({}))}):(0,_vue.h)("div",{class:"vxe-card--body-right"},(0,_vn.getSlotVNs)(g({}))):(0,_ui.renderEmptyElement)(V)]),v?(0,_vue.h)("div",{class:"vxe-card--footer"},(0,_vn.getSlotVNs)(v({}))):(0,_ui.renderEmptyElement)(V),(0,_vue.h)(_loading.default,{class:"vxe-card--loading",modelValue:i})])},V},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_vn=require("../../ui/src/vn"),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeCard",props:{title:String,showTitleOverflow:{type:Boolean,default:()=>(0,_ui.getConfig)().card.showTitleOverflow},width:[String,Number],height:[String,Number],border:{type:Boolean,default:()=>(0,_ui.getConfig)().card.border},loading:Boolean,shadow:{type:Boolean,default:()=>(0,_ui.getConfig)().card.shadow},padding:{type:Boolean,default:()=>(0,_ui.getConfig)().card.padding},size:{type:String,default:()=>(0,_ui.getConfig)().card.size||(0,_ui.getConfig)().size},useScrollbar:{type:Boolean,default:()=>(0,_utils.getDefaultConfig)((0,_ui.getConfig)().card.useScrollbar,(0,_ui.getConfig)().useScrollbar)},scrollbarConfig:Object},emits:[],setup(m,e){let{slots:x,emit:a}=e;var r=_xeUtils.default.uniqueId();let C=(0,_vue.ref)(),w=_ui.useFns.useSize(m).computeSize,y=_ui.useFns.useVScrollbar(m).computeIsVScrollbar;var t=(0,_vue.reactive)({});let i={refElem:C},N=(0,_vue.computed)(()=>{var{height:e,width:r}=m,t={};return r&&(t.width=(0,_dom.toCssUnit)(r)),e&&(t.height=(0,_dom.toCssUnit)(e)),t}),S=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().card.scrollbarConfig,m.scrollbarConfig)),V=(0,_vue.computed)(()=>{var e=S.value;return{width:e.width,height:e.height,autoHide:e.autoHide,visible:e.visible,xConfig:e.xConfig,yConfig:e.yConfig,className:e.className,viewAttrs:e.viewAttrs}}),l={computeSize:w},q={xID:r,props:m,context:e,reactData:t,getRefMaps:()=>i,getComputeMaps:()=>l};Object.assign(q,{dispatchEvent:(e,r,t)=>{a(e,(0,_ui.createEvent)(t,{$card:q},r))}},{});return q.renderVN=()=>{var{title:e,border:r,shadow:t,padding:a,loading:i,showTitleOverflow:l}=m;let s=x.default;var o=x.header,d=x.title,u=x.extra,n=x.footer;let v=x.left,c=x.right;var _=w.value,g=y.value,f=N.value,b=S.value,h=V.value,{viewClassName:b,viewInnerClassName:p}=b;return(0,_vue.h)("div",{ref:C,class:["vxe-card",{["size--"+_]:_,"is--border":r,"is--shadow":t,"is--padding":a}],style:f},[e||d||o?(0,_vue.h)("div",{class:"vxe-card--header"},o?(0,_vn.getSlotVNs)(o({})):[(0,_vue.h)("div",{class:["vxe-card--header-title",{"is--ellipsis":l}]},d?(0,_vn.getSlotVNs)(d({})):""+(e||"")),u?(0,_vue.h)("div",{class:"vxe-card--header-extra"},(0,_vn.getSlotVNs)(u({}))):(0,_ui.renderEmptyElement)(q)]):(0,_ui.renderEmptyElement)(q),(0,_vue.h)("div",{class:"vxe-card--body"},[v?g?(0,_vue.h)(_scrollbar.default,Object.assign(Object.assign({class:"vxe-card--body-scrollbar-left"},h),{viewClassName:"vxe-card--body-scrollbar-left-view",viewInnerClassName:"vxe-card--body-scrollbar-left-inner"}),{default:()=>(0,_vn.getSlotVNs)(v({}))}):(0,_vue.h)("div",{class:"vxe-card--body-left"},(0,_vn.getSlotVNs)(v({}))):(0,_ui.renderEmptyElement)(q),g?(0,_vue.h)(_scrollbar.default,Object.assign(Object.assign({class:"vxe-card--body-scrollbar-content"},h),{viewClassName:"vxe-card--body-scrollbar-content-view"+(b?" "+b:""),viewInnerClassName:"vxe-card--body-scrollbar-content-inner"+(b?" "+p:"")}),{default:()=>s?(0,_vn.getSlotVNs)(s({})):[]}):(0,_vue.h)("div",{class:"vxe-card--body-content"},s?(0,_vn.getSlotVNs)(s({})):[]),c?g?(0,_vue.h)(_scrollbar.default,Object.assign(Object.assign({class:"vxe-card--body-scrollbar-right"},h),{viewClassName:"vxe-card--body-scrollbar-right-view",viewInnerClassName:"vxe-card--body-scrollbar-right-inner"}),{default:()=>(0,_vn.getSlotVNs)(c({}))}):(0,_vue.h)("div",{class:"vxe-card--body-right"},(0,_vn.getSlotVNs)(c({}))):(0,_ui.renderEmptyElement)(q)]),n?(0,_vue.h)("div",{class:"vxe-card--footer"},(0,_vn.getSlotVNs)(n({}))):(0,_ui.renderEmptyElement)(q),(0,_vue.h)(_loading.default,{class:"vxe-card--loading",modelValue:i})])},q},render(){return this.renderVN()}});

package/lib/drawer/src/drawer.js

@@ -168,7 +168,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const $xeForm = (0, _vue.inject)('$xeForm', null);
     const {
       computeSize
-    } = (0, _ui.useSize)(props);
+    } = _ui.useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = _ui.useFns.useVScrollbar(props);
     const refElem = (0, _vue.ref)();
     const refDrawerBox = (0, _vue.ref)();
     const refConfirmBtn = (0, _vue.ref)();
@@ -577,16 +580,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         slots: propSlots = {},
         content,
-        useScrollbar,
         useHtml
       } = props;
+      const isVScrollbar = computeIsVScrollbar.value;
       const scrollbarProps = computeScrollbarProps.value;
       const defaultSlot = slots.default || propSlots.default;
       const leftSlot = slots.left || propSlots.left;
       const rightSlot = slots.right || propSlots.right;
       const contVNs = [];
       if (useHtml && !defaultSlot) {
-        contVNs.push(useScrollbar ? (0, _vue.h)(_scrollbar.default, Object.assign({
+        contVNs.push(isVScrollbar ? (0, _vue.h)(_scrollbar.default, Object.assign({
           key: 'shc',
           class: 'vxe-drawer--scrollbar-content'
         }, scrollbarProps), {
@@ -602,7 +605,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           innerHTML: (0, _utils.getFuncText)(content)
         }));
       } else {
-        contVNs.push(useScrollbar ? (0, _vue.h)(_scrollbar.default, Object.assign({
+        contVNs.push(isVScrollbar ? (0, _vue.h)(_scrollbar.default, Object.assign({
           key: 'sdc',
           class: 'vxe-drawer--scrollbar-content'
         }, scrollbarProps), {

package/lib/drawer/src/drawer.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_store=require("./store"),_vn=require("../../ui/src/vn"),_button=_interopRequireDefault(require("../../button")),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeDrawer",props:{modelValue:Boolean,id:String,title:String,loading:{type:Boolean,default:null},className:String,position:{type:[String,Object],default:()=>(0,_ui.getConfig)().drawer.position},lockView:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.lockView},lockScroll:Boolean,mask:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.mask},maskClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.maskClosable},escClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.escClosable},cancelClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.cancelClosable},confirmClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.confirmClosable},showHeader:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showHeader},showFooter:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showFooter},showClose:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showClose},content:[Number,String],useHtml:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.useHtml},showCancelButton:{type:Boolean,default:null},cancelButtonText:{type:String,default:()=>(0,_ui.getConfig)().drawer.cancelButtonText},showConfirmButton:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showConfirmButton},confirmButtonText:{type:String,default:()=>(0,_ui.getConfig)().drawer.confirmButtonText},destroyOnClose:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.destroyOnClose},showTitleOverflow:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showTitleOverflow},preload:Boolean,width:{type:[Number,String],default:()=>(0,_ui.getConfig)().drawer.width},height:{type:[Number,String],default:()=>(0,_ui.getConfig)().drawer.height},minWidth:{type:[Number,String],default:()=>(0,_ui.getConfig)().drawer.minWidth},minHeight:{type:[Number,String],default:()=>(0,_ui.getConfig)().drawer.minHeight},resize:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.resize},border:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.border},showTitleBackground:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showTitleBackground},zIndex:Number,transfer:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.transfer},appendTo:{type:[String,Function],default:()=>(0,_ui.getConfig)().drawer.appendTo},isWithinAppendTo:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.isWithinAppendTo},padding:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.padding},size:{type:String,default:()=>(0,_ui.getConfig)().drawer.size||(0,_ui.getConfig)().size},beforeHideMethod:Function,slots:Object,useScrollbar:{type:Boolean,default:()=>(0,_utils.getDefaultConfig)((0,_ui.getConfig)().drawer.useScrollbar,(0,_ui.getConfig)().useScrollbar)},scrollbarConfig:Object},emits:["update:modelValue","show","hide","before-hide","close","confirm","cancel","resize"],setup(b,e){let{slots:x,emit:l}=e;var t=_xeUtils.default.uniqueId();let r=(0,_vue.inject)("$xeModal",null),i=(0,_vue.inject)("$xeDrawer",null),o=(0,_vue.inject)("$xeTable",null),a=(0,_vue.inject)("$xeForm",null),C=(0,_ui.useSize)(b).computeSize,y=(0,_vue.ref)(),B=(0,_vue.ref)(),n=(0,_vue.ref)(),s=(0,_vue.ref)(),T=(0,_vue.reactive)({initialized:!1,visible:!1,contentVisible:!1,drawerZIndex:0,resizeFlag:1}),u={beforeHideMethod:(0,_ui.getConfig)().drawer.beforeHideMethod},d={refElem:y},k=(0,_vue.computed)(()=>{var e=b.transfer;if(null===e){var t=(0,_ui.getConfig)().modal.transfer;if(_xeUtils.default.isBoolean(t))return t;if(o||r||i||a)return!0}return e}),S=(0,_vue.computed)(()=>{switch(b.position){case"top":return"sb";case"bottom":return"st";case"left":return"wr"}return"wl"}),c=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().modal.scrollbarConfig,b.scrollbarConfig)),N=(0,_vue.computed)(()=>{var e=c.value,{viewClassName:t,viewInnerClassName:r}=e;return{width:e.width,height:e.height,autoHide:e.autoHide,visible:e.visible,xConfig:e.xConfig,yConfig:e.yConfig,className:e.className,viewAttrs:e.viewAttrs,viewClassName:"vxe-drawer--scrollbar-content-view"+(t?" "+t:""),viewInnerClassName:"vxe-drawer--scrollbar-content-inner"+(t?" "+r:"")}}),v={},E={xID:t,props:b,context:e,reactData:T,getRefMaps:()=>d,getComputeMaps:()=>v},V=()=>B.value,f=()=>{var{position:e,width:t,height:r}=b,i=V();return i&&(i.style.height=(e="top"===e||"bottom"===e)?(0,_dom.toCssUnit)(r):"",i.style.width=e?"":(0,_dom.toCssUnit)(t)),(0,_vue.nextTick)()},_=()=>{var e=b.zIndex,t=T.drawerZIndex;e?T.drawerZIndex=e:t<(0,_utils.getLastZIndex)()&&(T.drawerZIndex=(0,_utils.nextZIndex)())},g=()=>{-1<_store.allActiveDrawers.indexOf(E)&&_xeUtils.default.remove(_store.allActiveDrawers,e=>e===E)},w=e=>{var t=T.visible,r=b.beforeHideMethod||u.beforeHideMethod;let i={type:e};return t&&Promise.resolve(r?r(i):null).then(e=>{_xeUtils.default.isError(e)||((e=y.value)&&e.setAttribute("data-effect","y"),T.contentVisible=!1,g(),D("before-hide",i,null),setTimeout(()=>{T.visible=!1,l("update:modelValue",!1),D("hide",i,null)},200),setTimeout(()=>{var e=y.value;e&&e.removeAttribute("data-effect")},350))}).catch(e=>e),(0,_vue.nextTick)()},p=e=>{var t="close";D(t,{type:t},e),w(t)},h=e=>{var t=b.confirmClosable,r="confirm";D(r,{type:r},e),t&&w(r)},m=e=>{var t=b.cancelClosable,r="cancel";D(r,{type:r},e),t&&w(r)},z=()=>{let r=b.showFooter;var{initialized:e,visible:t}=T;return e||(T.initialized=!0),t||(T.visible=!0,T.contentVisible=!1,_(),_store.allActiveDrawers.push(E),(0,_vue.nextTick)(()=>{var e=y.value;e&&e.setAttribute("data-effect","y")}),setTimeout(()=>{f(),T.contentVisible=!0,(0,_vue.nextTick)(()=>{r&&(e=n.value,t=s.value,e=e||t)&&e.focus();var e,t={type:""};l("update:modelValue",!0),D("show",t,null)})},10),setTimeout(()=>{var e=y.value;e&&e.removeAttribute("data-effect")},350)),(0,_vue.nextTick)()},D=(e,t,r)=>{l(e,(0,_ui.createEvent)(r,{$drawer:E},t))};t={dispatchEvent:D,open:z,close(){return w("close")},getBox:V};let I=e=>{var t=y.value;b.maskClosable&&e.target===t&&w("mask")},$=t=>{if(_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ESCAPE)){let e=_xeUtils.default.max(_store.allActiveDrawers,e=>e.reactData.drawerZIndex);e&&setTimeout(()=>{e===E&&e.props.escClosable&&(D("close",{type:"exit"},t),w("exit"))},10)}},A=()=>{let t=T.drawerZIndex;_store.allActiveDrawers.some(e=>e.reactData.visible&&e.reactData.drawerZIndex>t)&&_()},q=e=>{e.preventDefault();var{resize:t,isWithinAppendTo:r}=b,i=y.value,i=(0,_dom.getPopupWrapperElement)(r?i:document.body);if(i){let o=i.clientWidth-(t&&r?8:0),a=i.clientHeight-(t&&r?8:0);let n=e.target.getAttribute("type"),s=_xeUtils.default.toNumber(b.minWidth),u=_xeUtils.default.toNumber(b.minHeight),d=o,c=a,v=V(),f=v.clientWidth,_=v.clientHeight,g=e.clientX,w=e.clientY,p=v.offsetTop,h=v.offsetLeft,m={type:"resize"};document.onmousemove=e=>{e.preventDefault();let t,r,i,l;switch(n){case"wl":t=g-e.clientX,i=t+f,0<h-t&&i>s&&(v.style.width=`${i<d?i:d}px`);break;case"st":r=w-e.clientY,l=_+r,0<p-r&&l>u&&(v.style.height=`${l<c?l:c}px`);break;case"wr":t=e.clientX-g,i=t+f,h+i+0<o&&i>s&&(v.style.width=`${i<d?i:d}px`);break;case"sb":r=e.clientY-w,l=r+_,p+l+0<a&&l>u&&(v.style.height=`${l<c?l:c}px`)}v.className=v.className.replace(/\s?is--drag/,"")+" is--drag",D("resize",m,e),T.resizeFlag++},document.onmouseup=()=>{document.onmousemove=null,document.onmouseup=null,T.resizeFlag++,setTimeout(()=>{v.className=v.className.replace(/\s?is--drag/,"")},50)}}};Object.assign(E,t,{});let O=()=>{var{slots:e={},showClose:t,title:r}=b,i=x.title||e.title,e=x.corner||e.corner;return[(0,_vue.h)("div",{class:"vxe-drawer--header-title"},i?(0,_vn.getSlotVNs)(i({$drawer:E})):r?(0,_utils.getFuncText)(r):(0,_ui.getI18n)("vxe.alert.title")),(0,_vue.h)("div",{class:"vxe-drawer--header-right"},[e?(0,_vue.h)("div",{class:"vxe-drawer--corner-wrapper"},(0,_vn.getSlotVNs)(e({$drawer:E}))):(0,_ui.renderEmptyElement)(E),t?(0,_vue.h)("div",{class:["vxe-drawer--close-btn","trigger--btn"],title:(0,_ui.getI18n)("vxe.drawer.close"),onClick:p},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().DRAWER_CLOSE})]):(0,_ui.renderEmptyElement)(E)])]},F=()=>{var{slots:e={},showCancelButton:t,showConfirmButton:r,loading:i}=b,l=x.leftfoot||e.leftfoot,e=x.rightfoot||e.rightfoot,o=[];return t&&o.push((0,_vue.h)(_button.default,{key:1,ref:s,content:b.cancelButtonText||(0,_ui.getI18n)("vxe.button.cancel"),onClick:m})),r&&o.push((0,_vue.h)(_button.default,{key:2,ref:n,loading:i,status:"primary",content:b.confirmButtonText||(0,_ui.getI18n)("vxe.button.confirm"),onClick:h})),(0,_vue.h)("div",{class:"vxe-drawer--footer-wrapper"},[(0,_vue.h)("div",{class:"vxe-drawer--footer-left"},l?(0,_vn.getSlotVNs)(l({$drawer:E})):[]),(0,_vue.h)("div",{class:"vxe-drawer--footer-right"},e?(0,_vn.getSlotVNs)(e({$drawer:E})):o)])};let H=(0,_vue.ref)(0);return(0,_vue.watch)(()=>b.width,()=>{H.value++}),(0,_vue.watch)(()=>b.height,()=>{H.value++}),(0,_vue.watch)(()=>b.position,()=>{H.value++}),(0,_vue.watch)(H,f),(0,_vue.watch)(()=>b.modelValue,e=>{e?z():w("model")}),(0,_vue.onMounted)(()=>{T.initialized=!!b.preload,(0,_vue.nextTick)(()=>{b.modelValue&&z(),f()}),b.escClosable&&_ui.globalEvents.on(E,"keydown",$)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(E,"keydown"),g()}),(0,_vue.provide)("$xeDrawer",E),E.renderVN=()=>{var{border:e,showTitleBackground:t,slots:r={},className:i,position:l,loading:o,lockScroll:a,padding:n,lockView:s,mask:u,resize:d,appendTo:c,destroyOnClose:v,isWithinAppendTo:f}=b,{initialized:_,contentVisible:g,visible:w}=T,r=x.aside||r.aside,p=C.value,h=S.value,m=k.value;return(0,_vue.h)(_vue.Teleport,{to:(0,_dom.getPopupContainer)(c),disabled:!m||!_},[(0,_vue.h)("div",{ref:y,class:["vxe-drawer--wrapper","pos--"+l,f?"ctx--within":"ctx--free",i||"",{["size--"+p]:p,"is--padding":n,"is--border":e,"is--title-bg":t,"lock--scroll":a,"lock--view":s,"is--resize":d,"is--mask":u,"is--visible":g,"is--active":w,"is--loading":o}],style:{zIndex:T.drawerZIndex},onClick:I},[(0,_vue.h)("div",{ref:B,class:"vxe-drawer--box",onMousedown:A},[r?(0,_vue.h)("div",{class:"vxe-drawer--aside"},(0,_vn.getSlotVNs)(r({$drawer:E}))):(0,_ui.renderEmptyElement)(E),(0,_vue.h)("div",{class:"vxe-drawer--container"},!T.initialized||v&&!T.visible?[]:[(()=>{var{slots:e={},showTitleOverflow:t}=b,e=x.header||e.header;return b.showHeader?(0,_vue.h)("div",{class:["vxe-drawer--header",{"is--ellipsis":t}]},e?(0,_vn.getSlotVNs)(e({$drawer:E})):O()):(0,_ui.renderEmptyElement)(E)})(),(()=>{let{slots:e={},content:t,useScrollbar:r,useHtml:i}=b;var l=N.value;let o=x.default||e.default;var a=x.left||e.left,n=x.right||e.right,s=[];return i&&!o?s.push(r?(0,_vue.h)(_scrollbar.default,Object.assign({key:"shc",class:"vxe-drawer--scrollbar-content"},l),{default(){return[(0,_vue.h)("div",{class:"vxe-drawer--scrollbar-content-html",innerHTML:(0,_utils.getFuncText)(t)})]}}):(0,_vue.h)("div",{key:"hc",class:"vxe-drawer--content",innerHTML:(0,_utils.getFuncText)(t)})):s.push(r?(0,_vue.h)(_scrollbar.default,Object.assign({key:"sdc",class:"vxe-drawer--scrollbar-content"},l),{default:()=>o?(0,_vn.getSlotVNs)(o({$drawer:E})):(0,_utils.getFuncText)(t)}):(0,_vue.h)("div",{key:"dc",class:"vxe-drawer--content"},o?(0,_vn.getSlotVNs)(o({$drawer:E})):(0,_utils.getFuncText)(t))),(0,_vue.h)("div",{class:"vxe-drawer--body"},[a?(0,_vue.h)("div",{class:"vxe-drawer--body-left"},(0,_vn.getSlotVNs)(a({$drawer:E}))):(0,_ui.renderEmptyElement)(E),(0,_vue.h)("div",{class:"vxe-drawer--body-default"},s),n?(0,_vue.h)("div",{class:"vxe-drawer--body-right"},(0,_vn.getSlotVNs)(n({$drawer:E}))):(0,_ui.renderEmptyElement)(E),(0,_vue.h)(_loading.default,{class:"vxe-drawer--loading",modelValue:b.loading})])})(),(()=>{var{slots:e={}}=b,e=x.footer||e.footer;return b.showFooter?(0,_vue.h)("div",{class:"vxe-drawer--footer"},e?(0,_vn.getSlotVNs)(e({$drawer:E})):[F()]):(0,_ui.renderEmptyElement)(E)})(),d?(0,_vue.h)("span",{class:"vxe-drawer--resize"},[(0,_vue.h)("span",{class:h+"-resize",type:h,onMousedown:q})]):(0,_ui.renderEmptyElement)(E)])])])])},E},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_store=require("./store"),_vn=require("../../ui/src/vn"),_button=_interopRequireDefault(require("../../button")),_loading=_interopRequireDefault(require("../../loading")),_scrollbar=_interopRequireDefault(require("../../scrollbar"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeDrawer",props:{modelValue:Boolean,id:String,title:String,loading:{type:Boolean,default:null},className:String,position:{type:[String,Object],default:()=>(0,_ui.getConfig)().drawer.position},lockView:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.lockView},lockScroll:Boolean,mask:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.mask},maskClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.maskClosable},escClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.escClosable},cancelClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.cancelClosable},confirmClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.confirmClosable},showHeader:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showHeader},showFooter:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showFooter},showClose:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showClose},content:[Number,String],useHtml:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.useHtml},showCancelButton:{type:Boolean,default:null},cancelButtonText:{type:String,default:()=>(0,_ui.getConfig)().drawer.cancelButtonText},showConfirmButton:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showConfirmButton},confirmButtonText:{type:String,default:()=>(0,_ui.getConfig)().drawer.confirmButtonText},destroyOnClose:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.destroyOnClose},showTitleOverflow:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showTitleOverflow},preload:Boolean,width:{type:[Number,String],default:()=>(0,_ui.getConfig)().drawer.width},height:{type:[Number,String],default:()=>(0,_ui.getConfig)().drawer.height},minWidth:{type:[Number,String],default:()=>(0,_ui.getConfig)().drawer.minWidth},minHeight:{type:[Number,String],default:()=>(0,_ui.getConfig)().drawer.minHeight},resize:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.resize},border:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.border},showTitleBackground:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.showTitleBackground},zIndex:Number,transfer:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.transfer},appendTo:{type:[String,Function],default:()=>(0,_ui.getConfig)().drawer.appendTo},isWithinAppendTo:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.isWithinAppendTo},padding:{type:Boolean,default:()=>(0,_ui.getConfig)().drawer.padding},size:{type:String,default:()=>(0,_ui.getConfig)().drawer.size||(0,_ui.getConfig)().size},beforeHideMethod:Function,slots:Object,useScrollbar:{type:Boolean,default:()=>(0,_utils.getDefaultConfig)((0,_ui.getConfig)().drawer.useScrollbar,(0,_ui.getConfig)().useScrollbar)},scrollbarConfig:Object},emits:["update:modelValue","show","hide","before-hide","close","confirm","cancel","resize"],setup(b,e){let{slots:x,emit:l}=e;var t=_xeUtils.default.uniqueId();let r=(0,_vue.inject)("$xeModal",null),i=(0,_vue.inject)("$xeDrawer",null),o=(0,_vue.inject)("$xeTable",null),a=(0,_vue.inject)("$xeForm",null),C=_ui.useFns.useSize(b).computeSize,y=_ui.useFns.useVScrollbar(b).computeIsVScrollbar,B=(0,_vue.ref)(),T=(0,_vue.ref)(),n=(0,_vue.ref)(),s=(0,_vue.ref)(),k=(0,_vue.reactive)({initialized:!1,visible:!1,contentVisible:!1,drawerZIndex:0,resizeFlag:1}),u={beforeHideMethod:(0,_ui.getConfig)().drawer.beforeHideMethod},d={refElem:B},S=(0,_vue.computed)(()=>{var e=b.transfer;if(null===e){var t=(0,_ui.getConfig)().modal.transfer;if(_xeUtils.default.isBoolean(t))return t;if(o||r||i||a)return!0}return e}),N=(0,_vue.computed)(()=>{switch(b.position){case"top":return"sb";case"bottom":return"st";case"left":return"wr"}return"wl"}),c=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().modal.scrollbarConfig,b.scrollbarConfig)),V=(0,_vue.computed)(()=>{var e=c.value,{viewClassName:t,viewInnerClassName:r}=e;return{width:e.width,height:e.height,autoHide:e.autoHide,visible:e.visible,xConfig:e.xConfig,yConfig:e.yConfig,className:e.className,viewAttrs:e.viewAttrs,viewClassName:"vxe-drawer--scrollbar-content-view"+(t?" "+t:""),viewInnerClassName:"vxe-drawer--scrollbar-content-inner"+(t?" "+r:"")}}),v={},E={xID:t,props:b,context:e,reactData:k,getRefMaps:()=>d,getComputeMaps:()=>v},z=()=>T.value,f=()=>{var{position:e,width:t,height:r}=b,i=z();return i&&(i.style.height=(e="top"===e||"bottom"===e)?(0,_dom.toCssUnit)(r):"",i.style.width=e?"":(0,_dom.toCssUnit)(t)),(0,_vue.nextTick)()},_=()=>{var e=b.zIndex,t=k.drawerZIndex;e?k.drawerZIndex=e:t<(0,_utils.getLastZIndex)()&&(k.drawerZIndex=(0,_utils.nextZIndex)())},g=()=>{-1<_store.allActiveDrawers.indexOf(E)&&_xeUtils.default.remove(_store.allActiveDrawers,e=>e===E)},w=e=>{var t=k.visible,r=b.beforeHideMethod||u.beforeHideMethod;let i={type:e};return t&&Promise.resolve(r?r(i):null).then(e=>{_xeUtils.default.isError(e)||((e=B.value)&&e.setAttribute("data-effect","y"),k.contentVisible=!1,g(),D("before-hide",i,null),setTimeout(()=>{k.visible=!1,l("update:modelValue",!1),D("hide",i,null)},200),setTimeout(()=>{var e=B.value;e&&e.removeAttribute("data-effect")},350))}).catch(e=>e),(0,_vue.nextTick)()},p=e=>{var t="close";D(t,{type:t},e),w(t)},h=e=>{var t=b.confirmClosable,r="confirm";D(r,{type:r},e),t&&w(r)},m=e=>{var t=b.cancelClosable,r="cancel";D(r,{type:r},e),t&&w(r)},I=()=>{let r=b.showFooter;var{initialized:e,visible:t}=k;return e||(k.initialized=!0),t||(k.visible=!0,k.contentVisible=!1,_(),_store.allActiveDrawers.push(E),(0,_vue.nextTick)(()=>{var e=B.value;e&&e.setAttribute("data-effect","y")}),setTimeout(()=>{f(),k.contentVisible=!0,(0,_vue.nextTick)(()=>{r&&(e=n.value,t=s.value,e=e||t)&&e.focus();var e,t={type:""};l("update:modelValue",!0),D("show",t,null)})},10),setTimeout(()=>{var e=B.value;e&&e.removeAttribute("data-effect")},350)),(0,_vue.nextTick)()},D=(e,t,r)=>{l(e,(0,_ui.createEvent)(r,{$drawer:E},t))};t={dispatchEvent:D,open:I,close(){return w("close")},getBox:z};let $=e=>{var t=B.value;b.maskClosable&&e.target===t&&w("mask")},A=t=>{if(_ui.globalEvents.hasKey(t,_ui.GLOBAL_EVENT_KEYS.ESCAPE)){let e=_xeUtils.default.max(_store.allActiveDrawers,e=>e.reactData.drawerZIndex);e&&setTimeout(()=>{e===E&&e.props.escClosable&&(D("close",{type:"exit"},t),w("exit"))},10)}},q=()=>{let t=k.drawerZIndex;_store.allActiveDrawers.some(e=>e.reactData.visible&&e.reactData.drawerZIndex>t)&&_()},F=e=>{e.preventDefault();var{resize:t,isWithinAppendTo:r}=b,i=B.value,i=(0,_dom.getPopupWrapperElement)(r?i:document.body);if(i){let o=i.clientWidth-(t&&r?8:0),a=i.clientHeight-(t&&r?8:0);let n=e.target.getAttribute("type"),s=_xeUtils.default.toNumber(b.minWidth),u=_xeUtils.default.toNumber(b.minHeight),d=o,c=a,v=z(),f=v.clientWidth,_=v.clientHeight,g=e.clientX,w=e.clientY,p=v.offsetTop,h=v.offsetLeft,m={type:"resize"};document.onmousemove=e=>{e.preventDefault();let t,r,i,l;switch(n){case"wl":t=g-e.clientX,i=t+f,0<h-t&&i>s&&(v.style.width=`${i<d?i:d}px`);break;case"st":r=w-e.clientY,l=_+r,0<p-r&&l>u&&(v.style.height=`${l<c?l:c}px`);break;case"wr":t=e.clientX-g,i=t+f,h+i+0<o&&i>s&&(v.style.width=`${i<d?i:d}px`);break;case"sb":r=e.clientY-w,l=r+_,p+l+0<a&&l>u&&(v.style.height=`${l<c?l:c}px`)}v.className=v.className.replace(/\s?is--drag/,"")+" is--drag",D("resize",m,e),k.resizeFlag++},document.onmouseup=()=>{document.onmousemove=null,document.onmouseup=null,k.resizeFlag++,setTimeout(()=>{v.className=v.className.replace(/\s?is--drag/,"")},50)}}};Object.assign(E,t,{});let O=()=>{var{slots:e={},showClose:t,title:r}=b,i=x.title||e.title,e=x.corner||e.corner;return[(0,_vue.h)("div",{class:"vxe-drawer--header-title"},i?(0,_vn.getSlotVNs)(i({$drawer:E})):r?(0,_utils.getFuncText)(r):(0,_ui.getI18n)("vxe.alert.title")),(0,_vue.h)("div",{class:"vxe-drawer--header-right"},[e?(0,_vue.h)("div",{class:"vxe-drawer--corner-wrapper"},(0,_vn.getSlotVNs)(e({$drawer:E}))):(0,_ui.renderEmptyElement)(E),t?(0,_vue.h)("div",{class:["vxe-drawer--close-btn","trigger--btn"],title:(0,_ui.getI18n)("vxe.drawer.close"),onClick:p},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().DRAWER_CLOSE})]):(0,_ui.renderEmptyElement)(E)])]},M=()=>{var{slots:e={},showCancelButton:t,showConfirmButton:r,loading:i}=b,l=x.leftfoot||e.leftfoot,e=x.rightfoot||e.rightfoot,o=[];return t&&o.push((0,_vue.h)(_button.default,{key:1,ref:s,content:b.cancelButtonText||(0,_ui.getI18n)("vxe.button.cancel"),onClick:m})),r&&o.push((0,_vue.h)(_button.default,{key:2,ref:n,loading:i,status:"primary",content:b.confirmButtonText||(0,_ui.getI18n)("vxe.button.confirm"),onClick:h})),(0,_vue.h)("div",{class:"vxe-drawer--footer-wrapper"},[(0,_vue.h)("div",{class:"vxe-drawer--footer-left"},l?(0,_vn.getSlotVNs)(l({$drawer:E})):[]),(0,_vue.h)("div",{class:"vxe-drawer--footer-right"},e?(0,_vn.getSlotVNs)(e({$drawer:E})):o)])};let H=(0,_vue.ref)(0);return(0,_vue.watch)(()=>b.width,()=>{H.value++}),(0,_vue.watch)(()=>b.height,()=>{H.value++}),(0,_vue.watch)(()=>b.position,()=>{H.value++}),(0,_vue.watch)(H,f),(0,_vue.watch)(()=>b.modelValue,e=>{e?I():w("model")}),(0,_vue.onMounted)(()=>{k.initialized=!!b.preload,(0,_vue.nextTick)(()=>{b.modelValue&&I(),f()}),b.escClosable&&_ui.globalEvents.on(E,"keydown",A)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(E,"keydown"),g()}),(0,_vue.provide)("$xeDrawer",E),E.renderVN=()=>{var{border:e,showTitleBackground:t,slots:r={},className:i,position:l,loading:o,lockScroll:a,padding:n,lockView:s,mask:u,resize:d,appendTo:c,destroyOnClose:v,isWithinAppendTo:f}=b,{initialized:_,contentVisible:g,visible:w}=k,r=x.aside||r.aside,p=C.value,h=N.value,m=S.value;return(0,_vue.h)(_vue.Teleport,{to:(0,_dom.getPopupContainer)(c),disabled:!m||!_},[(0,_vue.h)("div",{ref:B,class:["vxe-drawer--wrapper","pos--"+l,f?"ctx--within":"ctx--free",i||"",{["size--"+p]:p,"is--padding":n,"is--border":e,"is--title-bg":t,"lock--scroll":a,"lock--view":s,"is--resize":d,"is--mask":u,"is--visible":g,"is--active":w,"is--loading":o}],style:{zIndex:k.drawerZIndex},onClick:$},[(0,_vue.h)("div",{ref:T,class:"vxe-drawer--box",onMousedown:q},[r?(0,_vue.h)("div",{class:"vxe-drawer--aside"},(0,_vn.getSlotVNs)(r({$drawer:E}))):(0,_ui.renderEmptyElement)(E),(0,_vue.h)("div",{class:"vxe-drawer--container"},!k.initialized||v&&!k.visible?[]:[(()=>{var{slots:e={},showTitleOverflow:t}=b,e=x.header||e.header;return b.showHeader?(0,_vue.h)("div",{class:["vxe-drawer--header",{"is--ellipsis":t}]},e?(0,_vn.getSlotVNs)(e({$drawer:E})):O()):(0,_ui.renderEmptyElement)(E)})(),(()=>{let{slots:e={},content:t,useHtml:r}=b;var i=y.value,l=V.value;let o=x.default||e.default;var a=x.left||e.left,n=x.right||e.right,s=[];return r&&!o?s.push(i?(0,_vue.h)(_scrollbar.default,Object.assign({key:"shc",class:"vxe-drawer--scrollbar-content"},l),{default(){return[(0,_vue.h)("div",{class:"vxe-drawer--scrollbar-content-html",innerHTML:(0,_utils.getFuncText)(t)})]}}):(0,_vue.h)("div",{key:"hc",class:"vxe-drawer--content",innerHTML:(0,_utils.getFuncText)(t)})):s.push(i?(0,_vue.h)(_scrollbar.default,Object.assign({key:"sdc",class:"vxe-drawer--scrollbar-content"},l),{default:()=>o?(0,_vn.getSlotVNs)(o({$drawer:E})):(0,_utils.getFuncText)(t)}):(0,_vue.h)("div",{key:"dc",class:"vxe-drawer--content"},o?(0,_vn.getSlotVNs)(o({$drawer:E})):(0,_utils.getFuncText)(t))),(0,_vue.h)("div",{class:"vxe-drawer--body"},[a?(0,_vue.h)("div",{class:"vxe-drawer--body-left"},(0,_vn.getSlotVNs)(a({$drawer:E}))):(0,_ui.renderEmptyElement)(E),(0,_vue.h)("div",{class:"vxe-drawer--body-default"},s),n?(0,_vue.h)("div",{class:"vxe-drawer--body-right"},(0,_vn.getSlotVNs)(n({$drawer:E}))):(0,_ui.renderEmptyElement)(E),(0,_vue.h)(_loading.default,{class:"vxe-drawer--loading",modelValue:b.loading})])})(),(()=>{var{slots:e={}}=b,e=x.footer||e.footer;return b.showFooter?(0,_vue.h)("div",{class:"vxe-drawer--footer"},e?(0,_vn.getSlotVNs)(e({$drawer:E})):[M()]):(0,_ui.renderEmptyElement)(E)})(),d?(0,_vue.h)("span",{class:"vxe-drawer--resize"},[(0,_vue.h)("span",{class:h+"-resize",type:h,onMousedown:F})]):(0,_ui.renderEmptyElement)(E)])])])])},E},render(){return this.renderVN()}});