@unabridged/midwest 0.15.0 → 0.16.0

package/app/assets/javascript/midwest/index.ts

@@ -17,6 +17,7 @@ import AvatarGroup from '../../../components/midwest/avatar_group_component/avat
 import Chart from '../../../components/midwest/chart_component/chart_component_controller'
 import Range from '../../../components/midwest/form/range_component/range_component_controller'
 import Rating from '../../../components/midwest/rating_component/rating_component_controller'
+import Autocomplete from '../../../components/midwest/form/autocomplete_component/autocomplete_component_controller'
 /* IMPORTS */
 
 export { Card, Banner, CountdownTimer, Chart }
@@ -41,5 +42,6 @@ export function registerMidwestControllers (application: any) {
   application.register('midwest-chart', Chart)
   application.register('midwest-range', Range)
   application.register('midwest-rating', Rating)
+  application.register('midwest-autocomplete', Autocomplete)
   /* EXPORTS */
 }

package/app/assets/javascript/midwest.js

@@ -549,17 +549,23 @@ class Banner extends Controller {
 }
 
 class Input extends Controller {
-  static targets = ["input"];
+  static targets = ["input", "counter"];
   updateClearButton = null;
+  updateCounter = null;
   connect() {
     this.applyColor();
     this.applySearchClear();
+    this.applyCounter();
   }
   disconnect() {
     if (this.updateClearButton) {
       this.inputTarget.removeEventListener("input", this.updateClearButton);
       this.updateClearButton = null;
     }
+    if (this.updateCounter) {
+      this.inputTarget.removeEventListener("input", this.updateCounter);
+      this.updateCounter = null;
+    }
   }
   applyColor() {
     if (this.inputTarget.type !== "color") {
@@ -569,6 +575,15 @@ class Input extends Controller {
       this.inputTarget.setAttribute("value", this.inputTarget.value);
     });
   }
+  applyCounter() {
+    if (!this.hasCounterTarget)
+      return;
+    this.counterTarget.textContent = String(this.inputTarget.value.length);
+    this.updateCounter = () => {
+      this.counterTarget.textContent = String(this.inputTarget.value.length);
+    };
+    this.inputTarget.addEventListener("input", this.updateCounter);
+  }
   applySearchClear() {
     if (this.inputTarget.type !== "search")
       return;
@@ -3804,6 +3819,264 @@ class Rating extends Controller {
   }
 }
 
+class Autocomplete extends Controller {
+  static targets = ["input", "dropdown", "list", "tokens", "token", "multipleTokenTemplate", "singleTokenTemplate", "status"];
+  static values = {
+    options: { type: Array, default: [] },
+    url: { type: String, default: "" },
+    multiple: { type: Boolean, default: true }
+  };
+  selectedValues = /* @__PURE__ */ new Map();
+  highlightedIndex = -1;
+  fetchAbort = null;
+  connect() {
+    this.loadInitialTokens();
+  }
+  disconnect() {
+    this.fetchAbort?.abort();
+  }
+  // ── Public actions ─────────────────────────────────────────────────────────
+  focusInput() {
+    this.inputTarget.focus();
+    this.open();
+  }
+  open() {
+    if (this.dropdownTarget.matches(":popover-open"))
+      return;
+    const query = this.inputTarget.value.trim();
+    if (this.urlValue) {
+      this.fetch(query);
+    } else {
+      this.renderOptions(this.filteredOptions(query));
+    }
+  }
+  async search() {
+    const query = this.inputTarget.value.trim();
+    if (this.urlValue) {
+      await this.fetch(query);
+    } else {
+      this.renderOptions(this.filteredOptions(query));
+    }
+    this.showDropdown();
+  }
+  navigate(event) {
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        if (!this.dropdownTarget.matches(":popover-open"))
+          this.open();
+        const items = this.visibleOptions();
+        this.highlightedIndex = Math.min(this.highlightedIndex + 1, items.length - 1);
+        this.syncHighlight(items);
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        const items = this.visibleOptions();
+        this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
+        this.syncHighlight(items);
+        break;
+      }
+      case "Enter": {
+        event.preventDefault();
+        const items = this.visibleOptions();
+        if (this.highlightedIndex >= 0 && items[this.highlightedIndex]) {
+          this.pickItem(items[this.highlightedIndex]);
+        }
+        break;
+      }
+      case "Escape":
+        this.hideDropdown();
+        break;
+      case "Backspace":
+        if (this.inputTarget.value === "" && this.multipleValue) {
+          const entries = Array.from(this.selectedValues.keys());
+          if (entries.length > 0)
+            this.deselect(entries[entries.length - 1]);
+        }
+        break;
+    }
+  }
+  visibleOptions() {
+    return this.listTarget.querySelectorAll('.midwest-autocomplete-option:not([aria-selected="true"])');
+  }
+  handleBlur() {
+    setTimeout(() => this.hideDropdown(), 150);
+  }
+  removeToken(event) {
+    event.stopPropagation();
+    const btn = event.currentTarget;
+    const value = btn.dataset.value;
+    if (value)
+      this.deselect(value);
+  }
+  // ── Private ────────────────────────────────────────────────────────────────
+  get optionIdPrefix() {
+    return `ac-opt-${(this.element.dataset.name ?? "field").replace(/\W/g, "-")}`;
+  }
+  loadInitialTokens() {
+    this.tokenTargets.forEach((token) => {
+      const value = token.dataset.value ?? "";
+      const label = token.querySelector(".value")?.textContent?.trim() ?? value;
+      this.selectedValues.set(value, { value, label });
+    });
+  }
+  filteredOptions(query) {
+    const q = query.toLowerCase();
+    return this.optionsValue.filter(
+      (o) => q === "" || o.label.toLowerCase().includes(q) || (o.support?.toLowerCase().includes(q) ?? false)
+    );
+  }
+  async fetch(query) {
+    this.fetchAbort?.abort();
+    this.fetchAbort = new AbortController();
+    this.showLoading();
+    try {
+      const url = new URL(this.urlValue, window.location.href);
+      if (query)
+        url.searchParams.set("q", query);
+      const res = await globalThis.fetch(url.toString(), {
+        signal: this.fetchAbort.signal,
+        headers: { Accept: "application/json" }
+      });
+      const data = await res.json();
+      this.renderOptions(data);
+    } catch (err) {
+      if (err.name !== "AbortError") {
+        this.renderEmpty();
+      }
+    }
+  }
+  select(option) {
+    if (!this.multipleValue) {
+      this.selectedValues.forEach((_, val) => this.removeTokenElement(val));
+      this.selectedValues.clear();
+    }
+    this.selectedValues.set(option.value, option);
+    this.appendToken(option);
+    this.hideDropdown();
+    this.inputTarget.value = "";
+    this.inputTarget.focus();
+    this.announce(`${option.label} selected`);
+    this.dispatch("change", { detail: { value: option.value, label: option.label } });
+  }
+  deselect(value) {
+    const option = this.selectedValues.get(value);
+    this.selectedValues.delete(value);
+    this.removeTokenElement(value);
+    if (option)
+      this.announce(`${option.label} removed`);
+    this.dispatch("change", { detail: { value: null } });
+  }
+  appendToken(option) {
+    const name = this.element.dataset.name ?? "";
+    if (this.multipleValue) {
+      const fragment = this.multipleTokenTemplateTarget.content.cloneNode(true);
+      const badge = fragment.querySelector(".midwest-badge");
+      badge.dataset.value = option.value;
+      badge.querySelector(".value").textContent = option.label;
+      const removeBtn = badge.querySelector(".remove");
+      removeBtn.dataset.value = option.value;
+      removeBtn.setAttribute("aria-label", `Remove ${option.label}`);
+      const input = badge.querySelector("input[type=hidden]");
+      input.name = name;
+      input.value = option.value;
+      this.tokensTarget.appendChild(fragment);
+    } else {
+      this.tokensTarget.querySelectorAll("[data-value]").forEach((el) => el.remove());
+      const fragment = this.singleTokenTemplateTarget.content.cloneNode(true);
+      const badge = fragment.querySelector(".midwest-badge");
+      badge.dataset.value = option.value;
+      badge.querySelector(".value").textContent = option.label;
+      const input = badge.querySelector("input[type=hidden]");
+      input.name = name;
+      input.value = option.value;
+      this.tokensTarget.appendChild(fragment);
+    }
+  }
+  removeTokenElement(value) {
+    const token = this.tokensTarget.querySelector(`[data-value="${CSS.escape(value)}"]`);
+    token?.remove();
+  }
+  renderOptions(options) {
+    this.listTarget.innerHTML = "";
+    this.highlightedIndex = -1;
+    if (options.length === 0) {
+      this.renderEmpty();
+      return;
+    }
+    options.forEach((option, index) => {
+      const li = document.createElement("li");
+      li.id = `${this.optionIdPrefix}-${index}`;
+      li.className = "midwest-autocomplete-option";
+      li.setAttribute("role", "option");
+      li.setAttribute("aria-selected", this.selectedValues.has(option.value) ? "true" : "false");
+      li.dataset.value = option.value;
+      li.innerHTML = `
+        <span class="midwest-autocomplete-option-label">${this.escapeHtml(option.label)}</span>
+        ${option.support ? `<span class="midwest-autocomplete-option-support">${this.escapeHtml(option.support)}</span>` : ""}
+      `;
+      li.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        this.select(option);
+      });
+      this.listTarget.appendChild(li);
+    });
+    const availableCount = options.filter((o) => !this.selectedValues.has(o.value)).length;
+    if (availableCount === 0) {
+      this.renderEmpty("No more options");
+      return;
+    }
+    this.announce(`${availableCount} option${availableCount === 1 ? "" : "s"} available`);
+    this.showDropdown();
+  }
+  renderEmpty(message = "No results") {
+    this.listTarget.innerHTML = `<li class="midwest-autocomplete-empty" aria-hidden="true">${this.escapeHtml(message)}</li>`;
+    this.announce(message);
+    this.showDropdown();
+  }
+  showLoading() {
+    this.listTarget.innerHTML = '<li class="midwest-autocomplete-loading" aria-hidden="true">Loading\u2026</li>';
+    this.announce("Loading");
+    this.showDropdown();
+  }
+  showDropdown() {
+    if (!this.dropdownTarget.matches(":popover-open"))
+      this.dropdownTarget.showPopover();
+    this.inputTarget.setAttribute("aria-expanded", "true");
+  }
+  hideDropdown() {
+    if (this.dropdownTarget.matches(":popover-open"))
+      this.dropdownTarget.hidePopover();
+    this.inputTarget.setAttribute("aria-expanded", "false");
+    this.inputTarget.removeAttribute("aria-activedescendant");
+    this.highlightedIndex = -1;
+  }
+  syncHighlight(items) {
+    items.forEach((item, i) => item.classList.toggle("is-highlighted", i === this.highlightedIndex));
+    const active = items[this.highlightedIndex];
+    active?.scrollIntoView({ block: "nearest" });
+    if (active) {
+      this.inputTarget.setAttribute("aria-activedescendant", active.id);
+    } else {
+      this.inputTarget.removeAttribute("aria-activedescendant");
+    }
+  }
+  pickItem(item) {
+    const value = item.dataset.value ?? "";
+    const label = item.querySelector(".midwest-autocomplete-option-label")?.textContent?.trim() ?? value;
+    const support = item.querySelector(".midwest-autocomplete-option-support")?.textContent?.trim();
+    this.select({ value, label, support });
+  }
+  announce(message) {
+    if (this.hasStatusTarget)
+      this.statusTarget.textContent = message;
+  }
+  escapeHtml(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -3824,6 +4097,7 @@ function registerMidwestControllers(application) {
   application.register("midwest-chart", Chart);
   application.register("midwest-range", Range);
   application.register("midwest-rating", Rating);
+  application.register("midwest-autocomplete", Autocomplete);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };