Add Loading to Avatar, add timer progress to Toast
This commit is contained in:
parent
bd32d176b1
commit
8a19448a38
|
|
@ -1,10 +1,11 @@
|
|||
<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>
|
||||
<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">
|
||||
<Icon v-if="!!icon" :icon="icon" class="w-8 h-8" />
|
||||
<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>
|
||||
|
|
@ -17,4 +18,5 @@ const { src, icon, text } = defineProps<{
|
|||
icon?: string
|
||||
text?: string
|
||||
}>();
|
||||
const loading = ref(true);
|
||||
</script>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
</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]">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
<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>
|
||||
<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>
|
||||
|
|
@ -1,8 +1,11 @@
|
|||
<template>
|
||||
<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>
|
||||
<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>
|
||||
<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 class="text-md col-span-8 text-light-70 dark:text-dark-70" asChild><span>{{ content }}</span></ToastDescription>
|
||||
<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" />
|
||||
</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" />
|
||||
|
|
@ -11,11 +14,12 @@
|
|||
<script setup lang="ts">
|
||||
const model = defineModel<boolean>();
|
||||
|
||||
const { closeable = true, duration, title, content } = defineProps<{
|
||||
const { closeable = true, duration, title, content, timer = true } = defineProps<{
|
||||
closeable?: boolean
|
||||
duration?: number
|
||||
title: string
|
||||
content: string
|
||||
title?: string
|
||||
content?: string
|
||||
timer?: boolean
|
||||
}>();
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
const open = ref(false), username = ref(""), price = ref(750), disabled = ref(false);
|
||||
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);
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -7,8 +14,7 @@ const open = ref(false), username = ref(""), price = ref(750), disabled = ref(fa
|
|||
<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">
|
||||
<Loading />
|
||||
<div class="w-1/2 flex flex-1 flex-col justify-center items-center gap-2">
|
||||
<Collapsible label="Options">
|
||||
<div class="flex flex-col">
|
||||
<Switch label="Test" v-model="disabled" />
|
||||
|
|
@ -18,23 +24,12 @@ const open = ref(false), username = ref(""), price = ref(750), disabled = ref(fa
|
|||
<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>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue