75 lines
3.0 KiB
Vue
75 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { useFloating, offset, flip, shift, autoUpdate } from '@floating-ui/vue';
|
|
|
|
const { activeElement, activeHotkey, isVisible } = useTooltip();
|
|
|
|
watch(activeElement, () => {
|
|
console.log('activeElement', activeElement.value);
|
|
});
|
|
|
|
const tooltipRef = ref<HTMLElement | null>(null);
|
|
|
|
const { floatingStyles, placement } = useFloating(activeElement, tooltipRef, {
|
|
placement: 'top',
|
|
whileElementsMounted: autoUpdate,
|
|
middleware: [offset(6), flip(), shift({ padding: 8 })],
|
|
transform: false,
|
|
});
|
|
|
|
const isMoving = ref(false);
|
|
|
|
watch(activeElement, (newEl, oldEl) => {
|
|
// If we have both a new and old element, and we're currently visible,
|
|
// then we are "moving" and should animate the transform.
|
|
if (newEl && oldEl && isVisible.value) {
|
|
isMoving.value = true;
|
|
} else {
|
|
isMoving.value = false;
|
|
}
|
|
});
|
|
|
|
// Also reset isMoving when the tooltip fully closes
|
|
watch(isVisible, (visible) => {
|
|
if (!visible) isMoving.value = false;
|
|
});
|
|
|
|
const isMac = import.meta.client ? navigator.userAgent.toUpperCase().indexOf('MAC') >= 0 : false;
|
|
|
|
const displayHotkey = computed(() =>
|
|
activeHotkey.value?.map((key: string) =>
|
|
isMac ? key.toLowerCase().replace('ctrl', '⌘') : key.toLowerCase())
|
|
);
|
|
|
|
const transformOrigin = computed(() => placement.value.includes('top') ? 'transform-origin-bottom-center' : 'transform-origin-top-center');
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<Transition
|
|
enter-active-class="transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
|
enter-from-class="opacity-0 scale-95" enter-to-class="opacity-100 scale-100"
|
|
leave-active-class="transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
|
leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
|
|
<div v-if="isVisible && activeElement" ref="tooltipRef" :style="[
|
|
floatingStyles,
|
|
{
|
|
// Only apply the transform transition when moving between elements
|
|
transitionProperty: isMoving
|
|
? 'top, left, right, bottom, opacity, transform'
|
|
: 'opacity, transform',
|
|
transitionDuration: '150ms',
|
|
transitionTimingFunction: 'cubic-bezier(0.5, 1, 0.89, 1)'
|
|
}
|
|
]" :class="transformOrigin"
|
|
class="pointer-events-none fixed z-35 flex flex-col bg-[var(--bg-surface)] rounded-lg shadow-xl px-1.5 py-1 text-xs">
|
|
<div class="flex gap-1 items-center">
|
|
<span v-for="key in displayHotkey" :key="key"
|
|
class="bg-[var(--bg-container)] px-1 rounded border border-[var(--color-border)]">
|
|
<kbd class="font-mono text-[10px] case-capital">{{ key }}</kbd>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|