vxe-pc-ui 4.6.4 → 4.6.5

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

@@ -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 {

package/styles/helpers/placement.scss

@@ -0,0 +1,39 @@
+@use './baseMixin.scss';
+
+@mixin createPlacementPanel {
+  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();
+  }
+}

package/types/components/table.d.ts

@@ -1943,6 +1943,54 @@ export namespace VxeTablePropTypes {
       replaceValue: string
       result: VxeTableExtendCellAreaDefines.FindAndReplaceResult[]
     }) => void
+    /**
+     * 匹配选项配置
+     */
+    matchOptions?: {
+      /**
+       * 是否启用正则表达式
+       */
+      isRE?: boolean
+      /**
+       * 是否启用全词匹配
+       */
+      isWhole?: boolean
+      /**
+       * 是否启用区分大小写
+       */
+      isSensitive?: boolean
+    }
+    /**
+     * 列表配置项
+     */
+    listOptions?: {
+      /**
+       * 格式化列表的显示值
+       */
+      formatCellValue?(params: {
+        item: VxeTableExtendCellAreaDefines.FNRSearch
+        cellValue: any
+      }): string | number
+    }
+    /**
+     * 弹窗配置项
+     */
+    modalOptions?: {
+      title?: VxeModalPropTypes.Title
+      width?: VxeModalPropTypes.Width
+      minWidth?: VxeModalPropTypes.MinWidth
+      height?: VxeModalPropTypes.Height
+      minHeight?: VxeModalPropTypes.MinHeight
+      className?: VxeModalPropTypes.ClassName
+      resize?: VxeModalPropTypes.Resize
+      showMaximize?: VxeModalPropTypes.ShowMaximize
+      showMinimize?: VxeModalPropTypes.ShowMinimize
+      showZoom?: VxeModalPropTypes.ShowZoom
+      lockView?: VxeModalPropTypes.LockView
+      mask?: VxeModalPropTypes.Mask
+      maskClosable?: VxeModalPropTypes.MaskClosable
+      escClosable?: VxeModalPropTypes.EscClosable
+    }
   }
   export interface FNROpts<DT = any> extends FnrConfig<DT> { }
 
@@ -3095,6 +3143,7 @@ export interface VxeTableProps<D = any> {
 export interface TablePrivateComputed<D = any> {
   computeSize: ComputedRef<VxeTablePropTypes.Size>
   computeTableId: ComputedRef<string>
+  computeRowField: ComputedRef<string>
   computeValidOpts: ComputedRef<VxeTablePropTypes.ValidOpts<D>>
   computeVirtualXOpts: ComputedRef<VxeTablePropTypes.VirtualXConfig & { gt: number }>
   computeVirtualYOpts: ComputedRef<VxeTablePropTypes.VirtualYConfig & { gt: number }>
@@ -3426,6 +3475,8 @@ export interface TableReactData<D = any> {
 
 export interface TableInternalData<D = any> {
   tZindex: number
+  currKeyField: string
+  isCurrDeepKey: boolean
   elemStore: {
     [key: string]: Ref<HTMLElement> |Ref<ComponentPublicInstance> | null
   }