ruby_ui 1.1.0 → 1.2.0

data/lib/ruby_ui/data_table/data_table_search.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableSearch < Base
+    def initialize(path:, name: "search", value: nil, frame_id: nil, placeholder: "Search...", debounce: 300, preserved_params: {}, **attrs)
+      @path = path
+      @name = name
+      @value = value
+      @frame_id = frame_id
+      @placeholder = placeholder
+      @debounce = debounce
+      @preserved_params = preserved_params
+      super(**attrs)
+    end
+
+    def view_template
+      form_attrs = {method: "get", action: @path}
+      form_attrs[:data] = form_data
+
+      form(**attrs.merge(form_attrs)) do
+        render RubyUI::Input.new(
+          type: :search,
+          name: @name,
+          value: @value,
+          placeholder: @placeholder,
+          autocomplete: "off"
+        )
+        @preserved_params.each do |k, v|
+          next if v.nil? || (v.respond_to?(:empty?) && v.empty?)
+          next if k.to_s == @name
+          input(type: "hidden", name: k.to_s, value: v.to_s)
+        end
+      end
+    end
+
+    private
+
+    def debounce_enabled?
+      @debounce && @debounce.to_i > 0
+    end
+
+    def form_data
+      base = {}
+      base[:turbo_frame] = @frame_id if @frame_id
+      if debounce_enabled?
+        base[:controller] = "ruby-ui--data-table-search"
+        base[:"ruby-ui--data-table-search-delay-value"] = @debounce.to_i
+        base[:action] = "input->ruby-ui--data-table-search#submit"
+      end
+      base
+    end
+
+    def default_attrs
+      {class: "max-w-sm flex-1"}
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_search_controller.js

@@ -0,0 +1,62 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Module-level map survives controller disconnect/connect across Turbo Frame swaps.
+// Keyed by the search form's action URL.
+const PENDING_FOCUS = new Map();
+
+export default class extends Controller {
+  static values = { delay: { type: Number, default: 300 } };
+
+  connect() {
+    this.timer = null;
+    this.beforeFrameRender = this.captureBeforeRender.bind(this);
+    document.addEventListener("turbo:before-frame-render", this.beforeFrameRender);
+    // New instance after a Turbo Frame swap — check for captured state.
+    this.restoreIfPending();
+  }
+
+  disconnect() {
+    clearTimeout(this.timer);
+    document.removeEventListener("turbo:before-frame-render", this.beforeFrameRender);
+  }
+
+  submit(event) {
+    if (event && event.type !== "input") return;
+    clearTimeout(this.timer);
+    if (this.delayValue <= 0) return;
+    this.timer = setTimeout(() => this.element.requestSubmit(), this.delayValue);
+  }
+
+  captureBeforeRender() {
+    const input = this.input();
+    if (!input || document.activeElement !== input) return;
+    PENDING_FOCUS.set(this.key(), {
+      selectionStart: input.selectionStart,
+      selectionEnd: input.selectionEnd
+    });
+  }
+
+  restoreIfPending() {
+    const state = PENDING_FOCUS.get(this.key());
+    if (!state) return;
+    PENDING_FOCUS.delete(this.key());
+    const input = this.input();
+    if (!input) return;
+    input.focus();
+    const len = input.value.length;
+    try {
+      input.setSelectionRange(
+        Math.min(state.selectionStart ?? len, len),
+        Math.min(state.selectionEnd ?? len, len)
+      );
+    } catch (e) {}
+  }
+
+  input() {
+    return this.element.querySelector('input[type="search"]');
+  }
+
+  key() {
+    return this.element.action || "_";
+  }
+}

data/lib/ruby_ui/data_table/data_table_select_all_checkbox.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableSelectAllCheckbox < Base
+    def view_template
+      render RubyUI::Checkbox.new(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria_label: "Select all",
+        data: {
+          "ruby-ui--data-table-target": "selectAll",
+          action: "change->ruby-ui--data-table#toggleAll"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_selection_summary.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableSelectionSummary < Base
+    def initialize(total_on_page: 0, **attrs)
+      @total_on_page = total_on_page
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        plain "0 of #{@total_on_page} row(s) selected."
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm text-muted-foreground",
+        data: {"ruby-ui--data-table-target": "selectionSummary"}
+      }
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_sort_head.rb

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+require "cgi"
+
+module RubyUI
+  class DataTableSortHead < Base
+    def initialize(column_key:, label:, sort: nil, direction: nil, sort_param: "sort", direction_param: "direction", page_param: "page", path: "", query: {}, **attrs)
+      @column_key = column_key
+      @label = label
+      @sort = sort
+      @direction = direction
+      @sort_param = sort_param
+      @direction_param = direction_param
+      @page_param = page_param
+      @path = path
+      @query = query.to_h.transform_keys(&:to_s)
+      super(**attrs)
+    end
+
+    def view_template
+      render RubyUI::TableHead.new(class: "text-foreground whitespace-nowrap", **attrs) do
+        a(href: sort_href, class: "inline-flex items-center gap-1 text-inherit no-underline hover:text-foreground transition-colors") do
+          plain @label
+          sort_icon
+        end
+      end
+    end
+
+    private
+
+    def current_direction
+      (@sort.to_s == @column_key.to_s) ? @direction : nil
+    end
+
+    def next_params
+      next_dir = {nil => "asc", "asc" => "desc", "desc" => nil}[current_direction]
+      base = @query.except(@sort_param, @direction_param, @page_param)
+      next_dir ? base.merge(@sort_param => @column_key.to_s, @direction_param => next_dir) : base
+    end
+
+    def sort_href
+      qs = build_query(next_params)
+      qs.empty? ? @path : "#{@path}?#{qs}"
+    end
+
+    def build_query(hash)
+      hash.flat_map { |k, v|
+        Array(v).map { |val| "#{CGI.escape(k.to_s)}=#{CGI.escape(val.to_s)}" }
+      }.join("&")
+    end
+
+    def sort_icon
+      icon_name = case current_direction
+      when "asc" then :chevron_up
+      when "desc" then :chevron_down
+      else :chevrons_up_down
+      end
+      icon_class = current_direction ? "inline-block w-3 h-3" : "inline-block w-3 h-3 opacity-30"
+      render_sort_svg(icon_name, icon_class)
+    end
+
+    def render_sort_svg(icon_name, icon_class)
+      case icon_name
+      when :chevron_up
+        # chevron-up: polyline pointing up
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "12",
+          height: "12",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: icon_class
+        ) { |s| s.polyline(points: "18 15 12 9 6 15") }
+      when :chevron_down
+        # chevron-down: polyline pointing down
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "12",
+          height: "12",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: icon_class
+        ) { |s| s.polyline(points: "6 9 12 15 18 9") }
+      else
+        # chevrons-up-down
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "12",
+          height: "12",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: icon_class
+        ) do |s|
+          s.polyline(points: "8 15 12 19 16 15")
+          s.polyline(points: "8 9 12 5 16 9")
+        end
+      end
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_toolbar.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableToolbar < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {class: "flex items-center justify-between gap-2"}
+    end
+  end
+end

data/lib/ruby_ui/masked_input/masked_input.rb

@@ -2,8 +2,18 @@
 
 module RubyUI
   class MaskedInput < Base
+    def initialize(save_unmasked: false, **attrs)
+      @save_unmasked = save_unmasked
+      super(**attrs)
+    end
+
     def view_template
-      Input(type: "text", **attrs)
+      if @save_unmasked
+        Input(type: "text", **attrs.merge(name: "#{attrs[:name]}-masked"))
+        input(type: "hidden", name: attrs[:name], value: attrs[:value])
+      else
+        Input(type: "text", **attrs)
+      end
     end
 
     private

data/lib/ruby_ui/masked_input/masked_input_controller.js

@@ -5,5 +5,18 @@ import { MaskInput } from "maska";
 export default class extends Controller {
   connect() {
     new MaskInput(this.element)
+    this.#boundSync = this.#sync.bind(this);
+    this.element.addEventListener("maska", this.#boundSync);
+  }
+
+  disconnect() {
+    this.element.removeEventListener("maska", this.#boundSync);
+  }
+
+  #boundSync = null;
+
+  #sync(event) {
+    const hidden = this.element.nextElementSibling;
+    if (hidden?.type === "hidden") hidden.value = event.detail.unmasked;
   }
 }

data/lib/ruby_ui/native_select/native_select.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelect < Base
+    def initialize(size: :default, **attrs)
+      @size = size
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(
+        class: "group/native-select relative w-fit has-[select:disabled]:opacity-50"
+      ) do
+        select(**attrs, &block)
+        render RubyUI::NativeSelectIcon.new
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__form_field_target: "input",
+          action: "change->ruby-ui--form-field#onChange invalid->ruby-ui--form-field#onInvalid"
+        },
+        class: [
+          "border-border bg-transparent text-sm w-full min-w-0 appearance-none rounded-md border py-1 pr-8 pl-2.5 shadow-xs transition-[color,box-shadow] outline-none select-none ring-0 ring-ring/0",
+          "placeholder:text-muted-foreground",
+          "selection:bg-primary selection:text-primary-foreground",
+          "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-invalid:ring-destructive/20 aria-invalid:border-destructive aria-invalid:ring-2",
+          (@size == :sm) ? "h-7 rounded-md py-0.5" : "h-9"
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/native_select/native_select_docs.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+class Views::Docs::NativeSelect < Views::Base
+  def view_template
+    component = "NativeSelect"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Native Select", description: "A styled native HTML select element with consistent design system integration.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Default", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect do
+              NativeSelectOption(value: "") { "Select a fruit" }
+              NativeSelectOption(value: "apple") { "Apple" }
+              NativeSelectOption(value: "banana") { "Banana" }
+              NativeSelectOption(value: "blueberry") { "Blueberry" }
+              NativeSelectOption(value: "pineapple") { "Pineapple" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Groups", description: "Use NativeSelectGroup to organize options into categories.", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect do
+              NativeSelectOption(value: "") { "Select a department" }
+              NativeSelectGroup(label: "Engineering") do
+                NativeSelectOption(value: "frontend") { "Frontend" }
+                NativeSelectOption(value: "backend") { "Backend" }
+                NativeSelectOption(value: "devops") { "DevOps" }
+              end
+              NativeSelectGroup(label: "Sales") do
+                NativeSelectOption(value: "account_executive") { "Account Executive" }
+                NativeSelectOption(value: "sales_development") { "Sales Development" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", description: "Add the disabled attribute to the NativeSelect component to disable the select.", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect(disabled: true) do
+              NativeSelectOption(value: "") { "Select a fruit" }
+              NativeSelectOption(value: "apple") { "Apple" }
+              NativeSelectOption(value: "banana") { "Banana" }
+              NativeSelectOption(value: "blueberry") { "Blueberry" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Invalid", description: "Use aria-invalid to show validation errors.", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            NativeSelect(aria: {invalid: "true"}) do
+              NativeSelectOption(value: "") { "Select a fruit" }
+              NativeSelectOption(value: "apple") { "Apple" }
+              NativeSelectOption(value: "banana") { "Banana" }
+              NativeSelectOption(value: "blueberry") { "Blueberry" }
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Native Select vs Select" }
+
+      div(class: "space-y-2 text-sm text-muted-foreground") do
+        p { "NativeSelect: Choose for native browser behavior, superior performance, or mobile-optimized dropdowns." }
+        p { "Select: Choose for custom styling, animations, or complex interactions." }
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/native_select/native_select_group.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelectGroup < Base
+    def view_template(&)
+      optgroup(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {}
+    end
+  end
+end

data/lib/ruby_ui/native_select/native_select_icon.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelectIcon < Base
+    def view_template(&block)
+      span(**attrs) do
+        if block
+          block.call
+        else
+          icon
+        end
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        class: "size-4",
+        aria_hidden: "true"
+      ) do |s|
+        s.path(d: "m6 9 6 6 6-6")
+      end
+    end
+
+    def default_attrs
+      {
+        class: "text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 select-none"
+      }
+    end
+  end
+end

data/lib/ruby_ui/native_select/native_select_option.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelectOption < Base
+    def view_template(&)
+      option(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {}
+    end
+  end
+end

data/lib/ruby_ui.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RubyUI
-  VERSION = "1.1.0"
+  VERSION = "1.2.0"
 end

metadata

@@ -1,18 +1,22 @@
 --- !ruby/object:Gem::Specification
 name: ruby_ui
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.2.0
 platform: ruby
 authors:
 - George Kettle
+autorequire:
 bindir: bin
 cert_chain: []
-date: 1980-01-02 00:00:00.000000000 Z
+date: 2026-04-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
   requirement: !ruby/object:Gem::Requirement
     requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
     - - ">="
       - !ruby/object:Gem::Version
         version: 2.1.2
@@ -20,6 +24,9 @@ dependencies:
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
     - - ">="
       - !ruby/object:Gem::Version
         version: 2.1.2
@@ -200,11 +207,16 @@ files:
 - lib/ruby_ui/collapsible/collapsible_docs.rb
 - lib/ruby_ui/collapsible/collapsible_trigger.rb
 - lib/ruby_ui/combobox/combobox.rb
+- lib/ruby_ui/combobox/combobox_badge.rb
+- lib/ruby_ui/combobox/combobox_badge_trigger.rb
 - lib/ruby_ui/combobox/combobox_checkbox.rb
+- lib/ruby_ui/combobox/combobox_clear_button.rb
 - lib/ruby_ui/combobox/combobox_controller.js
 - lib/ruby_ui/combobox/combobox_docs.rb
 - lib/ruby_ui/combobox/combobox_empty_state.rb
+- lib/ruby_ui/combobox/combobox_input_trigger.rb
 - lib/ruby_ui/combobox/combobox_item.rb
+- lib/ruby_ui/combobox/combobox_item_indicator.rb
 - lib/ruby_ui/combobox/combobox_list.rb
 - lib/ruby_ui/combobox/combobox_list_group.rb
 - lib/ruby_ui/combobox/combobox_popover.rb
@@ -231,6 +243,27 @@ files:
 - lib/ruby_ui/context_menu/context_menu_label.rb
 - lib/ruby_ui/context_menu/context_menu_separator.rb
 - lib/ruby_ui/context_menu/context_menu_trigger.rb
+- lib/ruby_ui/data_table/data_table.rb
+- lib/ruby_ui/data_table/data_table_bulk_actions.rb
+- lib/ruby_ui/data_table/data_table_column_toggle.rb
+- lib/ruby_ui/data_table/data_table_column_visibility_controller.js
+- lib/ruby_ui/data_table/data_table_controller.js
+- lib/ruby_ui/data_table/data_table_docs.rb
+- lib/ruby_ui/data_table/data_table_expand_toggle.rb
+- lib/ruby_ui/data_table/data_table_form.rb
+- lib/ruby_ui/data_table/data_table_kaminari_adapter.rb
+- lib/ruby_ui/data_table/data_table_manual_adapter.rb
+- lib/ruby_ui/data_table/data_table_pagination.rb
+- lib/ruby_ui/data_table/data_table_pagination_bar.rb
+- lib/ruby_ui/data_table/data_table_pagy_adapter.rb
+- lib/ruby_ui/data_table/data_table_per_page_select.rb
+- lib/ruby_ui/data_table/data_table_row_checkbox.rb
+- lib/ruby_ui/data_table/data_table_search.rb
+- lib/ruby_ui/data_table/data_table_search_controller.js
+- lib/ruby_ui/data_table/data_table_select_all_checkbox.rb
+- lib/ruby_ui/data_table/data_table_selection_summary.rb
+- lib/ruby_ui/data_table/data_table_sort_head.rb
+- lib/ruby_ui/data_table/data_table_toolbar.rb
 - lib/ruby_ui/dialog/dialog.rb
 - lib/ruby_ui/dialog/dialog_content.rb
 - lib/ruby_ui/dialog/dialog_controller.js
@@ -274,6 +307,11 @@ files:
 - lib/ruby_ui/masked_input/masked_input.rb
 - lib/ruby_ui/masked_input/masked_input_controller.js
 - lib/ruby_ui/masked_input/masked_input_docs.rb
+- lib/ruby_ui/native_select/native_select.rb
+- lib/ruby_ui/native_select/native_select_docs.rb
+- lib/ruby_ui/native_select/native_select_group.rb
+- lib/ruby_ui/native_select/native_select_icon.rb
+- lib/ruby_ui/native_select/native_select_option.rb
 - lib/ruby_ui/pagination/pagination.rb
 - lib/ruby_ui/pagination/pagination_content.rb
 - lib/ruby_ui/pagination/pagination_docs.rb
@@ -383,6 +421,7 @@ homepage: https://rubygems.org/gems/ruby_ui
 licenses:
 - MIT
 metadata: {}
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -397,7 +436,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.9
+rubygems_version: 3.5.22
+signing_key:
 specification_version: 4
 summary: RubyUI is a UI Component Library for Ruby developers.
 test_files: []