Class: BulmaPhlex::FileUpload

Inherits:
Base
  • Object
show all
Defined in:
lib/bulma_phlex/file_upload.rb

Overview

Renders a styled Bulma file upload input element.

Supports Bulma options for color, size, and layout (alignment, fullwidth, boxed), with an optional file name display element. When the file name display is enabled, Stimulus data attributes are wired up automatically for showing the selected filename.

Defined Under Namespace

Classes: DataAttributesBuilder

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(color: nil, size: nil, name: false, align: nil, fullwidth: false, boxed: false, data_attributes_builder: nil) ⇒ FileUpload

Returns a new instance of FileUpload.



40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
# File 'lib/bulma_phlex/file_upload.rb', line 40

def initialize(color: nil,
               size: nil,
               name: false,
               align: nil,
               fullwidth: false,
               boxed: false,
               data_attributes_builder: nil)
  @color = color
  @size = size
  @name = name
  @align = align
  @fullwidth = fullwidth
  @boxed = boxed

  return unless @name

  @data_attributes_builder = data_attributes_builder ||
                             self.class.stimulus_data_attributes("bulma-phlex--file-input-display")
end

Class Method Details

.new(color: nil, size: nil, name: false, align: nil, fullwidth: false, boxed: false, data_attributes_builder: nil) ⇒ Object

Parameters

  • color — Sets the color of the file input
  • size — Sets the size of the file input
  • name — If true, includes the file name display element
  • align — Aligns the file input: "right" or "centered"
  • fullwidth — If true, makes the file input full width
  • boxed — If true, makes the file input boxed
  • data_attributes_builder — A custom builder for the data attributes used for Stimulus integration; defaults to a builder with the controller name "bulma-phlex--file-input-display"


30
31
32
33
34
35
36
37
38
 
# File 'lib/bulma_phlex/file_upload.rb', line 30

def self.new(color: nil,
             size: nil,
             name: false,
             align: nil,
             fullwidth: false,
             boxed: false,
             data_attributes_builder: nil)
  super
end

.stimulus_data_attributes(controller) ⇒ Object 



12
13
14
15
16
17
18
 
# File 'lib/bulma_phlex/file_upload.rb', line 12

def self.stimulus_data_attributes(controller)
  DataAttributesBuilder.new(
    for_file: { controller: controller },
    for_file_input: { "#{controller}-target": "fileInput", action: "#{controller}#show" },
    for_file_list: { "#{controller}-target": "fileList" }
  )
end

Instance Method Details

#view_template ⇒ Object 



60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
# File 'lib/bulma_phlex/file_upload.rb', line 60

def view_template
  div(class: file_classes, data: @data_attributes_builder&.for_file) do
    label(class: "file-label") do
      yield(@data_attributes_builder&.for_file_input)
      span(class: "file-cta") do
        span(class: "file-icon") do
          i(class: "fas fa-upload")
        end
        span(class: "file-label") { plain " Choose a file… " }
      end
      file_name_span if @name
    end
  end
end