@r01al/simple-toast 1.0.0

package/dist/simple-toast.esm.js

@@ -0,0 +1,394 @@
+const defaultConfig = {
+  position: 'tr',
+  duration: 3000,
+  theme: 'l',
+  dismissible: true,
+  maxToasts: 10
+};
+
+let globalConfig = { ...defaultConfig };
+
+function configure(config) {
+  globalConfig = { ...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;
+  }
+}
+`;
+  
+  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';
+    container.setAttribute('role', 'region');
+    container.setAttribute('aria-label', 'Notifications');
+    container.setAttribute('aria-live', 'polite');
+    container.setAttribute('data-position', position);
+    container.setAttribute('data-theme', theme);
+    document.body.appendChild(container);
+  }
+
+  return container;
+}
+
+function cleanupContainer(activeCount) {
+  if (container && activeCount === 0) {
+    container.parentNode.removeChild(container);
+    container = null;
+  }
+}
+
+function getIcon(type) {
+  const icons = {
+    success: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>',
+    error: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>',
+    info: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>',
+    warning: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>'
+  };
+  return icons[type] || icons.info;
+}
+
+function createToastElement(message, type, dismissible, className, id, onClose) {
+  const toastEl = document.createElement('div');
+  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';
+    closeBtn.innerHTML = '&times;';
+    closeBtn.setAttribute('aria-label', 'Close notification');
+    closeBtn.onclick = onClose;
+    toastEl.appendChild(closeBtn);
+  }
+
+  return toastEl;
+}
+
+function showToast(element) {
+  requestAnimationFrame(() => {
+    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);
+    }
+    if (callback) callback();
+  }, 300);
+}
+
+let toastCounter = 0;
+const activeToasts = new Map();
+
+function createToast(message, options = {}) {
+  const config = { ...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;
+
+  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));
+}
+
+/**
+ * Display a toast notification
+ * @param {string} message - The message to display
+ * @param {Object} options - Toast options
+ * @returns {number} Toast ID
+ */
+function toast(message, options = {}) {
+  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' });
+
+// Export dismiss methods
+toast.dismiss = dismissToast;
+toast.dismissAll = dismissAllToasts;
+
+export { configure, toast as default, toast };

package/dist/simple-toast.min.js

@@ -0,0 +1 @@
+!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((n="undefined"!=typeof globalThis?globalThis:n||self).SimpleToast={})}(this,function(n){"use strict";let t={position:"tr",duration:3e3,theme:"l",dismissible:!0,maxToasts:10};function e(){return t}let o=!1;let i=null;function r(n,t){return function(){if(o)return;const n=document.createElement("style");n.setAttribute("data-r01st",""),n.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(n),o=!0}(),!i||i.getAttribute("data-position")===n&&i.getAttribute("data-theme")===t||(i.parentNode.removeChild(i),i=null),i||(i=document.createElement("div"),i.className="r01st-container",i.setAttribute("role","region"),i.setAttribute("aria-label","Notifications"),i.setAttribute("aria-live","polite"),i.setAttribute("data-position",n),i.setAttribute("data-theme",t),document.body.appendChild(i)),i}let a=0;const s=new Map;function l(n,t={}){const o={...e(),...t},{position:i,duration:l,dismissible:c,theme:p,className:m,type:u="info"}=o,f=++a;if(s.size>=e().maxToasts){d(s.keys().next().value)}const g=r(i,p),h=function(n,t,e,o,i,r){const a=document.createElement("div");a.className="r01st r01st-"+t+(o?" "+o:""),a.setAttribute("role","alert"),a.setAttribute("data-toast-id",i);const s=document.createElement("div");s.className="r01st-content";const l=document.createElement("span");l.className="r01st-icon",l.innerHTML=function(n){const t={success:'<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>',error:'<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>',info:'<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>',warning:'<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>'};return t[n]||t.info}(t),l.setAttribute("aria-hidden","true"),s.appendChild(l);const d=document.createElement("span");if(d.className="r01st-message",d.textContent=n,s.appendChild(d),a.appendChild(s),e){const n=document.createElement("button");n.className="r01st-close",n.innerHTML="&times;",n.setAttribute("aria-label","Close notification"),n.onclick=r,a.appendChild(n)}return a}(n,u,c,m,f,()=>d(f));var b;g.appendChild(h),b=h,requestAnimationFrame(()=>{b.className=b.className+" r01st-show"});const x={element:h,timeoutId:null};return l>0&&(x.timeoutId=setTimeout(()=>d(f),l)),s.set(f,x),f}function d(n){const t=s.get(n);if(!t)return;const{element:e,timeoutId:o}=t;o&&clearTimeout(o),s.delete(n),function(n,t){n.className=n.className.replace(" r01st-show",""),setTimeout(()=>{n.parentNode&&n.parentNode.removeChild(n),t&&t()},300)}(e,()=>{var n;n=s.size,i&&0===n&&(i.parentNode.removeChild(i),i=null)})}function c(n,t={}){return l(n,t)}c.success=(n,t={})=>c(n,{...t,type:"success"}),c.error=(n,t={})=>c(n,{...t,type:"error"}),c.info=(n,t={})=>c(n,{...t,type:"info"}),c.warning=(n,t={})=>c(n,{...t,type:"warning"}),c.dismiss=d,c.dismissAll=function(){Array.from(s.keys()).forEach(n=>d(n))},n.configure=function(n){t={...t,...n}},n.default=c,n.toast=c,Object.defineProperty(n,"__esModule",{value:!0})});