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

6
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>

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

@@ -3,8 +3,10 @@
<!-- 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"
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 Tooltip top
</button> </button>
</template> </template>
@@ -15,8 +17,10 @@
<!-- 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"
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>
@@ -27,8 +31,10 @@
<!-- 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"
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>
@@ -39,8 +45,10 @@
<!-- 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"
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>

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

@@ -1,10 +1,12 @@
<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"
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 Light Tooltip
</button> </button>
</template> </template>
@@ -13,10 +15,12 @@
</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"
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>

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

@@ -3,8 +3,10 @@
<!-- 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"
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 Tooltip hover
</button> </button>
</template> </template>
@@ -15,8 +17,10 @@
<!-- 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"
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>
@@ -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>

116
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,30 +43,38 @@ 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">
<!-- light style tooltip -->
<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"
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 Light Tooltip
</button> </button>
</template> </template>
<template #content> <template #content>
Tooltip content Tooltip content
</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"
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
@@ -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 -->
<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"
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 Tooltip top
</button> </button>
</template> </template>
<template #content> <template #content>
Tooltip on top Tooltip on top
</template> </template>
</Tooltip> </Tooltip>
<!-- 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"
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 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"
>
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 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"
>
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">
<!-- Show tooltip on 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"
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 Tooltip hover
</button> </button>
</template> </template>
<template #content> <template #content>
Tooltip content Tooltip content
</template> </template>
</Tooltip> </Tooltip>
<!-- 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"
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

18
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' ;