@erag/vue-toastification 1.0.3 → 1.1.0
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/LICENSE +21 -0
- package/README.md +218 -175
- package/dist/components/Modal.vue.d.ts +3 -0
- package/dist/components/Modal.vue.d.ts.map +1 -0
- package/dist/composables/useModal.d.ts +17 -0
- package/dist/composables/useModal.d.ts.map +1 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types.d.ts +7 -0
- package/dist/types.d.ts.map +1 -1
- package/dist/vue-toastification.js +156 -80
- package/dist/vue-toastification.umd.cjs +1 -1
- package/package.json +1 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Er Amit Gupta
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,175 +1,218 @@
|
|
|
1
|
-
# @erag/vue-toastification
|
|
2
|
-
|
|
3
|
-
A lightweight, high-performance
|
|
4
|
-
|
|
5
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
- **
|
|
16
|
-
- **Fully Typed** with TypeScript.
|
|
17
|
-
- **Lightweight** & Zero dependencies.
|
|
18
|
-
- **Scoped CSS**: Uses `erag-` prefix to prevent CSS conflicts with
|
|
19
|
-
- **Customizable**: Control position, duration, and
|
|
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`). **
|
|
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
|
|
50
|
-
app.use(ToastPlugin, {
|
|
51
|
-
position: 'bottom-right' // Default
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
app.mount('#app');
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
---
|
|
58
|
-
|
|
59
|
-
##
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
### 1. Basic Usage
|
|
64
|
-
|
|
65
|
-
```html
|
|
66
|
-
<script setup lang="ts">
|
|
67
|
-
import { useToast } from '@erag/vue-toastification';
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
const
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
1
|
+
# @erag/vue-toastification
|
|
2
|
+
|
|
3
|
+
A lightweight, high-performance **Toast Notification** and **Confirmation Modal** library for **Vue 3**. Built with **TypeScript** and the Composition API.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
## 🚀 Features
|
|
13
|
+
|
|
14
|
+
- **Vue 3 Composition API** support (`useToast`, `useModal`).
|
|
15
|
+
- **Promise-based Modals**: Await user confirmation directly in your code (no callbacks needed).
|
|
16
|
+
- **Fully Typed** with TypeScript.
|
|
17
|
+
- **Lightweight** & Zero dependencies.
|
|
18
|
+
- **Scoped CSS**: Uses `erag-` prefix to prevent CSS conflicts with Bootstrap, Tailwind, etc.
|
|
19
|
+
- **Customizable**: Control position, duration, content, and button labels.
|
|
20
|
+
- **4 Built-in Toast 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`). **Important: Do not 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
|
|
50
|
+
app.use(ToastPlugin, {
|
|
51
|
+
position: 'bottom-right' // Default position for toasts
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
app.mount('#app');
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## 🍞 Usage: Toast Notifications
|
|
60
|
+
|
|
61
|
+
Use the `useToast` composable to trigger non-blocking notifications.
|
|
62
|
+
|
|
63
|
+
### 1. Basic Usage
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<script setup lang="ts">
|
|
67
|
+
import { useToast } from '@erag/vue-toastification';
|
|
68
|
+
|
|
69
|
+
const { success, error, warning, info } = useToast();
|
|
70
|
+
|
|
71
|
+
const showToasts = () => {
|
|
72
|
+
// Success (Green)
|
|
73
|
+
success('Data saved successfully!', 'Good Job');
|
|
74
|
+
|
|
75
|
+
// Error (Red) - Custom duration (5 seconds)
|
|
76
|
+
error('Server connection failed.', 'Error', 5000);
|
|
77
|
+
|
|
78
|
+
// Warning (Orange)
|
|
79
|
+
warning('Your session is expiring.', 'Warning');
|
|
80
|
+
|
|
81
|
+
// Info (Blue)
|
|
82
|
+
info('New update available.', 'Info');
|
|
83
|
+
};
|
|
84
|
+
</script>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### 2. Advanced: Dynamic Types (Handling API Responses)
|
|
88
|
+
|
|
89
|
+
Sometimes you receive the status type (e.g., `'success'` or `'error'`) directly from an API response. Instead of writing multiple `if-else` statements, you can use **bracket notation** to call the toast method dynamically.
|
|
90
|
+
|
|
91
|
+
```typescript
|
|
92
|
+
import { useToast } from '@erag/vue-toastification';
|
|
93
|
+
import type { ToastType } from '@erag/vue-toastification';
|
|
94
|
+
|
|
95
|
+
const toast = useToast();
|
|
96
|
+
|
|
97
|
+
const handleApiRequest = async () => {
|
|
98
|
+
try {
|
|
99
|
+
// Assume API returns: { status: 'success', message: 'Profile updated!' }
|
|
100
|
+
const response = await api.updateProfile();
|
|
101
|
+
|
|
102
|
+
// 1. Cast the string to ToastType
|
|
103
|
+
const type = response.status as ToastType;
|
|
104
|
+
|
|
105
|
+
// 2. Dynamic Call: Automatically calls toast.success() or toast.error()
|
|
106
|
+
toast[type](response.message, 'Notification');
|
|
107
|
+
} catch (err) {
|
|
108
|
+
toast.error('Something went wrong');
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
---
|
|
114
|
+
|
|
115
|
+
## 💬 Usage: Confirmation Modals (New!)
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
Use the `useModal` composable to trigger blocking confirmation dialogs. The `confirm()` method returns a **Promise** that resolves to `true` (Confirmed) or `false` (Cancelled).
|
|
121
|
+
|
|
122
|
+
### 1. Danger / Delete Action (Red Button)
|
|
123
|
+
|
|
124
|
+
Use `type: 'danger'` for destructive actions like deleting data.
|
|
125
|
+
|
|
126
|
+
```typescript
|
|
127
|
+
<script setup lang="ts">
|
|
128
|
+
import { useModal, useToast } from '@erag/vue-toastification';
|
|
129
|
+
|
|
130
|
+
const modal = useModal();
|
|
131
|
+
const toast = useToast();
|
|
132
|
+
|
|
133
|
+
const handleDelete = async () => {
|
|
134
|
+
// Execution pauses here until the user clicks a button
|
|
135
|
+
const isConfirmed = await modal.confirm({
|
|
136
|
+
title: 'Delete Account?',
|
|
137
|
+
message: 'Are you sure? This action cannot be undone.',
|
|
138
|
+
confirmText: 'Yes, Delete',
|
|
139
|
+
cancelText: 'No, Keep it',
|
|
140
|
+
type: 'danger' // Makes the confirm button Red
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
if (isConfirmed) {
|
|
144
|
+
// User clicked "Yes, Delete"
|
|
145
|
+
console.log('User deleted account');
|
|
146
|
+
toast.success('Account deleted successfully');
|
|
147
|
+
} else {
|
|
148
|
+
// User clicked "No" or Cancel
|
|
149
|
+
toast.info('Action cancelled');
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
</script>
|
|
153
|
+
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### 2. General Confirmation (Info/Warning)
|
|
157
|
+
|
|
158
|
+
```typescript
|
|
159
|
+
const logout = async () => {
|
|
160
|
+
const ok = await modal.confirm({
|
|
161
|
+
title: 'Logout',
|
|
162
|
+
message: 'You have unsaved changes. Do you really want to leave?',
|
|
163
|
+
confirmText: 'Logout',
|
|
164
|
+
type: 'warning'
|
|
165
|
+
});
|
|
166
|
+
|
|
167
|
+
if (ok) {
|
|
168
|
+
// Perform logout logic
|
|
169
|
+
}
|
|
170
|
+
};
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
---
|
|
174
|
+
|
|
175
|
+
## 🎨 API Reference
|
|
176
|
+
|
|
177
|
+
### 1. `useToast()`
|
|
178
|
+
|
|
179
|
+
| Method | Arguments | Description |
|
|
180
|
+
| ------------- | -------------------------------------------------- | ---------------------------------------- |
|
|
181
|
+
| `success` | `(msg: string, title?: string, duration?: number)` | Triggers a green success toast. |
|
|
182
|
+
| `error` | `(msg: string, title?: string, duration?: number)` | Triggers a red error toast. |
|
|
183
|
+
| `warning` | `(msg: string, title?: string, duration?: number)` | Triggers an orange warning toast. |
|
|
184
|
+
| `info` | `(msg: string, title?: string, duration?: number)` | Triggers a blue info toast. |
|
|
185
|
+
| `setPosition` | `(position: ToastPosition)` | Updates the global container position. |
|
|
186
|
+
| `remove` | `(id: number)` | Manually removes a specific toast by ID. |
|
|
187
|
+
|
|
188
|
+
### 2. `useModal()`
|
|
189
|
+
|
|
190
|
+
| Method | Arguments | Returns | Description |
|
|
191
|
+
| --------- | ------------------------- | ------------------ | --------------------------------------- |
|
|
192
|
+
| `confirm` | `(options: ModalOptions)` | `Promise<boolean>` | Opens modal. Returns true if confirmed. |
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
#### `ModalOptions` Interface
|
|
196
|
+
|
|
197
|
+
| Property | Type | Default | Description |
|
|
198
|
+
| :--- | :--- | :--- | :--- |
|
|
199
|
+
| `title` | `string` | **Required** | The bold heading of the modal. |
|
|
200
|
+
| `message` | `string` | **Required** | The descriptive text body. |
|
|
201
|
+
| `confirmText` | `string` | `'Confirm'` | Label for the action button. |
|
|
202
|
+
| `cancelText` | `string` | `'Cancel'` | Label for the cancel button. |
|
|
203
|
+
| `type` | `'danger' \| 'warning' \| 'info'` | `'info'` | Controls button colors (Danger = Red, etc). |
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
## 🛡️ CSS & Styling
|
|
207
|
+
|
|
208
|
+
This library uses the **`erag-`** prefix for all CSS classes to ensure it never breaks your existing UI.
|
|
209
|
+
|
|
210
|
+
- **Toast Container**: `.erag-toast-container`
|
|
211
|
+
- **Modal Backdrop**: `.erag-modal-backdrop`
|
|
212
|
+
- **Buttons**: `.erag-btn-confirm`, `.erag-btn-cancel`
|
|
213
|
+
|
|
214
|
+
---
|
|
215
|
+
|
|
216
|
+
## 📄 License
|
|
217
|
+
|
|
218
|
+
MIT License © Er Amit Gupta
|
|
@@ -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=Modal.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.vue.d.ts","sourceRoot":"","sources":["../../src/components/Modal.vue"],"names":[],"mappings":"AAmDA;;AA2NA,wBAKG"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ModalOptions } from '../types';
|
|
2
|
+
|
|
3
|
+
export declare const useModal: () => {
|
|
4
|
+
state: {
|
|
5
|
+
isOpen: boolean;
|
|
6
|
+
options: {
|
|
7
|
+
title: string;
|
|
8
|
+
message: string;
|
|
9
|
+
confirmText?: string | undefined;
|
|
10
|
+
cancelText?: string | undefined;
|
|
11
|
+
type?: "danger" | "info" | "warning" | undefined;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
confirm: (options: ModalOptions) => Promise<boolean>;
|
|
15
|
+
handleAction: (choice: boolean) => void;
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=useModal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../src/composables/useModal.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAe7C,eAAO,MAAM,QAAQ;;;;;;;;;;;uBACS,YAAY,KAAG,OAAO,CAAC,OAAO,CAAC;2BAS3B,OAAO;CAYxC,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { Plugin } from 'vue';
|
|
2
2
|
import { useToast } from './composables/useToast';
|
|
3
|
+
import { useModal } from './composables/useModal';
|
|
3
4
|
|
|
4
5
|
export * from './types';
|
|
5
|
-
export { useToast };
|
|
6
|
+
export { useToast, useModal };
|
|
6
7
|
declare const ToastPlugin: Plugin;
|
|
7
8
|
export default ToastPlugin;
|
|
8
9
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAO,MAAM,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAO,MAAM,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAE9B,QAAA,MAAM,WAAW,EAAE,MAgClB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
package/dist/style.css
CHANGED
|
@@ -1 +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}
|
|
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}.erag-modal-backdrop[data-v-13c52896]{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.erag-modal-container[data-v-13c52896]{background:#fff;width:90%;max-width:450px;border-radius:8px;box-shadow:0 20px 25px -5px #0000001a;overflow:hidden;font-family:inherit}.erag-modal-body[data-v-13c52896]{padding:24px;display:flex;gap:16px}.erag-modal-icon-wrapper[data-v-13c52896]{width:40px;height:40px;border-radius:50%;background:#fee2e2;color:#dc2626;display:flex;align-items:center;justify-content:center;flex-shrink:0}.erag-modal-icon-wrapper svg[data-v-13c52896]{width:24px;height:24px}.erag-modal-text h3[data-v-13c52896]{margin:0 0 8px;font-size:18px;color:#111827;font-weight:600}.erag-modal-text p[data-v-13c52896]{margin:0;font-size:14px;color:#6b7280;line-height:1.5}.erag-modal-footer[data-v-13c52896]{background:#f9fafb;padding:12px 24px;display:flex;justify-content:flex-end;gap:12px}button[data-v-13c52896]{padding:8px 16px;border-radius:6px;font-weight:500;font-size:14px;cursor:pointer;border:1px solid transparent;transition:all .2s}.erag-btn-cancel[data-v-13c52896]{background:#fff;color:#374151;border-color:#d1d5db;box-shadow:0 1px 2px #0000000d}.erag-btn-cancel[data-v-13c52896]:hover{background:#f3f4f6}.erag-btn-confirm.danger[data-v-13c52896]{background:#dc2626;color:#fff}.erag-btn-confirm.danger[data-v-13c52896]:hover{background:#b91c1c}.erag-modal-fade-enter-active[data-v-13c52896],.erag-modal-fade-leave-active[data-v-13c52896]{transition:opacity .2s}.erag-modal-fade-enter-from[data-v-13c52896],.erag-modal-fade-leave-to[data-v-13c52896]{opacity:0}
|
package/dist/types.d.ts
CHANGED
|
@@ -10,4 +10,11 @@ export interface ToastItem {
|
|
|
10
10
|
export interface PluginOptions {
|
|
11
11
|
position?: ToastPosition;
|
|
12
12
|
}
|
|
13
|
+
export interface ModalOptions {
|
|
14
|
+
title: string;
|
|
15
|
+
message: string;
|
|
16
|
+
confirmText?: string;
|
|
17
|
+
cancelText?: string;
|
|
18
|
+
type?: 'danger' | 'info' | 'warning';
|
|
19
|
+
}
|
|
13
20
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +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"}
|
|
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;AAED,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;CACxC"}
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
import { reactive as
|
|
2
|
-
const
|
|
1
|
+
import { reactive as z, defineComponent as C, ref as $, computed as I, onMounted as E, onBeforeUnmount as P, createElementBlock as v, openBlock as d, normalizeStyle as O, normalizeClass as f, createElementVNode as r, toDisplayString as l, unref as i, createVNode as w, TransitionGroup as S, withCtx as b, Fragment as A, renderList as H, createBlock as k, Transition as V, createCommentVNode as N, render as y } from "vue";
|
|
2
|
+
const m = z({
|
|
3
3
|
toasts: [],
|
|
4
4
|
position: "bottom-right"
|
|
5
5
|
});
|
|
6
6
|
let F = 0;
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
id:
|
|
7
|
+
const _ = () => {
|
|
8
|
+
const a = (t, o, s, c = 4500) => {
|
|
9
|
+
const p = F++, g = {
|
|
10
|
+
id: p,
|
|
11
11
|
type: t,
|
|
12
12
|
title: o,
|
|
13
|
-
message:
|
|
13
|
+
message: s,
|
|
14
14
|
duration: c
|
|
15
15
|
};
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
m.toasts.push(g), c > 0 && setTimeout(() => {
|
|
17
|
+
n(p);
|
|
18
18
|
}, c + 500);
|
|
19
|
-
},
|
|
20
|
-
const o =
|
|
21
|
-
o !== -1 &&
|
|
19
|
+
}, n = (t) => {
|
|
20
|
+
const o = m.toasts.findIndex((s) => s.id === t);
|
|
21
|
+
o !== -1 && m.toasts.splice(o, 1);
|
|
22
22
|
};
|
|
23
23
|
return {
|
|
24
|
-
state:
|
|
25
|
-
show:
|
|
26
|
-
remove:
|
|
24
|
+
state: m,
|
|
25
|
+
show: a,
|
|
26
|
+
remove: n,
|
|
27
27
|
setPosition: (t) => {
|
|
28
|
-
|
|
28
|
+
m.position = t;
|
|
29
29
|
},
|
|
30
|
-
success: (t, o = "Success",
|
|
31
|
-
error: (t, o = "Error",
|
|
32
|
-
warning: (t, o = "Warning",
|
|
33
|
-
info: (t, o = "Info",
|
|
30
|
+
success: (t, o = "Success", s) => a("success", o, t, s),
|
|
31
|
+
error: (t, o = "Error", s) => a("error", o, t, s),
|
|
32
|
+
warning: (t, o = "Warning", s) => a("warning", o, t, s),
|
|
33
|
+
info: (t, o = "Info", s) => a("info", o, t, s)
|
|
34
34
|
};
|
|
35
|
-
},
|
|
35
|
+
}, M = {
|
|
36
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
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
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
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
|
-
},
|
|
40
|
+
}, j = ["innerHTML"], q = { class: "erag-toast-content" }, D = /* @__PURE__ */ C({
|
|
41
41
|
__name: "Toast",
|
|
42
42
|
props: {
|
|
43
43
|
type: {},
|
|
@@ -46,49 +46,49 @@ const p = () => {
|
|
|
46
46
|
duration: {}
|
|
47
47
|
},
|
|
48
48
|
emits: ["close"],
|
|
49
|
-
setup(
|
|
50
|
-
const
|
|
49
|
+
setup(a, { emit: n }) {
|
|
50
|
+
const e = a, t = n, o = $(!1), s = I(() => M[e.type] || M.info);
|
|
51
51
|
let c = null;
|
|
52
|
-
|
|
52
|
+
E(() => {
|
|
53
53
|
requestAnimationFrame(() => {
|
|
54
54
|
o.value = !0;
|
|
55
|
-
}),
|
|
55
|
+
}), p();
|
|
56
56
|
});
|
|
57
|
-
const
|
|
57
|
+
const p = () => {
|
|
58
58
|
c = setTimeout(() => {
|
|
59
|
-
|
|
60
|
-
},
|
|
61
|
-
},
|
|
59
|
+
g();
|
|
60
|
+
}, e.duration);
|
|
61
|
+
}, g = () => {
|
|
62
62
|
t("close");
|
|
63
|
-
},
|
|
64
|
-
},
|
|
63
|
+
}, B = () => {
|
|
64
|
+
}, L = () => {
|
|
65
65
|
};
|
|
66
|
-
return
|
|
66
|
+
return P(() => {
|
|
67
67
|
c && clearTimeout(c);
|
|
68
|
-
}), (
|
|
69
|
-
class:
|
|
70
|
-
style:
|
|
71
|
-
onMouseenter:
|
|
72
|
-
onMouseleave:
|
|
68
|
+
}), (te, T) => (d(), v("div", {
|
|
69
|
+
class: f(["erag-toast", [`erag-${a.type}`, { "erag-show": o.value }]]),
|
|
70
|
+
style: O({ "--duration": a.duration + "ms" }),
|
|
71
|
+
onMouseenter: B,
|
|
72
|
+
onMouseleave: L
|
|
73
73
|
}, [
|
|
74
|
-
|
|
74
|
+
r("div", {
|
|
75
75
|
class: "erag-toast-icon",
|
|
76
|
-
innerHTML:
|
|
77
|
-
}, null, 8,
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
76
|
+
innerHTML: s.value
|
|
77
|
+
}, null, 8, j),
|
|
78
|
+
r("div", q, [
|
|
79
|
+
r("strong", null, l(a.title), 1),
|
|
80
|
+
r("span", null, l(a.message), 1)
|
|
81
81
|
]),
|
|
82
|
-
|
|
82
|
+
r("button", {
|
|
83
83
|
class: "erag-toast-close",
|
|
84
|
-
onClick:
|
|
85
|
-
}, [...
|
|
86
|
-
|
|
84
|
+
onClick: g
|
|
85
|
+
}, [...T[0] || (T[0] = [
|
|
86
|
+
r("svg", {
|
|
87
87
|
"aria-hidden": "true",
|
|
88
88
|
xmlns: "http://www.w3.org/2000/svg",
|
|
89
89
|
viewBox: "0 0 320 512"
|
|
90
90
|
}, [
|
|
91
|
-
|
|
91
|
+
r("path", {
|
|
92
92
|
fill: "currentColor",
|
|
93
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
94
|
})
|
|
@@ -96,49 +96,125 @@ const p = () => {
|
|
|
96
96
|
])])
|
|
97
97
|
], 38));
|
|
98
98
|
}
|
|
99
|
-
}),
|
|
100
|
-
const
|
|
101
|
-
for (const [t, o] of
|
|
102
|
-
|
|
103
|
-
return
|
|
104
|
-
},
|
|
99
|
+
}), x = (a, n) => {
|
|
100
|
+
const e = a.__vccOpts || a;
|
|
101
|
+
for (const [t, o] of n)
|
|
102
|
+
e[t] = o;
|
|
103
|
+
return e;
|
|
104
|
+
}, G = /* @__PURE__ */ x(D, [["__scopeId", "data-v-d05d0e63"]]), U = /* @__PURE__ */ C({
|
|
105
105
|
__name: "ToastContainer",
|
|
106
|
-
setup(
|
|
107
|
-
const { state:
|
|
108
|
-
return (t, o) => (d(),
|
|
109
|
-
class:
|
|
106
|
+
setup(a) {
|
|
107
|
+
const { state: n, remove: e } = _();
|
|
108
|
+
return (t, o) => (d(), v("div", {
|
|
109
|
+
class: f(["erag-toast-container", `erag-${i(n).position}`])
|
|
110
110
|
}, [
|
|
111
|
-
|
|
112
|
-
default:
|
|
113
|
-
(d(!0),
|
|
114
|
-
key:
|
|
115
|
-
type:
|
|
116
|
-
title:
|
|
117
|
-
message:
|
|
118
|
-
duration:
|
|
119
|
-
onClose: (c) =>
|
|
111
|
+
w(S, { name: "erag-toast-list" }, {
|
|
112
|
+
default: b(() => [
|
|
113
|
+
(d(!0), v(A, null, H(i(n).toasts, (s) => (d(), k(G, {
|
|
114
|
+
key: s.id,
|
|
115
|
+
type: s.type,
|
|
116
|
+
title: s.title,
|
|
117
|
+
message: s.message,
|
|
118
|
+
duration: s.duration,
|
|
119
|
+
onClose: (c) => i(e)(s.id)
|
|
120
120
|
}, null, 8, ["type", "title", "message", "duration", "onClose"]))), 128))
|
|
121
121
|
]),
|
|
122
122
|
_: 1
|
|
123
123
|
})
|
|
124
124
|
], 2));
|
|
125
125
|
}
|
|
126
|
-
}),
|
|
127
|
-
|
|
126
|
+
}), W = /* @__PURE__ */ x(U, [["__scopeId", "data-v-da376e1c"]]), u = z({
|
|
127
|
+
isOpen: !1,
|
|
128
|
+
options: {
|
|
129
|
+
title: "",
|
|
130
|
+
message: "",
|
|
131
|
+
confirmText: "Confirm",
|
|
132
|
+
cancelText: "Cancel",
|
|
133
|
+
type: "info"
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
let h;
|
|
137
|
+
const J = () => ({
|
|
138
|
+
state: u,
|
|
139
|
+
confirm: (e) => (u.options = { ...u.options, ...e }, u.isOpen = !0, new Promise((t) => {
|
|
140
|
+
h = t;
|
|
141
|
+
})),
|
|
142
|
+
handleAction: (e) => {
|
|
143
|
+
u.isOpen = !1, h && h(e);
|
|
144
|
+
}
|
|
145
|
+
}), K = {
|
|
146
|
+
key: 0,
|
|
147
|
+
class: "erag-modal-backdrop"
|
|
148
|
+
}, Q = { class: "erag-modal-container" }, R = { class: "erag-modal-body" }, X = { class: "erag-modal-text" }, Y = { class: "erag-modal-footer" }, Z = /* @__PURE__ */ C({
|
|
149
|
+
__name: "Modal",
|
|
150
|
+
setup(a) {
|
|
151
|
+
const { state: n, handleAction: e } = J();
|
|
152
|
+
return (t, o) => (d(), k(V, { name: "erag-modal-fade" }, {
|
|
153
|
+
default: b(() => [
|
|
154
|
+
i(n).isOpen ? (d(), v("div", K, [
|
|
155
|
+
r("div", Q, [
|
|
156
|
+
r("div", R, [
|
|
157
|
+
r("div", {
|
|
158
|
+
class: f(["erag-modal-icon-wrapper", i(n).options.type])
|
|
159
|
+
}, [...o[2] || (o[2] = [
|
|
160
|
+
r("svg", {
|
|
161
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
162
|
+
fill: "none",
|
|
163
|
+
viewBox: "0 0 24 24",
|
|
164
|
+
"stroke-width": "1.5",
|
|
165
|
+
stroke: "currentColor"
|
|
166
|
+
}, [
|
|
167
|
+
r("path", {
|
|
168
|
+
"stroke-linecap": "round",
|
|
169
|
+
"stroke-linejoin": "round",
|
|
170
|
+
d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
|
|
171
|
+
})
|
|
172
|
+
], -1)
|
|
173
|
+
])], 2),
|
|
174
|
+
r("div", X, [
|
|
175
|
+
r("h3", null, l(i(n).options.title), 1),
|
|
176
|
+
r("p", null, l(i(n).options.message), 1)
|
|
177
|
+
])
|
|
178
|
+
]),
|
|
179
|
+
r("div", Y, [
|
|
180
|
+
r("button", {
|
|
181
|
+
class: "erag-btn-cancel",
|
|
182
|
+
onClick: o[0] || (o[0] = (s) => i(e)(!1))
|
|
183
|
+
}, l(i(n).options.cancelText || "Cancel"), 1),
|
|
184
|
+
r("button", {
|
|
185
|
+
class: f(["erag-btn-confirm", i(n).options.type]),
|
|
186
|
+
onClick: o[1] || (o[1] = (s) => i(e)(!0))
|
|
187
|
+
}, l(i(n).options.confirmText || "Confirm"), 3)
|
|
188
|
+
])
|
|
189
|
+
])
|
|
190
|
+
])) : N("", !0)
|
|
191
|
+
]),
|
|
192
|
+
_: 1
|
|
193
|
+
}));
|
|
194
|
+
}
|
|
195
|
+
}), ee = /* @__PURE__ */ x(Z, [["__scopeId", "data-v-13c52896"]]), se = {
|
|
196
|
+
install(a, n = {}) {
|
|
128
197
|
if (!document.getElementById("erag-toast-container")) {
|
|
129
|
-
const
|
|
130
|
-
|
|
131
|
-
const t =
|
|
132
|
-
|
|
198
|
+
const e = document.createElement("div");
|
|
199
|
+
e.id = "erag-toast-container", document.body.appendChild(e);
|
|
200
|
+
const t = w(W);
|
|
201
|
+
y(t, e);
|
|
202
|
+
}
|
|
203
|
+
if (!document.getElementById("erag-modal-container")) {
|
|
204
|
+
const e = document.createElement("div");
|
|
205
|
+
e.id = "erag-modal-container", document.body.appendChild(e);
|
|
206
|
+
const t = w(ee);
|
|
207
|
+
y(t, e);
|
|
133
208
|
}
|
|
134
|
-
if (
|
|
135
|
-
const { setPosition:
|
|
136
|
-
n
|
|
209
|
+
if (n.position) {
|
|
210
|
+
const { setPosition: e } = _();
|
|
211
|
+
e(n.position);
|
|
137
212
|
}
|
|
138
|
-
|
|
213
|
+
a.config.globalProperties.$toast = _();
|
|
139
214
|
}
|
|
140
215
|
};
|
|
141
216
|
export {
|
|
142
|
-
|
|
143
|
-
|
|
217
|
+
se as default,
|
|
218
|
+
J as useModal,
|
|
219
|
+
_ as useToast
|
|
144
220
|
};
|
|
@@ -1 +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
|
|
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 C=0;const m=()=>{const a=(o,n,s,c=4500)=>{const p=C++,f={id:p,type:o,title:n,message:s,duration:c};l.toasts.push(f),c>0&&setTimeout(()=>{r(p)},c+500)},r=o=>{const n=l.toasts.findIndex(s=>s.id===o);n!==-1&&l.toasts.splice(n,1)};return{state:l,show:a,remove:r,setPosition:o=>{l.position=o},success:(o,n="Success",s)=>a("success",n,o,s),error:(o,n="Error",s)=>a("error",n,o,s),warning:(o,n="Warning",s)=>a("warning",n,o,s),info:(o,n="Info",s)=>a("info",n,o,s)}},u={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>'},y=["innerHTML"],E={class:"erag-toast-content"},T=e.defineComponent({__name:"Toast",props:{type:{},title:{},message:{},duration:{}},emits:["close"],setup(a,{emit:r}){const t=a,o=r,n=e.ref(!1),s=e.computed(()=>u[t.type]||u.info);let c=null;e.onMounted(()=>{requestAnimationFrame(()=>{n.value=!0}),p()});const p=()=>{c=setTimeout(()=>{f()},t.duration)},f=()=>{o("close")},$=()=>{},L=()=>{};return e.onBeforeUnmount(()=>{c&&clearTimeout(c)}),(D,_)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["erag-toast",[`erag-${a.type}`,{"erag-show":n.value}]]),style:e.normalizeStyle({"--duration":a.duration+"ms"}),onMouseenter:$,onMouseleave:L},[e.createElementVNode("div",{class:"erag-toast-icon",innerHTML:s.value},null,8,y),e.createElementVNode("div",E,[e.createElementVNode("strong",null,e.toDisplayString(a.title),1),e.createElementVNode("span",null,e.toDisplayString(a.message),1)]),e.createElementVNode("button",{class:"erag-toast-close",onClick:f},[..._[0]||(_[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))}}),g=(a,r)=>{const t=a.__vccOpts||a;for(const[o,n]of r)t[o]=n;return t},x=g(T,[["__scopeId","data-v-d05d0e63"]]),V=g(e.defineComponent({__name:"ToastContainer",setup(a){const{state:r,remove:t}=m();return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["erag-toast-container",`erag-${e.unref(r).position}`])},[e.createVNode(e.TransitionGroup,{name:"erag-toast-list"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r).toasts,s=>(e.openBlock(),e.createBlock(x,{key:s.id,type:s.type,title:s.title,message:s.message,duration:s.duration,onClose:c=>e.unref(t)(s.id)},null,8,["type","title","message","duration","onClose"]))),128))]),_:1})],2))}}),[["__scopeId","data-v-da376e1c"]]),d=e.reactive({isOpen:!1,options:{title:"",message:"",confirmText:"Confirm",cancelText:"Cancel",type:"info"}});let h;const w=()=>({state:d,confirm:t=>(d.options={...d.options,...t},d.isOpen=!0,new Promise(o=>{h=o})),handleAction:t=>{d.isOpen=!1,h&&h(t)}}),k={key:0,class:"erag-modal-backdrop"},N={class:"erag-modal-container"},B={class:"erag-modal-body"},M={class:"erag-modal-text"},z={class:"erag-modal-footer"},b=g(e.defineComponent({__name:"Modal",setup(a){const{state:r,handleAction:t}=w();return(o,n)=>(e.openBlock(),e.createBlock(e.Transition,{name:"erag-modal-fade"},{default:e.withCtx(()=>[e.unref(r).isOpen?(e.openBlock(),e.createElementBlock("div",k,[e.createElementVNode("div",N,[e.createElementVNode("div",B,[e.createElementVNode("div",{class:e.normalizeClass(["erag-modal-icon-wrapper",e.unref(r).options.type])},[...n[2]||(n[2]=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"})],-1)])],2),e.createElementVNode("div",M,[e.createElementVNode("h3",null,e.toDisplayString(e.unref(r).options.title),1),e.createElementVNode("p",null,e.toDisplayString(e.unref(r).options.message),1)])]),e.createElementVNode("div",z,[e.createElementVNode("button",{class:"erag-btn-cancel",onClick:n[0]||(n[0]=s=>e.unref(t)(!1))},e.toDisplayString(e.unref(r).options.cancelText||"Cancel"),1),e.createElementVNode("button",{class:e.normalizeClass(["erag-btn-confirm",e.unref(r).options.type]),onClick:n[1]||(n[1]=s=>e.unref(t)(!0))},e.toDisplayString(e.unref(r).options.confirmText||"Confirm"),3)])])])):e.createCommentVNode("",!0)]),_:1}))}}),[["__scopeId","data-v-13c52896"]]),S={install(a,r={}){if(!document.getElementById("erag-toast-container")){const t=document.createElement("div");t.id="erag-toast-container",document.body.appendChild(t);const o=e.createVNode(V);e.render(o,t)}if(!document.getElementById("erag-modal-container")){const t=document.createElement("div");t.id="erag-modal-container",document.body.appendChild(t);const o=e.createVNode(b);e.render(o,t)}if(r.position){const{setPosition:t}=m();t(r.position)}a.config.globalProperties.$toast=m()}};i.default=S,i.useModal=w,i.useToast=m,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|