Add Collapsible, Avatar and Loading

components/Avatar.vue

@@ -0,0 +1,20 @@
+<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>
+            <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">
+            <Icon v-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
+}>(); 
+</script>

components/Button.vue

@@ -1,6 +1,13 @@
 <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">
+    <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}" >
         <slot />
     </button>
 </template>
+
+<script setup lang="ts">
+const { icon = false } = defineProps<{
+    icon?: boolean
+}>();
+</script>

components/Collapsible.vue

@@ -0,0 +1,46 @@
+<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.3s_ease-out] data-[state=open]:animate-[collapseOpen_0.3s_ease-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

@@ -0,0 +1,3 @@
+<template>
+    <span class="w-6 h-6 border-4 rounded-full border-light-35 dark:border-dark-35 after:block after:relative after:-top-1 after:-left-1 after:w-6 after:h-6 after:rounded-full after:border-4 after:border-transparent after:border-t-accent-purple after:animate-spin"></span>
+</template>

pages/index.vue

@@ -8,16 +8,24 @@ const open = ref(false), username = ref(""), price = ref(750), disabled = ref(fa
     </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">
-            <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" />
+            <Loading />
+            <Collapsible label="Options">
+                <div class="flex flex-col">
+                    <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" />
+                </div>
+            </Collapsible>
             <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>
+                    <div>
+                        <Avatar src="public/logo.svg" icon="radix-icons:question-mark"/>
+                        <span class="text-xl font-light px-4">Dice[any]</span>
+                    </div>
                 </template>
             </HoverCard>
             <Dialog label="Open" title="Titre" description="Description courte de la popup">