jasmincss 1.0.0

package/src/js/components/offcanvas.js

@@ -0,0 +1,175 @@
+/**
+ * JasminCSS Offcanvas Component
+ * Handles slide-out panels/drawers with focus trapping
+ */
+
+class Offcanvas {
+  constructor(element, options = {}) {
+    this.element = element;
+    this.isOpen = false;
+    this.previousActiveElement = null;
+    this.options = {
+      backdrop: true,
+      keyboard: true,
+      scroll: false, // Allow body scroll when open
+      ...options
+    };
+
+    this.backdrop = null;
+    this.init();
+  }
+
+  init() {
+    // Set ARIA attributes
+    this.element.setAttribute('role', 'dialog');
+    this.element.setAttribute('aria-modal', 'true');
+    this.element.setAttribute('tabindex', '-1');
+
+    // Close button handlers
+    this.element.querySelectorAll('[data-offcanvas-close], .offcanvas-close').forEach(btn => {
+      btn.addEventListener('click', () => this.close());
+    });
+
+    // Keyboard handling
+    this.element.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && this.options.keyboard) {
+        this.close();
+      }
+      if (e.key === 'Tab') {
+        this.trapFocus(e);
+      }
+    });
+  }
+
+  open() {
+    if (this.isOpen) return;
+
+    this.previousActiveElement = document.activeElement;
+    this.isOpen = true;
+
+    // Create backdrop
+    if (this.options.backdrop) {
+      this.backdrop = document.createElement('div');
+      this.backdrop.className = 'offcanvas-backdrop';
+      document.body.appendChild(this.backdrop);
+
+      // Trigger reflow for animation
+      this.backdrop.offsetHeight;
+      this.backdrop.classList.add('show');
+
+      if (this.options.backdrop !== 'static') {
+        this.backdrop.addEventListener('click', () => this.close());
+      }
+    }
+
+    // Show offcanvas
+    this.element.classList.add('show');
+
+    // Body scroll
+    if (!this.options.scroll) {
+      document.body.classList.add('offcanvas-open');
+      document.body.style.overflow = 'hidden';
+    }
+
+    // Focus first focusable element
+    requestAnimationFrame(() => {
+      const focusable = this.getFocusableElements()[0];
+      (focusable || this.element).focus();
+    });
+
+    // Dispatch event
+    this.element.dispatchEvent(new CustomEvent('offcanvas:open', { detail: { offcanvas: this } }));
+  }
+
+  close() {
+    if (!this.isOpen) return;
+
+    this.isOpen = false;
+
+    // Remove backdrop
+    if (this.backdrop) {
+      this.backdrop.classList.remove('show');
+      setTimeout(() => {
+        this.backdrop?.remove();
+        this.backdrop = null;
+      }, 300);
+    }
+
+    // Hide offcanvas
+    this.element.classList.remove('show');
+
+    // Restore body scroll
+    document.body.classList.remove('offcanvas-open');
+    document.body.style.overflow = '';
+
+    // Restore focus
+    if (this.previousActiveElement) {
+      this.previousActiveElement.focus();
+    }
+
+    // Dispatch event
+    this.element.dispatchEvent(new CustomEvent('offcanvas:close', { detail: { offcanvas: this } }));
+  }
+
+  toggle() {
+    this.isOpen ? this.close() : this.open();
+  }
+
+  getFocusableElements() {
+    return Array.from(this.element.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )).filter(el => !el.disabled && el.offsetParent !== null);
+  }
+
+  trapFocus(e) {
+    const focusable = this.getFocusableElements();
+    const firstFocusable = focusable[0];
+    const lastFocusable = focusable[focusable.length - 1];
+
+    if (e.shiftKey) {
+      if (document.activeElement === firstFocusable) {
+        e.preventDefault();
+        lastFocusable.focus();
+      }
+    } else {
+      if (document.activeElement === lastFocusable) {
+        e.preventDefault();
+        firstFocusable.focus();
+      }
+    }
+  }
+
+  destroy() {
+    this.close();
+  }
+
+  // Static methods
+  static initAll(selector = '[data-offcanvas]') {
+    document.querySelectorAll(selector).forEach(el => {
+      if (!el._jasminOffcanvas) {
+        el._jasminOffcanvas = new Offcanvas(el, {
+          backdrop: el.dataset.offcanvasBackdrop !== 'false',
+          keyboard: el.dataset.offcanvasKeyboard !== 'false',
+          scroll: el.dataset.offcanvasScroll === 'true'
+        });
+      }
+    });
+
+    // Init triggers
+    document.querySelectorAll('[data-offcanvas-target]').forEach(trigger => {
+      trigger.addEventListener('click', (e) => {
+        e.preventDefault();
+        const target = document.querySelector(trigger.dataset.offcanvasTarget);
+        if (target?._jasminOffcanvas) {
+          target._jasminOffcanvas.toggle();
+        }
+      });
+    });
+  }
+
+  static getInstance(element) {
+    return element._jasminOffcanvas;
+  }
+}
+
+export default Offcanvas;

package/src/js/components/popover.js

@@ -0,0 +1,221 @@
+/**
+ * JasminCSS Popover Component
+ * Handles popovers with rich content and positioning
+ */
+
+class Popover {
+  constructor(element, options = {}) {
+    this.element = element;
+    this.options = {
+      placement: 'top',
+      trigger: 'click',
+      title: '',
+      content: '',
+      html: false,
+      ...options
+    };
+
+    this.popover = null;
+    this.isVisible = false;
+
+    this.init();
+  }
+
+  init() {
+    // Get content from data attributes or options
+    this.options.title = this.element.dataset.popoverTitle || this.options.title;
+    this.options.content = this.element.dataset.popoverContent || this.options.content;
+
+    // Bind events based on trigger
+    const triggers = this.options.trigger.split(' ');
+
+    if (triggers.includes('click')) {
+      this.element.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggle();
+      });
+
+      // Close on outside click
+      document.addEventListener('click', (e) => {
+        if (this.isVisible && !this.popover?.contains(e.target)) {
+          this.hide();
+        }
+      });
+    }
+
+    if (triggers.includes('hover')) {
+      this.element.addEventListener('mouseenter', () => this.show());
+      this.element.addEventListener('mouseleave', () => this.hide());
+    }
+
+    if (triggers.includes('focus')) {
+      this.element.addEventListener('focus', () => this.show());
+      this.element.addEventListener('blur', () => this.hide());
+    }
+
+    // Close on escape
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && this.isVisible) {
+        this.hide();
+        this.element.focus();
+      }
+    });
+  }
+
+  createPopover() {
+    this.popover = document.createElement('div');
+    this.popover.className = `popover popover-${this.options.placement}`;
+    this.popover.setAttribute('role', 'tooltip');
+    this.popover.id = `popover-${Date.now()}`;
+    this.popover.dataset.placement = this.options.placement;
+
+    // Header
+    if (this.options.title) {
+      const header = document.createElement('div');
+      header.className = 'popover-header';
+      if (this.options.html) {
+        header.innerHTML = this.options.title;
+      } else {
+        header.textContent = this.options.title;
+      }
+      this.popover.appendChild(header);
+    }
+
+    // Body
+    const body = document.createElement('div');
+    body.className = 'popover-body';
+    if (this.options.html) {
+      body.innerHTML = this.options.content;
+    } else {
+      body.textContent = this.options.content;
+    }
+    this.popover.appendChild(body);
+
+    // Arrow
+    const arrow = document.createElement('div');
+    arrow.className = 'popover-arrow';
+    this.popover.appendChild(arrow);
+
+    document.body.appendChild(this.popover);
+    this.element.setAttribute('aria-describedby', this.popover.id);
+
+    this.position();
+  }
+
+  position() {
+    if (!this.popover) return;
+
+    const rect = this.element.getBoundingClientRect();
+    const popoverRect = this.popover.getBoundingClientRect();
+    const scrollY = window.scrollY;
+    const scrollX = window.scrollX;
+
+    let top, left;
+
+    switch (this.options.placement) {
+      case 'top':
+        top = rect.top + scrollY - popoverRect.height - 10;
+        left = rect.left + scrollX + (rect.width - popoverRect.width) / 2;
+        break;
+      case 'bottom':
+        top = rect.bottom + scrollY + 10;
+        left = rect.left + scrollX + (rect.width - popoverRect.width) / 2;
+        break;
+      case 'left':
+        top = rect.top + scrollY + (rect.height - popoverRect.height) / 2;
+        left = rect.left + scrollX - popoverRect.width - 10;
+        break;
+      case 'right':
+        top = rect.top + scrollY + (rect.height - popoverRect.height) / 2;
+        left = rect.right + scrollX + 10;
+        break;
+    }
+
+    // Boundary checks
+    if (left < 8) left = 8;
+    if (left + popoverRect.width > window.innerWidth - 8) {
+      left = window.innerWidth - popoverRect.width - 8;
+    }
+    if (top < 8) top = 8;
+
+    this.popover.style.top = `${top}px`;
+    this.popover.style.left = `${left}px`;
+  }
+
+  show() {
+    if (!this.popover) {
+      this.createPopover();
+    }
+
+    // Small delay for positioning
+    requestAnimationFrame(() => {
+      this.popover.classList.add('show');
+      this.isVisible = true;
+      this.element.dispatchEvent(new CustomEvent('popover:show', { detail: { popover: this } }));
+    });
+  }
+
+  hide() {
+    if (this.popover) {
+      this.popover.classList.remove('show');
+
+      setTimeout(() => {
+        this.popover?.remove();
+        this.popover = null;
+        this.element.setAttribute('aria-describedby', '');
+      }, 150);
+    }
+
+    this.isVisible = false;
+    this.element.dispatchEvent(new CustomEvent('popover:hide', { detail: { popover: this } }));
+  }
+
+  toggle() {
+    this.isVisible ? this.hide() : this.show();
+  }
+
+  updateContent(title, content) {
+    this.options.title = title;
+    this.options.content = content;
+
+    if (this.popover) {
+      const header = this.popover.querySelector('.popover-header');
+      const body = this.popover.querySelector('.popover-body');
+
+      if (header) {
+        this.options.html ? (header.innerHTML = title) : (header.textContent = title);
+      }
+      if (body) {
+        this.options.html ? (body.innerHTML = content) : (body.textContent = content);
+      }
+
+      this.position();
+    }
+  }
+
+  destroy() {
+    this.hide();
+  }
+
+  // Static methods
+  static initAll(selector = '[data-popover]') {
+    document.querySelectorAll(selector).forEach(el => {
+      if (!el._jasminPopover) {
+        el._jasminPopover = new Popover(el, {
+          placement: el.dataset.popoverPlacement || 'top',
+          trigger: el.dataset.popoverTrigger || 'click',
+          title: el.dataset.popoverTitle || '',
+          content: el.dataset.popoverContent || '',
+          html: el.dataset.popoverHtml === 'true'
+        });
+      }
+    });
+  }
+
+  static getInstance(element) {
+    return element._jasminPopover;
+  }
+}
+
+export default Popover;

package/src/js/components/tabs.js

@@ -0,0 +1,163 @@
+/**
+ * JasminCSS Tabs Component
+ * Handles tab navigation with keyboard support and accessibility
+ */
+
+class Tabs {
+  constructor(element, options = {}) {
+    this.element = element;
+    this.options = {
+      orientation: 'horizontal', // 'horizontal' or 'vertical'
+      ...options
+    };
+    this.tabs = [];
+    this.panels = [];
+    this.activeIndex = 0;
+
+    this.init();
+  }
+
+  init() {
+    const tabList = this.element.querySelector('[role="tablist"], .tabs-list, .nav-tabs');
+    this.tabs = Array.from(this.element.querySelectorAll('[role="tab"], .tab, .nav-link'));
+    this.panels = Array.from(this.element.querySelectorAll('[role="tabpanel"], .tab-panel, .tab-content > *'));
+
+    if (tabList) {
+      tabList.setAttribute('role', 'tablist');
+      tabList.setAttribute('aria-orientation', this.options.orientation);
+    }
+
+    this.tabs.forEach((tab, index) => {
+      const panel = this.panels[index];
+      if (!panel) return;
+
+      // Generate IDs
+      const tabId = tab.id || `tab-${Date.now()}-${index}`;
+      const panelId = panel.id || `tabpanel-${Date.now()}-${index}`;
+
+      tab.id = tabId;
+      panel.id = panelId;
+
+      // Set ARIA attributes
+      tab.setAttribute('role', 'tab');
+      tab.setAttribute('aria-controls', panelId);
+      tab.setAttribute('tabindex', index === 0 ? '0' : '-1');
+
+      panel.setAttribute('role', 'tabpanel');
+      panel.setAttribute('aria-labelledby', tabId);
+      panel.setAttribute('tabindex', '0');
+
+      // Determine initial active tab
+      if (tab.classList.contains('active') || tab.getAttribute('aria-selected') === 'true') {
+        this.activeIndex = index;
+      }
+
+      // Click handler
+      tab.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.selectTab(index);
+      });
+
+      // Keyboard handler
+      tab.addEventListener('keydown', (e) => this.handleKeydown(e, index));
+    });
+
+    // Set initial state
+    this.selectTab(this.activeIndex, false);
+  }
+
+  selectTab(index, focus = true) {
+    if (index < 0 || index >= this.tabs.length) return;
+
+    // Deactivate all
+    this.tabs.forEach((tab, i) => {
+      tab.setAttribute('aria-selected', 'false');
+      tab.setAttribute('tabindex', '-1');
+      tab.classList.remove('active');
+
+      if (this.panels[i]) {
+        this.panels[i].classList.remove('active');
+        this.panels[i].hidden = true;
+      }
+    });
+
+    // Activate selected
+    const selectedTab = this.tabs[index];
+    const selectedPanel = this.panels[index];
+
+    selectedTab.setAttribute('aria-selected', 'true');
+    selectedTab.setAttribute('tabindex', '0');
+    selectedTab.classList.add('active');
+
+    if (selectedPanel) {
+      selectedPanel.classList.add('active');
+      selectedPanel.hidden = false;
+    }
+
+    this.activeIndex = index;
+
+    if (focus) {
+      selectedTab.focus();
+    }
+
+    // Dispatch event
+    this.element.dispatchEvent(new CustomEvent('tabs:change', {
+      detail: { index, tab: selectedTab, panel: selectedPanel }
+    }));
+  }
+
+  handleKeydown(e, index) {
+    const isVertical = this.options.orientation === 'vertical';
+    const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+    const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+
+    switch (e.key) {
+      case nextKey:
+        e.preventDefault();
+        const nextIndex = index < this.tabs.length - 1 ? index + 1 : 0;
+        this.selectTab(nextIndex);
+        break;
+
+      case prevKey:
+        e.preventDefault();
+        const prevIndex = index > 0 ? index - 1 : this.tabs.length - 1;
+        this.selectTab(prevIndex);
+        break;
+
+      case 'Home':
+        e.preventDefault();
+        this.selectTab(0);
+        break;
+
+      case 'End':
+        e.preventDefault();
+        this.selectTab(this.tabs.length - 1);
+        break;
+    }
+  }
+
+  destroy() {
+    this.tabs.forEach(tab => {
+      tab.removeAttribute('aria-selected');
+      tab.removeAttribute('aria-controls');
+      tab.removeAttribute('tabindex');
+    });
+  }
+
+  // Static methods
+  static initAll(selector = '[data-tabs]') {
+    document.querySelectorAll(selector).forEach(el => {
+      if (!el._jasminTabs) {
+        el._jasminTabs = new Tabs(el, {
+          orientation: el.dataset.tabsOrientation || 'horizontal'
+        });
+      }
+    });
+  }
+
+  static getInstance(element) {
+    return element._jasminTabs;
+  }
+}
+
+export default Tabs;