tramway 0.5.4.1 → 0.5.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0b3a940800b0be153a5c1eb7655a1f4203ac977accf41579e43221766843c0e8
-  data.tar.gz: ead462e416c64538748b393652233a4fb755f6c874dcf2d618e027ff4cfa77dc
+  metadata.gz: 21ffe76c2224bd46292479de272ccdb59f0095075043507af3dd6098d5559933
+  data.tar.gz: 6547f3ac892439dddb165dbf7d8a06dcb90d8adb6f12b65d921cb277ebf7754a
 SHA512:
-  metadata.gz: 835993aedeccd2cd7873c3cb12416d5c7c90f45d0cb234926e544a251e6bbc7a889a4a68db36f9adec55b360d246f146701a37307875ad7729f2f029f0e829fe
-  data.tar.gz: b78685a91ce1adbb6da37659972a5206b891cccde030a3fb18ee8ba559f49bc73144b5db0636fedc22ed2f9466cab67e74afe0192f0c162283f1009e85ed4886
+  metadata.gz: 93bdfec725bc98cb5ab5a045604fe00c6669eaf8d89eedb081e0750a4b1073fda7c7f99964a3e4b8bbfb4f668024ca9341f512c5fed77d17ea05eeb31de19f37
+  data.tar.gz: 6d6d161386768b114e82e031888ce118383bfb377c6b5e1551d9f8b7300f077af50eb6cb2bff3a6d4523ab0f43bbc77b69b3af180ed4895d7b8c24558c1876a4

data/app/components/tailwind_component.rb

@@ -10,4 +10,36 @@ class TailwindComponent < Tramway::Component::Base
   option :options
   option :label
   option :for
+  option :size, default: -> { :middle }
+
+  SIZE_CLASSES = {
+    small: {
+      text_input: 'text-sm px-2 py-1',
+      select_input: 'text-sm px-2 py-1',
+      file_button: 'text-sm px-3 py-1',
+      submit_button: 'text-sm px-3 py-1',
+      multiselect_input: 'text-sm px-2 py-1'
+    },
+    middle: {
+      text_input: 'text-base px-3 py-2',
+      select_input: 'text-base px-3 py-2',
+      file_button: 'text-base px-4 py-2',
+      submit_button: 'text-base px-4 py-2',
+      multiselect_input: 'text-base px-3 py-2'
+    },
+    large: {
+      text_input: 'text-lg px-4 py-3',
+      select_input: 'text-lg px-4 py-3',
+      file_button: 'text-lg px-5 py-3',
+      submit_button: 'text-lg px-5 py-3',
+      multiselect_input: 'text-lg px-4 py-3'
+    }
+  }.freeze
+
+  private
+
+  def size_class(key)
+    size_classes = SIZE_CLASSES.fetch(size) { SIZE_CLASSES[:middle] }
+    size_classes.fetch(key) { SIZE_CLASSES[:middle].fetch(key) }
+  end
 end

data/app/components/tailwinds/form/builder.rb

@@ -5,59 +5,90 @@ module Tailwinds
     # Provides Tailwind-styled forms
     # :reek:InstanceVariableAssumption
     class Builder < Tramway::Views::FormBuilder
+      def initialize(object_name, object, template, options)
+        super
+
+        @form_size = options[:size] || options['size'] || :middle
+      end
+
       def text_field(attribute, **options, &)
+        sanitized_options = sanitize_options(options)
+
         render(Tailwinds::Form::TextFieldComponent.new(
                  input: input(:text_field),
-                 value: get_value(attribute, options),
-                 **default_options(attribute, options)
+                 value: get_value(attribute, sanitized_options),
+                 **default_options(attribute, sanitized_options)
+               ), &)
+      end
+
+      def number_field(attribute, **options, &)
+        sanitized_options = sanitize_options(options)
+
+        render(Tailwinds::Form::NumberFieldComponent.new(
+                 input: input(:number_field),
+                 value: get_value(attribute, sanitized_options),
+                 **default_options(attribute, sanitized_options)
                ), &)
       end
 
       def text_area(attribute, **options, &)
+        sanitized_options = sanitize_options(options)
+
         render(Tailwinds::Form::TextAreaComponent.new(
                  input: input(:text_area),
-                 value: get_value(attribute, options),
-                 **default_options(attribute, options)
+                 value: get_value(attribute, sanitized_options),
+                 **default_options(attribute, sanitized_options)
                ), &)
       end
 
       def password_field(attribute, **options, &)
+        sanitized_options = sanitize_options(options)
+
         render(Tailwinds::Form::TextFieldComponent.new(
                  input: input(:password_field),
-                 **default_options(attribute, options)
+                 **default_options(attribute, sanitized_options)
                ), &)
       end
 
       def file_field(attribute, **options, &)
-        input = super(attribute, **options.merge(class: :hidden))
+        sanitized_options = sanitize_options(options)
+        input = super(attribute, **sanitized_options.merge(class: :hidden))
 
-        render(Tailwinds::Form::FileFieldComponent.new(input:, **default_options(attribute, options)), &)
+        render(Tailwinds::Form::FileFieldComponent.new(input:, **default_options(attribute, sanitized_options)), &)
       end
 
       def select(attribute, collection, **options, &)
+        sanitized_options = sanitize_options(options)
+
         render(Tailwinds::Form::SelectComponent.new(
                  input: input(:select),
-                 value: options[:selected] || object.public_send(attribute),
-                 collection: explicitly_add_blank_option(collection, options),
-                 **default_options(attribute, options)
+                 value: sanitized_options[:selected] || object.public_send(attribute),
+                 collection: explicitly_add_blank_option(collection, sanitized_options),
+                 **default_options(attribute, sanitized_options)
                ), &)
       end
 
       def multiselect(attribute, collection, **options, &)
+        sanitized_options = sanitize_options(options)
+
         render(Tailwinds::Form::MultiselectComponent.new(
                  input: input(:text_field),
-                 value: options[:value] || options[:selected] || object.public_send(attribute),
+                 value: sanitized_options[:value] || sanitized_options[:selected] || object.public_send(attribute),
                  collection:,
-                 **default_options(attribute, options)
+                 **default_options(attribute, sanitized_options)
                ), &)
       end
 
-      def submit(action, **, &)
-        render(Tailwinds::Form::SubmitButtonComponent.new(action, **), &)
+      def submit(action, **options, &)
+        sanitized_options = sanitize_options(options)
+
+        render(Tailwinds::Form::SubmitButtonComponent.new(action, size: form_size, **sanitized_options), &)
       end
 
       private
 
+      attr_reader :form_size
+
       def input(method_name)
         unbound_method = self.class.superclass.instance_method(method_name)
         unbound_method.bind(self)
@@ -72,7 +103,8 @@ module Tailwinds
           attribute:,
           label: label_build(attribute, options),
           for: for_id(attribute),
-          options:
+          options:,
+          size: form_size
         }
       end
 
@@ -88,6 +120,13 @@ module Tailwinds
         "#{object_name}_#{attribute}"
       end
 
+      def sanitize_options(options)
+        options.dup.tap do |opts|
+          opts.delete(:size)
+          opts.delete('size')
+        end
+      end
+
       # REMOVE IT. WE MUST UNDERSTAND WHY INCLUDE_BLANK DOES NOT WORK
       # :reek:UtilityFunction
       def explicitly_add_blank_option(collection, options)

data/app/components/tailwinds/form/file_field_component.html.haml

@@ -1,5 +1,8 @@
 .mb-4
-  - if @label
-    %label.inline-block.bg-blue-500.hover:bg-blue-700.text-white.font-bold.py-2.px-4.rounded.cursor-pointer.mt-4{ for: @for }
-      = @label
+    - if @label
+      - base_classes = 'inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold rounded cursor-pointer mt-4 '
+      - base_classes += 'dark:bg-blue-600 dark:hover:bg-blue-500'
+      - classes = "#{size_class(:file_button)} #{base_classes}"
+      %label{ for: @for, class: classes }
+        = @label
   = @input

data/app/components/tailwinds/form/multiselect/dropdown_container.html.haml

@@ -1,3 +1,3 @@
-#dropdown.absolute.shadow.top-11.bg-white.z-40.w-full.lef-0.rounded.max-h-select.overflow-y-auto{ data: { action: "click@window->multiselect#closeOnClickOutside" } }
+#dropdown.absolute.shadow.top-11.bg-white.z-40.w-full.lef-0.rounded.max-h-select.overflow-y-auto.dark:bg-gray-800.dark:shadow-lg.dark:ring-1.dark:ring-gray-700{ data: { action: "click@window->multiselect#closeOnClickOutside" } }
   .flex.flex-col.w-full
     {{content}}

data/app/components/tailwinds/form/multiselect/item_container.html.haml

@@ -1,5 +1,5 @@
-.cursor-pointer.w-full.border-gray-100.rounded-t.border-b.hover:bg-teal-100{ data: { action: "click->multiselect#toggleItem", text: "{{text}}", value: "{{value}}" } }
-  .flex.w-full.items-center.p-2.pl-2.border-transparent.border-l-2.relative.hover:border-teal-100
-    .w-full.items-center.flex
+.cursor-pointer.w-full.border-gray-100.rounded-t.border-b.hover:bg-teal-100.dark:border-gray-700.dark:hover:bg-gray-700{ data: { action: "click->multiselect#toggleItem", text: "{{text}}", value: "{{value}}" } }
+  .flex.w-full.items-center.p-2.pl-2.border-transparent.border-l-2.relative.hover:border-teal-100.dark:hover:border-gray-600
+    .w-full.items-center.flex.dark:text-gray-100
       .mx-2.leading-6
         {{text}}

data/app/components/tailwinds/form/multiselect/select_as_input.html.haml

@@ -1,2 +1,12 @@
 .flex-1
-  = @input.call(@attribute, @options.merge(placeholder: "{{placeholder}}", class: "bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800 hidden", data: { 'multiselect-target' => 'hiddenInput' }))
+  - base_classes = 'bg-transparent appearance-none outline-none h-full w-full text-gray-800 hidden '
+  - base_classes += 'dark:text-white dark:placeholder-white'
+  - classes = "#{@size_class} #{base_classes}"
+  = @input.call(
+    @attribute,
+    @options.merge(
+      placeholder: "{{placeholder}}",
+      class: classes,
+      data: { 'multiselect-target' => 'hiddenInput' }
+    )
+  )

data/app/components/tailwinds/form/multiselect/select_as_input.rb

@@ -10,6 +10,7 @@ module Tailwinds
         option :options
         option :attribute
         option :input
+        option :size_class
       end
     end
   end

data/app/components/tailwinds/form/multiselect/selected_item_template.html.haml

@@ -1,4 +1,4 @@
-.flex.justify-center.items-center.m-1.font-medium.py-1.px-2.bg-white.rounded-full.text-teal-700.bg-teal-100.border.border-teal-300
+.flex.justify-center.items-center.m-1.font-medium.py-1.px-2.bg-white.rounded-full.text-teal-700.bg-teal-100.border.border-teal-300.dark:bg-teal-900.dark:text-teal-100.dark:border-teal-700
   .text-xs.font-normal.leading-none.max-w-full.flex-initial
     {{text}}
   .flex.flex-auto.flex-row-reverse

data/app/components/tailwinds/form/multiselect_component.html.haml

@@ -2,9 +2,9 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  .flex.flex-col.relative{ data: multiselect_hash, id: "#{@for}_multiselect" }
+  .flex.flex-col.relative.dark:text-gray-100{ data: multiselect_hash, id: "#{@for}_multiselect" }
     .min-w-96.w-fit
-      .p-1.flex.border.border-gray-200.bg-white.rounded{ data: { "multiselect-target" => "dropdown" } }
+      .p-1.flex.border.border-gray-200.bg-white.rounded.dark:border-gray-600.dark:bg-gray-800{ data: { "multiselect-target" => "dropdown" } }
         .flex.flex-auto.flex-wrap{ data: { "multiselect-target" => "showSelectedArea" } }
-        .text-gray-300.w-8.py-1.pl-2.pr-1.border-l.flex.items-center.border-gray-200
+        .text-gray-300.w-8.py-1.pl-2.pr-1.border-l.flex.items-center.border-gray-200.dark:text-gray-500.dark:border-gray-600
           ^

data/app/components/tailwinds/form/multiselect_component.rb

@@ -45,7 +45,14 @@ module Tailwinds
       end
 
       def select_as_input
-        render(Tailwinds::Form::Multiselect::SelectAsInput.new(options:, attribute:, input:))
+        render(
+          Tailwinds::Form::Multiselect::SelectAsInput.new(
+            options:,
+            attribute:,
+            input:,
+            size_class: size_class(:multiselect_input)
+          )
+        )
       end
 
       def on_change

data/app/components/tailwinds/form/number_field_component.html.haml

@@ -0,0 +1,8 @@
+.mb-4
+  - if @label
+    = component('tailwinds/form/label', for: @for) do
+      = @label
+  - base_classes = 'w-full bg-white border border-gray-300 rounded focus:outline-none focus:border-red-500 '
+  - base_classes += 'dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:border-red-400 dark:placeholder-white'
+  - classes = "#{size_class(:text_input)} #{base_classes}"
+  = @input.call @attribute, **@options.merge(class: classes), value: @value

data/app/components/tailwinds/form/number_field_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  module Form
+    # Tailwind-styled numeric field
+    class NumberFieldComponent < TailwindComponent
+    end
+  end
+end

data/app/components/tailwinds/form/select_component.html.haml

@@ -2,4 +2,8 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  = @input.call(@attribute, @collection, { selected: @value }, @options.merge(class: 'bg-white border border-gray-300 text-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent py-2 px-3 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed'))
+  - base_classes = 'bg-white border border-gray-300 text-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 '
+  - base_classes += 'focus:border-transparent disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed '
+  - base_classes += 'dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-red-400 dark:disabled:bg-gray-800 dark:disabled:text-gray-500'
+  - classes = "#{size_class(:select_input)} #{base_classes}"
+  = @input.call(@attribute, @collection, { selected: @value }, @options.merge(class: classes))

data/app/components/tailwinds/form/submit_button_component.html.haml

@@ -1,4 +1,7 @@
 .flex.items-center.justify-between
-  %button.bg-red-500.hover:bg-red-700.text-white.font-bold.py-2.px-4.rounded.focus:outline-none.focus:shadow-outline.cursor-pointer.dark:text-white{ type: :submit, name: :commit, **@options }
+  - base_classes = 'bg-red-500 hover:bg-red-700 text-white font-bold rounded focus:outline-none focus:shadow-outline cursor-pointer '
+  - base_classes += 'dark:text-white dark:bg-red-600 dark:hover:bg-red-500 dark:focus:ring-2 dark:focus:ring-red-400'
+  - classes = "#{size_class(:submit_button)} #{base_classes}"
+  %button{ type: :submit, name: :commit, class: classes, **@options }
     = @text
   = @content

data/app/components/tailwinds/form/submit_button_component.rb

@@ -4,10 +4,18 @@ module Tailwinds
   module Form
     # Tailwind-styled submit button
     class SubmitButtonComponent < TailwindComponent
-      def initialize(action, **options)
-        @options = options.except :type
-
+      def initialize(action, size: :middle, **options)
         @text = action.is_a?(String) ? action : action.to_s.capitalize
+
+        super(
+          input: nil,
+          attribute: nil,
+          value: nil,
+          options: options.except(:type),
+          label: nil,
+          for: nil,
+          size:
+        )
       end
     end
   end

data/app/components/tailwinds/form/text_area_component.html.haml

@@ -2,4 +2,7 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  = @input.call @attribute, **@options.merge(class: 'w-full bg-white px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-red-500 dark:placeholder-gray-400'), value: @value
+  - base_classes = 'w-full bg-white border border-gray-300 rounded focus:outline-none focus:border-red-500 '
+  - base_classes += 'dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:border-red-400 dark:placeholder-white'
+  - classes = "#{size_class(:text_input)} #{base_classes}"
+  = @input.call @attribute, **@options.merge(class: classes), value: @value

data/app/components/tailwinds/form/text_field_component.html.haml

@@ -2,4 +2,7 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  = @input.call @attribute, **@options.merge(class: 'w-full bg-white px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-red-500 dark:placeholder-gray-400'), value: @value
+  - base_classes = 'w-full bg-white border border-gray-300 rounded focus:outline-none focus:border-red-500 '
+  - base_classes += 'dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:border-red-400 dark:placeholder-white'
+  - classes = "#{size_class(:text_input)} #{base_classes}"
+  = @input.call @attribute, **@options.merge(class: classes), value: @value

data/app/components/tailwinds/table/header_component.html.haml

@@ -1,4 +1,4 @@
-.div-table-row.grid.text-white.text-small.gap-4.bg-purple-700.dark:bg-gray-700.dark:text-gray-400{ class: "grid-cols-#{headers.count}", aria: { label: "Table Header" }, role: "row" }
+.div-table-row.grid.text-white.text-small.gap-4.bg-purple-700.dark:bg-gray-700.dark:text-gray-400{ class: "grid-cols-#{columns_count}", aria: { label: "Table Header" }, role: "row" }
   - if headers.any?
     - headers.each do |header|
       .div-table-cell.py-4.px-6

data/app/components/tailwinds/table/header_component.rb

@@ -4,7 +4,12 @@ module Tailwinds
   module Table
     # Component for rendering a header in a table
     class HeaderComponent < Tramway::Component::Base
-      option :headers
+      option :headers, optional: true, default: -> { [] }
+      option :columns, optional: true, default: -> { 3 }
+
+      def columns_count
+        headers.present? ? headers.size : columns
+      end
     end
   end
 end

data/app/components/tailwinds/table_component.html.haml

@@ -1,5 +1,5 @@
 = helpers.component 'tailwinds/table/row/preview'
 
 - width_class = options[:class]&.include?('w-') ? '' : 'w-full'
-.div-table.text-left.rtl:text-right.text-gray-500.dark:text-gray-400.mt-4{ class: "#{options[:class]} #{width_class}", **options.except(:class) }
+.div-table.text-left.rtl:text-right.text-gray-500.dark:text-gray-400{ class: "#{options[:class]} #{width_class}", **options.except(:class) }
   = content

data/lib/tramway/helpers/views_helper.rb

@@ -4,8 +4,13 @@ module Tramway
   module Helpers
     # Provides view-oriented helpers for ActionView
     module ViewsHelper
-      def tramway_form_for(object, *, **options, &)
-        form_for(object, *, **options.merge(builder: Tailwinds::Form::Builder), &)
+      def tramway_form_for(object, *, size: :middle, **options, &)
+        form_for(
+          object,
+          *,
+          **options.merge(builder: Tailwinds::Form::Builder, size:),
+          &
+        )
       end
     end
   end

data/lib/tramway/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Tramway
-  VERSION = '0.5.4.1'
+  VERSION = '0.5.5'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: 0.5.4.1
+  version: 0.5.5
 platform: ruby
 authors:
 - kalashnikovisme
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-07-11 00:00:00.000000000 Z
+date: 2025-10-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: anyway_config
@@ -158,6 +158,8 @@ files:
 - app/components/tailwinds/form/multiselect/selected_item_template.rb
 - app/components/tailwinds/form/multiselect_component.html.haml
 - app/components/tailwinds/form/multiselect_component.rb
+- app/components/tailwinds/form/number_field_component.html.haml
+- app/components/tailwinds/form/number_field_component.rb
 - app/components/tailwinds/form/select_component.html.haml
 - app/components/tailwinds/form/select_component.rb
 - app/components/tailwinds/form/submit_button_component.html.haml