Class: LightningUiKit::ResizableComponent

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

Constant Summary collapse

DIRECTIONS = 
%i[horizontal vertical].freeze

Instance Method Summary collapse

Constructor Details

#initialize(direction: :horizontal, initial: 50, **options) ⇒ ResizableComponent

Returns a new instance of ResizableComponent.



7
8
9
10
11
 
# File 'app/components/lightning_ui_kit/resizable_component.rb', line 7

def initialize(direction: :horizontal, initial: 50, **options)
  @direction = DIRECTIONS.include?(direction) ? direction : :horizontal
  @initial = initial
  @options = options
end

Instance Method Details

#classes ⇒ Object 



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

def classes
  layout = horizontal? ? "lui:flex-row" : "lui:flex-col"
  merge_classes([
    "lui:flex lui:h-full lui:w-full lui:overflow-hidden lui:rounded-lg lui:border lui:border-border",
    layout,
    @options[:class]
  ].compact.join(" "))
end

#data ⇒ Object 



46
47
48
49
50
51
 
# File 'app/components/lightning_ui_kit/resizable_component.rb', line 46

def data
  {
    controller: "lui-resizable",
    lui_resizable_direction_value: @direction.to_s
  }.merge(@options[:data] || {})
end

#grip_classes ⇒ Object 



38
39
40
41
42
43
44
 
# File 'app/components/lightning_ui_kit/resizable_component.rb', line 38

def grip_classes
  if horizontal?
    "lui:absolute lui:h-8 lui:w-1 lui:rounded-full lui:bg-border-hover"
  else
    "lui:absolute lui:h-1 lui:w-8 lui:rounded-full lui:bg-border-hover"
  end
end

#handle_classes ⇒ Object 



30
31
32
33
34
35
36
 
# File 'app/components/lightning_ui_kit/resizable_component.rb', line 30

def handle_classes
  if horizontal?
    "lui:relative lui:flex lui:w-px lui:shrink-0 lui:cursor-col-resize lui:items-center lui:justify-center lui:bg-border lui:transition-colors lui:hover:bg-interactive"
  else
    "lui:relative lui:flex lui:h-px lui:shrink-0 lui:cursor-row-resize lui:items-center lui:justify-center lui:bg-border lui:transition-colors lui:hover:bg-interactive"
  end
end

#horizontal? ⇒ Boolean

Returns:

  • (Boolean) 


13
14
15
 
# File 'app/components/lightning_ui_kit/resizable_component.rb', line 13

def horizontal?
  @direction == :horizontal
end

#panel_one_style ⇒ Object 



26
27
28
 
# File 'app/components/lightning_ui_kit/resizable_component.rb', line 26

def panel_one_style
  "flex-basis: #{@initial}%;"
end