Class: Shadcn::Checkbox::Component

Inherits:
ApplicationViewComponent show all
Defined in:
app/components/shadcn/checkbox/component.rb

Overview

Port of registry/new-york-v4/ui/checkbox.tsx

Like Radix, this renders a role="checkbox" button and — when name: is given — a visually hidden native checkbox next to it so the control takes part in normal form submission.

Constant Summary collapse

INDICATOR_CLASSES = 
"grid place-content-center text-current transition-none"
HIDDEN_INPUT_STYLE =

Radix's BubbleInput styling: present for the form, invisible to the user.

"transform:translateX(-100%);position:absolute;" \
"pointer-events:none;opacity:0;margin:0"

Constants inherited from ApplicationViewComponent

ApplicationViewComponent::CONTENTS_STYLE, ApplicationViewComponent::VOID_TAGS

Instance Attribute Summary collapse

Attributes inherited from ApplicationViewComponent

#attributes

Instance Method Summary collapse

Methods inherited from ApplicationViewComponent

#css_classes, default_tag, #merged_style, #render_element, #shadcn_t, slot_name, #style_variants, #tag_name

Constructor Details

#initialize(name: nil, value: "on", checked: false, indeterminate: false, disabled: false, **attributes) ⇒ Component

Returns a new instance of Component.



34
35
36
37
38
39
40
41
42
 
# File 'app/components/shadcn/checkbox/component.rb', line 34

def initialize(name: nil, value: "on", checked: false, indeterminate: false,
               disabled: false, **attributes)
  @name = name
  @value = value
  @checked = checked
  @indeterminate = indeterminate
  @disabled = disabled
  super(**attributes)
end

Instance Attribute Details

#checked ⇒ Object (readonly)

Returns the value of attribute checked.



32
33
34
 
# File 'app/components/shadcn/checkbox/component.rb', line 32

def checked
  @checked
end

#disabled ⇒ Object (readonly)

Returns the value of attribute disabled.



32
33
34
 
# File 'app/components/shadcn/checkbox/component.rb', line 32

def disabled
  @disabled
end

#indeterminate ⇒ Object (readonly)

Returns the value of attribute indeterminate.



32
33
34
 
# File 'app/components/shadcn/checkbox/component.rb', line 32

def indeterminate
  @indeterminate
end

#name ⇒ Object (readonly)

Returns the value of attribute name.



32
33
34
 
# File 'app/components/shadcn/checkbox/component.rb', line 32

def name
  @name
end

#value ⇒ Object (readonly)

Returns the value of attribute value.



32
33
34
 
# File 'app/components/shadcn/checkbox/component.rb', line 32

def value
  @value
end

Instance Method Details

#call ⇒ Object 



72
73
74
 
# File 'app/components/shadcn/checkbox/component.rb', line 72

def call
  safe_join([ render_element(body: indicator), hidden_input ].compact)
end

#element_attributes(**defaults) ⇒ Object 



54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
# File 'app/components/shadcn/checkbox/component.rb', line 54

def element_attributes(**defaults)
  super(**{
    type: "button",
    role: "checkbox",
    value: value,
    disabled: (true if disabled),
    "aria-checked" => (state == "indeterminate" ? "mixed" : checked.to_s),
    "data-state" => state,
    "data-disabled" => (true if disabled),
    "data-controller" => "shadcn--checkbox",
    "data-shadcn--checkbox-checked-value" => checked,
    "data-shadcn--checkbox-indeterminate-value" => indeterminate,
    "data-shadcn--checkbox-disabled-value" => disabled,
    "data-shadcn--checkbox-input-id-value" => input_id,
    "data-action" => "click->shadcn--checkbox#toggle keydown->shadcn--checkbox#keydown"
  }.merge(defaults))
end

#input_id ⇒ Object 



50
51
52
 
# File 'app/components/shadcn/checkbox/component.rb', line 50

def input_id
  @input_id ||= "shadcn-checkbox-#{SecureRandom.hex(4)}" if name
end

#state ⇒ Object 



44
45
46
47
48
 
# File 'app/components/shadcn/checkbox/component.rb', line 44

def state
  return "indeterminate" if indeterminate

  checked ? "checked" : "unchecked"
end