Skip to content

Commit ed62664

Browse files
vctrtvfrrrvctrtvfrrr
committed
fix: 🐛 Bug on timer & event bus
1 parent 7d662f8 commit ed62664

File tree

11 files changed

+470
-424
lines changed

11 files changed

+470
-424
lines changed

‎example/package-lock.json‎

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

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@incuca/vue3-toaster",
3-
"version": "1.1.0",
3+
"version": "1.1.1",
44
"private": true,
55
"scripts": {
66
"serve": "vue-cli-service serve",

‎example/src/App.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<template>
22
<div>
3-
<!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
4-
<HelloWorld msg="Welcome to Vue Toaster Example" />
3+
<hello-world msg="Welcome to Vue Toaster Example" />
54
</div>
65
</template>
76

‎example/src/components/HelloWorld.vue‎

Lines changed: 65 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,35 @@
11
<template>
22
<div class="hello">
3-
<Spacing bottom="4">
3+
<spacing bottom="4">
44
<h1>{{ msg }}</h1>
55
<p>Click a button to show a Toast</p>
6-
</Spacing>
7-
<div class="c-grid">
8-
<Button class="v--default" @click="toast">Default</Button>
9-
<Button class="v--success" @click="toast('success')">Success</Button>
10-
<Button class="v--info" @click="toast('info')">Info</Button>
11-
<Button class="v--warning" @click="toast('warning')">Warning</Button>
12-
<Button class="v--error" @click="toast('error')">Error</Button>
6+
</spacing>
7+
<div class="grid">
8+
<toast-button class="default" @click="toast">Default</toast-button>
9+
<toast-button class="success" @click="toast('success')">
10+
Success
11+
</toast-button>
12+
<toast-button class="info" @click="toast('info')">Info</toast-button>
13+
<toast-button class="warning" @click="toast('warning')">
14+
Warning
15+
</toast-button>
16+
<toast-button class="error" @click="toast('error')">Error</toast-button>
1317
</div>
14-
<Spacing :vertical="4">
18+
<spacing :vertical="4">
1519
<h2>Do your changes</h2>
16-
<Spacing :vertical="2">
17-
<div class="c-two-columns">
20+
<spacing :vertical="2">
21+
<div class="two-columns">
1822
<div>
1923
<fieldset>
20-
<label class="c-label" for="message">Message</label>
24+
<label class="label" for="message">Message</label>
2125
<input id="message" v-model="message" type="text" />
2226
</fieldset>
2327
<fieldset>
24-
<label class="c-label">Position</label>
28+
<label class="label">Position</label>
2529
<label
2630
v-for="position in POSITIONS"
2731
:key="position.key"
28-
class="c-label"
32+
class="label"
2933
>
3034
<input
3135
name="position"
@@ -37,7 +41,7 @@
3741
</label>
3842
</fieldset>
3943
<fieldset>
40-
<label class="c-label">
44+
<label class="label">
4145
Duration: {{ options.duration
4246
}}{{ options.duration ? "ms" : "" }}
4347
</label>
@@ -48,13 +52,13 @@
4852
v-model="options.duration"
4953
:disabled="options.duration === false"
5054
/>
51-
<label class="c-label">
55+
<label class="label">
5256
<input type="checkbox" @change="changeDuration" />
5357
Disable duration
5458
</label>
5559
</fieldset>
5660
<fieldset>
57-
<label class="c-label">
61+
<label class="label">
5862
<input
5963
type="checkbox"
6064
checked
@@ -64,7 +68,7 @@
6468
</label>
6569
</fieldset>
6670
<fieldset>
67-
<label class="c-label">
71+
<label class="label">
6872
<input
6973
type="checkbox"
7074
@change="options.queue = $event.target.checked"
@@ -73,15 +77,15 @@
7377
</label>
7478
</fieldset>
7579
<fieldset>
76-
<label class="c-label"> Max Toasts</label>
80+
<label class="label"> Max Toasts</label>
7781
<input
7882
type="number"
7983
v-model="options.maxToasts"
8084
placeholder="false"
8185
/>
8286
</fieldset>
8387
<fieldset>
84-
<label class="c-label">
88+
<label class="label">
8589
<input
8690
type="checkbox"
8791
checked
@@ -91,7 +95,7 @@
9195
</label>
9296
</fieldset>
9397
<fieldset>
94-
<label class="c-label">
98+
<label class="label">
9599
<input
96100
type="checkbox"
97101
checked
@@ -101,90 +105,84 @@
101105
</label>
102106
</fieldset>
103107
</div>
104-
<div class="c-column-right">
105-
<div class="c-code">
108+
<div class="column-right">
109+
<div class="code">
106110
<code>this.$toast(</code>
107-
<Spacing left="2">
108-
<code class="c-code--string">"{{ message }}"</code>
111+
<spacing left="2">
112+
<code class="code-string">"{{ message }}"</code>
109113
<code v-if="hasOptions">,</code>
110-
</Spacing>
111-
<Spacing v-if="hasOptions" left="2">
114+
</spacing>
115+
<spacing v-if="hasOptions" left="2">
112116
<code>{</code>
113-
<Spacing left="4">
114-
<span class="c-code--object-line" v-if="options.type">
117+
<spacing left="4">
118+
<span class="code-object-line" v-if="options.type">
115119
<code>type:</code>
116-
<code class="c-code--string">{{ options.type }}</code>
120+
<code class="code-string">{{ options.type }}</code>
117121
</span>
118-
<span class="c-code--object-line" v-if="options.position">
122+
<span class="code-object-line" v-if="options.position">
119123
<code>position:</code>
120-
<code class="c-code--string">"{{ options.position }}"</code>
124+
<code class="code-string">"{{ options.position }}"</code>
121125
</span>
122126
<span
123-
class="c-code--object-line"
127+
class="code-object-line"
124128
v-if="options.duration !== 4000"
125129
>
126130
<code>duration:</code>
127-
<code class="c-code--number">{{ options.duration }}</code>
131+
<code class="code-number">{{ options.duration }}</code>
128132
</span>
129133

130134
<span
131-
class="c-code--object-line"
135+
class="code-object-line"
132136
v-if="options.dismissible === false"
133137
>
134138
<code>dismissible:</code>
135-
<code class="c-code--number">{{
136-
options.dismissible
137-
}}</code>
139+
<code class="code-number">{{ options.dismissible }}</code>
138140
</span>
139141

140-
<span class="c-code--object-line" v-if="options.queue">
142+
<span class="code-object-line" v-if="options.queue">
141143
<code>queue:</code>
142-
<code class="c-code--number">{{ options.queue }}</code>
144+
<code class="code-number">{{ options.queue }}</code>
143145
</span>
144146

145147
<span
146-
class="c-code--object-line"
148+
class="code-object-line"
147149
v-if="options.maxToasts || options.maxToasts === 0"
148150
>
149151
<code>max:</code>
150-
<code class="c-code--number">{{ options.maxToasts }}</code>
152+
<code class="code-number">{{ options.maxToasts }}</code>
151153
</span>
152154

153155
<span
154-
class="c-code--object-line"
156+
class="code-object-line"
155157
v-if="options.pauseOnHover === false"
156158
>
157159
<code>pauseOnHover:</code>
158-
<code class="c-code--number">{{
159-
options.pauseOnHover
160-
}}</code>
160+
<code class="code-number">{{ options.pauseOnHover }}</code>
161161
</span>
162162

163163
<span
164-
class="c-code--object-line"
164+
class="code-object-line"
165165
v-if="options.useDefaultCss === false"
166166
>
167167
<code>useDefaultCss:</code>
168-
<code class="c-code--number">{{
169-
options.useDefaultCss
170-
}}</code>
168+
<code class="code-number">{{ options.useDefaultCss }}</code>
171169
</span>
172-
</Spacing>
170+
</spacing>
173171
<code>}</code>
174-
</Spacing>
172+
</spacing>
175173
<code>)</code>
176174
</div>
177-
<Button @click="toast" class="v--default">Show it</Button>
175+
<toast-button @click="toast" class="default">Show it</toast-button>
178176
</div>
179177
</div>
180-
</Spacing>
181-
</Spacing>
178+
</spacing>
179+
</spacing>
182180
</div>
183181
</template>
184182

185183
<script>
186-
import Button from "./Button";
187184
import Spacing from "./Spacing.vue";
185+
import ToastButton from "./ToastButton";
188186
import { POSITIONS } from "@incuca/vue3-toaster";
189187
190188
export default {
@@ -198,7 +196,7 @@ export default {
198196
};
199197
},
200198
components: {
201-
Button,
199+
ToastButton,
202200
Spacing
203201
},
204202
props: {
@@ -263,7 +261,7 @@ li {
263261
a {
264262
color: #42b983;
265263
}
266-
.c-grid {
264+
.grid {
267265
display: grid;
268266
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
269267
grid-gap: 8px;
@@ -293,7 +291,7 @@ input[type="checkbox"] {
293291
cursor: pointer;
294292
}
295293
296-
.c-two-columns {
294+
.two-columns {
297295
display: grid;
298296
grid-template-columns: 1fr 1fr;
299297
grid-gap: 24px;
@@ -311,15 +309,15 @@ fieldset:not(:last-child) {
311309
margin-bottom: 20px;
312310
}
313311
314-
.c-label {
312+
.label {
315313
font-weight: 700;
316314
margin-bottom: 8px;
317315
display: flex;
318316
align-items: center;
319317
text-transform: capitalize;
320318
}
321319
322-
.c-code {
320+
.code {
323321
background-color: #252526;
324322
border-radius: 8px;
325323
color: #fff;
@@ -328,27 +326,27 @@ fieldset:not(:last-child) {
328326
text-align: left;
329327
}
330328
331-
.c-code--string {
329+
.code-string {
332330
color: #ce9178;
333331
}
334332
335-
.c-code--object-line {
333+
.code-object-line {
336334
display: flex;
337335
}
338-
.c-code--object-line:not(:last-child)::after {
336+
.code-object-line:not(:last-child)::after {
339337
content: ",";
340338
font-family: monospace;
341339
display: inline-block;
342340
}
343-
.c-code--object-line > code:last-child {
341+
.code-object-line > code:last-child {
344342
margin-left: 8px;
345343
}
346344
347-
.c-code--number {
345+
.code-number {
348346
color: #b5cea8;
349347
}
350348
351-
.c-column-right {
349+
.column-right {
352350
display: grid;
353351
grid-gap: 16px;
354352
}

0 commit comments

Comments
 (0)