@@ -106,6 +106,73 @@ Or if you prefer to go old-school javascript and a CDN:
106
106
</head >
107
107
```
108
108
109
+ ### New from ` v0.4 `
110
+
111
+ #### Supporting Multiple Toast Containers
112
+
113
+ It's now easy to send toasts to different container targets within your app. For example:
114
+
115
+ ``` html
116
+ <script >
117
+ import { SvelteToast , toast } from ' @zerodevx/svelte-toast'
118
+
119
+ // Sends a toast to default toast container
120
+ toast .push (' Yo!' )
121
+
122
+ // Sends a toast to "new" toast container
123
+ toast .push (' Hey!' , { target: ' new' })
124
+ </script >
125
+
126
+ <style >
127
+ .wrap {
128
+ --toastContainerTop : 0.5rem ;
129
+ --toastContainerRight : 2rem ;
130
+ --toastContainerBottom : auto ;
131
+ --toastContainerLeft : 2rem ;
132
+ --toastWidth : 100% ;
133
+ font-size : 0.875rem ;
134
+ ...
135
+ }
136
+ </style >
137
+
138
+ <!-- Default toast container -->
139
+ <SvelteToast />
140
+
141
+ <!-- Another toast container -->
142
+ <div class =" wrap" >
143
+ <!-- Declare container with a unique `target` name -->
144
+ <SvelteToast target =" new" options ={{ duration: 8000, intro: { y: -64 } }} />
145
+ </div >
146
+ ```
147
+
148
+ #### Removing Multiple Toasts
149
+
150
+ ` pop() ` now accepts a filter function.
151
+
152
+ ``` js
153
+ // Remove all toasts from "new" container
154
+ toast .pop (i => i .target !== ' new' )
155
+
156
+ // Or remove ALL active toasts from ALL containers
157
+ toast .pop (0 )
158
+ ```
159
+
160
+ #### Accepts Object as First Param
161
+
162
+ ` push() ` and ` set() ` can also take an object as its first parameter.
163
+
164
+ ``` js
165
+ let id = toast .push (' Yo!' , { duration: 2000 })
166
+
167
+ // is semantically equivalent to
168
+ id = toast .push ({ msg: ' Yo!' , duration: 2000 })
169
+
170
+ toast .set (id, { msg: ' Waddup!' })
171
+
172
+ // is semantically equivalent to
173
+ toast .set ({ id, msg: ' Waddup!' })
174
+ ```
175
+
109
176
## Theming
110
177
111
178
In general, use CSS variables - the following (self-explanatory) vars are exposed:
@@ -191,7 +258,7 @@ export const failure = m => toast.push(m, { theme: { ... } })
191
258
Then simply import these stubs in your consuming component:
192
259
193
260
``` js
194
- import { success , warning , failure } from ' ./my-theme`
261
+ import { success , warning , failure } from ' ./my-theme'
195
262
196
263
// do something, then
197
264
success (' It works!' )
@@ -261,11 +328,22 @@ toast.pop(id)
261
328
toast .set (id, { options })
262
329
```
263
330
264
- ## License
331
+ ## Development
265
332
266
- ISC
333
+ Standard Github [ contributing workflow] ( https://gist.github.com/Chaser324/ce0505fbed06b947d962 ) applies.
334
+
335
+ ### Tests
267
336
268
- ## To-do
337
+ Testing is through [ Cypress] ( https://www.cypress.io/ ) . To run the tests headlessly:
338
+
339
+ ```
340
+ $ npm run test
341
+ ```
269
342
270
- - [ ] Definitely improve the docs
271
- - [ ] Create some option presets
343
+ ## Changelog
344
+
345
+ Please refer to the [ releases] ( https://github.com/zerodevx/svelte-toast/releases ) page.
346
+
347
+ ## License
348
+
349
+ ISC
0 commit comments