toast-builder-vue3 1.0.13 â 1.0.14
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 +518 -247
- package/package.json +30 -4
- package/dist/index.d.ts +0 -104
package/README.md
CHANGED
|
@@ -1,348 +1,619 @@
|
|
|
1
|
-
# Toast
|
|
1
|
+
# đ Toast Builder Vue3
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<div align="center">
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/toast-builder-vue3)
|
|
6
|
+
[](https://www.npmjs.com/package/toast-builder-vue3)
|
|
7
|
+
[](https://bundlephobia.com/package/toast-builder-vue3)
|
|
8
|
+
[](https://github.com/highpriv/toast-builder/blob/master/LICENSE)
|
|
9
|
+
[](https://www.typescriptlang.org/)
|
|
10
|
+
[](https://vuejs.org/)
|
|
6
11
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
12
|
+
**Modern, lightweight, and fully customizable toast notification system for Vue 3 with TypeScript support**
|
|
13
|
+
|
|
14
|
+
[Live Demo](https://toast-builder.vercel.app/) âĸ [Documentation](#-documentation) âĸ [Examples](#-usage-examples) âĸ [NPM Package](https://www.npmjs.com/package/toast-builder-vue3)
|
|
15
|
+
|
|
16
|
+
</div>
|
|
11
17
|
|
|
12
18
|
---
|
|
13
19
|
|
|
14
|
-
## Features
|
|
20
|
+
## ⨠Features
|
|
21
|
+
|
|
22
|
+
- đ¨ **Fully Customizable** - Colors, icons, animations, positions, and more
|
|
23
|
+
- đ **Multiple Animation Styles** - Fade, slide, and bounce animations built-in
|
|
24
|
+
- đ **6 Position Options** - Top/Bottom à Left/Center/Right placement
|
|
25
|
+
- đŧī¸ **Custom Icons** - Use custom icons via URL, Base64, or built-in icon library
|
|
26
|
+
- âąī¸ **Auto-dismiss & Progress Bar** - Optional countdown with visual progress indicator
|
|
27
|
+
- đ¯ **Multiple Toast Stacking** - Display multiple notifications simultaneously
|
|
28
|
+
- đą **Responsive & Accessible** - Works seamlessly on all devices
|
|
29
|
+
- đ **Type-Safe** - Full TypeScript support with comprehensive type definitions
|
|
30
|
+
- đĒļ **Lightweight** - Minimal bundle size with zero dependencies (except Vue & nanoid)
|
|
31
|
+
- đ¨ **Theme Support** - Compatible with dark/light theme applications
|
|
32
|
+
- đ§ **Composition API** - Modern Vue 3 Composition API with `useToast` composable
|
|
33
|
+
- ⥠**Vite-powered** - Built with Vite for optimal performance
|
|
15
34
|
|
|
16
|
-
|
|
35
|
+
---
|
|
17
36
|
|
|
18
|
-
|
|
19
|
-
- 4 notification types (success, error, warning, info)
|
|
20
|
-
- Title and message inputs with validation
|
|
21
|
-
- Duration slider (1-10 seconds) or persistent mode
|
|
22
|
-
- 6 position options (top/bottom à left/center/right)
|
|
37
|
+
## đĻ Installation
|
|
23
38
|
|
|
24
|
-
|
|
25
|
-
- Background and text color pickers with hex input
|
|
26
|
-
- Icon visibility toggle
|
|
27
|
-
- Close button toggle
|
|
28
|
-
- Progress bar toggle
|
|
39
|
+
### NPM
|
|
29
40
|
|
|
30
|
-
|
|
41
|
+
```bash
|
|
42
|
+
npm install toast-builder-vue3
|
|
43
|
+
```
|
|
31
44
|
|
|
32
|
-
|
|
33
|
-
- Save current configuration as named presets
|
|
34
|
-
- Load previously saved presets
|
|
35
|
-
- Delete unwanted presets
|
|
36
|
-
- Persistent storage using localStorage
|
|
45
|
+
### Yarn
|
|
37
46
|
|
|
38
|
-
|
|
47
|
+
```bash
|
|
48
|
+
yarn add toast-builder-vue3
|
|
49
|
+
```
|
|
39
50
|
|
|
40
|
-
###
|
|
51
|
+
### PNPM
|
|
41
52
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
- **Custom Icon Upload**: Upload custom icons with automatic compression (max 128Ã128, 100KB)
|
|
46
|
-
- **Custom Icon URLs**: Use external icon URLs with validation
|
|
47
|
-
- **Dark/Light Theme**: Toggle between themes with system preference detection
|
|
48
|
-
- **Built-in Icon Library**: 15 pre-configured icons for immediate use
|
|
53
|
+
```bash
|
|
54
|
+
pnpm add toast-builder-vue3
|
|
55
|
+
```
|
|
49
56
|
|
|
50
57
|
---
|
|
51
58
|
|
|
52
|
-
##
|
|
59
|
+
## đ Quick Start
|
|
53
60
|
|
|
54
|
-
|
|
55
|
-
| ------------------ | ------- | ------------------------------------ |
|
|
56
|
-
| **Vue 3** | 3.5.25 | Frontend framework (Composition API) |
|
|
57
|
-
| **TypeScript** | 5.9 | Type safety and better DX |
|
|
58
|
-
| **Vite** | 7.3 | Build tool and dev server |
|
|
59
|
-
| **Jest** | 29.7 | Testing framework |
|
|
60
|
-
| **Vue Test Utils** | 2.4.6 | Vue component testing |
|
|
61
|
-
| **Nanoid** | 5.0.7 | Unique ID generation |
|
|
62
|
-
| **SCSS Modules** | - | Scoped styling |
|
|
61
|
+
### 1. Import the CSS
|
|
63
62
|
|
|
64
|
-
|
|
63
|
+
In your `main.ts` or `main.js`:
|
|
64
|
+
|
|
65
|
+
```typescript
|
|
66
|
+
import { createApp } from 'vue';
|
|
67
|
+
import App from './App.vue';
|
|
65
68
|
|
|
66
|
-
|
|
69
|
+
// Import toast styles
|
|
70
|
+
import 'toast-builder-vue3/dist/toast-builder-vue3.css';
|
|
67
71
|
|
|
68
|
-
|
|
69
|
-
|
|
72
|
+
createApp(App).mount('#app');
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### 2. Add ToastContainer to Your App
|
|
76
|
+
|
|
77
|
+
In your root component (e.g., `App.vue`):
|
|
78
|
+
|
|
79
|
+
```vue
|
|
80
|
+
<template>
|
|
81
|
+
<div id="app">
|
|
82
|
+
<!-- Your app content -->
|
|
83
|
+
<router-view />
|
|
84
|
+
|
|
85
|
+
<!-- Toast Container - Add this at the root level -->
|
|
86
|
+
<ToastContainer />
|
|
87
|
+
</div>
|
|
88
|
+
</template>
|
|
89
|
+
|
|
90
|
+
<script setup lang="ts">
|
|
91
|
+
import { ToastContainer } from 'toast-builder-vue3';
|
|
92
|
+
</script>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### 3. Use Toast Notifications
|
|
96
|
+
|
|
97
|
+
In any component:
|
|
98
|
+
|
|
99
|
+
```vue
|
|
100
|
+
<template>
|
|
101
|
+
<button @click="showSuccessToast">Show Success</button>
|
|
102
|
+
<button @click="showErrorToast">Show Error</button>
|
|
103
|
+
<button @click="showCustomToast">Show Custom</button>
|
|
104
|
+
</template>
|
|
105
|
+
|
|
106
|
+
<script setup lang="ts">
|
|
107
|
+
import { useToast } from 'toast-builder-vue3';
|
|
108
|
+
|
|
109
|
+
const { showToast } = useToast();
|
|
110
|
+
|
|
111
|
+
const showSuccessToast = () => {
|
|
112
|
+
showToast({
|
|
113
|
+
type: 'success',
|
|
114
|
+
title: 'Success!',
|
|
115
|
+
message: 'Your operation completed successfully.',
|
|
116
|
+
duration: 3000,
|
|
117
|
+
position: 'top-right',
|
|
118
|
+
backgroundColor: '#10b981',
|
|
119
|
+
textColor: '#ffffff',
|
|
120
|
+
showIcon: true,
|
|
121
|
+
showCloseButton: true,
|
|
122
|
+
showProgress: true,
|
|
123
|
+
animation: 'slide'
|
|
124
|
+
});
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
const showErrorToast = () => {
|
|
128
|
+
showToast({
|
|
129
|
+
type: 'error',
|
|
130
|
+
title: 'Error!',
|
|
131
|
+
message: 'Something went wrong.',
|
|
132
|
+
duration: 5000,
|
|
133
|
+
position: 'top-right',
|
|
134
|
+
backgroundColor: '#ef4444',
|
|
135
|
+
textColor: '#ffffff',
|
|
136
|
+
showIcon: true,
|
|
137
|
+
showCloseButton: true,
|
|
138
|
+
showProgress: true,
|
|
139
|
+
animation: 'bounce'
|
|
140
|
+
});
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
const showCustomToast = () => {
|
|
144
|
+
showToast({
|
|
145
|
+
type: 'info',
|
|
146
|
+
title: 'Custom Toast',
|
|
147
|
+
message: 'This is a fully customized toast notification!',
|
|
148
|
+
duration: 4000,
|
|
149
|
+
position: 'bottom-center',
|
|
150
|
+
backgroundColor: '#8b5cf6',
|
|
151
|
+
textColor: '#ffffff',
|
|
152
|
+
showIcon: true,
|
|
153
|
+
showCloseButton: true,
|
|
154
|
+
showProgress: true,
|
|
155
|
+
animation: 'fade',
|
|
156
|
+
customIcon: 'sparkles' // Use built-in icon
|
|
157
|
+
});
|
|
158
|
+
};
|
|
159
|
+
</script>
|
|
160
|
+
```
|
|
70
161
|
|
|
71
162
|
---
|
|
72
163
|
|
|
73
|
-
##
|
|
164
|
+
## đ Documentation
|
|
74
165
|
|
|
75
|
-
###
|
|
166
|
+
### ToastContainer Component
|
|
76
167
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
168
|
+
The `ToastContainer` component is responsible for rendering all active toast notifications. It should be added once to your root component.
|
|
169
|
+
|
|
170
|
+
```vue
|
|
171
|
+
<template>
|
|
172
|
+
<ToastContainer />
|
|
173
|
+
</template>
|
|
174
|
+
|
|
175
|
+
<script setup lang="ts">
|
|
176
|
+
import { ToastContainer } from 'toast-builder-vue3';
|
|
177
|
+
</script>
|
|
80
178
|
```
|
|
81
179
|
|
|
82
|
-
|
|
180
|
+
**Note:** No props needed - it automatically manages all active toasts.
|
|
83
181
|
|
|
84
|
-
|
|
85
|
-
|
|
182
|
+
---
|
|
183
|
+
|
|
184
|
+
### useToast Composable
|
|
185
|
+
|
|
186
|
+
The `useToast` composable provides methods to manage toast notifications.
|
|
187
|
+
|
|
188
|
+
#### API Reference
|
|
189
|
+
|
|
190
|
+
```typescript
|
|
191
|
+
const {
|
|
192
|
+
showToast,
|
|
193
|
+
dismissToast,
|
|
194
|
+
clearAllToasts,
|
|
195
|
+
activeToasts,
|
|
196
|
+
dismissedToasts,
|
|
197
|
+
getToastsByPosition,
|
|
198
|
+
undoLastDismissed
|
|
199
|
+
} = useToast();
|
|
86
200
|
```
|
|
87
201
|
|
|
88
|
-
|
|
202
|
+
#### Methods
|
|
89
203
|
|
|
90
|
-
|
|
91
|
-
|
|
204
|
+
##### `showToast(config: NotificationConfig)`
|
|
205
|
+
|
|
206
|
+
Display a new toast notification.
|
|
207
|
+
|
|
208
|
+
**Parameters:**
|
|
209
|
+
|
|
210
|
+
| Property | Type | Required | Default | Description |
|
|
211
|
+
|----------|------|----------|---------|-------------|
|
|
212
|
+
| `type` | `'success' \| 'error' \| 'warning' \| 'info'` | â
Yes | - | Toast type |
|
|
213
|
+
| `message` | `string` | â
Yes | - | Toast message content |
|
|
214
|
+
| `title` | `string` | â No | `''` | Toast title (optional) |
|
|
215
|
+
| `duration` | `number` | â
Yes | `3000` | Auto-dismiss duration (ms), 0 for persistent |
|
|
216
|
+
| `position` | `Position` | â
Yes | `'top-right'` | Toast position on screen |
|
|
217
|
+
| `backgroundColor` | `string` | â
Yes | - | Background color (hex) |
|
|
218
|
+
| `textColor` | `string` | â
Yes | - | Text color (hex) |
|
|
219
|
+
| `showIcon` | `boolean` | â
Yes | `true` | Show/hide icon |
|
|
220
|
+
| `showCloseButton` | `boolean` | â
Yes | `true` | Show/hide close button |
|
|
221
|
+
| `showProgress` | `boolean` | â No | `false` | Show progress bar |
|
|
222
|
+
| `animation` | `'fade' \| 'slide' \| 'bounce'` | â No | `'fade'` | Animation style |
|
|
223
|
+
| `customIcon` | `IconName` | â No | - | Built-in icon name |
|
|
224
|
+
| `customIconUrl` | `string` | â No | - | Custom icon URL |
|
|
225
|
+
| `customIconBase64` | `string` | â No | - | Custom icon Base64 |
|
|
226
|
+
| `customCloseButtonUrl` | `string` | â No | - | Custom close button URL |
|
|
227
|
+
| `customCloseButtonBase64` | `string` | â No | - | Custom close button Base64 |
|
|
228
|
+
|
|
229
|
+
**Returns:** `string` - Unique toast ID
|
|
230
|
+
|
|
231
|
+
**Example:**
|
|
232
|
+
|
|
233
|
+
```typescript
|
|
234
|
+
const toastId = showToast({
|
|
235
|
+
type: 'success',
|
|
236
|
+
title: 'Welcome!',
|
|
237
|
+
message: 'You have successfully logged in.',
|
|
238
|
+
duration: 3000,
|
|
239
|
+
position: 'top-right',
|
|
240
|
+
backgroundColor: '#10b981',
|
|
241
|
+
textColor: '#ffffff',
|
|
242
|
+
showIcon: true,
|
|
243
|
+
showCloseButton: true,
|
|
244
|
+
showProgress: true,
|
|
245
|
+
animation: 'slide'
|
|
246
|
+
});
|
|
92
247
|
```
|
|
93
248
|
|
|
94
|
-
|
|
249
|
+
##### `dismissToast(id: string)`
|
|
95
250
|
|
|
96
|
-
|
|
251
|
+
Dismiss a specific toast by its ID.
|
|
97
252
|
|
|
98
|
-
```
|
|
99
|
-
|
|
253
|
+
```typescript
|
|
254
|
+
dismissToast(toastId);
|
|
100
255
|
```
|
|
101
256
|
|
|
102
|
-
|
|
257
|
+
##### `clearAllToasts()`
|
|
103
258
|
|
|
104
|
-
|
|
259
|
+
Dismiss all active toasts.
|
|
105
260
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
| `npm run build` | Build for production (`dist/` folder) |
|
|
110
|
-
| `npm run preview` | Preview production build locally |
|
|
111
|
-
| `npm run test` | Run all tests |
|
|
112
|
-
| `npm run test:watch` | Run tests in watch mode |
|
|
113
|
-
| `npm run test:coverage` | Generate test coverage report |
|
|
114
|
-
| `npm run type-check` | Run TypeScript type checking |
|
|
261
|
+
```typescript
|
|
262
|
+
clearAllToasts();
|
|
263
|
+
```
|
|
115
264
|
|
|
116
|
-
|
|
265
|
+
##### `undoLastDismissed()`
|
|
117
266
|
|
|
118
|
-
|
|
267
|
+
Restore the last dismissed toast.
|
|
119
268
|
|
|
269
|
+
```typescript
|
|
270
|
+
undoLastDismissed();
|
|
120
271
|
```
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
â â â âââ TypeSelector.vue
|
|
129
|
-
â â â âââ PositionSelector.vue
|
|
130
|
-
â â â âââ ContentControls.vue
|
|
131
|
-
â â â âââ StyleControls.vue
|
|
132
|
-
â â â âââ AnimationSelector.vue
|
|
133
|
-
â â â âââ PresetManager.vue
|
|
134
|
-
â â â âââ CodeExport.vue
|
|
135
|
-
â â âââ common/ # Reusable UI components
|
|
136
|
-
â â â âââ BaseButton.vue
|
|
137
|
-
â â â âââ BaseInput.vue
|
|
138
|
-
â â â âââ BaseSelect.vue
|
|
139
|
-
â â â âââ BaseRadio.vue
|
|
140
|
-
â â â âââ ColorPicker.vue
|
|
141
|
-
â â â âââ Icon.vue
|
|
142
|
-
â â â âââ ThemeToggle.vue
|
|
143
|
-
â â âââ toast/ # Toast display components
|
|
144
|
-
â â âââ Toast.vue
|
|
145
|
-
â â âââ ToastContainer.vue
|
|
146
|
-
â âââ composables/ # Vue composition functions
|
|
147
|
-
â â âââ useToast.ts # Toast state management
|
|
148
|
-
â â âââ useToastBuilder.ts # Builder config management
|
|
149
|
-
â â âââ usePresets.ts # Preset CRUD operations
|
|
150
|
-
â â âââ useTheme.ts # Theme management
|
|
151
|
-
â â âââ useAnimation.ts # Animation utilities
|
|
152
|
-
â â âââ useClipboard.ts # Copy-to-clipboard functionality
|
|
153
|
-
â âââ utils/ # Helper functions
|
|
154
|
-
â â âââ validators.ts # Input validation
|
|
155
|
-
â â âââ storage.ts # localStorage abstraction
|
|
156
|
-
â â âââ code-generator.ts # Code export logic
|
|
157
|
-
â â âââ color-utils.ts # Color manipulation
|
|
158
|
-
â â âââ image-utils.ts # Image compression & validation
|
|
159
|
-
â â âââ nanoid.ts # ID generation
|
|
160
|
-
â âââ types/ # TypeScript type definitions
|
|
161
|
-
â â âââ toast.ts
|
|
162
|
-
â â âââ builder.ts
|
|
163
|
-
â â âââ animation.ts
|
|
164
|
-
â â âââ theme.ts
|
|
165
|
-
â âââ constants/ # App constants
|
|
166
|
-
â â âââ toast-defaults.ts
|
|
167
|
-
â â âââ animation-presets.ts
|
|
168
|
-
â â âââ color-palettes.ts
|
|
169
|
-
â â âââ icon-library.ts
|
|
170
|
-
â âââ styles/ # Global styles
|
|
171
|
-
â â âââ main.scss
|
|
172
|
-
â â âââ _variables.scss
|
|
173
|
-
â â âââ _reset.scss
|
|
174
|
-
â â âââ _animations.scss
|
|
175
|
-
â âââ App.vue
|
|
176
|
-
â âââ main.ts
|
|
177
|
-
âââ tests/
|
|
178
|
-
â âââ unit/
|
|
179
|
-
â â âââ utils/
|
|
180
|
-
â â âââ validators.spec.ts
|
|
181
|
-
â âââ setup.ts
|
|
182
|
-
â âââ __mocks__/
|
|
183
|
-
âââ package.json
|
|
184
|
-
âââ vite.config.ts
|
|
185
|
-
âââ tsconfig.json
|
|
186
|
-
âââ jest.config.cjs
|
|
272
|
+
|
|
273
|
+
##### `getToastsByPosition(position: Position)`
|
|
274
|
+
|
|
275
|
+
Get all toasts at a specific position.
|
|
276
|
+
|
|
277
|
+
```typescript
|
|
278
|
+
const topRightToasts = getToastsByPosition('top-right');
|
|
187
279
|
```
|
|
188
280
|
|
|
189
|
-
|
|
281
|
+
#### Reactive Properties
|
|
282
|
+
|
|
283
|
+
##### `activeToasts`
|
|
190
284
|
|
|
191
|
-
|
|
285
|
+
Computed ref containing all currently active toasts.
|
|
192
286
|
|
|
193
|
-
|
|
287
|
+
```typescript
|
|
288
|
+
const { activeToasts } = useToast();
|
|
289
|
+
console.log(activeToasts.value); // ActiveNotification[]
|
|
290
|
+
```
|
|
194
291
|
|
|
195
|
-
|
|
292
|
+
##### `dismissedToasts`
|
|
196
293
|
|
|
197
|
-
|
|
198
|
-
2. **Business Logic** (`composables/`): Shared state management and functionality using Vue composables
|
|
199
|
-
3. **Utilities** (`utils/`): Pure functions for validation, storage, code generation
|
|
200
|
-
4. **Type Safety**: Strict TypeScript configuration with comprehensive type definitions
|
|
294
|
+
Computed ref containing recently dismissed toasts (kept for 30 seconds for undo).
|
|
201
295
|
|
|
202
|
-
|
|
296
|
+
```typescript
|
|
297
|
+
const { dismissedToasts } = useToast();
|
|
298
|
+
console.log(dismissedToasts.value); // ActiveNotification[]
|
|
299
|
+
```
|
|
203
300
|
|
|
204
|
-
|
|
301
|
+
---
|
|
205
302
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
303
|
+
## đ¨ Usage Examples
|
|
304
|
+
|
|
305
|
+
### Basic Success Notification
|
|
306
|
+
|
|
307
|
+
```vue
|
|
308
|
+
<script setup lang="ts">
|
|
309
|
+
import { useToast } from 'toast-builder-vue3';
|
|
310
|
+
|
|
311
|
+
const { showToast } = useToast();
|
|
312
|
+
|
|
313
|
+
const handleSuccess = () => {
|
|
314
|
+
showToast({
|
|
315
|
+
type: 'success',
|
|
316
|
+
message: 'Operation completed successfully!',
|
|
317
|
+
duration: 3000,
|
|
318
|
+
position: 'top-right',
|
|
319
|
+
backgroundColor: '#10b981',
|
|
320
|
+
textColor: '#ffffff',
|
|
321
|
+
showIcon: true,
|
|
322
|
+
showCloseButton: true
|
|
323
|
+
});
|
|
324
|
+
};
|
|
325
|
+
</script>
|
|
326
|
+
```
|
|
209
327
|
|
|
210
|
-
|
|
328
|
+
### Persistent Toast (No Auto-dismiss)
|
|
211
329
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
330
|
+
```typescript
|
|
331
|
+
showToast({
|
|
332
|
+
type: 'warning',
|
|
333
|
+
title: 'Important Notice',
|
|
334
|
+
message: 'This notification will stay until you close it.',
|
|
335
|
+
duration: 0, // 0 means persistent
|
|
336
|
+
position: 'top-center',
|
|
337
|
+
backgroundColor: '#f59e0b',
|
|
338
|
+
textColor: '#000000',
|
|
339
|
+
showIcon: true,
|
|
340
|
+
showCloseButton: true
|
|
341
|
+
});
|
|
342
|
+
```
|
|
215
343
|
|
|
216
|
-
|
|
344
|
+
### Custom Icon from URL
|
|
217
345
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
346
|
+
```typescript
|
|
347
|
+
showToast({
|
|
348
|
+
type: 'info',
|
|
349
|
+
title: 'New Message',
|
|
350
|
+
message: 'You have received a new message.',
|
|
351
|
+
duration: 4000,
|
|
352
|
+
position: 'bottom-right',
|
|
353
|
+
backgroundColor: '#3b82f6',
|
|
354
|
+
textColor: '#ffffff',
|
|
355
|
+
showIcon: true,
|
|
356
|
+
showCloseButton: true,
|
|
357
|
+
customIconUrl: 'https://example.com/icon.png'
|
|
358
|
+
});
|
|
359
|
+
```
|
|
221
360
|
|
|
222
|
-
|
|
361
|
+
### Using Built-in Icons
|
|
223
362
|
|
|
224
|
-
-
|
|
225
|
-
- User-friendly error messages
|
|
226
|
-
- Prevents invalid configurations
|
|
363
|
+
Available built-in icons: `check-circle`, `check`, `badge-check`, `x-circle`, `alert-circle`, `exclamation-circle`, `alert-triangle`, `exclamation-triangle`, `information-circle`, `question-mark-circle`, `bell`, `megaphone`, `sparkles`, `heart`, `moon`, `sun`
|
|
227
364
|
|
|
228
|
-
|
|
365
|
+
```typescript
|
|
366
|
+
showToast({
|
|
367
|
+
type: 'success',
|
|
368
|
+
message: 'Achievement unlocked!',
|
|
369
|
+
duration: 3000,
|
|
370
|
+
position: 'top-center',
|
|
371
|
+
backgroundColor: '#8b5cf6',
|
|
372
|
+
textColor: '#ffffff',
|
|
373
|
+
showIcon: true,
|
|
374
|
+
showCloseButton: true,
|
|
375
|
+
customIcon: 'sparkles' // Built-in icon
|
|
376
|
+
});
|
|
377
|
+
```
|
|
229
378
|
|
|
230
|
-
|
|
231
|
-
- Maximum dimensions (128Ã128px)
|
|
232
|
-
- File size limit (100KB)
|
|
233
|
-
- Supported formats: PNG, JPEG, GIF, WebP, SVG
|
|
379
|
+
### With Progress Bar and Bounce Animation
|
|
234
380
|
|
|
235
|
-
|
|
381
|
+
```typescript
|
|
382
|
+
showToast({
|
|
383
|
+
type: 'error',
|
|
384
|
+
title: 'Upload Failed',
|
|
385
|
+
message: 'Failed to upload file. Please try again.',
|
|
386
|
+
duration: 5000,
|
|
387
|
+
position: 'top-right',
|
|
388
|
+
backgroundColor: '#ef4444',
|
|
389
|
+
textColor: '#ffffff',
|
|
390
|
+
showIcon: true,
|
|
391
|
+
showCloseButton: true,
|
|
392
|
+
showProgress: true, // Show progress bar
|
|
393
|
+
animation: 'bounce' // Bounce animation
|
|
394
|
+
});
|
|
395
|
+
```
|
|
236
396
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
397
|
+
### Form Validation Example
|
|
398
|
+
|
|
399
|
+
```vue
|
|
400
|
+
<template>
|
|
401
|
+
<form @submit.prevent="handleSubmit">
|
|
402
|
+
<input v-model="email" type="email" placeholder="Email" />
|
|
403
|
+
<input v-model="password" type="password" placeholder="Password" />
|
|
404
|
+
<button type="submit">Login</button>
|
|
405
|
+
</form>
|
|
406
|
+
</template>
|
|
407
|
+
|
|
408
|
+
<script setup lang="ts">
|
|
409
|
+
import { ref } from 'vue';
|
|
410
|
+
import { useToast } from 'toast-builder-vue3';
|
|
411
|
+
|
|
412
|
+
const email = ref('');
|
|
413
|
+
const password = ref('');
|
|
414
|
+
const { showToast } = useToast();
|
|
415
|
+
|
|
416
|
+
const handleSubmit = async () => {
|
|
417
|
+
if (!email.value || !password.value) {
|
|
418
|
+
showToast({
|
|
419
|
+
type: 'error',
|
|
420
|
+
title: 'Validation Error',
|
|
421
|
+
message: 'Please fill in all fields.',
|
|
422
|
+
duration: 3000,
|
|
423
|
+
position: 'top-right',
|
|
424
|
+
backgroundColor: '#ef4444',
|
|
425
|
+
textColor: '#ffffff',
|
|
426
|
+
showIcon: true,
|
|
427
|
+
showCloseButton: true,
|
|
428
|
+
animation: 'shake'
|
|
429
|
+
});
|
|
430
|
+
return;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
try {
|
|
434
|
+
await login(email.value, password.value);
|
|
435
|
+
showToast({
|
|
436
|
+
type: 'success',
|
|
437
|
+
title: 'Success!',
|
|
438
|
+
message: 'You have successfully logged in.',
|
|
439
|
+
duration: 3000,
|
|
440
|
+
position: 'top-right',
|
|
441
|
+
backgroundColor: '#10b981',
|
|
442
|
+
textColor: '#ffffff',
|
|
443
|
+
showIcon: true,
|
|
444
|
+
showCloseButton: true,
|
|
445
|
+
showProgress: true,
|
|
446
|
+
animation: 'slide'
|
|
447
|
+
});
|
|
448
|
+
} catch (error) {
|
|
449
|
+
showToast({
|
|
450
|
+
type: 'error',
|
|
451
|
+
title: 'Login Failed',
|
|
452
|
+
message: error.message,
|
|
453
|
+
duration: 5000,
|
|
454
|
+
position: 'top-right',
|
|
455
|
+
backgroundColor: '#ef4444',
|
|
456
|
+
textColor: '#ffffff',
|
|
457
|
+
showIcon: true,
|
|
458
|
+
showCloseButton: true,
|
|
459
|
+
showProgress: true
|
|
460
|
+
});
|
|
461
|
+
}
|
|
462
|
+
};
|
|
463
|
+
</script>
|
|
464
|
+
```
|
|
240
465
|
|
|
241
|
-
###
|
|
466
|
+
### Managing Multiple Toasts
|
|
242
467
|
|
|
243
468
|
```typescript
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
const
|
|
248
|
-
const
|
|
469
|
+
const { showToast, dismissToast, clearAllToasts, activeToasts } = useToast();
|
|
470
|
+
|
|
471
|
+
// Show multiple toasts
|
|
472
|
+
const id1 = showToast({ /* config */ });
|
|
473
|
+
const id2 = showToast({ /* config */ });
|
|
474
|
+
const id3 = showToast({ /* config */ });
|
|
475
|
+
|
|
476
|
+
// Dismiss specific toast
|
|
477
|
+
dismissToast(id2);
|
|
478
|
+
|
|
479
|
+
// Check active toasts count
|
|
480
|
+
console.log(`Active toasts: ${activeToasts.value.length}`);
|
|
481
|
+
|
|
482
|
+
// Clear all toasts
|
|
483
|
+
clearAllToasts();
|
|
249
484
|
```
|
|
250
485
|
|
|
251
|
-
|
|
486
|
+
---
|
|
487
|
+
|
|
488
|
+
## đ Position Options
|
|
252
489
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
-
|
|
490
|
+
Toasts can be positioned in 6 different locations:
|
|
491
|
+
|
|
492
|
+
- `top-left` - Top left corner
|
|
493
|
+
- `top-center` - Top center
|
|
494
|
+
- `top-right` - Top right corner
|
|
495
|
+
- `bottom-left` - Bottom left corner
|
|
496
|
+
- `bottom-center` - Bottom center
|
|
497
|
+
- `bottom-right` - Bottom right corner
|
|
256
498
|
|
|
257
499
|
---
|
|
258
500
|
|
|
259
|
-
##
|
|
501
|
+
## đŦ Animation Styles
|
|
502
|
+
|
|
503
|
+
Three built-in animation styles:
|
|
504
|
+
|
|
505
|
+
| Animation | Description | Duration |
|
|
506
|
+
|-----------|-------------|----------|
|
|
507
|
+
| `fade` | Simple fade in/out | 300ms |
|
|
508
|
+
| `slide` | Slide from right | 400ms |
|
|
509
|
+
| `bounce` | Bouncy entrance | 500ms |
|
|
260
510
|
|
|
261
|
-
|
|
511
|
+
---
|
|
262
512
|
|
|
263
|
-
|
|
264
|
-
2. **Modern browser support**: Assumes ES2020+ features (async/await, optional chaining, etc.)
|
|
265
|
-
3. **JavaScript enabled**: Application requires JavaScript to function
|
|
266
|
-
4. **localStorage available**: Presets require localStorage (graceful degradation if unavailable)
|
|
513
|
+
## đ¨ Default Colors
|
|
267
514
|
|
|
268
|
-
|
|
515
|
+
Recommended colors for each type:
|
|
269
516
|
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
517
|
+
| Type | Background | Text |
|
|
518
|
+
|------|------------|------|
|
|
519
|
+
| `success` | `#10b981` | `#ffffff` |
|
|
520
|
+
| `error` | `#ef4444` | `#ffffff` |
|
|
521
|
+
| `warning` | `#f59e0b` | `#000000` |
|
|
522
|
+
| `info` | `#3b82f6` | `#ffffff` |
|
|
276
523
|
|
|
277
|
-
|
|
524
|
+
---
|
|
278
525
|
|
|
279
|
-
|
|
280
|
-
- **Message**: Required, 1-200 characters
|
|
281
|
-
- **Duration**: 1000ms - 10000ms or 0 (persistent)
|
|
282
|
-
- **Preset name**: 1-50 characters
|
|
283
|
-
- **Image files**: â¤5MB, PNG/JPEG/GIF/WebP/SVG only
|
|
284
|
-
- **Image URLs**: Must end with valid image extension
|
|
526
|
+
## đ TypeScript Support
|
|
285
527
|
|
|
286
|
-
|
|
528
|
+
Full TypeScript support with comprehensive type definitions:
|
|
287
529
|
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
530
|
+
```typescript
|
|
531
|
+
import type {
|
|
532
|
+
NotificationConfig,
|
|
533
|
+
ActiveNotification,
|
|
534
|
+
NotificationType,
|
|
535
|
+
Position,
|
|
536
|
+
AnimationType,
|
|
537
|
+
IconName
|
|
538
|
+
} from 'toast-builder-vue3';
|
|
539
|
+
|
|
540
|
+
const config: NotificationConfig = {
|
|
541
|
+
id: '123',
|
|
542
|
+
type: 'success',
|
|
543
|
+
title: 'Success',
|
|
544
|
+
message: 'Operation completed',
|
|
545
|
+
duration: 3000,
|
|
546
|
+
position: 'top-right',
|
|
547
|
+
backgroundColor: '#10b981',
|
|
548
|
+
textColor: '#ffffff',
|
|
549
|
+
showIcon: true,
|
|
550
|
+
showCloseButton: true,
|
|
551
|
+
showProgress: true,
|
|
552
|
+
animation: 'slide'
|
|
553
|
+
};
|
|
554
|
+
```
|
|
292
555
|
|
|
293
556
|
---
|
|
294
557
|
|
|
295
|
-
##
|
|
558
|
+
## đ ī¸ Browser Support
|
|
296
559
|
|
|
297
|
-
|
|
560
|
+
- Chrome âĨ 90
|
|
561
|
+
- Firefox âĨ 88
|
|
562
|
+
- Safari âĨ 14
|
|
563
|
+
- Edge âĨ 90
|
|
298
564
|
|
|
299
|
-
|
|
300
|
-
# Run all tests
|
|
301
|
-
npm run test
|
|
565
|
+
---
|
|
302
566
|
|
|
303
|
-
|
|
304
|
-
npm run test:coverage
|
|
567
|
+
## đ License
|
|
305
568
|
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
569
|
+
[GPL-3.0](LICENSE) Š [Canberk Beren](https://github.com/highpriv)
|
|
570
|
+
|
|
571
|
+
---
|
|
309
572
|
|
|
310
|
-
|
|
573
|
+
## đ¤ Contributing
|
|
311
574
|
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
-
|
|
575
|
+
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
576
|
+
|
|
577
|
+
1. Fork the repository
|
|
578
|
+
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
|
|
579
|
+
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
|
|
580
|
+
4. Push to the branch (`git push origin feature/AmazingFeature`)
|
|
581
|
+
5. Open a Pull Request
|
|
317
582
|
|
|
318
583
|
---
|
|
319
584
|
|
|
320
|
-
##
|
|
585
|
+
## đ Links
|
|
321
586
|
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
5. **Select animation** (fade, slide, bounce)
|
|
327
|
-
6. **Preview in real-time** - See changes instantly
|
|
328
|
-
7. **Test behavior** - Click "Show Notification" to trigger actual toast
|
|
329
|
-
8. **Save as preset** (optional) - Save for reuse
|
|
330
|
-
9. **Export code** - Get Vue 3 or JavaScript code
|
|
587
|
+
- [NPM Package](https://www.npmjs.com/package/toast-builder-vue3)
|
|
588
|
+
- [Live Demo](https://toast-builder.vercel.app/)
|
|
589
|
+
- [GitHub Repository](https://github.com/highpriv/toast-builder)
|
|
590
|
+
- [Issue Tracker](https://github.com/highpriv/toast-builder/issues)
|
|
331
591
|
|
|
332
592
|
---
|
|
333
593
|
|
|
334
|
-
##
|
|
594
|
+
## đ Package Stats
|
|
335
595
|
|
|
336
|
-
|
|
596
|
+
|
|
597
|
+
|
|
598
|
+
|
|
337
599
|
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
600
|
+
---
|
|
601
|
+
|
|
602
|
+
## đ Show Your Support
|
|
603
|
+
|
|
604
|
+
Give a âī¸ if this project helped you!
|
|
341
605
|
|
|
342
|
-
|
|
606
|
+
---
|
|
607
|
+
|
|
608
|
+
## đ¨âđģ Author
|
|
609
|
+
|
|
610
|
+
**Canberk Beren**
|
|
611
|
+
|
|
612
|
+
- GitHub: [@highpriv](https://github.com/highpriv)
|
|
613
|
+
- NPM: [toast-builder-vue3](https://www.npmjs.com/package/toast-builder-vue3)
|
|
614
|
+
|
|
615
|
+
---
|
|
343
616
|
|
|
344
|
-
|
|
617
|
+
## đ Keywords
|
|
345
618
|
|
|
346
|
-
-
|
|
347
|
-
- Build command: `npm run build`
|
|
348
|
-
- Install command: `npm install`
|
|
619
|
+
vue3, vue, toast, notification, toaster, notifications, message, alert, snackbar, popup, vue-toast, vue-notification, toast-notification, vue3-toast, typescript, composition-api, notification-system, toast-message, vue-component, ui-component
|
package/package.json
CHANGED
|
@@ -1,18 +1,44 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "toast-builder-vue3",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.14",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"description": "
|
|
6
|
+
"description": "Modern, lightweight, and fully customizable toast notification system for Vue 3 with TypeScript. Beautiful alerts, snackbars, and notifications with animations, icons, and progress bars.",
|
|
7
7
|
"author": "Canberk Beren",
|
|
8
8
|
"license": "GPL-3.0",
|
|
9
9
|
"keywords": [
|
|
10
|
+
"vue",
|
|
10
11
|
"vue3",
|
|
11
|
-
"
|
|
12
|
+
"vuejs",
|
|
12
13
|
"toast",
|
|
13
14
|
"notification",
|
|
15
|
+
"toaster",
|
|
16
|
+
"notifications",
|
|
17
|
+
"message",
|
|
18
|
+
"alert",
|
|
19
|
+
"snackbar",
|
|
20
|
+
"popup",
|
|
21
|
+
"vue-toast",
|
|
22
|
+
"vue-notification",
|
|
23
|
+
"toast-notification",
|
|
24
|
+
"vue3-toast",
|
|
25
|
+
"typescript",
|
|
26
|
+
"composition-api",
|
|
27
|
+
"notification-system",
|
|
28
|
+
"toast-message",
|
|
29
|
+
"vue-component",
|
|
30
|
+
"ui-component",
|
|
31
|
+
"vite",
|
|
14
32
|
"builder",
|
|
15
|
-
"
|
|
33
|
+
"customizable",
|
|
34
|
+
"progress-bar",
|
|
35
|
+
"animation",
|
|
36
|
+
"icons",
|
|
37
|
+
"position",
|
|
38
|
+
"success",
|
|
39
|
+
"error",
|
|
40
|
+
"warning",
|
|
41
|
+
"info"
|
|
16
42
|
],
|
|
17
43
|
"repository": {
|
|
18
44
|
"type": "git",
|
package/dist/index.d.ts
DELETED
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
import { Plugin, ComputedRef } from 'vue';
|
|
2
|
-
|
|
3
|
-
export type NotificationType = "success" | "error" | "warning" | "info";
|
|
4
|
-
export type Position =
|
|
5
|
-
| "top-left"
|
|
6
|
-
| "top-center"
|
|
7
|
-
| "top-right"
|
|
8
|
-
| "bottom-left"
|
|
9
|
-
| "bottom-center"
|
|
10
|
-
| "bottom-right";
|
|
11
|
-
export type AnimationType = "fade" | "slide" | "bounce";
|
|
12
|
-
export type IconName =
|
|
13
|
-
| "check-circle"
|
|
14
|
-
| "check"
|
|
15
|
-
| "badge-check"
|
|
16
|
-
| "x-circle"
|
|
17
|
-
| "alert-circle"
|
|
18
|
-
| "exclamation-circle"
|
|
19
|
-
| "alert-triangle"
|
|
20
|
-
| "exclamation-triangle"
|
|
21
|
-
| "information-circle"
|
|
22
|
-
| "question-mark-circle"
|
|
23
|
-
| "bell"
|
|
24
|
-
| "megaphone"
|
|
25
|
-
| "sparkles"
|
|
26
|
-
| "heart"
|
|
27
|
-
| "moon"
|
|
28
|
-
| "sun"
|
|
29
|
-
| "none";
|
|
30
|
-
|
|
31
|
-
export interface NotificationConfig {
|
|
32
|
-
id: string;
|
|
33
|
-
type: NotificationType;
|
|
34
|
-
title: string;
|
|
35
|
-
message: string;
|
|
36
|
-
duration: number;
|
|
37
|
-
position: Position;
|
|
38
|
-
backgroundColor: string;
|
|
39
|
-
textColor: string;
|
|
40
|
-
showIcon: boolean;
|
|
41
|
-
showCloseButton: boolean;
|
|
42
|
-
customIcon?: IconName;
|
|
43
|
-
customIconUrl?: string;
|
|
44
|
-
customIconBase64?: string;
|
|
45
|
-
customCloseButtonUrl?: string;
|
|
46
|
-
customCloseButtonBase64?: string;
|
|
47
|
-
animation?: AnimationType;
|
|
48
|
-
showProgress?: boolean;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
export interface ActiveNotification extends NotificationConfig {
|
|
52
|
-
createdAt: number;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
export interface ToastComposable {
|
|
56
|
-
activeToasts: ComputedRef<ActiveNotification[]>;
|
|
57
|
-
dismissedToasts: ComputedRef<ActiveNotification[]>;
|
|
58
|
-
showToast: (config: Omit<NotificationConfig, "id">) => string;
|
|
59
|
-
dismissToast: (id: string) => void;
|
|
60
|
-
undoLastDismissed: () => void;
|
|
61
|
-
clearAllToasts: () => void;
|
|
62
|
-
getToastsByPosition: (position: Position) => ComputedRef<ActiveNotification[]>;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
export function useToast(): ToastComposable;
|
|
66
|
-
|
|
67
|
-
export interface ToastOptions {
|
|
68
|
-
type?: 'success' | 'error' | 'warning' | 'info';
|
|
69
|
-
message: string;
|
|
70
|
-
title?: string;
|
|
71
|
-
duration?: number;
|
|
72
|
-
position?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
|
|
73
|
-
showIcon?: boolean;
|
|
74
|
-
showCloseButton?: boolean;
|
|
75
|
-
showProgress?: boolean;
|
|
76
|
-
backgroundColor?: string;
|
|
77
|
-
textColor?: string;
|
|
78
|
-
animation?: 'fade' | 'slide' | 'bounce';
|
|
79
|
-
customIcon?: string;
|
|
80
|
-
customIconUrl?: string;
|
|
81
|
-
customIconBase64?: string;
|
|
82
|
-
customCloseButtonUrl?: string;
|
|
83
|
-
customCloseButtonBase64?: string;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
export interface ToastPlugin {
|
|
87
|
-
success: (message: string, options?: Partial<ToastOptions>) => void;
|
|
88
|
-
error: (message: string, options?: Partial<ToastOptions>) => void;
|
|
89
|
-
warning: (message: string, options?: Partial<ToastOptions>) => void;
|
|
90
|
-
info: (message: string, options?: Partial<ToastOptions>) => void;
|
|
91
|
-
show: (options: ToastOptions) => void;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
declare module '@vue/runtime-core' {
|
|
95
|
-
export interface ComponentCustomProperties {
|
|
96
|
-
$toast: ToastPlugin;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
export { default as ToastContainer } from './components/ToastContainer.vue';
|
|
101
|
-
export * from './constants/toast-defaults';
|
|
102
|
-
|
|
103
|
-
declare const plugin: Plugin;
|
|
104
|
-
export default plugin;
|