stimeo-ui 0.2.0 → 0.2.1

data/dist/controllers/count_up_controller.js

@@ -1,5 +1,12 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/count_up_controller.ts
+
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 // src/controllers/count_up_controller.ts
 var CountUpController = class extends Controller {
   static values = {
@@ -32,7 +39,7 @@ var CountUpController = class extends Controller {
     this.#finalText = this.element.textContent ?? "";
     const target = Number.parseInt(this.#finalText.replace(/[^0-9-]/g, ""), 10);
     if (Number.isNaN(target)) return;
-    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+    if (prefersReducedMotion()) {
       this.element.setAttribute("data-count-up-done", "true");
       this.dispatch("end", { detail: { value: target } });
       return;

data/dist/controllers/currency_input_controller.js

@@ -0,0 +1,147 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/currency_input_controller.ts
+var CurrencyInputController = class extends Controller {
+  static targets = ["display", "field", "srValue"];
+  static values = {
+    locale: { type: String, default: "en-US" },
+    currency: { type: String, default: "" },
+    precision: { type: Number, default: 2 }
+  };
+  static actions = ["format", "onInput"];
+  static events = ["change"];
+  /** Last committed numeric value, to suppress duplicate `change` dispatches. */
+  #lastValue = null;
+  /** Normalizes any pre-filled display value to its fixed-precision form. */
+  connect() {
+    if (!this.hasDisplayTarget) return;
+    const parsed = this.#parse(this.displayTarget.value);
+    this.#lastValue = parsed === null ? null : round(parsed, this.precisionValue);
+    if (this.displayTarget.value.trim() !== "") {
+      this.#reformat(true);
+    } else {
+      this.#reflect(null, "");
+    }
+  }
+  /** Re-groups digits as the user types, preserving the caret position. */
+  onInput() {
+    this.#reformat(false);
+  }
+  /** Applies the fixed-precision rounding on blur. */
+  format() {
+    this.#reformat(true);
+  }
+  /**
+   * Parses the display value, rewrites it grouped (optionally at fixed
+   * precision), keeps the caret stable by digit count, and syncs the field,
+   * the screen-reader span, and the `change` event.
+   */
+  #reformat(fixedPrecision) {
+    if (!this.hasDisplayTarget) return;
+    const raw = this.displayTarget.value;
+    const number = this.#parse(raw);
+    if (number === null) {
+      this.displayTarget.value = "";
+      this.#reflect(null, "");
+      return;
+    }
+    const value = fixedPrecision ? round(number, this.precisionValue) : number;
+    const caret = this.displayTarget.selectionStart;
+    const digitsBeforeCaret = typeof caret === "number" ? countDigits(raw.slice(0, caret)) : null;
+    const formatted = this.#formatNumber(value, fixedPrecision);
+    this.displayTarget.value = formatted;
+    if (digitsBeforeCaret !== null) this.#restoreCaret(formatted, digitsBeforeCaret);
+    this.#reflect(value, formatted);
+  }
+  /** Restores the caret to sit just after the n-th digit of the new string. */
+  #restoreCaret(formatted, digitsBefore) {
+    let seen = 0;
+    let position = formatted.length;
+    for (let i = 0; i < formatted.length; i++) {
+      if (seen >= digitsBefore) {
+        position = i;
+        break;
+      }
+      if (/\d/.test(formatted[i])) seen += 1;
+    }
+    try {
+      this.displayTarget.setSelectionRange(position, position);
+    } catch {
+    }
+  }
+  /** Writes the normalized value to the field, the SR span, and `change`. */
+  #reflect(value, formatted) {
+    const isEmpty = value === null;
+    if (this.hasFieldTarget) this.fieldTarget.value = isEmpty ? "" : String(value);
+    if (this.hasSrValueTarget) {
+      this.srValueTarget.textContent = isEmpty ? "" : this.#accessibleText(value);
+    }
+    this.element.toggleAttribute("data-stimeo--currency-input-empty", isEmpty);
+    if (value !== this.#lastValue) {
+      this.#lastValue = value;
+      if (!isEmpty) this.dispatch("change", { detail: { value, formatted } });
+    }
+  }
+  /** Parses arbitrary input text into a finite number, or `null` when blank. */
+  #parse(text) {
+    if (text.trim() === "") return null;
+    const { decimal } = this.#separators();
+    let cleaned = "";
+    let sawDot = false;
+    for (let i = 0; i < text.length; i++) {
+      const ch = text[i];
+      if (ch >= "0" && ch <= "9") cleaned += ch;
+      else if ((ch === "-" || ch === "+") && cleaned === "") cleaned += ch;
+      else if ((ch === decimal || ch === ".") && !sawDot) {
+        cleaned += ".";
+        sawDot = true;
+      }
+    }
+    if (cleaned === "" || cleaned === "-" || cleaned === "+" || cleaned === ".") return null;
+    const value = Number(cleaned);
+    return Number.isFinite(value) ? value : null;
+  }
+  /** Formats a number with grouping for the display field. */
+  #formatNumber(value, fixedPrecision) {
+    const formatter = new Intl.NumberFormat(this.localeValue, {
+      useGrouping: true,
+      minimumFractionDigits: fixedPrecision ? this.precisionValue : 0,
+      maximumFractionDigits: this.precisionValue
+    });
+    return formatter.format(value);
+  }
+  /** The text announced to assistive tech (currency-aware when configured). */
+  #accessibleText(value) {
+    if (this.currencyValue) {
+      return new Intl.NumberFormat(this.localeValue, {
+        style: "currency",
+        currency: this.currencyValue
+      }).format(value);
+    }
+    return new Intl.NumberFormat(this.localeValue, {
+      minimumFractionDigits: this.precisionValue,
+      maximumFractionDigits: this.precisionValue
+    }).format(value);
+  }
+  /** Resolves the locale's grouping and decimal separator characters. */
+  #separators() {
+    const parts = new Intl.NumberFormat(this.localeValue).formatToParts(11111.1);
+    const group = parts.find((p) => p.type === "group")?.value ?? ",";
+    const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+    return { group, decimal };
+  }
+};
+function countDigits(text) {
+  let count = 0;
+  for (const ch of text) if (ch >= "0" && ch <= "9") count += 1;
+  return count;
+}
+function round(value, precision) {
+  const factor = 10 ** Math.max(0, precision);
+  const rounded = Math.round(value * factor) / factor;
+  return rounded === 0 ? 0 : rounded;
+}
+
+export { CurrencyInputController };
+//# sourceMappingURL=currency_input_controller.js.map
+//# sourceMappingURL=currency_input_controller.js.map

data/dist/controllers/data_grid_controller.js

@@ -0,0 +1,168 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/data_grid_controller.ts
+var SORT_CYCLE = ["none", "ascending", "descending"];
+function nextSortDirection(current) {
+  const index = SORT_CYCLE.indexOf(current);
+  const from = index < 0 ? 0 : index;
+  return SORT_CYCLE[(from + 1) % SORT_CYCLE.length] ?? "ascending";
+}
+var DataGridController = class extends Controller {
+  static targets = ["columnHeader", "row", "cell"];
+  static values = {
+    selection: { type: String, default: "none" }
+  };
+  static actions = ["onKeydown", "sort", "toggleSelect"];
+  static events = ["selectionchange", "sort"];
+  /** Establishes a single tab stop across all navigable cells/headers. */
+  connect() {
+    const cells = this.#navigableCells();
+    const active = cells.find((cell) => cell.tabIndex === 0) ?? cells[0];
+    this.#setActiveCell(active, { focus: false });
+  }
+  /**
+   * Keeps `aria-multiselectable` in step with the `selection` Value. Fires on connect
+   * (so it self-heals after a Turbo morph) and on any runtime change, so the ARIA
+   * never drifts from the selection logic, which reads `selectionValue` live.
+   */
+  selectionValueChanged() {
+    this.#syncSelectable();
+  }
+  /**
+   * Mirrors `selection="multiple"` onto `aria-multiselectable` (APG Grid) so SRs
+   * announce that more than one row can be selected; cleared for single/none so a
+   * grid never carries a misleading attribute.
+   */
+  #syncSelectable() {
+    if (this.selectionValue === "multiple") {
+      this.element.setAttribute("aria-multiselectable", "true");
+    } else {
+      this.element.removeAttribute("aria-multiselectable");
+    }
+  }
+  /** Cycles the activated column header's sort and emits `sort`. */
+  sort(event) {
+    const header = event.currentTarget;
+    if (!this.columnHeaderTargets.includes(header)) return;
+    const direction = nextSortDirection(header.getAttribute("aria-sort") ?? "none");
+    for (const other of this.columnHeaderTargets) {
+      other.setAttribute("aria-sort", other === header ? direction : "none");
+    }
+    this.#setActiveCell(header, { focus: false });
+    this.dispatch("sort", { detail: { column: header, direction } });
+  }
+  /** Toggles selection of the row owning the event target. Bound optionally. */
+  toggleSelect(event) {
+    const row = event.currentTarget.closest("[role='row']");
+    if (row && this.rowTargets.includes(row)) this.#toggleRow(row);
+  }
+  /** Grid navigation + sort/select activation. Bound to cells and headers. */
+  onKeydown(event) {
+    const cell = event.currentTarget;
+    const matrix = this.#matrix();
+    const position = this.#locate(matrix, cell);
+    if (!position) return;
+    const [row, col] = position;
+    const rowCells = matrix[row] ?? [];
+    let target;
+    switch (event.key) {
+      case "ArrowRight":
+        target = this.#cellInRow(matrix, row, col + 1);
+        break;
+      case "ArrowLeft":
+        target = this.#cellInRow(matrix, row, Math.max(col - 1, 0));
+        break;
+      case "ArrowDown":
+        target = this.#cellInRow(matrix, Math.min(row + 1, matrix.length - 1), col);
+        break;
+      case "ArrowUp":
+        target = this.#cellInRow(matrix, Math.max(row - 1, 0), col);
+        break;
+      case "Home":
+        target = event.ctrlKey ? this.#cellInRow(matrix, 0, 0) : rowCells[0];
+        break;
+      case "End":
+        target = event.ctrlKey ? this.#cellInRow(matrix, matrix.length - 1, Number.POSITIVE_INFINITY) : rowCells[rowCells.length - 1];
+        break;
+      case "Enter":
+      case " ":
+        this.#activate(cell);
+        event.preventDefault();
+        return;
+      default:
+        return;
+    }
+    if (target) {
+      event.preventDefault();
+      this.#setActiveCell(target, { focus: true });
+    }
+  }
+  /** Performs a header's sort or a cell row's selection toggle on activation. */
+  #activate(cell) {
+    if (this.columnHeaderTargets.includes(cell)) {
+      this.#cycleSort(cell);
+      return;
+    }
+    if (this.selectionValue === "none") return;
+    const row = cell.closest("[role='row']");
+    if (row && this.rowTargets.includes(row)) this.#toggleRow(row);
+  }
+  /** Shared sort logic for both click and keyboard activation. */
+  #cycleSort(header) {
+    const direction = nextSortDirection(header.getAttribute("aria-sort") ?? "none");
+    for (const other of this.columnHeaderTargets) {
+      other.setAttribute("aria-sort", other === header ? direction : "none");
+    }
+    this.dispatch("sort", { detail: { column: header, direction } });
+  }
+  /** Toggles a row's `aria-selected`, honoring single vs. multiple selection. */
+  #toggleRow(row) {
+    const selected = row.getAttribute("aria-selected") === "true";
+    if (this.selectionValue === "single" && !selected) {
+      for (const other of this.rowTargets) other.setAttribute("aria-selected", "false");
+    }
+    row.setAttribute("aria-selected", selected ? "false" : "true");
+    const rows = this.rowTargets.filter((r) => r.getAttribute("aria-selected") === "true");
+    this.dispatch("selectionchange", { detail: { rows } });
+  }
+  /** Makes `cell` the single tabbable cell (roving) and optionally focuses it. */
+  #setActiveCell(cell, { focus }) {
+    if (!cell) return;
+    for (const candidate of this.#navigableCells()) {
+      candidate.tabIndex = candidate === cell ? 0 : -1;
+    }
+    if (focus) cell.focus();
+  }
+  /** All navigable elements (headers + cells) in DOM order. */
+  #navigableCells() {
+    return this.#matrix().flat();
+  }
+  /** The grid as rows of navigable cells, derived from each `role="row"`. */
+  #matrix() {
+    const navigable = /* @__PURE__ */ new Set([...this.columnHeaderTargets, ...this.cellTargets]);
+    const rows = Array.from(this.element.querySelectorAll("[role='row']"));
+    return rows.map(
+      (row) => Array.from(row.children).filter(
+        (child) => navigable.has(child)
+      )
+    ).filter((cells) => cells.length > 0);
+  }
+  /** Finds `[rowIndex, colIndex]` of `cell` within `matrix`, or null. */
+  #locate(matrix, cell) {
+    for (let row = 0; row < matrix.length; row++) {
+      const col = (matrix[row] ?? []).indexOf(cell);
+      if (col !== -1) return [row, col];
+    }
+    return null;
+  }
+  /** The cell at `[row, col]`, clamping `col` to that row's last cell. */
+  #cellInRow(matrix, row, col) {
+    const cells = matrix[row];
+    if (!cells || cells.length === 0) return void 0;
+    return cells[Math.min(col, cells.length - 1)];
+  }
+};
+
+export { DataGridController };
+//# sourceMappingURL=data_grid_controller.js.map
+//# sourceMappingURL=data_grid_controller.js.map