vue-toastflow 1.0.6 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +248 -248
- package/dist/toastflow.es.js +186 -179
- package/dist/toastflow.umd.js +1 -1
- package/dist/vue-toastflow.css +1 -1
- package/package.json +3 -3
- package/src/components/Toast.vue +6 -3
- package/src/components/ToastContainer.vue +13 -2
package/README.md
CHANGED
|
@@ -1,248 +1,248 @@
|
|
|
1
|
-
[](https://deepwiki.com/adrianjanocko/toastflow)
|
|
2
|
-
|
|
3
|
-
<p align="center">
|
|
4
|
-
<img src="https://raw.githubusercontent.com/adrianjanocko/toastflow/main/images/banner.png" alt="Toastflow banner" width="900" />
|
|
5
|
-
</p>
|
|
6
|
-
|
|
7
|
-
<h1 align="center">Toastflow</h1>
|
|
8
|
-
<p align="center">
|
|
9
|
-
Framework-agnostic toast engine with a Vue 3 renderer. Typed core, smooth stack animations, CSS-first theming, and full control over layout and behavior.
|
|
10
|
-
</p>
|
|
11
|
-
<p align="center">
|
|
12
|
-
<a href="https://toastflow.adrianjanocko.sk/" target="_blank">Playground</a> ·
|
|
13
|
-
<a href="#usage-vuejs-3-composition-api">Usage</a> ·
|
|
14
|
-
<a href="#configuration">Configuration</a>
|
|
15
|
-
</p>
|
|
16
|
-
|
|
17
|
-
<p align="center">
|
|
18
|
-
<a href="https://www.npmjs.com/package/vue-toastflow">
|
|
19
|
-
<img src="https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white" alt="NPM" />
|
|
20
|
-
</a>
|
|
21
|
-
</p>
|
|
22
|
-
|
|
23
|
-
---
|
|
24
|
-
|
|
25
|
-
<details>
|
|
26
|
-
<summary>Table of Contents</summary>
|
|
27
|
-
<ol>
|
|
28
|
-
<li><a href="#about-the-project">About the project</a></li>
|
|
29
|
-
<li><a href="#preview">Preview</a></li>
|
|
30
|
-
<li><a href="#packages">Packages</a></li>
|
|
31
|
-
<li><a href="#built-with">Built with</a></li>
|
|
32
|
-
<li>
|
|
33
|
-
<a href="#usage-vuejs-3-composition-api">Usage</a>
|
|
34
|
-
<ul>
|
|
35
|
-
<li><a href="#quick-start">Quick start</a></li>
|
|
36
|
-
<li><a href="#async-flows">Async flows</a></li>
|
|
37
|
-
<li><a href="#html-content">HTML content</a></li>
|
|
38
|
-
<li><a href="#headless-rendering">Headless rendering</a></li>
|
|
39
|
-
</ul>
|
|
40
|
-
</li>
|
|
41
|
-
<li><a href="#configuration">Configuration</a></li>
|
|
42
|
-
<li><a href="#theming">Theming</a></li>
|
|
43
|
-
<li><a href="#events-and-store-access">Events and store access</a></li>
|
|
44
|
-
<li><a href="#contributing">Contributing</a></li>
|
|
45
|
-
<li><a href="#license">License</a></li>
|
|
46
|
-
</ol>
|
|
47
|
-
</details>
|
|
48
|
-
|
|
49
|
-
## About the project
|
|
50
|
-
|
|
51
|
-
Toastflow is a headless toast engine with a Vue 3 renderer. It keeps toast state in a tiny framework-agnostic store so
|
|
52
|
-
you can render it your way while keeping predictable behaviors.
|
|
53
|
-
|
|
54
|
-
- Deterministic rules for duplicates, timers, pause-on-hover, close-on-click, and clear-all.
|
|
55
|
-
- CSS-first theming: swap the look by editing a handful of variables.
|
|
56
|
-
- Works inside components or in plain TS/JS modules and services.
|
|
57
|
-
- Headless slot to render your own card while reusing the store logic.
|
|
58
|
-
|
|
59
|
-
## Preview
|
|
60
|
-
|
|
61
|
-
<p align="center">
|
|
62
|
-
<img src="https://raw.githubusercontent.com/adrianjanocko/toastflow/main/images/showcase.png" alt="Toastflow showcase" width="850" />
|
|
63
|
-
</p>
|
|
64
|
-
|
|
65
|
-
## Packages
|
|
66
|
-
|
|
67
|
-
- [toastflow-core](https://www.npmjs.com/package/toastflow-core): typed, framework-agnostic toast store.
|
|
68
|
-
- [vue-toastflow](https://www.npmjs.com/package/vue-toastflow): Vue 3 renderer with `<ToastContainer />`, a
|
|
69
|
-
global `toast` helper, defaults, and icons.
|
|
70
|
-
- [playground-vue](https://github.com/adrianjanocko/toastflow/blob/main/packages/playground/vue): Vite + Vue demo playground for manual testing.
|
|
71
|
-
|
|
72
|
-
## Built with
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
## Installation
|
|
80
|
-
|
|
81
|
-
```shell
|
|
82
|
-
pnpm add vue-toastflow
|
|
83
|
-
|
|
84
|
-
# npm i vue-toastflow
|
|
85
|
-
# yarn add vue-toastflow
|
|
86
|
-
# bun i vue-toastflow
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
## Usage (Vue.js 3 Composition API)
|
|
90
|
-
|
|
91
|
-
### Quick start
|
|
92
|
-
|
|
93
|
-
```ts
|
|
94
|
-
// main.ts
|
|
95
|
-
import {createApp} from "vue";
|
|
96
|
-
import App from "./App.vue";
|
|
97
|
-
import {createToastflow, ToastContainer} from "vue-toastflow";
|
|
98
|
-
|
|
99
|
-
const app = createApp(App);
|
|
100
|
-
|
|
101
|
-
app.use(
|
|
102
|
-
createToastflow({
|
|
103
|
-
// optional global defaults
|
|
104
|
-
position: "top-right",
|
|
105
|
-
duration: 5000,
|
|
106
|
-
}),
|
|
107
|
-
);
|
|
108
|
-
|
|
109
|
-
// register globally or import locally where you render it
|
|
110
|
-
app.component("ToastContainer", ToastContainer);
|
|
111
|
-
|
|
112
|
-
// call toast.* only after the plugin is installed
|
|
113
|
-
app.mount("#app");
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
Render a container and fire toasts anywhere:
|
|
117
|
-
|
|
118
|
-
```vue
|
|
119
|
-
<!-- App.vue -->
|
|
120
|
-
<template>
|
|
121
|
-
<ToastContainer/>
|
|
122
|
-
<RouterView/>
|
|
123
|
-
</template>
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
```ts
|
|
127
|
-
import {toast} from "vue-toastflow";
|
|
128
|
-
|
|
129
|
-
toast.success({title: "Saved", description: "Your changes are live."});
|
|
130
|
-
toast.warning({description: "Low balance"});
|
|
131
|
-
|
|
132
|
-
const id = toast.error({title: "Oops", description: "Check console."});
|
|
133
|
-
toast.update(id, {description: "Fixed. All good now."});
|
|
134
|
-
toast.dismiss(id);
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
### Async flows
|
|
138
|
-
|
|
139
|
-
```ts
|
|
140
|
-
const run = toast.loading(
|
|
141
|
-
() => fetch("/api/save").then((r) => r.json()),
|
|
142
|
-
{
|
|
143
|
-
loading: {title: "Saving", description: "Hang tight."},
|
|
144
|
-
success: (data) => ({
|
|
145
|
-
title: "Saved",
|
|
146
|
-
description: `Stored item ${data.id}.`,
|
|
147
|
-
}),
|
|
148
|
-
error: (err) => ({
|
|
149
|
-
title: "Error",
|
|
150
|
-
description: err instanceof Error ? err.message : "Please try again.",
|
|
151
|
-
}),
|
|
152
|
-
},
|
|
153
|
-
);
|
|
154
|
-
|
|
155
|
-
await run;
|
|
156
|
-
console.log(run.toastId);
|
|
157
|
-
```
|
|
158
|
-
|
|
159
|
-
### HTML content
|
|
160
|
-
|
|
161
|
-
```ts
|
|
162
|
-
toast.info({
|
|
163
|
-
title: "<strong>New version</strong>",
|
|
164
|
-
description: "Release notes are <a href='/changelog'>here</a>.",
|
|
165
|
-
supportHtml: true,
|
|
166
|
-
});
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
### Headless rendering
|
|
170
|
-
|
|
171
|
-
```vue
|
|
172
|
-
|
|
173
|
-
<ToastContainer
|
|
174
|
-
v-slot="{
|
|
175
|
-
toast,
|
|
176
|
-
dismiss,
|
|
177
|
-
bumpAnimationClass,
|
|
178
|
-
clearAllAnimationClass,
|
|
179
|
-
updateAnimationClass,
|
|
180
|
-
}"
|
|
181
|
-
>
|
|
182
|
-
<div
|
|
183
|
-
class="my-toast"
|
|
184
|
-
:class="[
|
|
185
|
-
toast.type,
|
|
186
|
-
bumpAnimationClass,
|
|
187
|
-
toast.phase === 'clear-all' && clearAllAnimationClass,
|
|
188
|
-
updateAnimationClass
|
|
189
|
-
]"
|
|
190
|
-
@click="toast.closeOnClick && dismiss(toast.id)"
|
|
191
|
-
>
|
|
192
|
-
<header>
|
|
193
|
-
<strong>{{ toast.title }}</strong>
|
|
194
|
-
<button @click.stop="dismiss(toast.id)">x</button>
|
|
195
|
-
</header>
|
|
196
|
-
<p v-if="toast.description">{{ toast.description }}</p>
|
|
197
|
-
<small v-if="toast.showCreatedAt">
|
|
198
|
-
Sent at {{ toast.createdAtFormatter(toast.createdAt) }}
|
|
199
|
-
</small>
|
|
200
|
-
</div>
|
|
201
|
-
</ToastContainer>
|
|
202
|
-
```
|
|
203
|
-
|
|
204
|
-
## Configuration
|
|
205
|
-
|
|
206
|
-
Pass any [types.ts](https://github.com/adrianjanocko/toastflow/blob/main/packages/core/src/types.ts) fields to `createToastflow`; per-toast options override them:
|
|
207
|
-
|
|
208
|
-
- `position`: "top-right" (default), "top-left", "top-center", "bottom-*"
|
|
209
|
-
- `duration`: `5000` ms by default; `Infinity` or `0` disables auto-dismiss (progress bar auto-hides when disabled)
|
|
210
|
-
- `maxVisible`: `5` per stack; eviction respects `order`
|
|
211
|
-
- `order`: "newest" (default) or "oldest" per stack
|
|
212
|
-
- `preventDuplicates`: `false` by default; matches by position + type + title + description
|
|
213
|
-
- `progressBar`, `pauseOnHover`, `pauseStrategy` ("resume" | "reset")
|
|
214
|
-
- `animation`: class names for enter/leave/move (`name`), bump, clearAll, update (defaults use `Toastflow__*`)
|
|
215
|
-
- `closeButton` (`true`), `closeOnClick` (`false`)
|
|
216
|
-
- `offset` (`16px`), `gap` (`8px`), `width` (`350px`), `zIndex` (`9999`)
|
|
217
|
-
- `supportHtml`: `false` (opt-in)
|
|
218
|
-
- `showCreatedAt` and `createdAtFormatter` for timestamps
|
|
219
|
-
- lifecycle hooks: `onMount`, `onUnmount`, `onClick`, `onClose`
|
|
220
|
-
|
|
221
|
-
## Theming
|
|
222
|
-
|
|
223
|
-
- CSS variables live in [styles.css](https://github.com/adrianjanocko/toastflow/blob/main/packages/vue/src/styles.css) and are auto-imported with the Vue package.
|
|
224
|
-
- Key
|
|
225
|
-
variables: `--tf-toast-bg`, `--tf-toast-color`, `--tf-toast-border-color`, `--tf-toast-radius`, `--tf-toast-padding`, `--tf-toast-icon-size`, `--tf-toast-progress-height`,
|
|
226
|
-
plus per-type colors like `--success-bg` and `--error-text`.
|
|
227
|
-
- Animations are pure CSS class names; override them via the `animation` config or by redefining the `Toastflow__*`
|
|
228
|
-
keyframes. **Animations are implemented using [TransitionGroup](https://vuejs.org/guide/built-ins/transition-group).**
|
|
229
|
-
|
|
230
|
-
## Events and store access
|
|
231
|
-
|
|
232
|
-
- `toast.subscribeEvents(listener)` gets `duplicate`, `timer-reset`, and `update` events.
|
|
233
|
-
- `toast.getState()` returns the current snapshot; helper
|
|
234
|
-
methods: `toast.show`, `toast.success`, `toast.error`, `toast.warning`, `toast.info`, `toast.loading`, `toast.update`, `toast.dismiss`, `toast.dismissAll`, `toast.pause`, `toast.resume`, `toast.getConfig`.
|
|
235
|
-
|
|
236
|
-
## Contributing
|
|
237
|
-
|
|
238
|
-
Contributions are welcome! Fork the repo, create a branch, and open a PR. For bigger changes, open an issue first.
|
|
239
|
-
|
|
240
|
-
1. Fork the project
|
|
241
|
-
2. Create your branch
|
|
242
|
-
3. Commit your changes
|
|
243
|
-
4. Push to the branch
|
|
244
|
-
5. Open a Pull Request
|
|
245
|
-
|
|
246
|
-
## License
|
|
247
|
-
|
|
248
|
-
MIT - see [LICENSE](https://github.com/adrianjanocko/toastflow/blob/main/LICENSE).
|
|
1
|
+
[](https://deepwiki.com/adrianjanocko/toastflow)
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<img src="https://raw.githubusercontent.com/adrianjanocko/toastflow/main/images/banner.png" alt="Toastflow banner" width="900" />
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<h1 align="center">Toastflow</h1>
|
|
8
|
+
<p align="center">
|
|
9
|
+
Framework-agnostic toast engine with a Vue 3 renderer. Typed core, smooth stack animations, CSS-first theming, and full control over layout and behavior.
|
|
10
|
+
</p>
|
|
11
|
+
<p align="center">
|
|
12
|
+
<a href="https://toastflow.adrianjanocko.sk/" target="_blank">Playground</a> ·
|
|
13
|
+
<a href="#usage-vuejs-3-composition-api">Usage</a> ·
|
|
14
|
+
<a href="#configuration">Configuration</a>
|
|
15
|
+
</p>
|
|
16
|
+
|
|
17
|
+
<p align="center">
|
|
18
|
+
<a href="https://www.npmjs.com/package/vue-toastflow">
|
|
19
|
+
<img src="https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white" alt="NPM" />
|
|
20
|
+
</a>
|
|
21
|
+
</p>
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
<details>
|
|
26
|
+
<summary>Table of Contents</summary>
|
|
27
|
+
<ol>
|
|
28
|
+
<li><a href="#about-the-project">About the project</a></li>
|
|
29
|
+
<li><a href="#preview">Preview</a></li>
|
|
30
|
+
<li><a href="#packages">Packages</a></li>
|
|
31
|
+
<li><a href="#built-with">Built with</a></li>
|
|
32
|
+
<li>
|
|
33
|
+
<a href="#usage-vuejs-3-composition-api">Usage</a>
|
|
34
|
+
<ul>
|
|
35
|
+
<li><a href="#quick-start">Quick start</a></li>
|
|
36
|
+
<li><a href="#async-flows">Async flows</a></li>
|
|
37
|
+
<li><a href="#html-content">HTML content</a></li>
|
|
38
|
+
<li><a href="#headless-rendering">Headless rendering</a></li>
|
|
39
|
+
</ul>
|
|
40
|
+
</li>
|
|
41
|
+
<li><a href="#configuration">Configuration</a></li>
|
|
42
|
+
<li><a href="#theming">Theming</a></li>
|
|
43
|
+
<li><a href="#events-and-store-access">Events and store access</a></li>
|
|
44
|
+
<li><a href="#contributing">Contributing</a></li>
|
|
45
|
+
<li><a href="#license">License</a></li>
|
|
46
|
+
</ol>
|
|
47
|
+
</details>
|
|
48
|
+
|
|
49
|
+
## About the project
|
|
50
|
+
|
|
51
|
+
Toastflow is a headless toast engine with a Vue 3 renderer. It keeps toast state in a tiny framework-agnostic store so
|
|
52
|
+
you can render it your way while keeping predictable behaviors.
|
|
53
|
+
|
|
54
|
+
- Deterministic rules for duplicates, timers, pause-on-hover, close-on-click, and clear-all.
|
|
55
|
+
- CSS-first theming: swap the look by editing a handful of variables.
|
|
56
|
+
- Works inside components or in plain TS/JS modules and services.
|
|
57
|
+
- Headless slot to render your own card while reusing the store logic.
|
|
58
|
+
|
|
59
|
+
## Preview
|
|
60
|
+
|
|
61
|
+
<p align="center">
|
|
62
|
+
<img src="https://raw.githubusercontent.com/adrianjanocko/toastflow/main/images/showcase.png" alt="Toastflow showcase" width="850" />
|
|
63
|
+
</p>
|
|
64
|
+
|
|
65
|
+
## Packages
|
|
66
|
+
|
|
67
|
+
- [toastflow-core](https://www.npmjs.com/package/toastflow-core): typed, framework-agnostic toast store.
|
|
68
|
+
- [vue-toastflow](https://www.npmjs.com/package/vue-toastflow): Vue 3 renderer with `<ToastContainer />`, a
|
|
69
|
+
global `toast` helper, defaults, and icons.
|
|
70
|
+
- [playground-vue](https://github.com/adrianjanocko/toastflow/blob/main/packages/playground/vue): Vite + Vue demo playground for manual testing.
|
|
71
|
+
|
|
72
|
+
## Built with
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
## Installation
|
|
80
|
+
|
|
81
|
+
```shell
|
|
82
|
+
pnpm add vue-toastflow
|
|
83
|
+
|
|
84
|
+
# npm i vue-toastflow
|
|
85
|
+
# yarn add vue-toastflow
|
|
86
|
+
# bun i vue-toastflow
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Usage (Vue.js 3 Composition API)
|
|
90
|
+
|
|
91
|
+
### Quick start
|
|
92
|
+
|
|
93
|
+
```ts
|
|
94
|
+
// main.ts
|
|
95
|
+
import {createApp} from "vue";
|
|
96
|
+
import App from "./App.vue";
|
|
97
|
+
import {createToastflow, ToastContainer} from "vue-toastflow";
|
|
98
|
+
|
|
99
|
+
const app = createApp(App);
|
|
100
|
+
|
|
101
|
+
app.use(
|
|
102
|
+
createToastflow({
|
|
103
|
+
// optional global defaults
|
|
104
|
+
position: "top-right",
|
|
105
|
+
duration: 5000,
|
|
106
|
+
}),
|
|
107
|
+
);
|
|
108
|
+
|
|
109
|
+
// register globally or import locally where you render it
|
|
110
|
+
app.component("ToastContainer", ToastContainer);
|
|
111
|
+
|
|
112
|
+
// call toast.* only after the plugin is installed
|
|
113
|
+
app.mount("#app");
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
Render a container and fire toasts anywhere:
|
|
117
|
+
|
|
118
|
+
```vue
|
|
119
|
+
<!-- App.vue -->
|
|
120
|
+
<template>
|
|
121
|
+
<ToastContainer/>
|
|
122
|
+
<RouterView/>
|
|
123
|
+
</template>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
```ts
|
|
127
|
+
import {toast} from "vue-toastflow";
|
|
128
|
+
|
|
129
|
+
toast.success({title: "Saved", description: "Your changes are live."});
|
|
130
|
+
toast.warning({description: "Low balance"});
|
|
131
|
+
|
|
132
|
+
const id = toast.error({title: "Oops", description: "Check console."});
|
|
133
|
+
toast.update(id, {description: "Fixed. All good now."});
|
|
134
|
+
toast.dismiss(id);
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
### Async flows
|
|
138
|
+
|
|
139
|
+
```ts
|
|
140
|
+
const run = toast.loading(
|
|
141
|
+
() => fetch("/api/save").then((r) => r.json()),
|
|
142
|
+
{
|
|
143
|
+
loading: {title: "Saving", description: "Hang tight."},
|
|
144
|
+
success: (data) => ({
|
|
145
|
+
title: "Saved",
|
|
146
|
+
description: `Stored item ${data.id}.`,
|
|
147
|
+
}),
|
|
148
|
+
error: (err) => ({
|
|
149
|
+
title: "Error",
|
|
150
|
+
description: err instanceof Error ? err.message : "Please try again.",
|
|
151
|
+
}),
|
|
152
|
+
},
|
|
153
|
+
);
|
|
154
|
+
|
|
155
|
+
await run;
|
|
156
|
+
console.log(run.toastId);
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### HTML content
|
|
160
|
+
|
|
161
|
+
```ts
|
|
162
|
+
toast.info({
|
|
163
|
+
title: "<strong>New version</strong>",
|
|
164
|
+
description: "Release notes are <a href='/changelog'>here</a>.",
|
|
165
|
+
supportHtml: true,
|
|
166
|
+
});
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
### Headless rendering
|
|
170
|
+
|
|
171
|
+
```vue
|
|
172
|
+
|
|
173
|
+
<ToastContainer
|
|
174
|
+
v-slot="{
|
|
175
|
+
toast,
|
|
176
|
+
dismiss,
|
|
177
|
+
bumpAnimationClass,
|
|
178
|
+
clearAllAnimationClass,
|
|
179
|
+
updateAnimationClass,
|
|
180
|
+
}"
|
|
181
|
+
>
|
|
182
|
+
<div
|
|
183
|
+
class="my-toast"
|
|
184
|
+
:class="[
|
|
185
|
+
toast.type,
|
|
186
|
+
bumpAnimationClass,
|
|
187
|
+
toast.phase === 'clear-all' && clearAllAnimationClass,
|
|
188
|
+
updateAnimationClass
|
|
189
|
+
]"
|
|
190
|
+
@click="toast.closeOnClick && dismiss(toast.id)"
|
|
191
|
+
>
|
|
192
|
+
<header>
|
|
193
|
+
<strong>{{ toast.title }}</strong>
|
|
194
|
+
<button @click.stop="dismiss(toast.id)">x</button>
|
|
195
|
+
</header>
|
|
196
|
+
<p v-if="toast.description">{{ toast.description }}</p>
|
|
197
|
+
<small v-if="toast.showCreatedAt">
|
|
198
|
+
Sent at {{ toast.createdAtFormatter(toast.createdAt) }}
|
|
199
|
+
</small>
|
|
200
|
+
</div>
|
|
201
|
+
</ToastContainer>
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
## Configuration
|
|
205
|
+
|
|
206
|
+
Pass any [types.ts](https://github.com/adrianjanocko/toastflow/blob/main/packages/core/src/types.ts) fields to `createToastflow`; per-toast options override them:
|
|
207
|
+
|
|
208
|
+
- `position`: "top-right" (default), "top-left", "top-center", "bottom-*"
|
|
209
|
+
- `duration`: `5000` ms by default; `Infinity` or `0` disables auto-dismiss (progress bar auto-hides when disabled)
|
|
210
|
+
- `maxVisible`: `5` per stack; eviction respects `order`
|
|
211
|
+
- `order`: "newest" (default) or "oldest" per stack
|
|
212
|
+
- `preventDuplicates`: `false` by default; matches by position + type + title + description
|
|
213
|
+
- `progressBar`, `pauseOnHover`, `pauseStrategy` ("resume" | "reset")
|
|
214
|
+
- `animation`: class names for enter/leave/move (`name`), bump, clearAll, update (defaults use `Toastflow__*`)
|
|
215
|
+
- `closeButton` (`true`), `closeOnClick` (`false`)
|
|
216
|
+
- `offset` (`16px`), `gap` (`8px`), `width` (`350px`), `zIndex` (`9999`)
|
|
217
|
+
- `supportHtml`: `false` (opt-in)
|
|
218
|
+
- `showCreatedAt` and `createdAtFormatter` for timestamps
|
|
219
|
+
- lifecycle hooks: `onMount`, `onUnmount`, `onClick`, `onClose`
|
|
220
|
+
|
|
221
|
+
## Theming
|
|
222
|
+
|
|
223
|
+
- CSS variables live in [styles.css](https://github.com/adrianjanocko/toastflow/blob/main/packages/vue/src/styles.css) and are auto-imported with the Vue package.
|
|
224
|
+
- Key
|
|
225
|
+
variables: `--tf-toast-bg`, `--tf-toast-color`, `--tf-toast-border-color`, `--tf-toast-radius`, `--tf-toast-padding`, `--tf-toast-icon-size`, `--tf-toast-progress-height`,
|
|
226
|
+
plus per-type colors like `--success-bg` and `--error-text`.
|
|
227
|
+
- Animations are pure CSS class names; override them via the `animation` config or by redefining the `Toastflow__*`
|
|
228
|
+
keyframes. **Animations are implemented using [TransitionGroup](https://vuejs.org/guide/built-ins/transition-group).**
|
|
229
|
+
|
|
230
|
+
## Events and store access
|
|
231
|
+
|
|
232
|
+
- `toast.subscribeEvents(listener)` gets `duplicate`, `timer-reset`, and `update` events.
|
|
233
|
+
- `toast.getState()` returns the current snapshot; helper
|
|
234
|
+
methods: `toast.show`, `toast.success`, `toast.error`, `toast.warning`, `toast.info`, `toast.loading`, `toast.update`, `toast.dismiss`, `toast.dismissAll`, `toast.pause`, `toast.resume`, `toast.getConfig`.
|
|
235
|
+
|
|
236
|
+
## Contributing
|
|
237
|
+
|
|
238
|
+
Contributions are welcome! Fork the repo, create a branch, and open a PR. For bigger changes, open an issue first.
|
|
239
|
+
|
|
240
|
+
1. Fork the project
|
|
241
|
+
2. Create your branch
|
|
242
|
+
3. Commit your changes
|
|
243
|
+
4. Push to the branch
|
|
244
|
+
5. Open a Pull Request
|
|
245
|
+
|
|
246
|
+
## License
|
|
247
|
+
|
|
248
|
+
MIT - see [LICENSE](https://github.com/adrianjanocko/toastflow/blob/main/LICENSE).
|