Migration to Nuxt v4 file structure and dependencies update

app/components/base/Tooltip.vue

@@ -0,0 +1,85 @@
+<template>
+    <TooltipRoot :delay-duration="delay" :disabled="disabled">
+        <TooltipTrigger asChild>
+            <span tabindex="0"><slot></slot></span>
+        </TooltipTrigger>
+        <TooltipPortal>
+            <TooltipContent class="TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50" :class="$attrs.class" :side="side" :align="align" :align-offset="-16" :side-offset="['left', 'right'].includes(side ?? '') ? 8 : 0">
+                {{ message }}
+                <TooltipArrow class="fill-light-30 dark:fill-dark-30"></TooltipArrow>
+            </TooltipContent>
+        </TooltipPortal>
+    </TooltipRoot>
+</template>
+
+<script setup lang="ts">
+const { message, delay = 300, side } = defineProps<{
+    message: string
+    delay?: number
+    disabled?: boolean
+    side?: 'left' | 'right' | 'top' | 'bottom'
+    align?: 'start' | 'center' | 'end'
+}>();
+</script>
+
+<style>
+.TooltipContent {
+  animation-duration: .3s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+.TooltipContent[data-side="top"] {
+  animation-name: slideUp;
+}
+.TooltipContent[data-side="bottom"] {
+  animation-name: slideDown;
+}
+.TooltipContent[data-side="left"] {
+  animation-name: slideLeft;
+}
+.TooltipContent[data-side="right"] {
+  animation-name: slideRight;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes slideRight {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideLeft {
+  from {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+</style>