diff --git a/src/useIntersectionObserver/useIntersectionObserver.ts b/src/useIntersectionObserver/useIntersectionObserver.ts index b743a773..d44b3ad4 100644 --- a/src/useIntersectionObserver/useIntersectionObserver.ts +++ b/src/useIntersectionObserver/useIntersectionObserver.ts @@ -1,11 +1,12 @@ import { onMounted, onUnmounted, ref, Ref, unref, watch } from 'vue' -import { MaybeRef } from '@/types/maybe' +import { MaybeRef, MaybeRefOrGetter } from '@/types/maybe' +import { toValue } from '@/utilities/vue' export type UseIntersectionObserverResponse = { - observe: (element: Ref) => void, - unobserve: (element: Ref) => void, + observe: (element: MaybeRefOrGetter) => void, + unobserve: (element: MaybeRefOrGetter) => void, disconnect: () => void, - check: (element: Ref) => void, + check: (element: MaybeRefOrGetter) => void, } export type UseIntersectionObserverOptions = { @@ -22,22 +23,23 @@ export function useIntersectionObserver(callback: UseIntersectionObserverCallbac let intersectionObserver: IntersectionObserver | null = null - function observe(element: Ref): void { + function observe(element: MaybeRefOrGetter): void { + const value = toValue(element) const observer = getObserver() - if (element.value) { - observer.observe(element.value) - elements.add(element.value) + if (value) { + observer.observe(value) + elements.add(value) } - } - function unobserve(element: Ref): void { + function unobserve(element: MaybeRefOrGetter): void { + const value = toValue(element) const observer = getObserver() - if (element.value) { - observer.unobserve(element.value) - elements.delete(element.value) + if (value) { + observer.unobserve(value) + elements.delete(value) } } @@ -56,14 +58,16 @@ export function useIntersectionObserver(callback: UseIntersectionObserverCallbac } } - function check(element: Ref): void { - if (!element.value) { + function check(element: MaybeRefOrGetter): void { + const value = toValue(element) + + if (!value) { return } const observer = new IntersectionObserver(callback, getOptions(optionsRef.value)) - observer.observe(element.value) + observer.observe(value) setTimeout(() => observer.disconnect(), 100) } diff --git a/src/usePositionStickyObserver/usePositionStickyObserver.ts b/src/usePositionStickyObserver/usePositionStickyObserver.ts index c1df2c51..77c63099 100644 --- a/src/usePositionStickyObserver/usePositionStickyObserver.ts +++ b/src/usePositionStickyObserver/usePositionStickyObserver.ts @@ -1,4 +1,4 @@ -import { Ref, computed, onMounted, ref } from 'vue' +import { Ref, computed, ref, watch } from 'vue' import { MaybeRefOrGetter } from '@/types/maybe' import { useIntersectionObserver } from '@/useIntersectionObserver' import { toValue } from '@/utilities/vue' @@ -42,9 +42,12 @@ export function usePositionStickyObserver( }) } - const { observe } = useIntersectionObserver(intersect, observerOptions) + const { observe, unobserve } = useIntersectionObserver(intersect, observerOptions) - onMounted(() => observe(elementRef)) + watch(elementRef, (newVal, oldVal) => { + unobserve(oldVal) + observe(newVal) + }, { immediate: true }) return { stuck,