atomic_view 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 75aad701c9a9b4598ba4a086f8a3c1c37faaac0bbf23f4ef2927b4d667364f1b
-  data.tar.gz: 1a63769c7c94188b829105777227267be43df6480e6b2f864a5c7be4e831a179
+  metadata.gz: 38ae2486d6b3e69c8668b5cc8b1c8ac229e8af46f2bfa8c0217c24b6a9ba0d4e
+  data.tar.gz: 28f821334d300ed260178324a905541230a944ca0d32763a7d031ab302f4396f
 SHA512:
-  metadata.gz: ba9732b3bf6ed19951e2c29ac2feafa7af299679135645bf28650808fd9ff6a6c9e9c3d994be9d23319b69a4679e4e7a8d67a73ae46603a963544a11430e0579
-  data.tar.gz: 10aff2eb5c66efb09918961c87cc708941cd30721c769cd3c2402082d09898098b32389cdfffe52519bbd3bedfa34bb8f2f265694cb0ed5226148abcfcbcd058
+  metadata.gz: 11e8dd2b1b6c2de279a77e819b834e1ab742be92e1c48b61586ec8944eadb1e1fe7587e3e34ab6d85ac13121c0e3dbb3f099c62b6db2b7054e5e7f2d9c8fe2c4
+  data.tar.gz: 74391beffa39c72a0ca5bccd400039d704ae773d5e57dc9a7696a493a825aa1f57efb00c6d959f26dac809d36a2b7c881a7112d71a09c83d156d9d4d9be2898e

data/app/assets/javascripts/atomic_view/controllers/auto_submit_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Debounced `requestSubmit()` for a filter form -- wired once on the
+// `<form>` itself (see FiltersComponent), not per-field, since `input`/
+// `change` events from any native form control (a text field, a select, a
+// radio -- including a ChipComponent radio dropped into `with_chip`)
+// bubble up to the form regardless of where they originate.
+export default class extends Controller {
+  static values = {delay: {type: Number, default: 150}}
+
+  initialize() {
+    this.submit = this.submit.bind(this)
+  }
+
+  connect() {
+    if (this.delayValue > 0) this.submit = this.debounce(this.submit, this.delayValue)
+  }
+
+  submit() {
+    this.element.requestSubmit()
+  }
+
+  debounce(fn, delay) {
+    let timeout
+    return (...args) => {
+      clearTimeout(timeout)
+      timeout = setTimeout(() => fn.apply(this, args), delay)
+    }
+  }
+}

data/app/assets/javascripts/atomic_view/controllers/searchable_select_controller.js

@@ -0,0 +1,65 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Progressively enhances a real, hidden <select> (see the `searchable`
+// concern in select_component.rb/collection_select_component.rb) into a
+// trigger + search + list combobox. Reads the select's own <option>
+// elements to build the list -- there's no separate Ruby-side data source
+// to duplicate or keep in sync with `selected`/`include_blank`/etc.
+// Picking an item writes back into the real select's value and dispatches
+// a bubbling `change`, so it participates in a real form submission (e.g.
+// FiltersComponent's form-level auto-submit) exactly like a plain select.
+//
+// Paired with `atomic-view--dropdown` on the same element for open/close,
+// positioning, and outside-click/Esc handling -- this controller only
+// owns the list content and the select/label sync.
+export default class extends Controller {
+  static targets = ["select", "input", "label", "list"]
+
+  connect() {
+    this.buildList()
+    this.syncLabel()
+    this.selectTarget.addEventListener("change", this.syncLabel)
+  }
+
+  disconnect() {
+    this.selectTarget.removeEventListener("change", this.syncLabel)
+  }
+
+  buildList() {
+    this.listTarget.innerHTML = ""
+
+    Array.from(this.selectTarget.options).forEach((option) => {
+      const button = document.createElement("button")
+      button.type = "button"
+      button.textContent = option.text
+      button.dataset.searchText = option.text.toLowerCase()
+      button.className = "flex w-full items-center gap-2.5 rounded-well px-2 py-2 text-sm text-foreground hover:bg-offset"
+      button.addEventListener("click", () => this.choose(option))
+      this.listTarget.appendChild(button)
+    })
+  }
+
+  choose(option) {
+    this.selectTarget.value = option.value
+    this.selectTarget.dispatchEvent(new Event("change", {bubbles: true}))
+    this.syncLabel()
+    this.dropdownController?.close()
+  }
+
+  filter() {
+    const query = this.inputTarget.value.trim().toLowerCase()
+
+    this.listTarget.querySelectorAll("button").forEach((button) => {
+      button.classList.toggle("hidden", !button.dataset.searchText.includes(query))
+    })
+  }
+
+  syncLabel = () => {
+    const selected = this.selectTarget.options[this.selectTarget.selectedIndex]
+    this.labelTarget.textContent = selected ? selected.text : ""
+  }
+
+  get dropdownController() {
+    return this.application.getControllerForElementAndIdentifier(this.element, "atomic-view--dropdown")
+  }
+}

data/lib/atomic_view/components/chip_component.rb

@@ -10,27 +10,96 @@ module AtomicView
     # Pass `dismiss_button_options` only to customize that behavior, e.g. to
     # trigger a network request instead of (or in addition to) the default
     # remove animation.
+    #
+    # A chip can also be *selectable* rather than dismissible -- for a row
+    # of filter options (e.g. status: All/Active/Completed) rendered as
+    # individual pills rather than a joined SegmentedControlComponent
+    # track. Two selectable modes, matching SegmentedControlComponent's own
+    # link/radio split:
+    #
+    # - `href:` renders an `<a>` -- plain navigation, for a page not inside
+    #   an auto-submitting form. `selected:` drives the active styling.
+    # - `name:` (+ `value:`, `selected:`) renders a real
+    #   `<input type="radio"> + <label>` pair, styled identically, so it
+    #   participates in a real form submission -- e.g. dropped straight
+    #   into FiltersComponent's `with_chip`, where the radio's native
+    #   `change` event bubbles to the form's auto-submit action with no
+    #   extra wiring.
+    #
+    # `dismissible:` only applies to the plain (non-selectable) mode -- a
+    # filter pill is "unselected" by picking a different one, not by its
+    # own close button.
+    #
+    # The selected treatment is additive (`ring-2 ring-current`), not a
+    # bg/text override -- a caller coloring different values differently
+    # (e.g. a status chip carrying `class: "text-success"`) keeps that
+    # color when selected, with `ring-current` picking it up automatically
+    # for the emphasis ring, rather than every selected chip flattening to
+    # the same neutral look regardless of its own color.
     class ChipComponent < AtomicView::Component
-      attr_reader :dismissible, :dismiss_button_options, :leading
+      attr_reader :dismissible, :dismiss_button_options, :leading, :href, :name, :value, :selected
 
-      def initialize(dismissible: false, dismiss_button_options: {}, leading: nil, **options)
+      def initialize(dismissible: false, dismiss_button_options: {}, leading: nil, href: nil, name: nil, value: nil, selected: false, **options)
         super()
         @dismissible = dismissible
         @dismiss_button_options = dismiss_button_options
         @leading = leading
+        @href = href
+        @name = name
+        @value = value
+        @selected = selected
         @options = options
       end
 
       def call
+        return radio_chip if name.present?
+        return link_chip if href.present?
+
+        span_chip
+      end
+
+      private
+
+      def span_chip
         tag.span(**@options.except(:class, :data), class: class_names(base_classes, @options[:class]), data: data_attributes) do
           safe_join([leading, content, dismiss_button].compact)
         end
       end
 
-      private
+      def link_chip
+        link_to(href, **@options.except(:class), class: class_names(base_classes, selected_classes, @options[:class]), aria: {current: (selected ? "true" : nil)}) do
+          safe_join([leading, content].compact)
+        end
+      end
+
+      # Wrapped in a `display: contents` span -- Tailwind's `peer-checked:`
+      # relies on the CSS general sibling combinator (`~`), which matches
+      # *every* later sibling under the same parent once a peer is
+      # checked, not just the one meant to pair with it. Rendered as flat
+      # siblings (as `with_chip`'s multiple chips are), checking any one
+      # radio would light up every chip after it. This span isolates each
+      # input/label pair's sibling relationship to just the two of them --
+      # `display: contents` keeps it invisible to layout, same technique
+      # SegmentedControlComponent's own radio mode already uses.
+      def radio_chip
+        tag.span(class: "contents") do
+          safe_join([
+            tag.input(**@options.except(:class, :id), type: "radio", name: name, value: value, id: radio_id, checked: selected, class: "peer sr-only"),
+            tag.label(safe_join([leading, content].compact), for: radio_id, class: class_names(base_classes, "cursor-pointer peer-checked:ring-2 peer-checked:ring-current peer-checked:font-semibold", @options[:class]))
+          ])
+        end
+      end
+
+      def radio_id
+        "#{name}_#{value}"
+      end
+
+      def selected_classes
+        "ring-2 ring-current font-semibold" if selected
+      end
 
       def base_classes
-        "inline-flex items-center gap-1 rounded-pill bg-offset px-2 py-0.5 text-xs font-medium text-foreground border border-border"
+        "inline-flex items-center gap-1 rounded-btn bg-offset px-2 py-0.5 text-xs font-medium text-foreground border border-border"
       end
 
       def data_attributes

data/lib/atomic_view/components/collection_select_component.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag :div, class: container_html_class do %>
+<%= content_tag :div, class: container_html_class, data: searchable_container_data do %>
   <% if left_section? %>
     <% if left_section_addon? %>
       <span class="inline-flex items-center rounded-l-btn border border-r-0 border-ring/10 dark:border-white/10 bg-transparent dark:bg-white/5 px-3 text-primary dark:text-white sm:text-sm"><%= left_section %></span>
@@ -11,6 +11,20 @@
     <% end %>
   <% end %>
   <%= select_tag %>
+  <% if searchable? %>
+    <button type="button" data-atomic-view--dropdown-target="trigger" data-action="click->atomic-view--dropdown#toggle" class="<%= field_chrome_classes(size: :sm) %> flex items-center justify-between gap-2 text-left">
+      <span data-atomic-view--searchable-select-target="label" class="truncate"></span>
+      <%= icon "chevron-down", variant: :micro, options: {class: "text-muted-foreground shrink-0"} %>
+    </button>
+
+    <div data-atomic-view--dropdown-target="menu" class="hidden absolute z-50 w-full bg-surface border border-border rounded-card shadow-panel p-1">
+      <div class="relative px-1 pb-1.5 pt-1">
+        <%= icon "magnifying-glass", variant: :micro, options: {class: "pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-muted-foreground"} %>
+        <input type="search" autocomplete="off" data-atomic-view--searchable-select-target="input" data-action="input->atomic-view--searchable-select#filter" class="w-full rounded-well border border-input bg-surface py-1.5 pl-8 pr-2 text-sm text-foreground placeholder:text-placeholder focus:border-ring focus:outline-none">
+      </div>
+      <div data-atomic-view--searchable-select-target="list" class="max-h-64 overflow-y-auto"></div>
+    </div>
+  <% end %>
   <% if right_section? %>
     <% if right_section_addon? %>
       <span class="inline-flex items-center rounded-r-btn border border-l-0 border-ring/10 dark:border-white/10 bg-transparent dark:bg-white/5 px-3 text-primary dark:text-white sm:text-sm"><%= right_section %></span>

data/lib/atomic_view/components/collection_select_component.rb

@@ -3,6 +3,7 @@ module AtomicView
     class CollectionSelectComponent < ViewComponent::Form::CollectionSelectComponent
       include AtomicView::Components::Concerns::FieldChrome
       include AtomicView::Components::Concerns::SectionSupport
+      include AtomicView::Components::Concerns::Searchable
 
       def html_class
         class_names(
@@ -10,7 +11,8 @@ module AtomicView
           "pl-10" => left_section? && !(left_section_addon? || left_section_interaction?),
           "pr-10" => right_section? && !(right_section_addon? || right_section_interaction?),
           "shadow-none rounded-none rounded-r-btn ring-inset" => left_section_addon? || left_section_interaction?,
-          "shadow-none rounded-none rounded-l-btn ring-inset" => right_section_addon? || right_section_interaction?
+          "shadow-none rounded-none rounded-l-btn ring-inset" => right_section_addon? || right_section_interaction?,
+          "sr-only" => searchable?
         )
       end
 
@@ -23,7 +25,7 @@ module AtomicView
           value_method,
           text_method,
           options,
-          html_options
+          searchable_html_options
         ).render
       end
     end

data/lib/atomic_view/components/concerns/searchable.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    module Concerns
+      # Shared by SelectComponent/CollectionSelectComponent: `searchable:
+      # true` progressively enhances the real, native `<select>` (kept in
+      # the DOM -- visually hidden, but still the actual form value) with a
+      # trigger + search + list combobox on top, wired to
+      # `atomic-view--searchable-select`. That controller reads the
+      # select's own `<option>` elements to build its list -- there's no
+      # separate Ruby-side data source to keep in sync -- and writes back
+      # into the select's value (dispatching `change`) when an option is
+      # picked, so it participates in a real form submission exactly like
+      # a plain select (e.g. FiltersComponent's form-level auto-submit)
+      # with no special-casing.
+      module Searchable
+        def searchable?
+          options[:searchable].present?
+        end
+
+        # `html_options` (the real <select>'s raw HTML attributes, kept
+        # separate from `options` by ViewComponent::Form::SelectComponent)
+        # needs the target attribute merged in only when searchable --
+        # every select_tag override should render with this instead of
+        # the raw `html_options`.
+        def searchable_html_options
+          return html_options unless searchable?
+
+          html_options.merge(data: (html_options[:data] || {}).merge("atomic-view--searchable-select-target" => "select"))
+        end
+
+        # The searchable UI's controllers need to live on the same
+        # container the real <select> is already inside of (so it's a
+        # valid Stimulus target scope) -- that's `container_html_class`'s
+        # div (from SectionSupport), already `position: relative` for
+        # icon-section positioning, reused here as the dropdown's anchor
+        # too rather than introducing another wrapping element.
+        def searchable_container_data
+          return {} unless searchable?
+
+          {controller: "atomic-view--dropdown atomic-view--searchable-select"}
+        end
+      end
+    end
+  end
+end

data/lib/atomic_view/components/filters_component.html.erb

@@ -0,0 +1,23 @@
+<%= form_with(url: url, method: method, builder: AtomicView::FormBuilder, **html_options, class: html_class, data: data_attributes) do |form| %>
+  <% assign_form(form) %>
+
+  <% preserve.each do |key, value| %>
+    <%= hidden_field_tag(key, value) %>
+  <% end %>
+
+  <% chips.each do |chip| %>
+    <div class="flex flex-wrap items-center gap-2"><%= chip %></div>
+  <% end %>
+
+  <% if row? %>
+    <div class="flex flex-col gap-2 sm:flex-row items-stretch w-full">
+      <% if search? %>
+        <div class="sm:flex-[2]"><%= search %></div>
+      <% end %>
+
+      <% filters.each do |filter| %>
+        <div class="sm:flex-1"><%= filter %></div>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/lib/atomic_view/components/filters_component.rb

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+module AtomicView
+  module Components
+    # Filters
+    #
+    # The layout/boilerplate for an index page's filter bar: one
+    # auto-submitting `form_with`, three fixed slots (`with_chip`,
+    # `with_search`, `with_filter`), each always rendered in the same spot
+    # rather than a freeform block callers arrange by hand.
+    #
+    #   <%= render(AtomicView::Components::FiltersComponent.new(url: rentals_path(format: :turbo_stream), preserve: {view: params[:view]})) do |filters| %>
+    #     <% filters.with_chip do %>
+    #       <% status_options.each do |status| %>
+    #         <%= render(AtomicView::Components::ChipComponent.new(name: "status", value: status.value, selected: params[:status] == status.value)) { status.label } %>
+    #       <% end %>
+    #     <% end %>
+    #
+    #     <% filters.with_search do |form| %>
+    #       <%= form.search_field :q, value: params[:q], placeholder: "Search by camper..." %>
+    #     <% end %>
+    #
+    #     <% filters.with_filter do |form| %>
+    #       <%= form.collection_select(:park_id, Park.all, :id, :name, include_blank: "All parks", selected: params[:park_id]) %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # - `with_chip` (repeatable) -- content-only, one full-width row per
+    #   call, above everything else, in declaration order. Each call
+    #   represents one logical group of options (e.g. "status") -- the
+    #   caller loops and renders one selectable `ChipComponent` per option
+    #   inside it; a second, independent chip group is just a second
+    #   `with_chip` call.
+    # - `with_search` (single) -- yields the shared form builder; fixed
+    #   spot at the start of the second row, given more width than each
+    #   `with_filter`.
+    # - `with_filter` (repeatable) -- yields the same form builder; renders
+    #   after search, sharing the remaining width equally.
+    #
+    # The yielded "form" in `with_search`/`with_filter` isn't literally the
+    # `ActionView::Helpers::FormBuilder` -- it's a thin slot wrapper that
+    # delegates every method to the real form builder once FiltersComponent
+    # builds it (`form_with` doesn't exist yet when these blocks are
+    # captured), so `form.search_field`/`form.select`/`form.collection_select`
+    # all work exactly as if it were the real builder.
+    #
+    # Auto-submit is wired once on the `<form>` itself (`atomic-view--auto-submit`,
+    # listening for bubbled `input`/`change`), not per-field -- any native
+    # form control dropped into any slot, including a `ChipComponent` radio
+    # in `with_chip`, submits on change with no extra wiring.
+    #
+    # `preserve:` renders one hidden field per key/value, for page state
+    # that isn't itself a filter but must ride along on every submit (e.g.
+    # a `view:` toggle owned by a different control entirely).
+    class FiltersComponent < AtomicView::Component
+      # A stand-in for the real form builder, yielded into `with_search`/
+      # `with_filter` blocks before the real builder exists. FiltersComponent
+      # assigns the real builder onto every instance of this once `form_with`
+      # actually yields it -- see `#assign_form`.
+      class FieldSlot < AtomicView::Component
+        attr_accessor :form
+
+        def call
+          content
+        end
+
+        def method_missing(name, ...)
+          return form.public_send(name, ...) if form.respond_to?(name)
+          super
+        end
+
+        def respond_to_missing?(name, include_private = false)
+          form.respond_to?(name) || super
+        end
+
+        # ViewComponent::Base already includes ActionView's generic,
+        # object-argument Form(Options)Helper methods for template
+        # rendering -- e.g. a bare `select(object, method, choices, ...)`,
+        # not FormBuilder's per-attribute `form.select(method, choices,
+        # ...)`. Those real, inherited methods share names with the form
+        # builder's and would otherwise win over method_missing entirely,
+        # getting called with the wrong arity/meaning. Undefining every
+        # name the real form builder responds to forces all of them
+        # through method_missing above instead.
+        (AtomicView::FormBuilder.instance_methods - Object.instance_methods).each do |name|
+          undef_method(name) if method_defined?(name)
+        end
+      end
+
+      renders_many :chips
+      renders_one :search, FieldSlot
+      renders_many :filters, FieldSlot
+
+      attr_reader :url, :method, :preserve
+
+      def initialize(url:, method: :get, preserve: {}, **options)
+        super()
+        @url = url
+        @method = method
+        @preserve = preserve
+        @options = options
+      end
+
+      def html_class
+        class_names("flex flex-col gap-3 w-full", @options[:class])
+      end
+
+      def html_options
+        @options.except(:class, :data)
+      end
+
+      def data_attributes
+        (@options[:data] || {}).merge(
+          controller: "atomic-view--auto-submit",
+          action: "input->atomic-view--auto-submit#submit change->atomic-view--auto-submit#submit"
+        )
+      end
+
+      # Called from the template once `form_with` actually yields the real
+      # builder -- pushes it onto every FieldSlot instance so `with_search`/
+      # `with_filter`'s already-captured blocks can delegate to it.
+      def assign_form(form)
+        search.form = form if search?
+        filters.each { |filter| filter.form = form }
+      end
+
+      def row?
+        search? || filters.any?
+      end
+    end
+  end
+end

data/lib/atomic_view/components/select_component.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag :div, class: container_html_class do %>
+<%= content_tag :div, class: container_html_class, data: searchable_container_data do %>
   <% if left_section? %>
     <% if left_section_addon? %>
       <span class="inline-flex items-center rounded-l-btn border border-r-0 border-ring/10 dark:border-white/10 bg-transparent dark:bg-white/5 px-3 text-primary dark:text-white sm:text-sm"><%= left_section %></span>
@@ -11,6 +11,20 @@
     <% end %>
   <% end %>
   <%= select_tag %>
+  <% if searchable? %>
+    <button type="button" data-atomic-view--dropdown-target="trigger" data-action="click->atomic-view--dropdown#toggle" class="<%= field_chrome_classes(size: :sm) %> flex items-center justify-between gap-2 text-left">
+      <span data-atomic-view--searchable-select-target="label" class="truncate"></span>
+      <%= icon "chevron-down", variant: :micro, options: {class: "text-muted-foreground shrink-0"} %>
+    </button>
+
+    <div data-atomic-view--dropdown-target="menu" class="hidden absolute z-50 w-full bg-surface border border-border rounded-card shadow-panel p-1">
+      <div class="relative px-1 pb-1.5 pt-1">
+        <%= icon "magnifying-glass", variant: :micro, options: {class: "pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-muted-foreground"} %>
+        <input type="search" autocomplete="off" data-atomic-view--searchable-select-target="input" data-action="input->atomic-view--searchable-select#filter" class="w-full rounded-well border border-input bg-surface py-1.5 pl-8 pr-2 text-sm text-foreground placeholder:text-placeholder focus:border-ring focus:outline-none">
+      </div>
+      <div data-atomic-view--searchable-select-target="list" class="max-h-64 overflow-y-auto"></div>
+    </div>
+  <% end %>
   <% if right_section? %>
     <% if right_section_addon? %>
       <span class="inline-flex items-center rounded-r-btn border border-l-0 border-ring/10 dark:border-white/10 bg-transparent dark:bg-white/5 px-3 text-primary dark:text-white sm:text-sm"><%= right_section %></span>

data/lib/atomic_view/components/select_component.rb

@@ -3,6 +3,7 @@ module AtomicView
     class SelectComponent < ViewComponent::Form::SelectComponent
       include AtomicView::Components::Concerns::FieldChrome
       include AtomicView::Components::Concerns::SectionSupport
+      include AtomicView::Components::Concerns::Searchable
 
       def html_class
         class_names(
@@ -11,7 +12,8 @@ module AtomicView
           "pl-10" => left_section? && !(left_section_addon? || left_section_interaction?),
           "pr-10" => right_section? && !(right_section_addon? || right_section_interaction?),
           "shadow-none rounded-none rounded-r-btn ring-inset" => left_section_addon? || left_section_interaction?,
-          "shadow-none rounded-none rounded-l-btn ring-inset" => right_section_addon? || right_section_interaction?
+          "shadow-none rounded-none rounded-l-btn ring-inset" => right_section_addon? || right_section_interaction?,
+          "sr-only" => searchable?
         )
       end
 
@@ -22,7 +24,7 @@ module AtomicView
           @view_context,
           choices,
           options,
-          html_options,
+          searchable_html_options,
           &content
         ).render
       end

data/lib/atomic_view/components/table_component/cell_component.html.erb

@@ -2,5 +2,5 @@
   <% if linked? %>
     <%= link_to "", path, class: "absolute inset-0", tabindex: (first ? 0 : -1), "aria-hidden": (first ? nil : "true"), "aria-label": (first ? label : nil), data: {row_link: true} %>
   <% end %>
-  <%= tag.span(content, class: "relative") %>
+  <%= tag.span(content, class: content_class) %>
 <% end %>

data/lib/atomic_view/components/table_component/cell_component.rb

@@ -10,21 +10,25 @@ module AtomicView
       # design. `first` and `clickable` are set by RowComponent's `cells`
       # slot from the row itself, not passed by the caller.
       #
-      # Visible content renders as a normal sibling of the (empty,
-      # transparent) stretched `<a>`, wrapped in its own `position:
-      # relative` span so a real link nested inside a cell's content (e.g.
-      # a second, more specific action) still stays clickable above the
-      # row-wide overlay.
+      # Visible content renders as a sibling of the (empty, transparent)
+      # stretched `<a>`, wrapped in a `pointer-events-none` span so plain
+      # content (the common case -- a name, a badge) doesn't sit in the
+      # way of clicks meant for the row-wide overlay underneath it. Pass
+      # `interactive: true` on a cell that renders a real, more specific
+      # link/button of its own (e.g. an "Edit" action) to flip that span
+      # back to `pointer-events-auto`, so that cell's own content takes
+      # the click instead of falling through to the row link.
       class CellComponent < AtomicView::Component
-        attr_reader :path, :label, :first, :align, :clickable
+        attr_reader :path, :label, :first, :align, :clickable, :interactive
 
-        def initialize(path:, label:, first:, align: :left, clickable: true, **options)
+        def initialize(path:, label:, first:, align: :left, clickable: true, interactive: false, **options)
           super()
           @path = path
           @label = label
           @first = first
           @align = align
           @clickable = clickable
+          @interactive = interactive
           @options = options
         end
 
@@ -40,6 +44,10 @@ module AtomicView
           @options.except(:class)
         end
 
+        def content_class
+          interactive ? "relative pointer-events-auto" : "relative pointer-events-none"
+        end
+
         private
 
         def base_classes

data/lib/atomic_view/components/table_component.rb

@@ -24,32 +24,37 @@ module AtomicView
     #
     # `with_column` is an opt-in alternative to hand-building the <thead>:
     # give it at least one column and TableComponent renders the header row
-    # itself, from `<th>`s built by TableComponent::ColumnComponent -- you
-    # still own `<tbody>` content (typically TableComponent::RowComponent
-    # rows) in the block, same as before:
+    # itself, from `<th>`s built by TableComponent::ColumnComponent -- and
+    # wraps the block's return value in a <tbody> for you too, so the block
+    # only has to render rows (typically TableComponent::RowComponent),
+    # same as it would for a turbo_stream append/update elsewhere:
     #
     #   <%= render AtomicView::Components::TableComponent.new(model: Booking) do |table| %>
     #     <% table.with_column(attribute: :camper_name) %>
     #     <% table.with_column(attribute: :status, align: :center) %>
     #     <% table.with_column(label: "") %>
     #
-    #     <tbody>
-    #       <% @bookings.each do |booking| %>
-    #         <%= render(AtomicView::Components::TableComponent::RowComponent.new(record: booking, label: booking.camper_name, path: booking_path(booking))) do |row| %>
-    #           <% row.with_cell { booking.camper_name } %>
-    #           <% row.with_cell(align: :center) { render(BadgeComponent.new) { booking.status } } %>
-    #           <% row.with_cell { render(LinkComponent.new(edit_booking_path(booking), variant: :outline)) { "Edit" } } %>
-    #         <% end %>
+    #     <% @bookings.each do |booking| %>
+    #       <%= render(AtomicView::Components::TableComponent::RowComponent.new(record: booking, label: booking.camper_name, path: booking_path(booking))) do |row| %>
+    #         <% row.with_cell { booking.camper_name } %>
+    #         <% row.with_cell(align: :center) { render(BadgeComponent.new) { booking.status } } %>
+    #         <% row.with_cell(interactive: true) { render(LinkComponent.new(edit_booking_path(booking), variant: :outline)) { "Edit" } } %>
     #       <% end %>
-    #     </tbody>
+    #     <% end %>
     #   <% end %>
     #
+    # The <tbody>'s `id` defaults to `model.model_name.plural` (e.g.
+    # "bookings") so a turbo_stream response can target it directly with
+    # no extra bookkeeping -- pass `body_id:` to override it (a nested
+    # resource sharing a differently-named frame, say).
+    #
     # A table with no columns given renders exactly as before -- `with_column`
-    # is opt-in, not a second required API. `model:` is passed through to
-    # each column so `with_column(attribute: :camper_name)` can default its
-    # label via `model.human_attribute_name(:camper_name)`; a column with no
-    # backing attribute (like the blank "" header above, for an actions
-    # column) just passes `label:` directly instead.
+    # is opt-in, not a second required API, and in that raw mode you still
+    # own the whole `<thead>`/`<tbody>` yourself. `model:` is passed through
+    # to each column so `with_column(attribute: :camper_name)` can default
+    # its label via `model.human_attribute_name(:camper_name)`; a column
+    # with no backing attribute (like the blank "" header above, for an
+    # actions column) just passes `label:` directly instead.
     class TableComponent < AtomicView::Component
       HEAD_ROW_CLASSES = "text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground border-b border-border"
       BODY_ROW_CLASSES = "border-b border-border hover:bg-offset"
@@ -58,15 +63,20 @@ module AtomicView
 
       attr_reader :model
 
-      def initialize(model: nil, **options)
+      def initialize(model: nil, body_id: nil, **options)
         super()
         @model = model
+        @body_id = body_id
         @options = options
       end
 
       def call
         tag.table(**@options.except(:class), class: class_names(base_classes, @options[:class])) do
-          safe_join([columns_header, content].compact)
+          if columns?
+            safe_join([columns_header, tag.tbody(content, id: body_id)])
+          else
+            content
+          end
         end
       end
 
@@ -89,6 +99,10 @@ module AtomicView
         columns.any?
       end
 
+      def body_id
+        @body_id || model&.model_name&.plural
+      end
+
       def base_classes
         "w-full text-sm"
       end

data/lib/atomic_view/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module AtomicView
-  VERSION = "0.4.0"
+  VERSION = "0.5.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: atomic_view
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Joel Warrington
@@ -140,12 +140,14 @@ files:
 - README.md
 - Rakefile
 - app/assets/config/atomic_view_manifest.js
+- app/assets/javascripts/atomic_view/controllers/auto_submit_controller.js
 - app/assets/javascripts/atomic_view/controllers/chip_controller.js
 - app/assets/javascripts/atomic_view/controllers/command_palette_controller.js
 - app/assets/javascripts/atomic_view/controllers/dropdown_controller.js
 - app/assets/javascripts/atomic_view/controllers/gantt_controller.js
 - app/assets/javascripts/atomic_view/controllers/hotkey_controller.js
 - app/assets/javascripts/atomic_view/controllers/modal_controller.js
+- app/assets/javascripts/atomic_view/controllers/searchable_select_controller.js
 - app/assets/javascripts/atomic_view/controllers/theme_toggle_controller.js
 - app/assets/javascripts/atomic_view/controllers/toast_controller.js
 - app/assets/javascripts/atomic_view/controllers/tooltip_controller.js
@@ -192,6 +194,7 @@ files:
 - lib/atomic_view/components/command_palette_component/section_component.rb
 - lib/atomic_view/components/concerns/button_variants.rb
 - lib/atomic_view/components/concerns/field_chrome.rb
+- lib/atomic_view/components/concerns/searchable.rb
 - lib/atomic_view/components/concerns/section_support.rb
 - lib/atomic_view/components/date_field_component.rb
 - lib/atomic_view/components/date_select_component.rb
@@ -204,6 +207,8 @@ files:
 - lib/atomic_view/components/empty_state_component.rb
 - lib/atomic_view/components/field_component.html.erb
 - lib/atomic_view/components/field_component.rb
+- lib/atomic_view/components/filters_component.html.erb
+- lib/atomic_view/components/filters_component.rb
 - lib/atomic_view/components/gantt_component.html.erb
 - lib/atomic_view/components/gantt_component.rb
 - lib/atomic_view/components/gantt_component/date_header_component.html.erb