fernotify 1.0.0 → 1.2.5

package/NOTIFICATION_SYSTEM_GUIDE.md

@@ -146,7 +146,7 @@ async function loadData() {
 }
 ```
 
-### Confirmación de Eliminación
+### Confirmación de Eliminación (dos botones)
 
 ```javascript
 function deleteItem(id) {
@@ -154,12 +154,52 @@ function deleteItem(id) {
         type: 'warning',
         title: '¿Estás seguro?',
         message: 'Esta acción no se puede deshacer. El registro será eliminado permanentemente.',
-        buttonText: 'Sí, eliminar',
-        onClose: async () => {
-            // Usuario confirmó, proceder con eliminación
+        buttons: [
+            {
+                text: 'Cancelar',
+                color: 'linear-gradient(135deg, #9ca3af 0%, #6b7280 100%)',
+                onClick: () => {
+                    // El usuario decidió no continuar; simplemente cerramos
+                    console.log('Eliminación cancelada');
+                }
+            },
+            {
+                text: 'Sí, eliminar',
+                color: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
+                onClick: async () => {
+                    await performDelete(id);
+                    notify.success('Registro eliminado correctamente');
+                }
+            }
+        ],
+        allowOutsideClick: false,
+        allowEscapeKey: false
+    });
+}
+```
+
+### Confirmación simplificada con `onConfirm` / `onCancel`
+
+Si prefieres no definir un array de botones, puedes usar los atajos `onConfirm` y `onCancel`.
+`onConfirm` puede devolver una promesa (se espera antes de cerrar la notificación).
+
+```javascript
+function deleteItem(id) {
+    notify.show({
+        type: 'warning',
+        title: '¿Eliminar registro?',
+        message: 'Esta acción no se puede deshacer.',
+        confirmText: 'Sí, eliminar',
+        cancelText: 'Cancelar',
+        onConfirm: async () => {
             await performDelete(id);
             notify.success('Registro eliminado correctamente');
-        }
+        },
+        onCancel: () => {
+            console.log('Eliminación cancelada por el usuario');
+        },
+        allowOutsideClick: false,
+        allowEscapeKey: false
     });
 }
 ```
@@ -653,8 +693,17 @@ Cada tipo tiene su propio estilo:
     type: 'success' | 'error' | 'warning' | 'info',  // Requerido
     title: 'Título',                                  // Opcional
     message: 'Mensaje detallado',                     // Requerido
-    buttonText: 'OK',                                 // Opcional (default: 'OK')
-    timer: 5000,                                      // Opcional (ms, null = sin timer)
+    buttonText: 'OK',                                 // Opcional (default: 'OK')    // Array de botones. Cada elemento puede contener:
+    // { text, color?, shadowColor?, onClick? }
+    // Si se proporciona, `buttonText` se ignora y se renderiza
+    // una botonera con el contenido del array.
+    buttons: [],    timer: 5000,                                      // Opcional (ms, null = sin timer)
+    // Atajos para confirmaciones: si prefieres no definir un array de botones,
+    // puedes usar `onConfirm` y `onCancel` junto con `confirmText` / `cancelText`:
+    // onConfirm: () => { /* acción confirmada */ },
+    // onCancel: () => { /* acción cancelada */ },
+    // confirmText: 'Sí, eliminar',
+    // cancelText: 'Cancelar',
     onClose: () => { }                                // Opcional (callback)
 }
 ```

package/README.md

@@ -74,11 +74,11 @@ window.notify = new NotificationSystem();
 
 ```html
 <!-- UMD -->
-<script src="https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@1.0.0/dist/notification-system.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@1.2.1/dist/notification-system.js"></script>
 
 <!-- ES Module -->
 <script type="module">
-  import NotificationSystem from 'https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@1.0.0/dist/notification-system.esm.js';
+  import NotificationSystem from 'https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@1.2.1/dist/notification-system.esm.js';
 </script>
 ```
 
@@ -167,6 +167,11 @@ notify.show({
   title: 'Título',              // Opcional
   message: 'Mensaje',           // Requerido
   buttonText: 'OK',             // Opcional (default: 'OK')
+  // Para confirmaciones rápidas hay atajos:
+  // `onConfirm` (función) se ejecuta al pulsar el botón de confirmar.
+  // `onCancel` (función) se ejecuta al pulsar el botón de cancelar.
+  // Puedes personalizar textos con `confirmText` / `cancelText` y colores con
+  // `confirmColor` / `cancelColor`.
   timer: 3000,                  // Opcional (ms, null = sin timer)
   allowOutsideClick: true,      // Opcional (default: true)
   allowEscapeKey: true,         // Opcional (default: true)
@@ -269,25 +274,76 @@ async function fetchData() {
 fetchData();
 ```
 
-### Confirmación de Operación
+### Confirmación de Operación (dos botones)
 
 ```javascript
 notify.show({
   type: 'warning',
   title: '¿Estás seguro?',
   message: 'Esta acción no se puede deshacer',
-  buttonText: 'Sí, continuar',
+  buttons: [
+    {
+      text: 'Cancelar',
+      color: 'linear-gradient(135deg, #9ca3af 0%, #6b7280 100%)',
+      onClick: () => {
+        console.log('Operación cancelada');
+      }
+    },
+    {
+      text: 'Sí, continuar',
+      color: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
+      onClick: () => {
+        deleteUser();
+      }
+    }
+  ],
   allowOutsideClick: false,
-  allowEscapeKey: false,
-  onClose: () => {
-    // Ejecutar acción después de confirmar
-    deleteUser();
-  }
+  allowEscapeKey: false
 });
 ```
 
 ### Notificación con Contenido HTML
 
+### Confirmación (atajo `onConfirm` / `onCancel`)
+
+```javascript
+notify.show({
+  type: 'warning',
+  title: '¿Eliminar registro?',
+  message: 'Esta acción no se puede deshacer.',
+  confirmText: 'Sí, eliminar',
+  cancelText: 'Cancelar',
+  onConfirm: async () => {
+    await performDelete(id);
+    notify.success('Registro eliminado correctamente');
+  },
+  onCancel: () => {
+    console.log('El usuario canceló la operación');
+  },
+  allowOutsideClick: false,
+  allowEscapeKey: false
+});
+```
+
+### Personalizar colores y sombras (ejemplo)
+
+```javascript
+notify.show({
+  type: 'warning',
+  title: 'Eliminar elemento',
+  message: '¿Estás seguro?',
+  confirmText: 'Sí, borrar',
+  cancelText: 'No, cancelar',
+  onConfirm: () => fetch('/api/delete', { method: 'POST' }),
+  onCancel: () => console.log('Cancelado'),
+  // Colores y sombras pueden ser cualquier string CSS (gradiente o color simple)
+  confirmColor: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+  confirmShadow: 'rgba(5,150,105,0.22)',
+  cancelColor: 'linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)',
+  cancelShadow: 'rgba(0,0,0,0.08)'
+});
+```
+
 ```javascript
 const form = document.createElement('form');
 form.innerHTML = `
@@ -347,10 +403,10 @@ Para usar una versión específica, usa tags en la URL del CDN:
 
 ```html
 <!-- Última versión (auto-actualiza) -->
-<script src="https://cdn.jsdelivr.net/gh/Fernandocabal/notification-system@latest/dist/notification-system.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@latest/dist/notification-system.js"></script>
 
 <!-- Versión fija (recomendado en producción) -->
-<script src="https://cdn.jsdelivr.net/gh/Fernandocabal/notification-system@1.0.0/dist/notification-system.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/Fernandocabal/fernotify@1.2.1/dist/notification-system.js"></script>
 ```
 
 ### Crear una nueva versión