comic-plus/es/hooks/resize.mjs

<p align="center"> <img width="200px" src="./logo.png"/> </p>

import "../utils/config.mjs";
import { debounce } from "../utils/tools.mjs";
import { ref, watch, onMounted, onUnmounted } from "vue";
import "@vueuse/core";
const useResize = (target, callback, options) => {
  const ob = ref(null);
  const cFn = (options == null ? void 0 : options.debounce) ? debounce(callback, options == null ? void 0 : options.debounce) : callback;
  function createObserver() {
    disconnect();
    const isSupported = typeof ResizeObserver !== "undefined";
    if (!isSupported) return false;
    ob.value = new ResizeObserver((entries) => {
      cFn(entries[0].contentRect);
    });
    ob.value.observe(target.value);
  }
  function disconnect() {
    if (ob.value) {
      ob.value.disconnect();
      ob.value = null;
    }
  }
  watch(target, (val) => {
    if (val) {
      createObserver();
    }
    if (!val) {
      disconnect();
    }
  });
  onMounted(() => {
    createObserver();
    if (options == null ? void 0 : options.immediate) {
      callback(target.value.getBoundingClientRect());
    }
  });
  onUnmounted(() => {
    disconnect();
  });
  return disconnect;
};
export {
  useResize
};