@keenmate/pure-admin-core 2.9.0-rc03 → 2.9.0-rc05

package/src/js/toast-service.js

@@ -0,0 +1,302 @@
+/**
+ * Pure Admin Toast Service
+ * Programmatic toast notification system
+ *
+ * Usage:
+ *   PureAdmin.toast.success('Operation completed!');
+ *   PureAdmin.toast.error('Something went wrong', { position: 'top-center' });
+ *   PureAdmin.toast.show({ variant: 'warning', title: 'Warning', message: '...', persistent: true });
+ *   PureAdmin.toast.dismiss(toastId);
+ */
+
+(function(window) {
+  'use strict';
+
+  // Namespace
+  const PureAdmin = window.PureAdmin || {};
+  window.PureAdmin = PureAdmin;
+
+  // Toast counter for unique IDs
+  let toastCounter = 0;
+
+  // Default configuration
+  const defaults = {
+    position: 'top-right',
+    duration: 5000,
+    showProgress: false,
+    persistent: false,
+    closeOnBackdrop: false
+  };
+
+  // Icon mapping for variants
+  const icons = {
+    primary: 'ℹ️',
+    success: '✓',
+    danger: '✕',
+    warning: '⚠',
+    info: 'ℹ'
+  };
+
+  // Title mapping for variants
+  const titles = {
+    primary: 'Primary',
+    success: 'Success',
+    danger: 'Error',
+    warning: 'Warning',
+    info: 'Information'
+  };
+
+  /**
+   * Escape HTML to prevent XSS
+   */
+  function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  /**
+   * Ensure toast container exists for given position
+   */
+  function ensureContainer(position) {
+    const containerId = `toast-container-${position}`;
+    let container = document.getElementById(containerId);
+
+    if (!container) {
+      container = document.createElement('div');
+      container.id = containerId;
+      container.className = `pa-toast-container pa-toast-container--${position}`;
+      document.body.appendChild(container);
+    }
+
+    return container;
+  }
+
+  /**
+   * Create and show a toast notification
+   */
+  function createToast(options) {
+    const {
+      variant = 'info',
+      title = titles[variant] || 'Notification',
+      message = '',
+      position = defaults.position,
+      duration = defaults.duration,
+      showProgress = defaults.showProgress,
+      persistent = defaults.persistent
+    } = options;
+
+    // Generate unique ID
+    const toastId = `pa-toast-${++toastCounter}`;
+
+    // Ensure container exists
+    const container = ensureContainer(position);
+
+    // Create toast element
+    const toast = document.createElement('div');
+    toast.className = `pa-toast pa-toast--${variant}`;
+    toast.id = toastId;
+    toast.setAttribute('role', 'alert');
+    toast.setAttribute('aria-live', 'polite');
+
+    // Build toast HTML
+    const progressHtml = showProgress && !persistent
+      ? '<div class="pa-toast__progress" style="width: 100%;"></div>'
+      : '';
+
+    toast.innerHTML = `
+      <div class="pa-toast__icon">${icons[variant] || 'ℹ'}</div>
+      <div class="pa-toast__content">
+        <div class="pa-toast__title">${escapeHtml(title)}</div>
+        <div class="pa-toast__message">${escapeHtml(message)}</div>
+      </div>
+      <button class="pa-toast__close" aria-label="Close">✕</button>
+      ${progressHtml}
+    `;
+
+    // Append to container
+    container.appendChild(toast);
+
+    // Attach close button handler
+    const closeBtn = toast.querySelector('.pa-toast__close');
+    closeBtn.addEventListener('click', (e) => {
+      e.stopPropagation(); // Prevent toast click handler from firing
+      dismissToast(toastId);
+    });
+
+    // Make all toasts clickable to dismiss
+    toast.style.cursor = 'pointer';
+    toast.addEventListener('click', () => dismissToast(toastId));
+
+    // Show toast with animation
+    setTimeout(() => {
+      toast.classList.add('pa-toast--show');
+    }, 10);
+
+    // Progress bar animation
+    if (showProgress && !persistent) {
+      const progress = toast.querySelector('.pa-toast__progress');
+      if (progress) {
+        progress.style.transition = `width ${duration}ms linear`;
+        setTimeout(() => {
+          progress.style.width = '0%';
+        }, 50);
+      }
+    }
+
+    // Auto-dismiss (only if not persistent)
+    if (!persistent) {
+      setTimeout(() => {
+        dismissToast(toastId);
+      }, duration);
+    }
+
+    return toastId;
+  }
+
+  /**
+   * Dismiss a toast by ID
+   */
+  function dismissToast(toastId) {
+    const toast = document.getElementById(toastId);
+    if (!toast) return;
+
+    toast.classList.remove('pa-toast--show');
+    toast.classList.add('pa-toast--hide');
+
+    setTimeout(() => {
+      if (toast.parentNode) {
+        toast.parentNode.removeChild(toast);
+      }
+    }, 300); // Match toast transition time
+  }
+
+  /**
+   * Dismiss all toasts (optionally filtered by position)
+   */
+  function dismissAll(position = null) {
+    const selector = position
+      ? `#toast-container-${position} .pa-toast`
+      : '.pa-toast';
+
+    const toasts = document.querySelectorAll(selector);
+    toasts.forEach(toast => {
+      if (toast.id) {
+        dismissToast(toast.id);
+      }
+    });
+  }
+
+  // ============================================================
+  // PUBLIC API
+  // ============================================================
+
+  /**
+   * Toast namespace
+   */
+  PureAdmin.toast = {
+    /**
+     * Show a toast with full control over options
+     * @param {Object} options - Toast configuration
+     * @returns {string} - Toast ID for programmatic dismissal
+     */
+    show: function(options = {}) {
+      return createToast(options);
+    },
+
+    /**
+     * Show a success toast
+     * @param {string} message - Toast message
+     * @param {Object} options - Additional options (position, duration, etc.)
+     * @returns {string} - Toast ID
+     */
+    success: function(message, options = {}) {
+      return createToast({
+        variant: 'success',
+        title: options.title || titles.success,
+        message,
+        ...options
+      });
+    },
+
+    /**
+     * Show an error toast
+     * @param {string} message - Toast message
+     * @param {Object} options - Additional options
+     * @returns {string} - Toast ID
+     */
+    error: function(message, options = {}) {
+      return createToast({
+        variant: 'danger',
+        title: options.title || titles.danger,
+        message,
+        ...options
+      });
+    },
+
+    /**
+     * Show a warning toast
+     * @param {string} message - Toast message
+     * @param {Object} options - Additional options
+     * @returns {string} - Toast ID
+     */
+    warning: function(message, options = {}) {
+      return createToast({
+        variant: 'warning',
+        title: options.title || titles.warning,
+        message,
+        ...options
+      });
+    },
+
+    /**
+     * Show an info toast
+     * @param {string} message - Toast message
+     * @param {Object} options - Additional options
+     * @returns {string} - Toast ID
+     */
+    info: function(message, options = {}) {
+      return createToast({
+        variant: 'info',
+        title: options.title || titles.info,
+        message,
+        ...options
+      });
+    },
+
+    /**
+     * Show a primary toast
+     * @param {string} message - Toast message
+     * @param {Object} options - Additional options
+     * @returns {string} - Toast ID
+     */
+    primary: function(message, options = {}) {
+      return createToast({
+        variant: 'primary',
+        title: options.title || titles.primary,
+        message,
+        ...options
+      });
+    },
+
+    /**
+     * Dismiss a specific toast by ID
+     * @param {string} toastId - Toast ID returned from show/success/error/etc
+     */
+    dismiss: function(toastId) {
+      dismissToast(toastId);
+    },
+
+    /**
+     * Dismiss all toasts (optionally filtered by position)
+     * @param {string} position - Optional position filter (e.g., 'top-right')
+     */
+    dismissAll: function(position = null) {
+      dismissAll(position);
+    }
+  };
+
+  console.log('✅ PureAdmin Toast Service loaded');
+  console.log('Available methods:', Object.keys(PureAdmin.toast));
+
+})(window);

package/src/js/tooltips-popovers.js

@@ -0,0 +1,275 @@
+/**
+ * Tooltips & Popovers with Floating UI
+ *
+ * Features:
+ * - Tooltips: Auto-positioned hover tooltips using Floating UI
+ * - Popovers: Click-triggered rich content popovers using Floating UI
+ * - Smart collision detection and auto-flipping
+ * - Multiple color variants and positions
+ *
+ * Dependencies: @floating-ui/dom
+ */
+
+(function() {
+    'use strict';
+
+    // Wait for Floating UI to load
+    if (typeof window.FloatingUIDOM === 'undefined') {
+        console.error('Floating UI is not loaded. Please include @floating-ui/dom.');
+        return;
+    }
+
+    const { computePosition, flip, shift, offset, arrow } = window.FloatingUIDOM;
+
+    // ====================================
+    // TOOLTIP SYSTEM (Floating UI)
+    // ====================================
+
+    let tooltipEl = null;
+    let currentTooltipTarget = null;
+
+    /**
+     * Create tooltip element (singleton)
+     */
+    function createTooltip() {
+        if (tooltipEl) return;
+
+        tooltipEl = document.createElement('div');
+        tooltipEl.className = 'pa-tooltip-floating';
+        tooltipEl.style.position = 'absolute';
+        tooltipEl.style.top = '0';
+        tooltipEl.style.left = '0';
+        tooltipEl.style.visibility = 'hidden';
+        tooltipEl.style.zIndex = '9000';
+        document.body.appendChild(tooltipEl);
+    }
+
+    /**
+     * Show tooltip with Floating UI positioning
+     */
+    async function showTooltip(element) {
+        if (!tooltipEl) createTooltip();
+
+        currentTooltipTarget = element;
+
+        // Get tooltip text from data-tooltip attribute
+        const text = element.dataset.tooltip || element.getAttribute('aria-label') || '';
+        if (!text) return;
+
+        // Determine placement from class
+        let placement = 'top';
+        if (element.classList.contains('pa-tooltip--bottom')) placement = 'bottom';
+        else if (element.classList.contains('pa-tooltip--start')) {
+            placement = document.documentElement.dir === 'rtl' ? 'right' : 'left';
+        }
+        else if (element.classList.contains('pa-tooltip--end')) {
+            placement = document.documentElement.dir === 'rtl' ? 'left' : 'right';
+        }
+
+        // Copy variant classes to floating tooltip
+        tooltipEl.className = 'pa-tooltip-floating';
+        if (element.classList.contains('pa-tooltip--primary')) tooltipEl.classList.add('pa-tooltip--primary');
+        if (element.classList.contains('pa-tooltip--success')) tooltipEl.classList.add('pa-tooltip--success');
+        if (element.classList.contains('pa-tooltip--warning')) tooltipEl.classList.add('pa-tooltip--warning');
+        if (element.classList.contains('pa-tooltip--danger')) tooltipEl.classList.add('pa-tooltip--danger');
+        if (element.classList.contains('pa-tooltip--multiline')) tooltipEl.classList.add('pa-tooltip--multiline');
+
+        // Set content and show
+        tooltipEl.textContent = text;
+        tooltipEl.style.visibility = 'visible';
+
+        // Use Floating UI to position tooltip with collision detection
+        try {
+            const { x, y } = await computePosition(element, tooltipEl, {
+                placement,
+                middleware: [
+                    offset(8),
+                    flip(),
+                    shift({ padding: 8 })
+                ]
+            });
+
+            Object.assign(tooltipEl.style, {
+                left: `${x}px`,
+                top: `${y}px`
+            });
+        } catch (error) {
+            console.error('Error positioning tooltip:', error);
+        }
+    }
+
+    /**
+     * Hide tooltip
+     */
+    function hideTooltip() {
+        if (!tooltipEl) return;
+        tooltipEl.style.visibility = 'hidden';
+        currentTooltipTarget = null;
+    }
+
+    /**
+     * Initialize all tooltips
+     */
+    function initTooltips() {
+        createTooltip();
+
+        document.querySelectorAll('[class*="pa-tooltip"]').forEach(element => {
+            // Skip if already initialized
+            if (element.dataset.tooltipInit) return;
+            element.dataset.tooltipInit = 'true';
+
+            // Mark as floating tooltip to disable CSS pseudo-element tooltips
+            element.classList.add('pa-tooltip--floating');
+
+            // Store tooltip text in data attribute if it's in aria-label
+            if (!element.dataset.tooltip && element.getAttribute('aria-label')) {
+                element.dataset.tooltip = element.getAttribute('aria-label');
+            }
+
+            // Event listeners
+            element.addEventListener('mouseenter', () => showTooltip(element));
+            element.addEventListener('mouseleave', hideTooltip);
+            element.addEventListener('focus', () => showTooltip(element));
+            element.addEventListener('blur', hideTooltip);
+        });
+    }
+
+    // ====================================
+    // POPOVER SYSTEM (Floating UI with autoUpdate)
+    // ====================================
+
+    const { autoUpdate } = window.FloatingUIDOM;
+
+    /**
+     * Initialize a single popover
+     */
+    function createPopover(popoverEl) {
+        const trigger = popoverEl.querySelector('.pa-popover__trigger');
+        const content = popoverEl.querySelector('.pa-popover__content');
+        const closeBtn = popoverEl.querySelector('.pa-popover__close');
+
+        if (!trigger || !content) return;
+
+        const rawPlacement = popoverEl.dataset.placement || 'top';
+        const isRtl = document.documentElement.dir === 'rtl';
+        const placement = rawPlacement === 'start' ? (isRtl ? 'right' : 'left')
+            : rawPlacement === 'end' ? (isRtl ? 'left' : 'right')
+            : rawPlacement;
+        let cleanup = null;
+
+        // Show popover
+        function show() {
+            content.setAttribute('data-show', '');
+
+            // Update position and setup auto-update
+            cleanup = autoUpdate(trigger, content, () => {
+                computePosition(trigger, content, {
+                    placement: placement,
+                    middleware: [
+                        offset(8),
+                        flip(),
+                        shift({ padding: 8 })
+                    ]
+                }).then(({ x, y }) => {
+                    Object.assign(content.style, {
+                        left: `${x}px`,
+                        top: `${y}px`
+                    });
+                });
+            });
+        }
+
+        // Hide popover
+        function hide() {
+            content.removeAttribute('data-show');
+            if (cleanup) {
+                cleanup();
+                cleanup = null;
+            }
+        }
+
+        // Toggle popover
+        function toggle() {
+            if (content.hasAttribute('data-show')) {
+                hide();
+            } else {
+                // Close other popovers first
+                document.querySelectorAll('.pa-popover__content[data-show]').forEach(other => {
+                    if (other !== content) {
+                        other.removeAttribute('data-show');
+                    }
+                });
+                show();
+            }
+        }
+
+        // Event listeners
+        trigger.addEventListener('click', (e) => {
+            e.stopPropagation();
+            toggle();
+        });
+
+        if (closeBtn) {
+            closeBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                hide();
+            });
+        }
+
+        // Prevent closing when clicking inside content
+        content.addEventListener('click', (e) => {
+            e.stopPropagation();
+        });
+
+        // Close on outside click
+        document.addEventListener('click', (e) => {
+            if (!popoverEl.contains(e.target) && content.hasAttribute('data-show')) {
+                hide();
+            }
+        });
+    }
+
+    /**
+     * Initialize all popovers
+     */
+    function initPopovers() {
+        document.querySelectorAll('.pa-popover').forEach(popoverEl => {
+            if (!popoverEl.dataset.initialized) {
+                popoverEl.dataset.initialized = 'true';
+                createPopover(popoverEl);
+            }
+        });
+    }
+
+    // ====================================
+    // INITIALIZATION
+    // ====================================
+
+    /**
+     * Initialize everything
+     */
+    function init() {
+        initTooltips();
+        initPopovers();
+    }
+
+    // Initialize on DOM ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+
+    // Reinitialize when dynamic content is loaded
+    window.addEventListener('content-loaded', init);
+
+    // Expose public API for manual initialization
+    window.PureAdminTooltips = {
+        init,
+        initTooltips,
+        initPopovers,
+        showTooltip,
+        hideTooltip
+    };
+
+})();