bkui-vue 0.0.1-beta.68 → 0.0.1-beta.70

package/dist/index.esm.js

@@ -12468,10 +12468,11 @@ var useTagRender = (props, ctx) => {
     renderAs,
     contentAs
   } = props;
-  const handleScrollCallback = (event, _startIndex, _endIndex, _scrollTop, translateY, scrollLeft) => {
+  const handleScrollCallback = (event, _startIndex, _endIndex, _scrollTop, translateY, scrollLeft, pos) => {
     ctx.emit("content-scroll", [event, {
       translateY,
-      translateX: scrollLeft
+      translateX: scrollLeft,
+      pos
     }]);
   };
   const vVirtualRender = resolveDirective("bkVirtualRender");
@@ -12535,7 +12536,8 @@ function computedVirtualIndex(lineHeight, callback, pagination2, el, event) {
     targetEndIndex = endValue.startIndex + targetStartIndex + 1;
   }
   if (elScrollTop !== scrollTop || targetStartIndex !== startIndex || targetEndIndex !== endIndex) {
-    typeof callback === "function" && callback(event, targetStartIndex, targetEndIndex, elScrollTop, translateY, elScrollLeft);
+    const bottom2 = el.scrollHeight - el.offsetHeight - el.scrollTop;
+    typeof callback === "function" && callback(event, targetStartIndex, targetEndIndex, elScrollTop, translateY, elScrollLeft, { bottom: bottom2 });
   }
 }
 function visibleRender(e, wrapper, binding) {
@@ -12543,21 +12545,16 @@ function visibleRender(e, wrapper, binding) {
   if (onlyScroll) {
     const elScrollTop = wrapper.scrollTop;
     const elScrollLeft = wrapper.scrollLeft;
-    handleScrollCallback(e, null, null, elScrollTop, elScrollTop, elScrollLeft);
+    const bottom2 = wrapper.scrollHeight - wrapper.offsetHeight - wrapper.scrollTop;
+    handleScrollCallback(e, null, null, elScrollTop, elScrollTop, elScrollLeft, { bottom: bottom2 });
     return;
   }
   const { startIndex, endIndex, groupItemCount, count, scrollTop } = pagination2;
   computedVirtualIndex(lineHeight, handleScrollCallback, { scrollTop, startIndex, endIndex, groupItemCount, count }, wrapper, e);
 }
 const throttledRender = (delay = 60) => lodash.exports.throttle((e, wrapper, binding) => visibleRender(e, wrapper, binding), delay);
-let cachedThrottle = null;
 const executeThrottledRender = (e, wrapper, binding, delay = 60) => {
-  if (!cachedThrottle) {
-    cachedThrottle = throttledRender(delay);
-  }
-  if (typeof cachedThrottle === "function") {
-    cachedThrottle.call(globalThis, e, wrapper, binding);
-  }
+  Reflect.apply(throttledRender(delay), globalThis, [e, wrapper, binding]);
 };
 var virtualRender = {
   mounted(el, binding) {
@@ -12567,11 +12564,6 @@ var virtualRender = {
       executeThrottledRender(e, wrapper, binding, throttleDelay);
     });
   },
-  updated(el, binding) {
-    const wrapper = el.parentNode;
-    const { throttleDelay } = binding.value;
-    executeThrottledRender(null, wrapper, binding, throttleDelay);
-  },
   unbind(el) {
     if (el) {
       const wrapper = el.parentNode;
@@ -12617,14 +12609,16 @@ var Component$a = defineComponent({
       translateY: 0,
       translateX: 0,
       count: 0,
+      pos: {},
       groupItemCount: props.groupItemCount
     });
-    const handleScrollCallback = (event, startIndex, endIndex, scrollTop, translateY, scrollLeft) => {
+    const handleScrollCallback = (event, startIndex, endIndex, scrollTop, translateY, scrollLeft, pos) => {
       pagination2.startIndex = startIndex;
       pagination2.endIndex = endIndex;
       pagination2.scrollTop = scrollTop;
       pagination2.translateY = translateY;
       pagination2.translateX = scrollLeft;
+      pagination2.pos = pos;
       ctx.emit("content-scroll", [event, pagination2]);
     };
     onMounted(() => {
@@ -14299,8 +14293,13 @@ class TableRender {
 }
 const useClass = (props, root, reactiveProp) => {
   const autoHeight = ref(200);
+  const hasScrollY = ref(false);
+  const hasFooter = computed(() => props.pagination && props.data.length);
   const tableClass = computed(() => classes({
-    [resolveClassName("table")]: true
+    [resolveClassName("table")]: true,
+    "has-footer": hasFooter.value,
+    "has-scroll-y": hasScrollY.value || props.virtualEnabled,
+    "is-scroll-bottom": reactiveProp.pos.bottom < 2
   }, resolvePropBorderToClassStr(props.border)));
   const headClass = classes({
     [resolveClassName("table-head")]: true
@@ -14335,23 +14334,24 @@ const useClass = (props, root, reactiveProp) => {
     }
     return defaultValue;
   };
-  const contentStyle = computed(() => {
+  const contentStyle = reactive({});
+  const resolveContentStyle = () => {
     const resolveHeight = resolvePropHeight(props.height, autoHeight.value);
     const resolveHeadHeight = props.showHead ? resolvePropHeight(props.headHeight, 40) + 2 : 0;
     const resolveMaxHeight = resolvePropHeight(props.maxHeight, autoHeight.value);
     const resolveMinHeight = resolvePropHeight(props.minHeight, autoHeight.value);
     const resolveFooterHeight = props.pagination && props.data.length ? 40 : 0;
     const contentHeight = resolveHeight - resolveHeadHeight - resolveFooterHeight;
-    const maxHeight = resolveMaxHeight - resolveHeadHeight - resolveFooterHeight;
+    const height = props.height !== "auto" ? `${contentHeight}px` : false;
+    const maxHeight = height ? resolveMaxHeight - resolveHeadHeight - resolveFooterHeight : false;
     const minHeight = resolveMinHeight - resolveHeadHeight - resolveFooterHeight;
-    const height = props.height !== "auto" ? `${contentHeight}px` : "auto";
-    return {
+    Object.assign(contentStyle, {
       display: "block",
       "max-height": `${maxHeight}px`,
       "min-height": `${minHeight}px`,
       height
-    };
-  });
+    });
+  };
   onMounted(() => {
     resetTableHeight(root == null ? void 0 : root.value);
   });
@@ -14359,9 +14359,27 @@ const useClass = (props, root, reactiveProp) => {
     if (rootEl) {
       const { height } = rootEl.parentElement.getBoundingClientRect();
       autoHeight.value = height;
+      resolveContentStyle();
+    }
+  };
+  const updateBorderClass = (root2) => {
+    if (root2) {
+      const tableBody = root2.querySelector(".bk-table-body table");
+      hasScrollY.value = tableBody.offsetHeight > root2.offsetHeight;
     }
   };
-  return { tableClass, headClass, contentClass, footerClass, wrapperStyle, contentStyle, headStyle, resetTableHeight };
+  return {
+    tableClass,
+    headClass,
+    contentClass,
+    footerClass,
+    wrapperStyle,
+    contentStyle,
+    headStyle,
+    resetTableHeight,
+    updateBorderClass,
+    hasFooter
+  };
 };
 var Component$8 = defineComponent({
   name: "Table",
@@ -14387,6 +14405,9 @@ var Component$8 = defineComponent({
     const reactiveProp = reactive({
       scrollTranslateY: 0,
       scrollTranslateX: 0,
+      pos: {
+        bottom: 1
+      },
       activeColumns,
       setting: {
         size: null,
@@ -14407,15 +14428,20 @@ var Component$8 = defineComponent({
       wrapperStyle,
       contentStyle,
       headStyle,
-      resetTableHeight
+      updateBorderClass,
+      hasFooter
     } = useClass(props, root, reactiveProp);
     const {
       renderFixedColumns,
       fixedWrapperClass
     } = useFixedColumn(props, colgroups);
     const tableRender = new TableRender(props, ctx, reactiveProp, colgroups);
-    watchEffect(() => {
+    watch(() => [props.data], () => {
       watchEffectFn(columnFilterFn, columnSortFn);
+      nextTick(() => updateBorderClass(root.value));
+    }, {
+      immediate: true,
+      deep: true
     });
     tableRender.on(EVENTS$1.ON_SORT_BY_CLICK, (args) => {
       const {
@@ -14441,15 +14467,16 @@ var Component$8 = defineComponent({
       const pagination2 = args[1];
       const {
         translateX,
-        translateY
+        translateY,
+        pos = {}
       } = pagination2;
       reactiveProp.scrollTranslateY = translateY;
       reactiveProp.scrollTranslateX = translateX;
+      reactiveProp.pos = pos;
     };
     onMounted(() => {
       observerIns = observerResize(root.value, () => {
         resolveColumnWidth(root.value, colgroups, 20);
-        resetTableHeight(root.value);
       }, 60, true);
       observerIns.start();
     });
@@ -14474,7 +14501,7 @@ var Component$8 = defineComponent({
         "ref": refVirtualRender,
         "lineHeight": tableRender.getRowHeight,
         "class": contentClass,
-        "style": contentStyle.value,
+        "style": contentStyle,
         "list": pageData,
         "onContentScroll": handleScrollChanged,
         "throttleDelay": 0,
@@ -14491,7 +14518,7 @@ var Component$8 = defineComponent({
       }, null)]),
       createVNode("div", {
         "class": footerClass.value
-      }, [props.pagination && props.data.length && tableRender.renderTableFooter(localPagination.value)])
+      }, [hasFooter.value && tableRender.renderTableFooter(localPagination.value)])
     ]);
   }
 });