vxe-pc-ui 4.6.4 → 4.6.6

package/es/pulldown/src/pulldown.js

@@ -1,7 +1,7 @@
 import { defineComponent, h, Teleport, ref, onUnmounted, reactive, inject, computed, nextTick, watch, createCommentVNode } from 'vue';
 import XEUtils from 'xe-utils';
 import { getConfig, globalEvents, createEvent, useSize } from '../../ui';
-import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom';
+import { getEventTargetNode, updatePanelPlacement } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils';
 export default defineComponent({
     name: 'VxePulldown',
@@ -98,79 +98,24 @@ export default defineComponent({
          * 手动更新位置
          */
         const updatePlacement = () => {
-            return nextTick().then(() => {
-                const { placement } = props;
-                const { panelIndex, visiblePanel } = reactData;
-                const btnTransfer = computeBtnTransfer.value;
-                if (visiblePanel) {
-                    const targetElem = refPulldownContent.value;
-                    const panelElem = refPulldownPanel.value;
-                    if (panelElem && targetElem) {
-                        const targetHeight = targetElem.offsetHeight;
-                        const targetWidth = targetElem.offsetWidth;
-                        const panelHeight = panelElem.offsetHeight;
-                        const panelWidth = panelElem.offsetWidth;
-                        const marginSize = 5;
-                        const panelStyle = {
-                            zIndex: panelIndex
-                        };
-                        const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(targetElem);
-                        let panelPlacement = 'bottom';
-                        if (btnTransfer) {
-                            let left = boundingLeft;
-                            let top = boundingTop + targetHeight;
-                            if (placement === 'top') {
-                                panelPlacement = 'top';
-                                top = boundingTop - panelHeight;
-                            }
-                            else if (!placement) {
-                                // 如果下面不够放，则向上
-                                if (top + panelHeight + marginSize > visibleHeight) {
-                                    panelPlacement = 'top';
-                                    top = boundingTop - panelHeight;
-                                }
-                                // 如果上面不够放，则向下（优先）
-                                if (top < marginSize) {
-                                    panelPlacement = 'bottom';
-                                    top = boundingTop + targetHeight;
-                                }
-                            }
-                            // 如果溢出右边
-                            if (left + panelWidth + marginSize > visibleWidth) {
-                                left -= left + panelWidth + marginSize - visibleWidth;
-                            }
-                            // 如果溢出左边
-                            if (left < marginSize) {
-                                left = marginSize;
-                            }
-                            Object.assign(panelStyle, {
-                                left: `${left}px`,
-                                top: `${top}px`,
-                                minWidth: `${targetWidth}px`
-                            });
-                        }
-                        else {
-                            if (placement === 'top') {
-                                panelPlacement = 'top';
-                                panelStyle.bottom = `${targetHeight}px`;
-                            }
-                            else if (!placement) {
-                                // 如果下面不够放，则向上
-                                if (boundingTop + targetHeight + panelHeight > visibleHeight) {
-                                    // 如果上面不够放，则向下（优先）
-                                    if (boundingTop - targetHeight - panelHeight > marginSize) {
-                                        panelPlacement = 'top';
-                                        panelStyle.bottom = `${targetHeight}px`;
-                                    }
-                                }
-                            }
-                        }
-                        reactData.panelStyle = panelStyle;
-                        reactData.panelPlacement = panelPlacement;
-                    }
-                }
-                return nextTick();
-            });
+            const { placement } = props;
+            const { panelIndex } = reactData;
+            const targetElem = refPulldownContent.value;
+            const panelElem = refPulldownPanel.value;
+            const btnTransfer = computeBtnTransfer.value;
+            const handleStyle = () => {
+                const ppObj = updatePanelPlacement(targetElem, panelElem, {
+                    placement,
+                    teleportTo: btnTransfer
+                });
+                const panelStyle = Object.assign(ppObj.style, {
+                    zIndex: panelIndex
+                });
+                reactData.panelStyle = panelStyle;
+                reactData.panelPlacement = ppObj.placement;
+            };
+            handleStyle();
+            return nextTick().then(handleStyle);
         };
         /**
          * 显示下拉面板

package/es/pulldown/style.css

@@ -13,14 +13,10 @@
   padding: 4px 0;
   color: var(--vxe-ui-font-color);
   text-align: left;
-  outline: 0;
 }
 .vxe-pulldown--panel:not(.is--transfer) {
   min-width: 100%;
 }
-.vxe-pulldown--panel.is--shadow .vxe-pulldown--panel-wrapper {
-  box-shadow: var(--vxe-ui-base-popup-box-shadow);
-}
 .vxe-pulldown--panel.is--transfer {
   position: fixed;
 }

package/es/pulldown/style.min.css

@@ -1 +1 @@
-.vxe-pulldown{position:relative;display:inline-block;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);text-align:left}.vxe-pulldown--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left;outline:0}.vxe-pulldown--panel:not(.is--transfer){min-width:100%}.vxe-pulldown--panel.is--shadow .vxe-pulldown--panel-wrapper{box-shadow:var(--vxe-ui-base-popup-box-shadow)}.vxe-pulldown--panel.is--transfer{position:fixed}.vxe-pulldown--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-pulldown--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-pulldown--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-pulldown--panel.ani--enter>div::after{display:none}.vxe-pulldown--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-pulldown--panel-wrapper{background-color:var(--vxe-ui-layout-background-color)}.vxe-pulldown--panel-list .vxe-pulldown--panel-item{line-height:30px;max-width:50vw;padding:0 var(--vxe-ui-layout-padding-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-pulldown--panel-list .vxe-pulldown--panel-item:not(.is--disabled){cursor:pointer}.vxe-pulldown--panel-list .vxe-pulldown--panel-item:not(.is--disabled):hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-pulldown--panel-list .vxe-pulldown--panel-item.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-pulldown,.vxe-pulldown--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-pulldown--panel.size--medium,.vxe-pulldown.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-pulldown--panel.size--small,.vxe-pulldown.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-pulldown--panel.size--mini,.vxe-pulldown.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-pulldown--panel .vxe-pulldown--panel-item{height:var(--vxe-ui-pulldown-option-height-default)}.vxe-pulldown--panel.size--medium .vxe-pulldown--panel-item{height:var(--vxe-ui-pulldown-option-height-medium)}.vxe-pulldown--panel.size--small .vxe-pulldown--panel-item{height:var(--vxe-ui-pulldown-option-height-medium)}.vxe-pulldown--panel.size--mini .vxe-pulldown--panel-item{height:var(--vxe-ui-pulldown-option-height-medium)}
+.vxe-pulldown{position:relative;display:inline-block;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);text-align:left}.vxe-pulldown--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-pulldown--panel:not(.is--transfer){min-width:100%}.vxe-pulldown--panel.is--transfer{position:fixed}.vxe-pulldown--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-pulldown--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-pulldown--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-pulldown--panel.ani--enter>div::after{display:none}.vxe-pulldown--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-pulldown--panel-wrapper{background-color:var(--vxe-ui-layout-background-color)}.vxe-pulldown--panel-list .vxe-pulldown--panel-item{line-height:30px;max-width:50vw;padding:0 var(--vxe-ui-layout-padding-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-pulldown--panel-list .vxe-pulldown--panel-item:not(.is--disabled){cursor:pointer}.vxe-pulldown--panel-list .vxe-pulldown--panel-item:not(.is--disabled):hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-pulldown--panel-list .vxe-pulldown--panel-item.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-pulldown,.vxe-pulldown--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-pulldown--panel.size--medium,.vxe-pulldown.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-pulldown--panel.size--small,.vxe-pulldown.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-pulldown--panel.size--mini,.vxe-pulldown.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-pulldown--panel .vxe-pulldown--panel-item{height:var(--vxe-ui-pulldown-option-height-default)}.vxe-pulldown--panel.size--medium .vxe-pulldown--panel-item{height:var(--vxe-ui-pulldown-option-height-medium)}.vxe-pulldown--panel.size--small .vxe-pulldown--panel-item{height:var(--vxe-ui-pulldown-option-height-medium)}.vxe-pulldown--panel.size--mini .vxe-pulldown--panel-item{height:var(--vxe-ui-pulldown-option-height-medium)}

package/es/select/src/select.js

@@ -1,7 +1,7 @@
 import { defineComponent, h, Teleport, ref, inject, computed, provide, onUnmounted, reactive, nextTick, watch, onMounted } from 'vue';
 import XEUtils from 'xe-utils';
 import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui';
-import { getEventTargetNode, getAbsolutePos } from '../../ui/src/dom';
+import { getEventTargetNode, updatePanelPlacement } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
 import VxeInputComponent from '../../input/src/input';
@@ -367,77 +367,24 @@ export default defineComponent({
             }
         };
         const updatePlacement = () => {
-            return nextTick().then(() => {
-                const { placement } = props;
-                const { panelIndex } = reactData;
-                const el = refElem.value;
-                const panelElem = refOptionPanel.value;
-                const btnTransfer = computeBtnTransfer.value;
-                if (panelElem && el) {
-                    const targetHeight = el.offsetHeight;
-                    const targetWidth = el.offsetWidth;
-                    const panelHeight = panelElem.offsetHeight;
-                    const panelWidth = panelElem.offsetWidth;
-                    const marginSize = 5;
-                    const panelStyle = {
-                        zIndex: panelIndex
-                    };
-                    const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(el);
-                    let panelPlacement = 'bottom';
-                    if (btnTransfer) {
-                        let left = boundingLeft;
-                        let top = boundingTop + targetHeight;
-                        if (placement === 'top') {
-                            panelPlacement = 'top';
-                            top = boundingTop - panelHeight;
-                        }
-                        else if (!placement) {
-                            // 如果下面不够放，则向上
-                            if (top + panelHeight + marginSize > visibleHeight) {
-                                panelPlacement = 'top';
-                                top = boundingTop - panelHeight;
-                            }
-                            // 如果上面不够放，则向下（优先）
-                            if (top < marginSize) {
-                                panelPlacement = 'bottom';
-                                top = boundingTop + targetHeight;
-                            }
-                        }
-                        // 如果溢出右边
-                        if (left + panelWidth + marginSize > visibleWidth) {
-                            left -= left + panelWidth + marginSize - visibleWidth;
-                        }
-                        // 如果溢出左边
-                        if (left < marginSize) {
-                            left = marginSize;
-                        }
-                        Object.assign(panelStyle, {
-                            left: `${left}px`,
-                            top: `${top}px`,
-                            minWidth: `${targetWidth}px`
-                        });
-                    }
-                    else {
-                        if (placement === 'top') {
-                            panelPlacement = 'top';
-                            panelStyle.bottom = `${targetHeight}px`;
-                        }
-                        else if (!placement) {
-                            // 如果下面不够放，则向上
-                            if (boundingTop + targetHeight + panelHeight > visibleHeight) {
-                                // 如果上面不够放，则向下（优先）
-                                if (boundingTop - targetHeight - panelHeight > marginSize) {
-                                    panelPlacement = 'top';
-                                    panelStyle.bottom = `${targetHeight}px`;
-                                }
-                            }
-                        }
-                    }
-                    reactData.panelStyle = panelStyle;
-                    reactData.panelPlacement = panelPlacement;
-                    return nextTick();
-                }
-            });
+            const { placement } = props;
+            const { panelIndex } = reactData;
+            const targetElem = refElem.value;
+            const panelElem = refOptionPanel.value;
+            const btnTransfer = computeBtnTransfer.value;
+            const handleStyle = () => {
+                const ppObj = updatePanelPlacement(targetElem, panelElem, {
+                    placement,
+                    teleportTo: btnTransfer
+                });
+                const panelStyle = Object.assign(ppObj.style, {
+                    zIndex: panelIndex
+                });
+                reactData.panelStyle = panelStyle;
+                reactData.panelPlacement = ppObj.placement;
+            };
+            handleStyle();
+            return nextTick().then(handleStyle);
         };
         const showOptionPanel = () => {
             const { loading, filterable, remote } = props;