35 lines
918 B
Vue
35 lines
918 B
Vue
<script setup lang='ts'>
|
|
const show = ref(false)
|
|
const icon = ref<string | undefined>()
|
|
const text = ref<string | undefined>()
|
|
const classes = ref<string | undefined>()
|
|
|
|
provideNotificationFn((data) => {
|
|
text.value = data.message
|
|
icon.value = data.icon
|
|
classes.value = data.classes ?? 'text-green'
|
|
show.value = true
|
|
setTimeout(() => {
|
|
show.value = false
|
|
}, data.duration ?? 1500)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
fixed left-0 right-0 top-0 z-999 text-center
|
|
:class="show ? '' : 'pointer-events-none overflow-hidden'"
|
|
>
|
|
<div
|
|
border="~ base"
|
|
flex="~ inline gap2"
|
|
m-3 inline-block items-center rounded px-4 py-1 transition-all duration-300 bg-base
|
|
:style="show ? {} : { transform: 'translateY(-300%)' }"
|
|
:class="[show ? 'shadow' : 'shadow-none', classes]"
|
|
>
|
|
<div v-if="icon" :class="icon" />
|
|
<div>{{ text }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|