vxe-pc-ui 4.6.3 → 4.6.5

package/packages/table-select/src/table-select.ts

@@ -1,7 +1,7 @@
 import { defineComponent, ref, h, PropType, computed, inject, watch, provide, nextTick, Teleport, onMounted, onUnmounted, reactive } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI, getConfig, getIcon, globalEvents, getI18n, createEvent, useSize, renderEmptyElement } from '../../ui'
-import { getEventTargetNode, getAbsolutePos, toCssUnit } from '../../ui/src/dom'
+import { getEventTargetNode, updatePanelPlacement, toCssUnit } from '../../ui/src/dom'
 import { getOnName } from '../../ui/src/vn'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { errLog } from '../../ui/src/log'
@@ -340,74 +340,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: { [key: string]: any } = {
-            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: { [key: string]: string | number } = Object.assign(ppObj.style, {
+          zIndex: panelIndex
+        })
+        reactData.panelStyle = panelStyle
+        reactData.panelPlacement = ppObj.placement
+      }
+      handleStyle()
+      return nextTick().then(handleStyle)
     }
 
     const showOptionPanel = () => {

package/packages/tree-select/src/tree-select.ts

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, h, PropType, nextTick, inject, provide, reactive, Teleport, onMounted, onUnmounted, watch } from 'vue'
 import { getConfig, getI18n, getIcon, globalEvents, createEvent, useSize, renderEmptyElement } from '../../ui'
-import { getEventTargetNode, getAbsolutePos, toCssUnit } from '../../ui/src/dom'
+import { getEventTargetNode, updatePanelPlacement, toCssUnit } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { errLog } from '../../ui/src/log'
 import XEUtils from 'xe-utils'
@@ -296,74 +296,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: { [key: string]: any } = {
-            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: { [key: string]: string | number } = Object.assign(ppObj.style, {
+          zIndex: panelIndex
+        })
+        reactData.panelStyle = panelStyle
+        reactData.panelPlacement = ppObj.placement
+      }
+      handleStyle()
+      return nextTick().then(handleStyle)
     }
 
     const showOptionPanel = () => {

package/packages/ui/src/dom.ts

@@ -71,7 +71,7 @@ export function hasControlKey (evnt: KeyboardEvent | MouseEvent | DragEvent) {
   return evnt.ctrlKey || evnt.metaKey
 }
 
-export function toCssUnit (val?: number | string, unit = 'px') {
+export function toCssUnit (val?: number | string | null, unit = 'px') {
   if (XEUtils.isNumber(val) || /^\d+$/.test(`${val}`)) {
     return `${val}${unit}`
   }
@@ -143,3 +143,98 @@ export function triggerEvent (targetElem: Element, type: string) {
 export function isNodeElement (elem: any): elem is HTMLElement {
   return elem && elem.nodeType === 1
 }
+
+export function updatePanelPlacement (targetElem: HTMLElement | null | undefined, panelElem: HTMLElement | null | undefined, options: {
+  placement?: '' | 'top' | 'bottom' | null
+  teleportTo?: boolean
+  marginSize?: number
+}) {
+  const { placement, teleportTo, marginSize } = Object.assign({ teleportTo: false, marginSize: 5 }, options)
+  let panelPlacement: 'top' | 'bottom' = 'bottom'
+  let top: number | '' = ''
+  let bottom: number | '' = ''
+  let left: number | '' = ''
+  const right: number | '' = ''
+  let minWidth: number | '' = ''
+  const stys: Record<string, string> = {}
+  if (panelElem && targetElem) {
+    const documentElement = document.documentElement
+    const bodyElem = document.body
+    const targetHeight = targetElem.offsetHeight
+    const panelHeight = panelElem.offsetHeight
+    const panelWidth = panelElem.offsetWidth
+
+    const bounding = targetElem.getBoundingClientRect()
+    const boundingTop = bounding.top
+    const boundingLeft = bounding.left
+    const visibleHeight = documentElement.clientHeight || bodyElem.clientHeight
+    const visibleWidth = documentElement.clientWidth || bodyElem.clientWidth
+    minWidth = targetElem.offsetWidth
+    if (teleportTo) {
+      left = boundingLeft
+      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
+      }
+    } else {
+      if (placement === 'top') {
+        panelPlacement = 'top'
+        bottom = targetHeight
+      } else if (!placement) {
+        // 如果下面不够放，则向上
+        top = targetHeight
+        if (boundingTop + targetHeight + panelHeight > visibleHeight) {
+          // 如果上面不够放，则向下（优先）
+          if (boundingTop - targetHeight - panelHeight > marginSize) {
+            panelPlacement = 'top'
+            top = ''
+            bottom = targetHeight
+          }
+        }
+      }
+    }
+    if (XEUtils.isNumber(top)) {
+      stys.top = toCssUnit(top)
+    }
+    if (XEUtils.isNumber(bottom)) {
+      stys.bottom = toCssUnit(bottom)
+    }
+    if (XEUtils.isNumber(left)) {
+      stys.left = toCssUnit(left)
+    }
+    if (XEUtils.isNumber(right)) {
+      stys.right = toCssUnit(right)
+    }
+    if (XEUtils.isNumber(minWidth)) {
+      stys.minWidth = toCssUnit(minWidth)
+    }
+  }
+  return {
+    top: top || 0,
+    bottom: bottom || 0,
+    left: left || 0,
+    right: right || 0,
+    style: stys,
+    placement: panelPlacement
+  }
+}

package/styles/components/button.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "sass:list";
 @use '../helpers/baseMixin.scss';
+@use '../helpers/placement.scss';
 
 $btnThemeList: (
   (
@@ -356,27 +357,9 @@ $btnThemeList: (
 }
 
 .vxe-button--dropdown-panel {
-  display: none;
-  position: absolute;
-  right: 0;
-  padding: 4px 0;
-  &.ani--leave {
-    display: block;
-    opacity: 0;
-    transform: scaleY(0.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;
-    transform-style: preserve-3d;
-    &[placement="top"] {
-      transform-origin: center bottom;
-    }
-  }
-  &.ani--enter {
-    opacity: 1;
-    transform: scaleY(1);
-  }
+  @include placement.createPlacementPanel();
 }
+
 .vxe-button--dropdown-wrapper {
   padding: 5px;
   background-color: var(--vxe-ui-layout-background-color);

package/styles/components/color-picker.scss

@@ -1,4 +1,5 @@
 @use '../helpers/baseMixin.scss';
+@use '../helpers/placement.scss';
 
 .vxe-color-picker {
   &.is--selected {
@@ -71,33 +72,7 @@
 }
 
 .vxe-color-picker--panel {
-  display: none;
-  position: absolute;
-  left: 0;
-  padding: 4px 0;
-  color: var(--vxe-ui-font-color);
-  text-align: left;
-  &:not(.is--transfer) {
-    min-width: 100%;
-  }
-  &.is--transfer {
-    position: fixed;
-  }
-  &.ani--leave {
-    display: block;
-    opacity: 0;
-    transform: scaleY(0.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;
-    &[placement="top"] {
-      transform-origin: center bottom;
-    }
-  }
-  &.ani--enter {
-    opacity: 1;
-    transform: scaleY(1);
-  }
+  @include placement.createPlacementPanel();
 }
 
 .vxe-color-picker--color-wrapper {

package/styles/components/date-picker.scss

@@ -1,5 +1,6 @@
 @use "sass:list";
 @use '../helpers/baseMixin.scss';
+@use '../helpers/placement.scss';
 
 .vxe-date-picker--readonly {
   color: var(--vxe-ui-font-color);
@@ -106,40 +107,7 @@
 }
 
 .vxe-date-picker--panel {
-  display: none;
-  position: absolute;
-  left: 0;
-  padding: 4px 0;
-  color: var(--vxe-ui-font-color);
-  font-size: var(--vxe-ui-font-size-default);
-  text-align: left;
-  &.is--transfer {
-    position: fixed;
-  }
-  &.ani--leave {
-    display: block;
-    opacity: 0;
-    transform: scaleY(0.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;
-    transform-style: preserve-3d;
-    &[placement="top"] {
-      transform-origin: center bottom;
-    }
-  }
-  &.ani--enter {
-    opacity: 1;
-    transform: scaleY(1);
-    & > div {
-      &::after {
-        display: none;
-      }
-    }
-  }
-  & > div {
-    @include baseMixin.createEmptyMask();
-  }
+  @include placement.createPlacementPanel();
 }
 
 .vxe-date-picker--panel {

package/styles/components/date-range-picker.scss

@@ -1,5 +1,6 @@
 @use "sass:list";
 @use '../helpers/baseMixin.scss';
+@use '../helpers/placement.scss';
 
 .vxe-date-range-picker--readonly {
   color: var(--vxe-ui-font-color);
@@ -106,40 +107,7 @@
 }
 
 .vxe-date-range-picker--panel {
-  display: none;
-  position: absolute;
-  left: 0;
-  padding: 4px 0;
-  color: var(--vxe-ui-font-color);
-  font-size: var(--vxe-ui-font-size-default);
-  text-align: left;
-  &.is--transfer {
-    position: fixed;
-  }
-  &.ani--leave {
-    display: block;
-    opacity: 0;
-    transform: scaleY(0.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;
-    transform-style: preserve-3d;
-    &[placement="top"] {
-      transform-origin: center bottom;
-    }
-  }
-  &.ani--enter {
-    opacity: 1;
-    transform: scaleY(1);
-    & > div {
-      &::after {
-        display: none;
-      }
-    }
-  }
-  & > div {
-    @include baseMixin.createEmptyMask();
-  }
+  @include placement.createPlacementPanel();
 }
 
 .vxe-date-range-picker--panel {

package/styles/components/pulldown.scss

@@ -1,4 +1,5 @@
 @use '../helpers/baseMixin.scss';
+@use '../helpers/placement.scss';
 
 .vxe-pulldown {
   position: relative;
@@ -9,47 +10,7 @@
 }
 
 .vxe-pulldown--panel {
-  display: none;
-  position: absolute;
-  left: 0;
-  padding: 4px 0;
-  color: var(--vxe-ui-font-color);
-  text-align: left;
-  outline: 0;
-  &:not(.is--transfer) {
-    min-width: 100%;
-  }
-  &.is--shadow {
-    .vxe-pulldown--panel-wrapper {
-      box-shadow: var(--vxe-ui-base-popup-box-shadow);
-    }
-  }
-  &.is--transfer {
-    position: fixed;
-  }
-  &.ani--leave {
-    display: block;
-    opacity: 0;
-    transform: scaleY(0.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;
-    &[placement="top"] {
-      transform-origin: center bottom;
-    }
-  }
-  &.ani--enter {
-    opacity: 1;
-    transform: scaleY(1);
-    & > div {
-      &::after {
-        display: none;
-      }
-    }
-  }
-  & > div {
-    @include baseMixin.createEmptyMask();
-  }
+  @include placement.createPlacementPanel();
 }
 .vxe-pulldown--panel-wrapper {
   background-color: var(--vxe-ui-layout-background-color);

package/styles/components/select.scss

@@ -1,4 +1,5 @@
 @use '../helpers/baseMixin.scss';
+@use '../helpers/placement.scss';
 
 .vxe-select {
   position: relative;
@@ -50,41 +51,7 @@
 }
 
 .vxe-select--panel {
-  display: none;
-  position: absolute;
-  left: 0;
-  padding: 4px 0;
-  color: var(--vxe-ui-font-color);
-  text-align: left;
-  &:not(.is--transfer) {
-    min-width: 100%;
-  }
-  &.is--transfer {
-    position: fixed;
-  }
-  &.ani--leave {
-    display: block;
-    opacity: 0;
-    transform: scaleY(0.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;
-    &[placement="top"] {
-      transform-origin: center bottom;
-    }
-  }
-  &.ani--enter {
-    opacity: 1;
-    transform: scaleY(1);
-    & > div {
-      &::after {
-        display: none;
-      }
-    }
-  }
-  & > div {
-    @include baseMixin.createEmptyMask();
-  }
+  @include placement.createPlacementPanel();
 }
 
 .vxe-select--panel-search {

package/styles/components/table-select.scss

@@ -1,4 +1,5 @@
 @use '../helpers/baseMixin.scss';
+@use '../helpers/placement.scss';
 
 .vxe-table-select {
   position: relative;
@@ -46,42 +47,7 @@
 }
 
 .vxe-table-select--panel {
-  display: none;
-  position: absolute;
-  left: 0;
-  padding: 4px 0;
-  color: var(--vxe-ui-font-color);
-  text-align: left;
-  pointer-events: none;
-  &:not(.is--transfer) {
-    min-width: 100%;
-  }
-  &.is--transfer {
-    position: fixed;
-  }
-  &.ani--leave {
-    display: block;
-    opacity: 0;
-    transform: scaleY(0.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;
-    &[placement="top"] {
-      transform-origin: center bottom;
-    }
-  }
-  &.ani--enter {
-    opacity: 1;
-    transform: scaleY(1);
-    & > div {
-      &::after {
-        display: none;
-      }
-    }
-  }
-  & > div {
-    @include baseMixin.createEmptyMask();
-  }
+  @include placement.createPlacementPanel();
 }
 
 .vxe-table-select--panel-search {

package/styles/components/tree-select.scss

@@ -1,4 +1,5 @@
 @use '../helpers/baseMixin.scss';
+@use '../helpers/placement.scss';
 
 .vxe-tree-select {
   position: relative;
@@ -46,42 +47,7 @@
 }
 
 .vxe-tree-select--panel {
-  display: none;
-  position: absolute;
-  left: 0;
-  padding: 4px 0;
-  color: var(--vxe-ui-font-color);
-  text-align: left;
-  pointer-events: none;
-  &:not(.is--transfer) {
-    min-width: 100%;
-  }
-  &.is--transfer {
-    position: fixed;
-  }
-  &.ani--leave {
-    display: block;
-    opacity: 0;
-    transform: scaleY(0.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;
-    &[placement="top"] {
-      transform-origin: center bottom;
-    }
-  }
-  &.ani--enter {
-    opacity: 1;
-    transform: scaleY(1);
-    & > div {
-      &::after {
-        display: none;
-      }
-    }
-  }
-  & > div {
-    @include baseMixin.createEmptyMask();
-  }
+  @include placement.createPlacementPanel();
 }
 
 .vxe-tree-select--panel-search {