Adds page change event

docs/components/pagination.md

@@ -16,9 +16,13 @@ import { Pagination } from 'flowbite-vue'
 import { ref } from 'vue'
 
 const currentPage = ref(1)
+
+const handlePageChange = (page: number) => {
+  console.log('page changed', page)
+}
 </script>
 <template>
-  <Pagination v-model="currentPage" :total-pages="100"></Pagination>
+  <Pagination v-model="currentPage" :total-pages="100" @page-changed="handlePageChange"></Pagination>
 </template>
 ```
 <PaginationExample />

docs/components/pagination/examples/PaginationExample.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="vp-raw">
-    <Pagination v-model="currentPage" :total-pages="100"></Pagination>
+    <Pagination v-model="currentPage" :total-pages="100" @page-changed="handlePageChange"></Pagination>
   </div>
 </template>
 <script lang="ts" setup>
 import { Pagination } from '../../../../src/index'
 import { ref } from 'vue'
 
 const currentPage = ref<number>(1)
+
+const handlePageChange = (page: number) => {
+  console.log('page changed', page)
+}
 </script>

src/components/Pagination/Pagination.vue

@@ -9,11 +9,20 @@
       <span class="font-semibold text-gray-900 dark:text-white">{{ computedTotalItems }}</span>
     </div>
     <ul class="inline-flex -space-x-px">
+      <!-- First Button -->
+      <li>
+          <button 
+              :disabled="isFirstPage" 
+              @click="goToFirstPage" 
+              class="py-2 px-3 rounded-l-md leading-tight text-gray-500 bg-white border border-gray-300  dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+              First
+          </button>
+      </li>
       <li>
         <button
           :disabled="isDecreaseDisabled"
           @click="decreasePage"
-          class="flex items-center py-2 px-3 ml-0 leading-tight text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="flex items-center py-2 px-3 ml-0 leading-tight text-gray-500 bg-white  border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
         >
           <svg v-if="showIcons" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" class="h-5 w-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
           {{ previousLabel }}
@@ -36,12 +45,21 @@
         <button
           :disabled="isIncreaseDisabled"
           @click="increasePage"
-          class="flex items-center py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="flex items-center py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
         >
           {{ nextLabel }}
           <svg v-if="showIcons" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" class="h-5 w-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
         </button>
       </li>
+      <!-- Last Button -->
+      <li>
+          <button 
+              :disabled="isLastPage" 
+              @click="goToLastPage"
+              class="w-12 py-2 px-3 rounded-r-md leading-tight text-gray-500 bg-white border border-gray-300  dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+              Last
+          </button>
+      </li>
     </ul>
   </nav>
 </template>
@@ -50,7 +68,7 @@ import { computed } from 'vue'
 import type { PropType } from 'vue'
 import type { PaginationLayout } from '@/components/Pagination/types'
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'page-changed'])
 
 const props = defineProps({
   modelValue: {
@@ -93,12 +111,15 @@ const props = defineProps({
 
 const setPage = (index: number) => {
   emit('update:modelValue', index)
+  emit('page-changed', index);
 }
 const decreasePage = () => {
   emit('update:modelValue', props.modelValue - 1)
+  emit('page-changed', props.modelValue - 1);
 }
 const increasePage = () => {
   emit('update:modelValue', props.modelValue + 1)
+  emit('page-changed', props.modelValue + 1);
 }
 
 const computedTotalPages = computed(() => {
@@ -159,4 +180,18 @@ const computedTotalItems = computed(() => {
   if (props.totalItems) return props.totalItems
   return computedTotalPages.value * props.perPage
 })
+
+const isFirstPage = computed(() => props.modelValue === 1);
+const isLastPage = computed(() => props.modelValue === computedTotalPages.value);
+
+const goToFirstPage = () => {
+  emit('update:modelValue', 1);
+  emit('page-changed', 1);
+}
+
+const goToLastPage = () => {
+  const lastPage = computedTotalPages.value;
+  emit('update:modelValue', lastPage);
+  emit('page-changed', lastPage);
+}
 </script>