Skip to content

Commit 18f5874

Browse files
zerodevxzerodevx
committed
Update demo
1 parent c052526 commit 18f5874

File tree

4 files changed

+93
-65
lines changed

4 files changed

+93
-65
lines changed

‎docs/App.svelte

Lines changed: 73 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script>
2+
/*eslint no-useless-escape: "off"*/
23
import { tick } from 'svelte'
34
import { SvelteToast, toast } from '../src'
45
import Prism from './Prism.svelte'
@@ -24,7 +25,7 @@ const handleClick = (btn) => {
2425
const buttons = [
2526
{
2627
name: 'DEFAULT',
27-
code: `toast.push('Hello world!')`, // eslint-disable-line quotes
28+
code: `toast.push('Hello world!')`,
2829
run: () => {
2930
toast.push('Hello world!')
3031
}
@@ -34,12 +35,12 @@ const buttons = [
3435
code: `toast.push('Success!', {
3536
theme: {
3637
'--toastBackground': '#48BB78',
37-
'--toastProgressBackground': '#2F855A'
38+
'--toastBarBackground': '#2F855A'
3839
}
3940
})`,
4041
run: () => {
4142
toast.push('Success!', {
42-
theme: { '--toastBackground': '#48BB78', '--toastProgressBackground': '#2F855A' }
43+
theme: { '--toastBackground': '#48BB78', '--toastBarBackground': '#2F855A' }
4344
})
4445
}
4546
},
@@ -48,12 +49,12 @@ const buttons = [
4849
code: `toast.push('Danger!', {
4950
theme: {
5051
'--toastBackground': '#F56565',
51-
'--toastProgressBackground': '#C53030'
52+
'--toastBarBackground': '#C53030'
5253
}
5354
})`,
5455
run: () => {
5556
toast.push('Danger!', {
56-
theme: { '--toastBackground': '#F56565', '--toastProgressBackground': '#C53030' }
57+
theme: { '--toastBackground': '#F56565', '--toastBarBackground': '#C53030' }
5758
})
5859
}
5960
},
@@ -62,14 +63,12 @@ const buttons = [
6263
code: `toast.push(\`<strong>You won the jackpot!</strong><br>
6364
Click <a href="#" target="_blank">here</a> for details! 😛\`)`,
6465
run: () => {
65-
toast.push(
66-
'<strong>You won the jackpot!</strong><br>Click <a href="#" target="_blank">here</a> for details! 😛'
67-
)
66+
toast.push('<strong>You won the jackpot!</strong><br>Click <a href="#" target="_blank">here</a> for details! 😛')
6867
}
6968
},
7069
{
7170
name: 'LONG DURATION',
72-
code: `toast.push('Watching the paint dry...', { duration: 20000 })`, // eslint-disable-line quotes
71+
code: `toast.push('Watching the paint dry...', { duration: 20000 })`,
7372
run: () => {
7473
toast.push('Watching the paint dry...', { duration: 20000 })
7574
}
@@ -150,15 +149,15 @@ toast.set(id, { next: 1 })`,
150149
name: 'CHANGE DEFAULT COLORS',
151150
code: `<style>
152151
:root {
153-
--toastBackground: rgba(255,255,255,0.95);
152+
--toastBackground: rgba(245, 208, 254, 0.95);
154153
--toastColor: #424242;
155-
--toastProgressBackground: aquamarine;
154+
--toastBarBackground: fuchsia;
156155
}
157156
</style>
158157
159158
<script>
160159
toast.push('Changed some colors')
161-
<\/script>`, // eslint-disable-line no-useless-escape
160+
<\/script>`,
162161
run: () => {
163162
colors = true
164163
toast.push('Changed some colors')
@@ -179,7 +178,7 @@ toast.set(id, { next: 1 })`,
179178
180179
<script>
181180
toast.push('Bottoms up!')
182-
<\/script>`, // eslint-disable-line no-useless-escape
181+
<\/script>`,
183182
run: async () => {
184183
bottom = true
185184
options = { reversed: true, intro: { y: 128 } }
@@ -200,30 +199,36 @@ toast.set(id, { next: 1 })`,
200199
},
201200
{
202201
name: 'CREATE NEW TOAST CONTAINER',
203-
code: `<style>
202+
code: `<div class="wrap">
203+
<SvelteToast target="new" options={{ initial: 0, intro: { y: -64 } }} />
204+
</div>
205+
206+
<script>
207+
// Send toast to "new" container
208+
toast.push('NEW: Multiple toast container support!', { target: 'new' })
209+
<\/script>
210+
211+
<style>
204212
.wrap {
205213
--toastContainerTop: 0.5rem;
206-
--toastContainerRight: 2rem;
214+
--toastContainerRight: 0.5rem;
207215
--toastContainerBottom: auto;
208-
--toastContainerLeft: 2rem;
216+
--toastContainerLeft: 0.5rem;
209217
--toastWidth: 100%;
210-
--toastMinHeight: 1.5rem;
211-
--toastBackground: rgba(59,130,246,0.95);
212-
--toastMsgPadding: 0.25rem 0.5rem;
218+
--toastMinHeight: 2rem;
219+
--toastPadding: 0 0.5rem;
213220
font-size: 0.875rem;
214221
}
215-
</style>
216-
217-
<div class="wrap">
218-
<SvelteToast target="new" options={{ initial: 0, intro: { y: -64 } }} />
219-
</div>
220-
221-
<script>
222-
// Send toast to "new" container
223-
toast.push('NEW: Multiple toast container support', { target: 'new' })
224-
<\/script>`, // eslint-disable-line no-useless-escape
222+
@media (min-width: 40rem) {
223+
.wrap {
224+
--toastContainerRight: auto;
225+
--toastContainerLeft: calc(50vw - 20rem);
226+
--toastWidth: 40rem;
227+
}
228+
}
229+
</style>`,
225230
run: () => {
226-
toast.push('NEW: Multiple toast container support', { target: 'new' })
231+
toast.push('<strong>NEW:</strong> Multiple toast container support!', { target: 'new' })
227232
}
228233
},
229234
{
@@ -250,6 +255,7 @@ toast.pop(0)`,
250255
dismissable: false,
251256
initial: 0,
252257
theme: {
258+
'--toastPadding': '0',
253259
'--toastMsgPadding': '0'
254260
}
255261
})`,
@@ -260,27 +266,48 @@ toast.pop(0)`,
260266
props: { title: 'A Dummy Cookie Component' },
261267
sendIdTo: 'toastId'
262268
},
269+
target: 'new',
263270
dismissable: false,
264271
initial: 0,
265-
theme: { '--toastMsgPadding': '0' }
272+
theme: {
273+
'--toastPadding': '0',
274+
'--toastMsgPadding': '0',
275+
'--toastBackground': 'transparent',
276+
'--toastBorderRadius': '1rem'
277+
}
266278
})
267279
}
268280
},
269281
{
270282
name: 'PAUSE ON MOUSE HOVER',
271-
code: `toast.push('Hover me!', { pausable: true })`, // eslint-disable-line
283+
code: `toast.push('Hover me!', { pausable: true })`,
272284
run: () => {
273285
toast.push('Hover me!', { pausable: true })
274286
}
287+
},
288+
{
289+
name: 'RUN CALLBACK ON TOAST REMOVAL',
290+
code: `toast.push('Wait for it...', {
291+
onpop: () => {
292+
toast.push('onpop() callback has been executed.', { target: 'new' })
293+
}
294+
})`,
295+
run: () => {
296+
toast.push('Wait for it...', {
297+
onpop: () => {
298+
toast.push(`<strong><tt>onpop()</tt></strong> callback has been executed.`, { target: 'new' })
299+
}
300+
})
301+
}
275302
}
276303
]
277304
</script>
278305

279306
<style>
280307
.colors {
281-
--toastBackground: rgba(255, 255, 255, 0.95);
308+
--toastBackground: rgba(245, 208, 254, 0.95);
282309
--toastColor: #424242;
283-
--toastProgressBackground: aquamarine;
310+
--toastBarBackground: fuchsia;
284311
}
285312
.bottom {
286313
--toastContainerTop: auto;
@@ -290,22 +317,26 @@ toast.pop(0)`,
290317
}
291318
.top {
292319
--toastContainerTop: 0.5rem;
293-
--toastContainerRight: 2rem;
320+
--toastContainerRight: 0.5rem;
294321
--toastContainerBottom: auto;
295-
--toastContainerLeft: 2rem;
322+
--toastContainerLeft: 0.5rem;
296323
--toastWidth: 100%;
297-
--toastMinHeight: 1.5rem;
298-
--toastBackground: rgba(59, 130, 246, 0.95);
299-
--toastMsgPadding: 0.25rem 0.5rem;
324+
--toastMinHeight: 2rem;
325+
--toastPadding: 0 0.5rem;
300326
font-size: 0.875rem;
301327
}
328+
@media (min-width: 40rem) {
329+
.top {
330+
--toastContainerRight: auto;
331+
--toastContainerLeft: calc(50vw - 20rem);
332+
--toastWidth: 40rem;
333+
}
334+
}
302335
</style>
303336

304337
<div class="container">
305338
<div class="w-full h-64 px-2 mt-4 mb-8">
306-
<Prism
307-
classes="w-full h-full bg-gray-700 text-gray-200 font-mono shadow rounded-sm overflow-scroll p-4"
308-
>
339+
<Prism classes="w-full h-full bg-gray-700 text-gray-200 font-mono shadow rounded-sm overflow-scroll p-4">
309340
{code}
310341
</Prism>
311342
</div>

‎docs/Dummy.svelte

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,28 @@ const clicked = (ok) => {
88
toast.pop(toastId)
99
toast.push({
1010
msg: ok ? 'Accepted!' : 'Declined!',
11-
target: 'new',
1211
theme: {
13-
'--toastBackground': ok ? '#48BB78' : '#F56565'
12+
'--toastBackground': ok ? '#48BB78' : '#F56565',
13+
'--toastBarBackground': ok ? '#2F855A' : '#C53030'
1414
}
1515
})
1616
}
1717
const accepted = () => clicked(true)
1818
const declined = () => clicked(false)
1919
</script>
2020

21-
<div class="w-full h-48 bg-yellow-500 rounded-sm flex flex-col">
22-
<h1 class="font-bold m-2">{title}</h1>
23-
<p class="text-sm mx-2 mb-1">
24-
<span class="font-mono font-bold">toastId={toastId}</span>. Lorem ipsum dolor sit amet,
25-
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
21+
<div class="w-full h-40 bg-yellow-500 flex flex-col p-2">
22+
<div class="h-6 flex flex-row items-center mb-1">
23+
<h1 class="font-bold">{title}</h1>
24+
<div class="flex-1" />
25+
<span class="font-mono text-xs font-bold">[toastId: {toastId}]</span>
26+
</div>
27+
<p class="flex-1 text-sm overflow-y-scroll">
28+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
29+
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
2630
</p>
27-
<div class="flex-1 flex flex-row justify-between">
28-
<button class="w-28" on:click={declined}>DECLINE</button>
29-
<button class="w-28" on:click={accepted} data-btn="dummyAccept">ACCEPT</button>
31+
<div class="h-12 flex flex-row justify-around">
32+
<button class="w-28 h-10 rounded-full" on:click={declined}>DECLINE</button>
33+
<button class="w-28 h-10 rounded-full" on:click={accepted} data-btn="dummyAccept">ACCEPT</button>
3034
</div>
3135
</div>

‎docs/index.html

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,9 @@
2323
document.head.appendChild(script)
2424
})()
2525
</script>
26-
<link
27-
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
28-
rel="stylesheet"
29-
/>
26+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />
3027
<link rel="stylesheet" href="build/global.css" />
31-
<link
32-
rel="stylesheet"
33-
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-tomorrow.min.css"
34-
/>
28+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-tomorrow.min.css" />
3529
<script defer src="build/bundle.js"></script>
3630
</head>
3731

@@ -41,15 +35,14 @@ <h1 class="text-4xl text-center">svelte-toast</h1>
4135
<a href="https://github.com/zerodevx/svelte-toast" title="Fork me on Github">
4236
<img
4337
class="opacity-97 hover:opacity-75"
44-
src="https://img.shields.io/npm/v/@zerodevx/svelte-toast/latest?logo=github&style=for-the-badge&color=blue&label=version"
38+
src="https://img.shields.io/npm/v/@zerodevx/svelte-toast/latest?logo=github&style=for-the-badge&color=blue&label=github"
4539
alt="@zerodevx"
4640
/>
4741
</a>
4842
</div>
4943
<p class="container px-2 mb-4">
50-
Simple, elegant, generic, flexible and performant toast notifications. Because a demo helps
51-
better than a thousand API docs, so here it is. Use in Vanilla JS (7kb gzipped) or as a Svelte
52-
component.
44+
Simple, elegant, generic, flexible and performant toast notifications. Because a demo helps better than a thousand
45+
API docs, so here it is. Use in Vanilla JS (7kb gzipped) or as a Svelte component.
5346
</p>
5447
</body>
5548
</html>

‎docs/tailwind.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
@apply text-blue-400 hover:text-blue-600 underline;
1212
}
1313
button {
14-
@apply w-40 h-12 text-gray-600 hover:text-gray-900 text-xs font-bold tracking-wide bg-white border border-gray-300 rounded-sm focus:outline-none focus:ring px-2 m-2;
14+
@apply w-40 h-12 text-gray-600 hover:text-gray-900 text-xs font-bold tracking-wide bg-white border border-gray-300 hover:border-blue-800 rounded-sm focus:outline-none focus:ring px-2 m-2;
1515
}
1616
button.selected {
1717
@apply bg-blue-200;

0 commit comments

Comments
 (0)