Added option for toast with title (#8)

Add new feature toast title

Author: moalamri

README.md

@@ -158,7 +158,8 @@ const defaults = {
   progress: 0,          // current progress
   reversed: false,      // insert new toast to bottom of stack
   intro: { x: 256 },    // toast intro fly animation settings
-  theme: {}             // css var overrides
+  theme: {},            // css var overrides
+  title: null           // insert a title for the toast (optional)
 }
 ```
 

src/SvelteToast.svelte

@@ -12,7 +12,8 @@ const defaults = {
   progress: 0,
   reversed: false,
   intro: { x: 256 },
-  theme: {}
+  theme: {},
+  title: null
 }
 toast._opts(defaults)
 $: toast._opts(options)

src/ToastItem.svelte

@@ -35,6 +35,9 @@ $: if (prevProgress !== item.progress) {
   will-change: transform,opacity;
   -webkit-tap-highlight-color: transparent;
 }
+._toastTitle {
+  font-weight: bold;
+}
 ._toastMsg {
   font: var(--toastFont);
   flex: 1 1 0%;
@@ -75,7 +78,12 @@ $: if (prevProgress !== item.progress) {
 </style>
 
 <div class="_toastItem">
-  <div class="_toastMsg">{item.msg}</div>
+  <div class="_toastMsg">
+    {#if item.title}
+    <div class="_toastTitle">{item.title}</div>
+    {/if}
+    {item.msg}
+  </div>
 
   {#if item.dismissable}
   <div class="_toastBtn" role="button" tabindex="-1" on:click={() => toast.pop(item.id)}>✕</div>