@r01al/simple-toast 1.0.0 → 1.0.2

package/dist/simple-toast.umd.js

@@ -4,6 +4,50 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SimpleToast = {}));
 })(this, (function (exports) { 'use strict';
 
+  function _defineProperty(e, r, t) {
+    return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+      value: t,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    }) : e[r] = t, e;
+  }
+  function ownKeys(e, r) {
+    var t = Object.keys(e);
+    if (Object.getOwnPropertySymbols) {
+      var o = Object.getOwnPropertySymbols(e);
+      r && (o = o.filter(function (r) {
+        return Object.getOwnPropertyDescriptor(e, r).enumerable;
+      })), t.push.apply(t, o);
+    }
+    return t;
+  }
+  function _objectSpread2(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = null != arguments[r] ? arguments[r] : {};
+      r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+        _defineProperty(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+      });
+    }
+    return e;
+  }
+  function _toPrimitive(t, r) {
+    if ("object" != typeof t || !t) return t;
+    var e = t[Symbol.toPrimitive];
+    if (void 0 !== e) {
+      var i = e.call(t, r);
+      if ("object" != typeof i) return i;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return ("string" === r ? String : Number)(t);
+  }
+  function _toPropertyKey(t) {
+    var i = _toPrimitive(t, "string");
+    return "symbol" == typeof i ? i : i + "";
+  }
+
   const defaultConfig = {
     position: 'tr',
     duration: 3000,
@@ -11,230 +55,31 @@
     dismissible: true,
     maxToasts: 10
   };
-
-  let globalConfig = { ...defaultConfig };
-
+  let globalConfig = _objectSpread2({}, defaultConfig);
   function configure(config) {
-    globalConfig = { ...globalConfig, ...config };
+    globalConfig = _objectSpread2(_objectSpread2({}, globalConfig), config);
   }
-
   function getConfig() {
     return globalConfig;
   }
 
   let stylesInjected = false;
-
   function injectStyles() {
     if (stylesInjected) return;
-    
     const style = document.createElement('style');
     style.setAttribute('data-r01st', '');
-    style.textContent = `
-.r01st-container {
-  position: fixed;
-  z-index: 9999;
-  pointer-events: none;
-  padding: 16px;
-}
-.r01st-container[data-position="tl"] {
-  top: 0;
-  left: 0;
-}
-
-.r01st-container[data-position="tc"] {
-  top: 0;
-  left: 50%;
-  margin-left: -210px;
-}
-
-.r01st-container[data-position="tr"] {
-  top: 0;
-  right: 0;
-}
-.r01st-container[data-position="ml"] {
-  top: 50%;
-  left: 0;
-  margin-top: -50px;
-}
-
-.r01st-container[data-position="mc"] {
-  top: 50%;
-  left: 50%;
-  margin-left: -210px;
-  margin-top: -50px;
-}
-
-.r01st-container[data-position="mr"] {
-  top: 50%;
-  right: 0;
-  margin-top: -50px;
-}
-.r01st-container[data-position="bl"] {
-  bottom: 0;
-  left: 0;
-}
-
-.r01st-container[data-position="bc"] {
-  bottom: 0;
-  left: 50%;
-  margin-left: -210px;
-}
-
-.r01st-container[data-position="br"] {
-  bottom: 0;
-  right: 0;
-}
-.r01st {
-  pointer-events: auto;
-  position: relative;
-  min-width: 280px;
-  max-width: 420px;
-  padding: 16px;
-  margin-bottom: 16px;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  font-size: 14px;
-  line-height: 1.5;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  color: #ffffff;
-  opacity: 0;
-  transition: opacity 0.3s ease, margin-top 0.3s ease;
-  margin-top: -20px;
-}
-.r01st-show {
-  opacity: 1;
-  margin-top: 0;
-}
-.r01st-container[data-theme="l"] .r01st-success {
-  background-color: #10b981;
-}
-
-.r01st-container[data-theme="l"] .r01st-error {
-  background-color: #ef4444;
-}
-
-.r01st-container[data-theme="l"] .r01st-info {
-  background-color: #3b82f6;
-}
-
-.r01st-container[data-theme="l"] .r01st-warning {
-  background-color: #f59e0b;
-}
-.r01st-container[data-theme="d"] .r01st-success {
-  background-color: #059669;
-}
-
-.r01st-container[data-theme="d"] .r01st-error {
-  background-color: #dc2626;
-}
-
-.r01st-container[data-theme="d"] .r01st-info {
-  background-color: #2563eb;
-}
-
-.r01st-container[data-theme="d"] .r01st-warning {
-  background-color: #d97706;
-}
-.r01st-content {
-  display: inline-block;
-  width: 100%;
-  vertical-align: top;
-  padding-right: 30px;
-}
-.r01st-icon {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  vertical-align: middle;
-  margin-right: 12px;
-}
-
-.r01st-icon svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-.r01st-message {
-  display: inline-block;
-  vertical-align: middle;
-  word-wrap: break-word;
-  max-width: calc(100% - 32px);
-}
-.r01st-close {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  background: transparent;
-  border: none;
-  color: #ffffff;
-  font-size: 24px;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  text-align: center;
-  border-radius: 4px;
-  opacity: 0.8;
-}
-
-.r01st-close:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-  opacity: 1;
-}
-
-.r01st-close:focus {
-  outline: 2px solid #ffffff;
-  outline-offset: 2px;
-}
-.r01st-container[data-position^="b"] .r01st {
-  margin-top: 0;
-  margin-bottom: -20px;
-}
-
-.r01st-container[data-position^="b"] .r01st-show {
-  margin-bottom: 16px;
-}
-@media (max-width: 480px) {
-  .r01st-container {
-    left: 0 !important;
-    right: 0 !important;
-    margin-left: 0 !important;
-    padding: 8px;
-  }
-
-  .r01st {
-    min-width: auto;
-    max-width: none;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .r01st {
-    transition: opacity 0.2s;
-    margin-top: 0;
-  }
-}
-@media print {
-  .r01st-container {
-    display: none;
-  }
-}
-`;
-    
+    style.textContent = "\n.r01st-container {\n  position: fixed;\n  z-index: 9999;\n  pointer-events: none;\n  padding: 16px;\n}\n.r01st-container[data-position=\"tl\"] {\n  top: 0;\n  left: 0;\n}\n\n.r01st-container[data-position=\"tc\"] {\n  top: 0;\n  left: 50%;\n  margin-left: -210px;\n}\n\n.r01st-container[data-position=\"tr\"] {\n  top: 0;\n  right: 0;\n}\n.r01st-container[data-position=\"ml\"] {\n  top: 50%;\n  left: 0;\n  margin-top: -50px;\n}\n\n.r01st-container[data-position=\"mc\"] {\n  top: 50%;\n  left: 50%;\n  margin-left: -210px;\n  margin-top: -50px;\n}\n\n.r01st-container[data-position=\"mr\"] {\n  top: 50%;\n  right: 0;\n  margin-top: -50px;\n}\n.r01st-container[data-position=\"bl\"] {\n  bottom: 0;\n  left: 0;\n}\n\n.r01st-container[data-position=\"bc\"] {\n  bottom: 0;\n  left: 50%;\n  margin-left: -210px;\n}\n\n.r01st-container[data-position=\"br\"] {\n  bottom: 0;\n  right: 0;\n}\n.r01st {\n  pointer-events: auto;\n  position: relative;\n  min-width: 280px;\n  max-width: 420px;\n  padding: 16px;\n  margin-bottom: 16px;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  font-size: 14px;\n  line-height: 1.5;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  color: #ffffff;\n  opacity: 0;\n  transition: opacity 0.3s ease, margin-top 0.3s ease;\n  margin-top: -20px;\n}\n.r01st-show {\n  opacity: 1;\n  margin-top: 0;\n}\n.r01st-container[data-theme=\"l\"] .r01st-success {\n  background-color: #10b981;\n}\n\n.r01st-container[data-theme=\"l\"] .r01st-error {\n  background-color: #ef4444;\n}\n\n.r01st-container[data-theme=\"l\"] .r01st-info {\n  background-color: #3b82f6;\n}\n\n.r01st-container[data-theme=\"l\"] .r01st-warning {\n  background-color: #f59e0b;\n}\n.r01st-container[data-theme=\"d\"] .r01st-success {\n  background-color: #059669;\n}\n\n.r01st-container[data-theme=\"d\"] .r01st-error {\n  background-color: #dc2626;\n}\n\n.r01st-container[data-theme=\"d\"] .r01st-info {\n  background-color: #2563eb;\n}\n\n.r01st-container[data-theme=\"d\"] .r01st-warning {\n  background-color: #d97706;\n}\n.r01st-content {\n  display: inline-block;\n  width: 100%;\n  vertical-align: top;\n  padding-right: 30px;\n}\n.r01st-icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  vertical-align: middle;\n  margin-right: 12px;\n}\n\n.r01st-icon svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n.r01st-message {\n  display: inline-block;\n  vertical-align: middle;\n  word-wrap: break-word;\n  max-width: calc(100% - 32px);\n}\n.r01st-close {\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  background: transparent;\n  border: none;\n  color: #ffffff;\n  font-size: 24px;\n  line-height: 1;\n  cursor: pointer;\n  padding: 0;\n  width: 24px;\n  height: 24px;\n  text-align: center;\n  border-radius: 4px;\n  opacity: 0.8;\n}\n\n.r01st-close:hover {\n  background-color: rgba(255, 255, 255, 0.2);\n  opacity: 1;\n}\n\n.r01st-close:focus {\n  outline: 2px solid #ffffff;\n  outline-offset: 2px;\n}\n.r01st-container[data-position^=\"b\"] .r01st {\n  margin-top: 0;\n  margin-bottom: -20px;\n}\n\n.r01st-container[data-position^=\"b\"] .r01st-show {\n  margin-bottom: 16px;\n}\n@media (max-width: 480px) {\n  .r01st-container {\n    left: 0 !important;\n    right: 0 !important;\n    margin-left: 0 !important;\n    padding: 8px;\n  }\n\n  .r01st {\n    min-width: auto;\n    max-width: none;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .r01st {\n    transition: opacity 0.2s;\n    margin-top: 0;\n  }\n}\n@media print {\n  .r01st-container {\n    display: none;\n  }\n}\n";
     document.head.appendChild(style);
     stylesInjected = true;
   }
 
   let container = null;
-
   function getContainer(position, theme) {
     injectStyles();
-    
     if (container && (container.getAttribute('data-position') !== position || container.getAttribute('data-theme') !== theme)) {
       container.parentNode.removeChild(container);
       container = null;
     }
-
     if (!container) {
       container = document.createElement('div');
       container.className = 'r01st-container';
@@ -245,10 +90,8 @@
       container.setAttribute('data-theme', theme);
       document.body.appendChild(container);
     }
-
     return container;
   }
-
   function cleanupContainer(activeCount) {
     if (container && activeCount === 0) {
       container.parentNode.removeChild(container);
@@ -271,23 +114,18 @@
     toastEl.className = 'r01st r01st-' + type + (className ? ' ' + className : '');
     toastEl.setAttribute('role', 'alert');
     toastEl.setAttribute('data-toast-id', id);
-
     const content = document.createElement('div');
     content.className = 'r01st-content';
-    
     const icon = document.createElement('span');
     icon.className = 'r01st-icon';
     icon.innerHTML = getIcon(type);
     icon.setAttribute('aria-hidden', 'true');
     content.appendChild(icon);
-
     const messageEl = document.createElement('span');
     messageEl.className = 'r01st-message';
     messageEl.textContent = message;
     content.appendChild(messageEl);
-
     toastEl.appendChild(content);
-
     if (dismissible) {
       const closeBtn = document.createElement('button');
       closeBtn.className = 'r01st-close';
@@ -296,7 +134,6 @@
       closeBtn.onclick = onClose;
       toastEl.appendChild(closeBtn);
     }
-
     return toastEl;
   }
 
@@ -305,10 +142,8 @@
       element.className = element.className + ' r01st-show';
     });
   }
-
   function hideToast(element, callback) {
     element.className = element.className.replace(' r01st-show', '');
-
     setTimeout(() => {
       if (element.parentNode) {
         element.parentNode.removeChild(element);
@@ -319,59 +154,52 @@
 
   let toastCounter = 0;
   const activeToasts = new Map();
-
-  function createToast(message, options = {}) {
-    const config = { ...getConfig(), ...options };
-    const { position, duration, dismissible, theme, className, type = 'info' } = config;
-
+  function createToast(message) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const config = _objectSpread2(_objectSpread2({}, getConfig()), options);
+    const {
+      position,
+      duration,
+      dismissible,
+      theme,
+      className,
+      type = 'info'
+    } = config;
     const id = ++toastCounter;
-
     if (activeToasts.size >= getConfig().maxToasts) {
       const firstToast = activeToasts.keys().next().value;
       dismissToast(firstToast);
     }
-
     const container = getContainer(position, theme);
-
     const handleClose = () => dismissToast(id);
-
     const toastEl = createToastElement(message, type, dismissible, className, id, handleClose);
-
     container.appendChild(toastEl);
-
     showToast(toastEl);
-
     const toastData = {
       element: toastEl,
       timeoutId: null
     };
-
     if (duration > 0) {
       toastData.timeoutId = setTimeout(() => dismissToast(id), duration);
     }
-
     activeToasts.set(id, toastData);
-
     return id;
   }
-
   function dismissToast(id) {
     const toastData = activeToasts.get(id);
     if (!toastData) return;
-
-    const { element, timeoutId } = toastData;
-
+    const {
+      element,
+      timeoutId
+    } = toastData;
     if (timeoutId) {
       clearTimeout(timeoutId);
     }
-
     activeToasts.delete(id);
-
     hideToast(element, () => {
       cleanupContainer(activeToasts.size);
     });
   }
-
   function dismissAllToasts() {
     const ids = Array.from(activeToasts.keys());
     ids.forEach(id => dismissToast(id));
@@ -383,15 +211,36 @@
    * @param {Object} options - Toast options
    * @returns {number} Toast ID
    */
-  function toast(message, options = {}) {
+  function toast(message) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     return createToast(message, options);
   }
 
   // Shorthand methods
-  toast.success = (message, options = {}) => toast(message, { ...options, type: 'success' });
-  toast.error = (message, options = {}) => toast(message, { ...options, type: 'error' });
-  toast.info = (message, options = {}) => toast(message, { ...options, type: 'info' });
-  toast.warning = (message, options = {}) => toast(message, { ...options, type: 'warning' });
+  toast.success = function (message) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return toast(message, _objectSpread2(_objectSpread2({}, options), {}, {
+      type: 'success'
+    }));
+  };
+  toast.error = function (message) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return toast(message, _objectSpread2(_objectSpread2({}, options), {}, {
+      type: 'error'
+    }));
+  };
+  toast.info = function (message) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return toast(message, _objectSpread2(_objectSpread2({}, options), {}, {
+      type: 'info'
+    }));
+  };
+  toast.warning = function (message) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return toast(message, _objectSpread2(_objectSpread2({}, options), {}, {
+      type: 'warning'
+    }));
+  };
 
   // Export dismiss methods
   toast.dismiss = dismissToast;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r01al/simple-toast",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Lightweight, framework-agnostic toast notification library with zero dependencies",
   "keywords": [
     "toast",
@@ -22,7 +22,7 @@
   "homepage": "https://github.com/r01al/simple-toast#readme",
   "main": "dist/simple-toast.cjs.js",
   "module": "dist/simple-toast.esm.js",
-  "browser": "dist/simple-toast.umd.js",
+  "browser": "dist/simple-toast.esm.js",
   "types": "dist/toast.d.ts",
   "files": [
     "dist"