fix: naming & add promise type to button #discussion_r909384722

src/lib/components/alert.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
-    import type { Func } from '../stores/notifications';
+    import type { Buttons } from '../stores/notifications';
 
     export let dismissible = false;
     export let type: '' | 'info' | 'success' | 'warning' | 'danger' = 'info';
-    export let func: Func[] = [];
+    export let buttons: Buttons[] = [];
 
     const dispatch = createEventDispatcher();
 </script>
@@ -25,11 +25,11 @@
                 <slot name="title" />
             </h6>
             <p class="message"><slot /></p>
-            {#if func?.length}
+            {#if buttons?.length}
                 <div class="buttons u-flex">
-                    {#each func as f}
-                        <button class="button is-text" on:click={f.method}>
-                            <span class="text">{f.name}</span>
+                    {#each buttons as button}
+                        <button class="button is-text" on:click={button.method}>
+                            <span class="text">{button.name}</span>
                         </button>
                     {/each}
                 </div>

src/lib/layout/notification.svelte

@@ -4,7 +4,7 @@
 
     export let type: Notification['type'] = 'info';
     export let title: Notification['title'];
-    export let func: Notification['func'];
+    export let buttons: Notification['buttons'];
 
     let icon: string;
     switch (type) {
@@ -44,11 +44,11 @@
         {/if}
         <p><slot /></p>
     </div>
-    {#if func}
+    {#if buttons}
         <div class="buttons u-flex">
-            {#each func as f}
-                <button class="button is-text is-small" on:click={f.method}>
-                    <span class="text">{f.name}</span>
+            {#each buttons as button}
+                <button class="button is-text is-small" on:click={button.method}>
+                    <span class="text">{button.name}</span>
                 </button>
             {/each}
         </div>

src/lib/layout/notifications.svelte

@@ -11,7 +11,7 @@
                     type={notification.type}
                     title={notification.title}
                     on:dismiss={() => dismissNotification(notification.id)}
-                    func={notification?.func}>
+                    buttons={notification?.buttons}>
                     {notification.message}
                 </Notification>
             {/each}

src/lib/stores/notifications.ts

@@ -7,11 +7,11 @@ export type Notification = {
     timeout?: number;
     message: string;
     title?: string;
-    func?: Func[];
+    buttons?: Buttons[];
 };
 
-export type Func = {
-    method: () => void; //TODO Check if promise is needed rather tha () => void
+export type Buttons = {
+    method: () => void | Promise<void>;
     name: string;
 };