tramway 2.2.4 → 2.2.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 16dea01fb21b124c9230e27238eb4d7f4f872d3e4348b9b16ca79e48e4ad1ac8
-  data.tar.gz: 8dfbda56fba27bb45e93e8048823f8b32adce01a5f8e8412608e13c694022005
+  metadata.gz: cd9400e71d346fc1c334cf2f7d2a8a52847c0000957b675cc5bc6c38132a1bb9
+  data.tar.gz: 8a36f11fc6dec4e76241f150f8fe0d2d3f8bd187a5ff46f71b6e50cddb660479
 SHA512:
-  metadata.gz: 64e58a748628c72a579964e6c604695a29711b28a673eae560922dc2dd5c179116767a2026e15a9d898dc773ac62ee92b3afc4c2b94c921933c1e8b1bac57260
-  data.tar.gz: 83b5e8825a9ef8592ea244ab883e363136b9b77281b3c42ff5d256818e33a9330a683fb3074b1c902c27cf014a1f852a5f3a788f152d0af8a133648b1c4681fe
+  metadata.gz: f6e6ae7bc9326a651b59fce3c82d88c826f1cff4712248e0c7a0b1e7abd3033b47f91151d3f6d6007a1ba33ae5097455a48aeaf835e328a45edeb329ae8160d6
+  data.tar.gz: b546d9583c1c97b7d75797a145de2a522b4e5edd25d09add7cf3b106ac9c6bf89ae541d43667320a4f3adaafef9e7d961bc19f542595258ec5eaed8c698da12d

data/README.md

@@ -656,7 +656,7 @@ end
 
 ### Form inheritance
 
-Tramway Form supports inheritance of `properties` and `normalizations`
+Tramway Form supports inheritance of `properties`, `normalizations`, and `fields`.
 
 **Example**
 
@@ -665,6 +665,9 @@ class UserForm < TramwayForm
   properties :email, :password
 
   normalizes :email, with: ->(value) { value.strip.downcase }
+
+  fields email: :email,
+    password: :password
 end
 
 class AdminForm < UserForm
@@ -672,7 +675,8 @@ class AdminForm < UserForm
 end
 
 AdminForm.properties # returns [:email, :password, :permissions]
-AdminForm.normalizations # contains the normalization of :email 
+AdminForm.normalizations # contains the normalization of :email
+AdminForm.fields # { email: :email, password: :password }
 ```
 
 ### Make flexible and extendable forms
@@ -1083,7 +1087,7 @@ eagerLoadControllersFrom("controllers", application)
 application.register('multiselect', Multiselect) // register Multiselect controller class as `multiselect` stimulus controller
 ```
 
-Use Stimulus `change` action with Tramway Multiselect
+In case you need to use Stimulus `change` action with Tramway Multiselect
 
 ```erb
 <%= tramway_form_for @user do |f| %>

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

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class Multiselect extends Controller {
-  static targets = ["dropdown", "showSelectedArea", "hiddenInput"];
+  static targets = ["dropdown", "showSelectedArea", "hiddenInput", "caretDown", "caretUp"]
 
   static values = {
     items: Array,
@@ -79,6 +79,9 @@ export default class Multiselect extends Controller {
     if (this.dropdown()) {
       this.dropdown().addEventListener('click', event => event.stopPropagation());
     }
+
+    this.caretDownTarget.classList.add('hidden');
+    this.caretUpTarget.classList.remove('hidden');
   }
 
   dropdown() {
@@ -107,6 +110,9 @@ export default class Multiselect extends Controller {
         alert(`Controller not found: ${controllerName}`); // eslint-disable-line no-undef
       }
     }
+
+    this.caretDownTarget.classList.remove('hidden');
+    this.caretUpTarget.classList.add('hidden');
   }
 
   get template() {

data/app/components/tailwind_component.rb

@@ -18,21 +18,21 @@ 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'
+      multiselect_input: 'text-sm px-2 py-1 h-10'
     },
     medium: {
       text_input: 'text-base px-3 py-2',
       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-3 py-2'
+      multiselect_input: 'text-base px-2 py-1 h-12'
     },
     large: {
       text_input: 'text-xl px-4 py-3',
       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-4 py-3'
+      multiselect_input: 'text-xl px-3 py-2 h-15'
     }
   }.freeze
 

data/app/components/tailwinds/form/multiselect/caret_component.html.haml

@@ -0,0 +1,7 @@
+- if direction == :down
+  %svg{ xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: SIZE_CLASSES[size] }
+    %path{ "stroke-linecap": "round", "stroke-linejoin": "round", d: "m19.5 8.25-7.5 7.5-7.5-7.5" }
+
+- if direction == :up
+  %svg{ xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: SIZE_CLASSES[size] }
+    %path{ "stroke-linecap": "round", "stroke-linejoin": "round", d: "m4.5 15.75 7.5-7.5 7.5 7.5" }

data/app/components/tailwinds/form/multiselect/caret_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  module Form
+    module Multiselect
+      # Caret icon component
+      class CaretComponent < Tramway::BaseComponent
+        option :direction
+        option :size
+
+        SIZE_CLASSES = {
+          small: 'w-3 h-3',
+          medium: 'w-4 h-4',
+          large: 'w-6 h-6'
+        }.freeze
+      end
+    end
+  end
+end

data/app/components/tailwinds/form/multiselect/dropdown_container_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  module Form
+    module Multiselect
+      # Container for dropdown component
+      class DropdownContainerComponent < Tramway::BaseComponent
+        option :size
+
+        SIZE_CLASSES = {
+          small: 'text-sm',
+          medium: 'text-base',
+          large: 'text-lg'
+        }.freeze
+
+        def dropdown_classes
+          theme_classes(
+            classic: 'absolute border-b border-l border-r border-gray-700 w-full z-40 lef-0 rounded-b-xl' \
+                     'max-h-select overflow-y-auto bg-gray-900 shadow-md ring-1 ring-gray-700 text-white ' \
+                     "#{SIZE_CLASSES[size]}"
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/tailwinds/form/multiselect/{item_container.html.haml → item_container_component.html.haml}

@@ -1,5 +1,2 @@
 %div{ class: item_classes, data: { action: "click->multiselect#toggleItem", text: "{{text}}", value: "{{value}}" } }
-  %div{ class: item_inner_classes }
-    %div{ class: item_text_classes }
-      .mx-2.leading-6
-        {{text}}
+  {{text}}

data/app/components/tailwinds/form/multiselect/item_container_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  module Form
+    module Multiselect
+      # Container for item in dropdown component
+      class ItemContainerComponent < Tramway::BaseComponent
+        option :size
+
+        SIZE_CLASSES = {
+          small: 'p-1',
+          medium: 'p-2',
+          large: 'p-3'
+        }.freeze
+
+        def item_classes
+          theme_classes(
+            classic: "cursor-pointer hover:bg-gray-800 shadow-inner option #{SIZE_CLASSES[size]}"
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/tailwinds/form/multiselect/{select_as_input.rb → select_as_input_component.rb}

@@ -4,7 +4,7 @@ module Tailwinds
   module Form
     module Multiselect
       # Renders input as select
-      class SelectAsInput < Tramway::BaseComponent
+      class SelectAsInputComponent < Tramway::BaseComponent
         option :options
         option :attribute
         option :input

data/app/components/tailwinds/form/multiselect/selected_item_template_component.html.haml

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

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  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/tailwinds/form/multiselect_component.html.haml

@@ -1,10 +1,13 @@
-.mb-4
+.mb-4.relative
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  %div{ class: wrapper_classes, data: multiselect_hash, id: "#{@for}_multiselect" }
-    .min-w-96.w-fit
-      %div{ class: dropdown_classes, data: { "multiselect-target" => "dropdown" } }
-        .flex.flex-auto.flex-wrap{ data: { "multiselect-target" => "showSelectedArea" } }
-        %div{ class: dropdown_indicator_classes }
-          ^
+  %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 'tailwinds/form/multiselect/caret', size: size, direction: :down
+        .caret-up.hidden{ data: { "multiselect-target" => "caretUp" } }
+          = component 'tailwinds/form/multiselect/caret', size: size, direction: :up

data/app/components/tailwinds/form/multiselect_component.rb

@@ -12,12 +12,23 @@ module Tailwinds
         end.to_json
       end
 
+      # rubocop:disable Metrics/MethodLength
       def multiselect_hash
         {
-          controller:, selected_item_template:, multiselect_selected_items_value:, dropdown_container:, item_container:,
-          items:, action:, select_as_input:, placeholder:, value:, on_change:
+          controller:,
+          selected_item_template:,
+          multiselect_selected_items_value:,
+          dropdown_container:,
+          item_container:,
+          items:,
+          action:,
+          select_as_input:,
+          placeholder:,
+          value:,
+          on_change:
         }.transform_keys { |key| key.to_s.gsub('_', '-') }
       end
+      # rubocop:enable Metrics/MethodLength
 
       def controller
         controllers = [:multiselect]
@@ -26,22 +37,20 @@ module Tailwinds
         controllers.join(' ')
       end
 
-      def wrapper_classes
-        theme_classes(
-          classic: 'flex flex-col relative text-gray-200'
+      def dropdown_data
+        (options[:data] || {}).merge(
+          'multiselect-target' => 'dropdown',
+          'dropdown-container' => dropdown_container,
+          'item-container' => item_container
         )
       end
 
-      def dropdown_classes
-        theme_classes(
-          classic: 'p-1 flex border rounded-xl border-gray-700 bg-gray-900 shadow-inner'
-        )
+      def dropdown_options
+        options.except(:data).merge(class: input_classes)
       end
 
-      def dropdown_indicator_classes
-        theme_classes(
-          classic: 'w-8 py-1 pl-2 pr-1 border-l flex items-center text-gray-500 border-gray-700'
-        )
+      def input_classes
+        "#{size_class(:multiselect_input)} #{select_base_classes}"
       end
 
       private
@@ -63,13 +72,12 @@ module Tailwinds
       end
 
       def select_as_input
-        render(
-          Tailwinds::Form::Multiselect::SelectAsInput.new(
-            options:,
-            attribute:,
-            input:,
-            size_class: size_class(:multiselect_input)
-          )
+        component(
+          'tailwinds/form/multiselect/select_as_input',
+          options:,
+          attribute:,
+          input:,
+          size_class: size_class(:multiselect_input)
         )
       end
 
@@ -87,29 +95,17 @@ module Tailwinds
         options.dig(:data, :action)
       end
 
-      def method_missing(method_name, *, &)
-        component = component_name(method_name)
-
-        if method_name.to_s.include?('_') && Object.const_defined?(component)
-          render(component.constantize.new(*, &))
-        else
-          super
-        end
+      def selected_item_template
+        component('tailwinds/form/multiselect/selected_item_template', size:)
       end
 
-      def respond_to_missing?(method_name, include_private = false)
-        if method_name.to_s.include?('_') && Object.const_defined?(component_name(method_name))
-          true
-        else
-          super
-        end
+      def dropdown_container
+        component('tailwinds/form/multiselect/dropdown_container', size:)
       end
 
-      # :reek:UtilityFunction { enabled: false }
-      def component_name(method_name)
-        "Tailwinds::Form::Multiselect::#{method_name.to_s.camelize}"
+      def item_container
+        component('tailwinds/form/multiselect/item_container', size:)
       end
-      # :reek:UtilityFunction { enabled: true }
     end
   end
 end

data/config/tailwind.config.js

@@ -247,7 +247,6 @@ module.exports = {
     'absolute',
     'relative',
     'shadow',
-    'top-11',
     'z-40',
     'max-h-select',
     'overflow-y-auto',
@@ -269,6 +268,25 @@ module.exports = {
     'outline-none',
     'h-full',
     'm-1',
+    'p-1',
+    'p-2',
+    'p-3',
+    'rounded-b-xl',
+    'hover:bg-gray-800',
+    'border-gray-700',
+    'h-15',
+    'h-12',
+    'h-10',
+    'w-2',
+    'h-2',
+    'w-4',
+    'h-4',
+    'w-6',
+    'h-6',
+    'px-2',
+    'py-1',
+    'flex-nowrap',
+    'overflow-x-auto',
 
     // === Flash message styles ===
     'fixed',

data/lib/tramway/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: 2.2.4
+  version: 2.2.5
 platform: ruby
 authors:
 - kalashnikovisme
@@ -164,14 +164,16 @@ files:
 - app/components/tailwinds/form/file_field_component.rb
 - app/components/tailwinds/form/label_component.html.haml
 - app/components/tailwinds/form/label_component.rb
-- app/components/tailwinds/form/multiselect/dropdown_container.html.haml
-- app/components/tailwinds/form/multiselect/dropdown_container.rb
-- app/components/tailwinds/form/multiselect/item_container.html.haml
-- app/components/tailwinds/form/multiselect/item_container.rb
-- app/components/tailwinds/form/multiselect/select_as_input.html.haml
-- app/components/tailwinds/form/multiselect/select_as_input.rb
-- app/components/tailwinds/form/multiselect/selected_item_template.html.haml
-- app/components/tailwinds/form/multiselect/selected_item_template.rb
+- app/components/tailwinds/form/multiselect/caret_component.html.haml
+- app/components/tailwinds/form/multiselect/caret_component.rb
+- app/components/tailwinds/form/multiselect/dropdown_container_component.html.haml
+- app/components/tailwinds/form/multiselect/dropdown_container_component.rb
+- app/components/tailwinds/form/multiselect/item_container_component.html.haml
+- app/components/tailwinds/form/multiselect/item_container_component.rb
+- app/components/tailwinds/form/multiselect/select_as_input_component.html.haml
+- app/components/tailwinds/form/multiselect/select_as_input_component.rb
+- app/components/tailwinds/form/multiselect/selected_item_template_component.html.haml
+- app/components/tailwinds/form/multiselect/selected_item_template_component.rb
 - app/components/tailwinds/form/multiselect_component.html.haml
 - app/components/tailwinds/form/multiselect_component.rb
 - app/components/tailwinds/form/number_field_component.html.haml

data/app/components/tailwinds/form/multiselect/dropdown_container.rb

@@ -1,17 +0,0 @@
-# frozen_string_literal: true
-
-module Tailwinds
-  module Form
-    module Multiselect
-      # Container for dropdown component
-      class DropdownContainer < Tramway::BaseComponent
-        def dropdown_classes
-          theme_classes(
-            classic: 'absolute shadow top-11 z-40 w-full lef-0 rounded-xl max-h-select overflow-y-auto ' \
-                     'bg-gray-900 shadow-md ring-1 ring-gray-700'
-          )
-        end
-      end
-    end
-  end
-end

data/app/components/tailwinds/form/multiselect/item_container.rb

@@ -1,30 +0,0 @@
-# frozen_string_literal: true
-
-module Tailwinds
-  module Form
-    module Multiselect
-      # Container for item in dropdown component
-      class ItemContainer < Tramway::BaseComponent
-        def item_classes
-          theme_classes(
-            classic: 'cursor-pointer w-full rounded-xl border-b border-gray-700 bg-gray-900 ' \
-                     'hover:bg-gray-800 shadow-inner'
-          )
-        end
-
-        def item_inner_classes
-          theme_classes(
-            classic: 'flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative ' \
-                     'hover:border-gray-600'
-          )
-        end
-
-        def item_text_classes
-          theme_classes(
-            classic: 'w-full items-center flex text-gray-100'
-          )
-        end
-      end
-    end
-  end
-end

data/app/components/tailwinds/form/multiselect/selected_item_template.html.haml

@@ -1,6 +0,0 @@
-%div{ class: selected_item_classes }
-  .text-xs.font-normal.leading-none.max-w-full.flex-initial
-    {{text}}
-  .flex.flex-auto.flex-row-reverse
-    .cursor-pointer{ data: { action: "click->multiselect#toggleItem", text: "{{text}}", value: "{{value}}" } }
-      ⨯

data/app/components/tailwinds/form/multiselect/selected_item_template.rb

@@ -1,17 +0,0 @@
-# frozen_string_literal: true
-
-module Tailwinds
-  module Form
-    module Multiselect
-      # Tailwind-styled multi-select field
-      class SelectedItemTemplate < Tramway::BaseComponent
-        def selected_item_classes
-          theme_classes(
-            classic: 'flex justify-center items-center m-1 font-medium py-1 px-2 rounded-full border ' \
-                     'bg-teal-900 text-teal-100 border-teal-700 shadow-md'
-          )
-        end
-      end
-    end
-  end
-end