feat(@dpc-sdp/ripple-ui-core): add pagination labels and swipe events

packages/ripple-ui-core/src/components/card-carousel/RplCardCarousel.vue

@@ -20,16 +20,18 @@ withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  (e: 'paginate', payload: rplEventPayload): void
+  (e: 'paginate', payload: rplEventPayload & { action: 'prev' | 'next' }): void
+  (e: 'swipe', payload: rplEventPayload & { action: 'prev' | 'next' }): void
 }>()
 
 const { emitRplEvent } = useRippleEvent('rpl-card-carousel', emit)
 
-const handleChange = ({ action, value }) => {
+const handleChange = ({ type, action, text, value }) => {
   emitRplEvent(
-    'paginate',
+    type,
     {
       action,
+      text,
       index: value + 1
     },
     { global: true }

packages/ripple-ui-core/src/components/media-gallery/RplMediaGallery.vue

@@ -27,6 +27,7 @@ const props = defineProps<Props>()
 
 const emit = defineEmits<{
   (e: 'paginate', payload: rplEventPayload & { action: 'prev' | 'next' }): void
+  (e: 'swipe', payload: rplEventPayload & { action: 'prev' | 'next' }): void
   (
     e: 'viewFullscreen',
     payload: rplEventPayload & { action: 'enter' | 'exit' }
@@ -37,19 +38,36 @@ const { emitRplEvent } = useRippleEvent('rpl-media-gallery', emit)
 
 const showModal = ref(false)
 const activeImageSlide = ref(0)
+const activeModalImageSlide = ref(0)
 const activeContentSlide = ref(0)
+const activeModalContentSlide = ref(0)
 
-const contentSlideUpdate = ({ value }) => {
-  activeImageSlide.value = value
+const contentSlideUpdate = (event) => {
+  activeImageSlide.value = event.value
+
+  handleChange(event)
 }
 
-const imageSlideUpdate = ({ action, value }) => {
+const modalContentSlideUpdate = (event) => {
+  activeModalImageSlide.value = event.value
+
+  handleChange(event)
+}
+
+const imageSlideUpdate = ({ value }) => {
   activeContentSlide.value = value
+}
 
+const modalImageSlideUpdate = ({ value }) => {
+  activeModalContentSlide.value = value
+}
+
+const handleChange = ({ type, action, text, value }) => {
   emitRplEvent(
-    'paginate',
+    type,
     {
       action,
+      text,
       label: props.items[value].title,
       index: value + 1
     },
@@ -60,6 +78,11 @@ const imageSlideUpdate = ({ action, value }) => {
 const toggleModal = (event) => {
   showModal.value = !showModal.value
 
+  if (showModal.value) {
+    activeModalImageSlide.value = activeImageSlide.value
+    activeModalContentSlide.value = activeContentSlide.value
+  }
+
   emitRplEvent(
     'viewFullscreen',
     {
@@ -75,13 +98,13 @@ const toggleModal = (event) => {
 const keyboardNavigation = (event) => {
   if (!showModal.value) return
 
-  if (event.key === 'ArrowLeft' && activeImageSlide.value > 0) {
-    activeImageSlide.value = activeImageSlide.value - 1
+  if (event.key === 'ArrowLeft' && activeModalImageSlide.value > 0) {
+    activeModalImageSlide.value = activeModalImageSlide.value - 1
   } else if (
     event.key === 'ArrowRight' &&
-    activeImageSlide.value < props.items.length - 1
+    activeModalImageSlide.value < props.items.length - 1
   ) {
-    activeImageSlide.value = activeImageSlide.value + 1
+    activeModalImageSlide.value = activeModalImageSlide.value + 1
   }
 }
 
@@ -139,10 +162,10 @@ onUnmounted(() => {
       @close="toggleModal"
     >
       <RplSlider
-        :current-slide="activeImageSlide"
+        :current-slide="activeModalImageSlide"
         :show-pagination="false"
         class="rpl-media-gallery__modal-images"
-        @change="imageSlideUpdate"
+        @change="modalImageSlideUpdate"
       >
         <RplImage
           v-for="(item, i) in items"
@@ -157,8 +180,8 @@ onUnmounted(() => {
         <RplSlider
           effect="fade"
           :show-tally="true"
-          :current-slide="activeContentSlide"
-          @change="contentSlideUpdate"
+          :current-slide="activeModalContentSlide"
+          @change="modalContentSlideUpdate"
         >
           <RplMediaGalleryContent
             v-for="(item, index) in items"

packages/ripple-ui-core/src/components/pagination/RplPagination.vue

@@ -17,6 +17,8 @@ interface Props {
   contentType?: string
   showTally?: boolean
   variant?: (typeof RplPaginationVariants)[number]
+  prevLabel?: string
+  nextLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -25,7 +27,9 @@ const props = withDefaults(defineProps<Props>(), {
   surroundingPages: 2,
   contentType: undefined,
   showTally: false,
-  variant: 'complex'
+  variant: 'complex',
+  prevLabel: 'Previous',
+  nextLabel: 'Next'
 })
 
 const emit = defineEmits<{
@@ -51,10 +55,11 @@ watch(
   (step) => updateStep(step)
 )
 
-const onClick = (value: number, action: string) => {
+const onClick = (value: number, action: string, label: string) => {
   updateStep(value)
 
   emitRplEvent('change', {
+    text: label,
     action,
     value
   })
@@ -78,9 +83,9 @@ const iconSize = computed(() => (isComplex.value ? 's' : 'xs'))
       :icon-size="iconSize"
       :aria-label="`Go to previous ${contentType}`"
       :disabled="!isComplex && isFirstStep"
-      @click="() => onClick(activeStep - 1, 'prev')"
+      @click="() => onClick(activeStep - 1, 'prev', prevLabel)"
     >
-      Previous
+      {{ prevLabel }}
     </RplPaginationLink>
     <ol v-if="isComplex" class="rpl-pagination__list">
       <li
@@ -93,7 +98,7 @@ const iconSize = computed(() => (isComplex.value ? 's' : 'xs'))
           class="rpl-pagination__page rpl-u-focusable-block"
           :aria-label="`Go to ${contentType} ${step}`"
           :aria-current="step === activeStep ? true : null"
-          @click="() => onClick(step, 'page')"
+          @click="() => onClick(step, 'page', step)"
         >
           <span>{{ step }}</span>
         </button>
@@ -109,9 +114,9 @@ const iconSize = computed(() => (isComplex.value ? 's' : 'xs'))
       :icon-size="iconSize"
       :aria-label="`Go to next ${contentType}`"
       :disabled="!isComplex && isLastStep"
-      @click="() => onClick(activeStep + 1, 'next')"
+      @click="() => onClick(activeStep + 1, 'next', nextLabel)"
     >
-      Next
+      {{ nextLabel }}
     </RplPaginationLink>
   </nav>
 </template>

packages/ripple-ui-core/src/components/slider/RplSlider.vue

@@ -41,6 +41,7 @@ const emit = defineEmits<{
 const container = ref()
 const swiper = ref()
 const activePage = ref()
+const paginate = ref(false)
 const slots = useSlots()
 const bp = useBreakpoints(bpMin)
 const speed = useComputedSpeed(container, '--rpl-motion-speed-6', 240)
@@ -111,19 +112,32 @@ watch(
   (slide) => swiper.value.$el.swiper.slideTo(slide)
 )
 
-const paginationClick = ({ value }) => {
+const paginationClick = ({ action, text, value }) => {
+  paginate.value = true
   swiper.value.$el.swiper.slideTo(value - 1)
+
+  emitRplEvent('change', {
+    type: 'paginate',
+    action,
+    text,
+    value: value - 1
+  })
 }
 
 const slideUpdate = ({ activeIndex, slides }) => {
   const previousPage = activePage.value || 1
   activePage.value = activeIndex + 1
   setInert({ activeIndex, slides })
 
-  emitRplEvent('change', {
-    action: activePage.value > previousPage ? 'next' : 'prev',
-    value: activeIndex
-  })
+  if (paginate.value) {
+    paginate.value = false
+  } else {
+    emitRplEvent('change', {
+      type: 'swipe',
+      action: activePage.value > previousPage ? 'next' : 'prev',
+      value: activeIndex
+    })
+  }
 }
 
 const setInert = ({ activeIndex, slides }) =>
@@ -159,7 +173,7 @@ const setInert = ({ activeIndex, slides }) =>
       :touchStartPreventDefault="false"
       class="rpl-slider__swiper"
       @after-init="setInert"
-      @slide-change="slideUpdate"
+      @active-index-change="slideUpdate"
     >
       <SwiperSlide
         v-for="(slide, i) in slides"