arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-31 04:07:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(Tooltip): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-08 12:44:50 +01:00
parent 361e47b03c
commit b0222e5531
3 changed files with 13 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
playground/pages/tooltip.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="flex gap-1.5"> <div class="flex gap-1.5">
<UTooltip text="Tooltip"> <UTooltip content="Tooltip" side="bottom">
<UButton icon="i-heroicons-rocket-launch" to="/" label="Button" /> <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" />
</UTooltip> </UTooltip>
</div> </div>

21
src/runtime/components/Tooltip.vue
View File

@@ -7,8 +7,7 @@ import theme from '#build/ui/tooltip'
const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) }) const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
export interface TooltipProps extends TooltipRootProps, Omit<TooltipContentProps, 'as' | 'asChild'> { export interface TooltipProps extends TooltipRootProps, Omit<TooltipContentProps, 'as' | 'asChild'> {
text?: string content?: string
disabled?: boolean
arrow?: boolean arrow?: boolean
portal?: boolean portal?: boolean
class?: any class?: any
@@ -19,7 +18,7 @@ export interface TooltipEmits extends TooltipRootEmits {}
export interface TooltipSlots { export interface TooltipSlots {
default(): any default(): any
text(): any content(): any
} }
</script> </script>
@@ -31,7 +30,7 @@ import { reactivePick } from '@vueuse/core'
defineOptions({ inheritAttrs: false }) defineOptions({ inheritAttrs: false })
const props = withDefaults(defineProps<TooltipProps>(), { const props = withDefaults(defineProps<TooltipProps>(), {
text: '', content: undefined,
side: 'bottom', side: 'bottom',
delayDuration: 0, delayDuration: 0,
sideOffset: 8, sideOffset: 8,
@@ -58,18 +57,18 @@ const ui = computed(() => tooltip())
<TooltipPortal :disabled="!portal"> <TooltipPortal :disabled="!portal">
<TooltipContent v-bind="{ ...forwardContent, ...$attrs }" :class="ui.content({ class: props.class })"> <TooltipContent v-bind="{ ...forwardContent, ...$attrs }" :class="ui.content({ class: props.class })">
<slot name="text"> <slot name="content">
{{ text }} {{ content }}
</slot> </slot>
<TooltipArrow v-if="arrow" :width="11" :height="5" :class="ui.arrow()" /> <TooltipArrow v-if="arrow" :class="ui.arrow()" />
</TooltipContent> </TooltipContent>
</TooltipPortal> </TooltipPortal>
</TooltipRoot> </TooltipRoot>
</template> </template>
<style> <style>
@keyframes slideDown { @keyframes tooltipSlideDown {
from { from {
opacity: 0; opacity: 0;
transform: translateY(-0.25rem); transform: translateY(-0.25rem);
@@ -79,7 +78,7 @@ const ui = computed(() => tooltip())
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes slideRight { @keyframes tooltipSlideRight {
from { from {
opacity: 0; opacity: 0;
transform: translateX(-0.25rem); transform: translateX(-0.25rem);
@@ -89,7 +88,7 @@ const ui = computed(() => tooltip())
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes slideUp { @keyframes tooltipSlideUp {
from { from {
opacity: 0; opacity: 0;
transform: translateY(0.25rem); transform: translateY(0.25rem);
@@ -99,7 +98,7 @@ const ui = computed(() => tooltip())
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes slideLeft { @keyframes tooltipSlideLeft {
from { from {
opacity: 0; opacity: 0;
transform: translateX(0.25rem); transform: translateX(0.25rem);

4
src/theme/tooltip.ts
View File

@@ -1,6 +1,6 @@
export default { export default {
slots: { slots: {
content: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring-1 ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs font-normal truncate relative data-[state=delayed-open]:data-[side=top]:animate-[slideDown_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[slideLeft_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[slideRight_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[slideUp_200ms_ease-out] data-[state=closed]:data-[side=top]:animate-[slideUp_200ms_ease-in] data-[state=closed]:data-[side=right]:animate-[slideRight_200ms_ease-in] data-[state=closed]:data-[side=left]:animate-[slideLeft_200ms_ease-in] data-[state=closed]:data-[side=bottom]:animate-[slideDown_200ms_ease-in]', content: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring-1 ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs font-normal truncate relative data-[state=delayed-open]:data-[side=top]:animate-[tooltipSlideDown_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[tooltipSlideLeft_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[tooltipSlideRight_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[tooltipSlideUp_200ms_ease-out]',
arrow: 'fill-white dark:fill-gray-900' arrow: 'fill-white dark:fill-gray-700'
} }
} }