Progressing on the basic components implementation

components/Switch.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <Label class="flex justify-center items-center my-2">{{ label }}
+            <SwitchRoot v-model:checked="model" :disabled="disabled" class="ms-3 w-12 h-6 select-none border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 dark:hover:border-dark-35">
+                <SwitchThumb class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-70 dark:bg-dark-70 border border-light-50 dark:border-dark-50 data-[state=checked]:translate-x-[26px]"/>
+            </SwitchRoot>
+        </Label>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { label, disabled } = defineProps<{
+    label: string
+    disabled?: boolean
+}>();
+const model = defineModel<boolean>();
+</script>

components/TextInput.vue

@@ -0,0 +1,15 @@
+<template>
+    <Label class="px-4">{{ label }}
+        <input :placeholder="placeholder" :disabled="disabled" class="ms-3 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 border border-light-35 dark:border-dark-35" :type="type" v-model="model">
+    </Label>
+</template>
+
+<script setup lang="ts">
+const { type = 'text', label, disabled = false, placeholder } = defineProps<{
+    type?: 'text' | 'password' | 'email' | 'tel' | 'url'
+    label: string
+    disabled?: boolean
+    placeholder?: string
+}>();
+const model = defineModel<string>();
+</script>

components/Toast.vue

@@ -1,33 +1,58 @@
 <template>
-    <ToastRoot class="ToastRoot bg-light-10 dark:bg-dark-10 p-3 border border-light-30 dark:border-dark-30" v-model:open="model">
+    <ToastRoot :duration="duration" class="ToastRoot grid grid-cols-8 bg-light-10 dark:bg-dark-10 p-3 border border-light-30 dark:border-dark-30" v-model:open="model">
-        <ToastTitle asChild><slot name="title"></slot></ToastTitle>
+        <ToastTitle class="font-semibold text-xl col-span-7 text-light-70 dark:text-dark-70" asChild><h4>{{ title }}</h4></ToastTitle>
-        <ToastDescription asChild><slot></slot></ToastDescription>
+        <ToastClose v-if="closeable" aria-label="Close" class="text-2xl -translate-y-1/2 translate-x-1/2 cursor-pointer"><span aria-hidden>×</span></ToastClose>
-        <ToastClose v-if="closeable"><button>×</button></ToastClose>
+        <ToastDescription class="text-md col-span-8 text-light-70 dark:text-dark-70" asChild><span>{{ content }}</span></ToastDescription>
     </ToastRoot>
 
-    <ToastViewport class="fixed bottom-0 right-0 flex flex-col p-6 gap-2 max-w-96 z-50 outline-none" />
+    <ToastViewport class="fixed bottom-0 right-0 flex flex-col p-6 gap-2 max-w-[512px] z-50 outline-none min-w-72" />
 </template>
 
 <script setup lang="ts">
 const model = defineModel<boolean>();
 
-const { closeable = true } = defineProps<{
+const { closeable = true, duration, title, content } = defineProps<{
     closeable?: boolean
+    duration?: number
+    title: string
+    content: string
 }>();
 </script>
 
 <style>
+.ToastRoot[data-state='open'] {
+  animation: slideIn .15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ToastRoot[data-state='closed'] {
+  animation: hide .1s ease-in;
+}
 .ToastRoot[data-swipe='move'] {
   transform: translateX(var(--radix-toast-swipe-move-x));
 }
 .ToastRoot[data-swipe='cancel'] {
   transform: translateX(0);
-  transition: transform 200ms ease-out;
+  transition: transform .2s ease-out;
 }
 .ToastRoot[data-swipe='end'] {
-  animation: swipeRight 100ms ease-out;
+  animation: swipeRight .1s ease-out;
 }
 
+@keyframes hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes slideIn {
+  from {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+  }
+  to {
+    transform: translateX(0);
+  }
+}
 @keyframes swipeRight {
   from {
     transform: translateX(var(--radix-toast-swipe-end-x));

nuxt.config.ts

@@ -14,7 +14,7 @@ export default defineNuxtConfig({
       theme: {
         extend: {
           boxShadow: {
-            raw: '0 0 0 4px var(--tw-shadow-color)'
+            raw: '0 0 0 3px var(--tw-shadow-color)'
           },
         },
         colors: {

pages/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const open = ref(false);
+const open = ref(false), username = ref("");
 </script>
 
 <template>
@@ -7,12 +7,11 @@ const open = ref(false);
         <Title>Accueil</Title>
     </Head>
     <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
-        <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">
+        <div class="w-1/2 flex flex-1 flex-col justify-center items-center">
-            <Tooltip message="Ajouter" side="top"><button @click="open = !open">Test</button></Tooltip>
+            <TextInput label="Saisir un pseudonyme" v-model="username" />
-            <Toast v-model="open">
+            <Separator decorative orientation="horizontal" class="h-px w-96 my-2 bg-light-30 dark:bg-dark-30" />
-                <template v-slot:title><h4>Titre</h4></template>
+            <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>
-                <span>Test</span>
+            <Toast v-model="open" :title="`Bienvenue ${username}`" content="Vous êtes maintenant connecté" :duration="5000" />
-            </Toast>
         </div>
     </div>
 </template>