Class: HakumiComponents::Tabs::Component

Inherits:
BaseComponent
  • Object
show all
Extended by:
T::Sig
Defined in:
app/components/hakumi_components/tabs/component.rb

Constant Summary collapse

TabKey = 
T.type_alias { T.nilable(Types::HtmlKey) }
TabItem = 
T.type_alias { T.any(HakumiComponents::Tabs::Item::Component, ViewComponent::Slot) }
TYPES = 
%i[line card editable_card].freeze
TAB_POSITIONS = 
%i[top bottom left right].freeze
INDICATOR_ALIGNS = 
%i[start center end].freeze

Constants inherited from BaseComponent

BaseComponent::ControllerOptions, BaseComponent::DateInput, BaseComponent::DateLikeValue, BaseComponent::DimensionInput, BaseComponent::HtmlPayloadInput, BaseComponent::I18nOptionValue, BaseComponent::PresenceArray, BaseComponent::PresenceScalar, BaseComponent::PresenceValue, BaseComponent::RawHtmlInput, BaseComponent::SIZES, BaseComponent::SizeValue, BaseComponent::SymbolInput

Instance Attribute Summary collapse

Instance Method Summary collapse

Methods inherited from BaseComponent

#append_data_token, boolean_html_param, #build_inline_style, cast_boolean, #cast_boolean, #class_names, #component_classes, #data_attributes_from, #dimension_to_css, #ensure_dom_id!, float_html_param, #generate_id, #html_classes, html_param, html_primitive_param, #html_style, #i18n_scope, integer_html_param, #merge_attributes, #render_value, #size_to_pixels, #stimulus_attrs, string_html_param, string_or_symbol_array_html_param, symbol_html_param, #t_default, #translate_with_default, #validate_inclusion!, #validate_required!, #value_present?

Constructor Details

#initialize(active_key: nil, default_active_key: nil, type: :line, size: :default, tab_position: :top, centered: false, animated: true, indicator: nil, tab_bar_gutter: nil, tab_bar_extra_content_left: nil, tab_bar_extra_content_right: nil, add_icon: nil, hide_add: false, destroy_inactive_tab_pane: false, **html_options) ⇒ Component

Returns a new instance of Component.



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
86
87
88
89
90
91
92
93
94
95
 
# File 'app/components/hakumi_components/tabs/component.rb', line 60

def initialize(
  active_key: nil,
  default_active_key: nil,
  type: :line,
  size: :default,
  tab_position: :top,
  centered: false,
  animated: true,
  indicator: nil,
  tab_bar_gutter: nil,
  tab_bar_extra_content_left: nil,
  tab_bar_extra_content_right: nil,
  add_icon: nil,
  hide_add: false,
  destroy_inactive_tab_pane: false,
  **html_options
)
  @active_key = T.let(active_key, TabKey)
  @default_active_key = T.let(default_active_key, TabKey)
  @type = T.let(type, Symbol)
  @size = T.let(size, Symbol)
  @tab_position = T.let(tab_position, Symbol)
  @centered = T.let(centered, T::Boolean)
  @animated = T.let(animated, T::Boolean)
  @indicator = T.let(HakumiComponents::Tabs::IndicatorConfig.coerce(indicator), HakumiComponents::Tabs::IndicatorConfig)
  @tab_bar_gutter = T.let(tab_bar_gutter, T.nilable(Integer))
  @tab_bar_extra_content_left = T.let(tab_bar_extra_content_left, T.nilable(Types::Renderable))
  @tab_bar_extra_content_right = T.let(tab_bar_extra_content_right, T.nilable(Types::Renderable))
  @add_icon = T.let(add_icon, T.nilable(Types::Renderable))
  @hide_add = T.let(hide_add, T::Boolean)
  @destroy_inactive_tab_pane = T.let(destroy_inactive_tab_pane, T::Boolean)
  @html_options = T.let(html_options, Types::HtmlAttributes)
  @close_button_template_html = T.let(nil, T.nilable(String))

  validate_props!
end

Instance Attribute Details

#active_key ⇒ Object (readonly)

Returns the value of attribute active_key.



113
114
115
 
# File 'app/components/hakumi_components/tabs/component.rb', line 113

def active_key
  @active_key
end

#add_icon ⇒ Object (readonly)

Returns the value of attribute add_icon.



110
111
112
 
# File 'app/components/hakumi_components/tabs/component.rb', line 110

def add_icon
  @add_icon
end

#animated ⇒ Object (readonly)

Returns the value of attribute animated.



101
102
103
 
# File 'app/components/hakumi_components/tabs/component.rb', line 101

def animated
  @animated
end

#centered ⇒ Object (readonly)

Returns the value of attribute centered.



101
102
103
 
# File 'app/components/hakumi_components/tabs/component.rb', line 101

def centered
  @centered
end

#default_active_key ⇒ Object (readonly)

Returns the value of attribute default_active_key.



113
114
115
 
# File 'app/components/hakumi_components/tabs/component.rb', line 113

def default_active_key
  @default_active_key
end

#destroy_inactive_tab_pane ⇒ Object (readonly)

Returns the value of attribute destroy_inactive_tab_pane.



101
102
103
 
# File 'app/components/hakumi_components/tabs/component.rb', line 101

def destroy_inactive_tab_pane
  @destroy_inactive_tab_pane
end

#hide_add ⇒ Object (readonly)

Returns the value of attribute hide_add.



101
102
103
 
# File 'app/components/hakumi_components/tabs/component.rb', line 101

def hide_add
  @hide_add
end

#indicator ⇒ Object (readonly)

Returns the value of attribute indicator.



104
105
106
 
# File 'app/components/hakumi_components/tabs/component.rb', line 104

def indicator
  @indicator
end

#size ⇒ Object (readonly)

Returns the value of attribute size.



98
99
100
 
# File 'app/components/hakumi_components/tabs/component.rb', line 98

def size
  @size
end

#tab_bar_extra_content_left ⇒ Object (readonly)

Returns the value of attribute tab_bar_extra_content_left.



110
111
112
 
# File 'app/components/hakumi_components/tabs/component.rb', line 110

def tab_bar_extra_content_left
  @tab_bar_extra_content_left
end

#tab_bar_extra_content_right ⇒ Object (readonly)

Returns the value of attribute tab_bar_extra_content_right.



110
111
112
 
# File 'app/components/hakumi_components/tabs/component.rb', line 110

def tab_bar_extra_content_right
  @tab_bar_extra_content_right
end

#tab_bar_gutter ⇒ Object (readonly)

Returns the value of attribute tab_bar_gutter.



107
108
109
 
# File 'app/components/hakumi_components/tabs/component.rb', line 107

def tab_bar_gutter
  @tab_bar_gutter
end

#tab_position ⇒ Object (readonly)

Returns the value of attribute tab_position.



98
99
100
 
# File 'app/components/hakumi_components/tabs/component.rb', line 98

def tab_position
  @tab_position
end

#type ⇒ Object (readonly)

Returns the value of attribute type.



98
99
100
 
# File 'app/components/hakumi_components/tabs/component.rb', line 98

def type
  @type
end

Instance Method Details

#close_button_template_html ⇒ Object 



185
186
187
188
189
190
191
192
193
194
195
196
197
 
# File 'app/components/hakumi_components/tabs/component.rb', line 185

def close_button_template_html
  @close_button_template_html ||= ::ApplicationController.render(
    HakumiComponents::Button::Component.new(
      type: :text,
      size: :small,
      icon: :close,
      class: "hakumi-tabs-tab-remove",
      aria: { label: remove_tab_aria_label },
      data: { action: "click->hakumi--tabs#removeTab", key: "{{key}}" }
    ),
    layout: false
  ).strip
end

#editable? ⇒ Boolean

Returns:

  • (Boolean) 


135
136
137
 
# File 'app/components/hakumi_components/tabs/component.rb', line 135

def editable?
  @type == :editable_card
end

#extra_content? ⇒ Boolean

Returns:

  • (Boolean) 


212
213
214
 
# File 'app/components/hakumi_components/tabs/component.rb', line 212

def extra_content?
  @tab_bar_extra_content_left.present? || @tab_bar_extra_content_right.present?
end

#extra_content_left ⇒ Object 



217
218
219
 
# File 'app/components/hakumi_components/tabs/component.rb', line 217

def extra_content_left
  @tab_bar_extra_content_left
end

#extra_content_right ⇒ Object 



222
223
224
 
# File 'app/components/hakumi_components/tabs/component.rb', line 222

def extra_content_right
  @tab_bar_extra_content_right
end

#indicator_align ⇒ Object 



150
151
152
 
# File 'app/components/hakumi_components/tabs/component.rb', line 150

def indicator_align
  @indicator.align
end

#indicator_size ⇒ Object 



145
146
147
 
# File 'app/components/hakumi_components/tabs/component.rb', line 145

def indicator_size
  @indicator.size
end

#initial_active_key ⇒ Object 



140
141
142
 
# File 'app/components/hakumi_components/tabs/component.rb', line 140

def initial_active_key
  @active_key || @default_active_key
end

#item_active?(item, index) ⇒ Boolean

Returns:

  • (Boolean) 


227
228
229
230
231
 
# File 'app/components/hakumi_components/tabs/component.rb', line 227

def item_active?(item, index)
  key = item.public_send(:key)
  active = initial_active_key
  active ? key.to_s == active.to_s : index == 0
end

#nav_list_style ⇒ Object 



205
206
207
208
209
 
# File 'app/components/hakumi_components/tabs/component.rb', line 205

def nav_list_style
  styles = T.let([], T::Array[String])
  styles << "--tab-bar-gutter: #{@tab_bar_gutter}px" if @tab_bar_gutter
  styles.join("; ") if styles.any?
end

#pane_template_html ⇒ Object 



180
181
182
 
# File 'app/components/hakumi_components/tabs/component.rb', line 180

def pane_template_html
  '<div class="hakumi-tabs-tabpane hakumi-tabs-tabpane-hidden" data-key="{{key}}" data-hakumi--tabs-target="pane" aria-hidden="true">{{content}}</div>'.dup.force_encoding("UTF-8")
end

#remove_tab_aria_label ⇒ Object 



200
201
202
 
# File 'app/components/hakumi_components/tabs/component.rb', line 200

def remove_tab_aria_label
  t_default(:remove_tab_aria_label, default: "Remove tab")
end

#tab_template_html ⇒ Object 



175
176
177
 
# File 'app/components/hakumi_components/tabs/component.rb', line 175

def tab_template_html
  '<div class="hakumi-tabs-tab" data-key="{{key}}" data-hakumi--tabs-target="tab" data-action="click->hakumi--tabs#selectTab"><div class="hakumi-tabs-tab-btn"><span class="hakumi-tabs-tab-label">{{label}}</span></div>{{closeButton}}</div>'.dup.force_encoding("UTF-8")
end

#tabs_classes ⇒ Object 



116
117
118
119
120
121
122
123
124
125
126
127
 
# File 'app/components/hakumi_components/tabs/component.rb', line 116

def tabs_classes
  class_names(
    "tabs",
    {
      @type => @type != :line,
      @size => @size != :default,
      @tab_position => @tab_position != :top,
      centered: @centered
    },
    html_classes(@html_options)
  )
end

#vertical? ⇒ Boolean

Returns:

  • (Boolean) 


130
131
132
 
# File 'app/components/hakumi_components/tabs/component.rb', line 130

def vertical?
  %i[left right].include?(@tab_position)
end

#wrapper_attributes ⇒ Object 



155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
 
# File 'app/components/hakumi_components/tabs/component.rb', line 155

def wrapper_attributes
  values = T.let({
    active_key: initial_active_key,
    tab_position: @tab_position.to_s,
    indicator_align: indicator_align.to_s
  }, Types::StimulusValues)
  values[:indicator_size] = indicator_size if indicator_size
  if editable?
    values[:tab_template] = tab_template_html
    values[:pane_template] = pane_template_html
    values[:close_button_template] = close_button_template_html
  end

  merge_attributes(
    { class: tabs_classes, data: stimulus_attrs("hakumi--tabs", values) },
    @html_options.except(:class)
  )
end