tramway 3.1.2.4 → 3.1.2.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f525c9fd76a1edc7050318ead14629ddf7c4be7d9d53dcc14b61ee04b5563d18
-  data.tar.gz: 486e418f27e02dae869e2ef625167998e737e0f9ff2a49fa47caa46fe1fc9d74
+  metadata.gz: c9b234f727ff8de6c0d6f910d4132ae760f304db2b2e4fb211c06a1983264a18
+  data.tar.gz: b94972e8d2862560cefca6f4343e15c3b362be56038426cda2b3a988b8705329
 SHA512:
-  metadata.gz: 04111aad9852f77817a6f01f2b9e96f20ed6ffa24ba70f0a9bd9c12f08060aee26d9deba7fedd437fcedae1b7cb27782df2e82da5c629a090993443a05bb5f47
-  data.tar.gz: 53117c53d931e58338947378b8c0de7cbb8b92d9b66ee7c918e56bea5a3c7d4dff7e62ebb310f1b1b57013a820f3a81dfc046fa89f39fffbe2553e9ccc042aa0
+  metadata.gz: 59d8c55e6c5300996bc0250d106715647180320c0ab044a1e99dde08188cc887f5de4d8d2f175246c06a73e25f90c7dcea537ff58f0ff29a07f01ba278f346e9
+  data.tar.gz: 5061f9357362cf45cfbfe5cc96ca937cdb4a1be8f58a6e156946c4ac2ea277ca3b3d5615f18fb66372a4ea33f57b39a71e33d15542ea2ff72ddf4b2bdf169ae3

data/README.md

@@ -548,6 +548,24 @@ UserDecorator.decorate user # => nil
 
 Read [behave_as_ar](https://github.com/Purple-Magic/tramway#behave_as_ar) section
 
+#### Actions column on index tables
+
+When an entity has `update` or `destroy` pages configured, Tramway automatically
+appends an `Actions` column to the end of the entity's index table headers,
+holding the edit/destroy controls for each row.
+
+This label is looked up through `I18n` (`tramway.table.actions_header`), so you
+can rename it to your own language by overriding the key in your app's locale
+file:
+
+*config/locales/en.yml*
+```yaml
+en:
+  tramway:
+    table:
+      actions_header: "Actions"
+```
+
 ### Tramway Form
 
 Tramway provides **convenient** form objects for Rails applications. List properties you want to change and the rules in Form classes. No controllers overloading.
@@ -1073,6 +1091,22 @@ details panel. Pass `preview: false` when you want a row without the preview pan
 <% end %>
 ```
 
+`tramway_cell` also forwards any HTML options to the underlying cell wrapper. Use this when you need per-cell classes,
+data attributes, ids, or other attributes:
+
+```erb
+<%= tramway_cell class: 'whitespace-nowrap', data: { turbo: false } do %>
+  <%= user.name %>
+<% end %>
+```
+
+`tramway_header` forwards HTML options to the header wrapper as well. That makes it easy to add ids, classes, or data
+attributes to the header row:
+
+```erb
+<%= tramway_header headers: ['Name', 'Email'], class: 'sticky top-0', data: { controller: 'table-header' } %>
+```
+
 When you render a header you can either pass the `headers:` array, as in the examples above, or render custom header content in
 the block. `tramway_header` uses the length of the `headers` array to build the grid if the array is present.
 If you omit the array and provide custom content, pass the `columns:` argument so the component knows how many grid columns to
@@ -1196,7 +1230,8 @@ Tramway uses [Tailwind](https://tailwindcss.com/) by default. All UI helpers are
 
 Tramway provides `tramway_form_for` helper that renders Tailwind-styled forms by default. Form inputs use hardcoded
 dark shadcn-style classes; Tramway does not render a separate light form theme.
-Checkboxes render dark while unchecked and use the light primary checked state.
+Checkboxes render with the same dark border and focus highlight treatment as other inputs, then use the light primary checked state.
+Checkbox controls, checkmarks, and vertically centered label line heights scale together with the form-level `size:` option.
 
 ```erb
 <%= tramway_form_for @user do |f| %>

data/app/assets/javascripts/tramway/tramway.js

@@ -388,15 +388,40 @@ class UiCheckbox extends Controller {
 
     this.buttonTarget.setAttribute("aria-checked", checked.toString())
     this.buttonTarget.dataset.state = state
+    this.syncBoxStyle(checked)
     this.buttonTarget.classList.toggle("border-zinc-50", checked)
+    this.buttonTarget.classList.toggle("border-zinc-800", !checked)
     this.buttonTarget.classList.toggle("bg-zinc-50", checked)
     this.buttonTarget.classList.toggle("text-zinc-950", checked)
-    this.buttonTarget.classList.toggle("border-zinc-800", !checked)
     this.buttonTarget.classList.toggle("bg-zinc-950", !checked)
     this.buttonTarget.classList.toggle("text-zinc-50", !checked)
     this.indicatorTarget.classList.toggle("hidden", !checked)
     this.buttonTarget.toggleAttribute("disabled", this.inputTarget.disabled)
   }
+
+  syncBoxStyle(checked) {
+    const size = this.checkboxSize()
+
+    this.buttonTarget.style.width = size
+    this.buttonTarget.style.height = size
+    this.buttonTarget.style.minWidth = size
+    this.buttonTarget.style.minHeight = size
+    this.buttonTarget.style.display = "inline-flex"
+    this.buttonTarget.style.alignItems = "center"
+    this.buttonTarget.style.justifyContent = "center"
+    this.buttonTarget.style.padding = "0"
+    this.buttonTarget.style.lineHeight = "1"
+    this.buttonTarget.style.boxSizing = "border-box"
+    this.buttonTarget.style.backgroundColor = checked ? "#fafafa" : "#09090b"
+    this.buttonTarget.style.color = checked ? "#09090b" : "#fafafa"
+  }
+
+  checkboxSize() {
+    if (this.buttonTarget.classList.contains("h-4")) return "1rem"
+    if (this.buttonTarget.classList.contains("h-6")) return "1.5rem"
+
+    return "1.25rem"
+  }
 }
 
 class Tooltip extends Controller {

data/app/components/tailwind_component.rb

@@ -19,7 +19,8 @@ class TailwindComponent < Tramway::BaseComponent
       file_button: 'text-sm px-3 py-1',
       submit_button: 'text-sm px-3 py-1',
       tramway_select_input: 'text-sm px-2 py-1 h-10',
-      checkbox_input: 'min-h-4 min-w-4'
+      checkbox_input: 'h-4 w-4',
+      checkbox_indicator: 'h-3 w-3'
     },
     medium: {
       text_input: 'text-base px-3 py-2',
@@ -27,7 +28,8 @@ class TailwindComponent < Tramway::BaseComponent
       file_button: 'text-base px-4 py-2',
       submit_button: 'text-base px-4 py-2',
       tramway_select_input: 'text-base px-2 py-1 h-12',
-      checkbox_input: 'min-h-5 min-w-5'
+      checkbox_input: 'h-5 w-5',
+      checkbox_indicator: 'h-4 w-4'
     },
     large: {
       text_input: 'text-xl px-4 py-3',
@@ -35,7 +37,8 @@ class TailwindComponent < Tramway::BaseComponent
       file_button: 'text-xl px-5 py-3',
       submit_button: 'text-xl px-5 py-3',
       tramway_select_input: 'text-xl px-3 py-2 h-15',
-      checkbox_input: 'min-h-6 min-w-6'
+      checkbox_input: 'h-6 w-6',
+      checkbox_indicator: 'h-5 w-5'
     }
   }.freeze
 
@@ -69,7 +72,7 @@ class TailwindComponent < Tramway::BaseComponent
   end
 
   def checkbox_base_classes
-    'shrink-0 rounded-sm border border-zinc-800 bg-zinc-950 text-zinc-50 shadow-sm ' \
+    'shrink-0 rounded-sm border border-zinc-800 bg-zinc-950 text-zinc-50 shadow-sm transition-colors ' \
       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300 ' \
       'focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 disabled:cursor-not-allowed ' \
       'disabled:opacity-50'

data/app/components/tramway/form/checkbox_component.html.haml

@@ -1,4 +1,4 @@
-.flex.items-center.space-x-2{ class: default_container_classes, data: { controller: 'ui--checkbox' } }
+.flex.items-center.gap-2{ class: default_container_classes, data: { controller: 'ui--checkbox' } }
   - checkbox_checked = checked?
   = @input.call @attribute, **hidden_checkbox_options
   %button{ type: 'button',
@@ -9,6 +9,7 @@
     'data-ui--checkbox-target' => 'button',
     value: 'on',
     class: checkbox_button_classes,
+    style: checkbox_button_style,
     for: @for,
     id: @for }
     %span{ class: checkbox_indicator_classes, style: 'pointer-events: none', data: { 'ui--checkbox-target' => 'indicator' } }
@@ -21,9 +22,8 @@
         'stroke-width' => '2',
         'stroke-linecap' => 'round',
         'stroke-linejoin' => 'round',
-        class: 'h-4 w-4' }
+        class: size_class(:checkbox_indicator) }
         %polyline{ points: '20 6 9 17 4 12' }
   - if @label
-    %div
-      = component('tramway/form/label', for: @for, options: { class: label_classes, data: { action: 'click->ui--checkbox#toggle' } }) do
-        = @label
+    = component('tramway/form/label', for: @for, options: { class: label_classes, style: label_style, data: { action: 'click->ui--checkbox#toggle' } }) do
+      = @label

data/app/components/tramway/form/checkbox_component.rb

@@ -4,17 +4,33 @@ module Tramway
   module Form
     # Tailwind-styled checkbox field
     class CheckboxComponent < TailwindComponent
+      CHECKBOX_BUTTON_BASE_STYLES = {
+        display: 'inline-flex',
+        'align-items': 'center',
+        'justify-content': 'center',
+        padding: '0',
+        'line-height': '1',
+        'box-sizing': 'border-box'
+      }.freeze
+
+      CHECKBOX_BUTTON_SIZES = {
+        small: '1rem',
+        medium: '1.25rem',
+        large: '1.5rem'
+      }.freeze
+
       def checkbox_button_classes
-        'peer h-4 w-4 shrink-0 rounded-sm border border-zinc-800 bg-zinc-950 text-zinc-50 ' \
-          'ring-offset-zinc-950 ' \
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300 ' \
-          'focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ' \
+        "peer #{size_class(:checkbox_input)} #{checkbox_base_classes} " \
           'data-[state=checked]:border-zinc-50 data-[state=checked]:bg-zinc-50 ' \
           'data-[state=checked]:text-zinc-950'
       end
 
       def checkbox_indicator_classes
-        'flex items-center justify-center text-current hidden'
+        "flex hidden #{size_class(:checkbox_indicator)} items-center justify-center text-current"
+      end
+
+      def checkbox_button_style
+        checkbox_button_style_attributes.map { |key, value| "#{key}: #{value}" }.join('; ')
       end
 
       def checked?
@@ -36,19 +52,44 @@ module Tramway
       end
 
       def label_classes
-        default_classes = 'cursor-pointer mb-0 leading-6'
+        default_classes = 'cursor-pointer mb-0'
 
         case size
         when :small
-          default_classes += ' text-sm'
+          default_classes += ' text-sm leading-5'
         when :medium
-          default_classes += ' text-base'
+          default_classes += ' text-base leading-6'
         when :large
-          default_classes += ' text-lg'
+          default_classes += ' text-lg leading-7'
         end
 
         default_classes
       end
+
+      def label_style
+        {
+          'align-self': 'center',
+          'line-height': checkbox_button_size,
+          'margin-bottom': '0'
+        }.map { |key, value| "#{key}: #{value}" }.join('; ')
+      end
+
+      private
+
+      def checkbox_button_style_attributes
+        CHECKBOX_BUTTON_BASE_STYLES.merge(
+          width: checkbox_button_size,
+          height: checkbox_button_size,
+          'min-width': checkbox_button_size,
+          'min-height': checkbox_button_size,
+          'background-color': checked? ? '#fafafa' : '#09090b',
+          color: checked? ? '#09090b' : '#fafafa'
+        )
+      end
+
+      def checkbox_button_size
+        CHECKBOX_BUTTON_SIZES.fetch(size, CHECKBOX_BUTTON_SIZES.fetch(:medium))
+      end
     end
   end
 end

data/app/components/tramway/table/cell_component.html.haml

@@ -1,2 +1,2 @@
-%div{ class: cell_classes }
+%div{ class: [options[:class], cell_classes].compact.join(' '), **options.except(:class) }
   = content

data/app/components/tramway/table/cell_component.rb

@@ -4,6 +4,8 @@ module Tramway
   module Table
     # Component for rendering a cell in a table
     class CellComponent < Tramway::BaseComponent
+      option :options, optional: true, default: -> { {} }
+
       def cell_classes
         'div-table-cell hidden px-6 py-4 text-base font-medium text-zinc-100 first:block md:block'
       end

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

@@ -1,5 +1,5 @@
 - parsed_cells = headers.any? ? nil : visible_cells_from(content)
-%div{ class: "#{header_row_classes} md:grid-cols-#{columns_count(parsed_cells: parsed_cells)}", aria: { label: "Table Header" }, role: "row" }
+%div{ class: [options[:class], "#{header_row_classes} md:grid-cols-#{columns_count(parsed_cells: parsed_cells)}"].compact.join(' '), aria: { label: "Table Header" }, role: "row", **options.except(:class) }
   - if headers.any?
     - headers.each do |header|
       .div-table-cell.border-b.border-zinc-800{ class: header_cell_classes }

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

@@ -8,6 +8,7 @@ module Tramway
 
       option :headers, optional: true, default: -> { [] }
       option :columns, optional: true, default: -> { 3 }
+      option :options, optional: true, default: -> { {} }
 
       def columns_count(content = nil, parsed_cells: nil)
         return headers.size if headers.present?

data/config/locales/en.yml

@@ -5,6 +5,8 @@ en:
         title: "Create %{model_name}"
       edit:
         title: "Edit %{model_name}"
+    table:
+      actions_header: "Actions"
     actions:
       new: "New"
       edit: "Edit"

data/config/tailwind.config.js

@@ -516,8 +516,12 @@ module.exports = {
     'leading-none',
     'appearance-none',
     'peer',
+    'h-3',
+    'w-3',
     'h-4',
     'w-4',
+    'h-6',
+    'w-6',
     'text-current',
     'ring-offset-zinc-950',
     'data-[state=checked]:border-zinc-50',
@@ -578,6 +582,7 @@ module.exports = {
     'text-sm',
     'font-medium',
     'leading-6',
+    'leading-7',
     'text-zinc-50',
     'text-green-400',
     'text-blue-400',

data/lib/tramway/base_decorator.rb

@@ -68,7 +68,9 @@ module Tramway
           (model_class || entity.model_class).human_attribute_name(attribute)
         end
 
-        headers += ['Actions'] if entity&.page(:update).present? || entity&.page(:destroy).present?
+        if entity&.page(:update).present? || entity&.page(:destroy).present?
+          headers += [I18n.t('tramway.table.actions_header')]
+        end
 
         headers
       end

data/lib/tramway/helpers/views_helper.rb

@@ -23,10 +23,11 @@ module Tramway
         component 'tramway/table', options:, &
       end
 
-      def tramway_header(headers: nil, columns: nil, &)
+      def tramway_header(headers: nil, columns: nil, **options, &)
         component 'tramway/table/header',
                   headers:,
                   columns:,
+                  options:,
                   &
       end
 
@@ -39,8 +40,8 @@ module Tramway
                   &
       end
 
-      def tramway_cell(&)
-        component 'tramway/table/cell', &
+      def tramway_cell(**options, &)
+        component 'tramway/table/cell', options:, &
       end
 
       def tramway_button(path: nil, text: nil, method: :get, form_options: {}, **options, &)

data/lib/tramway/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: 3.1.2.4
+  version: 3.1.2.6
 platform: ruby
 authors:
 - kalashnikovisme
@@ -325,7 +325,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.10
+rubygems_version: 4.0.16
 specification_version: 4
 summary: Tramway Rails Engine
 test_files: []