@erag/vue-toastification 1.0.2 → 1.0.3

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.
Files changed (2) hide show
  1. package/README.md +175 -171
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,171 +1,175 @@
1
- # @erag/vue-toastification
2
-
3
- A lightweight, high-performance, and customizable Toast Notification library for **Vue 3**. Built with **TypeScript** and the Composition API.
4
-
5
- ![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)
6
- ![Vue](https://img.shields.io/badge/Vue-3.x-green.svg)
7
- ![TypeScript](https://img.shields.io/badge/language-TypeScript-blue.svg)
8
-
9
- ## 🚀 Features
10
-
11
- - **Vue 3 Composition API** support.
12
- - **Fully Typed** with TypeScript.
13
- - **Lightweight** & Zero dependencies.
14
- - **Scoped CSS**: Uses `erag-` prefix to prevent CSS conflicts with frameworks like Bootstrap or Tailwind.
15
- - **Customizable**: Control position, duration, and content easily.
16
- - **4 Built-in Types**: Success, Error, Warning, and Info.
17
-
18
- ---
19
-
20
- ## 📦 Installation
21
-
22
- Install the package via npm:
23
-
24
- ```bash
25
- npm install @erag/vue-toastification
26
-
27
- ```
28
-
29
- ---
30
-
31
- ## ⚙️ Setup
32
-
33
- Register the plugin in your main Vue application file (usually `main.ts` or `main.js`). **Don't forget to import the CSS file.**
34
-
35
- ```typescript
36
- import { createApp } from 'vue';
37
- import App from './App.vue';
38
-
39
- // 1. Import the plugin and styles
40
- import ToastPlugin from '@erag/vue-toastification';
41
- import '@erag/vue-toastification/dist/style.css';
42
-
43
- const app = createApp(App);
44
-
45
- // 2. Use the plugin (Optional: Set default position)
46
- app.use(ToastPlugin, {
47
- position: 'bottom-right' // Default: bottom-right
48
- });
49
-
50
- app.mount('#app');
51
- ```
52
-
53
- ---
54
-
55
- ## 💡 Usage
56
-
57
- You can use the `useToast` composable anywhere in your components to trigger notifications.
58
-
59
- ### 1. Basic Usage (All Types)
60
-
61
- ```html
62
- <script setup lang="ts">
63
- import { useToast } from '@erag/vue-toastification';
64
-
65
- // Destructure the methods you need
66
- const { success, error, warning, info } = useToast();
67
-
68
- const showNotifications = () => {
69
- // success(message, title, duration?)
70
- success('Data saved successfully!', 'Good Job');
71
-
72
- // error(message, title, duration?)
73
- error('Something went wrong.', 'Error Occurred');
74
-
75
- // warning(message, title, duration?)
76
- warning('Your session is about to expire.', 'Warning');
77
-
78
- // info(message, title, duration?)
79
- info('New update available.', 'Info');
80
- };
81
- </script>
82
-
83
- <template>
84
- <button @click="showNotifications">Show Toasts</button>
85
- </template>
86
- ```
87
-
88
- ---
89
-
90
- ### 2. Changing Position Dynamically
91
-
92
- You can change the position of the toasts at runtime using `setPosition`.
93
-
94
- **Available Positions:**
95
-
96
- - `top-left`
97
- - `top-center`
98
- - `top-right`
99
- - `bottom-left`
100
- - `bottom-center`
101
- - `bottom-right`
102
-
103
- ```typescript
104
- const { setPosition, info } = useToast();
105
-
106
- const moveToTop = () => {
107
- setPosition('top-center');
108
- info('I am now at the Top Center!', 'Position Changed');
109
- };
110
- ```
111
-
112
- ---
113
-
114
- ### 3. Custom Duration
115
-
116
- By default, toasts disappear after **4500ms (4.5 seconds)**. You can override this for specific notifications.
117
-
118
- ```typescript
119
- const { success, error } = useToast();
120
-
121
- // Disappears quickly (1 second)
122
- const quickToast = () => {
123
- success('Quick save!', 'Done', 1000);
124
- };
125
-
126
- // Stays longer (8 seconds)
127
- const longToast = () => {
128
- error('Please read this error carefully...', 'Important', 8000);
129
- };
130
- ```
131
-
132
- ---
133
-
134
- ## 🎨 API Reference
135
-
136
- ### `useToast()` Methods
137
-
138
- | Method | Arguments | Description |
139
- | ------------- | -------------------------------------------------- | ---------------------------------------- |
140
- | `success` | `(msg: string, title?: string, duration?: number)` | Triggers a green success toast. |
141
- | `error` | `(msg: string, title?: string, duration?: number)` | Triggers a red error toast. |
142
- | `warning` | `(msg: string, title?: string, duration?: number)` | Triggers an orange warning toast. |
143
- | `info` | `(msg: string, title?: string, duration?: number)` | Triggers a blue info toast. |
144
- | `setPosition` | `(position: ToastPosition)` | Updates the global container position. |
145
- | `remove` | `(id: number)` | Manually removes a specific toast by ID. |
146
-
147
- ### Global Options
148
-
149
- When registering the plugin:
150
-
151
- ```typescript
152
- app.use(ToastPlugin, {
153
- position: 'top-right' // Sets the initial position
154
- });
155
- ```
156
-
157
- ---
158
-
159
- ## 🛡️ CSS & Styling
160
-
161
- This library uses the **`erag-`** prefix for all CSS classes to ensure it never breaks your existing UI (Tailwind, Bootstrap, etc.).
162
-
163
- - Container: `.erag-toast-container`
164
- - Toast Card: `.erag-toast`
165
- - Themes: `.erag-success`, `.erag-error`, etc.
166
-
167
- ---
168
-
169
- ## 📄 License
170
-
171
- MIT License © Er Amit Gupta
1
+ # @erag/vue-toastification
2
+
3
+ A lightweight, high-performance, and customizable Toast Notification library for **Vue 3**. Built with **TypeScript** and the Composition API.
4
+
5
+ ![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)
6
+ ![Vue](https://img.shields.io/badge/Vue-3.x-green.svg)
7
+ ![TypeScript](https://img.shields.io/badge/language-TypeScript-blue.svg)
8
+
9
+
10
+ ![erag-vue-toastification](https://github.com/user-attachments/assets/8816bf9b-8327-4e27-a6b3-56419cee9500)
11
+
12
+
13
+ ## 🚀 Features
14
+
15
+ - **Vue 3 Composition API** support.
16
+ - **Fully Typed** with TypeScript.
17
+ - **Lightweight** & Zero dependencies.
18
+ - **Scoped CSS**: Uses `erag-` prefix to prevent CSS conflicts with frameworks like Bootstrap or Tailwind.
19
+ - **Customizable**: Control position, duration, and content easily.
20
+ - **4 Built-in Types**: Success, Error, Warning, and Info.
21
+
22
+ ---
23
+
24
+ ## 📦 Installation
25
+
26
+ Install the package via npm:
27
+
28
+ ```bash
29
+ npm install @erag/vue-toastification
30
+
31
+ ```
32
+
33
+ ---
34
+
35
+ ## ⚙️ Setup
36
+
37
+ Register the plugin in your main Vue application file (usually `main.ts` or `main.js`). **Don't forget to import the CSS file.**
38
+
39
+ ```typescript
40
+ import { createApp } from 'vue';
41
+ import App from './App.vue';
42
+
43
+ // 1. Import the plugin and styles
44
+ import ToastPlugin from '@erag/vue-toastification';
45
+ import '@erag/vue-toastification/dist/style.css';
46
+
47
+ const app = createApp(App);
48
+
49
+ // 2. Use the plugin (Optional: Set default position)
50
+ app.use(ToastPlugin, {
51
+ position: 'bottom-right' // Default: bottom-right
52
+ });
53
+
54
+ app.mount('#app');
55
+ ```
56
+
57
+ ---
58
+
59
+ ## 💡 Usage
60
+
61
+ You can use the `useToast` composable anywhere in your components to trigger notifications.
62
+
63
+ ### 1. Basic Usage (All Types)
64
+
65
+ ```html
66
+ <script setup lang="ts">
67
+ import { useToast } from '@erag/vue-toastification';
68
+
69
+ // Destructure the methods you need
70
+ const { success, error, warning, info } = useToast();
71
+
72
+ const showNotifications = () => {
73
+ // success(message, title, duration?)
74
+ success('Data saved successfully!', 'Good Job');
75
+
76
+ // error(message, title, duration?)
77
+ error('Something went wrong.', 'Error Occurred');
78
+
79
+ // warning(message, title, duration?)
80
+ warning('Your session is about to expire.', 'Warning');
81
+
82
+ // info(message, title, duration?)
83
+ info('New update available.', 'Info');
84
+ };
85
+ </script>
86
+
87
+ <template>
88
+ <button @click="showNotifications">Show Toasts</button>
89
+ </template>
90
+ ```
91
+
92
+ ---
93
+
94
+ ### 2. Changing Position Dynamically
95
+
96
+ You can change the position of the toasts at runtime using `setPosition`.
97
+
98
+ **Available Positions:**
99
+
100
+ - `top-left`
101
+ - `top-center`
102
+ - `top-right`
103
+ - `bottom-left`
104
+ - `bottom-center`
105
+ - `bottom-right`
106
+
107
+ ```typescript
108
+ const { setPosition, info } = useToast();
109
+
110
+ const moveToTop = () => {
111
+ setPosition('top-center');
112
+ info('I am now at the Top Center!', 'Position Changed');
113
+ };
114
+ ```
115
+
116
+ ---
117
+
118
+ ### 3. Custom Duration
119
+
120
+ By default, toasts disappear after **4500ms (4.5 seconds)**. You can override this for specific notifications.
121
+
122
+ ```typescript
123
+ const { success, error } = useToast();
124
+
125
+ // Disappears quickly (1 second)
126
+ const quickToast = () => {
127
+ success('Quick save!', 'Done', 1000);
128
+ };
129
+
130
+ // Stays longer (8 seconds)
131
+ const longToast = () => {
132
+ error('Please read this error carefully...', 'Important', 8000);
133
+ };
134
+ ```
135
+
136
+ ---
137
+
138
+ ## 🎨 API Reference
139
+
140
+ ### `useToast()` Methods
141
+
142
+ | Method | Arguments | Description |
143
+ | ------------- | -------------------------------------------------- | ---------------------------------------- |
144
+ | `success` | `(msg: string, title?: string, duration?: number)` | Triggers a green success toast. |
145
+ | `error` | `(msg: string, title?: string, duration?: number)` | Triggers a red error toast. |
146
+ | `warning` | `(msg: string, title?: string, duration?: number)` | Triggers an orange warning toast. |
147
+ | `info` | `(msg: string, title?: string, duration?: number)` | Triggers a blue info toast. |
148
+ | `setPosition` | `(position: ToastPosition)` | Updates the global container position. |
149
+ | `remove` | `(id: number)` | Manually removes a specific toast by ID. |
150
+
151
+ ### Global Options
152
+
153
+ When registering the plugin:
154
+
155
+ ```typescript
156
+ app.use(ToastPlugin, {
157
+ position: 'top-right' // Sets the initial position
158
+ });
159
+ ```
160
+
161
+ ---
162
+
163
+ ## 🛡️ CSS & Styling
164
+
165
+ This library uses the **`erag-`** prefix for all CSS classes to ensure it never breaks your existing UI (Tailwind, Bootstrap, etc.).
166
+
167
+ - Container: `.erag-toast-container`
168
+ - Toast Card: `.erag-toast`
169
+ - Themes: `.erag-success`, `.erag-error`, etc.
170
+
171
+ ---
172
+
173
+ ## 📄 License
174
+
175
+ MIT License © Er Amit Gupta
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@erag/vue-toastification",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"