spree_admin 5.2.0.rc3 → 5.2.0

data/app/javascript/spree/admin/controllers/sidebar_controller.js

@@ -0,0 +1,231 @@
+import { Controller } from "@hotwired/stimulus";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["desktop", "mobile"];
+
+  static values = {
+    storageKey: { type: String, default: "spree_admin_sidebar_open" },
+  };
+
+  connect() {
+    // Initialize dropdown tracking
+    this.activeDropdown = null
+    this.dropdownCleanup = null
+    this.submenuHoverHandlers = new Map()
+    this.hideTimeout = null
+
+    // Disable transitions during initial load to prevent animation flash
+    this.element.classList.add("sidebar-no-transition");
+
+    // Restore saved state for desktop sidebar (default is open/expanded)
+    const savedState = localStorage.getItem(this.storageKeyValue);
+
+    // Only collapse if explicitly saved as false
+    if (savedState === "false") {
+      this.element.classList.add("sidebar-collapsed");
+      this.setupCollapsedSubmenuHandlers();
+    } else {
+      // Explicitly ensure it's not collapsed (default is expanded)
+      this.element.classList.remove("sidebar-collapsed");
+    }
+
+    // Re-enable transitions after initial state is set
+    requestAnimationFrame(() => {
+      this.element.classList.remove("sidebar-no-transition");
+    });
+  }
+
+  disconnect() {
+    // Clear any pending hide timeout
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+
+    this.cleanupSubmenuHandlers();
+    if (this.dropdownCleanup) {
+      this.dropdownCleanup();
+      this.dropdownCleanup = null;
+    }
+  }
+
+  toggle() {
+    this.element.classList.toggle("sidebar-collapsed");
+    const isCollapsed = this.element.classList.contains("sidebar-collapsed");
+    localStorage.setItem(this.storageKeyValue, String(!isCollapsed));
+
+    // Setup or cleanup submenu handlers based on state
+    if (isCollapsed) {
+      this.setupCollapsedSubmenuHandlers();
+    } else {
+      this.cleanupSubmenuHandlers();
+    }
+  }
+
+  openMobile() {
+    if (this.hasMobileTarget) {
+      this.mobileTarget.classList.add("sidebar-mobile-open");
+    }
+  }
+
+  closeMobile() {
+    if (this.hasMobileTarget) {
+      this.mobileTarget.classList.remove("sidebar-mobile-open");
+    }
+  }
+
+  setupCollapsedSubmenuHandlers() {
+    const sidebar = document.querySelector('#main-sidebar');
+    if (!sidebar) return;
+
+    // Find all dropdown submenus
+    const dropdowns = sidebar.querySelectorAll('.nav-submenu-dropdown');
+
+    dropdowns.forEach(dropdown => {
+      // Find the associated nav-item (previous sibling, skipping the regular nav-submenu)
+      let navItem = dropdown.previousElementSibling;
+
+      // Skip over the regular .nav-submenu to get to the .nav-item
+      while (navItem && navItem.classList.contains('nav-submenu')) {
+        navItem = navItem.previousElementSibling;
+      }
+
+      if (!navItem || !navItem.classList.contains('nav-item')) return;
+
+      const showHandler = () => this.showSubmenuFloating(navItem, dropdown);
+      const hideHandler = () => this.scheduleHideSubmenu();
+
+      navItem.addEventListener('mouseenter', showHandler);
+      navItem.addEventListener('mouseleave', hideHandler);
+      dropdown.addEventListener('mouseenter', showHandler);
+      dropdown.addEventListener('mouseleave', hideHandler);
+
+      this.submenuHoverHandlers.set(navItem, { showHandler, hideHandler, dropdown });
+    });
+  }
+
+  cleanupSubmenuHandlers() {
+    this.submenuHoverHandlers.forEach(({ showHandler, hideHandler, dropdown }, navItem) => {
+      navItem.removeEventListener('mouseenter', showHandler);
+      navItem.removeEventListener('mouseleave', hideHandler);
+      dropdown.removeEventListener('mouseenter', showHandler);
+      dropdown.removeEventListener('mouseleave', hideHandler);
+    });
+    this.submenuHoverHandlers.clear();
+
+    // Hide active dropdown if any
+    if (this.activeDropdown) {
+      this.hideSubmenuFloating();
+    }
+  }
+
+  showSubmenuFloating(navItem, dropdown) {
+    // Cancel any pending hide
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+
+    // If showing same dropdown, return
+    if (this.activeDropdown === dropdown) {
+      return;
+    }
+
+    // Hide any currently active dropdown
+    if (this.activeDropdown) {
+      this.hideSubmenuFloating();
+    }
+
+    // Store reference
+    this.activeDropdown = dropdown;
+
+    // Move dropdown to body for proper positioning (to avoid sidebar overflow clipping)
+    if (dropdown.parentNode !== document.body) {
+      dropdown._originalParent = dropdown.parentNode;
+      dropdown._originalNextSibling = dropdown.nextSibling;
+      document.body.appendChild(dropdown);
+    }
+
+    // Show dropdown
+    dropdown.classList.remove('d-none');
+
+    // Style dropdown items
+    dropdown.querySelectorAll('.nav-link').forEach((item, index) => {
+      item.classList.add('dropdown-item');
+      if (index > 0) {
+        item.classList.add('mt-1');
+      }
+    });
+
+    // Position using Floating UI
+    if (this.dropdownCleanup) {
+      this.dropdownCleanup();
+    }
+
+    this.dropdownCleanup = autoUpdate(navItem, dropdown, () => {
+      computePosition(navItem, dropdown, {
+        placement: 'right-start',
+        middleware: [
+          offset(8),
+          flip(),
+          shift({ padding: 8 }),
+        ],
+      }).then(({ x, y }) => {
+        Object.assign(dropdown.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
+
+  scheduleHideSubmenu() {
+    // Clear any existing timeout
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+    }
+
+    // Schedule hide with delay to allow mouse to move to submenu
+    this.hideTimeout = setTimeout(() => {
+      this.hideSubmenuFloating();
+      this.hideTimeout = null;
+    }, 150); // 150ms grace period
+  }
+
+  hideSubmenuFloating() {
+    if (!this.activeDropdown) return;
+
+    // Stop auto-update
+    if (this.dropdownCleanup) {
+      this.dropdownCleanup();
+      this.dropdownCleanup = null;
+    }
+
+    // Hide dropdown
+    this.activeDropdown.classList.add('d-none');
+
+    // Restore dropdown to original position in sidebar
+    if (this.activeDropdown._originalParent) {
+      if (this.activeDropdown._originalNextSibling) {
+        this.activeDropdown._originalParent.insertBefore(
+          this.activeDropdown,
+          this.activeDropdown._originalNextSibling
+        );
+      } else {
+        this.activeDropdown._originalParent.appendChild(this.activeDropdown);
+      }
+      this.activeDropdown._originalParent = null;
+      this.activeDropdown._originalNextSibling = null;
+    }
+
+    // Clear reference
+    this.activeDropdown = null;
+  }
+}

data/app/javascript/spree/admin/controllers/tooltip_controller.js

@@ -8,7 +8,6 @@ import {
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["tooltip"]
   static values = {
     placement: { type: String, default: "top" },
     offset: { type: Number, default: 10 },
@@ -17,18 +16,34 @@ export default class extends Controller {
   }
 
   connect() {
+    // Find tooltip element by CSS class instead of Stimulus target
+    this.tooltip = this.element.querySelector('.tooltip-container')
+
+    // Early return if no tooltip element exists
+    if (!this.tooltip) {
+      return
+    }
+
     this._cleanup = null
     this.boundUpdate = this.update.bind(this)
     this._originalWidth = null
     this._isShown = false
+    this._originalParent = null
+    this._originalNextSibling = null
+    this._movedToBody = false
     this.startAutoUpdate()
     this.addEventListeners()
     this.prepareTooltip()
   }
 
   disconnect() {
+    if (!this.tooltip) {
+      return
+    }
+
     this.removeEventListeners()
     this.stopAutoUpdate()
+    this.restoreTooltipPosition()
     this.resetTooltip()
   }
 
@@ -44,43 +59,75 @@ export default class extends Controller {
 
   prepareTooltip() {
     // Ensure tooltip is rendered offscreen but measurable
-    if (this.tooltipTarget) {
+    if (this.tooltip) {
       // Save original display
-      this._originalDisplay = this.tooltipTarget.style.display
+      this._originalDisplay = this.tooltip.style.display
       // Temporarily show tooltip offscreen to measure size
-      this.tooltipTarget.style.visibility = "hidden"
-      this.tooltipTarget.style.display = "block"
-      this.tooltipTarget.style.left = "-9999px"
-      this.tooltipTarget.style.top = "-9999px"
+      this.tooltip.style.visibility = "hidden"
+      this.tooltip.style.display = "block"
+      this.tooltip.style.left = "-9999px"
+      this.tooltip.style.top = "-9999px"
       // Force reflow and measure
-      this._originalWidth = this.tooltipTarget.offsetWidth + 10
+      this._originalWidth = this.tooltip.offsetWidth + 10
       // Height is now dynamic, so we do not set or store it
-      this.tooltipTarget.style.width = `${this._originalWidth}px`
-      this.tooltipTarget.style.height = "" // Remove any fixed height
+      this.tooltip.style.width = `${this._originalWidth}px`
+      this.tooltip.style.height = "" // Remove any fixed height
       // Hide again
-      this.tooltipTarget.style.display = "none"
-      this.tooltipTarget.style.visibility = ""
-      this.tooltipTarget.style.left = ""
-      this.tooltipTarget.style.top = ""
+      this.tooltip.style.display = "none"
+      this.tooltip.style.visibility = ""
+      this.tooltip.style.left = ""
+      this.tooltip.style.top = ""
     }
   }
 
   resetTooltip() {
-    if (this.tooltipTarget) {
-      this.tooltipTarget.style.width = ""
-      this.tooltipTarget.style.height = ""
-      this.tooltipTarget.style.display = this._originalDisplay || ""
+    if (this.tooltip) {
+      this.tooltip.style.width = ""
+      this.tooltip.style.height = ""
+      this.tooltip.style.display = this._originalDisplay || ""
+    }
+  }
+
+  moveTooltipToBody() {
+    if (this.tooltip && this.tooltip.parentNode !== document.body) {
+      // Save original position for restoration
+      this._originalParent = this.tooltip.parentNode
+      this._originalNextSibling = this.tooltip.nextSibling
+
+      // Move tooltip to body to prevent clipping by sidebar overflow
+      document.body.appendChild(this.tooltip)
+    }
+  }
+
+  restoreTooltipPosition() {
+    if (this.tooltip && this._originalParent) {
+      // Restore tooltip to original position
+      if (this._originalNextSibling) {
+        this._originalParent.insertBefore(this.tooltip, this._originalNextSibling)
+      } else {
+        this._originalParent.appendChild(this.tooltip)
+      }
+      this._originalParent = null
+      this._originalNextSibling = null
     }
   }
 
   show = () => {
+    if (!this.tooltip) return
+
     if (!this._isShown) {
-      this.tooltipTarget.style.display = "block"
-      this.tooltipTarget.style.visibility = "visible"
+      // Move to body on first show
+      if (!this._movedToBody) {
+        this.moveTooltipToBody()
+        this._movedToBody = true
+      }
+
+      this.tooltip.style.display = "block"
+      this.tooltip.style.visibility = "visible"
       // Set explicit width, but let height be dynamic
       if (this._originalWidth) {
-        this.tooltipTarget.style.width = `${this._originalWidth}px`
-        this.tooltipTarget.style.height = ""
+        this.tooltip.style.width = `${this._originalWidth}px`
+        this.tooltip.style.height = ""
       }
       this.update() // Ensure immediate update when shown
       this._isShown = true
@@ -88,19 +135,21 @@ export default class extends Controller {
   }
 
   hide = () => {
+    if (!this.tooltip) return
+
     if (this._isShown) {
-      this.tooltipTarget.style.display = "none"
-      this.tooltipTarget.style.visibility = ""
+      this.tooltip.style.display = "none"
+      this.tooltip.style.visibility = ""
       // Keep width set to prevent flicker if quickly re-hovered
       this._isShown = false
     }
   }
 
   startAutoUpdate() {
-    if (!this._cleanup) {
+    if (!this._cleanup && this.tooltip) {
       this._cleanup = autoUpdate(
         this.element,
-        this.tooltipTarget,
+        this.tooltip,
         this.boundUpdate,
       )
     }
@@ -114,8 +163,10 @@ export default class extends Controller {
   }
 
   update() {
+    if (!this.tooltip) return
+
     // Update position even if not visible, to ensure correct positioning when shown
-    computePosition(this.element, this.tooltipTarget, {
+    computePosition(this.element, this.tooltip, {
       placement: this.placementValue,
       middleware: [
         offset({
@@ -127,10 +178,12 @@ export default class extends Controller {
         shift({ padding: 5 }),
       ],
     }).then(({ x, y }) => {
-      Object.assign(this.tooltipTarget.style, {
-        left: `${x}px`,
-        top: `${y}px`,
-      })
+      if (this.tooltip) {
+        Object.assign(this.tooltip.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        })
+      }
     })
   }
 }

data/app/models/spree/admin/form_builder.rb

@@ -24,13 +24,18 @@ module Spree
       #   - :required [Boolean] whether field is required
       #   - :help [String] help text to display below the field
       #   - :help_bubble [String] help bubble text
+      #   - :prepend [String] text to prepend before the input field
+      #   - :append [String] text to append after the input field
       # @return [String] HTML string containing the complete form group
       def spree_text_field(method, options = {})
         options[:class] ||= 'form-control'
+        prepend = options.delete(:prepend)
+        append = options.delete(:append)
+
         @template.content_tag(:div, class: 'form-group') do
           @template.label(@object_name, method, get_label(method, options)) +
-            @template.text_field(@object_name, method, objectify_options(options)) +
-            @template.error_message_on(@object_name, method) + field_help(method, options.merge(class: 'form-text mt-2'))
+            wrap_with_input_group(@template.text_field(@object_name, method, objectify_options(options)), prepend, append) +
+            @template.error_message_on(@object_name, method) + spree_field_help(method, options.merge(class: 'form-text mt-2'))
         end
       end
 
@@ -41,10 +46,13 @@ module Spree
       # @return [String] HTML string containing the complete form group
       def spree_number_field(method, options = {})
         options[:class] ||= 'form-control'
+        prepend = options.delete(:prepend)
+        append = options.delete(:append)
+
         @template.content_tag(:div, class: 'form-group') do
           @template.label(@object_name, method, get_label(method, options)) +
-            @template.number_field(@object_name, method, objectify_options(options)) +
-            @template.error_message_on(@object_name, method) + field_help(method, options.merge(class: 'form-text mt-2'))
+            wrap_with_input_group(@template.number_field(@object_name, method, objectify_options(options)), prepend, append) +
+            @template.error_message_on(@object_name, method) + spree_field_help(method, options.merge(class: 'form-text mt-2'))
         end
       end
 
@@ -58,7 +66,7 @@ module Spree
         @template.content_tag(:div, class: 'form-group') do
           @template.label(@object_name, method, get_label(method, options)) +
             @template.email_field(@object_name, method, objectify_options(options)) +
-            @template.error_message_on(@object_name, method) + field_help(method, options.merge(class: 'form-text mt-2'))
+            @template.error_message_on(@object_name, method) + spree_field_help(method, options.merge(class: 'form-text mt-2'))
         end
       end
 
@@ -72,7 +80,7 @@ module Spree
         @template.content_tag(:div, class: 'form-group') do
           @template.label(@object_name, method, get_label(method, options)) +
             @template.date_field(@object_name, method, objectify_options(options)) +
-            @template.error_message_on(@object_name, method) + field_help(method, options.merge(class: 'form-text mt-2'))
+            @template.error_message_on(@object_name, method) + spree_field_help(method, options.merge(class: 'form-text mt-2'))
         end
       end
 
@@ -86,7 +94,7 @@ module Spree
         @template.content_tag(:div, class: 'form-group') do
           @template.label(@object_name, method, get_label(method, options)) +
             @template.datetime_field(@object_name, method, objectify_options(options)) +
-            @template.error_message_on(@object_name, method) + field_help(method, options.merge(class: 'form-text mt-2'))
+            @template.error_message_on(@object_name, method) + spree_field_help(method, options.merge(class: 'form-text mt-2'))
         end
       end
 
@@ -107,7 +115,7 @@ module Spree
 
           @template.label(@object_name, method, get_label(method, options)) +
             @template.text_area(@object_name, method, objectify_options(options)) +
-            @template.error_message_on(@object_name, method) + field_help(method, options.merge(class: 'form-text mt-2'))
+            @template.error_message_on(@object_name, method) + spree_field_help(method, options.merge(class: 'form-text mt-2'))
         end
       end
 
@@ -122,7 +130,7 @@ module Spree
             @template.content_tag(:div, class: 'trix-container') do
               @template.rich_text_area(@object_name, method, objectify_options(options))
             end +
-            @template.error_message_on(@object_name, method) + field_help(method, options.merge(class: 'form-text mt-2'))
+            @template.error_message_on(@object_name, method) + spree_field_help(method, options.merge(class: 'form-text mt-2'))
         end
       end
 
@@ -147,7 +155,7 @@ module Spree
         @template.content_tag(:div, class: 'form-group') do
           @template.label(@object_name, method, get_label(method, options)) +
             @template.select(@object_name, method, choices, objectify_options(options), html_options, &block) +
-            @template.error_message_on(@object_name, method) + field_help(method, options.merge(class: 'form-text mt-2'))
+            @template.error_message_on(@object_name, method) + spree_field_help(method, options.merge(class: 'form-text mt-2'))
         end
       end
 
@@ -173,7 +181,7 @@ module Spree
         @template.content_tag(:div, class: 'form-group') do
           @template.label(@object_name, method, get_label(method, options)) +
             @template.collection_select(@object_name, method, collection, value_method, text_method, objectify_options(options), html_options) +
-            @template.error_message_on(@object_name, method) + field_help(method, options.merge(class: 'form-text mt-2'))
+            @template.error_message_on(@object_name, method) + spree_field_help(method, options.merge(class: 'form-text mt-2'))
         end
       end
 
@@ -187,7 +195,7 @@ module Spree
           @template.content_tag(:div, class: 'custom-control custom-checkbox') do
             @template.check_box(@object_name, method, objectify_options(options.merge(class: 'custom-control-input'))) +
             @template.label(@object_name, method, get_label(method, options), class: 'custom-control-label')
-          end + @template.error_message_on(@object_name, method) + field_help(method, options.merge!(class: 'form-text mt-2 ml-4'))
+          end + @template.error_message_on(@object_name, method) + spree_field_help(method, options.merge!(class: 'form-text mt-2 ml-4'))
         end
       end
 
@@ -204,23 +212,43 @@ module Spree
           @template.content_tag(:div, class: 'custom-control custom-radio') do
             @template.radio_button(@object_name, method, tag_value, objectify_options(options.merge(class: 'custom-control-input'))) +
               @template.label(@object_name, method, get_label(method, options), class: 'custom-control-label', for: options[:id])
-          end + @template.error_message_on(@object_name, method) + field_help(method, options.merge(class: 'form-text mt-2'))
+          end + @template.error_message_on(@object_name, method) + spree_field_help(method, options.merge(class: 'form-text mt-2'))
         end
       end
 
+      # Create a direct file upload field with Spree form styling
+      #
+      # @param method [Symbol] the field name
+      # @param options [Hash] field options
+      # @option options [Boolean] :crop whether to crop the image
+      # @option options [Boolean] :auto_submit whether to auto-submit the form when the file is uploaded
+      # @option options [Boolean] :can_delete whether to show the delete button
+      # @option options [Boolean] :inline whether to display the uploader inline
+      # @option options [Integer] :height the height of the uploader
+      # @option options [Integer] :width the width of the uploader
+      # @option options [Array] :allowed_file_types the allowed file types, defaults to image types
+      # @return [String] HTML string containing the complete form group with direct file upload field
+      def spree_file_field(method, options = {})
+        @template.content_tag(:div, class: 'form-group') do
+          @template.label(@object_name, method, get_label(method, options)) +
+          @template.render('active_storage/upload_form', form: self, field_name: method, **options) +
+          @template.error_message_on(@object_name, method) + spree_field_help(method, options.merge(class: 'form-text mt-2'))
+        end
+      end
+
+      private
+
       # Generate help text for a field
       #
       # @param _method [Symbol] the field name (unused but kept for consistency)
       # @param options [Hash] field options
       # @option options [String] :help help text to display
       # @return [String] HTML string containing the help text or empty string
-      def field_help(_method, options = {})
+      def spree_field_help(_method, options = {})
         options[:class] ||= 'form-text mt-2'
         @template.content_tag(:span, options[:help], class: options[:class])
       end
 
-      private
-
       # Generate the label for a field with required indicator and help bubble
       #
       # @param method [Symbol] the field name
@@ -246,6 +274,36 @@ module Spree
 
         @template.raw(translated_label + required_label + help_bubble)
       end
+
+      # Wrap a field with an input group if prepend or append is specified
+      #
+      # @param field_html [String] the HTML for the field
+      # @param prepend [String, nil] text to prepend before the input field
+      # @param append [String, nil] text to append after the input field
+      # @return [String] HTML string with input group wrapper or the original field
+      def wrap_with_input_group(field_html, prepend = nil, append = nil)
+        return field_html if prepend.nil? && append.nil?
+
+        @template.content_tag(:div, class: 'input-group') do
+          prepend_html = if prepend.present?
+                           @template.content_tag(:div, class: 'input-group-prepend') do
+                             @template.content_tag(:span, prepend, class: 'input-group-text')
+                           end
+                         else
+                           ''.html_safe
+                         end
+
+          append_html = if append.present?
+                          @template.content_tag(:div, class: 'input-group-append') do
+                            @template.content_tag(:span, append, class: 'input-group-text')
+                          end
+                        else
+                          ''.html_safe
+                        end
+
+          prepend_html + field_html + append_html
+        end
+      end
     end
   end
 end