From f80c6d5326029378bb12075ade8a8f50df2c2bf3 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Wed, 30 Oct 2024 14:11:04 +0100
Subject: [PATCH] Add HoverCard

---
 components/HoverCard.vue                      | 21 ++++++++++++++++
 components/Tooltip.vue                        |  5 ++--
 components/todo/{HoverCard.vue => Avatar.vue} |  0
 components/todo/Icon.vue                      |  0
 nuxt.config.ts                                | 24 +++++++++++++++++++
 pages/index.vue                               | 11 +++++----
 6 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 components/HoverCard.vue
 rename components/todo/{HoverCard.vue => Avatar.vue} (100%)
 delete mode 100644 components/todo/Icon.vue

diff --git a/components/HoverCard.vue b/components/HoverCard.vue
new file mode 100644
index 0000000..3bb7010
--- /dev/null
+++ b/components/HoverCard.vue
@@ -0,0 +1,21 @@
+<template>
+    <HoverCardRoot :open-delay="delay">
+        <HoverCardTrigger class="inline-block cursor-help outline-none" asChild>
+            <slot></slot>
+        </HoverCardTrigger>
+        <HoverCardPortal :disabled="disabled">
+            <HoverCardContent :side="side" class="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
+                <slot name="content"></slot>
+                <HoverCardArrow class="fill-light-35 dark:fill-dark-35" />
+            </HoverCardContent>
+        </HoverCardPortal>
+    </HoverCardRoot>
+</template>
+
+<script setup lang="ts">
+const { delay = 500, disabled = false, side = 'bottom' } = defineProps<{
+    delay?: number
+    disabled?: boolean
+    side?: 'top' | 'right' | 'bottom' | 'left'
+}>();
+</script>
\ No newline at end of file
diff --git a/components/Tooltip.vue b/components/Tooltip.vue
index 2fe972d..3694c10 100644
--- a/components/Tooltip.vue
+++ b/components/Tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-    <TooltipRoot :delay-duration="delay">
+    <TooltipRoot :delay-duration="delay" :disabled="disabled">
         <TooltipTrigger asChild>
             <span tabindex="0"><slot></slot></span>
         </TooltipTrigger>
@@ -15,7 +15,8 @@
 <script setup lang="ts">
 const { message, delay = 300, side } = defineProps<{
     message: string
-    delay?: number
+    delay?: number,
+    disabled?: boolean
     side?: 'left' | 'right' | 'top' | 'bottom'
 }>();
 </script>
diff --git a/components/todo/HoverCard.vue b/components/todo/Avatar.vue
similarity index 100%
rename from components/todo/HoverCard.vue
rename to components/todo/Avatar.vue
diff --git a/components/todo/Icon.vue b/components/todo/Icon.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 415ea2b..cce3b6b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -16,6 +16,30 @@ export default defineNuxtConfig({
           boxShadow: {
             raw: '0 0 0 2px var(--tw-shadow-color)'
           },
+          keyframes: {
+            slideDownAndFade: {
+              from: { opacity: '0', transform: 'translateY(-2px)' },
+              to: { opacity: '1', transform: 'translateY(0)' },
+            },
+            slideLeftAndFade: {
+              from: { opacity: '0', transform: 'translateX(2px)' },
+              to: { opacity: '1', transform: 'translateX(0)' },
+            },
+            slideUpAndFade: {
+              from: { opacity: '0', transform: 'translateY(2px)' },
+              to: { opacity: '1', transform: 'translateY(0)' },
+            },
+            slideRightAndFade: {
+              from: { opacity: '0', transform: 'translateX(-2px)' },
+              to: { opacity: '1', transform: 'translateX(0)' },
+            },
+          },
+          animation: {
+            slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+            slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+            slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+            slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+          },
         },
         colors: {
           transparent: 'transparent',
diff --git a/pages/index.vue b/pages/index.vue
index f873b37..7e8c639 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -14,11 +14,12 @@ const open = ref(false), username = ref(""), price = ref(750), disabled = ref(fa
             <TextInput label="Saisir un pseudonyme" :disabled="disabled" v-model="username" />
             <NumberPicker label="Age" :disabled="disabled" />
             <Separator decorative orientation="horizontal" class="h-px w-96 my-2 bg-light-30 dark:bg-dark-30" />
-            <Tooltip message="Vas y, ajoute stp" side="top"><button @click="open = !!username && !open"
-                    class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Ajouter</button>
-            </Tooltip>
-            <Toast v-model="open" :title="`Bienvenue ${username}`" content="Vous êtes maintenant connecté"
-                :duration="5000" />
+            <HoverCard>
+                <span>Texte</span>
+                <template v-slot:content>
+                    <div>Test de HoverCard</div>
+                </template>
+            </HoverCard>
         </div>
     </div>
 </template>
\ No newline at end of file