tramway 3.1.2.3 → 3.1.2.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4ba325b50a3330d5dba36031bac32fb842160b4b9310a58441014a1a1b27688a
-  data.tar.gz: 8d520c1c588ad3d4b163ef76315162ac47c61bce415d40565f7164ebccf151c6
+  metadata.gz: 564610d50165b34a4446cdc570c377a12f9c49587b366c994141a3e2702e289f
+  data.tar.gz: beed0c0e6d742dbec6caeaed2fff43c0b6ff62248b804d723dc7b0ce98883b4b
 SHA512:
-  metadata.gz: a5c8f31d74b68563f146fab8cb904044e5f33043f9ba58b9d744c3fa602d90dc65813bcb57de003abb9c9135e3b01a9a9a007a31b340be630596e6572b2edfdc
-  data.tar.gz: f35a743cc8175ef41354cbfed89cd2d9f3940274ac32ac34a3c3aed76ec3a4bfda532f984e87ba655e08399198d7675862354c88835b05c6194c3cad2e54ca30
+  metadata.gz: 98bfc099a4338a4e114a7591d9721b209077e3a419b83669b5c5fbe5ce21a4c004515a97af9d4a32bf3c5219c426198176c5e413b3633569b68935f623eb9f3f
+  data.tar.gz: f7d43d03755310fa2ae39e8d0a89c2c87ff90791843ce7ee899eae5ef518dd06b7830c45a0a861159dcf7378862c3e008ef7411b21b465a19ade3863085880a1

data/README.md

@@ -12,7 +12,7 @@ Codex instruction that points agents to the Tramway skill for Tramway-native cod
 * [Installation](https://github.com/Purple-Magic/tramway#installation)
 * [Getting Started](https://github.com/Purple-Magic/tramway?tab=readme-ov-file#getting-started)
 * [Usage](https://github.com/Purple-Magic/tramway#usage)
-  * [Tramway Entities](https://github.com/Purple-Magic/tramway#tramway-entities)
+  * [Tramway CRUD](https://github.com/Purple-Magic/tramway#tramway-crud)
   * [Tramway Decorators](https://github.com/Purple-Magic/tramway#tramway-decorators)
   * [Tramway Form](https://github.com/Purple-Magic/tramway#tramway-form)
   * [Tramway Navbar](https://github.com/Purple-Magic/tramway#tramway-navbar)
@@ -132,7 +132,7 @@ Open [http://localhost:3000/users](http://localhost:3000/users)
 ## Usage
 
 
-### Tramway Entities
+### Tramway CRUD
 
 Tramway is an entity-based framework. **Entity** is the class on whose objects actions be applied: _index, show, create, update, and destroy_. Tramway will support numerous classes as entities. For now, Entity could be only **ActiveRecord::Base** class.
 
@@ -145,7 +145,7 @@ Tramway.configure do |config|
 end
 ```
 
-By default, links to the Tramway Entities index page are rendered in [Tramway Navbar](https://github.com/Purple-Magic/tramway#tramway-navbar).
+By default, links to the Tramway CRUD index page are rendered in [Tramway Navbar](https://github.com/Purple-Magic/tramway#tramway-navbar).
 
 #### Define entities with options
 
@@ -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.
@@ -819,10 +837,10 @@ title_link: Link on Tramway Navbar title. Default: '/'
 background:
   color: Css-color. Supports all named CSS colors and HEX colors
   intensity: Color intensity. Range: **100..950**. Used by Tailwind. Not supported in case of using HEX color in the background.color
-with_entities: Show Tramway Entities index page links to navbar. Default: true
+with_entities: Show Tramway CRUD index page links to navbar. Default: true
 ```
 
-**NOTE:** `tramway_navbar` method called without arguments and block of code will render only [Tramway Entities](https://github.com/Purple-Magic/tramway#tramway-entities) links on the left.
+**NOTE:** `tramway_navbar` method called without arguments and block of code will render only [Tramway CRUD](https://github.com/Purple-Magic/tramway#tramway-crud) links on the left.
 
 In case you want to hide entity links you can pass `with_entities: false`.
 
@@ -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 a visible, fixed-size dark unchecked surface and 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,42 @@ class UiCheckbox extends Controller {
 
     this.buttonTarget.setAttribute("aria-checked", checked.toString())
     this.buttonTarget.dataset.state = state
-    this.buttonTarget.classList.toggle("border-zinc-50", checked)
+    this.syncBoxStyle(checked)
+    this.buttonTarget.classList.add("border-zinc-50")
     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("bg-zinc-900", !checked)
     this.buttonTarget.classList.toggle("text-zinc-50", !checked)
+    this.buttonTarget.classList.remove("border-zinc-800", "bg-zinc-950")
     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.border = "1px solid #fafafa"
+    this.buttonTarget.style.backgroundColor = checked ? "#fafafa" : "#18181b"
+    this.buttonTarget.style.color = checked ? "#09090b" : "#fafafa"
+    this.buttonTarget.style.boxShadow = "0 0 0 1px #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
 

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

@@ -113,7 +113,7 @@ module Tramway
           Tramway::ButtonComponent.new(
             text: action,
             size: form_size,
-            type: :default,
+            type: :will,
             options: sanitized_options.merge(name: :commit, type: :submit)
           ),
           &

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,8 +4,25 @@ 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',
+        border: '1px solid #fafafa',
+        'box-shadow': '0 0 0 1px #fafafa'
+      }.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 ' \
+        "peer #{size_class(:checkbox_input)} shrink-0 rounded-sm border border-zinc-50 bg-zinc-900 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 ' \
@@ -14,7 +31,11 @@ module Tramway
       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 +57,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' : '#18181b',
+          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/nav/item_component.rb

@@ -6,8 +6,8 @@ module Tramway
     #
     class ItemComponent < TailwindComponent
       def style
-        @style ||= 'inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-zinc-100 ' \
-                   'transition-colors hover:bg-zinc-800 hover:text-zinc-50'
+        @style ||= 'inline-flex items-center rounded-md px-4 py-3 text-base font-medium text-zinc-100 ' \
+                   'transition-colors hover:bg-zinc-800 hover:text-zinc-50 sm:px-3 sm:py-2 sm:text-sm'
       end
     end
   end

data/app/components/tramway/navbar_component.html.haml

@@ -21,18 +21,21 @@
         = item
 
 #mobile-menu{ class: mobile_menu_classes }
-  - if @left_items.present?
-    %ul.flex.flex-col.space-y-1.pt-4
-      - @left_items.each do |item|
-        = item
-
-  - if @right_items.present?
-    %ul.flex.flex-col.space-y-1.pt-4
-      - @right_items.each do |item|
-        = item
-
-  %button.absolute.top-4.right-4.inline-flex.items-center.justify-center.rounded-md.p-2.text-zinc-50.transition-colors.hover:bg-zinc-800.hover:text-zinc-50.focus:outline-none.focus-visible:ring-2.focus-visible:ring-zinc-400.focus-visible:ring-offset-2.focus-visible:ring-offset-zinc-950#mobile-menu-close-button{ role: :button }
-    ⨯
+  .flex.flex-1.flex-col
+    .flex-1
+      - if @left_items.present?
+        %ul.flex.flex-col.space-y-1.pt-4
+          - @left_items.each do |item|
+            = item
+
+      - if @right_items.present?
+        %ul.flex.flex-col.space-y-1.pt-4
+          - @right_items.each do |item|
+            = item
+
+    .pt-6
+  %button.w-full.inline-flex.items-center.justify-center.rounded-md.border.border-zinc-700.bg-zinc-900.px-4.py-3.text-sm.font-semibold.text-zinc-50.transition-colors.hover:bg-zinc-800.hover:text-zinc-50.focus:outline-none.focus-visible:ring-2.focus-visible:ring-zinc-400.focus-visible:ring-offset-2.focus-visible:ring-offset-zinc-950#mobile-menu-close-button{ role: :button }
+    Close
 
 :javascript
   (() => {

data/app/components/tramway/navbar_component.rb

@@ -14,8 +14,8 @@ module Tramway
     ].freeze
 
     MOBILE_MENU_CLASSES = %w[
-      fixed inset-0 z-50 hidden h-screen w-screen flex-col border-r border-zinc-800 bg-zinc-950 px-4 py-6 shadow-lg
-      transition-transform transform -translate-x-full duration-300 ease-in-out pt-16
+      fixed inset-0 z-50 hidden h-screen w-screen flex flex-col border-r border-zinc-800 bg-zinc-950 px-4 py-6 shadow-lg
+      transition-transform transform -translate-x-full duration-300 ease-in-out pt-16 justify-between
     ].freeze
 
     def initialize(**options)

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/app/views/tramway/entities/_form.html.haml

@@ -21,4 +21,4 @@
     = f.submit t('tramway.actions.save')
     = tramway_button text: t('tramway.actions.cancel'),
       path: public_send(@entity.index_helper_method),
-      type: :inverse
+      type: :compassion

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

@@ -57,6 +57,7 @@ module.exports = {
     'w-fit',
     'text-base',
     'text-sm',
+    'text-lg',
     'rounded-md',
     'rounded-sm',
     'border-b',
@@ -69,7 +70,9 @@ module.exports = {
     'grid-cols-1',
     'grid',
     'px-4',
+    'px-3',
     'py-3',
+    'py-2',
     'py-4',
     'py-6',
     'p-2',
@@ -167,6 +170,9 @@ module.exports = {
     'md:p-4',
     'md:p-6',
     'p-2',
+    'sm:px-3',
+    'sm:py-2',
+    'sm:text-sm',
     'md:gap-1',
     'md:space-y-4',
     'space-y-2',
@@ -510,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',
@@ -572,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.3'
+  VERSION = '3.1.2.5'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: 3.1.2.3
+  version: 3.1.2.5
 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: []