From cbce979aa9a6fb27663caa04a19654320fea6d4c Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Wed, 30 Oct 2024 17:47:14 +0100
Subject: [PATCH] Add Button and Dialog (and AlertDialog which is embedded in
 the Dialog through the priority attribute)

---
 components/Button.vue      |  6 ++++++
 components/Dialog.vue      | 38 ++++++++++++++++++++++++++++++++++++++
 components/HoverCard.vue   |  2 +-
 components/Switch.vue      | 22 ++++++++++------------
 components/todo/Dialog.vue |  0
 nuxt.config.ts             |  5 +++++
 pages/index.vue            |  7 +++++++
 7 files changed, 67 insertions(+), 13 deletions(-)
 create mode 100644 components/Button.vue
 create mode 100644 components/Dialog.vue
 delete mode 100644 components/todo/Dialog.vue

diff --git a/components/Button.vue b/components/Button.vue
new file mode 100644
index 0000000..e723941
--- /dev/null
+++ b/components/Button.vue
@@ -0,0 +1,6 @@
+<template>
+    <button class="text-light-100 dark:text-dark-100 font-semibold hover:bg-light-30 dark:hover:bg-dark-30 inline-flex h-[35px] items-center justify-center bg-light-25 dark:bg-dark-25 px-[15px] leading-none outline-none
+    border border-light-25 dark:border-dark-25 hover:border-light-30 dark:hover:border-dark-30 active:border-light-40 dark:active:border-dark-40 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40">
+        <slot />
+    </button>
+</template>
\ No newline at end of file
diff --git a/components/Dialog.vue b/components/Dialog.vue
new file mode 100644
index 0000000..9efa49e
--- /dev/null
+++ b/components/Dialog.vue
@@ -0,0 +1,38 @@
+<template>
+    <DialogRoot v-if="!priority">
+        <DialogTrigger asChild><Button>{{ label }}</Button></DialogTrigger>
+        <DialogPortal v-if="!disabled">
+            <DialogOverlay class="bg-light-0 dark:bg-dark-0 opacity-70 fixed inset-0 z-40" />
+            <DialogContent class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 p-6 z-50 text-light-100 dark:text-dark-100">
+                <DialogTitle v-if="!!title" class="text-3xl font-light relative -top-2">{{ title }}</DialogTitle>
+                <DialogDescription v-if="!!description" class="text-base pb-2">{{ description }}</DialogDescription>
+                <slot />
+                <DialogClose v-if="iconClose" class="text-light-100 dark:text-dark-100 absolute top-2 right-2 inline-flex h-6 w-6 appearance-none items-center justify-center outline-none text-xl" aria-label="Close">
+                    <span aria-hidden>×</span>
+                </DialogClose>
+            </DialogContent>
+        </DialogPortal>
+    </DialogRoot>
+    <AlertDialogRoot v-else>
+        <AlertDialogTrigger asChild><Button>{{ label }}</Button></AlertDialogTrigger>
+        <AlertDialogPortal v-if="!disabled">
+            <AlertDialogOverlay class="bg-light-0 dark:bg-dark-0 opacity-70 fixed inset-0 z-40" />
+            <AlertDialogContent class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 p-6 z-50 text-light-100 dark:text-dark-100">
+                <AlertDialogTitle v-if="!!title" class="text-3xl font-light relative -top-2">{{ title }}</AlertDialogTitle>
+                <AlertDialogDescription v-if="!!description" class="text-base pb-2">{{ description }}</AlertDialogDescription>
+                <slot />
+            </AlertDialogContent>
+        </AlertDialogPortal>
+    </AlertDialogRoot>
+</template>
+
+<script setup lang="ts">
+const { label, title, description, priority = false, disabled = false, iconClose = true } = defineProps<{
+    label?: string
+    title?: string
+    description?: string
+    priority?: boolean
+    disabled?: boolean
+    iconClose?: boolean
+}>();
+</script>
\ No newline at end of file
diff --git a/components/HoverCard.vue b/components/HoverCard.vue
index 3bb7010..0ad3819 100644
--- a/components/HoverCard.vue
+++ b/components/HoverCard.vue
@@ -3,7 +3,7 @@
         <HoverCardTrigger class="inline-block cursor-help outline-none" asChild>
             <slot></slot>
         </HoverCardTrigger>
-        <HoverCardPortal :disabled="disabled">
+        <HoverCardPortal v-if="!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" />
diff --git a/components/Switch.vue b/components/Switch.vue
index 246cd02..bfc6e4b 100644
--- a/components/Switch.vue
+++ b/components/Switch.vue
@@ -1,16 +1,14 @@
 <template>
-    <div>
-        <Label class="flex justify-center items-center my-2">{{ label }}
-            <SwitchRoot v-model:checked="model" :disabled="disabled"
-                class="mx-3 w-12 h-6 select-none transition-colors border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
-            data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35  hover:border-light-50 dark:hover:border-dark-50  focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
-            data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20">
-                <SwitchThumb
-                    class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 data-[state=checked]:translate-x-[26px]
-                    data-[disabled]:bg-light-30 dark:data-[disabled]:bg-dark-30 data-[disabled]:border-light-30 dark:data-[disabled]:border-dark-30" />
-            </SwitchRoot>
-        </Label>
-    </div>
+    <Label class="flex justify-center items-center my-2">{{ label }}
+        <SwitchRoot v-model:checked="model" :disabled="disabled"
+            class="mx-3 w-12 h-6 select-none transition-colors border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
+        data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35  hover:border-light-50 dark:hover:border-dark-50  focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
+        data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20">
+            <SwitchThumb
+                class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 data-[state=checked]:translate-x-[26px]
+                data-[disabled]:bg-light-30 dark:data-[disabled]:bg-dark-30 data-[disabled]:border-light-30 dark:data-[disabled]:border-dark-30" />
+        </SwitchRoot>
+    </Label>
 </template>
 
 <script setup lang="ts">
diff --git a/components/todo/Dialog.vue b/components/todo/Dialog.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/nuxt.config.ts b/nuxt.config.ts
index cce3b6b..c282fd6 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -33,12 +33,17 @@ export default defineNuxtConfig({
               from: { opacity: '0', transform: 'translateX(-2px)' },
               to: { opacity: '1', transform: 'translateX(0)' },
             },
+            contentShow: {
+              from: { opacity: '0', transform: 'translate(-50%, -48%) scale(0.96)' },
+              to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
+            },
           },
           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)',
+            contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
           },
         },
         colors: {
diff --git a/pages/index.vue b/pages/index.vue
index 7e8c639..efdadb6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -20,6 +20,13 @@ const open = ref(false), username = ref(""), price = ref(750), disabled = ref(fa
                     <div>Test de HoverCard</div>
                 </template>
             </HoverCard>
+            <Dialog label="Open" title="Titre" description="Description courte de la popup">
+                <div class="flex flex-col items-start">
+                    <Separator decorative orientation="horizontal" class="h-px w-96 my-2 bg-light-30 dark:bg-dark-30" />
+                    <span>Contenu special</span>
+                    <Switch label="Theme sombre ?" />
+                </div>
+            </Dialog>
         </div>
     </div>
 </template>
\ No newline at end of file