tramway 3.0.0.1 → 3.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ddcb9362d874433878e243879b046128dab5bceb12dab30d62ae2f8f39ab3aa5
-  data.tar.gz: 1452740d4bd20c3fff0741dac5aa99b21534b27b1493ecb1539b7e4ec84b38f6
+  metadata.gz: 56f897f311d05eaa3d077f0f02a2b28d116bd2bbdfb7f460b05ab3d481b5b57e
+  data.tar.gz: 4dec440f2451c89ff6b1bd10c93d79ff9a12a99c528129bb19b267bd7f59b95b
 SHA512:
-  metadata.gz: 34233f340fce1fce40ccc9baa2848541fac897ecdfa9c6bfd1f28552dac5b08be19c4a6bb5f810034bfdeda1adf00494c9cb2f5f6e77cb78bbbcb1403e351cda
-  data.tar.gz: 417cdfd0e3cfbe1e2bc9f47a8563e0bd4e56cfa20a250a4bdd8abaac535e1d3edc007ca2d1b59e743da226d7b314392314055589ec35e68a4a115e2b9e980a74
+  metadata.gz: 732effab54397590ae4320802c803c70fe648765ff200ce0e994e396c13eabed2501361c645a7e2a55019a81cdba4987e26615c7c71e5aa05ab1add573188d06
+  data.tar.gz: 77a23247e58a804ff62e2c4a1071db86aae1d746832268d39da9e70fcab5e276264b16d60125da72be38ff40e4f2a01c182cd453b56c66eb02766fe649f65f7c

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,41 +1189,41 @@ 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 %>
 ```
 

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

@@ -83,25 +83,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,6 +108,30 @@ 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)
@@ -157,8 +167,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/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) 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

@@ -334,7 +334,7 @@ module.exports = {
     'text-red-800',
     'space-x-2',
 
-    // === Multiselect dropdown positioning ===
+    // === Tramway select dropdown positioning ===
     'absolute',
     'relative',
     'shadow',
@@ -345,7 +345,7 @@ module.exports = {
     'border-gray-600',
     'text-gray-100',
 
-    // === Multiselect option styling ===
+    // === Tramway select option styling ===
     'border-b',
     'border',
     'border-l',
@@ -378,6 +378,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,7 +170,7 @@ Available `tramway_form_for` helpers:
 - `date_field`
 - `datetime_field`
 - `time_field`
-- `multiselect`
+- `tramway_select`
 - `submit`
 
 ### Rule 8
@@ -595,6 +598,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/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.1'
 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.1
 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