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.

Direct Known Subclasses

Checkbox, Date, Email, File, Number, Password, Phone, RadioButton, Select, Textarea, Url

Constant Summary collapse

SIZES = 
{
  sm: ["px-2.5", "py-2", "text-sm"],
  default: ["px-3", "py-2.5", "text-sm"],
  lg: ["px-3.5", "py-3", "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:, class: nil, disabled: false, options: {}, size: :default) ⇒ Field

Returns a new instance of Field.



62
63
64
65
66
67
68
69
70
 
# File 'app/components/flowbite/input/field.rb', line 62

def initialize(attribute:, form:, class: nil, disabled: false, options: {}, size: :default)
  @attribute = attribute
  @class = Array.wrap(binding.local_variable_get(:class))
  @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
57
58
 
# File 'app/components/flowbite/input/field.rb', line 48

def styles
  Flowbite::Styles.from_hash(
    {
      default: {
        default: ["bg-neutral-secondary-medium", "border", "border-default-medium", "text-heading", "rounded-base", "focus:ring-brand", "focus:border-brand", "block", "w-full", "shadow-xs", "placeholder:text-body"],
        disabled: ["bg-neutral-secondary-medium", "border", "border-default-medium", "text-fg-disabled", "rounded-base", "focus:ring-brand", "focus:border-brand", "block", "w-full", "shadow-xs", "cursor-not-allowed", "placeholder:text-fg-disabled"],
        error: ["bg-danger-soft", "border", "border-danger-subtle", "text-fg-danger-strong", "rounded-base", "focus:ring-danger", "focus:border-danger", "block", "w-full", "shadow-xs", "placeholder:text-fg-danger-strong"]
      }
    }.freeze
  )
end

Instance Method Details

#call ⇒ Object

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



73
74
75
76
77
78
79
 
# File 'app/components/flowbite/input/field.rb', line 73

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

#classes ⇒ Object

Returns the CSS classes to apply to the input field



82
83
84
 
# File 'app/components/flowbite/input/field.rb', line 82

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

#input_field_type ⇒ Object

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



87
88
89
 
# File 'app/components/flowbite/input/field.rb', line 87

def input_field_type
  :text_field
end