tramway 3.0.1 → 3.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 56f897f311d05eaa3d077f0f02a2b28d116bd2bbdfb7f460b05ab3d481b5b57e
-  data.tar.gz: 4dec440f2451c89ff6b1bd10c93d79ff9a12a99c528129bb19b267bd7f59b95b
+  metadata.gz: 1da050191fdef1006bf62ea51fe4d11465eb809c273dc681f55f8937243e53fa
+  data.tar.gz: bce78a50e8ce1fdc3b8a126f3797841c5883c3b1810c370abfb00ba9609cc1e9
 SHA512:
-  metadata.gz: 732effab54397590ae4320802c803c70fe648765ff200ce0e994e396c13eabed2501361c645a7e2a55019a81cdba4987e26615c7c71e5aa05ab1add573188d06
-  data.tar.gz: 77a23247e58a804ff62e2c4a1071db86aae1d746832268d39da9e70fcab5e276264b16d60125da72be38ff40e4f2a01c182cd453b56c66eb02766fe649f65f7c
+  metadata.gz: 6d7c33ecf3b2544fab033a332e303dfd1cb23fa40dfb4adf8201a702be929ad702c96e5246055d59c88fe4c67e74d857590989ad581b61f398be05fd1ebdaac3
+  data.tar.gz: 88a49d7eedda98eb23455e4042b21ce67fc8972a0509e780e8742937b73705ae9cfa6d14fb236b3a1da1ef478e384cba009f776c1711bccd5c98d104ae20d32e

data/README.md

@@ -987,6 +987,20 @@ Use the optional `href:` argument on `tramway_row` to turn an entire row into a
 <% end %>
 ```
 
+`tramway_row` also accepts `preview:`. By default preview is enabled (`true`) for non-linked rows and renders the mobile slide-up
+details panel. Pass `preview: false` when you want a row without the preview panel.
+
+```erb
+<%= tramway_row preview: false do %>
+  <%= tramway_cell do %>
+    <%= user.name %>
+  <% end %>
+  <%= tramway_cell do %>
+    <%= user.email %>
+  <% end %>
+<% end %>
+```
+
 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
@@ -1227,6 +1241,17 @@ In case you need to use Stimulus `change` action with Tramway Select
 <% end %>
 ```
 
+Remote form example:
+
+```erb
+<%= tramway_form_for @user, remote: true do |f| %>
+  <%= f.text_field :name %>
+  <%= f.email_field :email %>
+<% end %>
+```
+
+With `remote: true`, Tramway submits the form on each input `change` via inline JavaScript; no additional controller setup is required.
+
 ### Tailwind-styled pagination for Kaminari
 
 Tramway uses [Tailwind](https://tailwindcss.com/) by default. It has tailwind-styled pagination for [kaminari](https://github.com/kaminari/kaminari).

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

@@ -3,10 +3,25 @@ import { Controller } from "@hotwired/stimulus";
 export default class TableRowPreview extends Controller {
   connect() {
     this.items = JSON.parse(this.element.dataset.items || '{}');
+    this.attachSwipeGesture();
+  }
+
+  disconnect() {
+    this.detachSwipeGesture();
   }
 
   toggle() {
-    const rollUp = document.getElementById("roll-up");
+    const rollUp = this.rollUpElement();
+    if (!rollUp) return;
+
+    rollUp.classList.remove("animate-roll-down");
+    rollUp.classList.add("animate-roll-up");
+
+    // Show pre-rendered preview content that is hidden by default.
+    if (Object.keys(this.items).length === 0) {
+      rollUp.classList.remove("hidden");
+      return;
+    }
 
     const existingTable = rollUp.querySelector(".div-table");
     if (existingTable) {
@@ -18,8 +33,6 @@ export default class TableRowPreview extends Controller {
       existingTitle.remove();
     }
 
-    if (Object.keys(this.items).length === 0) return;
-
     const titleText = document.createElement("h3");
 
     titleText.classList.add("text-xl");
@@ -33,12 +46,93 @@ export default class TableRowPreview extends Controller {
     rollUp.insertAdjacentElement('afterbegin', table);
     rollUp.insertAdjacentElement('afterbegin', titleText);
 
-    rollUp.classList.toggle("hidden");
+    rollUp.classList.remove("hidden");
   }
 
   close() {
-    const rollUp = document.getElementById("roll-up");
-    rollUp.classList.add("hidden");
+    const rollUp = this.rollUpElement();
+    if (!rollUp) return;
+
+    this.resetDragStyles(rollUp);
+    rollUp.classList.remove("animate-roll-up");
+    rollUp.classList.add("animate-roll-down");
+
+    rollUp.addEventListener("animationend", () => {
+      rollUp.classList.add("hidden");
+      rollUp.classList.remove("animate-roll-down");
+      rollUp.classList.add("animate-roll-up");
+    }, { once: true });
+  }
+
+  rollUpElement() {
+    if (this.element.id === "roll-up") return this.element;
+
+    return this.element.previousElementSibling || document.getElementById("roll-up");
+  }
+
+  attachSwipeGesture() {
+    if (this.element.id !== "roll-up") return;
+
+    this.startY = null;
+    this.startX = null;
+    this.currentDeltaY = 0;
+
+    this.onTouchStart = (event) => {
+      if (this.element.classList.contains("hidden")) return;
+      if (event.touches.length !== 1) return;
+
+      this.startY = event.touches[0].clientY;
+      this.startX = event.touches[0].clientX;
+      this.currentDeltaY = 0;
+      this.element.style.transition = "none";
+    };
+
+    this.onTouchMove = (event) => {
+      if (this.startY === null || event.touches.length !== 1) return;
+
+      const deltaY = event.touches[0].clientY - this.startY;
+      const deltaX = Math.abs(event.touches[0].clientX - this.startX);
+      if (deltaY <= 0 || deltaY <= deltaX) return;
+
+      this.currentDeltaY = deltaY;
+      this.element.style.transform = `translateY(${deltaY}px)`;
+      event.preventDefault();
+    };
+
+    this.onTouchEnd = () => {
+      if (this.startY === null) return;
+
+      const shouldClose = this.currentDeltaY > 80;
+      this.startY = null;
+      this.startX = null;
+
+      if (shouldClose) {
+        this.close();
+        return;
+      }
+
+      this.resetDragStyles(this.element);
+    };
+
+    this.element.addEventListener("touchstart", this.onTouchStart, { passive: true });
+    this.element.addEventListener("touchmove", this.onTouchMove, { passive: false });
+    this.element.addEventListener("touchend", this.onTouchEnd);
+    this.element.addEventListener("touchcancel", this.onTouchEnd);
+  }
+
+  detachSwipeGesture() {
+    if (this.element.id !== "roll-up") return;
+    if (!this.onTouchStart) return;
+
+    this.element.removeEventListener("touchstart", this.onTouchStart);
+    this.element.removeEventListener("touchmove", this.onTouchMove);
+    this.element.removeEventListener("touchend", this.onTouchEnd);
+    this.element.removeEventListener("touchcancel", this.onTouchEnd);
+  }
+
+  resetDragStyles(element) {
+    element.style.transition = "";
+    element.style.transform = "";
   }
 
   createTable(items) {

data/app/components/tailwind_component.rb

@@ -19,7 +19,7 @@ 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: 'h-4 w-4'
+      checkbox_input: 'min-h-4 min-w-4'
     },
     medium: {
       text_input: 'text-base px-3 py-2',
@@ -27,7 +27,7 @@ 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: 'h-5 w-5'
+      checkbox_input: 'min-h-5 min-w-5'
     },
     large: {
       text_input: 'text-xl px-4 py-3',
@@ -35,7 +35,7 @@ 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: 'h-6 w-6'
+      checkbox_input: 'min-h-6 min-w-6'
     }
   }.freeze
 

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

@@ -12,13 +12,19 @@ module Tramway
 
       def initialize(object_name, object, template, options)
         @horizontal = options[:horizontal] || false
+        @remote = options[:remote_submit] || false
 
         options.merge!(class: [options[:class], 'flex flex-row items-center gap-2'].compact.join(' ')) if @horizontal
 
-        super
+        @form_object_class = options[:form_object_class]
+
+        if form_object(object)
+          super(object_name, form_object(object), template, options)
+        else
+          super
+        end
 
         @form_size = options[:size] || options['size'] || :medium
-        @form_object_class = options[:form_object_class]
       end
 
       def common_field(component_name, input_method, attribute, **options, &)
@@ -137,20 +143,55 @@ module Tramway
         unbound_method.bind(self)
       end
 
-      def form_object
-        @form_object_class&.new object
+      def form_object(obj = nil)
+        return obj if obj.is_a?(Tramway::BaseForm)
+        return object if object.is_a?(Tramway::BaseForm)
+
+        @form_object_class&.new(obj || object)
       end
 
       def get_value(attribute, options)
-        options[:value] || form_object&.public_send(attribute).presence || object.presence&.public_send(attribute)
+        return options[:value] if options.key?(:value)
+
+        form_obj = form_object
+        form_value = form_object_value(form_obj, attribute)
+        return form_value unless form_value.nil?
+
+        ensure_object_responds!(attribute, form_obj)
+        object_value(attribute)
+      end
+
+      def form_object_value(form_obj, attribute)
+        return if form_obj.blank?
+
+        form_obj.public_send(attribute)
+      end
+
+      def ensure_object_responds!(attribute, form_obj)
+        return unless object.present? && !object.respond_to?(attribute)
+
+        form_object_part = form_obj.present? ? "#{form_obj.class} or " : ''
+        message = "Neither form object nor object respond to #{attribute}. " \
+                  "You should define #{attribute} method in #{form_object_part}#{object.class}"
+
+        raise ArgumentError, message
+      end
+
+      def object_value(attribute)
+        return if object.blank?
+
+        object.public_send(attribute)
       end
 
       def default_options(attribute, options)
+        options.merge!(horizontal: true) if @horizontal
+        options.merge!(onchange: 'this.form.requestSubmit()') if @remote
+
         {
           attribute:,
           label: label_build(attribute, options),
-          for: for_id(attribute),
-          options: options.merge(horizontal: @horizontal),
+          for: options[:id].presence || for_id(attribute),
+          options: options,
           size: form_size
         }
       end

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

@@ -1,7 +1,7 @@
-.flex.items-start.gap-2{ class: default_container_classes }
+.flex.items-center.gap-2.cursor-pointer{ class: default_container_classes }
   - classes = "#{size_class(:checkbox_input)} #{checkbox_base_classes}"
   = @input.call @attribute, **@options.merge(class: classes)
   - if @label
     %div
-      = component('tramway/form/label', for: @for) do
+      = component('tramway/form/label', for: @for, options: { class: label_classes }) do
         = @label

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

@@ -4,6 +4,20 @@ module Tramway
   module Form
     # Tailwind-styled checkbox field
     class CheckboxComponent < TailwindComponent
+      def label_classes
+        default_classes = 'cursor-pointer mb-0'
+
+        case size
+        when :small
+          default_classes += ' text-sm'
+        when :medium
+          default_classes += ' text-base'
+        when :large
+          default_classes += ' text-lg'
+        end
+
+        default_classes
+      end
     end
   end
 end

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

@@ -1,6 +1,6 @@
 %div{ class: default_container_classes }
   - if @label
-    = component('tramway/form/label', for: @for) do
+    = component('tramway/form/label', for: @for, class: 'mb-0') do
       = @label
   - classes = "#{size_class(:text_input)} #{text_input_base_classes}"
   = @input.call @attribute, **@options.merge(class: classes), value: @value

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

@@ -1,6 +1,6 @@
 %div{ class: default_container_classes }
   - if @label
-    = component('tramway/form/label', for: @for) do
+    = component('tramway/form/label', for: @for, class: 'mb-0') do
       = @label
   - classes = "#{size_class(:text_input)} #{text_input_base_classes}"
   = @input.call @attribute, **@options.merge(class: classes), value: @value

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

@@ -1,2 +1,2 @@
-%label{ for: @for, class: form_label_classes }
+%label{ for: @for, class: "#{form_label_classes} #{options[:class]}" }
   = content

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

@@ -5,10 +5,11 @@ module Tramway
     # Form label for all tailwind-styled forms
     class LabelComponent < Tramway::BaseComponent
       option :for
+      option :options, optional: true, default: -> { {} }
 
       def form_label_classes
         theme_classes(
-          classic: 'block text-sm font-semibold mb-2 text-white'
+          classic: 'block font-semibold text-white'
         )
       end
     end

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

@@ -1,6 +1,6 @@
 %div{ class: default_container_classes }
   - if @label
-    = component('tramway/form/label', for: @for) do
+    = component('tramway/form/label', for: @for, class: 'mb-0') do
       = @label
   - classes = "#{size_class(:text_input)} #{text_input_base_classes}"
   = @input.call @attribute, **@options.merge(class: classes), value: @value

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

@@ -1,6 +1,6 @@
 %div{ class: default_container_classes }
   - if @label
-    = component('tramway/form/label', for: @for) do
+    = component('tramway/form/label', for: @for, class: 'mb-2') do
       = @label
   - classes = "#{size_class(:select_input)} #{select_base_classes}"
   = @input.call(@attribute, @collection, { selected: @value }, @options.merge(class: classes))

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

@@ -1,6 +1,6 @@
 %div{ class: default_container_classes }
   - if @label
-    = component('tramway/form/label', for: @for) do
+    = component('tramway/form/label', for: @for, class: 'mb-0') do
       = @label
   - classes = "#{size_class(:text_input)} #{text_input_base_classes}"
   = @input.call @attribute, **@options.merge(class: classes), value: @value

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

@@ -1,6 +1,6 @@
 %div{ class: default_container_classes }
   - if @label
-    = component('tramway/form/label', for: @for) do
+    = component('tramway/form/label', for: @for, class: 'mb-0') do
       = @label
   - classes = "#{size_class(:text_input)} #{text_input_base_classes}"
   = @input.call @attribute, **@options.merge(class: classes), value: @value

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

@@ -1,6 +1,6 @@
 %div{ class: default_container_classes }
   - if @label
-    = component('tramway/form/label', for: @for) do
+    = component('tramway/form/label', for: @for, class: 'mb-0') do
       = @label
   - classes = "#{size_class(:text_input)} #{text_input_base_classes}"
   = @input.call @attribute, **@options.merge(class: classes), value: @value

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

@@ -1,6 +1,6 @@
 .relative{ class: default_container_classes }
   - if @label
-    = component('tramway/form/label', for: @for) do
+    = component('tramway/form/label', for: @for, class: 'mb-0') do
       = @label
   %div{ role: :combobox, data: tramway_select_hash, id: "#{@for}_tramway_select", class: tramway_select_classes }
     - classes = "#{size_class(:tramway_select_input)} #{select_base_classes}"

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

@@ -36,42 +36,91 @@
 
 :javascript
   (() => {
-    const button = document.getElementById('mobile-menu-button');
-    const closeButton = document.getElementById('mobile-menu-close-button');
-    const menu = document.getElementById('mobile-menu');
     const root = document.documentElement;
+    const MENU_HIDDEN_CLASS = 'hidden';
+    const MENU_OFFSCREEN_CLASS = '-translate-x-full';
+    const ROOT_LOCK_CLASS = 'overflow-hidden';
 
-    if (!button || !closeButton || !menu) {
-      return;
-    }
+    const closeMenu = (menu, { hideImmediately = false } = {}) => {
+      if (!menu) {
+        root.classList.remove(ROOT_LOCK_CLASS);
+        return;
+      }
 
-    if (button.dataset.navbarBound === 'true') {
-      return;
-    }
+      menu.classList.add(MENU_OFFSCREEN_CLASS);
+      root.classList.remove(ROOT_LOCK_CLASS);
 
-    button.dataset.navbarBound = 'true';
-
-    const toggleMenu = () => {
-      const isHiddenNow = menu.classList.contains('hidden');
-
-      if (isHiddenNow) {
-        menu.classList.remove('hidden');
-        requestAnimationFrame(() => {
-          menu.classList.remove('-translate-x-full');
-          root.classList.add('overflow-hidden');
-        });
-      } else {
-        menu.classList.add('-translate-x-full');
-        root.classList.remove('overflow-hidden');
-
-        menu.addEventListener(
-          'transitionend',
-          () => menu.classList.add('hidden'),
-          { once: true }
-        );
+      if (hideImmediately) {
+        menu.classList.add(MENU_HIDDEN_CLASS);
+        return;
       }
+
+      menu.addEventListener(
+        'transitionend',
+        () => menu.classList.add(MENU_HIDDEN_CLASS),
+        { once: true }
+      );
     };
 
-    button.addEventListener('click', toggleMenu);
-    closeButton.addEventListener('click', toggleMenu);
+    const openMenu = (menu) => {
+      if (!menu) return;
+
+      menu.classList.remove(MENU_HIDDEN_CLASS);
+      requestAnimationFrame(() => {
+        menu.classList.remove(MENU_OFFSCREEN_CLASS);
+        root.classList.add(ROOT_LOCK_CLASS);
+      });
+    };
+
+    const bindNavbar = () => {
+      const button = document.getElementById('mobile-menu-button');
+      const closeButton = document.getElementById('mobile-menu-close-button');
+      const menu = document.getElementById('mobile-menu');
+
+      if (!button || !closeButton || !menu || button.dataset.navbarBound === 'true') {
+        return;
+      }
+
+      button.dataset.navbarBound = 'true';
+
+      const toggleMenu = () => {
+        if (menu.classList.contains(MENU_HIDDEN_CLASS)) {
+          openMenu(menu);
+          return;
+        }
+
+        closeMenu(menu);
+      };
+
+      button.addEventListener('click', toggleMenu);
+      closeButton.addEventListener('click', () => closeMenu(menu));
+      menu.querySelectorAll('a').forEach((link) => {
+        link.addEventListener('click', () => closeMenu(menu, { hideImmediately: true }));
+      });
+    };
+
+    if (window.__tramwayNavbarGlobalBound !== true) {
+      window.__tramwayNavbarGlobalBound = true;
+
+      document.addEventListener('turbo:before-cache', () => {
+        closeMenu(document.getElementById('mobile-menu'), { hideImmediately: true });
+      });
+
+      document.addEventListener('turbo:load', () => {
+        const menu = document.getElementById('mobile-menu');
+        bindNavbar();
+
+        if (!menu || menu.classList.contains(MENU_HIDDEN_CLASS)) {
+          root.classList.remove(ROOT_LOCK_CLASS);
+        }
+      });
+
+      window.addEventListener('resize', () => {
+        if (window.innerWidth >= 640) {
+          closeMenu(document.getElementById('mobile-menu'), { hideImmediately: true });
+        }
+      });
+    }
+
+    bindNavbar();
   })();

data/app/components/tramway/table/row/preview_component.html.haml

@@ -13,6 +13,22 @@
     animation: roll-up 0.5s ease-in-out;
   }
 
-#roll-up{ class: preview_classes }
-  %button{ class: close_button_classes, "data-action" => "click->preview#close", "data-controller" => "preview" }
+  @keyframes roll-down {
+    0% {
+      transform: translateY(0%);
+    }
+
+    100% {
+      transform: translateY(100%);
+    }
+  }
+
+  .animate-roll-down {
+    animation: roll-down 0.5s ease-in-out;
+  }
+
+#roll-up{ class: preview_classes, data: { controller: 'table-row-preview' } }
+  %button{ class: close_button_classes, "data-action" => "click->table-row-preview#close" }
     ✕
+
+  = content

data/app/components/tramway/table/row/preview_component.rb

@@ -7,7 +7,8 @@ module Tramway
       class PreviewComponent < Tramway::BaseComponent
         def preview_classes
           theme_classes(
-            classic: 'fixed hidden inset-x-0 bottom-0 shadow-lg z-50 bg-gray-100 animate-roll-up h-1/2'
+            classic: 'fixed hidden md:hidden bottom-0 left-0 right-0 w-screen shadow-lg z-50 bg-gray-900 ' \
+                     'animate-roll-up h-1/2 pt-4'
           )
         end
 

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

@@ -5,11 +5,18 @@
         = value
 
 - else
-  - cells = Nokogiri::HTML.fragment(content).xpath('./*[@class and contains(concat(" ", normalize-space(@class), " "), " div-table-cell ")]')
+  - cells = visible_cells_from(content)
 
   - if href.present?
     = tag.a href:, class: [desktop_row_classes(cells.count), link_row_classes].join(' '), **default_attributes do
       = content
   - else
-    = tag.div class: desktop_row_classes(cells.count), **default_attributes do
+    - if preview
+      = component 'tramway/table/row/preview' do
+        - cells.each_with_index do |cell, index|
+          - next if index.zero?
+
+          = cell.to_s.html_safe
+
+    = tag.div class: desktop_row_classes(cells.count), data: { action: "click->table-row-preview#toggle", controller: "table-row-preview" }, **default_attributes do
       = content

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

@@ -6,6 +6,7 @@ module Tramway
     class RowComponent < Tramway::BaseComponent
       option :cells, optional: true, default: -> { [] }
       option :href, optional: true
+      option :preview, optional: true, default: -> { true }
       option :options, optional: true, default: -> { {} }
 
       def default_attributes
@@ -57,6 +58,22 @@ module Tramway
 
       private
 
+      def visible_cells_from(content)
+        fragment = Nokogiri::HTML.fragment(content)
+        parsed_cells = fragment.xpath(
+          './*[@class and contains(concat(" ", normalize-space(@class), " "), " div-table-cell ")]'
+        )
+
+        parsed_cells.each { |cell| remove_hidden_class!(cell) }
+      end
+
+      def remove_hidden_class!(node)
+        classes = node['class'].to_s.split
+        return if classes.empty?
+
+        node['class'] = classes.reject { |class_name| class_name == 'hidden' }.join(' ')
+      end
+
       def ensure_view_context_accessor
         return if view_context.respond_to?(:tramway_inside_cell=)
 

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

@@ -1,5 +1,3 @@
-= helpers.component 'tramway/table/row/preview'
-
 - width_class = options[:class]&.include?('w-') ? '' : 'w-full'
 
 %div{ class: "#{table_classes} #{options[:class]} #{width_class}".strip, **options.except(:class) }

data/config/tailwind.config.js

@@ -118,6 +118,17 @@ module.exports = {
     'first:block',
     'rounded-t-xl',
 
+    // === Table row preview panel ===
+    'bottom-0',
+    'left-0',
+    'right-0',
+    'h-1/2',
+    'bg-gray-100',
+    'animate-roll-up',
+    'hover:text-gray-700',
+    'pt-4',
+    'md:hidden',
+
     // === Title Component ===
     'md:text-4xl',
 
@@ -333,6 +344,10 @@ module.exports = {
     'bg-red-100',
     'text-red-800',
     'space-x-2',
+    'h-5',
+    'w-5',
+    'rounded-full',
+    'mb-0',
 
     // === Tramway select dropdown positioning ===
     'absolute',
@@ -368,12 +383,12 @@ module.exports = {
     'h-15',
     'h-12',
     'h-10',
-    'w-2',
-    'h-2',
-    'w-4',
-    'h-4',
-    'w-6',
-    'h-6',
+    'min-w-2',
+    'min-h-2',
+    'min-w-4',
+    'min-h-4',
+    'min-w-6',
+    'min-h-6',
     'px-2',
     'py-1',
     'flex-nowrap',

data/docs/AGENTS.md

@@ -149,6 +149,9 @@ Use Tramway Flash for user notifications.
 ### Rule 5
 Use Tramway Table for tabular data display.
 
+`tramway_row` supports `href:` for clickable rows and `preview:` for mobile row preview behavior. Keep `preview: true` as the
+default unless the request explicitly needs preview disabled.
+
 ### Rule 6
 Use Tramway Button for buttons. Always add a color of the button via `color:` or `type:` argument. `color:` argument support directs colors only: red, yellow, blue, etc. `type:` argument supports only lantern colors: will, hope, rage, etc.
 
@@ -173,6 +176,10 @@ Available `tramway_form_for` helpers:
 - `tramway_select`
 - `submit`
 
+### Rule 7.1
+Use `tramway_form_for(remote: true)` only when the form must submit asynchronously and update part of the current page (for example: modal forms, inline edits, or list updates without full page reload).
+For standard create/update flows that redirect and show regular flash messages, keep it synchronous (do not set `remote: true`).
+
 ### Rule 8
 Inherit all components from Tramway::BaseComponent
 
@@ -187,6 +194,69 @@ For live updates to a rendered `tramway_chat`, use `tramway_chat_append_message(
 This method is included in all controllers and ActiveRecord models. `message_type` must be `:sent` or `:received`, otherwise
 it raises `ArgumentError`. `chat_id` must match the stream id used in `tramway_chat`.
 
+`message_form` object must be a `Tramway::BaseForm` or an inherited class object. It must contain `text` attribute.
+`send_message_path` must be a `POST` route that receives data on sending messsage submition.
+
+Here an example of usage:
+
+*app/views/chats/show.html.haml*
+```haml
+= tramway_chat chat_id: @chat.id,
+  messages: @chat.messages_for_chat,
+  message_form: @message_form,
+  send_message_path: chats_messages_path
+```
+
+*app/decorators/chat_decorator.rb*
+```ruby
+class ChatDecorator < Tramway::BaseDecorator
+  def messages_for_chat
+    object.messages.map do |message|
+      {
+        id: message.id,
+        type: :sent, # or received
+        text: message.text,
+        sent_at: message.created_at,
+      }
+    end
+  end
+end
+```
+
+*app/controllers/chats_controller.rb*
+```ruby
+  def show
+    @chat = tramway_decorate Chat.find params[:id]
+    @message_form = tramway_form chat.messages.build
+  end
+```
+
+**app/forms/message_form.rb**
+```ruby
+class Chats::MessageForm < Tramway::BaseForm
+  properties :text, :chat_id
+end
+```
+
+**config/routes.rb**
+```ruby
+    resources :messages, only: :create
+```
+
+**app/controllers/messages_controller.rb**
+```ruby
+  def create
+    @message = tramway_form chat.creator.messages.build(chat:)
+
+    if @message.submit params[:message]
+      tramway_chat_append_message chat_id: @message.object.chat.id,
+        type: :sent,
+        text: @message.object.text,
+        sent_at: @message.object.created_at
+    end
+  end
+```
+
 ### Rule 9
 If page `create` or `update` is configured for an entity, use Tramway Form pattern for forms. Visible fields are configured via `form_fields` method.
 
@@ -501,6 +571,36 @@ and in a controller
   end
 ```
 
+Use dry-monads while call these services.
+
+Instead of this 
+
+```ruby
+result = SomeService.call(args)
+
+case result
+when :success
+  # code
+when :failure
+  # code
+end
+```
+
+Do this 
+
+```ruby
+case SomeService.call(args)
+in Success(result)
+  # use result
+in Success(another_result)
+  # use another result
+in Failure(reason_or_error)
+  # do stuff
+end
+```
+
+Success and Failure must describe all possible results of calling certain service.
+
 ### Rule 27
 Don't create scopes for enumerated values, use `scope: :shallow` of the enumerize gem.
 
@@ -532,7 +632,15 @@ Always `tramway_decorate` and `tramway_form` for creating these types of objects
 In Tramway Decorators, use `delegate_attributes` method instead of `delegate :something, to: :object`
 
 ### Rule 33
-In case you want to use container on the page, use `tramway_container` helper instead of creating a component for that or using a plain div with Tailwind classes.
+In case you want to use container on the page, use `tramway_container` helper instead of creating a component for that or using a plain div with Tailwind classes. In case you need to use container in layout view, use `tramway_main_container` for this. Here is example of using `tramway_main_container` inside application layout.
+
+```
+= tramway_main_container do
+  - if flash.any?
+    = tramway_flash text: flash[:notice].presence || flash[:alert],
+      type: flash[:notice].present? ? :will : :rage,
+      id: 'flash-container'
+```
 
 ## Controller Patterns
 

data/lib/generators/tramway/install/install_generator.rb

@@ -52,10 +52,36 @@ module Tramway
         @importmap_path ||= File.join(destination_root, 'config/importmap.rb')
       end
 
+      def controllers_index_path
+        @controllers_index_path ||= File.join(destination_root, 'app/javascript/controllers/index.js')
+      end
+
       def importmap_tramway_select_pin
         'pin "@tramway/tramway-select", to: "tramway/tramway-select_controller.js"'
       end
 
+      def importmap_table_row_preview_pin
+        'pin "@tramway/table-row-preview", to: "tramway/table_row_preview_controller.js"'
+      end
+
+      def importmap_tramway_pins
+        [importmap_tramway_select_pin, importmap_table_row_preview_pin]
+      end
+
+      def stimulus_controller_imports
+        [
+          'import { TramwaySelect } from "@tramway/tramway-select"',
+          'import { TableRowPreview } from "@tramway/table-row-preview"'
+        ]
+      end
+
+      def stimulus_controller_registrations
+        [
+          "application.register('tramway-select', TramwaySelect)",
+          "application.register('table-row-preview', TableRowPreview)"
+        ]
+      end
+
       def agents_file_path
         @agents_file_path ||= File.join(destination_root, 'AGENTS.md')
       end
@@ -159,6 +185,43 @@ module Tramway
           agents_template
         )
       end
+
+      # rubocop:disable Metrics/MethodLength
+      def append_missing_imports(content)
+        missing_imports = stimulus_controller_imports.reject { |line| content.include?(line) }
+        return content if missing_imports.empty?
+
+        import_lines = content.each_line.with_index.filter_map do |line, index|
+          index if line.lstrip.start_with?('import ')
+        end
+        insertion = "#{missing_imports.join("\n")}\n"
+        updated = content.dup
+
+        if import_lines.any?
+          insertion_index = updated.lines[0..import_lines.max].join.length
+          updated.insert(insertion_index, insertion)
+        else
+          updated.prepend(insertion)
+        end
+
+        updated
+      end
+      # rubocop:enable Metrics/MethodLength
+
+      def append_missing_registrations(content)
+        missing_registrations = stimulus_controller_registrations.reject { |line| content.include?(line) }
+        return content if missing_registrations.empty?
+
+        insertion = "#{missing_registrations.join("\n")}\n"
+        export_match = /^(?:export\s*\{[^}]+\}\s*;?\s*)$/m.match(content)
+
+        return content.dup.insert(export_match.begin(0), insertion) if export_match
+
+        updated = content.dup
+        updated << "\n" unless updated.empty? || updated.end_with?("\n")
+        updated << insertion
+        updated
+      end
     end
     # rubocop:enable Metrics/ModuleLength
 
@@ -242,13 +305,25 @@ module Tramway
         return unless File.exist?(importmap_path)
 
         content = File.read(importmap_path)
-        return if content.include?(importmap_tramway_select_pin)
+        missing_pins = importmap_tramway_pins.reject { |pin| content.include?(pin) }
+        return if missing_pins.empty?
 
         File.open(importmap_path, 'a') do |file|
           file.write("\n") unless content.empty? || content.end_with?("\n")
-          file.write("#{importmap_tramway_select_pin}\n")
+          file.write("#{missing_pins.join("\n")}\n")
         end
       end
+
+      def ensure_stimulus_controller_registration
+        return unless File.exist?(controllers_index_path)
+
+        content = File.read(controllers_index_path)
+        updated = append_missing_imports(content)
+        updated = append_missing_registrations(updated)
+        return if updated == content
+
+        File.write(controllers_index_path, updated)
+      end
     end
   end
 end

data/lib/tramway/helpers/views_helper.rb

@@ -11,12 +11,12 @@ module Tramway
       def tramway_form_for(object, *, size: :medium, **options, &)
         form_object_class = object.is_a?(Tramway::BaseForm) ? object.class : nil
 
-        form_for(
-          object,
-          *,
-          **options.merge(builder: Tramway::Form::Builder, size: normalize_form_size(size), form_object_class:),
-          &
-        )
+        form_for(object, *, **options.merge(
+          builder: Tramway::Form::Builder,
+          size: normalize_form_size(size),
+          form_object_class:,
+          remote_submit: options[:remote] || false
+        ), &)
       end
 
       def tramway_table(**options, &)
@@ -34,6 +34,7 @@ module Tramway
         component 'tramway/table/row',
                   cells: options.delete(:cells),
                   href: options.delete(:href),
+                  preview: options.delete(:preview),
                   options:,
                   &
       end

data/lib/tramway/utils/field.rb

@@ -42,9 +42,13 @@ module Tramway
 
       def field_options(field_data)
         if field_data.is_a?(Hash)
-          value = field_data[:value]&.call(object)
+          if field_data[:value].present?
+            value = field_data[:value]&.call(object)
 
-          field_data.merge(value:).except(:type)
+            field_data.merge(value:)
+          else
+            field_data
+          end.except(:type)
         else
           {}
         end

data/lib/tramway/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: 3.0.1
+  version: 3.0.3
 platform: ruby
 authors:
 - kalashnikovisme
@@ -320,7 +320,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.3
+rubygems_version: 4.0.6
 specification_version: 4
 summary: Tramway Rails Engine
 test_files: []