use getters and rename

package.json

@@ -56,7 +56,7 @@
   },
   "peerDependencies": {
     "lodash.debounce": "^4.0.8",
-    "vue": "^3.2.36",
+    "vue": "^3.3.6",
     "vue-router": "^4.0.15"
   },
   "peerDependenciesMeta": {

src/index.ts

@@ -7,13 +7,13 @@ export * from './useElementWidth'
 export * from './useGlobalEventListener'
 export * from './useIntersectionObserver'
 export * from './useIsSame'
-export * from './useIsStickyStuck'
 export * from './useKeyDown'
 export * from './useMedia'
 export * from './useMutationObserver'
 export * from './useNow'
 export * from './usePatchRef'
 export * from './useResizeObserver'
+export * from './usePositionStickyObserver'
 export * from './useRouteParam'
 export * from './useRouteQuery'
 export * from './useRouteQueryParam'

src/useIsStickyStuck/README.md → src/usePositionStickyObserver/README.md

@@ -1,16 +1,16 @@
-# useIsStickyStuck
+# usePositionStickyObserver
 
 This composition is abstracts away the logic necessary to determine if a `position: sticky;` element has gone into it's "stuck" mode. This is useful when you want to style the element differently when it's stuck, like if you want to add a background color.
 
 ## Example
 
 ```typescript
 const stickyHeader = ref<HTMLElement>()
-const isStuck = useIsStickyStuck(stickyHeader)
+const { stuck } = usePositionStickyObserver(stickyHeader)
 
 const classes = computed(() ({
   header: {
-    'header--stuck': isStuck.value,
+    'header--stuck': stuck.value,
   }
 }))
 ```
@@ -27,7 +27,7 @@ const classes = computed(() ({
 | Name            | Type                                                                                                   |
 | --------------- | ------------------------------------------------------------------------------------------------------ |
 | rootMargin      | `string`, [MDN DOcs](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) |
-| boundingElement | `HTMLElement \| Ref<HTMLElement \| undefined>`, defaults to the body.                                  |
+| boundingElement | `HTMLElement \| Ref<HTMLElement \| undefined>`. The scroll container, defaults to the body.            |
 
 ## Returns
 

src/usePositionStickyObserver/index.ts

@@ -0,0 +1 @@
+export * from './usePositionStickyObserver'

src/usePositionStickyObserver/usePositionStickyObserver.ts

@@ -0,0 +1,57 @@
+import { Ref, computed, onMounted, ref, MaybeRefOrGetter, toValue } from 'vue'
+import { useIntersectionObserver } from '@/useIntersectionObserver'
+
+type UsePositionStickyObserver = {
+  stuck: Ref<boolean>,
+}
+
+export type UsePositionStickyObserverOptions = {
+  rootMargin?: string,
+  boundingElement?: MaybeRefOrGetter<HTMLElement | undefined>,
+}
+
+const usePositionStickyObserverDefaultOptions = {
+  rootMargin: '-1px 0px 0px 0px',
+  boundingElement: document.body,
+}
+
+export function usePositionStickyObserver(
+  element: MaybeRefOrGetter<HTMLElement | undefined>,
+  options?: MaybeRefOrGetter<UsePositionStickyObserverOptions>,
+): UsePositionStickyObserver {
+  const elementRef = computed(() => toValue(element))
+  const optionsRef = computed(() => {
+    if (!options) {
+      return usePositionStickyObserverDefaultOptions
+    }
+
+    const { rootMargin, boundingElement } = toValue(options)
+    console.log('in deal', boundingElement)
+    const boundingElementRef = toValue(boundingElement)
+
+    return {
+      rootMargin: rootMargin ?? usePositionStickyObserverDefaultOptions.rootMargin,
+      boundingElement: boundingElementRef ?? usePositionStickyObserverDefaultOptions.boundingElement,
+    }
+  })
+
+  const stuck = ref(false)
+
+  function intersect(entries: IntersectionObserverEntry[]): void {
+    entries.forEach(entry => {
+      stuck.value = entry.intersectionRatio < 1
+    })
+  }
+
+  const { observe } = useIntersectionObserver(intersect, computed(() => ({
+    threshold: [1],
+    rootMargin: optionsRef.value.rootMargin,
+    root: optionsRef.value.boundingElement,
+  })))
+
+  onMounted(() => observe(elementRef))
+
+  return {
+    stuck,
+  }
+}