@colletdev/core 0.1.3

package/src/elements/date_picker.js

@@ -0,0 +1,528 @@
+// Custom behavior for <cx-date-picker> — calendar panel, date selection, keyboard nav.
+//
+// The Rust component renders:
+//   <div part="base" data-date-picker="{id}">
+//     <input data-date-picker-input role="combobox" aria-haspopup="dialog">
+//     <button data-date-picker-trigger aria-label="Choose date">
+//     <button data-date-picker-step-up> / <button data-date-picker-step-down>
+//   <div data-floating data-date-picker-panel role="dialog">
+//     <button data-date-picker-prev> / <button data-date-picker-next>
+//     <div data-date-picker-heading aria-live="polite">
+//     <div role="grid" data-date-picker-grid>
+//       <button role="gridcell" data-date="YYYY-MM-DD">
+//     <button data-date-picker-today>
+//
+// This Custom Element wires up:
+//   - Toggle calendar panel via trigger button or input click
+//   - Day selection via click on gridcell
+//   - Month navigation (prev/next buttons)
+//   - Today button shortcut
+//   - Day stepping via up/down buttons
+//   - Full keyboard nav (arrows ±1/7 days, Page ±month, Home/End, Escape)
+//   - Click outside / focus exit to close
+//
+// Source: crates/wasm-api/src/date_picker.rs
+
+let _sheet;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync([
+      // Calendar panel uses position:fixed (set by JS) to escape scroll container clipping.
+      '[data-floating] {',
+      '  z-index: 50;',
+      '}',
+      // Hover for day cells
+      'button[role="gridcell"]:not([aria-disabled="true"]):hover {',
+      '  background-color: var(--color-secondary);',
+      '  cursor: pointer;',
+      '}',
+      // Focus for day cells
+      'button[role="gridcell"]:focus-visible {',
+      '  outline: 2px solid var(--color-ring);',
+      '  outline-offset: -2px;',
+      '  border-radius: 0.25rem;',
+      '}',
+    ].join('\n'));
+  }
+  return _sheet;
+}
+
+// ── Date helpers ──
+
+function todayStr() {
+  const d = new Date();
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+function addDays(isoDate, n) {
+  const d = new Date(isoDate + 'T12:00:00');
+  d.setDate(d.getDate() + n);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+function addMonths(isoDate, n) {
+  const d = new Date(isoDate + 'T12:00:00');
+  d.setMonth(d.getMonth() + n);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+function getMonthYear(isoDate) {
+  return isoDate.substring(0, 7); // "YYYY-MM"
+}
+
+export function defineCxDatePicker(wasmFn, baseClass) {
+  class CxDatePicker extends baseClass {
+    static observedAttributes = ['id', 'label', 'variant', 'shape', 'size', 'selected', 'min', 'max', 'disabled-dates', 'format', 'first-day', 'placeholder', 'helper-text', 'error', 'disabled', 'required', 'readonly', 'name', 'on-change'];
+    static _booleanAttrs = new Set(['disabled', 'required', 'readonly']);
+
+    #outsideClick = null;
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        const sheet = getSheet();
+        if (!shadow.adoptedStyleSheets.includes(sheet)) {
+          shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
+        }
+
+        // ── Click handler ──
+        shadow.addEventListener('click', (e) => {
+          // Calendar trigger button
+          if (e.target.closest('[data-date-picker-trigger]')) {
+            if (!this._props.disabled && !this._props.readonly) {
+              this.#toggle();
+            }
+            return;
+          }
+
+          // Day cell click
+          const cell = e.target.closest('button[role="gridcell"]');
+          if (cell && !cell.hasAttribute('aria-disabled')) {
+            const date = cell.getAttribute('data-date');
+            if (date) this.#selectDate(date);
+            return;
+          }
+
+          // Previous month
+          if (e.target.closest('[data-date-picker-prev]')) {
+            this.#navigateMonth(-1);
+            return;
+          }
+
+          // Next month
+          if (e.target.closest('[data-date-picker-next]')) {
+            this.#navigateMonth(1);
+            return;
+          }
+
+          // Today button
+          if (e.target.closest('[data-date-picker-today]')) {
+            this.#selectDate(todayStr());
+            return;
+          }
+
+          // Step up (+1 day)
+          if (e.target.closest('[data-date-picker-step-up]')) {
+            this.#stepDay(1);
+            return;
+          }
+
+          // Step down (-1 day)
+          if (e.target.closest('[data-date-picker-step-down]')) {
+            this.#stepDay(-1);
+            return;
+          }
+
+          // Input click → open panel
+          const input = e.target.closest('[data-date-picker-input]');
+          if (input && !this.#isOpen() && !this._props.disabled && !this._props.readonly) {
+            this.#open();
+          }
+        });
+
+        // ── Keyboard handler ──
+        shadow.addEventListener('keydown', (e) => this.#handleKey(e));
+
+        // ── Input typing ──
+        shadow.addEventListener('input', (e) => {
+          if (e.target.matches('[data-date-picker-input]')) {
+            this._setFormValue(e.target.value);
+            this._emit('cx-input', { value: e.target.value });
+          }
+        });
+
+        // ── Click outside → close ──
+        this.#outsideClick = (e) => {
+          if (this.#isOpen() && !this.contains(e.target) && !this._shadow.contains(e.target)) {
+            this.#close();
+          }
+        };
+        document.addEventListener('mousedown', this.#outsideClick);
+
+        // ── Focus exit → close ──
+        // Must check both light DOM and shadow DOM — Node.contains() doesn't cross shadow boundaries.
+        shadow.addEventListener('focusout', () => {
+          setTimeout(() => {
+            if (this.#isOpen()) {
+              const active = shadow.activeElement || document.activeElement;
+              if (!this.contains(active) && !this._shadow.contains(active) && active !== this) {
+                this.#close();
+              }
+            }
+          }, 0);
+        });
+
+        // Forward focus events from inner interactive elements
+        shadow.addEventListener('focusin', (e) => {
+          this._emit('cx-focus', { relatedTarget: e.relatedTarget });
+        });
+        shadow.addEventListener('focusout', (e) => {
+          this._emit('cx-blur', { relatedTarget: e.relatedTarget });
+        });
+
+        // Forward keyboard events from inner interactive elements
+        shadow.addEventListener('keydown', (e) => {
+          this._emit('cx-keydown', { key: e.key, code: e.code, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey });
+        });
+        shadow.addEventListener('keyup', (e) => {
+          this._emit('cx-keyup', { key: e.key, code: e.code, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey });
+        });
+      } // end _isInitialized guard
+      super.connectedCallback();
+    }
+
+    disconnectedCallback() {
+      if (this.#outsideClick) {
+        document.removeEventListener('mousedown', this.#outsideClick);
+        this.#outsideClick = null;
+      }
+      super.disconnectedCallback();
+    }
+
+    // ── DOM accessors ──
+
+    #getInput() {
+      return this._shadow.querySelector('[data-date-picker-input]');
+    }
+
+    #getPanel() {
+      return this._shadow.querySelector('[data-date-picker-panel]');
+    }
+
+    #getTrigger() {
+      return this._shadow.querySelector('[data-date-picker-trigger]');
+    }
+
+    // ── Panel state ──
+
+    #isOpen() {
+      const panel = this.#getPanel();
+      return panel ? panel.hasAttribute('data-open') : false;
+    }
+
+    #open() {
+      const panel = this.#getPanel();
+      const input = this.#getInput();
+      const trigger = this._shadow.querySelector('button[data-floating-trigger]') || input;
+      if (!panel || this.#isOpen()) return;
+
+      // Position with fixed coordinates — escapes overflow:auto/scroll clipping.
+      if (trigger) this._positionFloatingFixed(trigger, panel);
+
+      panel.setAttribute('data-open', '');
+      panel.classList.remove('hidden');
+      panel.style.display = 'block';
+      panel.style.pointerEvents = 'auto';
+      panel.style.opacity = '1';
+
+      if (input) input.setAttribute('aria-expanded', 'true');
+
+      // Focus the active gridcell
+      requestAnimationFrame(() => {
+        const active = panel.querySelector('button[role="gridcell"][tabindex="0"]');
+        if (active) active.focus();
+      });
+    }
+
+    #close() {
+      const panel = this.#getPanel();
+      const input = this.#getInput();
+      if (!panel) return;
+
+      panel.removeAttribute('data-open');
+      panel.classList.add('hidden');
+      panel.style.display = '';
+      panel.style.pointerEvents = '';
+      panel.style.opacity = '';
+      this._resetFloatingFixed(panel);
+
+      if (input) {
+        input.setAttribute('aria-expanded', 'false');
+        input.focus();
+      }
+    }
+
+    #toggle() {
+      if (this.#isOpen()) this.#close();
+      else this.#open();
+    }
+
+    // ── Date selection ──
+
+    #selectDate(isoDate) {
+      this._props.selected = isoDate;
+
+      // Update input value
+      const input = this.#getInput();
+      if (input) {
+        input.value = isoDate;
+        this._setFormValue(isoDate);
+      }
+
+      this._emit('cx-change', { value: isoDate });
+      this.#close();
+
+      // Re-render to show updated calendar state
+      this._scheduleRender();
+    }
+
+    // ── Day stepping ──
+
+    #stepDay(delta) {
+      const current = this._props.selected;
+      if (!current) return;
+      const newDate = addDays(current, delta);
+      this._props.selected = newDate;
+
+      const input = this.#getInput();
+      if (input) {
+        input.value = newDate;
+        this._setFormValue(newDate);
+      }
+
+      this._emit('cx-change', { value: newDate });
+      this._scheduleRender();
+    }
+
+    // ── Month navigation ──
+
+    #navigateMonth(delta) {
+      // Find current viewing month from heading or selected date
+      const heading = this._shadow.querySelector('[data-date-picker-heading]');
+      const grid = this._shadow.querySelector('[data-date-picker-grid]');
+      if (!grid) return;
+
+      // Find a date in the current month from the grid
+      const firstCell = grid.querySelector('button[role="gridcell"]:not([aria-disabled="true"])');
+      if (!firstCell) return;
+
+      const currentDate = firstCell.getAttribute('data-date');
+      if (!currentDate) return;
+
+      const newMonthDate = addMonths(currentDate, delta);
+      const newMonth = getMonthYear(newMonthDate);
+
+      // Re-render with the new viewing month by updating a prop
+      // The WASM will render the correct month when we set selected or use viewing
+      this._props._viewing = newMonth;
+      this._scheduleRender();
+
+      // After re-render, focus first active cell
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const panel = this.#getPanel();
+          if (panel && this.#isOpen()) {
+            // Restore open state after re-render
+            panel.setAttribute('data-open', '');
+            panel.classList.remove('hidden');
+            panel.style.display = 'block';
+            panel.style.pointerEvents = 'auto';
+            panel.style.opacity = '1';
+
+            const active = panel.querySelector('button[role="gridcell"][tabindex="0"]');
+            if (active) active.focus();
+          }
+        });
+      });
+    }
+
+    // ── Keyboard navigation ──
+
+    #handleKey(e) {
+      const input = this.#getInput();
+
+      // Input keyboard
+      if (e.target === input || e.target?.matches?.('[data-date-picker-input]')) {
+        if (e.key === 'ArrowDown' && !this.#isOpen()) {
+          e.preventDefault();
+          this.#open();
+          return;
+        }
+        if (e.key === 'Escape' && this.#isOpen()) {
+          e.preventDefault();
+          this.#close();
+          return;
+        }
+        if (e.key === 'Enter') {
+          // Try to parse typed date
+          const val = input?.value?.trim();
+          if (val && /^\d{4}-\d{2}-\d{2}$/.test(val)) {
+            e.preventDefault();
+            this.#selectDate(val);
+          }
+          return;
+        }
+        return;
+      }
+
+      // Grid cell keyboard
+      const cell = e.target?.closest?.('button[role="gridcell"]');
+      if (!cell) {
+        // Escape from anywhere in panel
+        if (e.key === 'Escape' && this.#isOpen()) {
+          e.preventDefault();
+          this.#close();
+        }
+        return;
+      }
+
+      const date = cell.getAttribute('data-date');
+      if (!date) return;
+
+      let targetDate = null;
+
+      switch (e.key) {
+        case 'ArrowRight':
+          e.preventDefault();
+          targetDate = addDays(date, 1);
+          break;
+        case 'ArrowLeft':
+          e.preventDefault();
+          targetDate = addDays(date, -1);
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          targetDate = addDays(date, 7);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          targetDate = addDays(date, -7);
+          break;
+        case 'PageDown':
+          e.preventDefault();
+          targetDate = addMonths(date, e.shiftKey ? 12 : 1);
+          break;
+        case 'PageUp':
+          e.preventDefault();
+          targetDate = addMonths(date, e.shiftKey ? -12 : -1);
+          break;
+        case 'Home':
+          e.preventDefault();
+          targetDate = date.substring(0, 8) + '01';
+          break;
+        case 'End': {
+          e.preventDefault();
+          const d = new Date(date + 'T12:00:00');
+          d.setMonth(d.getMonth() + 1, 0);
+          targetDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+          break;
+        }
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          if (!cell.hasAttribute('aria-disabled')) {
+            this.#selectDate(date);
+          }
+          return;
+        case 'Escape':
+          e.preventDefault();
+          this.#close();
+          return;
+        case 'Tab':
+          this.#close();
+          return;
+      }
+
+      if (targetDate) {
+        // Try to find the target cell in current grid
+        const target = this._shadow.querySelector(`button[data-date="${targetDate}"]`);
+        if (target && !target.hasAttribute('aria-disabled')) {
+          // Same month — just move focus
+          this.#setGridFocus(target);
+        } else {
+          // Different month — navigate and focus after re-render
+          const targetMonth = getMonthYear(targetDate);
+          this._props._viewing = targetMonth;
+          this._props._focus_date = targetDate;
+          this._scheduleRender();
+
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              const panel = this.#getPanel();
+              if (panel) {
+                panel.setAttribute('data-open', '');
+                panel.classList.remove('hidden');
+                panel.style.display = 'block';
+                panel.style.pointerEvents = 'auto';
+                panel.style.opacity = '1';
+
+                const tc = this._shadow.querySelector(`button[data-date="${targetDate}"]`);
+                if (tc) this.#setGridFocus(tc);
+              }
+            });
+          });
+        }
+      }
+    }
+
+    #setGridFocus(cell) {
+      // Reset all cells to tabindex -1
+      this._shadow.querySelectorAll('button[role="gridcell"]').forEach(c => {
+        c.setAttribute('tabindex', '-1');
+      });
+      cell.setAttribute('tabindex', '0');
+      cell.focus();
+    }
+
+    // ── Public imperative API ──
+    open() { this.#open(); }
+    close() { this.#close(); }
+    focus() { const el = this._shadow.querySelector('button[data-floating-trigger]'); if (el) el.focus(); else super.focus(); }
+
+    // ── Render ──
+
+    _doRender() {
+      try {
+        const wasOpen = this.#isOpen();
+
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        const sheet = getSheet();
+        if (!this._shadow.adoptedStyleSheets.includes(sheet)) {
+          this._shadow.adoptedStyleSheets = [...this._shadow.adoptedStyleSheets, sheet];
+        }
+
+        // Sync form value
+        const input = this.#getInput();
+        if (input) {
+          if (this._props.selected) input.value = this._props.selected;
+          this._setFormValue(input.value || '');
+        }
+
+        // Restore open state
+        if (wasOpen) {
+          this.#open();
+        }
+      } catch (e) {
+        console.error('[cx-date-picker]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-date-picker', CxDatePicker);
+  return CxDatePicker;
+}

package/src/elements/dialog.d.ts

@@ -0,0 +1,20 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/dialog.rs
+
+export interface CxDialogAttributes {
+    id?: string;
+    title?: string;
+    variant?: 'standard' | 'alert';
+    description?: string;
+    body?: string;
+    footer?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    closeButton?: string;
+    drawer?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-dialog': HTMLElement & CxDialogAttributes;
+  }
+}