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

refactor: Small refactoring Tooltip component

Browse Source
This commit is contained in:
Ilya Artamonov
2022-12-05 21:18:53 +03:00
parent 20236c3f07
commit b2eca2d762
8 changed files with 193 additions and 1543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/components/tooltip/examples/TooltipExample.vue
View File

@@ -1,8 +1,10 @@
<template> <template>
<Tooltip> <Tooltip>
<template #trigger> <template #trigger>
<button type="button" <button
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Default Tooltip Default Tooltip
</button> </button>
</template> </template>
@@ -14,4 +16,4 @@
<script setup> <script setup>
import { Tooltip } from '../../../../src/index' import { Tooltip } from '../../../../src/index'
</script> </script>

34
docs/components/tooltip/examples/TooltipPositionExample.vue
View File

@@ -3,9 +3,11 @@
<!-- Show tooltip on top --> <!-- Show tooltip on top -->
<Tooltip placement="top"> <Tooltip placement="top">
<template #trigger> <template #trigger>
<button type="button" <button
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> type="button"
Tooltip top class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Tooltip top
</button> </button>
</template> </template>
<template #content> <template #content>
@@ -15,9 +17,11 @@
<!-- Show tooltip on right --> <!-- Show tooltip on right -->
<Tooltip placement="right"> <Tooltip placement="right">
<template #trigger> <template #trigger>
<button type="button" <button
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> type="button"
Tooltip right class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Tooltip right
</button> </button>
</template> </template>
<template #content> <template #content>
@@ -27,9 +31,11 @@
<!-- Show tooltip on bottom --> <!-- Show tooltip on bottom -->
<Tooltip placement="bottom"> <Tooltip placement="bottom">
<template #trigger> <template #trigger>
<button type="button" <button
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> type="button"
Tooltip bottom class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Tooltip bottom
</button> </button>
</template> </template>
<template #content> <template #content>
@@ -39,9 +45,11 @@
<!-- Show tooltip on left --> <!-- Show tooltip on left -->
<Tooltip placement="left"> <Tooltip placement="left">
<template #trigger> <template #trigger>
<button type="button" <button
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> type="button"
Tooltip left class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Tooltip left
</button> </button>
</template> </template>
<template #content> <template #content>
@@ -53,4 +61,4 @@
<script setup> <script setup>
import { Tooltip } from '../../../../src/index' import { Tooltip } from '../../../../src/index'
</script> </script>

22
docs/components/tooltip/examples/TooltipStyleExample.vue
View File

@@ -1,11 +1,13 @@
<template> <template>
<div class="flex flex-wrap justify-center py-8 space-x-3"> <div class="flex flex-wrap justify-center py-8 space-x-3">
<!-- light style tooltip --> <!-- light style tooltip -->
<Tooltip tooltip-style="tooltip-light"> <Tooltip theme="light">
<template #trigger> <template #trigger>
<button type="button" <button
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> type="button"
Light Tooltip class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Light Tooltip
</button> </button>
</template> </template>
<template #content> <template #content>
@@ -13,11 +15,13 @@
</template> </template>
</Tooltip> </Tooltip>
<!-- dark style tooltip --> <!-- dark style tooltip -->
<Tooltip tooltip-style="tooltip-dark"> <Tooltip theme="dark">
<template #trigger> <template #trigger>
<button type="button" <button
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> type="button"
Dark Tooltip class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Dark Tooltip
</button> </button>
</template> </template>
<template #content> <template #content>
@@ -29,4 +33,4 @@
<script setup> <script setup>
import { Tooltip } from '../../../../src/index' import { Tooltip } from '../../../../src/index'
</script> </script>

22
docs/components/tooltip/examples/TooltipTriggerExample.vue
View File

@@ -3,9 +3,11 @@
<!-- Show tooltip on hover --> <!-- Show tooltip on hover -->
<Tooltip trigger="hover"> <Tooltip trigger="hover">
<template #trigger> <template #trigger>
<button type="button" <button
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> type="button"
Tooltip hover class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Tooltip hover
</button> </button>
</template> </template>
<template #content> <template #content>
@@ -15,9 +17,11 @@
<!-- Show tooltip on click --> <!-- Show tooltip on click -->
<Tooltip trigger="click"> <Tooltip trigger="click">
<template #trigger> <template #trigger>
<button type="button" <button
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> type="button"
Tooltip click class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Tooltip click
</button> </button>
</template> </template>
<template #content> <template #content>
@@ -35,11 +39,11 @@ import type { TooltipPlacement } from '../../../../src/components/Tooltip/types'
const props = defineProps({ const props = defineProps({
placement: { placement: {
type: String as PropType<TooltipPlacement>, type: String as PropType<TooltipPlacement>,
default: 'top' default: 'top',
}, },
arrowColor: { arrowColor: {
type: String, type: String,
default: "#0f172a", default: '#0f172a',
} },
}) })
</script> </script>

220
docs/components/tooltip/tooltip.md
View File

@@ -18,8 +18,10 @@ import { Tooltip } from 'flowbite-vue'
<template> <template>
<Tooltip> <Tooltip>
<template #trigger> <template #trigger>
<button type="button" <button
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Default Tooltip Default Tooltip
</button> </button>
</template> </template>
@@ -41,35 +43,43 @@ You can use choose between dark and light version styles for the tooltip compone
import { Tooltip } from 'flowbite-vue' import { Tooltip } from 'flowbite-vue'
</script> </script>
<!-- light style tooltip --> <template>
<Tooltip tooltip-style="tooltip-light"> <div class="flex flex-wrap justify-center py-8 space-x-3">
<template #trigger> <!-- light style tooltip -->
<button type="button" <Tooltip theme="light">
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <template #trigger>
Light Tooltip <button
</button> type="button"
</template> class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
<template #content> >
Tooltip content Light Tooltip
</template> </button>
</Tooltip> </template>
<!-- dark style tooltip --> <template #content>
<Tooltip tooltip-style="tooltip-dark"> Tooltip content
<template #trigger> </template>
<button type="button" </Tooltip>
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <!-- dark style tooltip -->
<Tooltip theme="dark">
<template #trigger>
<button
type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Dark Tooltip Dark Tooltip
</button> </button>
</template> </template>
<template #content> <template #content>
Tooltip content Tooltip content
</template> </template>
</Tooltip> </Tooltip>
</div>
</template>
``` ```
## Placement ## Placement
The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using placement attribute with `top`, `top-start` , `top-end`, `bottom`, `bottom-start`, `bottom-end`, `right`, `right-start`, `right-end`, `left`, `left-start`, `left-end`, `auto`, `auto-start`, `auto-end`. The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using placement attribute with `top`, `top-start` , `top-end`, `bottom`, `bottom-start`, `bottom-end`, `right`, `right-start`, `right-end`, `left`, `left-start`, `left-end`, `auto`, `auto-start`, `auto-end`.
The default value is: `top` The default value is: `top`
<TooltipPositionExample /> <TooltipPositionExample />
@@ -80,57 +90,65 @@ import { Tooltip } from 'flowbite-vue'
</script> </script>
<template> <template>
<!-- Show tooltip on top --> <div class="flex flex-wrap justify-center py-8 space-x-3">
<Tooltip placement="top"> <!-- Show tooltip on top -->
<template #trigger> <Tooltip placement="top">
<button type="button" <template #trigger>
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <button
Tooltip top type="button"
</button> class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
</template> >
<template #content> Tooltip top
Tooltip on top </button>
</template> </template>
</Tooltip> <template #content>
Tooltip on top
<!-- Show tooltip on right --> </template>
<Tooltip placement="right"> </Tooltip>
<template #trigger> <!-- Show tooltip on right -->
<button type="button" <Tooltip placement="right">
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <template #trigger>
<button
type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Tooltip right Tooltip right
</button> </button>
</template> </template>
<template #content> <template #content>
Tooltip on right Tooltip on right
</template> </template>
</Tooltip> </Tooltip>
<!-- Show tooltip on bottom -->
<!-- Show tooltip on bottom --> <Tooltip placement="bottom">
<Tooltip placement="bottom"> <template #trigger>
<template #trigger> <button
<button type="button" type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Tooltip bottom Tooltip bottom
</button> </button>
</template> </template>
<template #content> <template #content>
Tooltip on bottom Tooltip on bottom
</template> </template>
</Tooltip> </Tooltip>
<!-- Show tooltip on left -->
<!-- Show tooltip on left --> <Tooltip placement="left">
<Tooltip placement="left"> <template #trigger>
<template #trigger> <button
<button type="button" type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Tooltip left Tooltip left
</button> </button>
</template> </template>
<template #content> <template #content>
Tooltip on left Tooltip on left
</template> </template>
</Tooltip> </Tooltip>
</div>
</template>
``` ```
@@ -146,28 +164,36 @@ You can choose the triggering event by using the `hover` or `click` attributes t
import { Tooltip } from 'flowbite-vue' import { Tooltip } from 'flowbite-vue'
</script> </script>
<!-- Show tooltip on hover --> <template>
<Tooltip trigger="hover"> <div class="flex flex-wrap justify-center py-8 space-x-3">
<template #trigger> <!-- Show tooltip on hover -->
<button type="button" <Tooltip trigger="hover">
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <template #trigger>
Tooltip hover <button
</button> type="button"
</template> class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
<template #content> >
Tooltip content Tooltip hover
</template> </button>
</Tooltip> </template>
<!-- Show tooltip on click --> <template #content>
<Tooltip trigger="click"> Tooltip content
<template #trigger> </template>
<button type="button" </Tooltip>
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <!-- Show tooltip on click -->
<Tooltip trigger="click">
<template #trigger>
<button
type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Tooltip click Tooltip click
</button> </button>
</template> </template>
<template #content> <template #content>
Tooltip content Tooltip content
</template> </template>
</Tooltip> </Tooltip>
</div>
</template>
``` ```

1404
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@@ -1,6 +1,6 @@
<template> <template>
<div class="flex items-start"> <div class="flex items-start">
<TooltipComponent :placement="placement" :triggers="[trigger]" :theme="tooltipStyle"> <TooltipComponent :placement="placement" :triggers="[trigger]" :theme="theme" auto-hide>
<slot name="trigger"></slot> <slot name="trigger"></slot>
<template #popper> <template #popper>
<slot name="content"></slot> <slot name="content"></slot>
@@ -14,20 +14,28 @@ import type { PropType } from 'vue'
import type { TooltipPlacement, TooltipStyle, TooltipTrigger } from './types' import type { TooltipPlacement, TooltipStyle, TooltipTrigger } from './types'
import { Tooltip as TooltipComponent } from 'floating-vue' import { Tooltip as TooltipComponent } from 'floating-vue'
import 'floating-vue/dist/style.css' import 'floating-vue/dist/style.css'
import { computed } from 'vue'
const props = defineProps({ const props = defineProps({
placement: { placement: {
type: String as PropType<TooltipPlacement>, type: String as PropType<TooltipPlacement>,
default: "top" default: 'top',
}, },
tooltipStyle: { theme: {
type: String as PropType<TooltipStyle>, type: String as PropType<TooltipStyle>,
default: "tooltip-dark", default: 'dark',
}, },
trigger: { trigger: {
type: String as PropType<TooltipTrigger>, type: String as PropType<TooltipTrigger>,
default: "hover" default: 'hover',
} },
})
const theme = computed(() => {
const themes = {
'light': 'tooltip-light',
'dark': 'tooltip-dark',
}
return themes[props.theme]
}) })
</script> </script>

6
src/components/Tooltip/types.ts
View File

@@ -1,3 +1,3 @@
export type TooltipPlacement = "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end" | undefined; export type TooltipPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
export type TooltipStyle = "tooltip-dark" | "tooltip-light"; export type TooltipStyle = 'dark' | 'light';
export type TooltipTrigger = "hover" | "click" ; export type TooltipTrigger = 'hover' | 'click' ;