stimeo-ui 0.16.0 → 0.17.0

data/dist/controllers/filter_controller.js

@@ -1,6 +1,69 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/filter_controller.ts
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  constructor(run) {
+    this.#run = run;
+  }
+  activate() {
+    this.#active = true;
+  }
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
 var FilterController = class extends Controller {
   static targets = ["item", "control", "group", "empty"];
   static values = { match: { type: String, default: "all" } };
@@ -9,55 +72,28 @@ var FilterController = class extends Controller {
   #onChange = () => {
     this.apply();
   };
-  /**
-   * The outcome the last `change` reported, which the next evaluation is compared
-   * with; `null` until the first evaluation after `connect()`, which reports
-   * whatever it finds.
-   */
   #reported = null;
-  /**
-   * Gates the declaration callback to the connected window.
-   *
-   * Stimulus delivers a Value callback ahead of `connect()` and again for every
-   * runtime change; without the gate, merely connecting would emit an evaluation
-   * — and its `change` — before `connect()` runs its own.
-   */
   #connected = false;
+  #morphRender = new MorphRenderWatcher(() => this.#evaluate());
   connect() {
+    this.#morphRender.observe(this.element);
     this.#reported = null;
     this.#evaluate();
     this.element.addEventListener("change", this.#onChange);
     this.#connected = true;
   }
   disconnect() {
+    this.#morphRender.disconnect();
     this.#connected = false;
     this.element.removeEventListener("change", this.#onChange);
   }
-  /**
-   * Re-evaluates when the match declaration changes at runtime.
-   *
-   * The declaration decides which items are shown, so an element kept across a
-   * morph — where `connect()` does not run again — still has to follow it instead
-   * of waiting for the next control interaction. The evaluation is the ordinary
-   * one, `change` included: a declaration swap is an evaluation like any other.
-   */
   matchValueChanged() {
     if (!this.#connected) return;
     this.#evaluate();
   }
-  /** Re-derives every item's visibility from the active tokens and syncs groups/empty. */
   apply() {
     this.#evaluate();
   }
-  /**
-   * The evaluation itself: every item's visibility from the active tokens, then
-   * the groups and the empty element, then `change` when the outcome moved from
-   * the one last reported. Several triggers can land on the same outcome — a
-   * `clear` evaluates, and a toggle group wired to `apply` reports the presses it
-   * turned off — so an evaluation that changes nothing reports nothing.
-   *
-   * @stimeoRenderRoot
-   */
   #evaluate() {
     const active = this.#activeTokens();
     let visibleCount = 0;
@@ -80,7 +116,6 @@ var FilterController = class extends Controller {
     this.#reported = { active, visibleCount, total };
     this.dispatch("change", { detail: { active: [...active], visibleCount, total } });
   }
-  /** Turns every control off (uncheck / aria-pressed="false") and re-applies. */
   clear() {
     for (const control of this.controlTargets) {
       if (control instanceof HTMLInputElement) {
@@ -91,7 +126,6 @@ var FilterController = class extends Controller {
     }
     this.apply();
   }
-  /** The tokens of every control currently "on" (checked or aria-pressed="true"). */
   #activeTokens() {
     const tokens = [];
     for (const control of this.controlTargets) {
@@ -99,33 +133,27 @@ var FilterController = class extends Controller {
     }
     return tokens.filter(Boolean);
   }
-  /** Whether a control is in its "on" state. */
   #isOn(control) {
     if (control instanceof HTMLInputElement) return control.checked;
     return control.getAttribute("aria-pressed") === "true";
   }
-  /** A control's token: explicit `data-stimeo--filter-token`, else `data-value` / value. */
   #tokenOf(control) {
     const explicit = control.getAttribute(`data-${this.identifier}-token`) ?? control.dataset.value;
     if (explicit) return explicit;
     return control instanceof HTMLInputElement ? control.value : "";
   }
-  /** Whether an item satisfies the active token set per `match` (empty active → shown). */
   #matches(item, active) {
     if (active.length === 0) return true;
     const tokens = this.#tokensOf(item);
     return this.matchValue === "any" ? active.some((token) => tokens.includes(token)) : active.every((token) => tokens.includes(token));
   }
-  /** An item's declared tokens (`data-stimeo--filter-tokens`, space-separated). */
   #tokensOf(item) {
     return (item.getAttribute(`data-${this.identifier}-tokens`) ?? "").split(/\s+/).filter(Boolean);
   }
-  /** Whether a group still contains at least one non-hidden item. */
   #hasVisibleItem(group) {
     return this.itemTargets.some((item) => !item.hidden && group.contains(item));
   }
 };
 
 export { FilterController };
-//# sourceMappingURL=filter_controller.js.map
 //# sourceMappingURL=filter_controller.js.map