Merge pull request #446 from Tofandel/feat/paginated-pagination

feat: add paginated navigation for carousel pagination
ismail9k · Dec 16, 2024 · 334e0b4 · 334e0b4
2 parents 31107b7 + 3315633
commit 334e0b4
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 17 deletions.
diff --git a/docs/addons.md b/docs/addons.md
@@ -46,6 +46,7 @@ import { Pagination as CarouselPagination } from 'vue3-carousel'
 
 ### Config
 
-| Prop             | Default | Description                  |
-| ---------------- | ------- | ---------------------------- |
-| `disableOnClick` | false   | Disables navigation on click |
+| Prop                    | Default | Description                                                                                                                         |
+|-------------------------| ------- |-------------------------------------------------------------------------------------------------------------------------------------|
+| `disableOnClick`        | false   | Disables navigation on click                                                                                                        |
+| `paginateByItemsToShow` | false   | Enables grouping of slides into pages (calculated based on the current itemsToShow) where each page gets a single navigation button |
diff --git a/playground/App.vue b/playground/App.vue
@@ -84,7 +84,7 @@ const handelButtonClick = () => {
           </div>
         </CarouselSlide>
         <template #addons>
-          <CarouselPagination />
+          <CarouselPagination paginated />
           <CarouselNavigation />
         </template>
       </VueCarousel>

diff --git a/src/components/Pagination/Pagination.ts b/src/components/Pagination/Pagination.ts
@@ -1,7 +1,7 @@
-import { inject, h, VNode, defineComponent } from 'vue'
+import { inject, h, VNode, defineComponent, computed } from 'vue'
 
 import { injectCarousel } from '@/shared'
-import { mapNumberToRange, i18nFormatter } from '@/utils'
+import { mapNumberToRange, i18nFormatter, calculateOffset } from '@/utils'
 
 import { PaginationProps } from './Pagination.types'
 
@@ -11,7 +11,7 @@ export const Pagination = defineComponent<PaginationProps>({
     disableOnClick: {
       type: Boolean,
     },
-    paginated: {
+    paginateByItemsToShow: {
       type: Boolean
     },
   },
@@ -22,19 +22,46 @@ export const Pagination = defineComponent<PaginationProps>({
       return () => '' // Don't render, let vue warn about the missing provide
     }
 
+    const offset = computed(() => calculateOffset(carousel.config.snapAlign, carousel.config.itemsToShow))
+    const isPaginated = computed(() => props.paginateByItemsToShow && carousel.config.itemsToShow > 1)
+    const currentPage = computed(() =>
+      Math.ceil((carousel.currentSlide - offset.value) / carousel.config.itemsToShow)
+    )
+    const pageCount = computed(() =>
+      Math.ceil(carousel.slidesCount / carousel.config.itemsToShow)
+    )
+
     const isActive = (slide: number): boolean =>
-      mapNumberToRange({
-        val: carousel.currentSlide,
-        max: carousel.maxSlide,
-        min: 0,
-      }) === slide
+      mapNumberToRange(
+        isPaginated.value
+          ? {
+              val: currentPage.value,
+              max: pageCount.value - 1,
+              min: 0,
+            }
+          : {
+              val: carousel.currentSlide,
+              max: carousel.maxSlide,
+              min: carousel.minSlide,
+            }
+      ) === slide
 
     return () => {
       const children: Array<VNode> = []
-      for (let slide = carousel.minSlide; slide <= carousel.maxSlide; slide++) {
-        const buttonLabel = i18nFormatter(carousel.config.i18n.ariaNavigateToSlide, {
-          slideNumber: slide + 1,
-        })
+
+      for (
+        let slide = isPaginated.value ? 0 : carousel.minSlide;
+        slide <= (isPaginated.value ? pageCount.value - 1 : carousel.maxSlide);
+        slide++
+      ) {
+        const buttonLabel = i18nFormatter(
+          carousel.config.i18n[
+            isPaginated.value ? 'ariaNavigateToPage' : 'ariaNavigateToSlide'
+          ],
+          {
+            slideNumber: slide + 1,
+          }
+        )
         const active = isActive(slide)
         const button = h('button', {
           type: 'button',
@@ -47,7 +74,7 @@ export const Pagination = defineComponent<PaginationProps>({
           'aria-controls': carousel.slides[slide]?.exposed?.id,
           title: buttonLabel,
           disabled: props.disableOnClick,
-          onClick: () => carousel.nav.slideTo(slide),
+          onClick: () => carousel.nav.slideTo(isPaginated.value ? slide * carousel.config.itemsToShow + offset.value : slide),
         })
         const item = h('li', { class: 'carousel__pagination-item', key: slide }, button)
         children.push(item)

diff --git a/src/components/Pagination/Pagination.types.ts b/src/components/Pagination/Pagination.types.ts
@@ -1,3 +1,4 @@
 export interface PaginationProps {
   disableOnClick?: boolean
+  paginateByItemsToShow?: boolean
 }
diff --git a/src/shared/constants.ts b/src/shared/constants.ts
@@ -16,6 +16,7 @@ export const I18N_DEFAULT_CONFIG = {
   ariaNextSlide: 'Navigate to next slide',
   ariaPreviousSlide: 'Navigate to previous slide',
   ariaNavigateToSlide: 'Navigate to slide {slideNumber}',
+  ariaNavigateToPage: 'Navigate to page {slideNumber}',
   ariaGallery: 'Gallery',
   itemXofY: 'Item {currentSlide} of {slidesCount}',
   iconArrowUp: 'Arrow pointing upwards',