{"version":3,"file":"useMonitorElementVisibility-ab3a6b9d.js","sources":["../../src/composables/useMonitorElementVisibility.ts"],"sourcesContent":["import { MaybeElement, useIntersectionObserver } from '@vueuse/core';\r\nimport { ref, computed, Ref } from 'vue';\r\n\r\ntype OptionsTypes = { offset?: string; defaultVisibility: boolean };\r\n\r\nconst defaultOptions = {\r\n  offset: '0px',\r\n  defaultVisibility: false,\r\n};\r\n/**\r\n * Returns whether the element being monitored has gone out view (due to scrolling)\r\n *\r\n * @param elementToMonitor Html element to monitor\r\n * @param offset A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.\r\n * @returns\r\n */\r\nexport function useMonitorElementVisibility(elementToMonitor: MaybeElement | Ref<null>, options: OptionsTypes = defaultOptions) {\r\n  const isVisible = ref(options.defaultVisibility);\r\n\r\n  useIntersectionObserver(\r\n    elementToMonitor,\r\n    ([{ intersectionRatio }]) => {\r\n      isVisible.value = intersectionRatio === 1; // element is within view, will go to zero when it's partially or no longer in the viewport\r\n    },\r\n\r\n    { rootMargin: options.offset }\r\n  );\r\n\r\n  /**\r\n   * Return a sticky class to apply to different parts of the template when the searchFilterTop is no longer in view\r\n   */\r\n  const stickyClass = computed(() => {\r\n    return isVisible.value ? '' : 'sticky';\r\n  });\r\n\r\n  return { isVisible, stickyClass };\r\n}\r\n"],"names":["defaultOptions","useMonitorElementVisibility","elementToMonitor","options","isVisible","ref","useIntersectionObserver","intersectionRatio","stickyClass","computed"],"mappings":"uFAKA,MAAMA,EAAiB,CACrB,OAAQ,MACR,kBAAmB,EACrB,EAQgB,SAAAC,EAA4BC,EAA4CC,EAAwBH,EAAgB,CACxH,MAAAI,EAAYC,EAAIF,EAAQ,iBAAiB,EAE/CG,EACEJ,EACA,CAAC,CAAC,CAAE,kBAAAK,CAAA,CAAmB,IAAM,CAC3BH,EAAU,MAAQG,IAAsB,CAC1C,EAEA,CAAE,WAAYJ,EAAQ,MAAO,CAAA,EAMzB,MAAAK,EAAcC,EAAS,IACpBL,EAAU,MAAQ,GAAK,QAC/B,EAEM,MAAA,CAAE,UAAAA,EAAW,YAAAI,EACtB"}