vxe-table 3.23.4 → 3.23.6

package/packages/ui/src/dom.ts

@@ -201,6 +201,20 @@ export function hasEventInputTarget (target: EventTarget | Element | null) {
   return tagName && ['input', 'textarea'].includes((tagName.toLowerCase()))
 }
 
+/**
+ * 判断是否由内部可复用控件触发，输入框带有 vxe-reusekeep-contro
+ */
+function hasReusekeepControl (elem: EventTarget | HTMLElement | null) {
+  if (elem) {
+    return hasClass(elem as HTMLElement, 'vxe-reusekeep-contro')
+  }
+  return false
+}
+
+export function hasAxternalInputTarget (target: EventTarget | Element | null) {
+  return hasEventInputTarget(target) ? !hasReusekeepControl(target) : false
+}
+
 const scrollIntoViewIfNeeded = 'scrollIntoViewIfNeeded'
 const scrollIntoView = 'scrollIntoView'
 
@@ -247,6 +261,168 @@ export function wheelScrollTopTo (diffNum: number, cb: (progress: number) => voi
   })
 }
 
+interface PanelPlacementOptions {
+  defaultTop?: number
+  defaultLeft?: number
+  placement?: '' | 'top' | 'bottom' | null
+  defaultPlacement?: '' | 'top' | 'bottom' | null
+  teleportTo?: boolean
+  marginSize?: number
+  isMinWidth?: boolean
+}
+
+/**
+ * 通用定位计算
+ */
+export function updatePanelPlacement (targetElem: HTMLElement | null | undefined, panelElem: HTMLElement | null | undefined, options: PanelPlacementOptions) {
+  const { defaultTop, defaultLeft, placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({
+    teleportTo: false,
+    marginSize: 18,
+    isMinWidth: true
+  }, options)
+  let panelPlacement: 'top' | 'bottom' = 'bottom'
+  let top: number | '' = ''
+  let bottom: number | '' = ''
+  let left = 0
+  let minWidth: number | '' = ''
+  let arrowLeft: number | '' = ''
+  const stys: Record<string, string> = {}
+  if (panelElem && targetElem) {
+    const bodyEl = document.body
+    const parentWrapperEl = getPopupWrapperElement(panelElem)
+    if (parentWrapperEl) {
+      const targetWidth = targetElem.offsetWidth
+      const targetHeight = targetElem.offsetHeight
+      const panelWidth = panelElem.offsetWidth
+      const panelHeight = panelElem.offsetHeight
+
+      const parentWrapperRect = parentWrapperEl.getBoundingClientRect()
+      const panelRect = panelElem.getBoundingClientRect()
+      const targetRect = targetElem.getBoundingClientRect()
+      const visibleHeight = bodyEl.clientHeight
+      const visibleWidth = bodyEl.clientWidth
+
+      const offsetLeft = parentWrapperRect.left
+      const offsetTop = parentWrapperRect.top
+      const targetLeft = targetRect.left
+      const targetTop = targetRect.top
+
+      minWidth = targetElem.offsetWidth
+
+      if (teleportTo) {
+        left = defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2)
+        top = defaultTop || (targetTop + targetHeight)
+        if (placement === 'top') {
+          panelPlacement = 'top'
+          top = targetTop - panelHeight
+        } else if (!placement) {
+          if (defaultPlacement === 'top') {
+            panelPlacement = 'top'
+            if (!defaultTop) {
+              top = targetTop - panelHeight
+            }
+            // 如果上面不够放，则向下
+            if (top < marginSize) {
+              panelPlacement = 'bottom'
+              top = targetTop + targetHeight
+            }
+            // 如果下面不够放，则向上（优先）
+            if (top + panelHeight + marginSize > visibleHeight) {
+              panelPlacement = 'top'
+              top = targetTop - panelHeight
+            }
+          } else {
+            // 如果下面不够放，则向上
+            if (top + panelHeight + marginSize > visibleHeight) {
+              panelPlacement = 'top'
+              top = targetTop - panelHeight
+            }
+            // 如果上面不够放，则向下（优先）
+            if (top < marginSize) {
+              panelPlacement = 'bottom'
+              top = targetTop + targetHeight
+            }
+          }
+        }
+        // 如果溢出右边
+        if (left + panelWidth + marginSize > visibleWidth) {
+          left -= left + panelWidth + marginSize - visibleWidth
+        }
+        // 如果溢出左边
+        if (left < marginSize) {
+          left = marginSize
+        }
+
+        // 偏移
+        top -= offsetTop
+        left -= offsetLeft
+      } else {
+        if (placement === 'top') {
+          panelPlacement = 'top'
+          bottom = targetHeight
+        } else if (!placement) {
+          // 如果下面不够放，则向上
+          top = targetHeight
+          if (targetTop + targetHeight + panelHeight + marginSize > visibleHeight) {
+            // 如果上面不够放，则向下（优先）
+            if (targetTop - targetHeight - panelHeight > marginSize) {
+              panelPlacement = 'top'
+              top = ''
+              bottom = targetHeight
+            }
+          }
+        }
+        // 是否超出右侧
+        if (panelRect.left + panelRect.width + marginSize > visibleWidth) {
+          left = -(panelRect.left + panelRect.width + marginSize - visibleWidth)
+        }
+      }
+      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 (isMinWidth && XEUtils.isNumber(minWidth)) {
+        stys.minWidth = toCssUnit(minWidth)
+      }
+
+      // 箭头
+      if (left === targetLeft) {
+        if (targetWidth <= panelWidth) {
+          arrowLeft = targetWidth / 2
+        }
+      } else if (left < targetLeft) {
+        if (left + panelWidth > targetLeft + targetWidth) {
+          arrowLeft = (targetLeft - left) + targetWidth / 2
+        } else {
+          arrowLeft = (targetLeft - left) + (panelWidth - (targetLeft - left)) / 2
+        }
+      }
+    }
+  }
+  return {
+    top: top || 0,
+    bottom: bottom || 0,
+    left: left || 0,
+    arrowLeft: arrowLeft || 0,
+    style: stys,
+    placement: panelPlacement
+  }
+}
+
+export function getPopupWrapperElement (panelElem: HTMLElement | null | undefined) {
+  if (!panelElem) {
+    return null
+  }
+  const bodyEl = document.body
+  const parentEl = panelElem.parentElement
+  return (parentEl === bodyEl ? document.documentElement : parentEl) || null
+}
+
 export function getPopupContainer (appendTo: string | HTMLElement | ((params: any) => string | HTMLElement) | undefined) {
   const selectElem = appendTo && XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo
   return selectElem || 'body'

package/styles/components/table-module/filter.scss

@@ -70,7 +70,7 @@
     padding-top: 0.2em;
   }
   .vxe-table--filter-body {
-    max-height: 200px;
+    max-height: var(--vxe-ui-vxe-table-filter-default-max-height);
     padding-bottom: 0.2em;
   }
   & > ul {

package/styles/theme/base.scss

@@ -106,6 +106,8 @@
   --vxe-ui-vxe-table-custom-column-header-align-width: var(--vxe-ui-vxe-table-custom-column-align-width);
   --vxe-ui-vxe-table-custom-column-footer-align-width: var(--vxe-ui-vxe-table-custom-column-align-width);
 
+  --vxe-ui-vxe-table-filter-default-max-height: 260px;
+
   /*toolbar*/
   --vxe-ui-toolbar-custom-active-background-color: #D9DADB;
   --vxe-ui-toolbar-height-xlarge: 54px;

package/styles/theme/dark.scss

@@ -30,10 +30,6 @@
 
   /*table*/
   --vxe-ui-table-header-background-color: #28282a;
-  --vxe-ui-table-column-to-row-background-color: #28282a;
-  --vxe-ui-table-column-hover-background-color: #242f3b;
-  --vxe-ui-table-column-current-background-color: #18222c;
-  --vxe-ui-table-column-hover-current-background-color: #242f3b;
   --vxe-ui-table-border-color: #37373a;
   --vxe-ui-table-row-hover-background-color: #262727;
   --vxe-ui-table-row-striped-background-color: #1D1D1D;
@@ -44,6 +40,10 @@
   --vxe-ui-table-row-hover-checkbox-checked-background-color: #6e5326;
   --vxe-ui-table-row-current-background-color: #18222c;
   --vxe-ui-table-row-hover-current-background-color: #242f3b;
+  --vxe-ui-table-column-to-row-background-color: #28282a;
+  --vxe-ui-table-column-hover-background-color: var(--vxe-ui-table-row-hover-background-color);
+  --vxe-ui-table-column-current-background-color: var(-vxe-ui-table-row-current-background-color);
+  --vxe-ui-table-column-hover-current-background-color: var(--vxe-ui-table-row-current-background-color);
   --vxe-ui-table-fixed-scrolling-box-shadow-color: rgba(0, 0, 0, 0.8);
   --vxe-ui-table-drag-over-background-color:rgba(48, 48, 0, 0.3);
 }

package/styles/theme/light.scss

@@ -26,10 +26,6 @@
 
   /*table*/
   --vxe-ui-table-header-background-color: #{light_variable.$vxe-ui-table-header-background-color};
-  --vxe-ui-table-column-to-row-background-color: #{light_variable.$vxe-ui-table-column-to-row-background-color};
-  --vxe-ui-table-column-hover-background-color: #{light_variable.$vxe-ui-table-column-hover-background-color};
-  --vxe-ui-table-column-current-background-color: #{light_variable.$vxe-ui-table-column-current-background-color};
-  --vxe-ui-table-column-hover-current-background-color: #{light_variable.$vxe-ui-table-column-hover-current-background-color};
   --vxe-ui-table-border-color: #{light_variable.$vxe-ui-table-border-color};
   --vxe-ui-table-row-hover-background-color: #{light_variable.$vxe-ui-table-row-hover-background-color};
   --vxe-ui-table-row-striped-background-color: #{light_variable.$vxe-ui-table-row-striped-background-color};
@@ -40,6 +36,10 @@
   --vxe-ui-table-row-hover-checkbox-checked-background-color: #{light_variable.$vxe-ui-table-row-hover-checkbox-checked-background-color};
   --vxe-ui-table-row-current-background-color: #{light_variable.$vxe-ui-table-row-current-background-color};
   --vxe-ui-table-row-hover-current-background-color: #{light_variable.$vxe-ui-table-row-hover-current-background-color};
+  --vxe-ui-table-column-to-row-background-color: #{light_variable.$vxe-ui-table-column-to-row-background-color};
+  --vxe-ui-table-column-hover-background-color: #{light_variable.$vxe-ui-table-column-hover-background-color};
+  --vxe-ui-table-column-current-background-color: #{light_variable.$vxe-ui-table-column-current-background-color};
+  --vxe-ui-table-column-hover-current-background-color: #{light_variable.$vxe-ui-table-column-hover-current-background-color};
   --vxe-ui-table-fixed-scrolling-box-shadow-color: #{light_variable.$vxe-ui-table-fixed-scrolling-box-shadow-color};
   --vxe-ui-table-drag-over-background-color:#{light_variable.$vxe-ui-table-drag-over-background-color};
 }

package/styles/variable.scss

@@ -25,10 +25,6 @@ $vxe-ui-loading-background-color: rgba(255, 255, 255, 0.5) !default;
 
 /*table*/
 $vxe-ui-table-header-background-color: #f8f8f9 !default;
-$vxe-ui-table-column-to-row-background-color: #f8f8f9 !default;
-$vxe-ui-table-column-hover-background-color: #d7effb !default;
-$vxe-ui-table-column-current-background-color: #e6f7ff !default;
-$vxe-ui-table-column-hover-current-background-color: #d7effb !default;
 $vxe-ui-table-border-color: #e8eaec !default;
 $vxe-ui-table-row-hover-background-color: #f5f7fa !default;
 $vxe-ui-table-row-striped-background-color: #fafafa !default;
@@ -39,6 +35,10 @@ $vxe-ui-table-row-checkbox-checked-background-color: #fff3e0 !default;
 $vxe-ui-table-row-hover-checkbox-checked-background-color: #ffebbc !default;
 $vxe-ui-table-row-current-background-color: #e6f7ff !default;
 $vxe-ui-table-row-hover-current-background-color: #d7effb !default;
+$vxe-ui-table-column-to-row-background-color: #f8f8f9 !default;
+$vxe-ui-table-column-hover-background-color: #eceef1 !default;
+$vxe-ui-table-column-current-background-color: $vxe-ui-table-row-current-background-color !default;
+$vxe-ui-table-column-hover-current-background-color: $vxe-ui-table-row-hover-current-background-color !default;
 $vxe-ui-table-fixed-scrolling-box-shadow-color: rgba(0, 0, 0, 0.12) !default;
 $vxe-ui-table-drag-over-background-color:rgba(255,255,200,0.3) !default;