Class: UI::SidebarInput

Inherits:
Phlex::HTML
  • Object
show all
Includes:
SidebarInputBehavior
Defined in:
app/components/ui/sidebar_input.rb

Overview

Input - Phlex implementation

Input field styled for sidebar usage. Typically used for search or filter functionality.

Examples:

Basic usage

render UI::Input.new(placeholder: "Search...")

With icon

render UI::Group.new do
  div(class: "relative") do
    render UI::Icon.new(name: "search", class: "absolute left-2 top-2 size-4 text-muted-foreground")
    render UI::Input.new(placeholder: "Search...", class: "pl-8")
  end
end

Instance Method Summary collapse

Methods included from SidebarInputBehavior

#sidebar_input_classes, #sidebar_input_data_attributes, #sidebar_input_html_attributes

Constructor Details

#initialize(type: "text", classes: "", **attributes) ⇒ SidebarInput

Returns a new instance of SidebarInput.



21
22
23
24
25
 
# File 'app/components/ui/sidebar_input.rb', line 21

def initialize(type: "text", classes: "", **attributes)
  @type = type
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#view_template ⇒ Object 



27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
# File 'app/components/ui/sidebar_input.rb', line 27

def view_template
  all_attributes = sidebar_input_html_attributes.merge(type: @type)

  if @attributes.key?(:class)
    merged_class = TailwindMerge::Merger.new.merge([
      all_attributes[:class],
      @attributes[:class]
    ].compact.join(" "))
    all_attributes = all_attributes.merge(class: merged_class)
  end

  all_attributes = all_attributes.deep_merge(@attributes.except(:class))

  input(**all_attributes)
end