feat(useParentElement): new function

packages/core/index.ts

@@ -78,6 +78,7 @@ export * from './useOffsetPagination'
 export * from './useOnline'
 export * from './usePageLeave'
 export * from './useParallax'
+export * from './useParentElement'
 export * from './usePerformanceObserver'
 export * from './usePermission'
 export * from './usePointer'

packages/core/useParentElement/Demo.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { useParentElement } from '@vueuse/core'
+
+const { parentElement } = useParentElement()
+</script>
+
+<template>
+  <p>Parent element tag: {{ parentElement ? parentElement.tagName : 'Finding...' }}</p>
+</template>

packages/core/useParentElement/index.md

@@ -0,0 +1,30 @@
+---
+category: Elements
+---
+
+# useParentElement
+
+Get parent element of the given element
+
+## Usage
+
+```js
+import { useParentElement } from '@vueuse/core'
+
+const { parentEl } = useParentElement()
+
+console.log('parentEl :>>', parentEl.value)
+```
+
+It can also accept a `ref` as the first argument.
+
+```js
+import { useParentElement } from '@vueuse/core'
+
+// Don't forget to bind the ref to the element
+const tooltip = ref()
+
+const { parentEl: tooltipWrapper } = useParentElement(tooltip)
+
+console.log('tooltipWrapper :>>', tooltipWrapper.value)
+```

packages/core/useParentElement/index.test.ts

@@ -0,0 +1,24 @@
+import { defineComponent, h, ref } from 'vue-demi'
+import { mount } from '../../.test'
+import { useParentElement } from '.'
+
+describe('useParentElement', () => {
+  it('should be defined', () => {
+    expect(useParentElement).toBeDefined()
+  })
+
+  it('should accept ref', () => {
+    const liEl = ref()
+    const vm = mount(defineComponent({
+      setup() {
+        return () => h('ul', {}, [
+          h('li', { ref: liEl }),
+        ])
+      },
+    }))
+
+    const { parentElement } = useParentElement(liEl)
+
+    expect(parentElement.value.tagName).to.equal('UL')
+  })
+})

packages/core/useParentElement/index.ts

@@ -0,0 +1,18 @@
+import type { MaybeComputedRef } from '@vueuse/shared'
+import { resolveUnref, tryOnMounted } from '@vueuse/shared'
+import { getCurrentInstance, ref } from 'vue-demi'
+import { unrefElement } from '../unrefElement'
+
+export const useParentElement = (element?: MaybeComputedRef<HTMLElement | SVGElement | null | undefined>) => {
+  const parentElement = ref()
+
+  tryOnMounted(() => {
+    const el = unrefElement(resolveUnref(element) || getCurrentInstance()?.proxy)
+    if (el)
+      parentElement.value = el.parentElement
+  })
+
+  return {
+    parentElement,
+  }
+}