jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Fixed tooltip trigger error

Browse Source 
Fixed tooltip error that occurs when the tooltip doesn't work with the trigger props
This commit is contained in:
Ilya Artamonov
2023-07-15 16:33:05 +03:00
parent 6852da09bf
commit 0da3c66ae6
3 changed files with 43 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
package-lock.json generated
View File

@@ -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"
}
},

2
package.json
View File

@@ -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",

32
src/components/Tooltip/Tooltip.vue
View File

@@ -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]
})
@@ -83,5 +76,4 @@ const theme = computed(() => {
.v-popper--theme-tooltip-light .v-popper__arrow-outer {
border-color: #ddd;
}
</style>