maquina-components 0.4.2 → 0.4.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 55a2ec2879afb8976c7b668873da307a50d2a2798e003399dbc8c2d4d9779471
-  data.tar.gz: 2db272ca8f735467c06d2f37b133fb7da4156d9662b85cb19ec93ac9d84078f7
+  metadata.gz: 5347ee9b9b49584bdb8549ecc263f2137ce2331b805c5539cab9db84babf9f14
+  data.tar.gz: 18b6b97ab09e7f5506c0d539db940808e48c481893ce6ad933f5226fbbd1dae9
 SHA512:
-  metadata.gz: 719870f407619f1f4fe5714db8e77af06db45ae3272a58784f647c4280b8ef78d0c1e805e95b58ccdd2f439392652f1483f054c421b093621472bac8cfc34de9
-  data.tar.gz: 4bc447930b1e71135ef1012455d82a78de7be2483ba17fae25185239a459185b0ed29278ac49bc40c086ade7a8ed2bbc0bd248f4cce8505a26897c273e96246f
+  metadata.gz: bcbde28da68d8b05b3d97d47f2f373cb7313f37265d26b78ed309827011c1cf7e1d1871d68ec6b9670240b73b1464979a0af37faa4d495e15c5b7f40ecc1a3ca
+  data.tar.gz: 47eb6037d5e98fc4b913750239d2e420c28c69b128ea4c5b9b17a450a5a2b5163f36e16cf7892b514e0c02622773c67e6620e90eea3e25d1f6350525b1a234d3

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/breadcrumbs_helper.rb

@@ -44,8 +44,8 @@ module MaquinaComponents
     #     "Button"
     #   )
     #
-    def responsive_breadcrumbs(links = {}, current_page = nil, css_classes: "")
-      render "components/breadcrumbs", css_classes: css_classes, responsive: true do
+    def responsive_breadcrumbs(links = {}, current_page = nil, css_classes: "", collapse_after: 0)
+      render "components/breadcrumbs", css_classes: css_classes, responsive: true, collapse_after: collapse_after do
         render "components/breadcrumbs/list" do
           build_breadcrumb_items(links, current_page, responsive: true)
         end

data/app/javascript/controllers/breadcrumb_controller.js

@@ -2,8 +2,16 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["item", "ellipsis", "ellipsisSeparator"]
+  static values = { collapseAfter: { type: Number, default: 0 } }
 
   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 +19,205 @@ 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
-    })
+    // Count-based collapsing: force-collapse when total items exceed threshold
+    // items are middle targets only; total visible = middle targets + first + last (2)
+    const totalItems = items.length + 2
+    if (this.collapseAfterValue > 0 && totalItems > this.collapseAfterValue) {
+      ellipsis.classList.remove('hidden')
+      if (ellipsisSeparator) ellipsisSeparator.classList.remove('hidden')
+
+      // collapseAfterValue includes first + last, so middle budget = collapseAfterValue - 2
+      const maxMiddleVisible = Math.max(this.collapseAfterValue - 2, 0)
+      let visibleMiddle = items.length
 
-    if (totalWidth > containerWidth) {
-      // We need to collapse items - show ellipsis
-      if (ellipsis) ellipsis.classList.remove('hidden')
+      for (let i = items.length - 1; i >= 0 && visibleMiddle > maxMiddleVisible; i--) {
+        items[i].classList.add('hidden')
+        const sep = this._adjacentSeparator(items[i])
+        if (sep) sep.classList.add('hidden')
+        visibleMiddle--
+      }
+    }
+
+    // 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
+      const visibleItems = items.filter(item => !item.classList.contains('hidden'))
+      for (let i = visibleItems.length - 1; i >= 0; i--) {
+        visibleItems[i].classList.add('hidden')
+        const sep = this._adjacentSeparator(visibleItems[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
+  }
 
-          items.forEach(item => {
-            if (!item.classList.contains('hidden')) {
-              totalWidth += item.offsetWidth
-            }
-          })
+  // Collect hidden items and update dropdown content
+  _updateDropdown() {
+    const hiddenItems = this.itemTargets.filter(item => item.classList.contains('hidden'))
 
-          if (totalWidth <= containerWidth) {
-            break
-          }
-        }
+    if (hiddenItems.length === 0) {
+      this._removeDropdown()
+      return
+    }
+
+    // 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/_breadcrumbs.html.erb

@@ -1,10 +1,13 @@
-<%# locals: (css_classes: "", responsive: false, **html_options) %>
+<%# locals: (css_classes: "", responsive: false, collapse_after: 0, **html_options) %>
 <% merged_data = (html_options.delete(:data) || {}).merge(
     component: :breadcrumbs
   )
-  
+
   if responsive
     merged_data[:controller] = "breadcrumb"
+    if collapse_after > 0
+      merged_data[:breadcrumb_collapse_after_value] = collapse_after
+    end
   end %>
 
 <nav

data/lib/maquina_components/version.rb

@@ -1,3 +1,3 @@
 module MaquinaComponents
-  VERSION = "0.4.2"
+  VERSION = "0.4.4"
 end

metadata

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