fix(tooltip): fix tooltip not properly targeting on HTML element

jd-solanki · jd-solanki · commit 8e9978437e5b · 2023-04-01T04:26:34.000+05:30
closes #140
diff --git a/packages/anu-vue/src/components/menu/AMenu.vue b/packages/anu-vue/src/components/menu/AMenu.vue
@@ -2,6 +2,7 @@
 import { menuProps } from './props'
 import { ACard } from '@/components'
 import { AFloating } from '@/components/floating'
+import { useParent } from '@/composables'
 
 const props = defineProps(menuProps)
 
@@ -18,7 +19,7 @@ defineOptions({
   name: 'AMenu',
 })
 
-const parentEl = useParentElement()
+const parentEl = useParent()
 </script>
 
 <template>
diff --git a/packages/anu-vue/src/components/tooltip/ATooltip.vue b/packages/anu-vue/src/components/tooltip/ATooltip.vue
@@ -5,6 +5,7 @@ import type { Middleware } from '@floating-ui/vue'
 import { flip, offset, shift } from '@floating-ui/vue'
 import { tooltipProps } from './props'
 import { AFloating } from '@/components/floating'
+import { useParent } from '@/composables'
 
 const props = defineProps(tooltipProps)
 
@@ -20,7 +21,10 @@ defineOptions({
   name: 'ATooltip',
 })
 
-const parentEl = useParentElement()
+const parentEl = useParent()
+onMounted(() => {
+  console.log('parentEl :>> ', parentEl.value)
+})
 
 // const arrowEl = ref()
 
diff --git a/packages/anu-vue/src/composables/index.ts b/packages/anu-vue/src/composables/index.ts
@@ -6,6 +6,7 @@ export * from './useDOMScrollLock'
 export * from './useGroupModel'
 export * from './useIndeterminateCheckbox'
 export * from './useLayer'
+export * from './useParent'
 export * from './useSearch'
 export * from './useSort'
 export * from './useTeleport'
diff --git a/packages/anu-vue/src/composables/useParent.ts b/packages/anu-vue/src/composables/useParent.ts
@@ -0,0 +1,19 @@
+import type { Ref } from 'vue'
+
+export function useParent(): Readonly<Ref<HTMLElement | SVGElement | null | undefined>> {
+  const parentElement = shallowRef<HTMLElement | SVGElement | null | undefined>()
+
+  const update = () => {
+    const vm = getCurrentInstance()
+
+    const parentEl = vm!.parent!.vnode.el
+    const proxyParentEl = vm!.proxy!.$el.parentElement
+
+    // @ts-expect-error - `vm!.vnode.ctx` give type error
+    parentElement.value = vm!.vnode.ctx === vm!.vnode.el!.parentElement.__vnode.ctx ? proxyParentEl : parentEl
+  }
+
+  tryOnMounted(update)
+
+  return parentElement
+}
