datav-vue3/es/hooks/useResize.mjs

Vue3 large screen data display component library

import { debounce as a, once as m, isElement as c } from "lodash-es";
import { ref as l, reactive as f, onMounted as h, onUnmounted as b } from "vue";
import { withPrefix as v } from "../utils/logger.mjs";
const s = v("useResize");
function g(e, n) {
  const t = new MutationObserver(n);
  return t.observe(e, {
    attributes: !0,
    attributeFilter: ["class", "style"],
    attributeOldValue: !0
  }), t;
}
function p(e, n) {
  const { clientWidth: t = 0, clientHeight: o = 0 } = e || {};
  e ? (!t || !o) && s.warn("Component width or height is 0px, rendering abnormality may occur!") : s.warn("Failed to get dom node, component rendering may be abnormal!"), n.width = t, n.height = o;
}
function w(e) {
  return c(e) ? e : c(e.$el) ? e.$el : null;
}
function S() {
  const e = l(), n = [], t = f({
    width: 0,
    height: 0
  }), o = () => {
    p(e.value, t);
  }, i = a(o, 100), d = m((r) => {
    const u = w(r);
    if (!u) {
      s.error("Bind Component Dom Ref Failed!");
      return;
    }
    e.value = u;
  });
  return h(() => {
    o();
    const r = g(e.value, i);
    window.addEventListener("resize", i), n.push(
      () => {
        r.disconnect();
      },
      () => {
        window.removeEventListener("resize", i);
      }
    );
  }), b(() => {
    n.forEach((r) => r());
  }), {
    domSize: t,
    autoBindRef: d,
    refreshLayoutSize: o
  };
}
export {
  S as useResize
};