mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-16 21:18:05 +01:00
edc1bd677b
* wip: improve types * feat: improve types * Apply suggestions from code review Co-authored-by: Sylvain Marroufin <marroufin.sylvain@gmail.com> * chore: update * chore: enable ci typecheck * chore: fix Co-authored-by: Sylvain Marroufin <marroufin.sylvain@gmail.com>
31 lines
955 B
Vue
31 lines
955 B
Vue
<template>
|
|
<div class="fixed bottom-0 right-0 flex flex-col justify-end w-full z-[55] sm:w-96">
|
|
<div v-if="notifications.length" class="px-4 py-6 space-y-3 overflow-y-auto sm:px-6">
|
|
<div
|
|
v-for="notification of notifications"
|
|
:key="notification.id"
|
|
>
|
|
<Notification
|
|
v-bind="notification"
|
|
:class="notification.click && 'cursor-pointer'"
|
|
@click="notification.click && notification.click(notification)"
|
|
@close="$toast.removeNotification(notification.id)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ToastNotification } from '../../types'
|
|
import Notification from './Notification.vue'
|
|
import { useNuxtApp, useState } from '#imports'
|
|
|
|
const { $toast } = useNuxtApp()
|
|
const notifications = useState<ToastNotification[]>('notifications', () => [])
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default { name: 'UNotifications' }
|
|
</script>
|