{"version":3,"file":"index.mjs","sources":["../../../../../../packages/hooks/use-visibility-change/index.ts"],"sourcesContent":["import { onBeforeUnmount, onDeactivated } from 'vue'\nimport { inBrowser } from '@xzx-design/utils'\nimport { onMountedOrActivated } from '../'\n\nimport type { Ref } from 'vue'\n\n// @Experimental\nexport function useVisibilityChange(\n  target: Ref<Element | undefined>,\n  onChange: (visible: boolean) => void\n) {\n  // compatibility: https://caniuse.com/#feat=intersectionobserver\n  if (!inBrowser || !window.IntersectionObserver) {\n    return\n  }\n\n  const observer = new IntersectionObserver(\n    (entries) => {\n      // visibility changed\n      onChange(entries[0].intersectionRatio > 0)\n    },\n    { root: document.body }\n  )\n\n  const observe = () => {\n    if (target.value) {\n      observer.observe(target.value)\n    }\n  }\n\n  const unobserve = () => {\n    if (target.value) {\n      observer.unobserve(target.value)\n    }\n  }\n\n  onDeactivated(unobserve)\n  onBeforeUnmount(unobserve)\n  onMountedOrActivated(observe)\n}\n"],"names":[],"mappings":";;;;;;AAOgB,SAAA,mBAAA,CACd,QACA,QACA,EAAA;AAEA,EAAA,IAAI,CAAC,SAAA,IAAa,CAAC,MAAA,CAAO,oBAAsB,EAAA;AAC9C,IAAA,OAAA;AAAA,GACF;AAEA,EAAA,MAAM,WAAW,IAAI,oBAAA;AAAA,IACnB,CAAC,OAAY,KAAA;AAEX,MAAS,QAAA,CAAA,OAAA,CAAQ,CAAG,CAAA,CAAA,iBAAA,GAAoB,CAAC,CAAA,CAAA;AAAA,KAC3C;AAAA,IACA,EAAE,IAAM,EAAA,QAAA,CAAS,IAAK,EAAA;AAAA,GACxB,CAAA;AAEA,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,IAAI,OAAO,KAAO,EAAA;AAChB,MAAS,QAAA,CAAA,OAAA,CAAQ,OAAO,KAAK,CAAA,CAAA;AAAA,KAC/B;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,IAAI,OAAO,KAAO,EAAA;AAChB,MAAS,QAAA,CAAA,SAAA,CAAU,OAAO,KAAK,CAAA,CAAA;AAAA,KACjC;AAAA,GACF,CAAA;AAEA,EAAA,aAAA,CAAc,SAAS,CAAA,CAAA;AACvB,EAAA,eAAA,CAAgB,SAAS,CAAA,CAAA;AACzB,EAAA,oBAAA,CAAqB,OAAO,CAAA,CAAA;AAC9B;;;;"}