Class: Ariadne::ToggleComponent

Inherits:
Component
  • Object
show all
Defined in:
app/components/ariadne/toggle_component.rb

Overview

Simple toggle switch with on/off state. The logic is controlled by toggleable_controller and styles applied through tailwind’s group+data attributes: tailwindcss.com/docs/hover-focus-and-other-states#data-attributes

Constant Summary collapse

DEFAULT_TAG = 
:div
DEFAULT_STATUS_LABEL_POSITION = 
:start
STATUS_LABEL_POSITION_MAPPINGS = 
{
  start: "ariadne-flex-row",
  end: "ariadne-flex-row-reverse",
}.freeze
STATUS_LABEL_POSITION_OPTIONS = 
STATUS_LABEL_POSITION_MAPPINGS.keys.freeze
DEFAULT_SIZE = 
:md
THUMB_SIZE_MAPPINGS = 
{ sm: "ariadne-translate-x-0 ariadne-h-3 ariadne-w-3 group-aria-checked/toggle:ariadne-translate-x-3", md: "ariadne-translate-x-0 ariadne-h-5 ariadne-w-5 group-aria-checked/toggle:ariadne-translate-x-5" }.freeze
TRACK_SIZE_MAPPINGS = 
{ sm: "ariadne-h-2 ariadne-w-4", md: "ariadne-h-4 ariadne-w-9" }.freeze
BUTTON_SIZE_MAPPINGS = 
{ sm: "ariadne-h-3 ariadne-w-6", md: "ariadne-h-5 ariadne-w-10" }.freeze
LABEL_SIZE_MAPPINGS = 
{ sm: "ariadne-text-xs", md: "ariadne-text-lg" }.freeze
SIZE_OPTIONS = 
THUMB_SIZE_MAPPINGS.keys.freeze
DEFAULT_CLASSES = 
{
  wrapper: "ariadne-group/wrapper data-[disabled=true]:ariadne-opacity-50 data-[disabled=true]:ariadne-cursor-auto",
  button: "ariadne-flex ariadne-justify-center ariadne-group/toggle ariadne-relative ariadne-inline-flex ariadne-flex-shrink-0 group-data-[disabled=false]/wrapper:ariadne-cursor-pointer ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-focus:outline-none ariadne-focus:ring-2 ariadne-focus:ring-indigo-600 ariadne-focus:ring-offset-2 disabled:ariadne-cursor-auto",
}
DEFAULT_ATTRIBUTES = 
{
  wrapper: {}.freeze,
  button: {
    role: "switch",
    "data-controller": "toggleable",
    "data-toggleable-synced-attrs-value": '["aria-checked"]',
    "data-action": "click->toggleable#toggle",
  },
}.freeze
DEFAULT_TRACK_COLOR = 
:indigo
TRACK_COLOR_MAPPINGS = 
{
  white: "group-aria-checked/toggle:ariadne-bg-white",
  green: "group-aria-checked/toggle:ariadne-bg-green-600",
  blue: "group-aria-checked/toggle:ariadne-bg-blue-600",
  billy_purple: "group-aria-checked/toggle:ariadne-bg-billy-purple",
  indigo: "group-aria-checked/toggle:ariadne-bg-indigo-600",
}
TRACK_COLOR_OPTIONS = 
TRACK_COLOR_MAPPINGS.keys.freeze

Constants inherited from Component

Component::BASE_HIDDEN_CLASS, Component::BASE_MAIN_CLASSES, Component::BASE_WRAPPER_CLASSES, Component::INVALID_ARIA_LABEL_TAGS

Constants included from ActionViewExtensions::FormHelper

ActionViewExtensions::FormHelper::DEFAULT_FORM_CLASSES

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::INTEGER_TYPES, FetchOrFallbackHelper::InvalidValueError, FetchOrFallbackHelper::TRUE_OR_FALSE

Instance Method Summary collapse

Methods included from ActionViewExtensions::FormHelper

#ariadne_form_with

Methods included from ClassNameHelper

#merge_class_names

Methods included from LoggerHelper

#logger, #silence_deprecations?, #silence_warnings?

Methods included from FetchOrFallbackHelper

#check_incoming_attribute, #check_incoming_tag, #check_incoming_value, #fetch_or_raise, #fetch_or_raise_boolean, #fetch_or_raise_integer

Constructor Details

#initialize(classes: nil, checked: false, disabled: false, size: DEFAULT_SIZE, color: DEFAULT_TRACK_COLOR, status_label_position: DEFAULT_STATUS_LABEL_POSITION, attributes: {}) ⇒ ToggleComponent

Returns a new instance of ToggleComponent.

Examples:

Default


<%= render(Ariadne::ToggleComponent.new) { "Example" } %>



60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
# File 'app/components/ariadne/toggle_component.rb', line 60

def initialize(
  classes: nil,
  checked: false,
  disabled: false,
  size: DEFAULT_SIZE,
  color: DEFAULT_TRACK_COLOR,
  status_label_position: DEFAULT_STATUS_LABEL_POSITION,
  attributes: {}
)
  @tag = DEFAULT_TAG
  @size = fetch_or_raise(SIZE_OPTIONS, size)
  @status_label_position = fetch_or_raise(STATUS_LABEL_POSITION_OPTIONS, status_label_position)
  @color = fetch_or_raise(TRACK_COLOR_OPTIONS, color)
  @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
  @checked = checked
  @disabled = disabled
  @attributes = DEFAULT_ATTRIBUTES[:wrapper].merge({ "data-label-position": @status_label_position, "data-disabled": @disabled }).merge(attributes)

  @label_classes = merge_class_names(STATUS_LABEL_POSITION_MAPPINGS.fetch(@status_label_position), LABEL_SIZE_MAPPINGS.fetch(@size))

  @button_classes = merge_class_names(DEFAULT_CLASSES[:button], BUTTON_SIZE_MAPPINGS.fetch(@size))
  @button_attributes = DEFAULT_ATTRIBUTES[:button].merge({ "aria-checked": @checked, "data-toggleable-state-value": @checked, disabled: @disabled })

  @thumb_classes = THUMB_SIZE_MAPPINGS.fetch(@size)
  @track_classes = merge_class_names(TRACK_SIZE_MAPPINGS.fetch(@size), TRACK_COLOR_MAPPINGS.fetch(@color))
end

Instance Method Details

#disabled? ⇒ Boolean 



91
92
93
 
# File 'app/components/ariadne/toggle_component.rb', line 91

def disabled?
  @disabled
end

#on? ⇒ Boolean 



87
88
89
 
# File 'app/components/ariadne/toggle_component.rb', line 87

def on?
  @checked
end