From fc461b4d325e48fb7ce3eca17ad47bc818bb686f Mon Sep 17 00:00:00 2001
From: Jeffrey Fu <fujeffrey1@gmail.com>
Date: Sat, 7 Dec 2019 12:19:56 -0500
Subject: [PATCH 1/2] variable width using css custom properties

---
 src/Notifications.svelte | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/Notifications.svelte b/src/Notifications.svelte
index cba2c3e..b357f5d 100644
--- a/src/Notifications.svelte
+++ b/src/Notifications.svelte
@@ -27,7 +27,7 @@
 	:global(.toasts) > .toast {
 		position: relative;
 		margin: 10px;
-		min-width: 40vw;
+		min-width: var(--width);
 		position: relative;
 		animation: animate-in 350ms forwards;
 		color: #fff;
@@ -75,7 +75,7 @@
 			transform: scale(1.15) translateY(20px);
 		}
 		100% { 
-			width: 40vw;
+			width: var(--width);
 			opacity: 1; 
 			transform: scale(1) translateY(0);
 		}
@@ -83,7 +83,7 @@
 	
 	@keyframes shrink { 
 		0% { 
-			width: 40vw; 
+			width: var(--width); 
 		}
 		100% { 
 			width: 0; 
@@ -104,7 +104,15 @@
 		default: '#aaaaaa'
   }
 
-  export let timeout = 3000
+  export let options = {
+      timeout: 3000,
+      width: '40vw'
+  }
+
+  onMount(() => {
+      const toasts = document.querySelector('.toasts');
+      toasts.style.setProperty('--width', options.width);
+  });
 
 	let count = 0
 	let toasts = [ ]
@@ -135,7 +143,7 @@
 			id: count,
 			msg, 
 			background, 
-			timeout: to || timeout,
+			timeout: to || options.timeout,
 			width: '100%'
 		}, ...toasts];
 		count = count + 1

From 8648849b3b33bb04edab0b0afe73fb84f38b48ef Mon Sep 17 00:00:00 2001
From: Jeffrey Fu <fujeffrey1@gmail.com>
Date: Sun, 8 Dec 2019 12:09:10 -0500
Subject: [PATCH 2/2] removed querySelector. choose what options are passed in

---
 src/Notifications.svelte | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/Notifications.svelte b/src/Notifications.svelte
index b357f5d..f4f0353 100644
--- a/src/Notifications.svelte
+++ b/src/Notifications.svelte
@@ -1,4 +1,4 @@
-<ul class="toasts">
+<ul class="toasts" bind:this={toastsElement}>
 	{#each toasts as toast (toast.id)}
 		<li class="toast" style="background: {toast.background};" out:animateOut>
 			<div class="content">
@@ -104,20 +104,24 @@
 		default: '#aaaaaa'
   }
 
-  export let options = {
+    export let options;
+
+    const DEFAULT_OPTIONS = {
       timeout: 3000,
       width: '40vw'
   }
 
-  onMount(() => {
-      const toasts = document.querySelector('.toasts');
-      toasts.style.setProperty('--width', options.width);
-  });
+    $: o = Object.assign({}, DEFAULT_OPTIONS, options || {});
 
 	let count = 0
-	let toasts = [ ]
+    let toasts = [ ]
+    let toastsElement;
   let unsubscribe
 
+  onMount(() => {
+      toastsElement.style.setProperty('--width', o.width);
+  });
+
 	function animateOut(node, { delay = 0, duration = 300 }) {
 		function vhTOpx (value) {
 			var w = window,
@@ -143,7 +147,7 @@
 			id: count,
 			msg, 
 			background, 
-			timeout: to || options.timeout,
+			timeout: to || o.timeout,
 			width: '100%'
 		}, ...toasts];
 		count = count + 1