qidian-vue-ui 1.4.0 → 1.4.1

package/dist/components/service/table/index.css

@@ -1,25 +1,25 @@
-.qd-service-table[data-v-5806889d] {
+.qd-service-table[data-v-c2177f89] {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
-.qd-service-table[data-v-5806889d] >  .t-table__content {
+.qd-service-table[data-v-c2177f89] >  .t-table__content {
   flex: 1;
 }
-.qd-service-table[data-v-5806889d] .t-table__tree-col:not(:has(.t-table__tree-op-icon)) {
+.qd-service-table[data-v-c2177f89] .t-table__tree-col:not(:has(.t-table__tree-op-icon)) {
   margin-left: calc(var(--td-font-size-body-large) + var(--td-comp-margin-s));
 }
-.qd-service-table[data-v-5806889d] .t-table__tree-leaf-node .t-table__tree-op-icon:empty {
+.qd-service-table[data-v-c2177f89] .t-table__tree-leaf-node .t-table__tree-op-icon:empty {
   width: calc(var(--td-font-size-body-large) + var(--td-comp-margin-s));
 }
-.qd-service-table[data-v-5806889d] .t-affix {
-  transform: var(--v5ea6151a);
+.qd-service-table[data-v-c2177f89] .t-affix {
+  transform: var(--v072441ea);
 }
-.qd-service-table--ps-x-fixed[data-v-5806889d] .ps__rail-x {
+.qd-service-table--ps-x-fixed[data-v-c2177f89] .ps__rail-x {
   position: fixed;
-  left: var(--v60ce71c8) !important;
-  bottom: var(--v6db618c6) !important;
+  left: var(--ac91cc66) !important;
+  bottom: var(--v79d9a896) !important;
 }
-.qd-service-table--disable-horizontal-scroll[data-v-5806889d] colgroup > col {
+.qd-service-table--disable-horizontal-scroll[data-v-c2177f89] colgroup > col {
   width: auto !important;
 }

package/dist/components/service/table/index.vue.mjs

@@ -2,7 +2,7 @@ import './index.css'
 import _sfc_main from "./index.vue2.mjs";
 /* empty css            */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const QdServiceTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5806889d"]]);
+const QdServiceTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c2177f89"]]);
 export {
   QdServiceTable as default
 };

package/dist/components/service/table/index.vue2.mjs

@@ -307,9 +307,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     emit: __emit
   }) {
     useCssVars((_ctx) => ({
-      "v5ea6151a": affixedHeaderTransform.value,
-      "v60ce71c8": tableContentLeft.value,
-      "v6db618c6": outsideBottom.value
+      "v072441ea": affixedHeaderTransform.value,
+      "ac91cc66": tableContentLeft.value,
+      "v79d9a896": outsideBottom.value
     }));
     const props = __props;
     const emit = __emit;
@@ -357,17 +357,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const tableContentRect = reactive(useElementBounding(tableContentEl));
     const tableContentLeft = computed(() => `${tableContentRect.left - affixedRailOffsetX.value}px`);
     const outsideScrollRect = reactive(useElementBounding(outsideScrollEl));
-    const outsideBottom = computed(() => outsideScrollEl.value ? `${window.innerHeight - outsideScrollRect.bottom}px` : "0");
+    const affixBottomOffset = ref(0);
+    let probeRafId = 0;
+    let animatingAncestorCleanup = null;
+    const outsideBottom = computed(() => {
+      if (!outsideScrollEl.value) return "0";
+      return `${Math.max(0, window.innerHeight - outsideScrollRect.bottom + affixBottomOffset.value)}px`;
+    });
     const tableHeaderHalfVisible = computed(() => {
       if (!tableContentVisible.value) return false;
       return tableContentRect.top + tableHeaderH.value * 0.5 <= outsideScrollRect.bottom;
     });
     const tableContentFullVisible = computed(() => {
       if (!tableContentVisible.value) return false;
-      const contentBottom = tableContentRect.bottom;
-      const containerBottom = outsideScrollRect.bottom;
-      return contentBottom <= containerBottom;
+      return tableContentRect.bottom <= outsideScrollRect.bottom - affixBottomOffset.value;
     });
+    const isPsXFixed = computed(() => tableContentVisible.value && tableHeaderHalfVisible.value && !tableContentFullVisible.value);
     const {
       ps: tablePs
     } = usePerfectScrollbar(tableContentEl, {
@@ -827,11 +832,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return keys;
       }, []);
     }
+    function refreshAffixedMetrics() {
+      tableContentRect.update();
+      outsideScrollRect.update();
+      affixedRailOffsetX.value = getTransformOffset(affixBaseEl.value).x;
+    }
     function onResize(entries) {
       const el = entries[0].target;
       outsideScrollEl.value = getScrollEl(el);
-      outsideScrollRect.update();
-      affixedRailOffsetX.value = getTransformOffset(affixBaseEl.value).x;
+      refreshAffixedMetrics();
       const headerEl = el.querySelector(".t-table__header");
       tableHeaderEl.value = headerEl;
       let headerH = 0;
@@ -839,6 +848,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       tableHeaderH.value = headerH;
       const contentEl = el.querySelector(".t-table__content");
       tableContentEl.value = contentEl;
+      probeBottomBlockHeight();
     }
     function isTransformAnimating(node) {
       return node.getAnimations().length > 0;
@@ -853,6 +863,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return null;
     }
+    function watchAnimatingTransformAncestor() {
+      animatingAncestorCleanup?.();
+      const animatingNode = findAnimatingTransformAncestor(affixBaseEl.value);
+      if (!animatingNode) return;
+      const cleanup = () => {
+        animatingNode.removeEventListener("transitionend", onEnd);
+        animatingNode.removeEventListener("animationend", onEnd);
+        animatingAncestorCleanup = null;
+      };
+      const onEnd = () => {
+        cleanup();
+        refreshAffixedMetrics();
+      };
+      animatingNode.addEventListener("transitionend", onEnd);
+      animatingNode.addEventListener("animationend", onEnd);
+      animatingAncestorCleanup = cleanup;
+    }
     async function applyAffixedTransform() {
       const el = affixBaseEl.value;
       if (!el) return;
@@ -863,6 +890,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
       affixedHeaderTransform.value = `translateY(-${y}px)`;
     }
+    function scheduleProbeBottomBlock() {
+      if (probeRafId) return;
+      probeRafId = requestAnimationFrame(() => {
+        probeRafId = 0;
+        probeBottomBlockHeight();
+      });
+    }
+    function probeBottomBlockHeight() {
+      const scrollEl = outsideScrollEl.value;
+      const tableEl = tableRef.value?.$el;
+      if (!scrollEl || !tableEl) return;
+      const sRect = scrollEl.getBoundingClientRect();
+      const stack = document.elementsFromPoint(sRect.left + sRect.width / 2, sRect.bottom - 1);
+      let blockHeight = 0;
+      for (const el of stack) {
+        if (tableEl.contains(el)) continue;
+        if (el === scrollEl || el.contains(scrollEl)) continue;
+        const {
+          position
+        } = getComputedStyle(el);
+        if (position !== "fixed" && position !== "sticky") continue;
+        const rect = el.getBoundingClientRect();
+        if (rect.top < sRect.top) continue;
+        blockHeight = Math.max(blockHeight, sRect.bottom - rect.top);
+      }
+      affixBottomOffset.value = blockHeight;
+    }
     watch(columnControllerVisible, (visible) => {
       const {
         columns
@@ -881,6 +935,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       requestAnimationFrame(() => {
         tablePs.value?.update();
       });
+      watchAnimatingTransformAncestor();
+      nextTick(() => {
+        setTimeout(refreshAffixedMetrics, 320);
+      });
+    });
+    watch(isOutsideTableContent, (outside) => {
+      if (outside) return;
+      refreshAffixedMetrics();
+    });
+    watch(outsideScrollEl, (el, _old, onCleanup) => {
+      if (!el) return;
+      probeBottomBlockHeight();
+      const onScroll = () => scheduleProbeBottomBlock();
+      el.addEventListener("scroll", onScroll, {
+        passive: true
+      });
+      onCleanup(() => {
+        el.removeEventListener("scroll", onScroll);
+        if (probeRafId) {
+          cancelAnimationFrame(probeRafId);
+          probeRafId = 0;
+        }
+      });
+    }, {
+      immediate: true
     });
     onActivated(() => {
       setScrollElTo();
@@ -892,6 +971,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onBeforeUnmount(() => {
       tableContentStop();
       outsideTableContentStop();
+      if (probeRafId) cancelAnimationFrame(probeRafId);
+      animatingAncestorCleanup?.();
     });
     __expose(createExposeProxy({
       data,
@@ -919,7 +1000,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createBlock(resolveDynamicComponent(reProps.value.tableOptions.tree ? unref(EnhancedTable) : unref(Table)), mergeProps({
         ref: "table",
-        class: ["qd-service-table", __props.headerBg ? "" : "t-table--header-bg-inherit", unref(isOutsideTableContent) ? "" : "qd-service-table--inside-table-content", tableContentVisible.value && tableHeaderHalfVisible.value && !tableContentFullVisible.value ? "qd-service-table--ps-x-fixed" : "", __props.disableHorizontalScroll ? "qd-service-table--disable-horizontal-scroll" : ""],
+        class: ["qd-service-table", __props.headerBg ? "" : "t-table--header-bg-inherit", unref(isOutsideTableContent) ? "" : "qd-service-table--inside-table-content", isPsXFixed.value ? "qd-service-table--ps-x-fixed" : "", __props.disableHorizontalScroll ? "qd-service-table--disable-horizontal-scroll" : ""],
         "selected-row-keys": unref(selectedRowKeys),
         "onUpdate:selectedRowKeys": _cache[0] || (_cache[0] = ($event) => isRef(selectedRowKeys) ? selectedRowKeys.value = $event : null),
         "active-row-keys": unref(activeRowKeys),

package/dist/utils/tools.d.ts

@@ -33,6 +33,11 @@ export declare function getTransformOffset(el?: HTMLElement | null, options?: {
 }): {
     x: number;
     y: number;
+    node: HTMLElement;
+} | {
+    x: number;
+    y: number;
+    node: null | undefined;
 };
 export declare const IMAGE_REGEXP: RegExp;
 export declare function isImage(value: string): boolean;

package/dist/utils/tools.mjs

@@ -13,11 +13,11 @@ function getTransformOffset(el, options) {
   while (node) {
     if (getComputedStyle(node).transform !== "none" && !skip?.(node)) {
       const { x, y } = node.getBoundingClientRect();
-      return { x, y };
+      return { x, y, node };
     }
     node = node.parentElement;
   }
-  return { x: 0, y: 0 };
+  return { x: 0, y: 0, node };
 }
 const IMAGE_REGEXP = /(.png|.jpg|.jpeg|.jpe|.webp|.avif|.heic|.heif|.svg|.gif|.bmp)/i;
 function isImage(value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qidian-vue-ui",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "基于 TDesign 的 QiDian Vue UI 组件库",
   "author": "qidian",
   "license": "MIT",