Add feature multiple toast container support

Author: zerodevx

src/SvelteToast.svelte

@@ -5,17 +5,12 @@ import { toast } from './stores.js'
 import ToastItem from './ToastItem.svelte'
 
 export let options = {}
-const defaults = {
-  duration: 4000,
-  dismissable: true,
-  initial: 1,
-  progress: 0,
-  reversed: false,
-  intro: { x: 256 },
-  theme: {}
-}
-toast._opts(defaults)
-$: toast._opts(options)
+export let target = 'default'
+
+$: toast._init(target, options)
+
+let items
+$: items = $toast.filter(i => i.target === target)
 
 const getCss = theme => Object.keys(theme).reduce((a, c) => `${a}${c}:${theme[c]};`, '')
 </script>
@@ -36,7 +31,7 @@ ul {
 </style>
 
 <ul>
-  {#each $toast as item (item.id)}
+  {#each items as item (item.id)}
   <li
     in:fly={item.intro}
     out:fade

src/stores.js

@@ -1,38 +1,50 @@
 import { writable } from 'svelte/store'
 
+const defaults = {
+  duration: 4000,
+  dismissable: true,
+  initial: 1,
+  progress: 0,
+  reversed: false,
+  intro: { x: 256 },
+  theme: {}
+}
+
 const createToast = () => {
   const { subscribe, update } = writable([])
   let count = 0
-  let defaults = {}
-  const _obj = obj => typeof obj === 'object'
+  const options = {}
+  const _obj = obj => obj instanceof Object
   const push = (msg, opts = {}) => {
-    opts = _obj(msg) ? { ...msg } : { ...opts, msg }
-    const entry = { ...defaults, ...opts, id: ++count, theme: { ...defaults.theme, ...opts.theme } }
+    const param = { target: 'default', ..._obj(msg) ? msg : { ...opts, msg } }
+    const conf = options[param.target] || {}
+    const entry = { ...defaults, ...conf, ...param, theme: { ...conf.theme, ...param.theme }, id: ++count }
     update(n => entry.reversed ? [...n, entry] : [entry, ...n])
     return count
   }
   const pop = id => {
     update(n => {
-      if (n.length === 0 || id === 0) return []
+      if (!n.length || id === 0) return []
+      if (_obj(id)) return n.filter(i => id(i))
       const target = id || Math.max(...n.map(i => i.id))
       return n.filter(i => i.id !== target)
     })
   }
   const set = (id, opts = {}) => {
-    opts = _obj(id) ? { ...id } : { ...opts, id }
+    const param = _obj(id) ? { ...id } : { ...opts, id }
     update(n => {
-      const idx = n.findIndex(i => i.id === opts.id)
+      const idx = n.findIndex(i => i.id === param.id)
       if (idx > -1) {
-        n[idx] = { ...n[idx], ...opts }
+        n[idx] = { ...n[idx], ...param }
       }
       return n
     })
   }
-  const _opts = (obj = {}) => {
-    defaults = { ...defaults, ...obj, theme: { ...defaults.theme, ...obj.theme } }
-    return defaults
+  const _init = (target = 'default', opts = {}) => {
+    options[target] = opts
+    return options
   }
-  return { subscribe, push, pop, set, _opts }
+  return { subscribe, push, pop, set, _init }
 }
 
 export const toast = createToast()