feat: use-rect package (#274)

* feat: use-rect package

* Moved into measurableElement and rect function

* location changed

* use-rect test

* rect test completed

---------

Co-authored-by: Anjorin Damilare <damilareanjorin1@gmail.com>

packages/core/use-composable/src/index.ts

@@ -10,4 +10,5 @@ export { useComposedRefs } from './useComposedRefs'
 export { useForwardRef } from './useForwardRef'
 export { useEscapeKeydown } from './useEscapeKeydown'
 export type { MaybeComputedElementRef } from './unrefElement'
+export { useRect } from './use-rect'
 export { computedEager, syncRef, computedAsync }

packages/core/use-composable/src/use-rect.ts

@@ -0,0 +1,29 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { observeElementRect } from '@oku-ui/utils'
+import type { Measurable } from '@oku-ui/utils'
+
+function useRect() {
+  const measurableElement = ref<Measurable | null>(null)
+  const rect = ref<DOMRectReadOnly | null>(null)
+  onMounted(() => {
+    if (measurableElement.value) {
+      const unobserve = observeElementRect(measurableElement.value, (newRect) => {
+        rect.value = newRect
+      })
+
+      onBeforeUnmount(() => {
+        rect.value = null
+        unobserve()
+      })
+    }
+  })
+
+  return {
+    measurableElement,
+    rect,
+  }
+}
+
+export {
+  useRect,
+}

packages/core/use-composable/tests/use-rect.test.ts

@@ -0,0 +1,26 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { useRect } from '../src/use-rect'
+
+describe('useRect', () => {
+  it('rect', async () => {
+    const { rect } = useRect()
+    expect(rect.value).toBeNull()
+  })
+
+  it('props', () => {
+    const { measurableElement } = useRect()
+    expect(measurableElement.value).toBeNull()
+
+    const wrapper = mount({
+      template: '<div></div>',
+      setup() {
+        return {
+          dir: measurableElement,
+        }
+      },
+    })
+
+    expect(wrapper.vm.dir).toBeNull()
+  })
+})