Created more components

2026-05-04 18:58:48 +05:00
parent fb1cb8e834
commit 40a7d9018c
52 changed files with 2526 additions and 11 deletions
@@ -456,3 +456,262 @@
  document.addEventListener('DOMContentLoaded', initAll);
  document.addEventListener('htmx:afterSwap',   initAll);
 })();
+
+
+// ── Switch ────────────────────────────────────────────────────────────────
+
+(function () {
+  function updateSwitch(input) {
+    var track = input.parentElement && input.parentElement.querySelector('.switch-track');
+    if (!track) return;
+    var thumb = track.querySelector('.switch-thumb');
+    if (input.checked) {
+      track.classList.add('bg-primary');
+      track.classList.remove('bg-input');
+      if (thumb) thumb.style.transform = 'translateX(1.375rem)';
+    } else {
+      track.classList.remove('bg-primary');
+      track.classList.add('bg-input');
+      if (thumb) thumb.style.transform = '';
+    }
+  }
+
+  function initAll() {
+    document.querySelectorAll('.switch-checkbox').forEach(function (input) {
+      updateSwitch(input);
+      if (!input._switchBound) {
+        input._switchBound = true;
+        input.addEventListener('change', function () { updateSwitch(input); });
+      }
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', initAll);
+  document.addEventListener('htmx:afterSwap',   initAll);
+})();
+
+
+// ── Tabs ──────────────────────────────────────────────────────────────────
+
+(function () {
+  var ACTIVE   = 'bg-background text-foreground shadow-sm';
+  var INACTIVE = 'text-muted-foreground';
+
+  function initTabs(root) {
+    if (root._tabsInitialised) return;
+    root._tabsInitialised = true;
+
+    var triggers = Array.from(root.querySelectorAll('.tabs-trigger'));
+    var panels   = Array.from(root.querySelectorAll('.tabs-panel'));
+
+    function activate(idx) {
+      triggers.forEach(function (t, i) {
+        var active = i === idx;
+        t.setAttribute('aria-selected', String(active));
+        ACTIVE.split(' ').forEach(function (c) { t.classList.toggle(c, active); });
+        INACTIVE.split(' ').forEach(function (c) { t.classList.toggle(c, !active); });
+      });
+      panels.forEach(function (p, i) { p.hidden = i !== idx; });
+    }
+
+    triggers.forEach(function (trigger, idx) {
+      trigger.addEventListener('click', function () { activate(idx); });
+    });
+    activate(0);
+  }
+
+  function initAll() {
+    document.querySelectorAll('.tabs-root').forEach(initTabs);
+  }
+
+  document.addEventListener('DOMContentLoaded', initAll);
+  document.addEventListener('htmx:afterSwap',   initAll);
+})();
+
+
+// ── Accordion ─────────────────────────────────────────────────────────────
+
+(function () {
+  function initAccordion(root) {
+    if (root._accInitialised) return;
+    root._accInitialised = true;
+
+    root.querySelectorAll('.accordion-trigger').forEach(function (trigger) {
+      trigger.addEventListener('click', function () {
+        var expanded = trigger.getAttribute('aria-expanded') === 'true';
+        var panel    = trigger.closest('.accordion-item').querySelector('.accordion-panel');
+        if (expanded) {
+          trigger.setAttribute('aria-expanded', 'false');
+          panel.style.height  = '0';
+          panel.style.opacity = '0';
+        } else {
+          trigger.setAttribute('aria-expanded', 'true');
+          panel.style.height  = panel.scrollHeight + 'px';
+          panel.style.opacity = '1';
+        }
+        var chevron = trigger.querySelector('.accordion-chevron');
+        if (chevron) chevron.style.transform = expanded ? '' : 'rotate(180deg)';
+      });
+    });
+  }
+
+  function initAll() {
+    document.querySelectorAll('.accordion-root').forEach(initAccordion);
+  }
+
+  document.addEventListener('DOMContentLoaded', initAll);
+  document.addEventListener('htmx:afterSwap',   initAll);
+})();
+
+
+// ── Toast ─────────────────────────────────────────────────────────────────
+
+(function () {
+  function dismissToast(toast) {
+    toast.style.opacity   = '0';
+    toast.style.transform = 'translateY(0.5rem)';
+    setTimeout(function () { if (toast.parentNode) toast.parentNode.removeChild(toast); }, 300);
+  }
+
+  window.showToast = function (options) {
+    var viewport = document.querySelector('.toast-viewport');
+    if (!viewport) return;
+
+    var title       = options.title       || '';
+    var description = options.description || '';
+    var variant     = options.variant     || 'default';
+    var duration    = typeof options.duration === 'number' ? options.duration : 5000;
+
+    var variantCls = variant === 'destructive' ? ' border-destructive text-destructive' : '';
+
+    var toast = document.createElement('div');
+    toast.setAttribute('role', 'alert');
+    toast.className = 'toast-item pointer-events-auto relative flex w-full items-center justify-between' +
+      ' space-x-4 overflow-hidden rounded-md border border-border bg-background p-4' +
+      ' shadow-lg transition-all duration-300 opacity-0 translate-y-2' + variantCls;
+
+    toast.innerHTML =
+      '<div class="grid gap-1">' +
+        (title       ? '<div class="text-sm font-semibold">'  + title       + '</div>' : '') +
+        (description ? '<div class="text-sm opacity-90">'     + description + '</div>' : '') +
+      '</div>' +
+      '<button type="button" aria-label="Dismiss"' +
+        ' class="toast-close inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md' +
+        ' text-muted-foreground hover:text-foreground focus:outline-none">' +
+        '<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"' +
+        ' stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+        '<path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>' +
+      '</button>';
+
+    viewport.appendChild(toast);
+
+    requestAnimationFrame(function () {
+      toast.classList.remove('opacity-0', 'translate-y-2');
+    });
+
+    var timer = duration > 0 ? setTimeout(function () { dismissToast(toast); }, duration) : null;
+
+    toast.querySelector('.toast-close').addEventListener('click', function () {
+      if (timer) clearTimeout(timer);
+      dismissToast(toast);
+    });
+  };
+
+  // Delegate clicks on server-rendered toast close buttons
+  document.addEventListener('click', function (e) {
+    var btn = e.target.closest('.toast-close');
+    if (btn) {
+      var item = btn.closest('.toast-item');
+      if (item) dismissToast(item);
+    }
+  });
+
+  document.addEventListener('keydown', function (e) {
+    var trigger = e.target.closest('.dropdown-trigger');
+    if (!trigger) return;
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+
+    e.preventDefault();
+    var root = trigger.closest('.dropdown-root');
+    var content = root && root.querySelector('.dropdown-content');
+    var isOpen = content && !content.classList.contains('hidden');
+
+    document.querySelectorAll('.dropdown-root').forEach(closeDropdown);
+    if (!isOpen && root) openDropdown(root);
+  });
+})();
+
+
+// ── Dialog ────────────────────────────────────────────────────────────────
+
+(function () {
+  document.addEventListener('click', function (e) {
+    // Open
+    var openBtn = e.target.closest('[data-dialog-open]');
+    if (openBtn) {
+      var dlg = document.getElementById('dlg-' + openBtn.dataset.dialogOpen);
+      if (dlg && dlg.showModal) dlg.showModal();
+    }
+    // Close via button
+    var closeBtn = e.target.closest('[data-dialog-close], .dialog-close');
+    if (closeBtn) {
+      var dlg = closeBtn.closest('dialog');
+      if (dlg) dlg.close();
+    }
+  });
+
+  // Close on backdrop click
+  document.addEventListener('click', function (e) {
+    if (e.target && e.target.tagName === 'DIALOG') {
+      e.target.close();
+    }
+  });
+})();
+
+
+// ── DropdownMenu ──────────────────────────────────────────────────────────
+
+(function () {
+  function closeDropdown(root) {
+    var trigger = root.querySelector('.dropdown-trigger');
+    var content = root.querySelector('.dropdown-content');
+    if (!trigger || !content) return;
+    content.classList.add('hidden');
+    trigger.setAttribute('aria-expanded', 'false');
+  }
+
+  function openDropdown(root) {
+    var trigger = root.querySelector('.dropdown-trigger');
+    var content = root.querySelector('.dropdown-content');
+    if (!trigger || !content) return;
+    content.classList.remove('hidden');
+    trigger.setAttribute('aria-expanded', 'true');
+  }
+
+  document.addEventListener('click', function (e) {
+    var trigger = e.target.closest('.dropdown-trigger');
+    if (trigger) {
+      var root = trigger.closest('.dropdown-root');
+      var content = root && root.querySelector('.dropdown-content');
+      var isOpen = content && !content.classList.contains('hidden');
+
+      document.querySelectorAll('.dropdown-root').forEach(closeDropdown);
+      if (!isOpen && root) openDropdown(root);
+      return;
+    }
+
+    var insideMenu = e.target.closest('.dropdown-content');
+    if (insideMenu) {
+      var rootInMenu = insideMenu.closest('.dropdown-root');
+      if (e.target.closest('a, button') && rootInMenu) {
+        closeDropdown(rootInMenu);
+      }
+      return;
+    }
+
+    document.querySelectorAll('.dropdown-root').forEach(function (root) {
+      if (!root.contains(e.target)) closeDropdown(root);
+    });
+  });
+})();
+