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

8
components/Avatar.vue
View File

@@ -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>
@@ -16,5 +17,6 @@ const { src, icon, text } = defineProps<{
src: string
icon?: string
text?: string
}>();
}>();
const loading = ref(true);
</script>

2
components/Collapsible.vue
View File

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

10
components/Loading.vue
View File

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

18
components/Toast.vue
View File

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