Module: MaquinaComponents::ComboboxHelper

Defined in:
app/helpers/maquina_components/combobox_helper.rb

Overview

Combobox Helper

Provides a builder pattern for creating combobox components with a clean API.

Examples:

Basic usage

<%= combobox placeholder: "Select framework..." do |cb| %>
  <% cb.trigger %>
  <% cb.content do %>
    <% cb.input placeholder: "Search..." %>
    <% cb.list do %>
      <% cb.option value: "nextjs" do %>Next.js<% end %>
      <% cb.option value: "remix" do %>Remix<% end %>
    <% end %>
    <% cb.empty %>
  <% end %>
<% end %>

Simple data-driven combobox

<%= combobox_simple placeholder: "Select framework...",
                    options: [
                      { value: "nextjs", label: "Next.js" },
                      { value: "remix", label: "Remix" }
                    ] %>

With groups

<%= combobox placeholder: "Select..." do |cb| %>
  <% cb.trigger %>
  <% cb.content do %>
    <% cb.input %>
    <% cb.list do %>
      <% cb.group do %>
        <% cb.label "Frontend" %>
        <% cb.option value: "react" do %>React<% end %>
        <% cb.option value: "vue" do %>Vue<% end %>
      <% end %>
      <% cb.separator %>
      <% cb.group do %>
        <% cb.label "Backend" %>
        <% cb.option value: "rails" do %>Rails<% end %>
      <% end %>
    <% end %>
    <% cb.empty %>
  <% end %>
<% end %>

Defined Under Namespace

Classes: ComboboxBuilder, ComboboxContentBuilder, ComboboxListBuilder

Instance Method Summary collapse

Instance Method Details

#combobox(id: nil, name: nil, value: nil, placeholder: "Select...", css_classes: "", **html_options) {|ComboboxBuilder| ... } ⇒ String

Renders a combobox using the builder pattern

Parameters:

  • id (String, nil) (defaults to: nil) —

    Explicit ID for the combobox

  • name (String, nil) (defaults to: nil) —

    Form field name

  • value (String, nil) (defaults to: nil) —

    Currently selected value

  • placeholder (String) (defaults to: "Select...") —

    Placeholder text

  • css_classes (String) (defaults to: "") —

    Additional CSS classes

  • html_options (Hash) —

    Additional HTML attributes

Yields:

Returns:

  • (String) —

    Rendered HTML



60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
# File 'app/helpers/maquina_components/combobox_helper.rb', line 60

def combobox(id: nil, name: nil, value: nil, placeholder: "Select...", css_classes: "", **html_options, &block)
  builder = ComboboxBuilder.new(self, placeholder: placeholder)
  combobox_id = id || "combobox-#{SecureRandom.hex(4)}"
  builder.combobox_id = combobox_id

  capture(builder, &block)

  render "components/combobox",
    id: combobox_id,
    name: name,
    value: value,
    placeholder: placeholder,
    css_classes: css_classes,
    **html_options do |_id|
    builder.to_html
  end
end

#combobox_simple(options:, placeholder: "Select...", search_placeholder: "Search...", empty_text: "No results found.", value: nil, name: nil, trigger_options: {}, content_options: {}) ⇒ String

Renders a simple combobox from data

Parameters:

  • options (Array<Hash>) —

    Array of option configurations with :value and :label keys

  • placeholder (String) (defaults to: "Select...") —

    Placeholder text

  • search_placeholder (String) (defaults to: "Search...") —

    Search input placeholder

  • empty_text (String) (defaults to: "No results found.") —

    Text shown when no results

  • value (String, nil) (defaults to: nil) —

    Currently selected value

  • name (String, nil) (defaults to: nil) —

    Form field name

  • trigger_options (Hash) (defaults to: {}) —

    Options for the trigger button

  • content_options (Hash) (defaults to: {}) —

    Options for the content container

Returns:

  • (String) —

    Rendered HTML



89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
 
# File 'app/helpers/maquina_components/combobox_helper.rb', line 89

def combobox_simple(
  options:,
  placeholder: "Select...",
  search_placeholder: "Search...",
  empty_text: "No results found.",
  value: nil,
  name: nil,
  trigger_options: {},
  content_options: {}
)
  combobox(placeholder: placeholder, value: value, name: name) do |cb|
    cb.trigger(**trigger_options)

    cb.content(**content_options) do
      cb.input(placeholder: search_placeholder)
      cb.list do
        options.each do |opt|
          selected = value.present? && opt[:value].to_s == value.to_s
          cb.option(value: opt[:value], selected: selected, disabled: opt[:disabled]) do
            opt[:label] || opt[:value]
          end
        end
      end
      cb.empty(text: empty_text)
    end
  end
end