softui-css 1.6.0 → 1.8.0

package/dist/softui.js

@@ -576,6 +576,7 @@ const SoftUI = (() => {
     el.className = cls;
     el.setAttribute('role', 'alert');
     el.setAttribute('aria-live', 'polite');
+    el.setAttribute('aria-atomic', 'true');
 
     let html = '<div class="sui-toast-body">';
     if (opts.title) html += '<div class="sui-toast-title">' + opts.title + '</div>';
@@ -675,15 +676,30 @@ const SoftUI = (() => {
       });
     });
 
-    // Escape closes dropdowns
+    // Escape closes dropdowns, arrow keys navigate items
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
         document.querySelectorAll('.sui-dropdown.open, .sui-dropdown-split.open').forEach(d => {
           d.classList.remove('open');
           const t = d.querySelector('[data-sui-dropdown], .sui-dropdown-toggle');
-          if (t) t.setAttribute('aria-expanded', 'false');
+          if (t) { t.setAttribute('aria-expanded', 'false'); t.focus(); }
         });
       }
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        const openDD = document.querySelector('.sui-dropdown.open, .sui-dropdown-split.open');
+        if (!openDD) return;
+        const items = Array.from(openDD.querySelectorAll('.sui-dropdown-item:not(.disabled)'));
+        if (!items.length) return;
+        e.preventDefault();
+        const cur = items.indexOf(document.activeElement);
+        let next;
+        if (e.key === 'ArrowDown') {
+          next = cur < items.length - 1 ? cur + 1 : 0;
+        } else {
+          next = cur > 0 ? cur - 1 : items.length - 1;
+        }
+        items[next].focus();
+      }
     });
   }
 
@@ -3771,6 +3787,135 @@ const SoftUI = (() => {
     openLightbox(images, index);
   });
 
+  // =========================================
+  // Typewriter
+  // =========================================
+  function initTypewriters() {
+    document.querySelectorAll('[data-sui-typewriter]').forEach(function(el) {
+      if (el.dataset.suiTypewriterInit) return;
+      el.dataset.suiTypewriterInit = '1';
+      var words = el.getAttribute('data-words');
+      var speed = parseInt(el.getAttribute('data-speed')) || 80;
+      var deleteSpeed = parseInt(el.getAttribute('data-delete-speed')) || 40;
+      var pause = parseInt(el.getAttribute('data-pause')) || 1500;
+      var loop = el.hasAttribute('data-loop');
+
+      if (words) {
+        // Multiple phrases mode
+        var phrases = words.split('|').map(function(s) { return s.trim(); });
+        var phraseIdx = 0;
+        var charIdx = 0;
+        var deleting = false;
+
+        function tick() {
+          var current = phrases[phraseIdx];
+          if (!deleting) {
+            charIdx++;
+            el.textContent = current.substring(0, charIdx);
+            if (charIdx === current.length) {
+              if (!loop && phraseIdx === phrases.length - 1) return;
+              setTimeout(function() { deleting = true; tick(); }, pause);
+              return;
+            }
+            setTimeout(tick, speed);
+          } else {
+            charIdx--;
+            el.textContent = current.substring(0, charIdx);
+            if (charIdx === 0) {
+              deleting = false;
+              phraseIdx = (phraseIdx + 1) % phrases.length;
+              setTimeout(tick, speed);
+              return;
+            }
+            setTimeout(tick, deleteSpeed);
+          }
+        }
+
+        el.textContent = '';
+        setTimeout(tick, 500);
+      } else {
+        // Single text mode — type out existing content
+        var text = el.textContent;
+        el.textContent = '';
+        var i = 0;
+        function typeChar() {
+          if (i < text.length) {
+            el.textContent += text[i];
+            i++;
+            setTimeout(typeChar, speed);
+          }
+        }
+        setTimeout(typeChar, 500);
+      }
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTypewriters);
+  } else {
+    initTypewriters();
+  }
+
+  // =========================================
+  // Text Rotate
+  // =========================================
+  function initTextRotate() {
+    document.querySelectorAll('[data-sui-text-rotate]').forEach(function(el) {
+      if (el.dataset.suiRotateInit) return;
+      el.dataset.suiRotateInit = '1';
+      var words = el.querySelectorAll('.sui-text-rotate-word');
+      if (words.length < 2) return;
+      var interval = parseInt(el.getAttribute('data-interval')) || 2000;
+      var index = 0;
+
+      words[0].classList.add('active');
+
+      setInterval(function() {
+        var current = words[index];
+        current.classList.remove('active');
+        current.classList.add('exit');
+        setTimeout(function() { current.classList.remove('exit'); }, 400);
+
+        index = (index + 1) % words.length;
+        words[index].classList.add('active');
+      }, interval);
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTextRotate);
+  } else {
+    initTextRotate();
+  }
+
+  // =========================================
+  // Copy Button
+  // =========================================
+  var clipboardSvg = '<svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>';
+  var checkSvg = '<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>';
+
+  document.addEventListener('click', function(e) {
+    var btn = e.target.closest('[data-sui-copy]');
+    if (!btn) return;
+    var text = btn.getAttribute('data-sui-copy');
+    if (!text) {
+      var wrap = btn.closest('.sui-copy, .sui-copy-input');
+      if (wrap) {
+        var textEl = wrap.querySelector('.sui-copy-text');
+        var inputEl = wrap.querySelector('.sui-input');
+        text = textEl ? textEl.textContent : inputEl ? inputEl.value : '';
+      }
+    }
+    if (!text) return;
+    try { navigator.clipboard.writeText(text.trim()); } catch (err) {}
+    btn.classList.add('copied');
+    btn.innerHTML = checkSvg;
+    setTimeout(function() {
+      btn.classList.remove('copied');
+      btn.innerHTML = clipboardSvg;
+    }, 1500);
+  });
+
   // =========================================
   // Diff — Image Compare Slider
   // =========================================
@@ -3922,5 +4067,152 @@ const SoftUI = (() => {
     updateTreeParent(parentItem);
   }
 
-  return { modal, sheet, toast, carousel, sidebar };
+  // =========================================
+  // Tour / Walkthrough
+  // =========================================
+  function tour(steps, options) {
+    options = options || {};
+    var currentStep = 0;
+    var overlay, backdrop, spotlight, tooltip;
+    var padding = options.padding || 8;
+    var noOverlay = options.noOverlay || false;
+
+    function create() {
+      overlay = document.createElement('div');
+      overlay.className = 'sui-tour-overlay' + (noOverlay ? ' sui-tour-no-overlay' : '');
+      backdrop = document.createElement('div');
+      backdrop.className = 'sui-tour-backdrop';
+      spotlight = document.createElement('div');
+      spotlight.className = 'sui-tour-spotlight';
+      tooltip = document.createElement('div');
+      tooltip.className = 'sui-tour-tooltip';
+      overlay.appendChild(backdrop);
+      overlay.appendChild(spotlight);
+      overlay.appendChild(tooltip);
+      document.body.appendChild(overlay);
+
+      backdrop.addEventListener('click', close);
+    }
+
+    var firstShow = true;
+
+    function show(idx) {
+      currentStep = idx;
+      var step = steps[idx];
+      var target = document.querySelector(step.target);
+
+      // Only hide on first show to avoid flash between steps
+      if (firstShow) {
+        spotlight.style.opacity = '0';
+        tooltip.style.opacity = '0';
+        firstShow = false;
+      }
+
+      // Scroll if element isn't comfortably in view (with margin for tooltip)
+      var needsScroll = false;
+      if (target) {
+        var r = target.getBoundingClientRect();
+        var margin = 120;
+        needsScroll = r.top < margin || r.bottom > window.innerHeight - margin;
+        if (needsScroll) target.scrollIntoView({ block: 'center', behavior: 'smooth' });
+      }
+      setTimeout(function() {
+      if (target) {
+        var rect = target.getBoundingClientRect();
+        spotlight.style.top = (rect.top - padding) + 'px';
+        spotlight.style.left = (rect.left - padding) + 'px';
+        spotlight.style.width = (rect.width + padding * 2) + 'px';
+        spotlight.style.height = (rect.height + padding * 2) + 'px';
+      }
+
+      // Build tooltip content
+      var dotsHtml = '';
+      if (steps.length > 1) {
+        dotsHtml = '<div class="sui-tour-dots">';
+        for (var i = 0; i < steps.length; i++) {
+          dotsHtml += '<span class="sui-tour-dot' + (i === idx ? ' active' : '') + '"></span>';
+        }
+        dotsHtml += '</div>';
+      }
+
+      tooltip.innerHTML =
+        '<div class="sui-tour-tooltip-title">' + (step.title || '') + '</div>' +
+        '<div class="sui-tour-tooltip-desc">' + (step.description || '') + '</div>' +
+        '<div class="sui-tour-tooltip-footer">' +
+          dotsHtml +
+          '<div class="sui-tour-tooltip-actions">' +
+            (idx > 0 ? '<button class="sui-btn sui-btn-sm sui-tour-prev">Back</button>' : '<button class="sui-btn sui-btn-sm sui-tour-skip">Skip</button>') +
+            (idx < steps.length - 1 ? '<button class="sui-btn sui-btn-primary sui-btn-sm sui-tour-next">Next</button>' : '<button class="sui-btn sui-btn-primary sui-btn-sm sui-tour-done">Done</button>') +
+          '</div>' +
+        '</div>';
+
+      // Button handlers
+      var nextBtn = tooltip.querySelector('.sui-tour-next');
+      var prevBtn = tooltip.querySelector('.sui-tour-prev');
+      var skipBtn = tooltip.querySelector('.sui-tour-skip');
+      var doneBtn = tooltip.querySelector('.sui-tour-done');
+      if (nextBtn) nextBtn.addEventListener('click', function() { show(currentStep + 1); });
+      if (prevBtn) prevBtn.addEventListener('click', function() { show(currentStep - 1); });
+      if (skipBtn) skipBtn.addEventListener('click', close);
+      if (doneBtn) doneBtn.addEventListener('click', close);
+
+      // Position tooltip after scroll settles
+      if (target) {
+        var rect = target.getBoundingClientRect();
+        var pos = step.position || 'bottom';
+        var tooltipW = 300;
+        var centerX = rect.left + rect.width / 2 - tooltipW / 2;
+        var top, left;
+
+        tooltip.style.transform = '';
+
+        if (pos === 'bottom') {
+          top = rect.bottom + padding + 12;
+          left = centerX;
+        } else if (pos === 'top') {
+          top = rect.top - padding - 12;
+          left = centerX;
+          tooltip.style.transform = 'translateY(-100%)';
+        } else if (pos === 'left') {
+          top = rect.top + rect.height / 2;
+          left = rect.left - padding - tooltipW - 12;
+          tooltip.style.transform = 'translateY(-50%)';
+        } else if (pos === 'right') {
+          top = rect.top + rect.height / 2;
+          left = rect.right + padding + 12;
+          tooltip.style.transform = 'translateY(-50%)';
+        }
+
+        // Keep tooltip within viewport
+        left = Math.max(8, Math.min(left, window.innerWidth - tooltipW - 8));
+        top = Math.max(8, Math.min(top, window.innerHeight - 200));
+        tooltip.style.top = top + 'px';
+        tooltip.style.left = left + 'px';
+      }
+      // Reveal after positioning
+      spotlight.style.opacity = '1';
+      tooltip.style.opacity = '1';
+      }, needsScroll ? 350 : 50);
+
+      overlay.classList.add('active');
+    }
+
+    function close() {
+      if (overlay) {
+        overlay.classList.remove('active');
+        setTimeout(function() {
+          if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
+          overlay = null;
+        }, 300);
+      }
+      if (options.onComplete) options.onComplete();
+    }
+
+    create();
+    show(0);
+
+    return { next: function() { show(currentStep + 1); }, prev: function() { show(currentStep - 1); }, close: close, goTo: show };
+  }
+
+  return { modal, sheet, toast, carousel, sidebar, tour };
 })();