Class: PhlexKit::TabsTrigger

Inherits:
BaseComponent show all
Defined in:
app/components/phlex_kit/tabs/tabs_trigger.rb

Constant Summary collapse

AS_TAGS =

id: is a named kwarg (not left in **attrs) because mix would merge a caller id with the deterministic one into an invalid two-token id, breaking the aria pairing pre-JS (and scopeIds' caller-id detection).

%i[button a].freeze

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(value:, as: :button, active: false, id: nil, **attrs) ⇒ TabsTrigger

Returns a new instance of TabsTrigger.



8
9
10
11
12
13
14
15
16
17
 
# File 'app/components/phlex_kit/tabs/tabs_trigger.rb', line 8

def initialize(value:, as: :button, active: false, id: nil, **attrs)
  @value = value
  @as = as.to_sym
  unless AS_TAGS.include?(@as)
    raise ArgumentError, "unknown TabsTrigger as: #{@as.inspect} (use one of #{AS_TAGS.join(", ")})"
  end
  @active = active
  @id = id || "pk-tabs-trigger-#{value}"
  @attrs = attrs
end

Instance Method Details

#view_template ⇒ Object 



18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
# File 'app/components/phlex_kit/tabs/tabs_trigger.rb', line 18

def view_template(&)
  # Deterministic ids pair each trigger with its panel (aria-controls /
  # aria-labelledby); the controller re-scopes them per instance in
  # connect() so multiple tab sets sharing a value can't collide.
  # aria-selected and the roving tabindex are kept in sync by the
  # controller's activeValueChanged.
  base = {
    class: "pk-tabs-trigger", role: "tab", id: @id,
    aria_selected: @active ? "true" : "false",
    aria_controls: "pk-tabs-panel-#{@value}",
    tabindex: @active ? "0" : "-1",
    # data-state is the only hook tabs.css styles the active trigger by —
    # it must be server-rendered or the active tab looks inactive pre-JS.
    data: { phlex_kit__tabs_target: "trigger", action: "click->phlex-kit--tabs#show", value: @value,
            state: @active ? "active" : "inactive" }
  }
  if @as == :a
    a(**mix(base, @attrs), &)
  else
    button(**mix(base.merge(type: :button), @attrs), &)
  end
end