Class: LightningUiKit::TabsComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/lightning_ui_kit/tabs_component.rb

Constant Summary collapse

VARIANTS = 
%i[default line].freeze

Instance Method Summary collapse

Methods inherited from BaseComponent

#merge_classes

Methods included from HeroiconHelper

#heroicon

Constructor Details

#initialize(default_tab: 0, variant: :default, **options) ⇒ TabsComponent

Returns a new instance of TabsComponent.



6
7
8
9
10
 
# File 'app/components/lightning_ui_kit/tabs_component.rb', line 6

def initialize(default_tab: 0, variant: :default, **options)
  @default_tab = default_tab
  @variant = VARIANTS.include?(variant) ? variant : :default
  @options = options
end

Instance Method Details

#classes ⇒ Object 



12
13
14
15
16
17
 
# File 'app/components/lightning_ui_kit/tabs_component.rb', line 12

def classes
  merge_classes([
    "lui:flex lui:flex-col lui:gap-2 lui:w-full",
    @options[:class]
  ].compact.join(" "))
end

#data ⇒ Object 



19
20
21
22
23
24
 
# File 'app/components/lightning_ui_kit/tabs_component.rb', line 19

def data
  {
    controller: "lui-tabs",
    lui_tabs_default_tab_value: @default_tab
  }.merge(@options[:data] || {})
end

#line_variant? ⇒ Boolean

Returns:

  • (Boolean) 


54
55
56
 
# File 'app/components/lightning_ui_kit/tabs_component.rb', line 54

def line_variant?
  @variant == :line
end

#list_classes ⇒ Object 



26
27
28
29
30
31
32
33
34
 
# File 'app/components/lightning_ui_kit/tabs_component.rb', line 26

def list_classes
  base = "lui:inline-flex lui:w-fit lui:items-center lui:justify-center lui:text-foreground-muted"
  case @variant
  when :line
    "#{base} lui:gap-1 lui:rounded-none lui:bg-transparent"
  else
    "#{base} lui:h-9 lui:rounded-lg lui:bg-surface-tertiary lui:p-[3px]"
  end
end

#panel_id(index) ⇒ Object 



62
63
64
 
# File 'app/components/lightning_ui_kit/tabs_component.rb', line 62

def panel_id(index)
  "panel-#{object_id}-#{index}"
end

#tab_classes ⇒ Object 



36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
# File 'app/components/lightning_ui_kit/tabs_component.rb', line 36

def tab_classes
  base = "lui:relative lui:inline-flex lui:items-center lui:justify-center lui:gap-1.5 lui:rounded-md lui:px-3 lui:py-1 lui:text-sm lui:font-medium lui:whitespace-nowrap lui:cursor-pointer " \
         "lui:transition-all lui:duration-150 " \
         "lui:text-foreground-muted lui:hover:text-foreground " \
         "lui:focus:outline-hidden lui:focus-visible:outline lui:focus-visible:outline-2 lui:focus-visible:outline-offset-[-2px] lui:focus-visible:outline-focus " \
         "lui:disabled:pointer-events-none lui:disabled:opacity-50"

  case @variant
  when :line
    "#{base} lui:bg-transparent lui:data-[active]:bg-transparent " \
    "lui:data-[active]:text-foreground " \
    "lui:after:absolute lui:after:inset-x-0 lui:after:bottom-[-5px] lui:after:h-0.5 lui:after:bg-foreground lui:after:opacity-0 lui:after:transition-opacity lui:data-[active]:after:opacity-100"
  else
    "#{base} lui:h-[calc(100%-1px)] lui:border lui:border-transparent " \
    "lui:data-[active]:bg-surface lui:data-[active]:text-foreground lui:data-[active]:border-border lui:data-[active]:shadow-sm"
  end
end

#tab_id(index) ⇒ Object 



58
59
60
 
# File 'app/components/lightning_ui_kit/tabs_component.rb', line 58

def tab_id(index)
  "tab-#{object_id}-#{index}"
end