yanzhen-design-vue/es/components/vxe-table/src/hooks/use-vxe-table-observer.mjs

import { ref, computed, unref, nextTick, onUnmounted } from "vue";
import { unrefElement, useResizeObserver, useMutationObserver } from "@vueuse/core";
import { debounce, isFunction, isArray, isPlainObject } from "lodash-es";
import { isEmptyValue } from "@yanzhen-libs/utils";
import { createResizeObserver } from "@yanzhen-libs/utils-vue";
import { unrefTbodyElement, isTableRow, unrefTbodyRowRecord, isTableCol, unrefTbodyColRecord } from "../utils/index.mjs";
function useVxeTableObserver(tableRef, options) {
  var _a;
  const resize = createResizeObserver();
  const tableScrollDataRef = ref();
  const tableWrapper = ref(getElementContentRect());
  const wrapperRef = computed(() => unref(tableWrapper));
  const tableWrapperRef = computed(() => {
    return unrefTbodyElement(unrefElement(tableRef));
  });
  const tableResize = useResizeObserver(tableRef, debounce(onTableResizeObserver, 300));
  function onTableResizeObserver(entries, observer2) {
    try {
      tableWrapper.value = getElementContentRect(entries[0].target);
    } catch (e) {
      console.error(e, "onTableResizeObserver");
    }
    const onTableResizeObserver2 = options == null ? void 0 : options.onTableResizeObserver;
    if (isFunction(onTableResizeObserver2)) {
      nextTick(() => {
        onTableResizeObserver2(unref(wrapperRef));
      }).catch((e) => {
        console.error(e, "onTableResizeObserver");
      });
    }
  }
  const NodeWeakMap = /* @__PURE__ */ new WeakMap();
  const mutation = useMutationObserver(tableWrapperRef, onMutationObserver, {
    childList: true,
    attributes: true
    // subtree: true,
  });
  function onMutationObserver(mutations, observer2) {
    console.log(mutations, "mutation:mutations");
    if (isArray(mutations)) {
      for (const mutation2 of mutations) {
        const { addedNodes, removedNodes } = mutation2;
        if (addedNodes.length > 0) {
          for (const el of addedNodes) {
            if (isTableRow(el)) {
              resize.add(el, onTrResizeObserver);
            }
          }
        }
        if (removedNodes.length > 0) {
          for (const el of removedNodes) {
            resize.delete(el);
            NodeWeakMap.delete(el);
          }
        }
      }
    }
  }
  function onResizeBodyRowRecord(entries, callback) {
    const target = entries[0].target;
    if (!isTableRow(target)) return null;
    const record = unrefTbodyRowRecord(target, tableRef);
    isFunction(callback) && callback(record);
    return record;
  }
  function onResizeBodyColRecord(entries, callback) {
    var _a2;
    const rowEl = entries[0].target;
    const colEls = (_a2 = rowEl == null ? void 0 : rowEl.getElementsByTagName) == null ? void 0 : _a2.call(rowEl, "td");
    const rowRecord = unrefTbodyRowRecord(rowEl, tableRef);
    if (!colEls) return null;
    const records = [];
    for (const columnTarget of colEls) {
      if (isTableCol(columnTarget)) {
        const colRecord = unrefTbodyColRecord(columnTarget, tableRef);
        const record = {
          ...rowRecord,
          ...colRecord
        };
        isFunction(callback) && callback(record);
        records.push(record);
      }
    }
    return records;
  }
  async function onTrResizeObserver(entries) {
    await nextTick();
    const events = {
      onResizeBodyRowRecord,
      onResizeBodyColRecord
    };
    const onTrResizeObserver2 = options == null ? void 0 : options.onTrResizeObserver;
    if (isFunction(onTrResizeObserver2)) {
      try {
        onTrResizeObserver2(entries);
      } catch (e) {
        console.error(e, "onTrResizeObserver");
      }
    }
    for (const [name, onCallback] of Object.entries(events)) {
      const callback = options == null ? void 0 : options[name];
      if (isFunction(callback)) {
        try {
          onCallback(entries, callback);
        } catch (e) {
          console.error(e, `onTrResizeObserver:${name}`);
        }
      }
    }
  }
  function getElementContentRect(target) {
    function getContent() {
      var _a2, _b, _c, _d;
      const { params: scrollParams, ...scroll } = getScrollContent();
      const el = unrefElement(tableRef);
      if (!target) target = el;
      const parent = (_a2 = unref(el)) == null ? void 0 : _a2.parentElement;
      const tbody = unrefTbodyElement(el);
      const contentRect = ((_b = target == null ? void 0 : target.getBoundingClientRect) == null ? void 0 : _b.call(target)) ?? null;
      const parentRect = ((_c = parent == null ? void 0 : parent.getBoundingClientRect) == null ? void 0 : _c.call(parent)) ?? null;
      const tbodyRect = ((_d = tbody == null ? void 0 : tbody.getBoundingClientRect) == null ? void 0 : _d.call(tbody)) ?? null;
      return {
        ...scroll,
        scrollWidth: (tbodyRect == null ? void 0 : tbodyRect.width) ?? (scroll == null ? void 0 : scroll.scrollWidth) ?? 0,
        scrollHeight: (tbodyRect == null ? void 0 : tbodyRect.height) ?? (scroll == null ? void 0 : scroll.scrollHeight) ?? 0,
        bodyWidth: (contentRect == null ? void 0 : contentRect.width) ?? (scroll == null ? void 0 : scroll.bodyWidth) ?? 0,
        bodyHeight: (contentRect == null ? void 0 : contentRect.height) ?? (scroll == null ? void 0 : scroll.bodyHeight) ?? 0,
        parentHeight: (parentRect == null ? void 0 : parentRect.height) ?? 0,
        parentWidth: (parentRect == null ? void 0 : parentRect.width) ?? 0,
        parentRect,
        contentRect,
        tbodyRect,
        parent,
        target,
        tbody,
        scrollParams
      };
    }
    const contentTarget = getContent();
    return new Proxy(contentTarget, {
      get(_target, p, receiver) {
        const content = getContent();
        const value = Reflect.get(content, p, receiver);
        const oldValue = Reflect.get(contentTarget, p, receiver);
        if (value !== oldValue) {
          contentTarget[p] = value;
        }
        return value;
      }
    });
  }
  function getScrollContent() {
    function getContent() {
      var _a2, _b;
      const scroll1 = (_b = (_a2 = unref(tableRef)) == null ? void 0 : _a2.getScroll) == null ? void 0 : _b.call(_a2);
      const scroll2 = unref(tableScrollDataRef);
      const scroll = {
        type: "body",
        scrollTop: 0,
        scrollLeft: 0,
        scrollHeight: 0,
        scrollWidth: 0,
        bodyWidth: 0,
        bodyHeight: 0,
        isX: false,
        isY: false,
        params: [scroll2, scroll1]
      };
      const keys = Object.keys(scroll);
      for (const data of [scroll1, scroll2]) {
        if (data && isPlainObject(data)) {
          for (const [key, value] of Object.entries(data)) {
            if (keys.includes(key)) {
              if (!isEmptyValue(value)) {
                scroll[key] = value;
              }
            }
          }
        }
      }
      return scroll;
    }
    const content = getContent();
    return new Proxy(content, {
      get(_target, p, receiver) {
        const content2 = getContent();
        const value = Reflect.get(content2, p, receiver);
        const oldValue = Reflect.get(content2, p, receiver);
        if (value !== oldValue) {
          content2[p] = value;
        }
        return value;
      }
    });
  }
  function onTableScroll(data) {
    if (!data) return;
    tableScrollDataRef.value = data;
    nextTick(() => {
      if (isFunction(options == null ? void 0 : options.onScroll)) {
        try {
          options == null ? void 0 : options.onScroll(unref(wrapperRef), data);
        } catch (e) {
          console.error(e, "onTableScroll");
        }
      }
    }).catch((r) => r);
  }
  function handleUnmounted() {
    resize.stop();
    mutation.stop();
    tableResize.stop();
  }
  onUnmounted(() => {
    handleUnmounted();
  });
  const observer = {
    mutation,
    resize,
    tableResize
  };
  const sdebounce = (_a = options == null ? void 0 : options.scroll) == null ? void 0 : _a.debounce;
  const _onTableScroll = sdebounce && sdebounce > 0 ? debounce(onTableScroll, sdebounce) : onTableScroll;
  return {
    observer,
    tableWrapperRef,
    tableWrapper: wrapperRef,
    stop: handleUnmounted,
    onTableScroll: _onTableScroll
  };
}
export {
  useVxeTableObserver
};