budibase/packages/bbui/src/Stores/Notifications.svench.svx

<script>
    import { flip } from 'svelte/animate';
    import { fly } from "svelte/transition"
    import { View } from "svench";
    import { notifications } from "./notifications";

    export let themes = {
        danger: "#E26D69",
        success: "#84C991",
        warning: "#f0ad4e",
        info: "#5bc0de",
        default: "#aaaaaa",
    }
</script>

## Notification Store

This custom can be used to display toast messages. It has 5 different methods: `send`, `danger`, `warning`, `success`, `info`.


<View name="danger">
  <button on:click={() => notifications.error('This is a danger!')}>Danger</button>
</View>
<View name="warning">
  <button on:click={() => notifications.warning('This is a warning!')}>Warning</button>
</View>
<View name="success">
  <button on:click={() => notifications.success('This is a success!')}>Success</button>
</View>
<View name="info">
  <button on:click={() => notifications.info('This is an info toast!')}>Info</button>
</View>
  
<div class="notifications">
    {#each $notifications as notification (notification.id)}
        <div
        animate:flip
        class="toast"
        style="background: {themes[notification.type]};"
        transition:fly={{ y: -30 }}>
        <div class="content">{notification.message}</div>
        {#if notification.icon}<i class={notification.icon} />{/if}
        </div>
    {/each}
</div>

<style>
    .notifications {
        position: fixed;
        top: 10px;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding: 0;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        pointer-events: none;
    }

    .toast {
        flex: 0 0 auto;
        margin-bottom: 10px;
        border-radius: var(--border-radius-s);
        /* The toasts now support being auto sized, so this static width could be removed */
        width: 40vw;
    }

    .content {
        padding: 10px;
        display: block;
        color: white;
        font-weight: 500;
    }
</style>