maquina-components 0.4.2 → 0.4.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 55a2ec2879afb8976c7b668873da307a50d2a2798e003399dbc8c2d4d9779471
-  data.tar.gz: 2db272ca8f735467c06d2f37b133fb7da4156d9662b85cb19ec93ac9d84078f7
+  metadata.gz: b709941be68c552761043a38b7359796b7bc644af13827fbd47b2f40eab90fb9
+  data.tar.gz: 931d38949a68e47881e9dc417786a412e5fb16ed02a23539d44259f452249913
 SHA512:
-  metadata.gz: 719870f407619f1f4fe5714db8e77af06db45ae3272a58784f647c4280b8ef78d0c1e805e95b58ccdd2f439392652f1483f054c421b093621472bac8cfc34de9
-  data.tar.gz: 4bc447930b1e71135ef1012455d82a78de7be2483ba17fae25185239a459185b0ed29278ac49bc40c086ade7a8ed2bbc0bd248f4cce8505a26897c273e96246f
+  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/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/lib/maquina_components/version.rb

@@ -1,3 +1,3 @@
 module MaquinaComponents
-  VERSION = "0.4.2"
+  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.2
+  version: 0.4.3
 platform: ruby
 authors:
 - Mario Alberto Chávez