Class: Tramway::Form::CheckboxComponent

Inherits:
TailwindComponent show all
Defined in:
app/components/tramway/form/checkbox_component.rb

Overview

Tailwind-styled checkbox field

Constant Summary collapse

CHECKBOX_BUTTON_BASE_STYLES = 
{
  display: 'inline-flex',
  'align-items': 'center',
  'justify-content': 'center',
  padding: '0',
  'line-height': '1',
  'box-sizing': 'border-box',
  border: '1px solid #fafafa',
  'box-shadow': '0 0 0 1px #fafafa'
}.freeze
CHECKBOX_BUTTON_SIZES = 
{
  small: '1rem',
  medium: '1.25rem',
  large: '1.5rem'
}.freeze

Constants inherited from TailwindComponent

TailwindComponent::SIZE_CLASSES

Constants included from Helpers::ViewsHelper

Helpers::ViewsHelper::FORM_SIZES

Instance Method Summary collapse

Methods included from Helpers::ViewsHelper

#tramway_back_button, #tramway_badge, #tramway_button, #tramway_cell, #tramway_chat, #tramway_container, #tramway_flash, #tramway_form_for, #tramway_header, #tramway_main_container, #tramway_row, #tramway_table, #tramway_title, #tramway_tooltip

Methods included from Helpers::ComponentHelper

#component

Methods included from Helpers::DecorateHelper

#tramway_decorate

Instance Method Details

#checkbox_button_classes ⇒ Object 



24
25
26
27
28
29
30
31
 
# File 'app/components/tramway/form/checkbox_component.rb', line 24

def checkbox_button_classes
  "peer #{size_class(:checkbox_input)} shrink-0 rounded-sm border border-zinc-50 bg-zinc-900 text-zinc-50 " \
    'ring-offset-zinc-950 ' \
    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300 ' \
    'focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ' \
    'data-[state=checked]:border-zinc-50 data-[state=checked]:bg-zinc-50 ' \
    'data-[state=checked]:text-zinc-950'
end

#checkbox_button_style ⇒ Object 



37
38
39
 
# File 'app/components/tramway/form/checkbox_component.rb', line 37

def checkbox_button_style
  checkbox_button_style_attributes.map { |key, value| "#{key}: #{value}" }.join('; ')
end

#checkbox_indicator_classes ⇒ Object 



33
34
35
 
# File 'app/components/tramway/form/checkbox_component.rb', line 33

def checkbox_indicator_classes
  "flex hidden #{size_class(:checkbox_indicator)} items-center justify-center text-current"
end

#checked? ⇒ Boolean

Returns:

  • (Boolean) 


41
42
43
 
# File 'app/components/tramway/form/checkbox_component.rb', line 41

def checked?
  !!ActiveModel::Type::Boolean.new.cast(options.fetch(:checked, value))
end

#hidden_checkbox_id ⇒ Object 



55
56
57
 
# File 'app/components/tramway/form/checkbox_component.rb', line 55

def hidden_checkbox_id
  "#{@for}_input"
end

#hidden_checkbox_options ⇒ Object 



45
46
47
48
49
50
51
52
53
 
# File 'app/components/tramway/form/checkbox_component.rb', line 45

def hidden_checkbox_options
  options.merge(
    id: hidden_checkbox_id,
    class: 'hidden',
    data: options.fetch(:data, {}).merge('ui--checkbox-target' => 'input'),
    tabindex: -1,
    aria: { hidden: true }
  )
end

#label_classes ⇒ Object 



59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
# File 'app/components/tramway/form/checkbox_component.rb', line 59

def label_classes
  default_classes = 'cursor-pointer mb-0'

  case size
  when :small
    default_classes += ' text-sm leading-5'
  when :medium
    default_classes += ' text-base leading-6'
  when :large
    default_classes += ' text-lg leading-7'
  end

  default_classes
end

#label_style ⇒ Object 



74
75
76
77
78
79
80
 
# File 'app/components/tramway/form/checkbox_component.rb', line 74

def label_style
  {
    'align-self': 'center',
    'line-height': checkbox_button_size,
    'margin-bottom': '0'
  }.map { |key, value| "#{key}: #{value}" }.join('; ')
end