import { watch } from 'vue';
import { tryOnScopeDispose } from '../try-on-scope-dispose/index.mjs';
import { unrefElement } from '../unref-element/index.mjs';
import { useSupported } from '../use-supported/index.mjs';
import { defaultWindow } from '../_configurable.mjs';

function useResizeObserver(target, callback, options = {}) {
  const { window = defaultWindow, ...observerOptions } = options;
  let observer;
  const isSupported = useSupported(() => window && "ResizeObserver" in window);
  const cleanup = () => {
    if (observer) {
      observer.disconnect();
      observer = void 0;
    }
  };
  const stopWatch = watch(
    () => unrefElement(target),
    (el) => {
      cleanup();
      if (isSupported.value && window && el) {
        observer = new ResizeObserver(callback);
        observer.observe(el, observerOptions);
      }
    },
    { immediate: true, flush: "post" }
  );
  const stop = () => {
    cleanup();
    stopWatch();
  };
  tryOnScopeDispose(stop);
  return {
    isSupported,
    stop
  };
}

export { useResizeObserver };
//# sourceMappingURL=index.mjs.map
