tramway 3.0.0.1 → 3.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ddcb9362d874433878e243879b046128dab5bceb12dab30d62ae2f8f39ab3aa5
-  data.tar.gz: 1452740d4bd20c3fff0741dac5aa99b21534b27b1493ecb1539b7e4ec84b38f6
+  metadata.gz: def2792e8c3e1ebae5e4d2fa04b7e5edf92b72e4aed0f892cf8152e203c8daf2
+  data.tar.gz: 77eace6936af7c9597f49634ea5da28f699b4011f4ccac811259e659732ca192
 SHA512:
-  metadata.gz: 34233f340fce1fce40ccc9baa2848541fac897ecdfa9c6bfd1f28552dac5b08be19c4a6bb5f810034bfdeda1adf00494c9cb2f5f6e77cb78bbbcb1403e351cda
-  data.tar.gz: 417cdfd0e3cfbe1e2bc9f47a8563e0bd4e56cfa20a250a4bdd8abaac535e1d3edc007ca2d1b59e743da226d7b314392314055589ec35e68a4a115e2b9e980a74
+  metadata.gz: d6f7a8ed6f51a4658625b8df8f1db6ec2eb7619284eafc6acf0b46d67f0fb9eaf3bfe95e818d7226f52a93a6b81eb271e64335acf76640501132b890e000938d
+  data.tar.gz: 197a0227f09dbccacf37e82d2e5d15a585928b0ec60863c1ce43c20e012b568037e0880f9ffda49a21846c66dcec72f6b1931ff0790509d9c01b6b8da71727d8

data/README.md

@@ -1105,7 +1105,7 @@ Tramway provides `tramway_form_for` helper that renders Tailwind-styled forms by
   <%= f.select :role, [:admin, :user] %>
   <%= f.date_field :birth_date %>
   <%= f.datetime_field :confirmed_at %>
-  <%= f.multiselect :permissions, [['Create User', 'create_user'], ['Update user', 'update_user']] %>
+  <%= f.tramway_select :permissions, [['Create User', 'create_user'], ['Update user', 'update_user']] %>
   <%= f.file_field :file %>
   <%= f.submit 'Create User' %>
 <% end %>
@@ -1144,9 +1144,20 @@ Available form helpers:
 * date_field
 * datetime_field
 * time_field
-* multiselect ([Stimulus-based](https://github.com/Purple-Magic/tramway#stimulus-based-inputs))
+* tramway_select ([Stimulus-based](https://github.com/Purple-Magic/tramway#stimulus-based-inputs))
 * submit
 
+Autocomplete select example:
+
+```erb
+<%= tramway_form_for @user do |f| %>
+  <%= f.select :role, [:admin, :user], autocomplete: true %>
+<% end %>
+```
+
+`autocomplete: true` renders an autocomplete-enabled select. It cannot be used together with `multiselect: true` in the
+same select field.
+
 **Examples**
 
 1. Sign In Form for `devise` authentication
@@ -1178,44 +1189,55 @@ Available form helpers:
 
 `tramway_form_for` provides Tailwind-styled Stimulus-based custom inputs.
 
-##### Multiselect
+##### Tramway Select
 
-In case you want to use tailwind-styled multiselect this way
+In case you want to use the tailwind-styled Tramway select this way
 
 ```erb
 <%= tramway_form_for @user do |f| %>
-  <%= f.multiselect :permissions, [['Create User', 'create_user'], ['Update user', 'update_user']] %>
+  <%= f.tramway_select :permissions, [['Create User', 'create_user'], ['Update user', 'update_user']] %>
   <%# ... %>
 <% end %>
 ```
 
-you should add Tramway Multiselect Stimulus controller to your application.
+you should add the Tramway Select Stimulus controller to your application.
 
 Example for [importmap-rails](https://github.com/rails/importmap-rails) config
 
 *config/importmap.rb*
 ```ruby
-pin '@tramway/multiselect', to: 'tramway/multiselect_controller.js'
+pin '@tramway/tramway-select', to: 'tramway/tramway-select_controller.js'
 ```
 
 *app/javascript/controllers/index.js*
 ```js
 import { application } from "controllers/application"
 import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
-import { Multiselect } from "@tramway/multiselect" // importing Multiselect controller class
+import { TramwaySelect } from "@tramway/tramway-select" // importing TramwaySelect controller class
 eagerLoadControllersFrom("controllers", application)
 
-application.register('multiselect', Multiselect) // register Multiselect controller class as `multiselect` stimulus controller
+application.register('tramway-select', TramwaySelect) // register TramwaySelect controller class as `tramway-select` stimulus controller
 ```
 
-In case you need to use Stimulus `change` action with Tramway Multiselect
+In case you need to use Stimulus `change` action with Tramway Select
 
 ```erb
 <%= tramway_form_for @user do |f| %>
-  <%= f.multiselect :role, data: { action: 'change->user-form#updateForm' } %>
+  <%= f.tramway_select :role, data: { action: 'change->user-form#updateForm' } %>
 <% 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/{multiselect_controller.js → tramway-select_controller.js}

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 
-export default class Multiselect extends Controller {
+export default class TramwaySelect extends Controller {
   static targets = ["dropdown", "showSelectedArea", "hiddenInput", "caretDown", "caretUp"]
 
   static values = {
@@ -13,11 +13,15 @@ export default class Multiselect extends Controller {
     placeholder: String,
     selectAsInput: String,
     value: Array,
-    onChange: String
+    onChange: String,
+    multiple: Boolean,
+    autocomplete: Boolean,
+    autocompleteInput: String
   }
 
   connect() {
     this.dropdownState = 'closed';
+
     this.items = JSON.parse(this.element.dataset.items).map((item, index) => {
       return {
         index,
@@ -40,9 +44,15 @@ export default class Multiselect extends Controller {
   }
 
   renderSelectedItems() {
-    const allItems = this.fillTemplate(this.element.dataset.selectedItemTemplate, this.selectedItems);
+    const allItems = this.fillTemplate(this.element.dataset.selectedItemTemplate, this.selectedItems)
+
+    let content = allItems;
+
+    if (this.autocomplete() && this.selectedItems.length === 0) {
+      content += this.element.dataset.autocompleteInput;
+    }
 
-    this.showSelectedAreaTarget.innerHTML = allItems;
+    this.showSelectedAreaTarget.innerHTML = content;
     this.showSelectedAreaTarget.insertAdjacentHTML("beforeEnd", this.input());
     this.updateInputOptions();
   }
@@ -90,6 +100,7 @@ export default class Multiselect extends Controller {
 
   closeDropdown() {
     this.dropdownState = 'closed';
+
     if (this.dropdown()) {
       this.dropdown().remove();
     }
@@ -126,6 +137,12 @@ export default class Multiselect extends Controller {
     const itemIndex = this.items.findIndex(x => x.value === currentTarget.dataset.value);
     const itemSelectedIndex = this.selectedItems.findIndex(x => x.value === currentTarget.dataset.value);
 
+    if (!this.multiple()) {
+      this.selectedItems = [];
+      this.items.forEach(item => item.selected = false);
+      this.closeDropdown()
+    }
+
     if (itemSelectedIndex !== -1) {
       this.selectedItems = this.selectedItems.filter((_, index) => index !== itemSelectedIndex);
       this.items[itemIndex].selected = false; 
@@ -135,7 +152,10 @@ export default class Multiselect extends Controller {
     }
 
     this.renderSelectedItems();
-    this.rerenderItems();
+
+    if (this.multiple()) {
+      this.rerenderItems();
+    }
   }
 
   input() {
@@ -155,6 +175,24 @@ export default class Multiselect extends Controller {
 
     this.hiddenInputTarget.value = this.selectedItems.map(item => item.value);
   }
+
+  multiple() {
+    return this.element.dataset.multiple == 'true';
+  }
+
+  autocomplete() {
+    return this.element.dataset.autocomplete == 'true';
+  }
+
+  search(event) {
+    const searchTerm = event.target.value.toLowerCase();
+    const filteredItems = this.items.filter(item => item.text.toLowerCase().includes(searchTerm) && !item.selected);
+    const dropdown = this.dropdown();
+    
+    if (dropdown) {
+      dropdown.innerHTML = this.fillTemplate(this.element.dataset.itemContainer, filteredItems);
+    }
+  }
 }
 
-export { Multiselect }
+export { TramwaySelect }

data/app/components/tailwind_component.rb

@@ -18,7 +18,7 @@ class TailwindComponent < Tramway::BaseComponent
       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 h-10',
+      tramway_select_input: 'text-sm px-2 py-1 h-10',
       checkbox_input: 'h-4 w-4'
     },
     medium: {
@@ -26,7 +26,7 @@ class TailwindComponent < Tramway::BaseComponent
       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-2 py-1 h-12',
+      tramway_select_input: 'text-base px-2 py-1 h-12',
       checkbox_input: 'h-5 w-5'
     },
     large: {
@@ -34,7 +34,7 @@ class TailwindComponent < Tramway::BaseComponent
       select_input: 'text-xl px-4 py-3',
       file_button: 'text-xl px-5 py-3',
       submit_button: 'text-xl px-5 py-3',
-      multiselect_input: 'text-xl px-3 py-2 h-15',
+      tramway_select_input: 'text-xl px-3 py-2 h-15',
       checkbox_input: 'h-6 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, &)
@@ -83,25 +89,11 @@ module Tramway
       end
 
       def select(attribute, collection, **options, &)
-        sanitized_options = sanitize_options(options)
-
-        render(Tramway::Form::SelectComponent.new(
-                 input: input(:select),
-                 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(Tramway::Form::MultiselectComponent.new(
-                 input: input(:text_field),
-                 value: sanitized_options[:value] || sanitized_options[:selected] || object.public_send(attribute),
-                 collection:,
-                 **default_options(attribute, sanitized_options)
-               ), &)
+        if options[:multiple] || options[:autocomplete]
+          tramway_select(attribute, collection, **options, &)
+        else
+          default_select(attribute, collection, **options, &)
+        end
       end
 
       def submit(action, **options, &)
@@ -122,25 +114,84 @@ module Tramway
 
       attr_reader :form_size
 
+      def default_select(attribute, collection, **options, &)
+        sanitized_options = sanitize_options(options)
+
+        render(Tramway::Form::SelectComponent.new(
+                 input: input(:select),
+                 value: sanitized_options[:selected] || object.public_send(attribute),
+                 collection: explicitly_add_blank_option(collection, sanitized_options),
+                 **default_options(attribute, sanitized_options)
+               ), &)
+      end
+
+      def tramway_select(attribute, collection, **options, &)
+        sanitized_options = sanitize_options(options)
+
+        render(Tramway::Form::TramwaySelectComponent.new(
+                 input: input(:text_field),
+                 value: sanitized_options[:value] || sanitized_options[:selected] || object.public_send(attribute),
+                 collection:,
+                 multiple: options[:multiple],
+                 autocomplete: options[:autocomplete],
+                 **default_options(attribute, sanitized_options)
+               ), &)
+      end
+
       def input(method_name)
         unbound_method = self.class.superclass.instance_method(method_name)
         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
@@ -157,8 +208,10 @@ module Tramway
 
       def sanitize_options(options)
         options.dup.tap do |opts|
-          opts.delete(:size)
-          opts.delete('size')
+          %i[size multiple autocomplete].each do |key|
+            opts.delete(key)
+            opts.delete(key.to_s)
+          end
         end
       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-0') 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/autocomplete_input_component.html.haml

@@ -0,0 +1 @@
+%input.focus:outline-none.focus:ring-0.w-full{ type: :text, data: { action: "input->tramway-select#search" } }

data/app/components/tramway/form/tramway_select/autocomplete_input_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Tramway
+  module Form
+    module TramwaySelect
+      class AutocompleteInputComponent < Tramway::BaseComponent
+      end
+    end
+  end
+end

data/app/components/tramway/form/{multiselect → tramway_select}/caret_component.rb

@@ -2,7 +2,7 @@
 
 module Tramway
   module Form
-    module Multiselect
+    module TramwaySelect
       # Caret icon component
       class CaretComponent < Tramway::BaseComponent
         option :direction

data/app/components/tramway/form/{multiselect → tramway_select}/dropdown_container_component.html.haml

@@ -1,3 +1,3 @@
-#dropdown{ class: dropdown_classes, data: { action: "click@window->multiselect#closeOnClickOutside" } }
+#dropdown{ class: dropdown_classes, data: { action: "click@window->tramway-select#closeOnClickOutside" } }
   .flex.flex-col.w-full
     {{content}}

data/app/components/tramway/form/{multiselect → tramway_select}/dropdown_container_component.rb

@@ -2,7 +2,7 @@
 
 module Tramway
   module Form
-    module Multiselect
+    module TramwaySelect
       # Container for dropdown component
       class DropdownContainerComponent < Tramway::BaseComponent
         option :size

data/app/components/tramway/form/tramway_select/item_container_component.html.haml

@@ -0,0 +1,2 @@
+%div{ class: item_classes, data: { action: "click->tramway-select#toggleItem", text: "{{text}}", value: "{{value}}" } }
+  {{text}}

data/app/components/tramway/form/{multiselect → tramway_select}/item_container_component.rb

@@ -2,7 +2,7 @@
 
 module Tramway
   module Form
-    module Multiselect
+    module TramwaySelect
       # Container for item in dropdown component
       class ItemContainerComponent < Tramway::BaseComponent
         option :size

data/app/components/tramway/form/{multiselect → tramway_select}/select_as_input_component.html.haml

@@ -1,3 +1,3 @@
 .flex-1
 - classes = "#{@size_class} #{base_classes}"
-= @input.call(@attribute, @options.merge(placeholder: "{{placeholder}}", class: classes, data: { 'multiselect-target' => 'hiddenInput' }))
+= @input.call(@attribute, @options.merge(placeholder: "{{placeholder}}", class: classes, data: { 'tramway-select-target' => 'hiddenInput' }))

data/app/components/tramway/form/{multiselect → tramway_select}/select_as_input_component.rb

@@ -2,7 +2,7 @@
 
 module Tramway
   module Form
-    module Multiselect
+    module TramwaySelect
       # Renders input as select
       class SelectAsInputComponent < Tramway::BaseComponent
         option :options

data/app/components/tramway/form/{multiselect → tramway_select}/selected_item_template_component.html.haml

@@ -1,4 +1,4 @@
-%div{ class: selected_item_classes, data: { action: "click->multiselect#toggleItem", text: "{{text}}", value: "{{value}}" } }
+%div{ class: selected_item_classes, data: { action: "click->tramway-select#toggleItem", text: "{{text}}", value: "{{value}}" } }
   .font-normal.leading-none.max-w-full.flex-initial
     {{text}}
   .flex.flex-auto.flex-row-reverse

data/app/components/tramway/form/tramway_select/selected_item_template_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Tramway
+  module Form
+    module TramwaySelect
+      # Tailwind-styled tramway select field
+      class SelectedItemTemplateComponent < Tramway::BaseComponent
+        option :size
+        option :multiple
+
+        SIZE_CLASSES = {
+          small: 'text-sm',
+          medium: 'text-base',
+          large: 'text-lg'
+        }.freeze
+
+        def selected_item_classes
+          classes = 'flex justify-center items-center font-medium py-1 px-2 rounded-xl ' \
+                    'text-white shadow-md hover:bg-gray-800 cursor-pointer ' \
+                    'space-x-1 selected-option ' + SIZE_CLASSES[size].to_s
+
+          classes += ' border border-gray-700' if multiple
+
+          theme_classes classic: classes
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+.relative{ class: default_container_classes }
+  - if @label
+    = 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}"
+    .flex.flex-end.justify-between{ data: dropdown_data, **dropdown_options }
+      .flex.flex-row.flex-nowrap.overflow-x-auto.space-x-1.w-full{ data: { "tramway-select-target" => "showSelectedArea" } }
+      .flex.flex-col.justify-center
+        .caret-down{ data: { "tramway-select-target" => "caretDown" } }
+          = component 'tramway/form/tramway_select/caret', size:, direction: :down
+        .caret-up.hidden{ data: { "tramway-select-target" => "caretUp" } }
+          = component 'tramway/form/tramway_select/caret', size:, direction: :up

data/app/components/tramway/form/{multiselect_component.rb → tramway_select_component.rb}

@@ -3,8 +3,10 @@
 module Tramway
   module Form
     # Tailwind-styled multi-select field
-    class MultiselectComponent < TailwindComponent
+    class TramwaySelectComponent < TailwindComponent
       option :collection
+      option :multiple, optional: true, default: -> { false }
+      option :autocomplete, optional: true, default: -> { false }
 
       def before_render
         @collection = collection.map do |(text, value)|
@@ -13,11 +15,12 @@ module Tramway
       end
 
       # rubocop:disable Metrics/MethodLength
-      def multiselect_hash
-        {
+      # rubocop:disable Metrics/AbcSize
+      def tramway_select_hash
+        default = {
           controller:,
           selected_item_template:,
-          multiselect_selected_items_value:,
+          tramway_select_selected_items_value:,
           dropdown_container:,
           item_container:,
           items:,
@@ -25,13 +28,33 @@ module Tramway
           select_as_input:,
           placeholder:,
           value:,
-          on_change:
+          on_change:,
+          multiple: multiple.to_s,
+          autocomplete: autocomplete.to_s
         }.transform_keys { |key| key.to_s.gsub('_', '-') }
+
+        default.merge!(autocomplete_input:) if autocomplete
+
+        default
       end
       # rubocop:enable Metrics/MethodLength
+      # rubocop:enable Metrics/AbcSize
+
+      def autocomplete_input
+        component 'tramway/form/tramway_select/autocomplete_input'
+      end
+
+      def tramway_select_classes
+        classes = ''
+
+        classes += 'select--multiple ' if multiple
+        classes += 'select--autocomplete ' if autocomplete
+
+        classes
+      end
 
       def controller
-        controllers = [:multiselect]
+        controllers = ['tramway-select']
         controllers << external_action.split('->').last.split('#').first if external_action
         controllers += external_controllers
         controllers.join(' ')
@@ -39,7 +62,7 @@ module Tramway
 
       def dropdown_data
         (options[:data] || {}).merge(
-          'multiselect-target' => 'dropdown',
+          'tramway-select-target' => 'dropdown',
           'dropdown-container' => dropdown_container,
           'item-container' => item_container
         )
@@ -50,13 +73,13 @@ module Tramway
       end
 
       def input_classes
-        "#{size_class(:multiselect_input)} #{select_base_classes}"
+        "#{size_class(:tramway_select_input)} #{select_base_classes}"
       end
 
       private
 
       def action
-        'click->multiselect#toggleDropdown'
+        'click->tramway-select#toggleDropdown'
       end
 
       def items
@@ -67,17 +90,17 @@ module Tramway
         options[:placeholder]
       end
 
-      def multiselect_selected_items_value
+      def tramway_select_selected_items_value
         []
       end
 
       def select_as_input
         component(
-          'tramway/form/multiselect/select_as_input',
+          'tramway/form/tramway_select/select_as_input',
           options:,
           attribute:,
           input:,
-          size_class: size_class(:multiselect_input)
+          size_class: size_class(:tramway_select_input)
         )
       end
 
@@ -96,15 +119,15 @@ module Tramway
       end
 
       def selected_item_template
-        component('tramway/form/multiselect/selected_item_template', size:)
+        component 'tramway/form/tramway_select/selected_item_template', size:, multiple:
       end
 
       def dropdown_container
-        component('tramway/form/multiselect/dropdown_container', size:)
+        component('tramway/form/tramway_select/dropdown_container', size:)
       end
 
       def item_container
-        component('tramway/form/multiselect/item_container', size:)
+        component('tramway/form/tramway_select/item_container', size:)
       end
     end
   end

data/config/tailwind.config.js

@@ -333,8 +333,12 @@ module.exports = {
     'bg-red-100',
     'text-red-800',
     'space-x-2',
+    'h-5',
+    'w-5',
+    'rounded-full',
+    'mb-0',
 
-    // === Multiselect dropdown positioning ===
+    // === Tramway select dropdown positioning ===
     'absolute',
     'relative',
     'shadow',
@@ -345,7 +349,7 @@ module.exports = {
     'border-gray-600',
     'text-gray-100',
 
-    // === Multiselect option styling ===
+    // === Tramway select option styling ===
     'border-b',
     'border',
     'border-l',
@@ -378,6 +382,8 @@ module.exports = {
     'py-1',
     'flex-nowrap',
     'overflow-x-auto',
+    'focus:outline-none',
+    'focus:ring-0',
 
     // === Flash message styles ===
     'fixed',

data/docs/AGENTS.md

@@ -155,6 +155,9 @@ Use Tramway Button for buttons. Always add a color of the button via `color:` or
 ### Rule 7
 Use `tramway_form_for` instead `form_with`, `form_for`
 
+`tramway_form_for` has an upgraded `select` helper. Use `autocomplete: true` when you need an autocomplete select instead
+of the usual select element. Do not use `autocomplete: true` together with `multiselect: true` on the same field.
+
 Available `tramway_form_for` helpers:
 - `text_field`
 - `email_field`
@@ -167,9 +170,13 @@ Available `tramway_form_for` helpers:
 - `date_field`
 - `datetime_field`
 - `time_field`
-- `multiselect`
+- `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
 
@@ -529,7 +536,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
 
@@ -595,6 +610,17 @@ end
   = f.submit 'Save'
 ```
 
+Autocomplete select example:
+
+```ruby
+= tramway_form_for @user do |f|
+  = f.select :role, [["Admin", "admin"], ["Manager", "manager"]], autocomplete: true
+  = f.submit 'Save'
+```
+
+`autocomplete: true` renders an autocomplete select. `autocomplete: true` and `multiselect: true` cannot be used together
+in one select field.
+
 `tramway_form_for` supports `horizontal: true` for horizontal form layout.
 
 ```ruby

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

@@ -52,8 +52,8 @@ module Tramway
         @importmap_path ||= File.join(destination_root, 'config/importmap.rb')
       end
 
-      def importmap_multiselect_pin
-        'pin "@tramway/multiselect", to: "tramway/multiselect_controller.js"'
+      def importmap_tramway_select_pin
+        'pin "@tramway/tramway-select", to: "tramway/tramway-select_controller.js"'
       end
 
       def agents_file_path
@@ -242,11 +242,11 @@ module Tramway
         return unless File.exist?(importmap_path)
 
         content = File.read(importmap_path)
-        return if content.include?(importmap_multiselect_pin)
+        return if content.include?(importmap_tramway_select_pin)
 
         File.open(importmap_path, 'a') do |file|
           file.write("\n") unless content.empty? || content.end_with?("\n")
-          file.write("#{importmap_multiselect_pin}\n")
+          file.write("#{importmap_tramway_select_pin}\n")
         end
       end
     end

data/lib/tramway/engine.rb

@@ -17,7 +17,7 @@ module Tramway
     end
 
     initializer 'tramway.assets.precompile' do |app|
-      app.config.assets.precompile += %w[tramway/multiselect.js]
+      app.config.assets.precompile += %w[tramway/tramway-select_controller.js]
     end
 
     private

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, &)

data/lib/tramway/utils/field.rb

@@ -10,7 +10,7 @@ module Tramway
         input_options = field_options(field_data).merge(options.compact)
 
         case input_type.to_sym
-        when :select, :multiselect
+        when :select, :tramway_select
           collection = input_options.delete(:collection)
 
           public_send(input_name, attribute, collection, **input_options, &)
@@ -23,7 +23,7 @@ module Tramway
 
       def field_name(field_data)
         case field_data.to_sym
-        when :text_area, :select, :multiselect, :check_box
+        when :text_area, :select, :tramway_select, :check_box
           field_data
         when :checkbox
           :check_box

data/lib/tramway/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: 3.0.0.1
+  version: 3.0.2
 platform: ruby
 authors:
 - kalashnikovisme
@@ -138,8 +138,8 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
-- app/assets/javascripts/tramway/multiselect_controller.js
 - app/assets/javascripts/tramway/table_row_preview_controller.js
+- app/assets/javascripts/tramway/tramway-select_controller.js
 - app/components/tailwind_component.html.haml
 - app/components/tailwind_component.rb
 - app/components/tramway/actions_buttons_container_component.html.haml
@@ -182,18 +182,6 @@ files:
 - app/components/tramway/form/file_field_component.rb
 - app/components/tramway/form/label_component.html.haml
 - app/components/tramway/form/label_component.rb
-- app/components/tramway/form/multiselect/caret_component.html.haml
-- app/components/tramway/form/multiselect/caret_component.rb
-- app/components/tramway/form/multiselect/dropdown_container_component.html.haml
-- app/components/tramway/form/multiselect/dropdown_container_component.rb
-- app/components/tramway/form/multiselect/item_container_component.html.haml
-- app/components/tramway/form/multiselect/item_container_component.rb
-- app/components/tramway/form/multiselect/select_as_input_component.html.haml
-- app/components/tramway/form/multiselect/select_as_input_component.rb
-- app/components/tramway/form/multiselect/selected_item_template_component.html.haml
-- app/components/tramway/form/multiselect/selected_item_template_component.rb
-- app/components/tramway/form/multiselect_component.html.haml
-- app/components/tramway/form/multiselect_component.rb
 - app/components/tramway/form/number_field_component.html.haml
 - app/components/tramway/form/number_field_component.rb
 - app/components/tramway/form/select_component.html.haml
@@ -204,6 +192,20 @@ files:
 - app/components/tramway/form/text_field_component.rb
 - app/components/tramway/form/time_field_component.html.haml
 - app/components/tramway/form/time_field_component.rb
+- app/components/tramway/form/tramway_select/autocomplete_input_component.html.haml
+- app/components/tramway/form/tramway_select/autocomplete_input_component.rb
+- app/components/tramway/form/tramway_select/caret_component.html.haml
+- app/components/tramway/form/tramway_select/caret_component.rb
+- app/components/tramway/form/tramway_select/dropdown_container_component.html.haml
+- app/components/tramway/form/tramway_select/dropdown_container_component.rb
+- app/components/tramway/form/tramway_select/item_container_component.html.haml
+- app/components/tramway/form/tramway_select/item_container_component.rb
+- app/components/tramway/form/tramway_select/select_as_input_component.html.haml
+- app/components/tramway/form/tramway_select/select_as_input_component.rb
+- app/components/tramway/form/tramway_select/selected_item_template_component.html.haml
+- app/components/tramway/form/tramway_select/selected_item_template_component.rb
+- app/components/tramway/form/tramway_select_component.html.haml
+- app/components/tramway/form/tramway_select_component.rb
 - app/components/tramway/native_text_component.html.haml
 - app/components/tramway/native_text_component.rb
 - app/components/tramway/nav/item/button_component.html.haml

data/app/components/tramway/form/multiselect/item_container_component.html.haml

@@ -1,2 +0,0 @@
-%div{ class: item_classes, data: { action: "click->multiselect#toggleItem", text: "{{text}}", value: "{{value}}" } }
-  {{text}}

data/app/components/tramway/form/multiselect/selected_item_template_component.rb

@@ -1,26 +0,0 @@
-# frozen_string_literal: true
-
-module Tramway
-  module Form
-    module Multiselect
-      # Tailwind-styled multi-select field
-      class SelectedItemTemplateComponent < Tramway::BaseComponent
-        option :size
-
-        SIZE_CLASSES = {
-          small: 'text-sm',
-          medium: 'text-base',
-          large: 'text-lg'
-        }.freeze
-
-        def selected_item_classes
-          theme_classes(
-            classic: 'flex justify-center items-center font-medium py-1 px-2 rounded-xl border ' \
-                     'text-white border-gray-700 shadow-md hover:bg-gray-800 cursor-pointer space-x-1 ' \
-                     'selected-option ' + SIZE_CLASSES[size].to_s
-          )
-        end
-      end
-    end
-  end
-end

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

@@ -1,13 +0,0 @@
-.relative{ class: default_container_classes }
-  - if @label
-    = component('tramway/form/label', for: @for) do
-      = @label
-  %div{ role: :combobox, data: multiselect_hash, id: "#{@for}_multiselect" }
-    - classes = "#{size_class(:multiselect_input)} #{select_base_classes}"
-    .flex.flex-end.justify-between{ data: dropdown_data, **dropdown_options }
-      .flex.flex-row.flex-nowrap.overflow-x-auto.space-x-1{ data: { "multiselect-target" => "showSelectedArea" } }
-      .flex.flex-col.justify-center
-        .caret-down{ data: { "multiselect-target" => "caretDown" } }
-          = component 'tramway/form/multiselect/caret', size: size, direction: :down
-        .caret-up.hidden{ data: { "multiselect-target" => "caretUp" } }
-          = component 'tramway/form/multiselect/caret', size: size, direction: :up