Skip to content

Commit b9f6604

Browse files
zerodevxzerodevx
committed
Prep demo for pub
1 parent c7a1103 commit b9f6604

File tree

9 files changed

+308
-0
lines changed

9 files changed

+308
-0
lines changed

‎docs/App.svelte

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
<script>
2+
/* eslint no-useless-escape: 0 */
3+
4+
import { tick } from 'svelte'
5+
import { SvelteToast, toast } from '../src'
6+
7+
// Hoist to `window` for debug
8+
window.toast = toast
9+
10+
let selected
11+
let code = ''
12+
13+
const handleDefault = () => {
14+
selected = 'default'
15+
code = 'toast.push(\'Hello world!\')'
16+
toast.push('Hello world!')
17+
}
18+
19+
const handleGreen = () => {
20+
selected = 'green'
21+
code = `toast.push('Success!', {
22+
theme: {
23+
'--toastBackground': '#48BB78',
24+
'--toastProgressBackground': '#2F855A'
25+
}
26+
)`
27+
toast.push('Success!', { theme: { '--toastBackground': '#48BB78', '--toastProgressBackground': '#2F855A' } })
28+
}
29+
30+
const handleYellow = () => {
31+
selected = 'yellow'
32+
code = `toast.push('Warning!', {
33+
theme: {
34+
'--toastBackground': '#ECC94B',
35+
'--toastProgressBackground': '#B7791F'
36+
}
37+
)`
38+
toast.push('Warning!', { theme: { '--toastBackground': '#ECC94B', '--toastProgressBackground': '#B7791F' } })
39+
}
40+
41+
const handleRed = () => {
42+
selected = 'red'
43+
code = `toast.push('Error!', {
44+
theme: {
45+
'--toastBackground': '#F56565',
46+
'--toastProgressBackground': '#C53030'
47+
}
48+
)`
49+
toast.push('Error!', { theme: { '--toastBackground': '#F56565', '--toastProgressBackground': '#C53030' } })
50+
}
51+
52+
const handleLong = () => {
53+
selected = 'long'
54+
code = 'toast.push(\'Watching the paint dry...\', { duration: 20000 })'
55+
toast.push('Watching the paint dry...', { duration: 20000 })
56+
}
57+
58+
const handleNodismiss = () => {
59+
selected = 'nodismiss'
60+
code = `toast.push('Where the close btn?!?', {
61+
initial: 0,
62+
progress: 0,
63+
dismissable: false
64+
})`
65+
toast.push('Where the close btn?!?', { initial: 0, progress: 0, dismissable: false })
66+
}
67+
68+
const handleRemove = () => {
69+
selected = 'remove'
70+
code = `// Remove the latest toast
71+
toast.pop()
72+
73+
// Or remove a particular one
74+
const id = toast('Yo!')
75+
toast.pop(id)`
76+
toast.pop()
77+
}
78+
79+
const handleFlip = () => {
80+
selected = 'flip'
81+
code = `toast.push('Progress bar is flipped', {
82+
initial: 0,
83+
progress: 1
84+
})`
85+
toast.push('Progress bar is flipped', { initial: 0, progress: 1 })
86+
}
87+
88+
const sleep = t => new Promise(resolve => setTimeout(resolve, t))
89+
const handleLoading = async () => {
90+
selected = 'loading'
91+
code = `const sleep = t => new Promise(resolve => setTimeout(resolve, t))
92+
const id = toast.push('Loading, please wait...', {
93+
duration: 300,
94+
initial: 0,
95+
progress: 0,
96+
dismissable: false
97+
})
98+
await sleep(500)
99+
toast.set(id, { progress: 0.1 })
100+
await sleep(3000)
101+
toast.set(id, { progress: 0.7 })
102+
await sleep(1000)
103+
toast.set(id, { msg: 'Just a bit more', progress: 0.8 })
104+
await sleep(2000)
105+
toast.set(id, { progress: 1 })
106+
`
107+
const id = toast.push('Loading, please wait...', { duration: 300, initial: 0, progress: 0, dismissable: false })
108+
await sleep(500)
109+
toast.set(id, { progress: 0.1 })
110+
await sleep(3000)
111+
toast.set(id, { progress: 0.7 })
112+
await sleep(1000)
113+
toast.set(id, { msg: 'Just a bit more', progress: 0.8 })
114+
await sleep(2000)
115+
toast.set(id, { progress: 1 })
116+
}
117+
118+
let colors = false
119+
const handleColor = () => {
120+
selected = 'color'
121+
code = `<style>
122+
:root {
123+
--toastBackground: rgba(255,255,255,0.98);
124+
--toastColor: #2D3748;
125+
}
126+
</style>
127+
<script>
128+
toast.push('Changed some colors')
129+
<\/script>`
130+
colors = true
131+
toast.push('Changed some colors')
132+
}
133+
134+
let options = {}
135+
let bottom = false
136+
const handleBottom = async () => {
137+
selected = 'bottom'
138+
code = `<style>
139+
:root {
140+
--toastContainerTop: auto;
141+
--toastContainerRight: auto;
142+
--toastContainerBottom: 8rem;
143+
--toastContainerLeft: calc(50vw - 8rem);
144+
}
145+
</style>
146+
147+
<SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
148+
149+
<script>
150+
toast.push('Bottoms up!')
151+
<\/script>`
152+
bottom = true
153+
options = { reversed: true, intro: { y: 128 } }
154+
await tick()
155+
toast.push('Bottoms up!')
156+
}
157+
158+
const handleRestore = async () => {
159+
selected = 'restore'
160+
code = '// All default settings restored!'
161+
colors = false
162+
bottom = false
163+
options = {}
164+
await tick()
165+
toast.push('All themes reset!')
166+
}
167+
168+
</script>
169+
170+
<style>
171+
.colors {
172+
--toastBackground: rgba(255,255,255,0.98);
173+
--toastColor: #2D3748;
174+
}
175+
.bottom {
176+
--toastContainerTop: auto;
177+
--toastContainerRight: auto;
178+
--toastContainerBottom: 8rem;
179+
--toastContainerLeft: calc(50vw - 8rem);
180+
}
181+
</style>
182+
183+
<div class="container">
184+
185+
<div class="w-full h-64 px-2 mt-4 mb-8">
186+
<pre class="w-full h-full bg-gray-700 text-gray-200 font-mono border border-gray-500 rounded-sm overflow-scroll p-4"><code>
187+
{code}
188+
</code></pre>
189+
</div>
190+
191+
<div class="flex flex-row flex-wrap items-center justify-center">
192+
193+
<button class="btn" class:selected={selected === 'default'} on:click={handleDefault}>DEFAULT</button>
194+
<button class="btn" class:selected={selected === 'green'} on:click={handleGreen}>GREEN</button>
195+
<button class="btn" class:selected={selected === 'yellow'} on:click={handleYellow}>YELLOW</button>
196+
<button class="btn" class:selected={selected === 'red'} on:click={handleRed}>RED</button>
197+
<button class="btn" class:selected={selected === 'long'} on:click={handleLong}>LONG TIME</button>
198+
<button class="btn" class:selected={selected === 'nodismiss'} on:click={handleNodismiss}>NO DISMISS</button>
199+
<button class="btn" class:selected={selected === 'remove'} on:click={handleRemove}>REMOVE LAST</button>
200+
<button class="btn" class:selected={selected === 'flip'} on:click={handleFlip}>FLIP PROGRESS</button>
201+
<button class="btn" class:selected={selected === 'loading'} on:click={handleLoading}>USE AS LOADING INDICATOR</button>
202+
<button class="btn" class:selected={selected === 'color'} on:click={handleColor}>CHANGE DEFAULT COLORS</button>
203+
<button class="btn" class:selected={selected === 'bottom'} on:click={handleBottom}>POSITION TO BOTTOM</button>
204+
<button class="btn" class:selected={selected === 'restore'} on:click={handleRestore}>RESTORE DEFAULTS</button>
205+
206+
</div>
207+
</div>
208+
209+
<div class:colors class:bottom>
210+
<SvelteToast {options} />
211+
</div>

‎docs/build/bundle.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/build/bundle.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/build/global.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/favicon.ico

33.7 KB
Binary file not shown.

‎docs/index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<title>svelte-toast | Demo</title>
7+
<meta name="description" content="Simple elegant toast notifications. Use it in Vanilla JS or as a Svelte component.">
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="/build/global.css">
10+
<script defer src="/build/bundle.js"></script>
11+
<script>
12+
(function(){
13+
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
14+
ga('create', 'UA-66946548-3', 'auto');
15+
ga('send', 'pageview');
16+
if (location.protocol === 'https:') {
17+
var el = document.createElement('script');
18+
el.src = 'https://www.google-analytics.com/analytics.js';
19+
document.head.appendChild(el);
20+
}
21+
}());
22+
</script>
23+
</head>
24+
25+
<body>
26+
<h1 class="text-5xl text-center mt-12">svelte-toast</h1>
27+
<div class="h-10 flex justify-center">
28+
<a href="https://github.com/zerodevx/svelte-toast">
29+
<img
30+
class="opacity-97 hover:opacity-75"
31+
src="https://img.shields.io/github/package-json/v/zerodevx/svelte-toast?logo=github&style=for-the-badge"
32+
alt="Github version badge">
33+
</a>
34+
</div>
35+
</body>
36+
</html>

‎docs/main.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import App from './App.svelte'
2+
3+
const app = new App({ target: document.body })
4+
5+
export default app

‎docs/tailwind.config.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const defaultTheme = require('tailwindcss/defaultTheme')
2+
3+
module.exports = {
4+
future: {
5+
removeDeprecatedGapUtilities: true,
6+
purgeLayersByDefault: true
7+
},
8+
experimental: {
9+
applyComplexClasses: true,
10+
uniformColorPalette: true
11+
},
12+
purge: [
13+
'./docs/App.svelte',
14+
'./docs/index.html'
15+
],
16+
theme: {
17+
extend: {
18+
fontFamily: {
19+
sans: ['Inter', ...defaultTheme.fontFamily.sans]
20+
}
21+
},
22+
screens: {
23+
md: '768px'
24+
},
25+
container: {
26+
center: true
27+
}
28+
},
29+
variants: {},
30+
plugins: []
31+
}

‎docs/tailwind.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@tailwind base;
2+
html {
3+
@apply h-full bg-gray-100 text-gray-900 font-sans font-normal;
4+
-webkit-tap-highlight-color: transparent;
5+
}
6+
7+
@tailwind components;
8+
.btn {
9+
@apply w-40 h-12 border-2 border-gray-500 text-gray-500 text-xs font-bold tracking-wider rounded-full focus:outline-none px-3 mx-2 mb-4;
10+
}
11+
.btn.selected {
12+
@apply border-gray-800 text-gray-800 bg-white;
13+
}
14+
.btn:hover {
15+
@apply hover:text-blue-500;
16+
}
17+
.opacity-97 {
18+
opacity: 0.97;
19+
}
20+
21+
@tailwind utilities;

0 commit comments

Comments
 (0)