vxe-table 3.25.0-beta.2 → 3.25.0-beta.4

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

@@ -31,6 +31,7 @@
 .vxe-table--filter-wrapper {
   display: none;
   position: absolute;
+  flex-direction: column;
   top: 0;
   min-width: 100px;
   font-size: var(--vxe-ui-font-size-default);
@@ -40,6 +41,7 @@
   color: var(--vxe-ui-font-color);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
   z-index: 15;
+  max-height: var(--vxe-ui-vxe-table-filter-default-max-height);
   &:not(.is--multiple) {
     .vxe-table--filter-header,
     .vxe-table--filter-body {
@@ -47,11 +49,24 @@
     }
   }
   &.is--active {
-    display: block;
+    display: flex;
+  }
+  .vxe-table--filter-body,
+  .vxe-table--scrollbar-filter-body {
+    overflow: auto;
+    flex-grow: 1;
+  }
+  .vxe-table--scrollbar-filter-body {
+    display: flex;
+    flex-direction: column;
+    .vxe-table--scrollbar-filter-body-view {
+      flex-grow: 1;
+    }
   }
   .vxe-table--filter-header,
-  .vxe-table--filter-body {
-    & > li {
+  .vxe-table--filter-body,
+  .vxe-table--scrollbar-filter-body {
+    .vxe-table--filter-option {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -69,11 +84,12 @@
   .vxe-table--filter-header {
     padding-top: 0.2em;
   }
-  .vxe-table--filter-body {
-    max-height: var(--vxe-ui-vxe-table-filter-default-max-height);
+  .vxe-table--filter-body,
+  .vxe-table--scrollbar-filter-body {
     padding-bottom: 0.2em;
   }
-  & > ul {
+  .vxe-table--filter-header,
+  .vxe-table--filter-body {
     list-style-type: none;
     padding: 0;
     margin: 0;
@@ -81,12 +97,9 @@
     overflow: auto;
     user-select: none;
   }
-  &.is--multiple {
-    & > ul {
-      & > li {
-        padding: 0.25em 0.8em 0.25em 1em;
-      }
-    }
+  .vxe-table--filter-header,
+  .vxe-table--filter-footer {
+    flex-shrink: 0;
   }
   .vxe-table--filter-footer {
     border-top: 1px solid var(--vxe-ui-base-popup-border-color);
@@ -116,8 +129,6 @@
   @include baseMixin.createCheckboxIcon();
 }
 
-
-
 .vxe-table--filter-wrapper {
   &.size--medium {
     font-size: var(--vxe-ui-font-size-medium);

package/es/table/src/scrollbar.js

@@ -1,54 +0,0 @@
-/**
- * 计算滚动条滑块的长度
- */
-export function getThumbSize(viewportSize, contentSize, trackSize) {
-    if (contentSize <= viewportSize) {
-        return 0;
-    }
-    const ratio = viewportSize / contentSize;
-    const ideal = trackSize * ratio;
-    return Math.max(20, Math.min(ideal, trackSize));
-}
-/**
- * 计算滚动条滑块的偏移位置
- */
-export function getThumbOffsetSize(offsetSize, viewportSize, contentSize, trackSize, thumbSize) {
-    const maxScroll = contentSize - viewportSize;
-    if (maxScroll <= 0) {
-        return 0;
-    }
-    const maxThumbOffset = trackSize - thumbSize;
-    if (maxThumbOffset <= 0) {
-        return 0;
-    }
-    const clamped = Math.min(Math.max(offsetSize, 0), maxScroll);
-    const ratio = clamped / maxScroll;
-    return ratio * maxThumbOffset;
-}
-/**
- * 根据点击轨道的位置，计算滑块的偏移位置
- */
-export function getScrollFromClick(clickPosition, viewportSize, contentSize, trackSize, thumbSize) {
-    const maxThumbOffset = trackSize - thumbSize;
-    const maxScroll = contentSize - viewportSize;
-    if (maxScroll <= 0 || maxThumbOffset <= 0) {
-        return 0;
-    }
-    let thumbOffset = clickPosition - thumbSize / 2;
-    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
-    const scrollOffset = (thumbOffset / maxThumbOffset) * maxScroll;
-    return scrollOffset;
-}
-/**
- * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
- */
-export function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSize, trackSize, thumbSize) {
-    const maxScroll = contentSize - viewportSize;
-    const maxThumbOffset = trackSize - thumbSize;
-    if (maxScroll <= 0 || maxThumbOffset <= 0) {
-        return 0;
-    }
-    let thumbOffset = pointerPosition - dragOffset;
-    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
-    return (thumbOffset / maxThumbOffset) * maxScroll;
-}

package/lib/table/src/scrollbar.js

@@ -1,63 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getScrollFromClick = getScrollFromClick;
-exports.getScrollFromDrag = getScrollFromDrag;
-exports.getThumbOffsetSize = getThumbOffsetSize;
-exports.getThumbSize = getThumbSize;
-/**
- * 计算滚动条滑块的长度
- */
-function getThumbSize(viewportSize, contentSize, trackSize) {
-  if (contentSize <= viewportSize) {
-    return 0;
-  }
-  const ratio = viewportSize / contentSize;
-  const ideal = trackSize * ratio;
-  return Math.max(20, Math.min(ideal, trackSize));
-}
-/**
- * 计算滚动条滑块的偏移位置
- */
-function getThumbOffsetSize(offsetSize, viewportSize, contentSize, trackSize, thumbSize) {
-  const maxScroll = contentSize - viewportSize;
-  if (maxScroll <= 0) {
-    return 0;
-  }
-  const maxThumbOffset = trackSize - thumbSize;
-  if (maxThumbOffset <= 0) {
-    return 0;
-  }
-  const clamped = Math.min(Math.max(offsetSize, 0), maxScroll);
-  const ratio = clamped / maxScroll;
-  return ratio * maxThumbOffset;
-}
-/**
- * 根据点击轨道的位置，计算滑块的偏移位置
- */
-function getScrollFromClick(clickPosition, viewportSize, contentSize, trackSize, thumbSize) {
-  const maxThumbOffset = trackSize - thumbSize;
-  const maxScroll = contentSize - viewportSize;
-  if (maxScroll <= 0 || maxThumbOffset <= 0) {
-    return 0;
-  }
-  let thumbOffset = clickPosition - thumbSize / 2;
-  thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
-  const scrollOffset = thumbOffset / maxThumbOffset * maxScroll;
-  return scrollOffset;
-}
-/**
- * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
- */
-function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSize, trackSize, thumbSize) {
-  const maxScroll = contentSize - viewportSize;
-  const maxThumbOffset = trackSize - thumbSize;
-  if (maxScroll <= 0 || maxThumbOffset <= 0) {
-    return 0;
-  }
-  let thumbOffset = pointerPosition - dragOffset;
-  thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
-  return thumbOffset / maxThumbOffset * maxScroll;
-}

package/lib/table/src/scrollbar.min.js

@@ -1 +0,0 @@
-function getThumbSize(t,e,r){return e<=t?0:Math.max(20,Math.min(r*(t/e),r))}function getThumbOffsetSize(t,e,r,o,m){r-=e;return r<=0||(e=o-m)<=0?0:Math.min(Math.max(t,0),r)/r*e}function getScrollFromClick(t,e,r,o,m){o-=m,r-=e;return r<=0||o<=0?0:(e=t-m/2,(e=Math.min(Math.max(e,0),o))/o*r)}function getScrollFromDrag(t,e,r,o,m,i){o-=r,r=m-i;return o<=0||r<=0?0:(m=t-e,(m=Math.min(Math.max(m,0),r))/r*o)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getScrollFromClick=getScrollFromClick,exports.getScrollFromDrag=getScrollFromDrag,exports.getThumbOffsetSize=getThumbOffsetSize,exports.getThumbSize=getThumbSize;

package/packages/table/src/scrollbar.ts

@@ -1,57 +0,0 @@
-/**
- * 计算滚动条滑块的长度
- */
-export function getThumbSize (viewportSize: number, contentSize: number, trackSize: number) {
-  if (contentSize <= viewportSize) {
-    return 0
-  }
-  const ratio = viewportSize / contentSize
-  const ideal = trackSize * ratio
-  return Math.max(20, Math.min(ideal, trackSize))
-}
-
-/**
- * 计算滚动条滑块的偏移位置
- */
-export function getThumbOffsetSize (offsetSize: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number) {
-  const maxScroll = contentSize - viewportSize
-  if (maxScroll <= 0) {
-    return 0
-  }
-  const maxThumbOffset = trackSize - thumbSize
-  if (maxThumbOffset <= 0) {
-    return 0
-  }
-  const clamped = Math.min(Math.max(offsetSize, 0), maxScroll)
-  const ratio = clamped / maxScroll
-  return ratio * maxThumbOffset
-}
-
-/**
- * 根据点击轨道的位置，计算滑块的偏移位置
- */
-export function getScrollFromClick (clickPosition: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number) {
-  const maxThumbOffset = trackSize - thumbSize
-  const maxScroll = contentSize - viewportSize
-  if (maxScroll <= 0 || maxThumbOffset <= 0) {
-    return 0
-  }
-  let thumbOffset = clickPosition - thumbSize / 2
-  thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset)
-  const scrollOffset = (thumbOffset / maxThumbOffset) * maxScroll
-  return scrollOffset
-}
-
-/**
- * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
- */
-export function getScrollFromDrag (pointerPosition: number, dragOffset: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number) {
-  const maxScroll = contentSize - viewportSize
-  const maxThumbOffset = trackSize - thumbSize
-  if (maxScroll <= 0 || maxThumbOffset <= 0) {
-    return 0
-  }
-  let thumbOffset = pointerPosition - dragOffset
-  thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset)
-  return (thumbOffset / maxThumbOffset) * maxScroll
-}