maquina-components 0.4.3 → 0.4.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b709941be68c552761043a38b7359796b7bc644af13827fbd47b2f40eab90fb9
-  data.tar.gz: 931d38949a68e47881e9dc417786a412e5fb16ed02a23539d44259f452249913
+  metadata.gz: 5347ee9b9b49584bdb8549ecc263f2137ce2331b805c5539cab9db84babf9f14
+  data.tar.gz: 18b6b97ab09e7f5506c0d539db940808e48c481893ce6ad933f5226fbbd1dae9
 SHA512:
-  metadata.gz: 3b063e95e3ea3c7d4fd649b75cd00696ac33ac88025c3ebab14bea256f7456005a81b8e0c7f3b70f8904f73cc987c4d5cc22a707cbef48f3d10dafa21a7d9ec1
-  data.tar.gz: 80b31cd01a92351baedec4a87509b494c6dbfe09cb42bb71c7a59444cca0cc48e4b020684d9c450c1b02568a352f0b2781654c5333a84a0c5af7ea38940f91a6
+  metadata.gz: bcbde28da68d8b05b3d97d47f2f373cb7313f37265d26b78ed309827011c1cf7e1d1871d68ec6b9670240b73b1464979a0af37faa4d495e15c5b7f40ecc1a3ca
+  data.tar.gz: 47eb6037d5e98fc4b913750239d2e420c28c69b128ea4c5b9b17a450a5a2b5163f36e16cf7892b514e0c02622773c67e6620e90eea3e25d1f6350525b1a234d3

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,6 +2,7 @@ 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
@@ -59,15 +60,35 @@ export default class extends Controller {
       if (sep) sep.classList.remove('hidden')
     })
 
+    // 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
+
+      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')
 
       // 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])
+      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
       }

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.3"
+  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.3
+  version: 0.4.4
 platform: ruby
 authors:
 - Mario Alberto Chávez