bl-common-vue3 3.8.116 → 3.8.117

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bl-common-vue3",
-  "version": "3.8.116",
+  "version": "3.8.117",
   "main": "index.js",
   "module": "index.js",
   "description": "bailing vue3 common components lib",

package/src/components/CustomTable/index.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="table-warp">
+  <div ref="tableWarpRef" class="table-warp">
     <div
+      ref="titleHeaderRef"
       class="visitoeTitleHeader"
       v-if="displayTitleCollapsed && filterList?.length"
       :style="{ marginBottom: isTitleCollapsed ? '10px' : '0' }">
@@ -1592,6 +1593,10 @@ export default defineComponent({
       type: Number,
       default: 0,
     },
+    autoTableHeight: {
+      type: Boolean,
+      default: false,
+    },
     titleRowAlign: {
       type: String,
       default: "middle",
@@ -1875,12 +1880,165 @@ export default defineComponent({
     const columnSlots = ref([]);
     const buttonIconSlots = ref([]);
     const isInDrawer = ref(false);
+    const tableWarpRef = ref(null);
+    const titleHeaderRef = ref(null);
     const tableRef = ref(null);
     const filterRef = ref(null);
     const isTitleCollapsed = ref(props.displayTitleCollapsed);
+    const autoTableHeightRaf = ref(0);
+    const tableHeightTimer = ref(0);
+    const autoTableHeightObserver = ref(null);
+    const autoTableHeightBottomOffset = 11;
+    const autoTableHeightMinBody = 80;
     const toggleTitle = () => {
       isTitleCollapsed.value = !isTitleCollapsed.value;
+      scheduleTableHeightRecalc();
+    };
+
+    const isVisibleFlowElement = (el) => {
+      if (!el || el.nodeType !== 1) {
+        return false;
+      }
+      const style = window.getComputedStyle(el);
+      if (style.display === "none" || style.visibility === "hidden") {
+        return false;
+      }
+      if (style.position === "absolute" || style.position === "fixed") {
+        return false;
+      }
+      const rect = el.getBoundingClientRect();
+      return rect.width > 0 && rect.height > 0;
+    };
+
+    const hasVisibleNextFlowSibling = (el) => {
+      let nextSibling = el?.nextElementSibling;
+      while (nextSibling) {
+        if (isVisibleFlowElement(nextSibling)) {
+          return true;
+        }
+        nextSibling = nextSibling.nextElementSibling;
+      }
+      return false;
+    };
+
+    const hasUnsafeAutoTableHeightContainer = (el) => {
+      return ["ant-drawer", "ant-modal", "ant-tabs-tabpane"].some((className) =>
+        utils.hasParentWithClass(el, className)
+      );
+    };
+
+    const getAutoTableHeightBoundaryBottom = (el) => {
+      const viewportHeight =
+        window.innerHeight || document.documentElement?.clientHeight || 0;
+      let parent = el?.parentElement;
+      while (parent && parent !== document.body) {
+        const style = window.getComputedStyle(parent);
+        if (["auto", "scroll", "overlay"].includes(style.overflowY)) {
+          const rect = parent.getBoundingClientRect();
+          return Math.min(rect.bottom, viewportHeight);
+        }
+        parent = parent.parentElement;
+      }
+      return viewportHeight;
+    };
+
+    const clearAutoTableHeightObserver = () => {
+      if (autoTableHeightObserver.value) {
+        autoTableHeightObserver.value.disconnect();
+        autoTableHeightObserver.value = null;
+      }
+    };
+
+    const isAutoTableHeightSafe = () => {
+      if (!props.autoTableHeight || props.tableHeight) {
+        return false;
+      }
+      const rootEl = tableWarpRef.value;
+      if (!rootEl || !rootEl.parentElement) {
+        return false;
+      }
+      if (hasUnsafeAutoTableHeightContainer(rootEl)) {
+        return false;
+      }
+      let currentEl = rootEl;
+      while (currentEl && currentEl !== document.body) {
+        if (hasVisibleNextFlowSibling(currentEl)) {
+          return false;
+        }
+        currentEl = currentEl.parentElement;
+      }
+      return true;
+    };
+
+    const scheduleTableHeightRecalc = () => {
+      if (autoTableHeightRaf.value) {
+        cancelAnimationFrame(autoTableHeightRaf.value);
+      }
+      autoTableHeightRaf.value = requestAnimationFrame(() => {
+        autoTableHeightRaf.value = 0;
+        getTableHeight();
+      });
+    };
+
+    const setupAutoTableHeightObserver = () => {
+      clearAutoTableHeightObserver();
+      if (!isAutoTableHeightSafe()) {
+        return;
+      }
+      const rootEl = tableWarpRef.value;
+      const parentEl = rootEl?.parentElement;
+      if (!rootEl || !parentEl || typeof ResizeObserver === "undefined") {
+        return;
+      }
+      autoTableHeightObserver.value = new ResizeObserver(() => {
+        scheduleTableHeightRecalc();
+      });
+      autoTableHeightObserver.value.observe(rootEl);
+      autoTableHeightObserver.value.observe(parentEl);
+      autoTableHeightObserver.value.observe(document.body);
+      if (titleHeaderRef.value) {
+        autoTableHeightObserver.value.observe(titleHeaderRef.value);
+      }
+      if (filterRef.value) {
+        autoTableHeightObserver.value.observe(filterRef.value);
+      }
+      let prevSibling = rootEl.previousElementSibling;
+      while (prevSibling) {
+        if (isVisibleFlowElement(prevSibling)) {
+          autoTableHeightObserver.value.observe(prevSibling);
+        }
+        prevSibling = prevSibling.previousElementSibling;
+      }
+    };
+
+    const getTableTitleHeight = () => {
+      return (
+        tableRef.value?.$el.getElementsByClassName("ant-table-title")[0]
+          ?.offsetHeight || 0
+      );
+    };
+
+    const getTableHeaderHeight = () => {
+      return (
+        tableRef.value?.$el.getElementsByClassName("ant-table-thead")[0]
+          ?.offsetHeight || 0
+      );
     };
+
+    const getTablePaginationHeight = () => {
+      let pagHeight =
+        tableRef.value?.$el.getElementsByClassName("ant-pagination")[0]
+          ?.offsetHeight || 0;
+      if (pagHeight) {
+        pagHeight += 32;
+      }
+      return pagHeight;
+    };
+
+    const getFilterHeight = () => {
+      return filterRef.value?.offsetHeight || 0;
+    };
+
     const closeTages = (key) => {
       for (let i = 0; i < state.filterList?.length; i++) {
         if (state.filterList[i].field === key) {
@@ -2814,29 +2972,28 @@ export default defineComponent({
     };
 
     const getTableHeight = () => {
-      setTimeout(() => {
+      if (tableHeightTimer.value) {
+        clearTimeout(tableHeightTimer.value);
+      }
+      tableHeightTimer.value = setTimeout(() => {
+        tableHeightTimer.value = 0;
         nextTick(() => {
+          const tableEl = tableRef.value?.$el;
+          if (!tableEl) {
+            return;
+          }
           if (props.tableHeight) {
-            let tTitleHeight =
-              tableRef.value.$el.getElementsByClassName("ant-table-title")[0]
-                ?.offsetHeight || 0;
-            let tHeaderHeight =
-              tableRef.value.$el.getElementsByClassName("ant-table-thead")[0]
-                ?.offsetHeight || 0;
-            let tPagHeight =
-              tableRef.value.$el.getElementsByClassName("ant-pagination")[0]
-                ?.offsetHeight || 0;
-            let filterHeight = filterRef.value?.offsetHeight || 0;
-            if (tPagHeight) {
-              tPagHeight = tPagHeight + 32; // 分页的margin距离
-            }
+            let tTitleHeight = getTableTitleHeight();
+            let tHeaderHeight = getTableHeaderHeight();
+            let tPagHeight = getTablePaginationHeight();
+            let filterHeight = getFilterHeight();
             if (utils.isEnv()) {
               console.log(
                 props.tableHeight,
                 tTitleHeight,
                 tHeaderHeight,
                 tPagHeight,
-                tableRef.value.$el.getElementsByClassName("ant-table-thead")[0],
+                tableEl.getElementsByClassName("ant-table-thead")[0],
                 "0000000000000000000"
               );
             }
@@ -2846,9 +3003,33 @@ export default defineComponent({
               tHeaderHeight -
               tPagHeight -
               filterHeight;
+            tableScrollHeight = Math.max(0, Math.floor(tableScrollHeight));
             if (state.tableScrollHeight !== tableScrollHeight) {
               state.tableScrollHeight = tableScrollHeight;
             }
+            return;
+          }
+          if (props.autoTableHeight && isAutoTableHeightSafe()) {
+            const tableTop = tableEl.getBoundingClientRect()?.top || 0;
+            const boundaryBottom = getAutoTableHeightBoundaryBottom(tableEl);
+            let tableScrollHeight =
+              boundaryBottom -
+              tableTop -
+              getTableTitleHeight() -
+              getTableHeaderHeight() -
+              getTablePaginationHeight() -
+              autoTableHeightBottomOffset;
+            tableScrollHeight = Math.max(
+              autoTableHeightMinBody,
+              Math.ceil(tableScrollHeight)
+            );
+            if (state.tableScrollHeight !== tableScrollHeight) {
+              state.tableScrollHeight = tableScrollHeight;
+            }
+            return;
+          }
+          if (state.tableScrollHeight !== 0) {
+            state.tableScrollHeight = 0;
           }
         });
       }, 0);
@@ -3580,6 +3761,7 @@ export default defineComponent({
 
     const handleResize = () => {
       state.isMobile = window.innerWidth < 768;
+      scheduleTableHeightRecalc();
     };
 
     let num = 1;
@@ -3811,20 +3993,50 @@ export default defineComponent({
     watch(
       () => props.tableHeight,
       () => {
+        setupAutoTableHeightObserver();
         getTableHeight();
       }
     );
 
+    watch(
+      () => props.autoTableHeight,
+      () => {
+        setupAutoTableHeightObserver();
+        scheduleTableHeightRecalc();
+      }
+    );
+
+    watch(
+      () => [state.filterList.length, isTitleCollapsed.value],
+      () => {
+        nextTick(() => {
+          setupAutoTableHeightObserver();
+          scheduleTableHeightRecalc();
+        });
+      }
+    );
+
     onMounted(() => {
       createColumnSlots();
       createButtonIconSlots();
       window.addEventListener("resize", handleResize);
       handleResize();
+      setupAutoTableHeightObserver();
+      scheduleTableHeightRecalc();
       init();
     });
 
     onBeforeUnmount(() => {
       window.removeEventListener("resize", handleResize);
+      clearAutoTableHeightObserver();
+      if (autoTableHeightRaf.value) {
+        cancelAnimationFrame(autoTableHeightRaf.value);
+        autoTableHeightRaf.value = 0;
+      }
+      if (tableHeightTimer.value) {
+        clearTimeout(tableHeightTimer.value);
+        tableHeightTimer.value = 0;
+      }
     });
 
     const initColumns = () => {
@@ -4084,6 +4296,8 @@ export default defineComponent({
       columnSlots,
       actionBtnShow,
       actionBtnDisabled,
+      tableWarpRef,
+      titleHeaderRef,
       tableRef,
       isInDrawer,
       realColumns,