pagy 7.0.11 → 8.0.0

data/lib/pagy/extras/bootstrap.rb

@@ -1,106 +1,95 @@
 # See the Pagy documentation: https://ddnexus.github.io/pagy/docs/extras/bootstrap
 # frozen_string_literal: true
 
-require 'pagy/extras/frontend_helpers'
+require 'pagy/extras/js_tools'
 
 class Pagy # :nodoc:
   # Frontend modules are specially optimized for performance.
   # The resulting code may not look very elegant, but produces the best benchmarks
   module BootstrapExtra
     # Pagination for bootstrap: it returns the html with the series of links to the pages
-    def pagy_bootstrap_nav(pagy, pagy_id: nil, link_extra: '',
-                           nav_aria_label: nil, nav_i18n_key: nil, **vars)
-      p_id = %( id="#{pagy_id}") if pagy_id
-      link = pagy_link_proc(pagy, link_extra: %(class="page-link" #{link_extra}))
+    def pagy_bootstrap_nav(pagy, id: nil, classes: 'pagination', aria_label: nil, **vars)
+      id = %( id="#{id}") if id
+      a  = pagy_anchor(pagy)
 
-      html = +%(<nav#{p_id} class="pagy-bootstrap-nav" #{
-                  nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)}><ul class="pagination">)
-      html << bootstrap_prev_html(pagy, link)
+      html = %(<nav#{id} class="pagy-bootstrap nav" #{nav_aria_label(pagy, aria_label:)}><ul class="#{classes}">#{
+                 bootstrap_prev_html(pagy, a)})
       pagy.series(**vars).each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
         html << case item
                 when Integer
-                  %(<li class="page-item">#{link.call(item)}</li>)
+                  %(<li class="page-item">#{a.(item, classes: 'page-link')}</li>)
                 when String
                   %(<li class="page-item active"><a role="link" class="page-link" aria-current="page" aria-disabled="true">#{
                       pagy.label_for(item)}</a></li>)
                 when :gap
                   %(<li class="page-item gap disabled"><a role="link" class="page-link" aria-disabled="true">#{
-                      pagy_t 'pagy.gap'}</a></li>)
+                      pagy_t('pagy.gap')}</a></li>)
                 else raise InternalError, "expected item types in series to be Integer, String or :gap; got #{item.inspect}"
                 end
       end
-      html << bootstrap_next_html(pagy, link)
-      html << %(</ul></nav>)
+      html << %(#{bootstrap_next_html(pagy, a)}</ul></nav>)
     end
 
-    # Javascript pagination for bootstrap: it returns a nav and a JSON tag used by the pagy.js file
-    def pagy_bootstrap_nav_js(pagy, pagy_id: nil, link_extra: '',
-                              nav_aria_label: nil, nav_i18n_key: nil, **vars)
+    # Javascript pagination for bootstrap: it returns a nav with a data-pagy attribute used by the pagy.js file
+    def pagy_bootstrap_nav_js(pagy, id: nil, classes: 'pagination', aria_label: nil, **vars)
       sequels = pagy.sequels(**vars)
-      p_id = %( id="#{pagy_id}") if pagy_id
-      link = pagy_link_proc(pagy, link_extra: %(class="page-link" #{link_extra}))
-      tags = { 'before' => %(<ul class="pagination">#{bootstrap_prev_html pagy, link}),
-               'link'   => %(<li class="page-item">#{link.call(PAGE_TOKEN, LABEL_TOKEN)}</li>),
-               'active' => %(<li class="page-item active"><a role="link" class="page-link" ) +
-                           %(aria-current="page" aria-disabled="true">#{LABEL_TOKEN}</a></li>),
-               'gap'    => %(<li class="page-item gap disabled"><a role="link" class="page-link" aria-disabled="true">#{
-                               pagy_t 'pagy.gap'}</a></li>),
-               'after'  => %(#{bootstrap_next_html pagy, link}</ul>) }
+      id      = %( id="#{id}") if id
+      a       = pagy_anchor(pagy)
+      tokens  = { 'before'  => %(<ul class="#{classes}">#{bootstrap_prev_html(pagy, a)}),
+                  'a'       => %(<li class="page-item">#{a.(PAGE_TOKEN, LABEL_TOKEN, classes: 'page-link')}</li>),
+                  'current' => %(<li class="page-item active"><a role="link" class="page-link" ) +
+                               %(aria-current="page" aria-disabled="true">#{LABEL_TOKEN}</a></li>),
+                  'gap'     => %(<li class="page-item gap disabled"><a role="link" class="page-link" aria-disabled="true">#{
+                                   pagy_t('pagy.gap')}</a></li>),
+                  'after'   => %(#{bootstrap_next_html pagy, a}</ul>) }
 
-      %(<nav#{p_id} class="#{'pagy-rjs ' if sequels.size > 1}pagy-bootstrap-nav-js" #{
-          nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)} #{
-          pagy_data(pagy, :nav, tags, sequels, pagy.label_sequels(sequels))
+      %(<nav#{id} class="#{'pagy-rjs ' if sequels.size > 1}pagy-bootstrap nav-js" #{
+          nav_aria_label(pagy, aria_label:)} #{
+          pagy_data(pagy, :nav, tokens, sequels, pagy.label_sequels(sequels))
         }></nav>)
     end
 
-    # Javascript combo pagination for bootstrap: it returns a nav and a JSON tag used by the pagy.js file
-    def pagy_bootstrap_combo_nav_js(pagy, pagy_id: nil, link_extra: '',
-                                    nav_aria_label: nil, nav_i18n_key: nil)
-      p_id    = %( id="#{pagy_id}") if pagy_id
-      link    = pagy_link_proc(pagy, link_extra:)
-      p_page  = pagy.page
-      p_pages = pagy.pages
-      input   = %(<input name="page" type="number" min="1" max="#{p_pages}" value="#{
-                    p_page}" style="padding: 0; border: none; text-align: center; width: #{
-                    p_pages.to_s.length + 1}rem;" aria-current="page">)
+    # Javascript combo pagination for bootstrap: it returns a nav with a data-pagy attribute used by the pagy.js file
+    def pagy_bootstrap_combo_nav_js(pagy, id: nil, classes: 'pagination', aria_label: nil)
+      id    = %( id="#{id}") if id
+      a     = pagy_anchor(pagy)
+      pages = pagy.pages
 
-      %(<nav#{p_id} class="pagy-bootstrap-combo-nav-js pagination" #{
-          nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)} #{
-          pagy_data(pagy, :combo, pagy_url_for(pagy, PAGE_TOKEN)) }><div class="btn-group" role="group">#{
-          if (p_prev = pagy.prev)
-            link.call(p_prev, pagy_t('pagy.prev'), %(class="prev btn btn-primary" #{prev_aria_label_attr}))
-          else
-            %(<a role="link" class="prev btn btn-primary disabled" aria-disabled="true" #{
-                prev_aria_label_attr}>#{pagy_t('pagy.prev')}</a>)
-          end
-        }<div class="pagy-combo-input btn btn-secondary" style="white-space: nowrap;">#{
-          pagy_t 'pagy.combo_nav_js', page_input: input, count: p_page, pages: p_pages}</div>#{
-          if (p_next = pagy.next)
-            link.call(p_next, pagy_t('pagy.next'), %(class="next btn btn-primary" #{next_aria_label_attr}))
-          else
-            %(<a role="link" class="next btn btn-primary disabled" aria-disabled="true" #{
-                next_aria_label_attr}>#{pagy_t 'pagy.next'}</a>)
-          end
-        }</div></nav>)
+      page_input = %(<input name="page" type="number" min="1" max="#{pages}" value="#{pagy.page}" aria-current="page" ) <<
+                   %(style="text-align: center; width: #{pages.to_s.length + 1}rem; padding: 0; ) <<
+                   %(border: none; display: inline-block;" class="page-link active">)
+
+      %(<nav#{id} class="pagy-bootstrap combo-nav-js" #{
+          nav_aria_label(pagy, aria_label:)} #{
+          pagy_data(pagy, :combo, pagy_url_for(pagy, PAGE_TOKEN))
+        }><ul class="#{classes}">#{
+          bootstrap_prev_html(pagy, a)
+        }<li class="page-item pagy-bootstrap"><label class="page-link">#{
+          pagy_t('pagy.combo_nav_js', page_input:, pages:)
+        }</label></li>#{
+          bootstrap_next_html(pagy, a)
+        }</ul></nav>)
     end
 
     private
 
-    def bootstrap_prev_html(pagy, link)
+    def bootstrap_prev_html(pagy, a)
       if (p_prev = pagy.prev)
-        %(<li class="page-item prev">#{link.call(p_prev, pagy_t('pagy.prev'), prev_aria_label_attr)}</li>)
+        %(<li class="page-item prev">#{
+            a.(p_prev, pagy_t('pagy.prev'), classes: 'page-link', aria_label: pagy_t('pagy.aria_label.prev'))}</li>)
       else
-        %(<li class="page-item prev disabled"><a role="link" class="page-link" aria-disabled="true" #{
-            prev_aria_label_attr}>#{pagy_t('pagy.prev')}</a></li>)
+        %(<li class="page-item prev disabled"><a role="link" class="page-link" aria-disabled="true" aria-label="#{
+            pagy_t('pagy.aria_label.prev')}">#{pagy_t('pagy.prev')}</a></li>)
       end
     end
 
-    def bootstrap_next_html(pagy, link)
+    def bootstrap_next_html(pagy, a)
       if (p_next = pagy.next)
-        %(<li class="page-item next">#{link.call p_next, pagy_t('pagy.next'), next_aria_label_attr}</li>)
+        %(<li class="page-item next">#{
+            a.(p_next, pagy_t('pagy.next'), classes: 'page-link', aria_label: pagy_t('pagy.aria_label.next'))}</li>)
       else
-        %(<li class="page-item next disabled"><a role="link" class="page-link" aria-disabled="true" #{
-            next_aria_label_attr}>#{pagy_t('pagy.next')}</a></li>)
+        %(<li class="page-item next disabled"><a role="link" class="page-link" aria-disabled="true" aria-label="#{
+            pagy_t('pagy.aria_label.next')}">#{pagy_t('pagy.next')}</a></li>)
       end
     end
   end

data/lib/pagy/extras/bulma.rb

@@ -1,28 +1,24 @@
 # See the Pagy documentation: https://ddnexus.github.io/pagy/docs/extras/bulma
 # frozen_string_literal: true
 
-require 'pagy/extras/frontend_helpers'
+require 'pagy/extras/js_tools'
 
 class Pagy # :nodoc:
-  DEFAULT[:bulma_nav_classes] = 'is-centered'
-
   # Frontend modules are specially optimized for performance.
   # The resulting code may not look very elegant, but produces the best benchmarks
   module BulmaExtra
     # Pagination for bulma: it returns the html with the series of links to the pages
-    def pagy_bulma_nav(pagy, pagy_id: nil, link_extra: '',
-                       nav_aria_label: nil, nav_i18n_key: nil, **vars)
-      p_id = %( id="#{pagy_id}") if pagy_id
-      link = pagy_link_proc(pagy, link_extra:)
+    def pagy_bulma_nav(pagy, id: nil, classes: 'pagy-bulma nav pagination is-centered', aria_label: nil, **vars)
+      id = %( id="#{id}") if id
+      a  = pagy_anchor(pagy)
 
-      html = +%(<nav#{p_id} class="pagy-bulma-nav pagination #{DEFAULT[:bulma_nav_classes]}" #{
-                  nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)}>)
-      html << bulma_prev_next_html(pagy, link)
+      html = %(<nav#{id} class="#{classes}" #{nav_aria_label(pagy, aria_label:)}>)
+      html << bulma_prev_next_html(pagy, a)
       html << %(<ul class="pagination-list">)
       pagy.series(**vars).each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
         html << case item
                 when Integer
-                  %(<li>#{link.call(item, pagy.label_for(item), %(class="pagination-link"))}</li>)
+                  %(<li>#{a.(item, pagy.label_for(item), classes: 'pagination-link')}</li>)
                 when String
                   %(<li><a role="link" class="pagination-link is-current" aria-current="page" aria-disabled="true">#{
                       pagy.label_for(item)}</a></li>)
@@ -34,70 +30,58 @@ class Pagy # :nodoc:
       html << %(</ul></nav>)
     end
 
-    # Javascript pagination for bulma: it returns a nav and a JSON tag used by the Pagy.nav javascript
-    def pagy_bulma_nav_js(pagy, pagy_id: nil, link_extra: '',
-                          nav_aria_label: nil, nav_i18n_key: nil, **vars)
+    # Javascript pagination for bulma: it returns a nav with a data-pagy attribute used by the Pagy.nav javascript
+    def pagy_bulma_nav_js(pagy, id: nil, classes: 'pagy-bulma nav-js pagination is-centered', aria_label: nil, **vars)
       sequels = pagy.sequels(**vars)
-      p_id = %( id="#{pagy_id}") if pagy_id
-      link = pagy_link_proc(pagy, link_extra:)
-      tags = { 'before' => %(#{bulma_prev_next_html(pagy, link)}<ul class="pagination-list">),
-               'link'   => %(<li>#{link.call(PAGE_TOKEN, LABEL_TOKEN, %(class="pagination-link"))}</li>),
-               'active' => %(<li><a role="link" class="pagination-link is-current" aria-current="page" aria-disabled="true">#{
-                               LABEL_TOKEN}</a></li>),
-               'gap'    => %(<li><span class="pagination-ellipsis">#{pagy_t 'pagy.gap'}</span></li>),
-               'after'  => '</ul>' }
+      id      = %( id="#{id}") if id
+      a       = pagy_anchor(pagy)
+      tokens = { 'before'  => %(#{bulma_prev_next_html(pagy, a)}<ul class="pagination-list">),
+                 'a'       => %(<li>#{a.(PAGE_TOKEN, LABEL_TOKEN, classes: 'pagination-link')}</li>),
+                 'current' => %(<li><a role="link" class="pagination-link is-current" aria-current="page" aria-disabled="true">#{
+                                  LABEL_TOKEN}</a></li>),
+                 'gap'     => %(<li><span class="pagination-ellipsis">#{pagy_t 'pagy.gap'}</span></li>),
+                 'after'   => '</ul>' }
 
-      %(<nav#{p_id} class="#{'pagy-rjs ' if sequels.size > 1}pagy-bulma-nav-js pagination #{DEFAULT[:bulma_nav_classes]}" #{
-        nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)}#{
-        pagy_data(pagy, :nav, tags, sequels, pagy.label_sequels(sequels))}></nav>)
+      %(<nav#{id} class="#{'pagy-rjs ' if sequels.size > 1}#{classes}" #{
+          nav_aria_label(pagy, aria_label:)} #{
+          pagy_data(pagy, :nav, tokens, sequels, pagy.label_sequels(sequels))
+        }></nav>)
     end
 
-    # Javascript combo pagination for bulma: it returns a nav and a JSON tag used by the pagy.js file
-    def pagy_bulma_combo_nav_js(pagy, pagy_id: nil, link_extra: '',
-                                nav_aria_label: nil, nav_i18n_key: nil)
-      p_id    = %( id="#{pagy_id}") if pagy_id
-      link    = pagy_link_proc(pagy, link_extra:)
-      p_page  = pagy.page
-      p_pages = pagy.pages
-      input   = %(<input name="page" class="input" type="number" min="1" max="#{p_pages}" value="#{
-                    p_page}" style="padding: 0; text-align: center; width: #{
-                    p_pages.to_s.length + 1}rem; margin:0 0.3rem;" aria-current="page">)
+    # Javascript combo pagination for bulma: it returns a nav with a data-pagy attribute used by the pagy.js file
+    def pagy_bulma_combo_nav_js(pagy, id: nil, classes: 'pagy-bulma combo-nav-js pagination is-centered', aria_label: nil)
+      id    = %( id="#{id}") if id
+      a     = pagy_anchor(pagy)
+      pages = pagy.pages
+
+      page_input = %(<input name="page" type="number" min="1" max="#{pages}" value="#{pagy.page}" aria-current="page") <<
+                   %(style="text-align: center; width: #{pages.to_s.length + 1}rem; height: 1.7rem; margin:0 0.3rem; ) <<
+                   %(border: none; border-radius: 4px; padding: 0; font-size: 1.1rem; color: white; background-color: #485fc7;">)
 
-      html = %(<nav#{p_id} class="pagy-bulma-combo-nav-js #{DEFAULT[:bulma_nav_classes]}" #{
-                 nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)} #{
-                 pagy_data(pagy, :combo, pagy_url_for(pagy, PAGE_TOKEN))}>)
-      %(#{html}<div class="field is-grouped is-grouped-centered" role="group">#{
-          if (p_prev  = pagy.prev)
-            %(<p class="control">#{link.call(p_prev, pagy_t('pagy.prev'), %(class="button" #{prev_aria_label_attr}))}</p>)
-          else
-            %(<p class="control"><a role="link" class="button" disabled aria-disabled="true" #{
-                prev_aria_label_attr}>#{pagy_t 'pagy.prev'}</a></p>)
-          end
-        }<div class="pagy-combo-input control level is-mobile">#{
-          pagy_t 'pagy.combo_nav_js', page_input: input, count: p_page, pages: p_pages}</div>#{
-          if (p_next  = pagy.next)
-            %(<p class="control">#{link.call(p_next, pagy_t('pagy.next'), %(class="button" #{next_aria_label_attr}))}</p>)
-          else
-            %(<p class="control"><a role="link" class="button" disabled aria-disabled="true"#{
-                next_aria_label_attr}>#{pagy_t 'pagy.next'}</a></p>)
-          end
-        }</div></nav>)
+      %(<nav#{id} class="#{classes}" #{
+          nav_aria_label(pagy, aria_label:)} #{
+          pagy_data(pagy, :combo, pagy_url_for(pagy, PAGE_TOKEN))
+        }>#{
+          bulma_prev_next_html(pagy, a)
+        }<ul class="pagination-list"><li class="pagination-link"><label>#{
+           pagy_t('pagy.combo_nav_js', page_input:, pages:)
+        }</label></li></ul></nav>)
     end
 
     private
 
-    def bulma_prev_next_html(pagy, link)
-      html = +if (p_prev = pagy.prev)
-                link.call(p_prev, pagy_t('pagy.prev'), %(#{prev_aria_label_attr} class="pagination-previous"))
-              else
-                %(<a role="link" class="pagination-previous" disabled aria-disabled="true" #{
-                    prev_aria_label_attr}>#{pagy_t 'pagy.prev'}</a>)
-              end
+    def bulma_prev_next_html(pagy, a)
+      html = if (p_prev = pagy.prev)
+               a.(p_prev, pagy_t('pagy.prev'), classes: 'pagination-previous', aria_label: pagy_t('pagy.aria_label.prev'))
+             else
+               %(<a role="link" class="pagination-previous" disabled aria-disabled="true" aria-label="#{
+                   pagy_t('pagy.aria_label.prev')}">#{pagy_t 'pagy.prev'}</a>)
+             end
       html << if (p_next = pagy.next)
-                link.call(p_next, pagy_t('pagy.next'), %(#{next_aria_label_attr} class="pagination-next"))
+                a.(p_next, pagy_t('pagy.next'), classes: 'pagination-next', aria_label: pagy_t('pagy.aria_label.next'))
               else
-                %(<a role="link" class="pagination-next" disabled aria-disabled="true" #{
-                    next_aria_label_attr}>#{pagy_t('pagy.next')}</a>)
+                %(<a role="link" class="pagination-next" disabled aria-disabled="true" aria-label="#{
+                    pagy_t('pagy.aria_label.next')}">#{pagy_t('pagy.next')}</a>)
               end
     end
   end

data/lib/pagy/extras/foundation.rb

@@ -1,25 +1,24 @@
 # See the Pagy documentation: https://ddnexus.github.io/pagy/docs/extras/foundation
 # frozen_string_literal: true
 
-require 'pagy/extras/frontend_helpers'
+require 'pagy/extras/js_tools'
 
 class Pagy # :nodoc:
   # Frontend modules are specially optimized for performance.
   # The resulting code may not look very elegant, but produces the best benchmarks
   module FoundationExtra
     # Pagination for Foundation: it returns the html with the series of links to the pages
-    def pagy_foundation_nav(pagy, pagy_id: nil, link_extra: '',
-                            nav_aria_label: nil, nav_i18n_key: nil, **vars)
-      p_id = %( id="#{pagy_id}") if pagy_id
-      link = pagy_link_proc(pagy, link_extra:)
+    def pagy_foundation_nav(pagy, id: nil, aria_label: nil, **vars)
+      id = %( id="#{id}") if id
+      a  = pagy_anchor(pagy)
 
-      html = +%(<nav#{p_id} class="pagy-foundation-nav" #{
-                 nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)}><ul class="pagination">)
-      html << foundation_prev_html(pagy, link)
+      html = +%(<nav#{id} class="pagy-foundation-nav" #{
+                  nav_aria_label(pagy, aria_label:)}><ul class="pagination"> #{
+                  foundation_prev_html(pagy, a)})
       pagy.series(**vars).each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
         html << case item
                 when Integer
-                  %(<li>#{link.call item}</li>)
+                  %(<li>#{a.(item)}</li>)
                 when String
                   %(<li class="current" role="link" aria-current="page" aria-disabled="true">#{pagy.label_for(item)}</li>)
                 when :gap
@@ -28,76 +27,65 @@ class Pagy # :nodoc:
                   raise InternalError, "expected item types in series to be Integer, String or :gap; got #{item.inspect}"
                 end
       end
-      html << pagy_foundation_next_html(pagy, link)
-      html << %(</ul></nav>)
+      html << %(#{foundation_next_html(pagy, a)}</ul></nav>)
     end
 
-    # Javascript pagination for foundation: it returns a nav and a JSON tag used by the pagy.js file
-    def pagy_foundation_nav_js(pagy, pagy_id: nil, link_extra: '',
-                               nav_aria_label: nil, nav_i18n_key: nil, **vars)
+    # Javascript pagination for foundation: it returns a nav with a data-pagy attribute used by the pagy.js file
+    def pagy_foundation_nav_js(pagy, id: nil, aria_label: nil, **vars)
       sequels = pagy.sequels(**vars)
-      p_id = %( id="#{pagy_id}") if pagy_id
-      link = pagy_link_proc(pagy, link_extra:)
-      tags = { 'before' => %(<ul class="pagination">#{foundation_prev_html pagy, link}),
-               'link'   => %(<li>#{link.call(PAGE_TOKEN, LABEL_TOKEN)}</li>),
-               'active' => %(<li class="current" role="link" aria-current="page" aria-disabled="true">#{LABEL_TOKEN}</li>),
-               'gap'    => %(<li class="ellipsis gap"></li>),
-               'after'  => %(#{pagy_foundation_next_html pagy, link}</ul>) }
+      id      = %( id="#{id}") if id
+      a       = pagy_anchor(pagy)
+      tokens  = { 'before'  => %(<ul class="pagination">#{foundation_prev_html pagy, a}),
+                  'a'       => %(<li>#{a.(PAGE_TOKEN, LABEL_TOKEN)}</li>),
+                  'current' => %(<li class="current" role="link" aria-current="page" aria-disabled="true">#{LABEL_TOKEN}</li>),
+                  'gap'     => %(<li class="ellipsis gap"></li>),
+                  'after'   => %(#{foundation_next_html pagy, a}</ul>) }
 
-      %(<nav#{p_id} class="#{'pagy-rjs ' if sequels.size > 1}pagy-foundation-nav-js" #{
-          nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)} #{
-          pagy_data(pagy, :nav, tags, sequels, pagy.label_sequels(sequels))}></nav>)
+      %(<nav#{id} class="#{'pagy-rjs ' if sequels.size > 1}pagy-foundation-nav-js" #{
+          nav_aria_label(pagy, aria_label:)} #{
+          pagy_data(pagy, :nav, tokens, sequels, pagy.label_sequels(sequels))
+        }></nav>)
     end
 
-    # Javascript combo pagination for Foundation: it returns a nav and a JSON tag used by the pagy.js file
-    def pagy_foundation_combo_nav_js(pagy, pagy_id: nil, link_extra: '',
-                                     nav_aria_label: nil, nav_i18n_key: nil)
-      p_id    = %( id="#{pagy_id}") if pagy_id
-      link    = pagy_link_proc(pagy, link_extra:)
-      p_page  = pagy.page
-      p_pages = pagy.pages
-      input   = %(<input name="page" class="input-group-field cell shrink" type="number" min="1" max="#{
-                    p_pages}" value="#{p_page}" style="width: #{
-                    p_pages.to_s.length + 1}rem; padding: 0 0.3rem; margin: 0 0.3rem;" aria-current="page">)
+    # Javascript combo pagination for Foundation: it returns a nav with a data-pagy attribute used by the pagy.js file
+    def pagy_foundation_combo_nav_js(pagy, id: nil, aria_label: nil)
+      id    = %( id="#{id}") if id
+      a     = pagy_anchor(pagy)
+      pages = pagy.pages
 
-      %(<nav#{p_id} class="pagy-foundation-combo-nav-js" #{
-          nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)} #{
-          pagy_data(pagy, :combo, pagy_url_for(pagy, PAGE_TOKEN))}><div class="input-group">#{
-          if (p_prev = pagy.prev)
-            link.call(p_prev, pagy_t('pagy.prev'),
-                      %(style="margin-bottom: 0" class="prev button primary" #{prev_aria_label_attr}))
-          else
-            %(<a style="margin-bottom: 0" class="prev button primary disabled" role="link" aria-disabled="true" #{
-                prev_aria_label_attr}>#{pagy_t('pagy.prev')}</a>)
-          end
-        }#{
-          pagy_t('pagy.combo_nav_js', page_input: input, count: p_page, pages: p_pages)
-          .sub!('<label>', '<label class="input-group-label">')}#{ # add the class to the official dictionary string
-          if (p_next = pagy.next)
-            link.call(p_next, pagy_t('pagy.next'),
-                      %(style="margin-bottom: 0" class="next button primary" #{next_aria_label_attr}))
-          else
-            %(<a style="margin-bottom: 0" class="next button primary disabled" role="link" aria-disabled="true" #{
-                next_aria_label_attr}>#{pagy_t 'pagy.next'}</a>)
-          end
-        }</div></nav>)
+      page_input = %(<input name="page" type="number" min="1" max="#{pages}" value="#{pagy.page}" aria-current="page" ) <<
+                   %(style="text-align: center; width: #{pages.to_s.length + 1}rem; ) <<
+                   %(height: 1.5rem; padding: .5rem; margin: 0 .4rem; font-size: .875rem;" class="current">)
+
+      %(<nav#{id} class="pagy-foundation-combo-nav-js" #{
+          nav_aria_label(pagy, aria_label:)} #{
+          pagy_data(pagy, :combo, pagy_url_for(pagy, PAGE_TOKEN))
+        }><ul class="pagination">#{
+          foundation_prev_html(pagy, a)
+        }<li style="padding: 0 .3rem"><label style="display: flex; align-items: center; white-space: nowrap">#{
+          pagy_t('pagy.combo_nav_js', page_input:, pages:)
+        }</label></li>#{
+          foundation_next_html(pagy, a)
+        }</ul></nav>)
     end
 
     private
 
-    def foundation_prev_html(pagy, link)
+    def foundation_prev_html(pagy, a)
       if (p_prev = pagy.prev)
-        %(<li class="prev">#{link.call(p_prev, pagy_t('pagy.prev'), prev_aria_label_attr)}</li>)
+        %(<li class="prev">#{a.(p_prev, pagy_t('pagy.prev'), aria_label: pagy_t('pagy.aria_label.prev'))}</li>)
       else
-        %(<li class="prev disabled" role="link" aria-disabled="true" #{prev_aria_label_attr}>#{pagy_t('pagy.prev')}</li>)
+        %(<li class="prev disabled" role="link" aria-disabled="true" #{
+            pagy_t('pagy.aria_label.prev')}>#{pagy_t('pagy.prev')}</li>)
       end
     end
 
-    def pagy_foundation_next_html(pagy, link)
+    def foundation_next_html(pagy, a)
       if (p_next = pagy.next)
-        %(<li class="next">#{link.call(p_next, pagy_t('pagy.next'), next_aria_label_attr)}</li>)
+        %(<li class="next">#{a.(p_next, pagy_t('pagy.next'), aria_label: pagy_t('pagy.aria_label.next'))}</li>)
       else
-        %(<li class="next disabled" role="link" aria-disabled="true" #{next_aria_label_attr}>#{pagy_t('pagy.next')}</li>)
+        %(<li class="next disabled" role="link" aria-disabled="true" #{
+             pagy_t('pagy.aria_label.next')}>#{pagy_t('pagy.next')}</li>)
       end
     end
   end

data/lib/pagy/extras/items.rb

@@ -1,7 +1,7 @@
 # See the Pagy documentation: https://ddnexus.github.io/pagy/docs/extras/items
 # frozen_string_literal: true
 
-require 'pagy/extras/frontend_helpers'
+require 'pagy/extras/js_tools'
 
 class Pagy # :nodoc:
   DEFAULT[:items_param] = :items
@@ -33,27 +33,30 @@ class Pagy # :nodoc:
 
     # Additions for the Frontend module
     module FrontendAddOn
-      ITEMS_PLACEHOLDER = '__pagy_items__'
+      ITEMS_TOKEN = '__pagy_items__'
 
       # Return the items selector HTML. For example "Show [20] items per page"
-      def pagy_items_selector_js(pagy, pagy_id: nil, item_name: nil, item_i18n_key: nil)
+      def pagy_items_selector_js(pagy, id: nil, item_name: nil)
         return '' unless pagy.vars[:items_extra]
 
-        p_id           = %( id="#{pagy_id}") if pagy_id
-        p_vars         = pagy.vars
-        p_items        = p_vars[:items]
-        p_vars[:items] = ITEMS_PLACEHOLDER
-        url_token      = pagy_url_for(pagy, PAGE_TOKEN)
-        p_vars[:items] = p_items # restore the items
-
-        html  = +%(<span#{p_id} class="pagy pagy-items-selector-js" #{pagy_data(pagy, :selector, pagy.from, url_token)}>)
-        input = %(<input name="items" type="number" min="1" max="#{p_vars[:max_items]}" value="#{
-                    p_items}" style="padding: 0; text-align: center; width: #{p_items.to_s.length + 1}rem;">)
-        html << pagy_t('pagy.items_selector_js',
-                       item_name: item_name || pagy_t(item_i18n_key || p_vars[:item_i18n_key], count: p_items),
-                       items_input: input,
-                       count: p_items)
-        html << %(</span>)
+        id           = %( id="#{id}") if id
+        vars         = pagy.vars
+        items        = vars[:items]
+        vars[:items] = ITEMS_TOKEN
+        url_token    = pagy_url_for(pagy, PAGE_TOKEN)
+        vars[:items] = items # restore the items
+
+        items_input = %(<input name="items" type="number" min="1" max="#{vars[:max_items]}" value="#{
+                         items}" style="padding: 0; text-align: center; width: #{items.to_s.length + 1}rem;">)
+
+        %(<span#{id} class="pagy items-selector-js" #{
+            pagy_data(pagy, :selector, pagy.from, url_token)
+          }><label>#{
+            pagy_t('pagy.items_selector_js',
+                   item_name: item_name || pagy_t('pagy.item_name', count: items),
+                   items_input:,
+                   count: items)
+          }</label></span>)
       end
     end
     Frontend.prepend ItemsExtra::FrontendAddOn

data/lib/pagy/extras/{frontend_helpers.rb → js_tools.rb}

@@ -4,7 +4,7 @@ class Pagy # :nodoc:
   DEFAULT[:steps] = false # default false will use {0 => @vars[:size]}
 
   # Private module documented in the main classes
-  module FrontendHelpers
+  module JSTools
     # Additions for the Pagy class
     module PagyAddOn
       # `Pagy` instance method used by the `pagy*_nav_js` helpers.