# typed: false # frozen_string_literal: true module Ariadne module UI module Toggle class Component < Ariadne::BaseComponent option :size, default: proc { :md } option :reversed, default: proc { false } # @param form_url [String] The URL to POST to when the toggle switch is toggled. If `nil`, the toggle switch will not make any requests. # @param csrf_token [String] A CSRF token that will be sent to the server as "authenticity_token" when the toggle switch is toggled. Unused if `src` is `nil`. # @param checked [Boolean] Whether the toggle switch is on or off. # @param enabled [Boolean] Whether or not the toggle switch responds to user input. option :form_url, default: proc { nil } option :form_method, default: proc { :post } option :checked, default: proc { false } option :enabled, default: proc { true } accepts_html_attributes do |html_attrs| html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(size:), html_attrs[:class]].join(" ")) if @checked html_attrs[:checked] = @checked html_attrs["aria-pressed"] = @checked end html_attrs[:data] ||= {} html_attrs[:data] = { controller: "#{stimulus_name} #{html_attrs[:data].delete(:controller)}".strip, "#{stimulus_name}-target": "toggle", action: "click->#{stimulus_name}#toggle #{html_attrs[:data].delete(:action)}".strip, }.merge(html_attrs[:data]) end def before_render @label_id = ::Ariadne::ViewHelper.generate_id if @form_url.present? csrf_token = view_context.form_authenticity_token( form_options: { method: @form_method, action: @form_url, }, ) form_values = { "#{stimulus_name}-csrf-token-value": csrf_token, "#{stimulus_name}-form-method-value": @form_method, "#{stimulus_name}-form-url-value": @form_url, } html_attrs[:data] = html_attrs[:data].merge(form_values) end end style do base do [ "ariadne-peer", "ariadne-relative", "ariadne-rounded-full", "peer-focus:ariadne-ring-2", "ariadne-bg-zinc-200", "dark:ariadne-bg-zinc-700", "peer-checked:ariadne-bg-indigo-500", "after:ariadne-absolute", "after:ariadne-content-['']", "after:ariadne-start-0.5", "after:ariadne-top-0.5", "after:ariadne-rounded-full", "after:ariadne-transition-all", "after:ariadne-bg-white", "peer-checked:after:ariadne-translate-x-full", ] end variants do size do sm do [ "ariadne-w-7", "ariadne-h-4", "after:ariadne-h-3", "after:ariadne-w-3", ] end md do [ "ariadne-w-9", "ariadne-h-5", "after:ariadne-h-4", "after:ariadne-w-4", ] end end end end style(:label) do base do [ "ariadne-relative", "ariadne-inline-flex", "ariadne-gap-3", "ariadne-items-center", "ariadne-cursor-pointer", ] end variants do reversed do yes do ["ariadne-flex-row-reverse"] end no do end end end end end end end end