@vanduo-oss/framework 1.2.6 → 1.2.8

package/js/components/affix.js

@@ -0,0 +1,129 @@
+/**
+ * Vanduo Framework - Affix (Sticky) Component
+ * Uses IntersectionObserver to toggle .is-stuck within the nearest scrollable parent
+ */
+
+(function () {
+  'use strict';
+
+  function isScrollable(element) {
+    if (!element || element === document.body) return false;
+
+    const style = window.getComputedStyle(element);
+    const overflowY = style.overflowY;
+    const overflowX = style.overflowX;
+    const canScrollY = /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight;
+    const canScrollX = /(auto|scroll|overlay)/.test(overflowX) && element.scrollWidth > element.clientWidth;
+
+    return canScrollY || canScrollX;
+  }
+
+  function getScrollParent(element) {
+    let parent = element.parentElement;
+
+    while (parent && parent !== document.body && parent !== document.documentElement) {
+      if (isScrollable(parent)) return parent;
+      parent = parent.parentElement;
+    }
+
+    return null;
+  }
+
+  const Affix = {
+    instances: new Map(),
+
+    init: function () {
+      const elements = document.querySelectorAll('.vd-affix, .vd-sticky, [data-vd-affix]');
+      elements.forEach(el => {
+        if (this.instances.has(el)) return;
+        this.initInstance(el);
+      });
+    },
+
+    initInstance: function (el) {
+      const cleanup = [];
+      const parsedOffset = parseInt(el.getAttribute('data-vd-affix-offset') || '0', 10);
+      const offset = Number.isNaN(parsedOffset) ? 0 : parsedOffset;
+      const scrollParent = getScrollParent(el);
+      let isStuck = false;
+
+      const sentinel = document.createElement('div');
+      sentinel.style.cssText = 'display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;';
+      el.parentNode.insertBefore(sentinel, el);
+
+      el.style.setProperty('--affix-top-offset', offset + 'px');
+
+      function stick() {
+        if (isStuck) return;
+        isStuck = true;
+        el.classList.add('is-stuck');
+        el.dispatchEvent(new CustomEvent('affix:stuck', {
+          bubbles: true,
+          detail: {
+            offset: offset,
+            root: scrollParent || window
+          }
+        }));
+      }
+
+      function unstick() {
+        if (!isStuck) return;
+        isStuck = false;
+        el.classList.remove('is-stuck');
+        el.dispatchEvent(new CustomEvent('affix:unstuck', {
+          bubbles: true,
+          detail: {
+            offset: offset,
+            root: scrollParent || window
+          }
+        }));
+      }
+
+      const observer = new IntersectionObserver(function (entries) {
+        entries.forEach(entry => {
+          if (!entry.isIntersecting) {
+            stick();
+          } else {
+            unstick();
+          }
+        });
+      }, {
+        root: scrollParent,
+        rootMargin: '-' + offset + 'px 0px 0px 0px',
+        threshold: 0
+      });
+
+      observer.observe(sentinel);
+
+      cleanup.push(
+        () => observer.disconnect(),
+        () => { if (sentinel.parentNode) sentinel.parentNode.removeChild(sentinel); },
+        () => {
+          el.classList.remove('is-stuck');
+          el.style.removeProperty('--affix-top-offset');
+        }
+      );
+
+      this.instances.set(el, { cleanup, observer, sentinel, scrollParent });
+    },
+
+    destroy: function (el) {
+      const instance = this.instances.get(el);
+      if (!instance) return;
+      instance.cleanup.forEach(fn => fn());
+      el.classList.remove('is-stuck');
+      this.instances.delete(el);
+    },
+
+    destroyAll: function () {
+      this.instances.forEach((_, el) => this.destroy(el));
+    }
+  };
+
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('affix', Affix);
+  }
+
+  window.VanduoAffix = Affix;
+
+})();

package/js/components/bubble.js

@@ -0,0 +1,203 @@
+/**
+ * Vanduo Framework - Bubble (Popover) Component
+ * Click-triggered rich HTML popover, reuses tooltip positioning concepts
+ */
+
+(function () {
+  'use strict';
+
+  const Bubble = {
+    instances: new Map(),
+    _globalCleanups: [],
+
+    init: function () {
+      const triggers = document.querySelectorAll('[data-vd-bubble], [data-vd-popover]');
+      triggers.forEach(el => {
+        if (this.instances.has(el)) return;
+        this.initInstance(el);
+      });
+
+      if (this._globalCleanups.length === 0) {
+        const outsideClick = (e) => {
+          this.instances.forEach((inst, trigger) => {
+            if (!inst.popover.contains(e.target) && !trigger.contains(e.target)) {
+              this.hide(trigger);
+            }
+          });
+        };
+        const escHandler = (e) => {
+          if (e.key === 'Escape') {
+            this.instances.forEach((_, trigger) => this.hide(trigger));
+          }
+        };
+        document.addEventListener('click', outsideClick, true);
+        document.addEventListener('keydown', escHandler);
+        this._globalCleanups.push(
+          () => document.removeEventListener('click', outsideClick, true),
+          () => document.removeEventListener('keydown', escHandler)
+        );
+      }
+    },
+
+    initInstance: function (trigger) {
+      const cleanup = [];
+      const placement = trigger.getAttribute('data-vd-bubble-placement') ||
+                         trigger.getAttribute('data-vd-popover-placement') || 'bottom';
+
+      // Build popover element
+      const popover = document.createElement('div');
+      popover.className = 'vd-bubble-content';
+      popover.setAttribute('role', 'dialog');
+      popover.setAttribute('aria-modal', 'false');
+      popover.setAttribute('data-placement', placement);
+
+      const title = trigger.getAttribute('data-vd-bubble-title') ||
+                    trigger.getAttribute('data-vd-popover-title');
+      const content = trigger.getAttribute('data-vd-bubble') ||
+                      trigger.getAttribute('data-vd-popover') || '';
+      const htmlContent = trigger.getAttribute('data-vd-bubble-html') ||
+                          trigger.getAttribute('data-vd-popover-html');
+
+      if (title) {
+        const header = document.createElement('div');
+        header.className = 'vd-bubble-header';
+        const titleSpan = document.createElement('span');
+        titleSpan.textContent = title;
+        const closeBtn = document.createElement('button');
+        closeBtn.className = 'vd-bubble-close';
+        closeBtn.setAttribute('aria-label', 'Close');
+        closeBtn.innerHTML = '×';
+        header.appendChild(titleSpan);
+        header.appendChild(closeBtn);
+        popover.appendChild(header);
+
+        const closeHandler = (e) => { e.stopPropagation(); this.hide(trigger); };
+        closeBtn.addEventListener('click', closeHandler);
+        cleanup.push(() => closeBtn.removeEventListener('click', closeHandler));
+      }
+
+      const body = document.createElement('div');
+      body.className = 'vd-bubble-body';
+      if (htmlContent) {
+        if (typeof sanitizeHtml === 'function') {
+          body.innerHTML = sanitizeHtml(htmlContent);
+        } else {
+          body.textContent = htmlContent;
+        }
+      } else {
+        body.textContent = content;
+      }
+      popover.appendChild(body);
+
+      document.body.appendChild(popover);
+
+      // ARIA on trigger
+      const popId = 'vd-bubble-' + Math.random().toString(36).slice(2, 9);
+      popover.id = popId;
+      trigger.setAttribute('aria-haspopup', 'dialog');
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.setAttribute('aria-controls', popId);
+
+      // Toggle on click
+      const toggleHandler = (e) => {
+        e.stopPropagation();
+        if (popover.classList.contains('is-visible')) {
+          this.hide(trigger);
+        } else {
+          this.hideAll();
+          this.show(trigger);
+        }
+      };
+      trigger.addEventListener('click', toggleHandler);
+      cleanup.push(() => trigger.removeEventListener('click', toggleHandler));
+
+      this.instances.set(trigger, { popover, cleanup, placement });
+    },
+
+    position: function (trigger, popover, placement) {
+      const rect = trigger.getBoundingClientRect();
+      const popRect = popover.getBoundingClientRect();
+      const gap = 10;
+      let top, left;
+
+      switch (placement) {
+        case 'top':
+          top = rect.top - popRect.height - gap + window.scrollY;
+          left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;
+          break;
+        case 'left':
+          top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;
+          left = rect.left - popRect.width - gap + window.scrollX;
+          break;
+        case 'right':
+          top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;
+          left = rect.right + gap + window.scrollX;
+          break;
+        default: // bottom
+          top = rect.bottom + gap + window.scrollY;
+          left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;
+      }
+
+      // Clamp to viewport
+      left = Math.max(8, Math.min(left, window.innerWidth - popRect.width - 8));
+      top = Math.max(8, top);
+
+      popover.style.top = top + 'px';
+      popover.style.left = left + 'px';
+    },
+
+    show: function (trigger) {
+      const instance = this.instances.get(trigger);
+      if (!instance) return;
+      const { popover, placement } = instance;
+
+      popover.style.display = 'block';
+      popover.classList.add('is-visible');
+      trigger.setAttribute('aria-expanded', 'true');
+
+      requestAnimationFrame(() => {
+        this.position(trigger, popover, placement);
+      });
+
+      trigger.dispatchEvent(new CustomEvent('bubble:show', { bubbles: true }));
+    },
+
+    hide: function (trigger) {
+      const instance = this.instances.get(trigger);
+      if (!instance) return;
+      instance.popover.classList.remove('is-visible');
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.dispatchEvent(new CustomEvent('bubble:hide', { bubbles: true }));
+    },
+
+    hideAll: function () {
+      this.instances.forEach((_, trigger) => this.hide(trigger));
+    },
+
+    destroy: function (trigger) {
+      const instance = this.instances.get(trigger);
+      if (!instance) return;
+      instance.cleanup.forEach(fn => fn());
+      if (instance.popover.parentNode) {
+        instance.popover.parentNode.removeChild(instance.popover);
+      }
+      trigger.removeAttribute('aria-haspopup');
+      trigger.removeAttribute('aria-expanded');
+      trigger.removeAttribute('aria-controls');
+      this.instances.delete(trigger);
+    },
+
+    destroyAll: function () {
+      this.instances.forEach((_, trigger) => this.destroy(trigger));
+      this._globalCleanups.forEach(fn => fn());
+      this._globalCleanups = [];
+    }
+  };
+
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('bubble', Bubble);
+  }
+
+  window.VanduoBubble = Bubble;
+
+})();

package/js/components/datepicker.js

@@ -0,0 +1,287 @@
+/**
+ * Vanduo Framework - Datepicker Component
+ * Calendar popup attached to input field with month/year navigation
+ */
+
+(function () {
+  'use strict';
+
+  const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+  const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
+
+  const Datepicker = {
+    instances: new Map(),
+
+    init: function () {
+      const inputs = document.querySelectorAll('[data-vd-datepicker]');
+      inputs.forEach(el => {
+        if (this.instances.has(el)) return;
+        this.initInstance(el);
+      });
+    },
+
+    initInstance: function (input) {
+      const cleanup = [];
+      const format = input.getAttribute('data-vd-datepicker-format') || 'yyyy-mm-dd';
+      const minStr = input.getAttribute('data-vd-datepicker-min');
+      const maxStr = input.getAttribute('data-vd-datepicker-max');
+      const minDate = minStr ? new Date(minStr) : null;
+      const maxDate = maxStr ? new Date(maxStr) : null;
+
+      const today = new Date();
+      let viewYear = today.getFullYear();
+      let viewMonth = today.getMonth();
+      let selectedDate = null;
+      let viewMode = 'days'; // days | months | years
+
+      // Parse existing value
+      if (input.value) {
+        const parsed = new Date(input.value);
+        if (!isNaN(parsed.getTime())) {
+          selectedDate = parsed;
+          viewYear = parsed.getFullYear();
+          viewMonth = parsed.getMonth();
+        }
+      }
+
+      // Create popup
+      const popup = document.createElement('div');
+      popup.className = 'vd-datepicker-popup';
+      popup.setAttribute('role', 'dialog');
+      popup.setAttribute('aria-label', 'Choose date');
+
+      const wrapper = document.createElement('div');
+      wrapper.className = 'vd-suggest-wrapper';
+      wrapper.style.position = 'relative';
+      wrapper.style.display = 'inline-block';
+      input.parentNode.insertBefore(wrapper, input);
+      wrapper.appendChild(input);
+      wrapper.appendChild(popup);
+
+      const formatDate = (d) => {
+        const yyyy = d.getFullYear();
+        const mm = String(d.getMonth() + 1).padStart(2, '0');
+        const dd = String(d.getDate()).padStart(2, '0');
+        return format.replace('yyyy', yyyy).replace('mm', mm).replace('dd', dd);
+      };
+
+      const isDisabled = (d) => {
+        if (minDate && d < minDate) return true;
+        if (maxDate && d > maxDate) return true;
+        return false;
+      };
+
+      const isSameDay = (a, b) => a && b &&
+        a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate();
+
+      const render = () => {
+        popup.innerHTML = '';
+
+        // Header
+        const header = document.createElement('div');
+        header.className = 'vd-datepicker-header';
+
+        const prevBtn = document.createElement('button');
+        prevBtn.type = 'button';
+        prevBtn.className = 'vd-datepicker-prev';
+        prevBtn.innerHTML = '&#8249;';
+        prevBtn.setAttribute('aria-label', 'Previous');
+
+        const nextBtn = document.createElement('button');
+        nextBtn.type = 'button';
+        nextBtn.className = 'vd-datepicker-next';
+        nextBtn.innerHTML = '&#8250;';
+        nextBtn.setAttribute('aria-label', 'Next');
+
+        const title = document.createElement('span');
+        title.className = 'vd-datepicker-title';
+
+        if (viewMode === 'days') {
+          title.textContent = MONTHS[viewMonth] + ' ' + viewYear;
+          title.addEventListener('click', () => { viewMode = 'months'; render(); });
+          prevBtn.addEventListener('click', () => { viewMonth--; if (viewMonth < 0) { viewMonth = 11; viewYear--; } render(); });
+          nextBtn.addEventListener('click', () => { viewMonth++; if (viewMonth > 11) { viewMonth = 0; viewYear++; } render(); });
+        } else if (viewMode === 'months') {
+          title.textContent = String(viewYear);
+          title.addEventListener('click', () => { viewMode = 'years'; render(); });
+          prevBtn.addEventListener('click', () => { viewYear--; render(); });
+          nextBtn.addEventListener('click', () => { viewYear++; render(); });
+        } else {
+          const decadeStart = Math.floor(viewYear / 10) * 10;
+          title.textContent = decadeStart + ' - ' + (decadeStart + 9);
+          prevBtn.addEventListener('click', () => { viewYear -= 10; render(); });
+          nextBtn.addEventListener('click', () => { viewYear += 10; render(); });
+        }
+
+        header.appendChild(prevBtn);
+        header.appendChild(title);
+        header.appendChild(nextBtn);
+        popup.appendChild(header);
+
+        if (viewMode === 'days') {
+          // Weekday headers
+          const weekdays = document.createElement('div');
+          weekdays.className = 'vd-datepicker-weekdays';
+          DAYS.forEach(d => {
+            const span = document.createElement('span');
+            span.textContent = d;
+            weekdays.appendChild(span);
+          });
+          popup.appendChild(weekdays);
+
+          // Days grid
+          const grid = document.createElement('div');
+          grid.className = 'vd-datepicker-days';
+
+          const firstDay = new Date(viewYear, viewMonth, 1).getDay();
+          const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+          const daysInPrev = new Date(viewYear, viewMonth, 0).getDate();
+
+          // Previous month padding
+          for (let i = firstDay - 1; i >= 0; i--) {
+            const btn = createDayBtn(daysInPrev - i, true);
+            grid.appendChild(btn);
+          }
+
+          // Current month
+          for (let d = 1; d <= daysInMonth; d++) {
+            const date = new Date(viewYear, viewMonth, d);
+            const btn = createDayBtn(d, false, date);
+            grid.appendChild(btn);
+          }
+
+          // Next month padding
+          const totalCells = firstDay + daysInMonth;
+          const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);
+          for (let i = 1; i <= remaining; i++) {
+            const btn = createDayBtn(i, true);
+            grid.appendChild(btn);
+          }
+
+          popup.appendChild(grid);
+        } else if (viewMode === 'months') {
+          const grid = document.createElement('div');
+          grid.className = 'vd-datepicker-months';
+          MONTHS.forEach((name, i) => {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'vd-datepicker-month-btn';
+            btn.textContent = name.slice(0, 3);
+            if (selectedDate && selectedDate.getFullYear() === viewYear && selectedDate.getMonth() === i) {
+              btn.classList.add('is-selected');
+            }
+            btn.addEventListener('click', () => { viewMonth = i; viewMode = 'days'; render(); });
+            grid.appendChild(btn);
+          });
+          popup.appendChild(grid);
+        } else {
+          const grid = document.createElement('div');
+          grid.className = 'vd-datepicker-years';
+          const decadeStart = Math.floor(viewYear / 10) * 10;
+          for (let y = decadeStart - 1; y <= decadeStart + 10; y++) {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'vd-datepicker-year-btn';
+            btn.textContent = y;
+            if (selectedDate && selectedDate.getFullYear() === y) btn.classList.add('is-selected');
+            if (y < decadeStart || y > decadeStart + 9) btn.style.opacity = '0.4';
+            btn.addEventListener('click', () => { viewYear = y; viewMode = 'months'; render(); });
+            grid.appendChild(btn);
+          }
+          popup.appendChild(grid);
+        }
+      };
+
+      const createDayBtn = (day, outside, date) => {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'vd-datepicker-day';
+        btn.textContent = day;
+
+        if (outside) {
+          btn.classList.add('is-outside');
+          btn.tabIndex = -1;
+          return btn;
+        }
+
+        if (date && isSameDay(date, today)) btn.classList.add('is-today');
+        if (date && isSameDay(date, selectedDate)) btn.classList.add('is-selected');
+        if (date && isDisabled(date)) {
+          btn.classList.add('is-disabled');
+          return btn;
+        }
+
+        if (date) {
+          btn.addEventListener('click', () => {
+            selectedDate = date;
+            viewYear = date.getFullYear();
+            viewMonth = date.getMonth();
+            input.value = formatDate(date);
+            close();
+            input.dispatchEvent(new CustomEvent('datepicker:select', {
+              detail: { date, formatted: input.value },
+              bubbles: true
+            }));
+            input.dispatchEvent(new Event('change', { bubbles: true }));
+          });
+        }
+
+        return btn;
+      };
+
+      const open = () => {
+        render();
+        popup.classList.add('is-open');
+        input.setAttribute('aria-expanded', 'true');
+      };
+
+      const close = () => {
+        popup.classList.remove('is-open');
+        input.setAttribute('aria-expanded', 'false');
+        viewMode = 'days';
+      };
+
+      // Events
+      const focusHandler = () => open();
+      const outsideHandler = (e) => {
+        if (!wrapper.contains(e.target)) close();
+      };
+      const escHandler = (e) => { if (e.key === 'Escape') close(); };
+
+      input.addEventListener('focus', focusHandler);
+      document.addEventListener('click', outsideHandler, true);
+      document.addEventListener('keydown', escHandler);
+      input.setAttribute('aria-haspopup', 'dialog');
+      input.setAttribute('aria-expanded', 'false');
+      input.setAttribute('autocomplete', 'off');
+
+      cleanup.push(
+        () => input.removeEventListener('focus', focusHandler),
+        () => document.removeEventListener('click', outsideHandler, true),
+        () => document.removeEventListener('keydown', escHandler)
+      );
+
+      this.instances.set(input, { cleanup, open, close, popup });
+    },
+
+    destroy: function (el) {
+      const instance = this.instances.get(el);
+      if (!instance) return;
+      instance.cleanup.forEach(fn => fn());
+      this.instances.delete(el);
+    },
+
+    destroyAll: function () {
+      this.instances.forEach((_, el) => this.destroy(el));
+    }
+  };
+
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('datepicker', Datepicker);
+  }
+
+  window.VanduoDatepicker = Datepicker;
+
+})();