components/Avatar.vue

@@ -1,22 +0,0 @@
-<template>
-    <AvatarRoot class="inline-flex h-12 w-12 select-none items-center justify-center overflow-hidden align-middle">
-        <AvatarImage class="h-full w-full object-cover" :src="src" asChild @loading-status-change="(status) => loading = status === 'loading'">
-            <img :src="src" />
-        </AvatarImage>
-        <AvatarFallback :delay-ms="0" class="text-light-100 dark:text-dark-100 leading-1 flex h-full w-full items-center justify-center bg-light-25 dark:bg-dark-25 font-medium">
-            <Loading v-if="loading" />
-            <Icon v-else-if="!!icon" :icon="icon" class="w-8 h-8" />
-            <span v-else-if="!!text">{{ text }}</span>
-        </AvatarFallback>
-    </AvatarRoot>
-</template>
-
-<script setup lang="ts">
-import { Icon } from '@iconify/vue/dist/iconify.js';
-const { src, icon, text } = defineProps<{
-    src: string
-    icon?: string
-    text?: string
-}>();
-const loading = ref(true);
-</script>

components/Button.vue

@@ -1,13 +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 items-center justify-center bg-light-25 dark:bg-dark-25 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"
-    :class="{'p-1': icon, 'h-[35px] px-[15px]': !icon}" >
+    <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>
-
-<script setup lang="ts">
-const { icon = false } = defineProps<{
-    icon?: boolean
-}>();
-</script>

components/Collapsible.vue

@@ -1,46 +0,0 @@
-<template>
-    <CollapsibleRoot v-model:open="model" :disabled="disabled">
-        <div class="flex flex-row justify-center items-center">
-            <span v-if="!!label">{{ label }}</span>
-            <CollapsibleTrigger class="ms-4" asChild>
-                <Button icon :disabled="disabled">
-                    <Icon v-if="model" icon="radix-icons:cross-2" class="h-4 w-4" />
-                    <Icon v-else icon="radix-icons:row-spacing" class="h-4 w-4" />
-                </Button>
-            </CollapsibleTrigger>
-        </div>
-        <slot name="alwaysVisible"></slot>
-        <CollapsibleContent class="overflow-hidden data-[state=closed]:animate-[collapseClose_0.2s_ease-in-out] data-[state=open]:animate-[collapseOpen_0.2s_ease-in-out]">
-            <slot></slot>
-        </CollapsibleContent>
-    </CollapsibleRoot>
-</template>
-
-<script setup lang="ts">
-import { Icon } from '@iconify/vue/dist/iconify.js';
-const { label, disabled = false } = defineProps<{
-    label?: string
-    disabled?: boolean
-}>();
-const model = defineModel<boolean>();
-</script>
-
-<style>
-@keyframes collapseOpen {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--radix-collapsible-content-height);
-  }
-}
-
-@keyframes collapseClose {
-  from {
-    height: var(--radix-collapsible-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
-</style>

components/Loading.vue

@@ -1,9 +0,0 @@
-<template>
-    <span :class="{'w-6 h-6 border-4 after:-top-[4px] after:-left-[4px] after:w-6 after:h-6 after:border-4': size === 'normal', 'w-4 h-4 border-2 after:-top-[2px] after:-left-[2px] after:w-4 after:h-4 after:border-2': size === 'small', 'w-12 h-12 border-[6px] after:-top-[6px] after:-left-[6px] after:w-12 after:h-12 after:border-[6px]': size === 'large'}" class="rounded-full border-light-35 dark:border-dark-35 after:block after:relative after:rounded-full after:border-transparent after:border-t-accent-purple after:animate-spin"></span>
-</template>
-
-<script setup lang="ts">
-const { size = 'normal' } = defineProps<{
-    size?: 'small' | 'normal' | 'large'
-}>();
-</script>

components/Toast.vue

@@ -1,11 +1,8 @@
 <template>
-    <ToastRoot :duration="duration" class="ToastRoot bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30" v-model:open="model">
-        <div class="grid grid-cols-8 p-3">
-          <ToastTitle v-if="title" class="font-semibold text-xl col-span-7 text-light-70 dark:text-dark-70" asChild><h4>{{ title }}</h4></ToastTitle>
+    <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 class="font-semibold text-xl col-span-7 text-light-70 dark:text-dark-70" asChild><h4>{{ title }}</h4></ToastTitle>
         <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>
-          <ToastDescription v-if="content" class="text-md col-span-8 text-light-70 dark:text-dark-70" asChild><span>{{ content }}</span></ToastDescription>
-        </div>
-        <TimerProgress v-if="timer" shape="thin" :delay="duration" class="mb-0 mt-0 w-full" />
+        <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-[512px] z-50 outline-none min-w-72" />
@@ -14,12 +11,11 @@
 <script setup lang="ts">
 const model = defineModel<boolean>();
 
-const { closeable = true, duration, title, content, timer = true } = defineProps<{
+const { closeable = true, duration, title, content } = defineProps<{
     closeable?: boolean
     duration?: number
-    title?: string
-    content?: string
-    timer?: boolean
+    title: string
+    content: string
 }>();
 </script>
 

pages/index.vue

@@ -1,12 +1,5 @@
 <script setup lang="ts">
-const open = ref(false), username = ref(""), price = ref(750), disabled = ref(false), loading = ref(false);
-
-watch(loading, (value) => {
-    if(value)
-    {
-        setTimeout(() => { open.value = true; loading.value = false }, 1500);
-    }
-})
+const open = ref(false), username = ref(""), price = ref(750), disabled = ref(false);
 </script>
 
 <template>
@@ -14,22 +7,26 @@ watch(loading, (value) => {
         <Title>Accueil</Title>
     </Head>
     <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
-        <div class="w-1/2 flex flex-1 flex-col justify-center items-center gap-2">
-            <Collapsible label="Options">
-                <div class="flex flex-col">
+        <div class="w-1/2 flex flex-1 flex-col justify-center items-center">
             <Switch label="Test" v-model="disabled" />
             <SliderInput :disabled="disabled" :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25"
                 v-model="price" />
             <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" />
+            <HoverCard>
+                <span>Texte</span>
+                <template v-slot:content>
+                    <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>
-            </Collapsible>
-
-            <Button @click="() => loading = true">
-                <span v-if="!loading">Load data</span>
-                <Loading v-else size="small" />
-            </Button>
-            <Toast v-model="open" :duration="7500" content="Je suis un long texte pour tester comment ça se comporte aaaaaaaa aaaaaaaa aaaaaaaaa aaaaaaaa" :closeable="false"  />
+            </Dialog>
         </div>
     </div>
 </template>