add positions, update toaster to be more expansive

.changeset/shaggy-roses-attack.md

@@ -1,5 +1,5 @@
 ---
-'svelte-ux': minor
+'svelte-ux': patch
 ---
 
 Add toast components

packages/svelte-ux/src/lib/components/Toast.svelte

@@ -1,9 +1,26 @@
 <script lang="ts">
   import toastStore from '$lib/stores/toastStore.js';
   import Notification from './Notification.svelte';
+
+  import {cls} from '../utils/styles.js';
+
+  type Placement = 'top' | 'top-right' | 'right' | 'bottom-right' |
+                   'bottom' | 'bottom-left' | 'left' | 'top-left';
+
+  const DEFAULT_PLACEMENT: Placement = 'bottom';
+  export let placement: Placement = DEFAULT_PLACEMENT;
+
+  const isOnTop = placement.includes('top');
+  const isOnBottom = placement.includes('bottom');
+  const isOnLeft = placement.includes('left');
+  const isOnRight = placement.includes('right');
 </script>
 
-<div class="fixed bottom-0 left-1/2 translate-x-[-50%] z-50 gap-y-4">
+<div class={cls(
+  'Toast fixed z-50',
+  isOnTop ? 'top-0' : isOnBottom ? 'bottom-0' : 'translate-y-[-50%] top-1/2',
+  isOnLeft ? 'left-0' : isOnRight ? 'right-0'  : 'translate-x-[-50%] left-1/2'
+)}>
   {#each $toastStore as toast}
     <div class="mt-4">
       <Notification open={true} closeIcon>

packages/svelte-ux/src/lib/stores/toastStore.ts

@@ -1,21 +1,35 @@
+import type { IconInput } from '$lib/utils/icons.js';
+import type { SvelteComponent } from 'svelte';
 import { get, writable } from 'svelte/store';
 
 const DEFAULT_TOAST_TIME_IN_MS = 3000;
 
-export type Toast = {
+type ToastActionType = {
+  children?: string | SvelteComponent,
+  classes?: string,
+  onClick: () => {}
+}
+
+type ToastContents = {
   text: string;
+  actions?: ToastActionType[];
+  icon?: IconInput;
+  variant?: string // TODO:
+}
+
+type Toast = {
   timeAdded: Date;
-};
+} & ToastContents
 
 /**
  * Create a global store to save information on toast components
  */
 const toastStore = writable<Toast[]>([]);
 
-export function addToast(text: string, durationInMS = DEFAULT_TOAST_TIME_IN_MS) {
+export function addToast(toastConents: ToastContents, durationInMS = DEFAULT_TOAST_TIME_IN_MS) {
   const timeAdded = new Date();
   const toast: Toast = {
-    text,
+    ...toastConents,
     timeAdded,
   };
   toastStore.set([...get(toastStore), toast]);

packages/svelte-ux/src/routes/docs/components/Toast/+page.svelte

@@ -4,17 +4,19 @@
   import { addToast } from '$lib/stores/toastStore.js';
 
   function addSimpleToast() {
-    addToast('This is a simple toast!');
+    addToast({text: 'This is a simple toast'});
   }
 
   function addLongerToast() {
-    addToast('This is a longer toast!', 10000);
+    addToast({text: 'This is a longer Toast'}, 300000);
   }
 </script>
 
 <h1>Examples</h1>
 
-<Toast />
+<Toast
+  placement='top'
+/>
 <h2>Add Simple Toast</h2>
 <Button variant="fill-outline" color="primary" on:click={addSimpleToast}>Click Me</Button>