maz-ui/dist/composables/useMutationObserver.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { e } from "../chunks/isClient.8V3qjGdO.js";
import { r } from "../chunks/truthyFilter.DZvXmxeK.js";
import { ref, onMounted, computed, toValue, watch } from "vue";
function useMutationObserver(target, callback, options = {}) {
  const {
    internalWindow = e() ? globalThis : void 0,
    ...mutationOptions
  } = options;
  let observer;
  const isSupported = ref(!1);
  onMounted(() => {
    isSupported.value = (internalWindow && "MutationObserver" in internalWindow) ?? !1;
  });
  const cleanup = () => {
    observer && (observer.disconnect(), observer = void 0);
  }, targets = computed(() => {
    const value = toValue(target);
    let element;
    return value && "$el" in value ? element = value.$el : value && (element = value), new Set([element].filter(r));
  }), stopWatch = watch(
    targets,
    (newTargets) => {
      cleanup(), isSupported.value && newTargets.size && (observer = new MutationObserver(callback), newTargets.forEach((el) => observer.observe(el, mutationOptions)));
    },
    { immediate: !0, flush: "post" }
  );
  return {
    isSupported,
    stop: () => {
      stopWatch(), cleanup();
    },
    takeRecords: () => observer?.takeRecords()
  };
}
export {
  useMutationObserver
};