@rhavenside/baseline-ui 1.0.16 → 1.0.18

package/src/js/components/toast.js

@@ -0,0 +1,116 @@
+// ============================================================================
+// Toast Component JavaScript
+// ============================================================================
+
+// Default options
+const defaultOptions = {
+  type: 'info',
+  position: 'top-right',
+  duration: 5000,
+  title: null,
+  closable: true
+};
+
+// Get or create toast container
+function getToastContainer(position) {
+  const containerId = `bl-toast-container-${position}`;
+  let container = document.getElementById(containerId);
+  
+  if (!container) {
+    container = document.createElement('div');
+    container.id = containerId;
+    container.className = `bl-toast-container bl-toast-${position}`;
+    document.body.appendChild(container);
+  }
+  
+  return container;
+}
+
+// Create toast element
+function createToastElement(message, type, title, closable) {
+  const toast = document.createElement('div');
+  toast.className = `bl-toast bl-toast-${type}`;
+  
+  const content = document.createElement('div');
+  content.className = 'bl-toast-content';
+  
+  if (title) {
+    const titleEl = document.createElement('div');
+    titleEl.className = 'bl-toast-title';
+    titleEl.textContent = title;
+    content.appendChild(titleEl);
+  }
+  
+  const messageEl = document.createElement('div');
+  messageEl.className = 'bl-toast-message';
+  messageEl.textContent = message;
+  content.appendChild(messageEl);
+  
+  toast.appendChild(content);
+  
+  if (closable) {
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'bl-toast-close';
+    closeBtn.setAttribute('aria-label', 'Close');
+    closeBtn.innerHTML = '×';
+    closeBtn.addEventListener('click', () => {
+      removeToast(toast);
+    });
+    toast.appendChild(closeBtn);
+  }
+  
+  return toast;
+}
+
+// Remove toast with animation
+function removeToast(toast) {
+  toast.classList.add('bl-toast-closing');
+  
+  toast.addEventListener('animationend', () => {
+    toast.remove();
+    
+    // Remove container if empty
+    const container = toast.parentElement;
+    if (container && container.classList.contains('bl-toast-container') && container.children.length === 0) {
+      container.remove();
+    }
+  }, { once: true });
+}
+
+// Main showToast function
+export function showToast(message, type = 'info', options = {}) {
+  const opts = { ...defaultOptions, ...options, type };
+  const container = getToastContainer(opts.position);
+  const toast = createToastElement(message, opts.type, opts.title, opts.closable);
+  
+  container.appendChild(toast);
+  
+  // Auto-dismiss after duration
+  if (opts.duration > 0) {
+    setTimeout(() => {
+      if (toast.parentElement) {
+        removeToast(toast);
+      }
+    }, opts.duration);
+  }
+  
+  return toast;
+}
+
+// Convenience functions
+export function showToastSuccess(message, options = {}) {
+  return showToast(message, 'success', { ...options, title: options.title || 'Success' });
+}
+
+export function showToastError(message, options = {}) {
+  return showToast(message, 'error', { ...options, title: options.title || 'Error' });
+}
+
+export function showToastWarning(message, options = {}) {
+  return showToast(message, 'warning', { ...options, title: options.title || 'Warning' });
+}
+
+export function showToastInfo(message, options = {}) {
+  return showToast(message, 'info', { ...options, title: options.title || 'Info' });
+}
+

package/src/tokens/_z-index.scss

@@ -7,10 +7,13 @@ $z-index-base: 0;
 $z-index-dropdown: 9999; // Immer im Vordergrund
 $z-index-sticky: 1020;
 $z-index-fixed: 1030;
+$z-index-sidebar-backdrop: 1034;
+$z-index-sidebar: 1035;
 $z-index-modal-backdrop: 1040;
 $z-index-modal: 1050;
 $z-index-popover: 1060;
 $z-index-tooltip: 1070;
+$z-index-toast: 1080;
 
 // Export as CSS Custom Properties
 :root {
@@ -18,9 +21,12 @@ $z-index-tooltip: 1070;
   --z-index-dropdown: #{$z-index-dropdown};
   --z-index-sticky: #{$z-index-sticky};
   --z-index-fixed: #{$z-index-fixed};
+  --z-index-sidebar-backdrop: #{$z-index-sidebar-backdrop};
+  --z-index-sidebar: #{$z-index-sidebar};
   --z-index-modal-backdrop: #{$z-index-modal-backdrop};
   --z-index-modal: #{$z-index-modal};
   --z-index-popover: #{$z-index-popover};
   --z-index-tooltip: #{$z-index-tooltip};
+  --z-index-toast: #{$z-index-toast};
 }