tramway 3.1 → 3.1.1.1

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

@@ -15,7 +15,7 @@ module Tramway
         }.freeze
 
         def selected_item_classes
-          classes = 'flex justify-center items-center font-medium py-1 px-2 rounded-md ' \
+          classes = 'flex flex-none justify-center items-center font-medium py-1 px-2 rounded-md ' \
                     'bg-zinc-900 text-zinc-50 shadow-sm hover:bg-zinc-800 cursor-pointer ' \
                     'space-x-1 selected-option ' + SIZE_CLASSES[size].to_s
 

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

@@ -3,10 +3,10 @@
     = 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
+    - selected_items_classes = ['flex flex-row w-full', multiple ? 'flex-wrap gap-1 min-w-0' : 'flex-nowrap overflow-x-auto space-x-1'].join(' ')
+    .flex.flex-end.justify-between.gap-1{ data: dropdown_data, **dropdown_options }
+      %div{ class: selected_items_classes, data: { "tramway-select-target" => "showSelectedArea" } }
+      .flex.flex-col.justify-center.shrink-0
         .caret-down{ data: { "tramway-select-target" => "caretDown" } }
           = component 'tramway/form/tramway_select/caret', size:, direction: :down
         .caret-up.hidden{ data: { "tramway-select-target" => "caretUp" } }

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

@@ -73,11 +73,16 @@ module Tramway
       end
 
       def input_classes
-        "#{size_class(:tramway_select_input)} #{select_base_classes}"
+        "#{tramway_select_size_class} #{select_base_classes}"
       end
 
       private
 
+      def tramway_select_size_class
+        classes = size_class(:tramway_select_input)
+        multiple ? classes.gsub(/\bh-/, 'min-h-') : classes
+      end
+
       def action
         'click->tramway-select#toggleDropdown'
       end
@@ -100,7 +105,7 @@ module Tramway
           options:,
           attribute:,
           input:,
-          size_class: size_class(:tramway_select_input)
+          size_class: tramway_select_size_class
         )
       end
 

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

@@ -0,0 +1,12 @@
+- if normalized_event == :onclick
+  %div{ class: wrapper_classes, **wrapper_options }
+    %div{ class: trigger_classes, data: trigger_data }
+      = content
+    %span{ class: tooltip_classes, role: 'tooltip', data: tooltip_data }
+      = text
+- else
+  %div{ class: wrapper_classes, **wrapper_options }
+    %div{ class: trigger_classes }
+      = content
+    %span{ class: tooltip_classes, role: 'tooltip', data: tooltip_data }
+      = text

data/app/components/tramway/tooltip_component.rb

@@ -0,0 +1,93 @@
+# frozen_string_literal: true
+
+module Tramway
+  # Default Tramway tooltip
+  #
+  class TooltipComponent < Tramway::BaseComponent
+    EVENTS = %i[hover onclick].freeze
+
+    option :text
+    option :event, default: -> { :hover }
+    option :options, optional: true, default: -> { {} }
+
+    def wrapper_classes
+      (base_wrapper_classes + options[:class].to_s.split).compact.join(' ')
+    end
+
+    def trigger_classes
+      {
+        hover: %w[peer inline-flex w-fit],
+        onclick: %w[inline-flex w-fit cursor-pointer]
+      }[normalized_event].join(' ')
+    end
+
+    def wrapper_data
+      return options[:data] || {} unless normalized_event == :onclick
+
+      (options[:data] || {}).merge(
+        controller: merged_controller,
+        action: merged_action
+      )
+    end
+
+    def wrapper_options
+      options.except(:class, :data).merge(data: wrapper_data)
+    end
+
+    def trigger_data
+      return {} unless normalized_event == :onclick
+
+      { action: 'click->tramway-tooltip#toggle' }
+    end
+
+    def tooltip_data
+      return {} unless normalized_event == :onclick
+
+      { 'tramway-tooltip-target': 'panel' }
+    end
+
+    def tooltip_classes
+      (base_tooltip_classes + event_tooltip_classes).join(' ')
+    end
+
+    def normalized_event
+      event.to_sym
+    end
+
+    private
+
+    def before_render
+      return if EVENTS.include?(normalized_event)
+
+      raise ArgumentError, "Invalid event: #{event}. Valid events are :hover, :onclick."
+    end
+
+    def base_wrapper_classes
+      %w[relative inline-flex w-fit]
+    end
+
+    def base_tooltip_classes
+      %w[
+        absolute bottom-full left-1/2 z-50 mb-2 w-max min-w-40 max-w-sm -translate-x-1/2 rounded-md border
+        border-zinc-800 bg-zinc-950 px-2.5 py-1.5 text-xs font-medium leading-5 text-zinc-50 shadow-lg
+      ]
+    end
+
+    def event_tooltip_classes
+      if normalized_event == :hover
+        return %w[pointer-events-none invisible opacity-0 transition-opacity peer-hover:visible
+                  peer-hover:opacity-100]
+      end
+
+      %w[hidden]
+    end
+
+    def merged_controller
+      [options.dig(:data, :controller), 'tramway-tooltip'].compact_blank.join(' ')
+    end
+
+    def merged_action
+      [options.dig(:data, :action), 'click@window->tramway-tooltip#closeOnClickOutside'].compact_blank.join(' ')
+    end
+  end
+end

data/app/views/tramway/entities/_form.html.haml

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

data/config/tailwind.config.js

@@ -236,7 +236,7 @@ module.exports = {
     'disabled:opacity-50',
     'h-10',
 
-    'hover:bg-zinc-250',
+    'hover:bg-zinc-200',
     'bg-zinc-50',
     'text-zinc-950',
     'bg-zinc-950',
@@ -318,6 +318,7 @@ module.exports = {
     'flex-wrap',
     'flex-row-reverse',
     'flex-auto',
+    'flex-none',
     'flex-initial',
     'justify-between',
     'justify-end',
@@ -333,6 +334,10 @@ module.exports = {
     'w-fit',
     'w-8',
     'min-w-96',
+    'min-w-0',
+    'min-h-10',
+    'min-h-12',
+    'min-h-15',
     'max-w-full',
 
     // === Spacing utilities ===
@@ -364,6 +369,29 @@ module.exports = {
     'placeholder-gray-500',
 
     // === Button and badge helpers ===
+    'peer',
+    'peer-hover:visible',
+    'peer-hover:opacity-100',
+    'group',
+    'group-hover:visible',
+    'group-hover:opacity-100',
+    'open:block',
+    'bottom-full',
+    'left-1/2',
+    '-translate-x-1/2',
+    'z-50',
+    'mb-2',
+    'w-max',
+    'min-w-40',
+    'max-w-sm',
+    'invisible',
+    'opacity-0',
+    'transition-opacity',
+    'pointer-events-none',
+    'leading-5',
+    'list-none',
+    'cursor-pointer',
+    'py-1.5',
     'rounded',
     'rounded-full',
     'rounded-xl',
@@ -374,10 +402,27 @@ module.exports = {
     'h-fit',
     'gap-1',
     'h-10',
+    'px-2.5',
+    'py-0.5',
     'shadow-md',
     'shadow-inner',
     'shadow-lg',
+    'shadow',
     'h-12',
+    'border-transparent',
+    'focus:ring-2',
+    'focus:ring-zinc-400',
+    'focus:ring-offset-2',
+    'focus:ring-offset-zinc-950',
+    'hover:bg-zinc-800/80',
+    'border-green-800',
+    'border-orange-800',
+    'border-red-800',
+    'border-violet-800',
+    'border-indigo-800',
+    'border-yellow-800',
+    'border-blue-800',
+    'border-gray-800',
 
     // === Shadcn UI button styles ===
     'bg-green-600',

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

@@ -55,16 +55,8 @@ module Tramway
         @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_ui_checkbox_pin
-        'pin "@tramway/checkbox", to: "tramway/ui_checkbox_controller.js"'
+      def importmap_tramway_pin
+        'pin "@tramway/tramway", to: "tramway/tramway.js"'
       end
 
       def importmap_tailwind_requirements
@@ -80,17 +72,13 @@ module Tramway
       def importmap_tramway_pins
         [
           importmap_tailwind_requirements,
-          importmap_tramway_select_pin,
-          importmap_table_row_preview_pin,
-          importmap_ui_checkbox_pin
+          importmap_tramway_pin
         ]
       end
 
       def stimulus_controller_imports
         [
-          'import { TramwaySelect } from "@tramway/tramway-select"',
-          'import { TableRowPreview } from "@tramway/table-row-preview"',
-          'import { UiCheckbox } from "@tramway/checkbox"'
+          'import { TramwaySelect, TableRowPreview, UiCheckbox, Tooltip } from "@tramway/tramway"'
         ]
       end
 
@@ -98,7 +86,8 @@ module Tramway
         [
           "application.register('tramway-select', TramwaySelect)",
           "application.register('table-row-preview', TableRowPreview)",
-          "application.register('ui--checkbox', UiCheckbox)"
+          "application.register('ui--checkbox', UiCheckbox)",
+          "application.register('tramway-tooltip', Tooltip)"
         ]
       end
 
@@ -162,7 +151,7 @@ module Tramway
 
       # rubocop:disable Metrics/MethodLength
       def append_missing_imports(content)
-        content = normalize_checkbox_import(content)
+        content = remove_legacy_stimulus_imports(content)
         missing_imports = stimulus_controller_imports.reject { |line| content.include?(line) }
         return content if missing_imports.empty?
 
@@ -198,21 +187,44 @@ module Tramway
         updated
       end
 
-      def normalize_checkbox_import(content)
-        content.gsub(
+      def remove_legacy_stimulus_imports(content)
+        legacy_imports = [
+          'import { TramwaySelect } from "@tramway/tramway-select"',
+          'import { TableRowPreview } from "@tramway/table-row-preview"',
+          'import { UiCheckbox } from "@tramway/checkbox"',
           'import { UiCheckbox } from "@tramway/ui-checkbox"',
-          'import { UiCheckbox } from "@tramway/checkbox"'
-        )
+          'import { Tooltip } from "@tramway/tooltip"'
+        ]
+
+        content.each_line.reject { |line| legacy_imports.include?(line.strip) }.join
       end
 
-      def normalize_checkbox_pin(content)
-        content.gsub(
+      def remove_legacy_importmap_pins(content)
+        content.each_line.reject { |line| legacy_importmap_pins.include?(line.strip) }.join
+      end
+
+      def legacy_importmap_pins
+        double_quoted_legacy_importmap_pins + single_quoted_legacy_importmap_pins
+      end
+
+      def double_quoted_legacy_importmap_pins
+        [
+          'pin "@tramway/tramway-select", to: "tramway/tramway-select_controller.js"',
+          'pin "@tramway/table-row-preview", to: "tramway/table_row_preview_controller.js"',
+          'pin "@tramway/checkbox", to: "tramway/ui_checkbox_controller.js"',
           'pin "@tramway/ui-checkbox", to: "tramway/ui_checkbox_controller.js"',
-          'pin "@tramway/checkbox", to: "tramway/ui_checkbox_controller.js"'
-        ).gsub(
+          'pin "@tramway/tooltip", to: "tramway/tooltip_controller.js"'
+        ]
+      end
+
+      def single_quoted_legacy_importmap_pins
+        [
+          "pin '@tramway/tramway-select', to: 'tramway/tramway-select_controller.js'",
+          "pin '@tramway/table-row-preview', to: 'tramway/table_row_preview_controller.js'",
+          "pin '@tramway/checkbox', to: 'tramway/ui_checkbox_controller.js'",
           "pin '@tramway/ui-checkbox', to: 'tramway/ui_checkbox_controller.js'",
-          "pin '@tramway/checkbox', to: 'tramway/ui_checkbox_controller.js'"
-        )
+          "pin '@tramway/tooltip', to: 'tramway/tooltip_controller.js'"
+        ]
       end
 
       def with_agents_update_fallback
@@ -290,7 +302,7 @@ module Tramway
       def ensure_importmap_pin
         return unless File.exist?(importmap_path)
 
-        content = normalize_checkbox_pin(File.read(importmap_path))
+        content = remove_legacy_importmap_pins(File.read(importmap_path))
         missing_pins = importmap_tramway_pins.reject { |pin| content.include?(pin) }
         File.write(importmap_path, content) if content != File.read(importmap_path)
         return if missing_pins.empty?

data/lib/tramway/engine.rb

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

data/lib/tramway/helpers/views_helper.rb

@@ -46,7 +46,7 @@ module Tramway
       def tramway_button(path: nil, text: nil, method: :get, form_options: {}, **options, &)
         component 'tramway/button', text:, path:, method:, form_options:, color: options.delete(:color),
                                     type: options.delete(:type), size: options.delete(:size),
-                                    tag: options.delete(:tag), options:, &
+                                    tag: options.delete(:tag), tooltip: options.delete(:tooltip), options:, &
       end
 
       def tramway_back_button
@@ -72,6 +72,10 @@ module Tramway
                   color:
       end
 
+      def tramway_tooltip(text:, event: :hover, **options, &)
+        component 'tramway/tooltip', text:, event:, options:, &
+      end
+
       def tramway_title(text: nil, **options, &)
         component 'tramway/title', text:, options:, &
       end

data/lib/tramway/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: '3.1'
+  version: 3.1.1.1
 platform: ruby
 authors:
 - kalashnikovisme
@@ -138,9 +138,7 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
-- app/assets/javascripts/tramway/table_row_preview_controller.js
-- app/assets/javascripts/tramway/tramway-select_controller.js
-- app/assets/javascripts/tramway/ui_checkbox_controller.js
+- app/assets/javascripts/tramway/tramway.js
 - app/components/tailwind_component.html.haml
 - app/components/tailwind_component.rb
 - app/components/tramway/actions_buttons_container_component.html.haml
@@ -242,6 +240,8 @@ files:
 - app/components/tramway/table_component.rb
 - app/components/tramway/title_component.html.haml
 - app/components/tramway/title_component.rb
+- app/components/tramway/tooltip_component.html.haml
+- app/components/tramway/tooltip_component.rb
 - app/controllers/tramway/entities_controller.rb
 - app/helpers/tramway/application_helper.rb
 - app/views/kaminari/_first_page.html.haml
@@ -323,7 +323,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.6
+rubygems_version: 4.0.10
 specification_version: 4
 summary: Tramway Rails Engine
 test_files: []

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

@@ -1,175 +0,0 @@
-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 = 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) {
-      existingTable.remove();
-    }
-
-    const existingTitle = rollUp.querySelector("h3");
-    if (existingTitle) {
-      existingTitle.remove();
-    }
-
-    const titleText = document.createElement("h3");
-
-    titleText.classList.add("text-xl");
-    titleText.classList.add("text-white");
-    titleText.classList.add("py-4");
-    titleText.classList.add("px-4");
-    titleText.textContent = Object.values(this.items)[0];
-
-    const table = this.createTable(this.items);
-
-    rollUp.insertAdjacentElement('afterbegin', table);
-    rollUp.insertAdjacentElement('afterbegin', titleText);
-
-    rollUp.classList.remove("hidden");
-  }
-
-  close() {
-    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) {
-    const table = document.createElement("div");
-    table.classList.add("div-table");
-    table.classList.add("text-white");
-    table.classList.add("px-2");
-
-    Object.entries(items).forEach(([key, value]) => {
-      const rows = this.createTableRow(key, value);
-
-      rows.forEach((row) => table.appendChild(row));
-    });
-
-    return table;
-  }
-
-  createTableRow(key, value) {
-    const keyRow = document.createElement("div");
-    keyRow.classList.add("div-table-row");
-    keyRow.classList.add("bg-gray-700");
-    keyRow.classList.add("text-white");
-    keyRow.classList.add("px-2");
-    keyRow.classList.add("py-1");
-    keyRow.classList.add("text-xs");
-    keyRow.classList.add("font-semibold");
-    keyRow.textContent = key;
-
-    const valueRow = document.createElement("div"); 
-    valueRow.classList.add("div-table-row");
-    valueRow.classList.add("bg-gray-800");
-    valueRow.classList.add("px-2");
-    valueRow.classList.add("py-2");
-    valueRow.textContent = value;
-
-    return [keyRow, valueRow];
-  }
-}
-
-export { TableRowPreview };