feat(pagination): add next & previous events (#1357)

Author: mlmoravek

packages/docs/components/Pagination.md

@@ -50,10 +50,12 @@ The **Pagination** component is responsive and flexible way to indicate a series
 
 ### Events
 
-| Event name     | Properties                                | Description                  |
-| -------------- | ----------------------------------------- | ---------------------------- |
-| update:current | **value** `number` - updated current prop | current prop two-way binding |
-| change         | **value** `number` - current value        | on current change event      |
+| Event name     | Properties                                                                        | Description                  |
+| -------------- | --------------------------------------------------------------------------------- | ---------------------------- |
+| update:current | **value** `number` - updated current prop                                         | current prop two-way binding |
+| change         | **value** `number` - current value                                                | on current change event      |
+| next           | **event** `Event` - native click event<br/>**value** `number` - new current value | on next button event click   |
+| previous       | **event** `Event` - native click event<br/>**value** `number` - new current value | on previous button event     |
 
 ### Slots
 

packages/oruga/src/components/pagination/Pagination.vue

@@ -57,7 +57,19 @@ const emits = defineEmits<{
      * on current change event
      * @param value {number} current value
      */
-    change: [event: number];
+    change: [value: number];
+    /**
+     * on next button event click
+     * @param event {Event} native click event
+     * @param value {number} new current value
+     */
+    next: [event: Event, value: number];
+    /**
+     * on previous button event
+     * @param event {Event} native click event
+     * @param value {number} new current value
+     */
+    previous: [event: Event, value: number];
 }>();
 
 const { isMobile } = useMatchMedia(props.mobileBreakpoint);
@@ -131,10 +143,23 @@ const pagesInRange = computed<ReturnType<typeof getPage>[]>(() => {
     return pages;
 });
 
+const previousButtonBind = computed(() =>
+    getPage(currentPage.value - 1, props.ariaPreviousLabel, (e, v) =>
+        emits("previous", e, v),
+    ),
+);
+
+const nextButtonBind = computed(() =>
+    getPage(currentPage.value + 1, props.ariaNextLabel, (e, v) =>
+        emits("next", e, v),
+    ),
+);
+
 /** Get properties for a page */
 function getPage(
     num: number,
     ariaLabel?: string,
+    onClick?: (event: Event, value: number) => void,
 ): {
     number: number;
     isCurrent: boolean;
@@ -145,9 +170,12 @@ function getPage(
     return {
         number: num,
         isCurrent: currentPage.value === num,
-        onClick: (event: Event): void => changePage(num, event),
+        onClick: (event: Event): void => {
+            changePage(num, event);
+            if (onClick) onClick(event, num);
+        },
         ariaLabel:
-            ariaLabel || getAriaPageLabel(num, currentPage.value === num),
+            ariaLabel ?? getAriaPageLabel(num, currentPage.value === num),
         tag: props.buttonTag,
     };
 }
@@ -270,11 +298,9 @@ defineExpose({ last, first, prev, next });
             @binding {(event: Event): void} onClick - click handler
             @binding {string} ariaLabel - aria-label attribute
         -->
-        <slot
-            name="previous"
-            v-bind="getPage(currentPage - 1, ariaPreviousLabel)">
+        <slot name="previous" v-bind="previousButtonBind">
             <o-pagination-button
-                v-bind="getPage(currentPage - 1, ariaPreviousLabel)"
+                v-bind="previousButtonBind"
                 :disabled="isFirst"
                 :root-class="buttonPrevClasses"
                 :button-class="buttonClasses"
@@ -290,9 +316,9 @@ defineExpose({ last, first, prev, next });
             @binding {(event: Event): void} onClick - click handler
             @binding {string} ariaLabel - aria-label attribute
         -->
-        <slot name="next" v-bind="getPage(currentPage + 1, ariaNextLabel)">
+        <slot name="next" v-bind="nextButtonBind">
             <o-pagination-button
-                v-bind="getPage(currentPage + 1, ariaNextLabel)"
+                v-bind="nextButtonBind"
                 :disabled="isLast"
                 :root-class="buttonNextClasses"
                 :button-class="buttonClasses"

packages/oruga/src/components/pagination/examples/customise.vue

@@ -71,13 +71,13 @@ const size = ref("");
         <o-pagination
             v-model:current="current"
             :total="total"
+            :per-page="perPage"
             :range-before="rangeBefore || 0"
             :range-after="rangeAfter || 0"
             :order="order"
             :size="size"
             :simple="isSimple"
             :rounded="isRounded"
-            :per-page="perPage"
             :icon-prev="prevIcon"
             :icon-next="nextIcon" />