ariadne_view_components 0.0.94.3 → 0.0.94.5

data/app/components/ariadne/ui/pagination/component.rb

@@ -6,23 +6,116 @@ module Ariadne
     module Pagination
       # Pagination is a horizontal set of links to navigate paginated content.
       class Component < Ariadne::BaseComponent
-        option :label
-        option :goto_label
-
-        option :current_page
-        option :pages_count
+        # Required props:
+        # - total_count: Total number of items to paginate.
+        # - current_page: Current page number.
+        # - items_per_page: Number of items per page.
+        # - label: Main label for screen readers (e.g., "Pagination").
+        # - goto_label: Label prefix for page links (e.g., "Go to page").
+        # - callback_page_url: Lambda that receives a page number and returns the URL.
+        # - callback_per_page_change: Lambda that receives a per_page value and returns the URL.
+        # - per_page_options: Array of allowed page sizes (e.g., [10, 25, 50, 100]).
+        # - frame_id: Turbo frame identifier (if applicable).
+        # - show_results_counter: Boolean indicating whether to display the results counter.
 
+        # Use dry-initializer for props
+        option :total_count
+        option :current_page, default: proc { 1 }
+        option :items_per_page, default: proc { 10 }
+        option :label, default: proc { I18n.t("pagy.aria_label.nav", default: "Pagination") }
+        option :goto_label, default: proc { I18n.t("pagy.goto_label", default: "Go to page") }
         option :callback_page_url
+        option :callback_per_page_change
+        option :per_page_options
+        option :frame_id
+        option :show_results_counter, default: proc { true }
+
+        def initialize(**options)
+          super
+          @calculator = Ariadne::PaginationCalculator.new(
+            total_count: total_count,
+            page: current_page,
+            items_per_page: items_per_page,
+          )
+        end
+
+        private
+
+        attr_reader :calculator
 
         def page_links
-          (1..pages_count).each_with_object([]) do |page, list|
-            if [1, pages_count].include?(page) || page.between?(current_page - 2, current_page + 2)
-              list << page
-            elsif list.last
-              list << nil
-            end
+          calculator.page_series
+        end
+
+        def component_classes
+          merge_tailwind_classes(
+            "ariadne-flex ariadne-items-center ariadne-justify-between ariadne-w-full",
+          )
+        end
+
+        def link_classes(is_active = false)
+          base_classes = "ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-min-w-[2rem] ariadne-h-8 ariadne-px-2 ariadne-text-sm ariadne-font-medium ariadne-rounded-md"
+
+          active_classes = if is_active
+            "ariadne-bg-gray-100 dark:ariadne-bg-gray-700 ariadne-text-gray-900 dark:ariadne-text-white ariadne-cursor-default"
+          else
+            "ariadne-transition-colors ariadne-text-gray-600 hover:ariadne-bg-gray-50 dark:ariadne-text-gray-300 dark:hover:ariadne-bg-gray-700 ariadne-cursor-pointer"
+          end
+
+          merge_tailwind_classes([base_classes, active_classes])
+        end
+
+        def disabled_link_classes
+          merge_tailwind_classes(
+            "ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-min-w-[2rem] ariadne-h-8 ariadne-px-2 ariadne-text-sm ariadne-font-medium ariadne-rounded-md ariadne-text-gray-300 dark:ariadne-text-gray-600 ariadne-cursor-not-allowed",
+          )
+        end
+
+        def ellipsis_classes
+          merge_tailwind_classes(
+            "ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-min-w-[2rem] ariadne-h-8 ariadne-px-1 ariadne-text-sm ariadne-font-medium ariadne-text-gray-500 dark:ariadne-text-gray-400",
+          )
+        end
+
+        def select_classes
+          merge_tailwind_classes(
+            "ariadne-h-8 ariadne-pl-2 ariadne-pr-8 ariadne-text-sm ariadne-font-medium ariadne-rounded-md ariadne-border ariadne-border-gray-300 dark:ariadne-border-gray-600 ariadne-bg-white dark:ariadne-bg-gray-800 ariadne-text-gray-700 dark:ariadne-text-gray-200 hover:ariadne-border-primary-500 focus:ariadne-outline-none focus:ariadne-ring-1 focus:ariadne-ring-primary-500 focus:ariadne-border-primary-500",
+          )
+        end
+
+        def counter_classes
+          merge_tailwind_classes(
+            "ariadne-text-sm ariadne-text-gray-700 dark:ariadne-text-gray-300 ariadne-font-medium",
+          )
+        end
+
+        def formatted_info
+          {
+            text: "#{calculator.from}-#{calculator.to} of #{total_count}",
+            role: "status",
+            aria: { live: "polite" },
+          }
+        end
+
+        def select_options
+          per_page_options.map do |size|
+            {
+              value: callback_per_page_change.call(size),
+              label: "#{size} per page",
+              selected: size == items_per_page,
+            }
           end
         end
+
+        def current_per_page_option
+          select_options.find { |option| option[:selected] } || select_options.first
+        end
+
+        def nav_section_classes
+          merge_tailwind_classes(
+            "ariadne-flex ariadne-items-center ariadne-gap-1 ariadne-justify-center",
+          )
+        end
       end
     end
   end

data/app/frontend/controllers/pagination_controller.ts

@@ -0,0 +1,42 @@
+import {controllerFactory} from '@utils/createController'
+
+export default class PaginationController extends controllerFactory<HTMLElement>()({
+  targets: {
+    perPage: HTMLSelectElement,
+  },
+}) {
+  connect(): void {
+
+  }
+
+  /**
+   * Handles changes to the per-page selector
+   */
+  perPageChange(event: Event): void {
+    event.preventDefault()
+    const select = event.target as HTMLSelectElement
+    const value = select.value
+    
+    // Get the current URL and update it
+    const url = new URL(window.location.href)
+    const newParams = new URLSearchParams(value.split('?')[1])
+    
+    // Update the URL with new parameters
+    newParams.forEach((value, key) => {
+      url.searchParams.set(key, value)
+    })
+    
+    window.location.href = url.toString()
+  }
+
+  /**
+   * Handles clicks on pagination links
+   */
+  navigate(event: Event): void {
+    const link = (event.target as HTMLElement).closest('a')
+    if (!link) return
+
+    event.preventDefault()
+    window.location.href = link.href
+  }
+} 

data/app/frontend/controllers/tooltip_controller.ts

@@ -1,6 +1,5 @@
 import {controllerFactory} from '@utils/createController'
-import {computePosition, arrow, offset, flip} from '@floating-ui/dom'
-
+import {computePosition, arrow, offset, flip, Placement} from '@floating-ui/dom'
 
 const TRIANGLE_HEIGHT = 6
 const DEFAULT_OFFSET = 4;
@@ -15,53 +14,38 @@ export default class TooltipController extends controllerFactory<HTMLElement>()(
   },
 }) {
   async update() {
+    const placement = this.element.getAttribute('data-placement') as Placement || 'top'
+
     computePosition(this.activatorTarget, this.tooltipTarget, {
-      placement: 'top',
-      middleware: [flip({ padding: 12 }), offset(TRIANGLE_HEIGHT + DEFAULT_OFFSET), arrow({element: this.arrowTarget})],
-      // eslint-disable-next-line github/no-then
+      placement,
+      middleware: [
+        flip({ padding: 12 }), 
+        offset(TRIANGLE_HEIGHT + DEFAULT_OFFSET), 
+        arrow({ element: this.arrowTarget })
+      ],
     }).then(({x, y, placement, middlewareData}) => {
       Object.assign(this.tooltipTarget.style, {
-        left: `0px`,
+        left: `${x}px`,
         top: `${y}px`,
       })
 
-      // Reset any previously set styles on the arrow
-      Object.assign(this.arrowTarget.style, {
-        left: '',
-        top: '',
+      const {x: arrowX, y: arrowY} = middlewareData.arrow || {}
+      const staticSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right',
+      }[placement.split('-')[0]] as string
+
+      const arrowStyles: Partial<CSSStyleDeclaration> = {
+        left: arrowX != null ? `${arrowX}px` : '',
+        top: arrowY != null ? `${arrowY}px` : '',
         right: '',
         bottom: '',
-      })
-
-      const {x: arrowX, y: arrowY} = middlewareData.arrow || {}
-      const primaryPlacement = placement.split('-')[0]
-
-      switch (primaryPlacement) {
-        case 'top':
-          Object.assign(this.arrowTarget.style, {
-            left: arrowX ? `${arrowX}px` : '',
-            bottom: '-4px', // Aligns arrow to the bottom edge of the tooltip
-          })
-          break
-        case 'bottom':
-          Object.assign(this.arrowTarget.style, {
-            left: arrowX ? `${arrowX}px` : '',
-            top: '-4px', // Aligns arrow to the top edge of the tooltip
-          })
-          break
-        case 'left':
-          Object.assign(this.arrowTarget.style, {
-            top: arrowY ? `${arrowY}px` : '',
-            right: '-4px', // Aligns arrow to the right edge of the tooltip
-          })
-          break
-        case 'right':
-          Object.assign(this.arrowTarget.style, {
-            top: arrowY ? `${arrowY}px` : '',
-            left: '-4px', // Aligns arrow to the left edge of the tooltip
-          })
-          break
       }
+      arrowStyles[staticSide as 'top' | 'right' | 'bottom' | 'left'] = '-4px'
+
+      Object.assign(this.arrowTarget.style, arrowStyles)
     })
   }
 

data/app/lib/ariadne/pagination_calculator.rb

@@ -0,0 +1,78 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  # Handles pagination calculations and data structure
+  class PaginationCalculator
+    attr_reader :total_count, :page, :items_per_page, :pages
+
+    def initialize(total_count:, page: 1, items_per_page: 10)
+      @total_count = total_count
+      @items_per_page = items_per_page
+      @pages = calculate_total_pages
+      @page = handle_page_overflow(page)
+    end
+
+    def from
+      return 0 if total_count.zero?
+
+      (page - 1) * items_per_page + 1
+    end
+
+    def to
+      return 0 if total_count.zero?
+
+      [page * items_per_page, total_count].min
+    end
+
+    def next_page
+      page < pages ? page + 1 : nil
+    end
+
+    def prev_page
+      page > 1 ? page - 1 : nil
+    end
+
+    def page_series
+      return [] if pages <= 1
+      return (1..pages).to_a if pages <= 5
+
+      links = []
+      links << 1
+
+      if page <= 3
+        # Near the beginning: 1 2 3 4 5 6 7 8 ... 20
+        (2..8).each { |n| links << n if n <= pages }
+        links << nil if pages > 8
+        links << pages if pages > 8
+      elsif page >= pages - 2
+        # Near the end: 1 ... 13 14 15 16 17 18 19 20
+        links << nil
+        ((pages - 7)..pages).each { |n| links << n if n > 1 }
+      else
+        # Middle range: 1 ... 9 10 11 12 13 14 ... 20
+        links << nil
+        ((page - 2)..(page + 2)).each { |n| links << n }
+        links << nil
+        links << pages
+      end
+
+      links
+    end
+
+    private
+
+    def calculate_total_pages
+      return 1 if total_count.zero?
+
+      (total_count.to_f / items_per_page).ceil
+    end
+
+    def handle_page_overflow(requested_page)
+      return 1 if requested_page < 1
+      return pages if requested_page > pages
+
+      requested_page
+    end
+  end
+end

data/config/initializers/pagy.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require "pagy"
+
+# Only require the necessary extras:
+require "pagy/extras/overflow"    # Handles overflow scenarios gracefully.
+require "pagy/extras/metadata"    # Provides metadata for JSON/client-side rendering.
+require "pagy/extras/headers"     # Useful for API responses (if needed).
+require "pagy/extras/keyset"      # For efficient keyset pagination with large data sets.
+require "pagy/extras/array"       # Required for series method
+
+# Customize default settings:
+Pagy::DEFAULT[:limit]    = 10    # Default items per page.
+Pagy::DEFAULT[:size]     = 9     # Number of links in the nav bar.
+Pagy::DEFAULT[:overflow] = :last_page

data/lib/ariadne/view_components/version.rb

@@ -3,6 +3,6 @@
 # :nocov:
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.94.3"
+    VERSION = "0.0.94.5"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ariadne_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.94.3
+  version: 0.0.94.5
 platform: ruby
 authors:
 - Garen J. Torikian
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-02-17 00:00:00.000000000 Z
+date: 2025-02-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
@@ -265,6 +265,7 @@ files:
 - app/frontend/ariadne/theme.ts
 - app/frontend/controllers/form_autosubmit_controller.ts
 - app/frontend/controllers/form_validity_controller.ts
+- app/frontend/controllers/pagination_controller.ts
 - app/frontend/controllers/tooltip_controller.ts
 - app/frontend/entrypoints/application.ts
 - app/frontend/stylesheets/ariadne_view_components.css
@@ -281,9 +282,11 @@ files:
 - app/lib/ariadne/form.rb
 - app/lib/ariadne/icon_helper.rb
 - app/lib/ariadne/logger_helper.rb
+- app/lib/ariadne/pagination_calculator.rb
 - app/lib/ariadne/view_component/html_attrs.rb
 - app/lib/ariadne/view_component/style_variants.rb
 - app/lib/ariadne/view_helper.rb
+- config/initializers/pagy.rb
 - lib/ariadne/accessibility.rb
 - lib/ariadne/forms/acts_as_component.rb
 - lib/ariadne/forms/base.html.erb