Peaceultime/obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Loading to Avatar, add timer progress to Toast

Browse Source
This commit is contained in:
Peaceultime
2024-10-31 14:23:44 +01:00
parent bd32d176b1
commit 8a19448a38
5 changed files with 40 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
pages/index.vue
View File

@@ -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>