npm - toastify-pro - Versions diffs - 1.2.0 → 1.4.0 - Mend

toastify-pro 1.2.0 → 1.4.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.

Files changed (9) hide show

package/README.md +400 -41
package/dist/toastify-pro.esm.js +759 -4
package/dist/toastify-pro.esm.js.map +1 -1
package/dist/toastify-pro.umd.js +759 -4
package/dist/toastify-pro.umd.js.map +1 -1
package/dist/toastify-pro.umd.min.js +8 -2
package/dist/toastify-pro.umd.min.js.map +1 -1
package/package.json +2 -2
package/src/toastify-pro.js +759 -4

package/README.md CHANGED Viewed

@@ -10,7 +10,7 @@
 [![License](https://img.shields.io/npm/l/toastify-pro.svg)](https://github.com/abhipotter/toastify-pro/blob/main/LICENSE)
 [![Bundle Size](https://img.shields.io/bundlephobia/minzip/toastify-pro)](https://bundlephobia.com/package/toastify-pro)
-[Demo](https://abhipotter.github.io/toastify-pro) • [Documentation](https://github.com/abhipotter/toastify-pro/wiki) • [Examples](https://github.com/abhipotter/toastify-pro/tree/main/examples)
+[Demo](https://abhipotter.github.io/toastify-pro/demo) • [Documentation](https://github.com/abhipotter/toastify-pro/wiki) • [Examples](https://github.com/abhipotter/toastify-pro/tree/main/examples)
 </div>
@@ -18,18 +18,19 @@
 - 🚀 **Lightweight** - Minimal bundle size with zero dependencies
 - 🎨 **6 Built-in Themes** - Success, Error, Info, Warning, Dark, and Light themes
-- 📱 **Flexible Positioning** - 6 different position options
-- ⚡ **Apple-Style Animations** - Smooth AirDrop-inspired entrance and exit effects
+- 🎯 **Interactive Confirmation Dialogs** - Perfect replacement for SweetAlert with dark/light themes
+- 📱 **7 Flexible Positions** - Including center position ideal for confirmations
+- ⚡ **Apple-Style Animations** - Smooth AirDrop-inspired entrance and car-swipe exit effects
 - 🔧 **Framework Agnostic** - Works with React, Vue, Angular, or vanilla JS
 - 🎯 **Auto-dismiss** - Configurable timeout with manual close option
 - 📝 **Description Support** - Optional secondary text for detailed messages
 - 🌈 **Easy Customization** - Simple API with sensible defaults
-- ♿ **Accessible** - Clean HTML structure with proper styling
+- ♿ **Accessible** - Clean HTML structure with proper ARIA support
 - 🎨 **Custom SVG Icons** - Beautiful vector icons for each toast type
-- 🚗 **Car Swipe Exit Animations** - Position-aware exit animations (5 types)
-- 📱 **POP UP Entrance** - iOS-inspired entrance animation with rotation
-- ✨ **Glassmorphism Design** - Modern backdrop blur effects and transparency
-- 📊 **Progress Bar Animation** - Visual countdown with shimmer effects
+- ✨ **Modern Design** - Glassmorphism effects with backdrop blur
+- 🔒 **Single Instance** - Only one confirmation at a time with shake animation
+- ⏳ **Loading States** - Built-in loading spinner for async operations
+- 🎨 **Custom Gradients** - primaryColor & secondaryColor for gradient backgrounds
 ## 🚀 Quick Start
@@ -65,6 +66,31 @@ toast.light('Light themed message');
 toast.success('Success!', 'Your changes have been saved successfully.');
 toast.error('Error occurred!', 'Please check your network connection and try again.');
 toast.info('New feature!', 'Check out our latest updates in the dashboard.');
+// 🆕 NEW: Confirmation dialogs
+toast.conf('Delete this item?', (confirmed) => {
+    if (confirmed) {
+        toast.success('Item deleted successfully!');
+    } else {
+        toast.info('Delete cancelled');
+    }
+});
+// Confirmation with description
+toast.conf('Are you sure?', 'This action cannot be undone.', (confirmed) => {
+    console.log('User confirmed:', confirmed);
+});
+// Advanced confirmation options
+toast.conf('Save changes?', {
+    description: 'Your changes will be permanently saved.',
+    confirmText: 'Save',
+    cancelText: 'Discard',
+    theme: 'light', // 'dark' (default) or 'light'
+    position: 'center', // Default for confirmations
+    onConfirm: () => console.log('Confirmed!'),
+    onCancel: () => console.log('Cancelled!')
+});
 ```
 #### With CDN
@@ -77,6 +103,7 @@ toast.info('New feature!', 'Check out our latest updates in the dashboard.');
 </head>
 <body>
     <button onclick="showToast()">Show Toast</button>
+    <button onclick="showConfirmation()">Show Confirmation</button>
     <script>
         const toast = new ToastifyPro();
@@ -95,6 +122,29 @@ toast.info('New feature!', 'Check out our latest updates in the dashboard.');
                 allowClose: true
             });
         }
+        // 🆕 NEW: Confirmation dialogs
+        function showConfirmation() {
+            toast.conf('Delete this item?', 'This action cannot be undone.', (confirmed) => {
+                if (confirmed) {
+                    toast.success('Item deleted!');
+                } else {
+                    toast.info('Delete cancelled');
+                }
+            });
+        }
+        function showAdvancedConfirmation() {
+            toast.conf('Save document?', {
+                description: 'All your changes will be saved permanently.',
+                confirmText: 'Save Now',
+                cancelText: 'Cancel',
+                theme: 'light',
+                position: 'center'
+            }, (confirmed) => {
+                console.log('User decision:', confirmed);
+            });
+        }
     </script>
 </body>
 </html>
@@ -120,6 +170,7 @@ const toast = new ToastifyPro({
 - `bottom-left` - Bottom left corner
 - `bottom-right` - Bottom right corner
 - `bottom-center` - Bottom center (default)
+- `center` - Perfect center of screen (ideal for confirmations)
 ### Methods
@@ -185,6 +236,135 @@ toast.light('Settings updated', { timeout: 2000 });
 toast.light('Light Mode', 'Switched to clean light theme.'); // With description
 ```
+#### 🆕 `toast.conf(message, descriptionOrCallback, callback)` or `toast.confirm(message, descriptionOrCallback, callback)`
+Display an interactive confirmation dialog with confirm/cancel buttons. Both methods work identically.
+**Features:**
+- 🎯 **Center positioning** (default) for maximum attention
+- 🔒 **Single instance** - Only one confirmation at a time with shake animation
+- ⏳ **Loading states** - Built-in spinner for async operations
+- 🎨 **Custom gradients** - primaryColor & secondaryColor support
+- 📱 **Responsive** design for mobile devices
+- ⚡ **No auto-dismiss** - requires user interaction
+**Options:**
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `description` | string | - | Secondary text below the message |
+| `confirmText` | string | `'Confirm'` | Custom confirm button text |
+| `cancelText` | string | `'Cancel'` | Custom cancel button text |
+| `theme` | string | `'dark'` | Theme: `'dark'` or `'light'` |
+| `position` | string | `'center'` | Any valid position |
+| `primaryColor` | string | - | Primary gradient color (hex) |
+| `secondaryColor` | string | - | Secondary gradient color (hex) |
+| `onConfirm` | function | - | Callback when confirmed |
+| `onCancel` | function | - | Callback when cancelled |
+```javascript
+// Simple confirmation
+toast.conf('Delete this item?', (confirmed) => {
+    if (confirmed) toast.success('Deleted!');
+});
+// With description
+toast.conf('Are you sure?', 'This action cannot be undone.', (confirmed) => {
+    console.log('User confirmed:', confirmed);
+});
+// With options
+toast.conf('Save changes?', {
+    description: 'Your changes will be saved permanently.',
+    confirmText: 'Save',
+    cancelText: 'Discard',
+    theme: 'light',
+    position: 'center'
+}, (confirmed) => {
+    if (confirmed) submitForm();
+});
+```
+#### ⏳ Loading States
+Handle async operations with built-in loading spinner:
+```javascript
+// Manual loading control
+toast.conf('Process data?', {
+    confirmText: 'Process'
+}, (confirmed, { setLoading, close }) => {
+    if (confirmed) {
+        setLoading(true);  // Show spinner, disable buttons
+        fetch('/api/process')
+            .then(() => {
+                setLoading(false);
+                close();
+                toast.success('Done!');
+            })
+            .catch(() => {
+                setLoading(false);
+                close();
+                toast.error('Failed!');
+            });
+    }
+});
+// Async/await (auto-loading for promises)
+toast.conf('Fetch data?', {
+    confirmText: 'Fetch',
+    onConfirm: async () => {
+        await fetch('/api/data');  // Auto shows loading
+        toast.success('Data fetched!');
+    }
+});
+// With custom colors
+toast.conf('Upload file?', {
+    primaryColor: '#f59e0b',
+    secondaryColor: '#d97706',
+    onConfirm: async ({ setLoading, close }) => {
+        setLoading(true);
+        await uploadFile();
+        close();
+        toast.success('Uploaded!');
+    }
+});
+```
+#### 🎨 Custom Gradient Colors
+Create beautiful gradient backgrounds:
+```javascript
+// Orange gradient
+toast.conf('Custom styled!', {
+    primaryColor: '#f97316',
+    secondaryColor: '#ea580c',
+    confirmText: 'Nice!'
+});
+// Purple gradient
+toast.conf('Purple theme', {
+    primaryColor: '#8b5cf6',
+    secondaryColor: '#6366f1'
+});
+// Text color auto-adjusts based on background brightness
+toast.conf('Light background', {
+    primaryColor: '#fef3c7',  // Light color
+    secondaryColor: '#fde68a'  // Dark text will be used
+});
+```
+#### 🔒 Single Instance (Shake Effect)
+Only one confirmation dialog can be open at a time. Attempting to open another will shake the existing one:
+```javascript
+// First call - shows confirmation
+toast.conf('First dialog');
+// Second call - shakes existing dialog instead of opening new one
+toast.conf('Second dialog');  // Shakes first dialog!
+```
 ### 🆕 Enhanced Features
 #### Custom SVG Icons
@@ -305,6 +485,34 @@ function App() {
         toast?.info('New Feature!', 'Check out our latest React integration updates.');
     };
+    // 🆕 NEW: Confirmation dialog examples
+    const handleDelete = () => {
+        toast?.conf('Delete item?', 'This action cannot be undone.', (confirmed) => {
+            if (confirmed) {
+                // Perform deletion logic
+                console.log('Deleting item...');
+                toast?.success('Item deleted successfully!');
+            } else {
+                toast?.info('Delete cancelled');
+            }
+        });
+    };
+    const handleLogout = () => {
+        toast?.conf('Sign out?', {
+            description: 'You will need to sign in again to access your account.',
+            confirmText: 'Sign Out',
+            cancelText: 'Stay Signed In',
+            theme: 'dark',
+            position: 'center'
+        }, (confirmed) => {
+            if (confirmed) {
+                // Logout logic
+                window.location.href = '/login';
+            }
+        });
+    };
     const handleIconDemo = () => {
         // Showcase different icons with descriptions
         toast?.success('✓ Success Icon', 'Beautiful checkmark with green theme');
@@ -319,6 +527,8 @@ function App() {
             <button onClick={handleError}>Show Error</button>
             <button onClick={handleWithDescription}>Show with Description</button>
             <button onClick={handleIconDemo}>Demo All Icons</button>
+            <button onClick={handleDelete}>Delete with Confirmation</button>
+            <button onClick={handleLogout}>Logout Confirmation</button>
         </div>
     );
 }
@@ -333,6 +543,8 @@ export default App;
         <button @click="showSuccess">Show Success</button>
         <button @click="showError">Show Error</button>
         <button @click="showCustom">Show Custom</button>
+        <button @click="showConfirmation">Show Confirmation</button>
+        <button @click="showDeleteConfirmation">Delete Item</button>
     </div>
 </template>
@@ -364,6 +576,38 @@ export default {
                 timeout: 6000,
                 allowClose: true
             });
+        },
+        // 🆕 NEW: Confirmation methods
+        showConfirmation() {
+            this.toast.conf('Save changes?', (confirmed) => {
+                if (confirmed) {
+                    this.saveData();
+                } else {
+                    this.toast.info('Changes not saved');
+                }
+            });
+        },
+        showDeleteConfirmation() {
+            this.toast.conf('Delete this item?', {
+                description: 'This action cannot be undone and will remove all associated data.',
+                confirmText: 'Delete',
+                cancelText: 'Keep',
+                theme: 'dark',
+                position: 'center'
+            }, (confirmed) => {
+                if (confirmed) {
+                    this.deleteItem();
+                    this.toast.success('Item deleted successfully!');
+                }
+            });
+        },
+        saveData() {
+            // Save logic here
+            this.toast.success('Data saved successfully!');
+        },
+        deleteItem() {
+            // Delete logic here
+            console.log('Item deleted');
         }
     }
 };
@@ -381,6 +625,8 @@ import ToastifyPro from 'toastify-pro';
         <button (click)="showSuccess()">Show Success</button>
         <button (click)="showError()">Show Error</button>
         <button (click)="showInfo()">Show Info</button>
+        <button (click)="showConfirmation()">Show Confirmation</button>
+        <button (click)="showLogoutConfirmation()">Logout</button>
     `
 })
 export class ToastExampleComponent implements OnInit {
@@ -407,6 +653,41 @@ export class ToastExampleComponent implements OnInit {
             timeout: 5000
         });
     }
+    // 🆕 NEW: Confirmation methods
+    showConfirmation() {
+        this.toast.conf('Save document?', 'All changes will be saved permanently.', (confirmed: boolean) => {
+            if (confirmed) {
+                this.saveDocument();
+            } else {
+                this.toast.info('Save cancelled');
+            }
+        });
+    }
+    showLogoutConfirmation() {
+        this.toast.conf('Sign out?', {
+            description: 'You will be logged out of your account.',
+            confirmText: 'Sign Out',
+            cancelText: 'Cancel',
+            theme: 'light',
+            position: 'center'
+        }, (confirmed: boolean) => {
+            if (confirmed) {
+                this.logout();
+            }
+        });
+    }
+    private saveDocument() {
+        // Save logic
+        this.toast.success('Document saved successfully!');
+    }
+    private logout() {
+        // Logout logic
+        this.toast.success('Logged out successfully!');
+    }
 }
 ```
@@ -419,30 +700,71 @@ const toast = new ToastifyPro({
     allowClose: true
 });
-// Form submission example
+// Form submission example with confirmation
 document.getElementById('submitForm').addEventListener('click', async function() {
-    try {
-        // Simulate API call
-        const response = await fetch('/api/submit', { method: 'POST' });
-        if (response.ok) {
-            toast.success('Form submitted successfully!', 'Your data has been processed and saved.');
-        } else {
-            toast.error('Failed to submit form', 'Please check your inputs and try again.');
+    toast.conf('Submit form?', 'Your data will be sent to the server.', async (confirmed) => {
+        if (confirmed) {
+            try {
+                // Simulate API call
+                const response = await fetch('/api/submit', { method: 'POST' });
+                if (response.ok) {
+                    toast.success('Form submitted successfully!', 'Your data has been processed and saved.');
+                } else {
+                    toast.error('Failed to submit form', 'Please check your inputs and try again.');
+                }
+            } catch (error) {
+                toast.error('Network error occurred', 'Check your connection and retry.');
+            }
         }
-    } catch (error) {
-        toast.error('Network error occurred', 'Check your connection and retry.');
-    }
+    });
 });
-// File upload with progress
+// Delete confirmation example
+function deleteItem(itemId) {
+    toast.conf('Delete this item?', {
+        description: 'This action cannot be undone and will permanently remove all associated data.',
+        confirmText: 'Delete',
+        cancelText: 'Keep',
+        theme: 'dark',
+        position: 'center'
+    }, (confirmed) => {
+        if (confirmed) {
+            // Perform deletion
+            console.log('Deleting item:', itemId);
+            toast.success('Item deleted!', 'The item has been permanently removed.');
+        } else {
+            toast.info('Delete cancelled', 'Your item is safe.');
+        }
+    });
+}
+// File upload with confirmation and progress
 function handleFileUpload() {
-    toast.info('Uploading...', 'Please wait while we process your file.');
-    // Simulate upload completion
-    setTimeout(() => {
-        toast.success('Upload complete!', 'Your file has been uploaded successfully.');
-    }, 3000);
+    toast.conf('Upload file?', 'The file will be uploaded to your account.', (confirmed) => {
+        if (confirmed) {
+            toast.info('Uploading...', 'Please wait while we process your file.');
+            // Simulate upload completion
+            setTimeout(() => {
+                toast.success('Upload complete!', 'Your file has been uploaded successfully.');
+            }, 3000);
+        }
+    });
+}
+// Logout confirmation
+function logout() {
+    toast.conf('Sign out?', {
+        description: 'You will need to sign in again to access your account.',
+        confirmText: 'Sign Out',
+        cancelText: 'Stay Signed In',
+        theme: 'light'
+    }, (confirmed) => {
+        if (confirmed) {
+            window.location.href = '/login';
+        }
+    });
 }
 // Multiple toast types with descriptions
@@ -455,7 +777,7 @@ function showAllTypes() {
     setTimeout(() => toast.light('Light Mode', 'Clean light notification'), 2500);
 }
-// Showcase new enhanced features
+// Showcase new enhanced features including confirmations
 function demoEnhancedFeatures() {
     // SVG Icons demo
     toast.success('✓ Beautiful Icons', 'Each type has its own vector icon that scales perfectly');
@@ -474,24 +796,61 @@ function demoEnhancedFeatures() {
     setTimeout(() => {
         toast.dark('✨ Glassmorphism', 'Modern backdrop blur with translucent design');
     }, 3000);
+    // 🆕 Confirmation dialog demo
+    setTimeout(() => {
+        toast.conf('Try confirmation?', 'Experience the new interactive dialog feature.', (confirmed) => {
+            if (confirmed) {
+                toast.success('🎉 Confirmation works!', 'You can now create interactive dialogs easily.');
+            } else {
+                toast.info('No problem!', 'Confirmation dialogs are optional.');
+            }
+        });
+    }, 4000);
+}
+// Advanced confirmation examples
+function advancedConfirmationExamples() {
+    // Settings reset confirmation
+    toast.conf('Reset all settings?', {
+        description: 'This will restore all settings to their default values.',
+        confirmText: 'Reset',
+        cancelText: 'Cancel',
+        theme: 'dark',
+        position: 'center'
+    }, (confirmed) => {
+        if (confirmed) {
+            // Reset settings logic
+            toast.success('Settings reset!', 'All settings have been restored to defaults.');
+        }
+    });
 }
 // Advanced usage with all new features
 function advancedExample() {
-    // Progress indication with description
-    toast.info('Processing...', {
-        description: 'Please wait while we upload your file to the server',
-        timeout: 0, // No auto-dismiss
-        allowClose: true
+    // Progress indication with confirmation first
+    toast.conf('Start processing?', {
+        description: 'This will upload your file to the server and may take a few minutes.',
+        confirmText: 'Start',
+        cancelText: 'Later',
+        theme: 'light'
+    }, (confirmed) => {
+        if (confirmed) {
+            toast.info('Processing...', {
+                description: 'Please wait while we upload your file to the server',
+                timeout: 0, // No auto-dismiss
+                allowClose: true
+            });
+            // Simulate progress completion
+            setTimeout(() => {
+                toast.success('Upload Complete!', {
+                    description: 'Your file has been uploaded successfully with all metadata',
+                    timeout: 5000
+                });
+            }, 3000);
+        }
     });
-    // Simulate progress completion
-    setTimeout(() => {
-        toast.success('Upload Complete!', {
-            description: 'Your file has been uploaded successfully with all metadata',
-            timeout: 5000
-        });
-    }, 3000);
 }
 ```