maquina-components 0.4.1 → 0.4.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 28216906695fc33245706bd71b7496d3d7508fb3317ac7c0ba6524a3fd899ec2
-  data.tar.gz: a2f18961cdbe2a57604d14af2ef810655d89f9a3f0473af1880a4cbad65bcaf5
+  metadata.gz: b709941be68c552761043a38b7359796b7bc644af13827fbd47b2f40eab90fb9
+  data.tar.gz: 931d38949a68e47881e9dc417786a412e5fb16ed02a23539d44259f452249913
 SHA512:
-  metadata.gz: 0deefadda8d4c8c049f20ade8f1112325fb2ca58fdadc41006efb1343812158e943d01399e2fe2fa23f418610865e7c08894c70344ce8cfc433e6d07bf05c83f
-  data.tar.gz: fada4a588f3cfa1629eebc28a11f3e8400be69d1c00bbda71cec643b94ab7f4687b5131499051d2f6a33ccf41cd008664f15899456ceedc2b025871baf69f04c
+  metadata.gz: 3b063e95e3ea3c7d4fd649b75cd00696ac33ac88025c3ebab14bea256f7456005a81b8e0c7f3b70f8904f73cc987c4d5cc22a707cbef48f3d10dafa21a7d9ec1
+  data.tar.gz: 80b31cd01a92351baedec4a87509b494c6dbfe09cb42bb71c7a59444cca0cc48e4b020684d9c450c1b02568a352f0b2781654c5333a84a0c5af7ea38940f91a6

data/app/assets/stylesheets/breadcrumbs.css

@@ -107,6 +107,29 @@
 }
 
 /* ===== Responsive Behavior ===== */
+/* Force nowrap when responsive controller is active so scrollWidth detects overflow */
+[data-controller="breadcrumb"] [data-breadcrumb-part="list"] {
+  @apply flex-nowrap overflow-hidden;
+}
+
+/* Items must not shrink or wrap text, otherwise flex compresses them and scrollWidth never exceeds clientWidth */
+[data-controller="breadcrumb"] [data-breadcrumb-part="item"],
+[data-controller="breadcrumb"] [data-breadcrumb-part="separator"] {
+  @apply shrink-0 whitespace-nowrap;
+}
+
+/* Allow the last item (current page) to truncate gracefully instead of hard-clipping */
+[data-controller="breadcrumb"] [data-breadcrumb-part="item"]:last-child {
+  @apply shrink min-w-0 overflow-hidden;
+  text-overflow: ellipsis;
+}
+
+[data-controller="breadcrumb"] [data-breadcrumb-part="item"]:last-child [data-breadcrumb-part="page"],
+[data-controller="breadcrumb"] [data-breadcrumb-part="item"]:last-child [data-breadcrumb-part="link"] {
+  @apply overflow-hidden;
+  text-overflow: ellipsis;
+}
+
 /* Items hidden by Stimulus controller */
 [data-controller="breadcrumb"] [data-breadcrumb-target="item"].hidden,
 [data-controller="breadcrumb"] [data-breadcrumb-target="ellipsisSeparator"].hidden {

data/app/helpers/maquina_components/icons_helper.rb

@@ -3,11 +3,31 @@ module MaquinaComponents
     def icon_for(name, options = {})
       return nil unless name
 
-      svg = icon_svg_for(name.to_sym) || main_icon_svg_for(name.to_sym)
+      svg = main_icon_svg_for(name.to_sym) || icon_svg_for(name.to_sym)
       return nil unless svg
 
+      apply_icon_options(svg, options)
+    end
+
+    # Internal icon helper for engine components. Always uses built-in SVGs
+    # so components work reliably regardless of the app's icon configuration.
+    def builtin_icon_for(name, options = {})
+      return nil unless name
+
+      svg = icon_svg_for(name.to_sym)
+      return nil unless svg
+
+      apply_icon_options(svg, options)
+    end
+
+    def main_icon_svg_for(name)
+    end
+
+    private
+
+    def apply_icon_options(svg, options)
       css_classes = options[:class]
-      svg = svg.gsub('class="', "class=\"#{css_classes} ")
+      svg = svg.gsub('class="', "class=\"#{css_classes} ") if css_classes
 
       if options[:stroke_width]
         svg = svg.gsub('stroke-width="2"', "stroke-width=\"#{options[:stroke_width]}\"")
@@ -16,9 +36,6 @@ module MaquinaComponents
       svg.html_safe
     end
 
-    def main_icon_svg_for(name)
-    end
-
     def icon_svg_for(name)
       case name
       when :dollar

data/app/javascript/controllers/breadcrumb_controller.js

@@ -4,6 +4,13 @@ export default class extends Controller {
   static targets = ["item", "ellipsis", "ellipsisSeparator"]
 
   connect() {
+    this._dropdown = null
+    this._clickOutsideHandler = this._closeDropdown.bind(this)
+    this._escapeHandler = this._handleEscape.bind(this)
+    this._teardownHandler = this._teardown.bind(this)
+
+    document.addEventListener("turbo:before-cache", this._teardownHandler)
+
     this.windowResizeHandler = this.handleResize.bind(this)
     window.addEventListener('resize', this.windowResizeHandler)
     this.handleResize()
@@ -11,61 +18,185 @@ export default class extends Controller {
 
   disconnect() {
     window.removeEventListener('resize', this.windowResizeHandler)
+    this._teardown()
+    document.removeEventListener("turbo:before-cache", this._teardownHandler)
+  }
+
+  ellipsisTargetConnected(element) {
+    const trigger = element.querySelector('[data-breadcrumb-part="ellipsis"]')
+    if (trigger) {
+      this._ellipsisTrigger = trigger
+      this._toggleHandler = this._toggleDropdown.bind(this)
+      trigger.addEventListener('click', this._toggleHandler)
+      trigger.style.cursor = 'pointer'
+    }
+  }
+
+  ellipsisTargetDisconnected(_element) {
+    if (this._ellipsisTrigger && this._toggleHandler) {
+      this._ellipsisTrigger.removeEventListener('click', this._toggleHandler)
+      this._ellipsisTrigger = null
+      this._toggleHandler = null
+    }
   }
 
   handleResize() {
-    // Get visible width of container
-    const containerWidth = this.element.clientWidth
+    const list = this.element.querySelector('[data-breadcrumb-part="list"]')
+    if (!list) return
+
     const items = this.itemTargets
     const ellipsis = this.hasEllipsisTarget ? this.ellipsisTarget : null
     const ellipsisSeparator = this.hasEllipsisSeparatorTarget ? this.ellipsisSeparatorTarget : null
 
-    // Always show first and last items
-    if (items.length < 3 || !ellipsis) {
-      return; // Not enough items to collapse or no ellipsis element
-    }
+    if (items.length < 1 || !ellipsis) return
 
-    // Reset visibility
-    if (ellipsis) ellipsis.classList.add('hidden')
+    // Reset all items and their adjacent separators to visible
+    ellipsis.classList.add('hidden')
     if (ellipsisSeparator) ellipsisSeparator.classList.add('hidden')
-
     items.forEach(item => {
       item.classList.remove('hidden')
+      const sep = this._adjacentSeparator(item)
+      if (sep) sep.classList.remove('hidden')
     })
 
-    // Check if we need to collapse items
-    let totalWidth = 0
-    items.forEach(item => {
-      totalWidth += item.offsetWidth
-    })
-
-    if (totalWidth > containerWidth) {
-      // We need to collapse items - show ellipsis
-      if (ellipsis) ellipsis.classList.remove('hidden')
+    // Check overflow using scrollWidth vs clientWidth
+    if (list.scrollWidth > list.clientWidth) {
+      ellipsis.classList.remove('hidden')
       if (ellipsisSeparator) ellipsisSeparator.classList.remove('hidden')
 
-      // Start hiding middle items until we fit
-      for (let i = items.length - 2; i > 0; i--) {
-        if (i !== 0 && i !== items.length - 1) {
-          items[i].classList.add('hidden')
+      // Hide middle items one at a time until it fits
+      for (let i = items.length - 1; i >= 0; i--) {
+        items[i].classList.add('hidden')
+        const sep = this._adjacentSeparator(items[i])
+        if (sep) sep.classList.add('hidden')
+        if (list.scrollWidth <= list.clientWidth) break
+      }
+    }
 
-          // Recalculate total width
-          totalWidth = 0
+    this._updateDropdown()
+  }
 
-          if (ellipsis) totalWidth += ellipsis.offsetWidth
-          if (ellipsisSeparator) totalWidth += ellipsisSeparator.offsetWidth
+  // Find the next sibling separator <li> (not the managed ellipsisSeparator)
+  _adjacentSeparator(item) {
+    const next = item.nextElementSibling
+    if (next && next.dataset.breadcrumbPart === "separator" && !next.dataset.breadcrumbTarget) {
+      return next
+    }
+    return null
+  }
+
+  // Collect hidden items and update dropdown content
+  _updateDropdown() {
+    const hiddenItems = this.itemTargets.filter(item => item.classList.contains('hidden'))
 
-          items.forEach(item => {
-            if (!item.classList.contains('hidden')) {
-              totalWidth += item.offsetWidth
-            }
-          })
+    if (hiddenItems.length === 0) {
+      this._removeDropdown()
+      return
+    }
 
-          if (totalWidth <= containerWidth) {
-            break
-          }
-        }
+    // Build list of links from hidden items
+    this._hiddenLinks = hiddenItems.map(item => {
+      const link = item.querySelector('[data-breadcrumb-part="link"]')
+      if (link) {
+        return { href: link.getAttribute('href'), text: link.textContent.trim() }
       }
+      return null
+    }).filter(Boolean)
+
+    // If dropdown is currently open, rebuild its content
+    if (this._dropdown && this._dropdown.dataset.state === "open") {
+      this._buildDropdownContent()
     }
   }
+
+  _toggleDropdown(event) {
+    event.stopPropagation()
+
+    if (this._dropdown && this._dropdown.dataset.state === "open") {
+      this._closeDropdown()
+    } else {
+      this._openDropdown()
+    }
+  }
+
+  _openDropdown() {
+    if (!this._hiddenLinks || this._hiddenLinks.length === 0) return
+
+    if (!this._dropdown) {
+      this._dropdown = document.createElement('div')
+      this._dropdown.setAttribute('role', 'menu')
+      this._dropdown.dataset.dropdownMenuPart = 'content'
+      this._dropdown.style.position = 'fixed'
+      this._dropdown.style.zIndex = '50'
+      document.body.appendChild(this._dropdown)
+    }
+
+    this._buildDropdownContent()
+    this._positionDropdown()
+    this._dropdown.dataset.state = 'open'
+
+    if (this._ellipsisTrigger) {
+      this._ellipsisTrigger.dataset.state = 'open'
+    }
+
+    // Defer listeners so the current click doesn't immediately close
+    requestAnimationFrame(() => {
+      document.addEventListener('click', this._clickOutsideHandler)
+      document.addEventListener('keydown', this._escapeHandler)
+    })
+  }
+
+  _closeDropdown() {
+    if (this._dropdown) {
+      this._dropdown.dataset.state = 'closed'
+    }
+    if (this._ellipsisTrigger) {
+      delete this._ellipsisTrigger.dataset.state
+    }
+
+    document.removeEventListener('click', this._clickOutsideHandler)
+    document.removeEventListener('keydown', this._escapeHandler)
+  }
+
+  _removeDropdown() {
+    this._closeDropdown()
+    if (this._dropdown) {
+      this._dropdown.remove()
+      this._dropdown = null
+    }
+  }
+
+  _buildDropdownContent() {
+    if (!this._dropdown || !this._hiddenLinks) return
+
+    this._dropdown.innerHTML = ''
+    this._hiddenLinks.forEach(({ href, text }) => {
+      const link = document.createElement('a')
+      link.setAttribute('href', href)
+      link.setAttribute('role', 'menuitem')
+      link.dataset.dropdownMenuPart = 'item'
+      link.setAttribute('tabindex', '-1')
+      link.textContent = text
+      this._dropdown.appendChild(link)
+    })
+  }
+
+  _positionDropdown() {
+    if (!this._dropdown || !this._ellipsisTrigger) return
+
+    const rect = this._ellipsisTrigger.getBoundingClientRect()
+    this._dropdown.style.top = `${rect.bottom + 4}px`
+    this._dropdown.style.left = `${rect.left}px`
+  }
+
+  _handleEscape(event) {
+    if (event.key === 'Escape') {
+      this._closeDropdown()
+    }
+  }
+
+  _teardown() {
+    this._removeDropdown()
+    this._hiddenLinks = null
+  }
 }

data/app/views/components/_date_picker.html.erb

@@ -68,7 +68,7 @@
           <%= "disabled" if disabled %>
           aria-haspopup="dialog"
           aria-expanded="false">
-    <%= icon_for :calendar, class: "size-4" %>
+    <%= builtin_icon_for :calendar, class: "size-4" %>
     <span data-date-picker-target="display">
       <%= display_value || placeholder || default_placeholder %>
     </span>

data/app/views/components/_menu_button.html.erb

@@ -36,7 +36,7 @@
           <span class="truncate text-xs"><%= subtitle %></span>
         <% end %>
       </div>
-      <%= icon_for(:chevron_up_down, class: "ml-auto") if submenu %>
+      <%= builtin_icon_for(:chevron_up_down, class: "ml-auto") if submenu %>
     </button>
 
     <%= yield %>

data/app/views/components/_toast.html.erb

@@ -26,7 +26,7 @@
       **html_options do %>
   <% if toast_icon %>
     <div data-toast-part="icon">
-      <%= icon_for toast_icon, class: "size-5" %>
+      <%= builtin_icon_for toast_icon, class: "size-5" %>
     </div>
   <% end %>
 
@@ -47,7 +47,7 @@
             data-toast-part="close"
             data-action="toast#dismiss"
             aria-label="Dismiss notification">
-      <%= icon_for :x, class: "size-4" %>
+      <%= builtin_icon_for :x, class: "size-4" %>
     </button>
   <% end %>
 <% end %>

data/app/views/components/breadcrumbs/_ellipsis.html.erb

@@ -4,6 +4,6 @@
   ) %>
 
 <%= content_tag :span, role: "presentation", class: css_classes, data: merged_data, **html_options do %>
-  <%= icon_for(:ellipsis) %>
+  <%= builtin_icon_for(:ellipsis) %>
   <span class="sr-only">More</span>
 <% end %>

data/app/views/components/calendar/_header.html.erb

@@ -6,7 +6,7 @@
           data-action="click->calendar#previousMonth"
           data-calendar-target="prevButton"
           aria-label="Previous month">
-    <%= icon_for :chevron_left, class: "size-4" %>
+    <%= builtin_icon_for :chevron_left, class: "size-4" %>
   </button>
 
   <div data-calendar-part="caption">
@@ -17,6 +17,6 @@
           data-action="click->calendar#nextMonth"
           data-calendar-target="nextButton"
           aria-label="Next month">
-    <%= icon_for :chevron_right, class: "size-4" %>
+    <%= builtin_icon_for :chevron_right, class: "size-4" %>
   </button>
 <% end %>

data/app/views/components/combobox/_input.html.erb

@@ -6,7 +6,7 @@
   ) %>
 
 <div data-combobox-part="input-wrapper">
-  <%= icon_for :search, class: "size-4 shrink-0 opacity-50" %>
+  <%= builtin_icon_for :search, class: "size-4 shrink-0 opacity-50" %>
   <%= tag.input type: "text",
                 placeholder: placeholder,
                 autocomplete: "off",

data/app/views/components/combobox/_option.html.erb

@@ -18,7 +18,7 @@
       data: merged_data,
       **html_options do %>
   <span data-combobox-part="check" class="<%= 'invisible' unless selected %>">
-    <%= icon_for :check, class: "size-4" %>
+    <%= builtin_icon_for :check, class: "size-4" %>
   </span>
   <%= yield %>
 <% end %>

data/app/views/components/combobox/_trigger.html.erb

@@ -18,5 +18,5 @@
       data: merged_data,
       **html_options do %>
   <span data-combobox-target="label"><%= placeholder %></span>
-  <%= icon_for :chevrons_up_down, class: "size-4 shrink-0 opacity-50" %>
+  <%= builtin_icon_for :chevrons_up_down, class: "size-4 shrink-0 opacity-50" %>
 <% end %>

data/app/views/components/dropdown_menu/_trigger.html.erb

@@ -19,6 +19,6 @@
         aria: { haspopup: "menu", expanded: "false" },
         **html_options do %>
     <%= yield %>
-    <%= icon_for :chevron_down, data: { "dropdown-menu-target": "chevron" } %>
+    <%= builtin_icon_for :chevron_down, data: { "dropdown-menu-target": "chevron" } %>
   <% end %>
 <% end %>

data/lib/maquina_components/version.rb

@@ -1,3 +1,3 @@
 module MaquinaComponents
-  VERSION = "0.4.1"
+  VERSION = "0.4.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: maquina-components
 version: !ruby/object:Gem::Version
-  version: 0.4.1
+  version: 0.4.3
 platform: ruby
 authors:
 - Mario Alberto Chávez