phlex_kit 0.2.0

data/app/javascript/phlex_kit/controllers/clipboard_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="phlex-kit--clipboard". Copies the source text and
+// flashes a success/error popover (CSS-positioned, no @floating-ui). Ported from ruby_ui.
+export default class extends Controller {
+  static targets = ["trigger", "source", "successPopover", "errorPopover"]
+
+  copy() {
+    const el = this.sourceTarget.children[0]
+    if (!el) { this.show(this.errorPopoverTarget); return }
+    const text = el.tagName === "INPUT" ? el.value : el.innerText
+    navigator.clipboard.writeText(text)
+      .then(() => this.show(this.successPopoverTarget))
+      .catch(() => this.show(this.errorPopoverTarget))
+  }
+
+  onClickOutside(e) { if (!this.element.contains(e.target)) this.hideAll() }
+
+  show(target) {
+    this.hideAll()
+    target.classList.remove("pk-hidden")
+    clearTimeout(this.timer)
+    this.timer = setTimeout(() => target.classList.add("pk-hidden"), 1500)
+  }
+
+  hideAll() {
+    this.successPopoverTarget.classList.add("pk-hidden")
+    this.errorPopoverTarget.classList.add("pk-hidden")
+  }
+}

data/app/javascript/phlex_kit/controllers/collapsible_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="phlex-kit--collapsible"
+export default class extends Controller {
+  static targets = ["content"]
+  static values = { open: { type: Boolean, default: false } }
+
+  connect() { this.openValue ? this.open() : this.close() }
+  toggle() { this.openValue = !this.openValue }
+  openValueChanged(isOpen) { isOpen ? this.open() : this.close() }
+
+  open() { if (this.hasContentTarget) { this.contentTarget.classList.remove("pk-hidden"); this.openValue = true } }
+  close() { if (this.hasContentTarget) { this.contentTarget.classList.add("pk-hidden"); this.openValue = false } }
+}

data/app/javascript/phlex_kit/controllers/combobox_controller.js

@@ -0,0 +1,303 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Ported from ruby_ui's combobox controller. TWO changes from upstream: the
+// @floating-ui/dom dependency and the native Popover API are removed — the panel
+// is a CSS-positioned child of the combobox (.pk-combobox-popover, toggled with
+// .pk-hidden) with click-outside handled by a window action, so only
+// @hotwired/stimulus is needed. PhlexKit also COMPLETES upstream's unfinished
+// input/badge trigger variants: the inputTrigger / badgeContainer / badgeInput /
+// clearButton targets, filtering from whichever field fired, chip rendering
+// with per-chip remove, backspace removal, and clearAll all had no upstream
+// implementation. Core behaviour (trigger label, filtering, keyboard nav,
+// toggle-all) is unchanged.
+// Connects to data-controller="phlex-kit--combobox"
+export default class extends Controller {
+  static values = {
+    term: String,
+    minPopoverWidth: { type: Number, default: 240 }
+  }
+
+  static targets = [
+    "input",
+    "toggleAll",
+    "popover",
+    "item",
+    "emptyState",
+    "searchInput",
+    "trigger",
+    "triggerContent",
+    "inputTrigger",
+    "badgeContainer",
+    "badgeInput",
+    "clearButton"
+  ]
+
+  selectedItemIndex = null
+
+  connect() {
+    this.updateTriggerContent()
+  }
+
+  inputChanged(e) {
+    this.updateTriggerContent()
+
+    if (e.target.type == "radio") {
+      this.closePopover()
+    }
+
+    if (this.hasToggleAllTarget && !e.target.checked) {
+      this.toggleAllTarget.checked = false
+    }
+
+    // Selecting from a chip trigger consumes the query: clear it and reshow
+    // the full list for the next pick.
+    if (this.hasBadgeInputTarget && this.badgeInputTarget.value !== "") {
+      this.badgeInputTarget.value = ""
+      this.applyFilter("")
+    }
+  }
+
+  inputContent(input) {
+    return (input.dataset.text || input.parentElement.textContent).trim()
+  }
+
+  checkedInputs() {
+    return this.inputTargets.filter(input => input.checked)
+  }
+
+  selectionLabel(checkedInputs) {
+    if (checkedInputs.length === 0) return ""
+    if (this.termValue && checkedInputs.length > 1) return `${checkedInputs.length} ${this.termValue}`
+    return checkedInputs.map((input) => this.inputContent(input)).join(", ")
+  }
+
+  toggleAllItems() {
+    const isChecked = this.toggleAllTarget.checked
+    this.inputTargets.forEach(input => input.checked = isChecked)
+    this.updateTriggerContent()
+  }
+
+  updateTriggerContent() {
+    const checked = this.checkedInputs()
+
+    if (this.hasTriggerContentTarget) {
+      this.triggerContentTarget.innerText = this.selectionLabel(checked) || this.triggerTarget.dataset.placeholder
+    }
+
+    // Input trigger: the field is also the filter, so only reflect the
+    // selection while the popover is closed — never stomp a query mid-typing.
+    if (this.hasInputTriggerTarget && this.triggerTarget.ariaExpanded !== "true") {
+      this.inputTriggerTarget.value = this.selectionLabel(checked)
+    }
+
+    if (this.hasBadgeContainerTarget) {
+      this.renderBadges(checked)
+    }
+
+    if (this.hasClearButtonTarget) {
+      this.clearButtonTarget.classList.toggle("pk-hidden", checked.length === 0)
+    }
+  }
+
+  renderBadges(checked) {
+    this.badgeContainerTarget.replaceChildren(...checked.map((input) => this.buildBadge(input)))
+    this.badgeContainerTarget.classList.toggle("pk-hidden", checked.length === 0)
+    this.triggerTarget.classList.toggle("has-badges", checked.length > 0)
+    if (this.hasBadgeInputTarget) {
+      this.badgeInputTarget.placeholder = checked.length === 0 ? (this.triggerTarget.dataset.placeholder || "") : ""
+    }
+  }
+
+  buildBadge(input) {
+    const text = this.inputContent(input)
+    const badge = document.createElement("span")
+    badge.className = "pk-combobox-badge"
+    badge.append(text)
+
+    const remove = document.createElement("button")
+    remove.type = "button"
+    remove.className = "pk-combobox-badge-remove"
+    remove.setAttribute("aria-label", `Remove ${text}`)
+    remove.textContent = "×"
+    remove.addEventListener("click", (e) => {
+      e.stopPropagation() // don't reopen the popover via the trigger's click action
+      this.uncheck(input)
+    })
+
+    badge.append(remove)
+    return badge
+  }
+
+  uncheck(input) {
+    input.checked = false
+    input.dispatchEvent(new Event("change", { bubbles: true })) // form-field & host listeners
+    this.updateTriggerContent()
+  }
+
+  handleBadgeInputBackspace(e) {
+    if (this.badgeInputTarget.value !== "") return
+
+    const checked = this.checkedInputs()
+    const last = checked[checked.length - 1]
+    if (!last) return
+
+    e.preventDefault()
+    this.uncheck(last)
+  }
+
+  clearAll(e) {
+    if (e) {
+      e.preventDefault()
+      e.stopPropagation() // the button sits inside the trigger's click-to-open area
+    }
+    this.inputTargets.forEach(input => input.checked = false)
+    if (this.hasToggleAllTarget) this.toggleAllTarget.checked = false
+    this.updateTriggerContent()
+  }
+
+  togglePopover(event) {
+    event.preventDefault()
+
+    if (this.triggerTarget.ariaExpanded === "true") {
+      this.closePopover()
+    } else {
+      this.openPopover(event)
+    }
+  }
+
+  openPopover(event) {
+    if (event) event.preventDefault()
+    if (this.triggerTarget.ariaExpanded === "true") return
+
+    this.updatePopoverWidth()
+    this.triggerTarget.ariaExpanded = "true"
+    this.selectedItemIndex = null
+    this.itemTargets.forEach(item => item.ariaCurrent = "false")
+    this.popoverTarget.classList.remove("pk-hidden")
+
+    const field = this.filterField()
+    if (field) {
+      field.focus()
+      // In the input trigger the field holds the last selection — select it so
+      // typing starts a fresh query.
+      if (field === (this.hasInputTriggerTarget ? this.inputTriggerTarget : null)) field.select()
+    }
+  }
+
+  closePopover() {
+    this.triggerTarget.ariaExpanded = "false"
+    this.popoverTarget.classList.add("pk-hidden")
+    this.updateTriggerContent() // reflect the selection into an input trigger
+  }
+
+  onClickOutside(event) {
+    if (this.triggerTarget.ariaExpanded !== "true") return
+    if (this.element.contains(event.target)) return
+
+    this.closePopover()
+  }
+
+  // Whichever filter field this layout has: popover search, input trigger, or
+  // badge trigger field.
+  filterField() {
+    if (this.hasSearchInputTarget) return this.searchInputTarget
+    if (this.hasInputTriggerTarget) return this.inputTriggerTarget
+    if (this.hasBadgeInputTarget) return this.badgeInputTarget
+    return null
+  }
+
+  filterItems(e) {
+    if (["ArrowDown", "ArrowUp", "Tab", "Enter"].includes(e.key)) {
+      return
+    }
+
+    const field = (e.target instanceof HTMLInputElement) ? e.target : this.filterField()
+    if (!field) return
+
+    this.applyFilter(field.value.toLowerCase())
+  }
+
+  applyFilter(filterTerm) {
+    if (this.hasToggleAllTarget) {
+      if (filterTerm) this.toggleAllTarget.parentElement.classList.add("pk-hidden")
+      else this.toggleAllTarget.parentElement.classList.remove("pk-hidden")
+    }
+
+    let resultCount = 0
+
+    this.selectedItemIndex = null
+
+    this.inputTargets.forEach((input) => {
+      const text = this.inputContent(input).toLowerCase()
+
+      if (text.indexOf(filterTerm) > -1) {
+        input.parentElement.classList.remove("pk-hidden")
+        resultCount++
+      } else {
+        input.parentElement.classList.add("pk-hidden")
+      }
+    })
+
+    if (this.hasEmptyStateTarget) {
+      this.emptyStateTarget.classList.toggle("pk-hidden", resultCount !== 0)
+    }
+  }
+
+  keyDownPressed(e) {
+    if (e) e.preventDefault()
+
+    if (this.selectedItemIndex !== null) {
+      this.selectedItemIndex++
+    } else {
+      this.selectedItemIndex = 0
+    }
+
+    this.focusSelectedInput()
+  }
+
+  keyUpPressed(e) {
+    if (e) e.preventDefault()
+
+    if (this.selectedItemIndex !== null) {
+      this.selectedItemIndex--
+    } else {
+      this.selectedItemIndex = -1
+    }
+
+    this.focusSelectedInput()
+  }
+
+  focusSelectedInput() {
+    const visibleInputs = this.inputTargets.filter(input => !input.parentElement.classList.contains("pk-hidden"))
+    if (visibleInputs.length === 0) return
+
+    this.wrapSelectedInputIndex(visibleInputs.length)
+
+    visibleInputs.forEach((input, index) => {
+      if (index == this.selectedItemIndex) {
+        input.parentElement.ariaCurrent = "true"
+        input.parentElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
+      } else {
+        input.parentElement.ariaCurrent = "false"
+      }
+    })
+  }
+
+  keyEnterPressed(event) {
+    event.preventDefault()
+    const option = this.itemTargets.find(item => item.ariaCurrent === "true")
+
+    if (option) {
+      option.click()
+    }
+  }
+
+  wrapSelectedInputIndex(length) {
+    this.selectedItemIndex = ((this.selectedItemIndex % length) + length) % length
+  }
+
+  updatePopoverWidth() {
+    const width = Math.max(this.triggerTarget.offsetWidth, this.minPopoverWidthValue)
+    this.popoverTarget.style.width = `${width}px`
+  }
+}

data/app/javascript/phlex_kit/controllers/command_controller.js

@@ -0,0 +1,161 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Fuzzy subsequence score: every query character must appear in order in the
+// value (else null = no match). Consecutive runs compound, word-starts score
+// extra, and a verbatim substring outranks scattered hits — so "set" beats
+// "*s*al*e*s repor*t*" with "settings" on top. Dependency-free stand-in for
+// what fuse.js gave ruby_ui.
+function fuzzyScore(query, value) {
+  if (!query) return 0;
+  let qi = 0;
+  let score = 0;
+  let streak = 0;
+  for (let vi = 0; vi < value.length && qi < query.length; vi++) {
+    if (value[vi] === query[qi]) {
+      streak++;
+      score += streak;
+      if (vi === 0 || /[\s\-_./]/.test(value[vi - 1])) score += 2;
+      qi++;
+    } else {
+      streak = 0;
+    }
+  }
+  if (qi < query.length) return null;
+  if (value.includes(query)) score += query.length * 2;
+  return score;
+}
+
+// Ported from ruby_ui's command controller. TWO changes from upstream: the
+// fuse.js dependency is replaced with the dependency-free fuzzy matcher above
+// (same search() shape, results sorted best-first), and show/hide + body
+// scroll-lock use .pk-hidden / inline overflow (matching the shipped dialog)
+// instead of Tailwind utility classes. Everything else (filtering, keyboard
+// nav, dismiss) is unchanged.
+// Connects to data-controller="phlex-kit--command"
+export default class extends Controller {
+  static targets = ["input", "group", "item", "empty"];
+
+  connect() {
+    this.selectedIndex = -1;
+
+    if (!this.hasInputTarget) {
+      return;
+    }
+
+    this.inputTarget.focus();
+    this.searchIndex = this.buildSearchIndex();
+    this.toggleVisibility(this.emptyTargets, false);
+  }
+
+  dismiss() {
+    // allow scroll on body
+    document.body.style.removeProperty("overflow");
+    // remove the element
+    this.element.remove();
+  }
+
+  focusInput() {
+    this.inputTarget?.focus();
+  }
+
+  filter(e) {
+    // Deselect any previously selected item
+    this.deselectAll();
+
+    const query = e.target.value.toLowerCase();
+    if (query.length === 0) {
+      this.resetVisibility();
+      return;
+    }
+
+    this.toggleVisibility(this.itemTargets, false);
+
+    const results = this.searchIndex.search(query);
+    results.forEach((result) =>
+      this.toggleVisibility([result.item.element], true),
+    );
+
+    this.toggleVisibility(this.emptyTargets, results.length === 0);
+    this.updateGroupVisibility();
+  }
+
+  toggleVisibility(elements, isVisible) {
+    elements.forEach((el) => el.classList.toggle("pk-hidden", !isVisible));
+  }
+
+  updateGroupVisibility() {
+    this.groupTargets.forEach((group) => {
+      const hasVisibleItems =
+        group.querySelectorAll(
+          "[data-phlex-kit--command-target='item']:not(.pk-hidden)",
+        ).length > 0;
+      this.toggleVisibility([group], hasVisibleItems);
+    });
+  }
+
+  resetVisibility() {
+    this.toggleVisibility(this.itemTargets, true);
+    this.toggleVisibility(this.groupTargets, true);
+    this.toggleVisibility(this.emptyTargets, false);
+  }
+
+  // Upstream builds a Fuse index here; this keeps the same search() shape —
+  // [{ item }] sorted best-match-first — using the fuzzy scorer above.
+  buildSearchIndex() {
+    const items = this.itemTargets.map((el) => ({
+      value: (el.dataset.value || "").toLowerCase(),
+      element: el,
+    }));
+    return {
+      search(query) {
+        const q = query.toLowerCase();
+        return items
+          .map((item) => ({ item, score: fuzzyScore(q, item.value) }))
+          .filter((result) => result.score !== null)
+          .sort((a, b) => b.score - a.score);
+      },
+    };
+  }
+
+  handleKeydown(e) {
+    const visibleItems = this.itemTargets.filter(
+      (item) => !item.classList.contains("pk-hidden"),
+    );
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      this.updateSelectedItem(visibleItems, 1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      this.updateSelectedItem(visibleItems, -1);
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
+      e.preventDefault();
+      visibleItems[this.selectedIndex].click();
+    }
+  }
+
+  updateSelectedItem(visibleItems, direction) {
+    if (this.selectedIndex >= 0) {
+      this.toggleAriaSelected(visibleItems[this.selectedIndex], false);
+    }
+
+    this.selectedIndex += direction;
+
+    // Ensure the selected index is within the bounds of the visible items
+    if (this.selectedIndex < 0) {
+      this.selectedIndex = visibleItems.length - 1;
+    } else if (this.selectedIndex >= visibleItems.length) {
+      this.selectedIndex = 0;
+    }
+
+    this.toggleAriaSelected(visibleItems[this.selectedIndex], true);
+  }
+
+  toggleAriaSelected(element, isSelected) {
+    element.setAttribute("aria-selected", isSelected.toString());
+  }
+
+  deselectAll() {
+    this.itemTargets.forEach((item) => this.toggleAriaSelected(item, false));
+    this.selectedIndex = -1;
+  }
+}

data/app/javascript/phlex_kit/controllers/command_dialog_controller.js

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Ported from ruby_ui's command-dialog controller (Stimulus-only upstream),
+// identifiers renamed ruby-ui → phlex-kit and the Tailwind body scroll-lock
+// class swapped for inline overflow (matching the shipped dialog).
+// Connects to data-controller="phlex-kit--command-dialog"
+export default class extends Controller {
+  static targets = ["content"];
+  static outlets = ["phlex-kit--command"];
+
+  phlexKitCommandOutletConnected(controller) {
+    this.openOutlet = controller;
+  }
+
+  phlexKitCommandOutletDisconnected() {
+    this.openOutlet = null;
+  }
+
+  open(e) {
+    if (e) {
+      e.preventDefault();
+    }
+
+    if (!this.hasContentTarget) {
+      return;
+    }
+
+    if (this.openOutlet) {
+      this.openOutlet.focusInput();
+      return;
+    }
+
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
+    // prevent scroll on body
+    document.body.style.overflow = "hidden";
+  }
+}

data/app/javascript/phlex_kit/controllers/context_menu_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="phlex-kit--context-menu". Opens at the cursor on
+// contextmenu; closes on outside click or Escape. CSS positioning (no floating-ui).
+export default class extends Controller {
+  static targets = ["content"]
+  connect() {
+    this.onDoc = (e) => { if (!this.contentTarget.contains(e.target)) this.close() }
+    this.onKey = (e) => { if (e.key === "Escape") this.close() }
+  }
+  disconnect() { document.removeEventListener("click", this.onDoc); document.removeEventListener("keydown", this.onKey) }
+  open(e) {
+    e.preventDefault()
+    const r = this.element.getBoundingClientRect()
+    this.contentTarget.style.left = `${e.clientX - r.left}px`
+    this.contentTarget.style.top = `${e.clientY - r.top}px`
+    this.contentTarget.classList.remove("pk-hidden")
+    this.contentTarget.dataset.state = "open"
+    document.addEventListener("click", this.onDoc)
+    document.addEventListener("keydown", this.onKey)
+  }
+  close() {
+    this.contentTarget.classList.add("pk-hidden")
+    this.contentTarget.dataset.state = "closed"
+    document.removeEventListener("click", this.onDoc)
+    document.removeEventListener("keydown", this.onKey)
+  }
+}

data/app/javascript/phlex_kit/controllers/data_table_column_visibility_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Ported from ruby_ui's data-table-column-visibility controller (Stimulus-only
+// upstream), identifiers renamed ruby-ui → phlex-kit and the Tailwind hidden
+// class swapped for .pk-hidden. Toggles every cell carrying a matching
+// data-column attribute inside the enclosing data table.
+// Connects to data-controller="phlex-kit--data-table-column-visibility"
+export default class extends Controller {
+  toggle(event) {
+    const key = event.target.dataset.columnKey;
+    const visible = event.target.checked;
+    const root = this.element.closest('[data-controller~="phlex-kit--data-table"]');
+    if (!root) return;
+    root
+      .querySelectorAll(`[data-column="${key}"]`)
+      .forEach((el) => el.classList.toggle("pk-hidden", !visible));
+  }
+}

data/app/javascript/phlex_kit/controllers/data_table_controller.js

@@ -0,0 +1,61 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Ported from ruby_ui's data-table controller (Stimulus-only upstream),
+// identifiers renamed ruby-ui → phlex-kit and the Tailwind hidden class swapped
+// for the kit's .pk-hidden. Row selection, select-all indeterminate state,
+// bulk-action visibility and row-detail expansion.
+// Connects to data-controller="phlex-kit--data-table"
+export default class extends Controller {
+  static targets = [
+    "selectAll",
+    "rowCheckbox",
+    "selectionSummary",
+    "selectionBar",
+    "bulkActions",
+  ];
+
+  connect() {
+    this.updateState();
+  }
+
+  toggleAll(event) {
+    const checked = event.target.checked;
+    this.rowCheckboxTargets.forEach((cb) => {
+      cb.checked = checked;
+    });
+    this.updateState();
+  }
+
+  toggleRow() {
+    this.updateState();
+  }
+
+  toggleRowDetail(event) {
+    const button = event.currentTarget;
+    const id = button.getAttribute("aria-controls");
+    if (!id) return;
+    const target = document.getElementById(id);
+    if (!target) return;
+    const expanded = button.getAttribute("aria-expanded") === "true";
+    button.setAttribute("aria-expanded", String(!expanded));
+    target.classList.toggle("pk-hidden", expanded);
+  }
+
+  updateState() {
+    const total = this.rowCheckboxTargets.length;
+    const selected = this.rowCheckboxTargets.filter((cb) => cb.checked).length;
+
+    if (this.hasSelectAllTarget) {
+      this.selectAllTarget.checked = total > 0 && selected === total;
+      this.selectAllTarget.indeterminate = selected > 0 && selected < total;
+    }
+
+    if (this.hasSelectionSummaryTarget) {
+      this.selectionSummaryTarget.textContent = `${selected} of ${total} row(s) selected.`;
+    }
+
+    if (this.hasBulkActionsTarget) {
+      this.bulkActionsTarget.classList.toggle("pk-hidden", selected === 0);
+    }
+  }
+}