src/lib/Notification/NotificationsProvider.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<script lang="ts">
  import { notifications } from './store';
  import EventNotification from './Notification.svelte';

  export let zIndex = 5000;

  const handleRemove = (id: string) => {
    notifications.remove(id);
  };
</script>

<div class="notifications-container" style="z-index: {zIndex};">
  {#each $notifications as notification (notification.id)}
    <EventNotification {notification} onRemove={() => handleRemove(notification.id)} />
  {/each}
</div>

<slot />

<style>
  .notifications-container {
    position: fixed;
    top: 0;
    right: 0;
    pointer-events: none;
  }

  .notifications-container :global(#notification-container) {
    pointer-events: auto;
  }
</style>