Class: Flowbite::Input::Field

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/flowbite/input/field.rb

Overview

The indivdual input component for use in forms without labels or error messages.

Use this when you want to render an input field on its own without any surrounding elements, ie as a building block in more complex input components.

To render a complete input field with labels and error messages, use ‘Flowbite::InputField` instead.

Constant Summary collapse

SIZES = 
{
  sm: ["p-2", "text-xs"],
  default: ["p-2.5", "text-sm"],
  lg: ["p-4", "text-base"]
}.freeze
STATES = 
[
  DEFAULT = :default,
  DISABLED = :disabled,
  ERROR = :error
].freeze

Instance Attribute Summary collapse

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(attribute:, form:, disabled: false, options: {}, size: :default) ⇒ Field

Returns a new instance of Field.



60
61
62
63
64
65
66
67
 
# File 'app/components/flowbite/input/field.rb', line 60

def initialize(attribute:, form:, disabled: false, options: {}, size: :default)
  @attribute = attribute
  @disabled = disabled
  @form = form
  @options = options || {}
  @object = form.object
  @size = size
end

Instance Attribute Details

#options ⇒ Object (readonly)

Returns the value of attribute options.



27
28
29
 
# File 'app/components/flowbite/input/field.rb', line 27

def options
  @options
end

#size ⇒ Object (readonly)

Returns the value of attribute size.



27
28
29
 
# File 'app/components/flowbite/input/field.rb', line 27

def size
  @size
end

#style ⇒ Object (readonly)

Returns the value of attribute style.



27
28
29
 
# File 'app/components/flowbite/input/field.rb', line 27

def style
  @style
end

Class Method Details

.classes(size: :default, state: :default, style: :default) ⇒ Object 



30
31
32
33
34
 
# File 'app/components/flowbite/input/field.rb', line 30

def classes(size: :default, state: :default, style: :default)
  style = styles.fetch(style)
  state_classes = style.fetch(state)
  state_classes + sizes.fetch(size)
end

.sizes ⇒ Hash

Returns the sizes this Field supports.

This is effectively the SIZES constant, but provided as a method to return the constant from the current class, not the superclass.

classes.

Returns:

  • (Hash) —

    A hash mapping size names to their corresponding CSS



43
44
45
 
# File 'app/components/flowbite/input/field.rb', line 43

def sizes
  const_get(:SIZES)
end

.styles ⇒ Object

rubocop:disable Layout/LineLength



48
49
50
51
52
53
54
55
56
 
# File 'app/components/flowbite/input/field.rb', line 48

def styles
  {
    default: Flowbite::Style.new(
      default: ["bg-gray-50", "border", "border-gray-300", "text-gray-900", "rounded-lg", "focus:ring-blue-500", "focus:border-blue-500", "block", "w-full", "dark:bg-gray-700", "dark:border-gray-600", "dark:placeholder-gray-400", "dark:text-white", "dark:focus:ring-blue-500", "dark:focus:border-blue-500"],
      disabled: ["bg-gray-100", "border", "border-gray-300", "text-gray-900", "text-sm", "rounded-lg", "focus:ring-blue-500", "focus:border-blue-500", "block", "w-full", "p-2.5", "cursor-not-allowed", "dark:bg-gray-700", "dark:border-gray-600", "dark:placeholder-gray-400", "dark:text-gray-400", "dark:focus:ring-blue-500", "dark:focus:border-blue-500"],
      error: ["bg-red-50", "border", "border-red-500", "text-red-900", "placeholder-red-700", "rounded-lg", "focus:ring-red-500", "dark:bg-gray-700", "focus:border-red-500", "block", "w-full", "dark:text-red-500", "dark:placeholder-red-500", "dark:border-red-500"]
    )
  }.freeze
end

Instance Method Details

#call ⇒ Object

Returns the HTML to use for the actual input field element.



70
71
72
73
74
75
76
 
# File 'app/components/flowbite/input/field.rb', line 70

def call
  @form.send(
    input_field_type,
    @attribute,
    **input_options
  )
end

#classes ⇒ Object

Returns the CSS classes to apply to the input field



79
80
81
 
# File 'app/components/flowbite/input/field.rb', line 79

def classes
  self.class.classes(size: size, state: state)
end

#input_field_type ⇒ Object

Returns the name of the method used to generate HTML for the input field



84
85
86
 
# File 'app/components/flowbite/input/field.rb', line 84

def input_field_type
  :text_field
end