@erag/vue-toastification 1.0.2
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 +171 -0
- package/dist/components/Toast.vue.d.ts +28 -0
- package/dist/components/Toast.vue.d.ts.map +1 -0
- package/dist/components/ToastContainer.vue.d.ts +3 -0
- package/dist/components/ToastContainer.vue.d.ts.map +1 -0
- package/dist/composables/useToast.d.ts +22 -0
- package/dist/composables/useToast.d.ts.map +1 -0
- package/dist/icons.d.ts +2 -0
- package/dist/icons.d.ts.map +1 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/style.css +1 -0
- package/dist/types.d.ts +13 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/vue-toastification.js +144 -0
- package/dist/vue-toastification.umd.cjs +1 -0
- package/package.json +52 -0
package/README.md
ADDED
|
@@ -0,0 +1,171 @@
|
|
|
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
|
+
|
|
6
|
+
|
|
7
|
+
|
|
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
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { ToastType } from '../types';
|
|
2
|
+
|
|
3
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
4
|
+
type: ToastType;
|
|
5
|
+
title: string;
|
|
6
|
+
message: string;
|
|
7
|
+
duration: number;
|
|
8
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
9
|
+
close: () => void;
|
|
10
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
11
|
+
type: ToastType;
|
|
12
|
+
title: string;
|
|
13
|
+
message: string;
|
|
14
|
+
duration: number;
|
|
15
|
+
}>>> & Readonly<{
|
|
16
|
+
onClose?: (() => any) | undefined;
|
|
17
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
18
|
+
export default _default;
|
|
19
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
20
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
21
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
22
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
23
|
+
} : {
|
|
24
|
+
type: import('vue').PropType<T[K]>;
|
|
25
|
+
required: true;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=Toast.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toast.vue.d.ts","sourceRoot":"","sources":["../../src/components/Toast.vue"],"names":[],"mappings":"AAmCA;AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;;UAiNhC,SAAS;WACR,MAAM;aACJ,MAAM;cACL,MAAM;;;;UAHV,SAAS;WACR,MAAM;aACJ,MAAM;cACL,MAAM;;;;AATpB,wBAYG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
2
|
+
export default _default;
|
|
3
|
+
//# sourceMappingURL=ToastContainer.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToastContainer.vue.d.ts","sourceRoot":"","sources":["../../src/components/ToastContainer.vue"],"names":[],"mappings":"AAkBA;;AA2GA,wBAKG"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ToastType, ToastPosition } from '../types';
|
|
2
|
+
|
|
3
|
+
export declare const useToast: () => {
|
|
4
|
+
state: {
|
|
5
|
+
toasts: {
|
|
6
|
+
id: number;
|
|
7
|
+
type: ToastType;
|
|
8
|
+
title: string;
|
|
9
|
+
message: string;
|
|
10
|
+
duration: number;
|
|
11
|
+
}[];
|
|
12
|
+
position: ToastPosition;
|
|
13
|
+
};
|
|
14
|
+
show: (type: ToastType, title: string, message: string, duration?: number) => void;
|
|
15
|
+
remove: (id: number) => void;
|
|
16
|
+
setPosition: (newPosition: ToastPosition) => void;
|
|
17
|
+
success: (msg: string, title?: string, duration?: number) => void;
|
|
18
|
+
error: (msg: string, title?: string, duration?: number) => void;
|
|
19
|
+
warning: (msg: string, title?: string, duration?: number) => void;
|
|
20
|
+
info: (msg: string, title?: string, duration?: number) => void;
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=useToast.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/composables/useToast.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,SAAS,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAc/D,eAAO,MAAM,QAAQ;;;;;;;;;kBAVP,aAAa;;iBAWH,SAAS,SAAS,MAAM,WAAW,MAAM,aAAY,MAAM;iBAmB3D,MAAM;+BAOQ,aAAa;mBAS5B,MAAM,UAAS,MAAM,aAAyB,MAAM;iBAEtD,MAAM,UAAS,MAAM,aAAuB,MAAM;mBAEhD,MAAM,UAAS,MAAM,aAAyB,MAAM;gBAEvD,MAAM,UAAS,MAAM,aAAsB,MAAM;CAGpE,CAAC"}
|
package/dist/icons.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAKxC,CAAC"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAO,MAAM,EAAE,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAIlD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,CAAC;AAEpB,QAAA,MAAM,WAAW,EAAE,MAuBlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
package/dist/style.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.erag-toast[data-v-d05d0e63]{--toast-bg: #fff;--toast-color: #333;width:320px;background:var(--toast-bg);color:#fff;border-radius:6px;border:1px solid rgba(0,0,0,.05);overflow:hidden;box-shadow:0 4px 15px #00000026;position:relative;display:flex;align-items:center;padding:0 10px 0 12px;margin-bottom:10px;transform:translateY(20px);opacity:0;transition:transform .3s cubic-bezier(.68,-.55,.27,1.55),opacity .3s ease}.erag-toast.erag-show[data-v-d05d0e63]{transform:translateY(0)!important;opacity:1}.erag-toast[data-v-d05d0e63]:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--toast-color);opacity:.15;transform:translate(-100%);pointer-events:none;z-index:0}.erag-toast.erag-show[data-v-d05d0e63]:before{animation:eragProgressLayer-d05d0e63 var(--duration) linear forwards}.erag-toast-icon[data-v-d05d0e63]{width:20px;height:20px;margin-right:12px;display:flex;align-items:center;justify-content:center;z-index:1;color:#fff}.erag-toast-icon[data-v-d05d0e63] svg{width:100%;height:100%}.erag-toast-content[data-v-d05d0e63]{padding:9px 0;position:relative;z-index:1;flex:1}.erag-toast-content strong[data-v-d05d0e63]{display:block;font-size:14px;margin-bottom:2px;color:inherit;line-height:1.2}.erag-toast-content span[data-v-d05d0e63]{font-size:12px;opacity:.9;line-height:1.2}.erag-toast-close[data-v-d05d0e63]{background:transparent;border:none;color:#fff;opacity:.7;cursor:pointer;padding:6px;margin-left:8px;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.erag-toast-close[data-v-d05d0e63]:hover{opacity:1;background:#0000001a}.erag-toast-close svg[data-v-d05d0e63]{width:12px;height:12px}.erag-toast.erag-success[data-v-d05d0e63]{--toast-bg: #27ae60}.erag-toast.erag-error[data-v-d05d0e63]{--toast-bg: #c0392b}.erag-toast.erag-warning[data-v-d05d0e63]{--toast-bg: #d35400}.erag-toast.erag-info[data-v-d05d0e63]{--toast-bg: #2980b9}@keyframes eragProgressLayer-d05d0e63{0%{transform:translate(-100%)}to{transform:translate(0)}}.erag-toast-container[data-v-da376e1c]{position:fixed;z-index:9999;transition:all .3s ease;display:flex;flex-direction:column}.erag-toast-container.erag-top-left[data-v-da376e1c]{top:20px;left:20px}.erag-toast-container.erag-top-center[data-v-da376e1c]{top:20px;left:50%;transform:translate(-50%)}.erag-toast-container.erag-top-right[data-v-da376e1c]{top:20px;right:20px}.erag-toast-container.erag-bottom-left[data-v-da376e1c]{bottom:20px;left:20px}.erag-toast-container.erag-bottom-center[data-v-da376e1c]{bottom:20px;left:50%;transform:translate(-50%)}.erag-toast-container.erag-bottom-right[data-v-da376e1c]{bottom:20px;right:20px}.erag-toast-list-move[data-v-da376e1c],.erag-toast-list-enter-active[data-v-da376e1c],.erag-toast-list-leave-active[data-v-da376e1c]{transition:all .4s ease}.erag-toast-list-enter-from[data-v-da376e1c],.erag-toast-list-leave-to[data-v-da376e1c]{opacity:0;transform:translate(30px)}.erag-toast-list-leave-active[data-v-da376e1c]{position:absolute}
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export type ToastType = 'success' | 'error' | 'warning' | 'info';
|
|
2
|
+
export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
3
|
+
export interface ToastItem {
|
|
4
|
+
id: number;
|
|
5
|
+
type: ToastType;
|
|
6
|
+
title: string;
|
|
7
|
+
message: string;
|
|
8
|
+
duration: number;
|
|
9
|
+
}
|
|
10
|
+
export interface PluginOptions {
|
|
11
|
+
position?: ToastPosition;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjE,MAAM,MAAM,aAAa,GACnB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAErB,MAAM,WAAW,SAAS;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC5B"}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
import { reactive as y, defineComponent as w, ref as M, computed as B, onMounted as L, onBeforeUnmount as b, createElementBlock as g, openBlock as d, normalizeStyle as k, normalizeClass as C, createElementVNode as a, toDisplayString as f, unref as m, createVNode as x, TransitionGroup as I, withCtx as E, Fragment as P, renderList as S, createBlock as $, render as H } from "vue";
|
|
2
|
+
const i = y({
|
|
3
|
+
toasts: [],
|
|
4
|
+
position: "bottom-right"
|
|
5
|
+
});
|
|
6
|
+
let F = 0;
|
|
7
|
+
const p = () => {
|
|
8
|
+
const s = (t, o, e, c = 4500) => {
|
|
9
|
+
const l = F++, u = {
|
|
10
|
+
id: l,
|
|
11
|
+
type: t,
|
|
12
|
+
title: o,
|
|
13
|
+
message: e,
|
|
14
|
+
duration: c
|
|
15
|
+
};
|
|
16
|
+
i.toasts.push(u), c > 0 && setTimeout(() => {
|
|
17
|
+
r(l);
|
|
18
|
+
}, c + 500);
|
|
19
|
+
}, r = (t) => {
|
|
20
|
+
const o = i.toasts.findIndex((e) => e.id === t);
|
|
21
|
+
o !== -1 && i.toasts.splice(o, 1);
|
|
22
|
+
};
|
|
23
|
+
return {
|
|
24
|
+
state: i,
|
|
25
|
+
show: s,
|
|
26
|
+
remove: r,
|
|
27
|
+
setPosition: (t) => {
|
|
28
|
+
i.position = t;
|
|
29
|
+
},
|
|
30
|
+
success: (t, o = "Success", e) => s("success", o, t, e),
|
|
31
|
+
error: (t, o = "Error", e) => s("error", o, t, e),
|
|
32
|
+
warning: (t, o = "Warning", e) => s("warning", o, t, e),
|
|
33
|
+
info: (t, o = "Info", e) => s("info", o, t, e)
|
|
34
|
+
};
|
|
35
|
+
}, h = {
|
|
36
|
+
error: '<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg>',
|
|
37
|
+
info: '<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg>',
|
|
38
|
+
success: '<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>',
|
|
39
|
+
warning: '<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg>'
|
|
40
|
+
}, N = ["innerHTML"], V = { class: "erag-toast-content" }, q = /* @__PURE__ */ w({
|
|
41
|
+
__name: "Toast",
|
|
42
|
+
props: {
|
|
43
|
+
type: {},
|
|
44
|
+
title: {},
|
|
45
|
+
message: {},
|
|
46
|
+
duration: {}
|
|
47
|
+
},
|
|
48
|
+
emits: ["close"],
|
|
49
|
+
setup(s, { emit: r }) {
|
|
50
|
+
const n = s, t = r, o = M(!1), e = B(() => h[n.type] || h.info);
|
|
51
|
+
let c = null;
|
|
52
|
+
L(() => {
|
|
53
|
+
requestAnimationFrame(() => {
|
|
54
|
+
o.value = !0;
|
|
55
|
+
}), l();
|
|
56
|
+
});
|
|
57
|
+
const l = () => {
|
|
58
|
+
c = setTimeout(() => {
|
|
59
|
+
u();
|
|
60
|
+
}, n.duration);
|
|
61
|
+
}, u = () => {
|
|
62
|
+
t("close");
|
|
63
|
+
}, T = () => {
|
|
64
|
+
}, z = () => {
|
|
65
|
+
};
|
|
66
|
+
return b(() => {
|
|
67
|
+
c && clearTimeout(c);
|
|
68
|
+
}), (O, v) => (d(), g("div", {
|
|
69
|
+
class: C(["erag-toast", [`erag-${s.type}`, { "erag-show": o.value }]]),
|
|
70
|
+
style: k({ "--duration": s.duration + "ms" }),
|
|
71
|
+
onMouseenter: T,
|
|
72
|
+
onMouseleave: z
|
|
73
|
+
}, [
|
|
74
|
+
a("div", {
|
|
75
|
+
class: "erag-toast-icon",
|
|
76
|
+
innerHTML: e.value
|
|
77
|
+
}, null, 8, N),
|
|
78
|
+
a("div", V, [
|
|
79
|
+
a("strong", null, f(s.title), 1),
|
|
80
|
+
a("span", null, f(s.message), 1)
|
|
81
|
+
]),
|
|
82
|
+
a("button", {
|
|
83
|
+
class: "erag-toast-close",
|
|
84
|
+
onClick: u
|
|
85
|
+
}, [...v[0] || (v[0] = [
|
|
86
|
+
a("svg", {
|
|
87
|
+
"aria-hidden": "true",
|
|
88
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
89
|
+
viewBox: "0 0 320 512"
|
|
90
|
+
}, [
|
|
91
|
+
a("path", {
|
|
92
|
+
fill: "currentColor",
|
|
93
|
+
d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
|
|
94
|
+
})
|
|
95
|
+
], -1)
|
|
96
|
+
])])
|
|
97
|
+
], 38));
|
|
98
|
+
}
|
|
99
|
+
}), _ = (s, r) => {
|
|
100
|
+
const n = s.__vccOpts || s;
|
|
101
|
+
for (const [t, o] of r)
|
|
102
|
+
n[t] = o;
|
|
103
|
+
return n;
|
|
104
|
+
}, A = /* @__PURE__ */ _(q, [["__scopeId", "data-v-d05d0e63"]]), D = /* @__PURE__ */ w({
|
|
105
|
+
__name: "ToastContainer",
|
|
106
|
+
setup(s) {
|
|
107
|
+
const { state: r, remove: n } = p();
|
|
108
|
+
return (t, o) => (d(), g("div", {
|
|
109
|
+
class: C(["erag-toast-container", `erag-${m(r).position}`])
|
|
110
|
+
}, [
|
|
111
|
+
x(I, { name: "erag-toast-list" }, {
|
|
112
|
+
default: E(() => [
|
|
113
|
+
(d(!0), g(P, null, S(m(r).toasts, (e) => (d(), $(A, {
|
|
114
|
+
key: e.id,
|
|
115
|
+
type: e.type,
|
|
116
|
+
title: e.title,
|
|
117
|
+
message: e.message,
|
|
118
|
+
duration: e.duration,
|
|
119
|
+
onClose: (c) => m(n)(e.id)
|
|
120
|
+
}, null, 8, ["type", "title", "message", "duration", "onClose"]))), 128))
|
|
121
|
+
]),
|
|
122
|
+
_: 1
|
|
123
|
+
})
|
|
124
|
+
], 2));
|
|
125
|
+
}
|
|
126
|
+
}), G = /* @__PURE__ */ _(D, [["__scopeId", "data-v-da376e1c"]]), W = {
|
|
127
|
+
install(s, r = {}) {
|
|
128
|
+
if (!document.getElementById("erag-toast-container")) {
|
|
129
|
+
const n = document.createElement("div");
|
|
130
|
+
n.id = "erag-toast-container", document.body.appendChild(n);
|
|
131
|
+
const t = x(G);
|
|
132
|
+
H(t, n);
|
|
133
|
+
}
|
|
134
|
+
if (r.position) {
|
|
135
|
+
const { setPosition: n } = p();
|
|
136
|
+
n(r.position);
|
|
137
|
+
}
|
|
138
|
+
s.config.globalProperties.$toast = p();
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
export {
|
|
142
|
+
W as default,
|
|
143
|
+
p as useToast
|
|
144
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.VueToastification={},i.Vue))})(this,function(i,e){"use strict";const l=e.reactive({toasts:[],position:"bottom-right"});let h=0;const d=()=>{const s=(t,n,o,a=4500)=>{const m=h++,g={id:m,type:t,title:n,message:o,duration:a};l.toasts.push(g),a>0&&setTimeout(()=>{c(m)},a+500)},c=t=>{const n=l.toasts.findIndex(o=>o.id===t);n!==-1&&l.toasts.splice(n,1)};return{state:l,show:s,remove:c,setPosition:t=>{l.position=t},success:(t,n="Success",o)=>s("success",n,t,o),error:(t,n="Error",o)=>s("error",n,t,o),warning:(t,n="Warning",o)=>s("warning",n,t,o),info:(t,n="Info",o)=>s("info",n,t,o)}},f={error:'<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg>',info:'<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg>',success:'<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>',warning:'<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg>'},w=["innerHTML"],T={class:"erag-toast-content"},_=e.defineComponent({__name:"Toast",props:{type:{},title:{},message:{},duration:{}},emits:["close"],setup(s,{emit:c}){const r=s,t=c,n=e.ref(!1),o=e.computed(()=>f[r.type]||f.info);let a=null;e.onMounted(()=>{requestAnimationFrame(()=>{n.value=!0}),m()});const m=()=>{a=setTimeout(()=>{g()},r.duration)},g=()=>{t("close")},z=()=>{},B=()=>{};return e.onBeforeUnmount(()=>{a&&clearTimeout(a)}),(E,p)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["erag-toast",[`erag-${s.type}`,{"erag-show":n.value}]]),style:e.normalizeStyle({"--duration":s.duration+"ms"}),onMouseenter:z,onMouseleave:B},[e.createElementVNode("div",{class:"erag-toast-icon",innerHTML:o.value},null,8,w),e.createElementVNode("div",T,[e.createElementVNode("strong",null,e.toDisplayString(s.title),1),e.createElementVNode("span",null,e.toDisplayString(s.message),1)]),e.createElementVNode("button",{class:"erag-toast-close",onClick:g},[...p[0]||(p[0]=[e.createElementVNode("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512"},[e.createElementVNode("path",{fill:"currentColor",d:"M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"})],-1)])])],38))}}),u=(s,c)=>{const r=s.__vccOpts||s;for(const[t,n]of c)r[t]=n;return r},C=u(_,[["__scopeId","data-v-d05d0e63"]]),x=u(e.defineComponent({__name:"ToastContainer",setup(s){const{state:c,remove:r}=d();return(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["erag-toast-container",`erag-${e.unref(c).position}`])},[e.createVNode(e.TransitionGroup,{name:"erag-toast-list"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(c).toasts,o=>(e.openBlock(),e.createBlock(C,{key:o.id,type:o.type,title:o.title,message:o.message,duration:o.duration,onClose:a=>e.unref(r)(o.id)},null,8,["type","title","message","duration","onClose"]))),128))]),_:1})],2))}}),[["__scopeId","data-v-da376e1c"]]),y={install(s,c={}){if(!document.getElementById("erag-toast-container")){const r=document.createElement("div");r.id="erag-toast-container",document.body.appendChild(r);const t=e.createVNode(x);e.render(t,r)}if(c.position){const{setPosition:r}=d();r(c.position)}s.config.globalProperties.$toast=d()}};i.default=y,i.useToast=d,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@erag/vue-toastification",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"files": [
|
|
6
|
+
"dist"
|
|
7
|
+
],
|
|
8
|
+
"main": "./dist/vue-toastification.umd.cjs",
|
|
9
|
+
"module": "./dist/vue-toastification.js",
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"publishConfig": {
|
|
12
|
+
"access": "public",
|
|
13
|
+
"registry": "https://registry.npmjs.org/"
|
|
14
|
+
},
|
|
15
|
+
"exports": {
|
|
16
|
+
".": {
|
|
17
|
+
"import": "./dist/vue-toastification.js",
|
|
18
|
+
"require": "./dist/vue-toastification.umd.cjs",
|
|
19
|
+
"types": "./dist/index.d.ts"
|
|
20
|
+
},
|
|
21
|
+
"./dist/style.css": "./dist/style.css"
|
|
22
|
+
},
|
|
23
|
+
"scripts": {
|
|
24
|
+
"dev": "vite",
|
|
25
|
+
"build": "vue-tsc && vite build",
|
|
26
|
+
"preview": "vite preview",
|
|
27
|
+
"release": "release-it",
|
|
28
|
+
"lint": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\" && eslint . --fix"
|
|
29
|
+
},
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"vue": "^3.0.0"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@eslint/js": "^9.39.2",
|
|
35
|
+
"@release-it/conventional-changelog": "^10.0.4",
|
|
36
|
+
"@typescript-eslint/eslint-plugin": "^8.50.1",
|
|
37
|
+
"@typescript-eslint/parser": "^8.50.1",
|
|
38
|
+
"@vitejs/plugin-vue": "^5.0.0",
|
|
39
|
+
"eslint": "^9.39.2",
|
|
40
|
+
"eslint-config-prettier": "^10.1.8",
|
|
41
|
+
"eslint-plugin-vue": "^10.6.2",
|
|
42
|
+
"globals": "^16.5.0",
|
|
43
|
+
"prettier": "^3.7.4",
|
|
44
|
+
"release-it": "^19.2.1",
|
|
45
|
+
"typescript": "^5.0.0",
|
|
46
|
+
"typescript-eslint": "^8.50.1",
|
|
47
|
+
"vite": "^5.0.0",
|
|
48
|
+
"vite-plugin-dts": "^3.0.0",
|
|
49
|
+
"vue-eslint-parser": "^10.2.0",
|
|
50
|
+
"vue-tsc": "^2.0.0"
|
|
51
|
+
}
|
|
52
|
+
}
|