fix(tooltip): tooltip not working properly on HTML elements

jd-solanki · jd-solanki · commit b0533fdd25ca · 2023-04-02T00:43:28.000+05:30
closes #140
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -55,6 +55,10 @@ module.exports = {
         '/^(click):[a-z]+[a-zA-Z]+$/',
       ],
     }],
+    'vue/component-name-in-template-casing': ['error', 'PascalCase', {
+      registeredComponentsOnly: false,
+      ignores: [],
+    }],
 
     // Vue
     'vue/require-default-prop': 'off',
diff --git a/packages/anu-vue/src/components/alert/AAlert.vue b/packages/anu-vue/src/components/alert/AAlert.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { AIcon } from '@/components';
-import { useLayer, useProps as useLayerProps } from '@/composables/useLayer';
-import { configurable as configurableProp } from '@/composables/useProps';
-import type { ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes } from 'vue'
+import { AIcon } from '@/components'
+import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
+import { configurable as configurableProp } from '@/composables/useProps'
 
 const props = defineProps({
 
@@ -83,14 +83,15 @@ const handleAppendIconClick = () => {
 }
 
 const appendIconBindings = computed(() => {
-  if (props.dismissible)
+  if (props.dismissible) {
     return {
       icon: appendIcon,
-      ariaLabel: 'close'
+      ariaLabel: 'close',
     }
+  }
 
   return {
-    class: appendIcon
+    class: appendIcon,
   }
 })
 </script>
@@ -109,14 +110,17 @@ const appendIconBindings = computed(() => {
     <div v-if="props.icon">
       <i :class="props.icon" />
     </div>
-    <div class="flex-grow">
+    <div
+      class="flex-grow"
+      data-no-reference
+    >
       <slot />
     </div>
     <div>
       <slot name="append">
         <Component
-          v-if="appendIcon"
           :is="props.dismissible ? AIcon : 'i'"
+          v-if="appendIcon"
           class="align-text-top"
           v-bind="appendIconBindings"
           @click="handleAppendIconClick"
diff --git a/packages/anu-vue/src/components/btn/ABtn.vue b/packages/anu-vue/src/components/btn/ABtn.vue
@@ -46,6 +46,7 @@ const { styles, classes } = getLayerClasses(
     />
     <div
       class="a-btn-content"
+      data-no-reference
       :class="[props.loading && 'opacity-0']"
     >
       <i
diff --git a/packages/anu-vue/src/components/switch/ASwitch.vue b/packages/anu-vue/src/components/switch/ASwitch.vue
@@ -65,7 +65,10 @@ const dotPosition = computed(() => {
     >
 
     <!-- 👉 Label -->
-    <div class="a-switch-label">
+    <div
+      class="a-switch-label"
+      data-no-reference
+    >
       <slot>{{ props.label }}</slot>
     </div>
 
diff --git a/packages/anu-vue/src/components/tooltip/ATooltip.vue b/packages/anu-vue/src/components/tooltip/ATooltip.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { Middleware } from '@floating-ui/vue';
+import type { Middleware } from '@floating-ui/vue'
 
 // import { arrow } from '@floating-ui/vue'
-import { AFloating } from '@/components/floating';
-import { useParent } from '@/composables';
-import { flip, offset, shift } from '@floating-ui/vue';
-import { tooltipProps } from './props';
+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)
 
@@ -44,9 +44,11 @@ const floatingMiddleware = [
     :middleware="() => floatingMiddleware"
   >
     <div class="a-tooltip">
-      <slot>
-        <span class="a-tooltip-text">{{ props.text }}</span>
-      </slot>
+      <span class="a-tooltip-text">
+        <slot>
+          {{ props.text }}
+        </slot>
+      </span>
       <!-- <div
         ref="arrowEl"
         class="a-tooltip-arrow absolute"
diff --git a/packages/anu-vue/src/composables/useParent.ts b/packages/anu-vue/src/composables/useParent.ts
@@ -1,9 +1,16 @@
-export function useParent (){
+export function useParent() {
   const parentEl = ref()
+
   onMounted(() => {
     const vm = getCurrentInstance()
-    if (vm?.proxy?.$parent)
-      parentEl.value = unrefElement(vm?.proxy?.$parent)
+    let parent: ParentNode | null = vm?.proxy?.$el.parentNode
+
+    // TODO: Fix types
+    // @ts-expect-error hasAttribute doesn't exist on parentNode type
+    while (parent && parent.hasAttribute('data-no-reference'))
+      parent = parent.parentNode
+
+    parentEl.value = parent
   })
 
   return parentEl
diff --git a/packages/anu-vue/volar.d.ts b/packages/anu-vue/volar.d.ts
@@ -12,6 +12,7 @@ declare module 'vue' {
     ADialog: typeof import('anu-vue')['ADialog']
     ADrawer: typeof import('anu-vue')['ADrawer']
     AFloating: typeof import('anu-vue')['AFloating']
+    AIcon: typeof import('anu-vue')['AIcon']
     AInput: typeof import('anu-vue')['AInput']
     AList: typeof import('anu-vue')['AList']
     AListItem: typeof import('anu-vue')['AListItem']

Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,7 @@ const { styles, classes } = getLayerClasses(`
`46`	`46`	`/>`
`47`	`47`	`<div`
`48`	`48`	`class="a-btn-content"`
	`49`	`+ data-no-reference`
`49`	`50`	`:class="[props.loading && 'opacity-0']"`
`50`	`51`	`>`
`51`	`52`	`<i`