Class: Shadcn::SelectComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/shadcn/select_component.rb

Overview

Select component for dropdown selection Matches shadcn/ui Select component Uses Stimulus for interactivity

Examples:

Basic select

<%= render Shadcn::SelectComponent.new(name: "fruit", placeholder: "Select a fruit") do |select| %>
  <% select.with_item(value: "apple") { "Apple" } %>
  <% select.with_item(value: "banana") { "Banana" } %>
  <% select.with_item(value: "orange") { "Orange" } %>
<% end %>

With groups

<%= render Shadcn::SelectComponent.new(name: "timezone") do |select| %>
  <% select.with_group(label: "North America") do |group| %>
    <% group.with_item(value: "est") { "Eastern" } %>
    <% group.with_item(value: "pst") { "Pacific" } %>
  <% end %>
<% end %>

Constant Summary collapse

TRIGGER_CLASSES = 
"flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"
CONTENT_CLASSES = 
"absolute left-0 top-full z-50 mt-1 max-h-96 min-w-[var(--radix-select-trigger-width)] w-max overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
VIEWPORT_CLASSES = 
"p-1"

Instance Attribute Summary

Attributes inherited from BaseComponent

#class_name, #data, #html_options

Instance Method Summary collapse

Methods inherited from BaseComponent

#content

Methods included from Rails::Helpers::ClassNameHelper

#cn

Constructor Details

#initialize(name: nil, id: nil, value: nil, placeholder: "Select...", disabled: false, required: false, **options) ⇒ SelectComponent

Returns a new instance of SelectComponent.

Parameters:

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

    Form field name

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

    Element ID

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

    Currently selected value

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

    Placeholder text

  • disabled (Boolean) (defaults to: false) —

    Whether select is disabled

  • required (Boolean) (defaults to: false) —

    Whether select is required



50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
# File 'app/components/shadcn/select_component.rb', line 50

def initialize(
  name: nil,
  id: nil,
  value: nil,
  placeholder: "Select...",
  disabled: false,
  required: false,
  **options
)
  super(**options)
  @name = name
  @id = id
  @value = value
  @placeholder = placeholder
  @disabled = disabled
  @required = required
end