Class: NitroKit::Switch

Inherits:
Component
  • Object
show all
Defined in:
app/components/nitro_kit/switch.rb

Constant Summary collapse

BUTTON = 
[
  "inline-flex items-center shrink-0",
  "bg-background rounded-full border",
  "transition-colors duration-200 ease-in-out",
  "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ring-offset-background",

  # Checked
  "[&[aria-checked='true']]:bg-foreground [&[aria-checked='true']]:border-foreground",

  # Checked > Handle
  "[&[aria-checked='false']_[data-slot='handle']]:bg-primary",
  "[&[aria-checked='true']_[data-slot='handle']]:translate-x-[calc(theme(spacing.5)-1px)] [&[aria-checked='true']_[data-slot='handle']]:bg-background"
].freeze
HANDLE = 
[
  "pointer-events-none inline-block rounded-full shadow-sm ring-0",
  "transition translate-x-[3px] duration-200 ease-in-out"
].freeze
SIZE = 
{
  base: "h-6 w-10 [&_[data-slot=handle]]:size-4 [&[aria-checked='true']_[data-slot='handle']]:translate-x-[calc(theme(spacing.5)-1px)]",
  sm: "h-5 w-8 [&_[data-slot=handle]]:size-3 [&[aria-checked='true']_[data-slot='handle']]:translate-x-[calc(theme(spacing.4)-1px)]"
}

Instance Attribute Summary collapse

Attributes inherited from Component

#attrs

Instance Method Summary collapse

Methods inherited from Component

#data_merge, merge, #merge

Constructor Details

#initialize(name, checked: false, disabled: false, size: :base, description: nil, **attrs) ⇒ Switch

Returns a new instance of Switch.



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

def initialize(
  name,
  checked: false,
  disabled: false,
  size: :base,
  description: nil,
  **attrs
)
  super(**attrs)

  @name = name
  @checked = checked
  @disabled = disabled
  @size = size
  @description = description
end

Instance Attribute Details

#checked ⇒ Object (readonly)

Returns the value of attribute checked.



44
45
46
 
# File 'app/components/nitro_kit/switch.rb', line 44

def checked
  @checked
end

#description ⇒ Object (readonly)

Returns the value of attribute description.



44
45
46
 
# File 'app/components/nitro_kit/switch.rb', line 44

def description
  @description
end

#disabled ⇒ Object (readonly)

Returns the value of attribute disabled.



44
45
46
 
# File 'app/components/nitro_kit/switch.rb', line 44

def disabled
  @disabled
end

#name ⇒ Object (readonly)

Returns the value of attribute name.



44
45
46
 
# File 'app/components/nitro_kit/switch.rb', line 44

def name
  @name
end

#size ⇒ Object (readonly)

Returns the value of attribute size.



44
45
46
 
# File 'app/components/nitro_kit/switch.rb', line 44

def size
  @size
end

Instance Method Details

#view_template ⇒ Object 



46
47
48
49
50
51
52
53
54
55
56
57
58
 
# File 'app/components/nitro_kit/switch.rb', line 46

def view_template
  button(
    **attrs,
    type: "button",
    class: merge([BUTTON, SIZE[size], attrs[:class]]),
    data: data_merge(attrs[:data], {controller: "nk--switch", action: "nk--switch#toggle"}),
    role: "switch",
    aria: {checked: checked.to_s}
  ) do
    span(class: "sr-only") { description }
    handle
  end
end