From 0da3c66ae6a2271dbb91f97b71c5849460599ef5 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <hire@ilya-artamonov.ru>
Date: Sat, 15 Jul 2023 16:33:05 +0300
Subject: [PATCH] fix: Fixed tooltip trigger error

Fixed tooltip error that occurs when the tooltip doesn't work with the trigger props
---
 package-lock.json                  | 52 +++++++++++++++++-------------
 package.json                       |  2 +-
 src/components/Tooltip/Tooltip.vue | 34 ++++++++-----------
 3 files changed, 43 insertions(+), 45 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6fa1c44..06b96b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@vueuse/core": "9.3.0",
         "classnames": "2.3.2",
-        "floating-vue": "^2.0.0-beta.20",
+        "floating-vue": "^2.0.0-beta.24",
         "flowbite": "1.5.4",
         "lodash-es": "4.17.21",
         "nanoid": "4.0.0",
@@ -380,16 +380,16 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
-      "integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz",
+      "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g=="
     },
     "node_modules/@floating-ui/dom": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
-      "integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.1.tgz",
+      "integrity": "sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==",
       "dependencies": {
-        "@floating-ui/core": "^0.3.0"
+        "@floating-ui/core": "^1.1.0"
       }
     },
     "node_modules/@humanwhocodes/config-array": {
@@ -2676,15 +2676,21 @@
       "dev": true
     },
     "node_modules/floating-vue": {
-      "version": "2.0.0-beta.20",
-      "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.20.tgz",
-      "integrity": "sha512-N68otcpp6WwcYC7zP8GeJqNZVdfvS7tEY88lwmuAHeqRgnfWx1Un8enzLxROyVnBDZ3TwUoUdj5IFg+bUT7JeA==",
+      "version": "2.0.0-beta.24",
+      "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.24.tgz",
+      "integrity": "sha512-URSzP6YXaF4u1oZ9XGL8Sn8puuM7ivp5jkOUrpy5Q1mfo9BfGppJOn+ierTmsSUfJEeHBae8KT7r5DeI3vQIEw==",
       "dependencies": {
-        "@floating-ui/dom": "^0.1.10",
+        "@floating-ui/dom": "~1.1.1",
         "vue-resize": "^2.0.0-alpha.1"
       },
       "peerDependencies": {
+        "@nuxt/kit": "^3.2.0",
         "vue": "^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        }
       }
     },
     "node_modules/flowbite": {
@@ -5658,16 +5664,16 @@
       }
     },
     "@floating-ui/core": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
-      "integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz",
+      "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g=="
     },
     "@floating-ui/dom": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
-      "integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.1.tgz",
+      "integrity": "sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==",
       "requires": {
-        "@floating-ui/core": "^0.3.0"
+        "@floating-ui/core": "^1.1.0"
       }
     },
     "@humanwhocodes/config-array": {
@@ -7299,11 +7305,11 @@
       "dev": true
     },
     "floating-vue": {
-      "version": "2.0.0-beta.20",
-      "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.20.tgz",
-      "integrity": "sha512-N68otcpp6WwcYC7zP8GeJqNZVdfvS7tEY88lwmuAHeqRgnfWx1Un8enzLxROyVnBDZ3TwUoUdj5IFg+bUT7JeA==",
+      "version": "2.0.0-beta.24",
+      "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.24.tgz",
+      "integrity": "sha512-URSzP6YXaF4u1oZ9XGL8Sn8puuM7ivp5jkOUrpy5Q1mfo9BfGppJOn+ierTmsSUfJEeHBae8KT7r5DeI3vQIEw==",
       "requires": {
-        "@floating-ui/dom": "^0.1.10",
+        "@floating-ui/dom": "~1.1.1",
         "vue-resize": "^2.0.0-alpha.1"
       }
     },
diff --git a/package.json b/package.json
index 93e24d0..77fc5a0 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
   "dependencies": {
     "@vueuse/core": "9.3.0",
     "classnames": "2.3.2",
-    "floating-vue": "^2.0.0-beta.20",
+    "floating-vue": "2.0.0-beta.24",
     "flowbite": "1.5.4",
     "lodash-es": "4.17.21",
     "nanoid": "4.0.0",
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index 40a9c02..ef3c55e 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -10,31 +10,24 @@
 </template>
 
 <script lang="ts" setup>
-import type { PropType } from 'vue'
 import type { TooltipPlacement, TooltipStyle, TooltipTrigger } from './types'
-import * as pkg from 'floating-vue'
-const { Tooltip } = pkg
+import { Tooltip } from 'floating-vue'
 import 'floating-vue/dist/style.css'
 import { computed } from 'vue'
-
-const props = defineProps({
-    placement: {
-      type: String as PropType<TooltipPlacement>,
-      default: 'top',
-    },
-    theme: {
-      type: String as PropType<TooltipStyle>,
-      default: 'dark',
-    },
-    trigger: {
-      type: String as PropType<TooltipTrigger>,
-      default: 'hover',
-    },
+interface TooltipProps {
+  placement?: TooltipPlacement
+  theme?: TooltipStyle
+  trigger?: TooltipTrigger
+}
+const props = withDefaults(defineProps<TooltipProps>(), {
+  placement: 'top',
+  theme: 'dark',
+  trigger: 'hover',
 })
 const theme = computed(() => {
   const themes = {
-    'light': 'tooltip-light',
-    'dark': 'tooltip-dark',
+    light: 'tooltip-light',
+    dark: 'tooltip-dark',
   }
   return themes[props.theme]
 })
@@ -42,7 +35,7 @@ const theme = computed(() => {
 
 <style>
 .v-popper--theme-tooltip-dark .v-popper__wrapper .v-popper__inner {
-  background: rgba(0,0,0);
+  background: rgba(0, 0, 0);
   color: #fff;
   border-radius: 6px;
   padding: 7px 12px 6px;
@@ -83,5 +76,4 @@ const theme = computed(() => {
 .v-popper--theme-tooltip-light .v-popper__arrow-outer {
   border-color: #ddd;
 }
-
 </style>