From 1370f1c77650b9c0a88826dbce89d5270bfbe8bc Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <hire@ilya-artamonov.ru>
Date: Thu, 21 Sep 2023 13:38:23 +0300
Subject: [PATCH] Pagination component improvements (#198)

* Adds page change event (#189)

Adds first and last pagination items

Co-authored-by: gassio <gassiogi@gmail.com>

* feat: Pagination component refactoring

---------

Co-authored-by: gassio <gassioglou@gmail.com>
Co-authored-by: gassio <gassiogi@gmail.com>
---
 docs/components/pagination.md                 | 126 ++++++++--
 .../pagination/examples/PaginationExample.vue |   5 +-
 .../examples/PaginationNavigationExample.vue  |   2 +-
 .../examples/PaginationSlotsExample.vue       |  23 ++
 .../examples/PaginationTableExample.vue       |  10 +-
 .../examples/PaginationWithCustomSlice.vue    |   2 +-
 .../PaginationWithCustomTextExample.vue       |   2 +-
 .../examples/PaginationWithIconsExample.vue   |  31 ++-
 src/components/Pagination/Pagination.vue      | 235 ++++++++++++------
 9 files changed, 314 insertions(+), 122 deletions(-)
 create mode 100644 docs/components/pagination/examples/PaginationSlotsExample.vue

diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index 0e4b50b..68e6f2c 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -5,10 +5,16 @@ import PaginationTableExample from './pagination/examples/PaginationTableExample
 import PaginationWithIconsExample from './pagination/examples/PaginationWithIconsExample.vue';
 import PaginationWithCustomTextExample from './pagination/examples/PaginationWithCustomTextExample.vue';
 import PaginationWithCustomSlice from './pagination/examples/PaginationWithCustomSlice.vue';
+import PaginationSlotsExample from './pagination/examples/PaginationSlotsExample.vue';
 </script>
 # Vue Pagination - Flowbite
+#### Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes
+The pagination component can be used to navigate across a series of content and data sets for various pages such as blog posts, products, and more. You can use multiple variants of this component with or without icons and even for paginating table data entries.
 
 ## Default pagination
+Use the following list of pagination items based on two sizes powered by Tailwind CSS utility classes to indicate a series of content for your website.
+
+<PaginationExample />
 
 ```vue
 <script setup>
@@ -18,10 +24,32 @@ import { ref } from 'vue'
 const currentPage = ref(1)
 </script>
 <template>
-  <Pagination v-model="currentPage" :total-pages="100"></Pagination>
+  <Pagination v-model="currentPage" :total-items="100"></Pagination>
+  <Pagination v-model="currentPage" :total-items="100" large></Pagination>
 </template>
 ```
-<PaginationExample />
+
+## Pagination with icons
+The following pagination component example shows how you can use SVG icons instead of text to show the previous and next pages.
+
+<PaginationWithIconsExample />
+
+```vue
+<script setup>
+import { Pagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <Pagination v-model="currentPage" :total-pages="100" show-icons></Pagination>
+</template>
+```
+
+
+
+
+
 
 ## Default with custom length
 You can use your own pages count in the row by passing props: `slice-length`
@@ -41,7 +69,7 @@ const currentPage = ref(1)
 
 <PaginationWithCustomSlice />
 
-## Pagination with navigation layout
+## Previous and next
 
 ```vue
 <script setup>
@@ -52,7 +80,7 @@ const currentPage = ref(1)
 </script>
 <template>
   <div class="flex items-center justify-center text-center">
-    <Pagination v-model="currentPage" :total-pages="100" :layout="'navigation'"></Pagination>
+    <Pagination v-model="currentPage" :total-pages="10" :layout="'navigation'"></Pagination>
   </div>
 </template>
 ```
@@ -75,34 +103,14 @@ const currentPage = ref(1)
 </script>
 <template>
   <div class="flex items-center justify-center text-center">
-    <Pagination
-        v-model="currentPage"
-        :layout="'table'"
-        :per-page="10"
-        :total-items="998"
-    ></Pagination>
+    <Pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" class="mb-2" />
+    <Pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" large />
   </div>
 </template>
 ```
 
 <PaginationTableExample />
 
-## Pagination with icons
-
-```vue
-<script setup>
-import { Pagination } from 'flowbite-vue'
-import { ref } from 'vue'
-
-const currentPage = ref(1)
-</script>
-<template>
-  <Pagination v-model="currentPage" :total-pages="100" show-icons></Pagination>
-</template>
-```
-
-<PaginationWithIconsExample />
-
 ## Pagination with custom labels
 
 ```vue
@@ -117,3 +125,69 @@ const currentPage = ref(1)
 </template>
 ```
 <PaginationWithCustomTextExample />
+
+
+## Slots example
+
+<PaginationSlotsExample />
+
+```vue
+<script setup>
+import { Pagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
+<template>
+  <Pagination v-model="currentPage" :total-items="100" :show-labels="false">
+    <template #prev-icon>⬅️</template>
+    <template #next-icon>➡️</template>
+    <template v-slot:page-button="{ page, setPage }">
+      <button
+          @click="setPage(page)"
+          class="flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 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"
+      >
+        {{ page }}
+      </button>
+    </template>
+  </Pagination>
+  Current page: {{ currentPage }}
+</template>
+```
+
+## API
+
+### Props
+| Name                      | Values                              | Default      |
+|---------------------------|-------------------------------------|--------------|
+| modelValue                | `number`                            | `1`          | 
+| totalPages                | `number`                            | `10`         |
+| perPage                   | `number`                            | `10`         |
+| totalItems                | `number`                            | `10`         |
+| layout                    | `pagination`, `table`, `navigation` | `pagination` |
+| showIcons                 | `boolean`                           | `false`      |
+| sliceLength               | `number`                            | `2`          |
+| previousLabel             | `string`                            | `Previous`   |
+| nextLabel                 | `string`                            | `Next`       |
+| enableFirstAndLastButtons | `boolean`                           | `false`      |
+| showLabels                | `boolean`                           | `true`       |
+| large                     | `boolean`                           | `false`      |
+
+### Events
+| Name                 | Description          |
+|----------------------|----------------------|
+| `update:model-value` | Current page changed |
+| `page-changed`       | Current page changed |
+
+### Slots
+| Name         | Description             |
+|--------------|-------------------------|
+| start        | content before buttons  |
+| end          | content after buttons   |
+| first-button | first button content    |
+| last-button  | last button content     |
+| prev-button  | previous button content |
+| next-button  | next button content     |
+| prev-icon    | previous icon slot      |
+| next-icon    | next icon slot          |
+| page-button  | page button slot        |
diff --git a/docs/components/pagination/examples/PaginationExample.vue b/docs/components/pagination/examples/PaginationExample.vue
index b1322db..a5a4b9d 100644
--- a/docs/components/pagination/examples/PaginationExample.vue
+++ b/docs/components/pagination/examples/PaginationExample.vue
@@ -1,6 +1,7 @@
 <template>
-  <div class="vp-raw">
-    <Pagination v-model="currentPage" :total-pages="100"></Pagination>
+  <div class="vp-raw flex flex-col items-center">
+    <Pagination v-model="currentPage" :total-items="100" class="mb-2"></Pagination>
+    <Pagination v-model="currentPage" :total-items="100" large></Pagination>
   </div>
 </template>
 <script lang="ts" setup>
diff --git a/docs/components/pagination/examples/PaginationNavigationExample.vue b/docs/components/pagination/examples/PaginationNavigationExample.vue
index 1f6e9b7..aadd1bf 100644
--- a/docs/components/pagination/examples/PaginationNavigationExample.vue
+++ b/docs/components/pagination/examples/PaginationNavigationExample.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw flex items-center justify-center text-center">
-    <Pagination v-model="currentPage" :total-pages="100" :layout="'navigation'"></Pagination>
+    <Pagination v-model="currentPage" :total-pages="10" :layout="'navigation'"></Pagination>
   </div>
 </template>
 <script lang="ts" setup>
diff --git a/docs/components/pagination/examples/PaginationSlotsExample.vue b/docs/components/pagination/examples/PaginationSlotsExample.vue
new file mode 100644
index 0000000..20fbc6f
--- /dev/null
+++ b/docs/components/pagination/examples/PaginationSlotsExample.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="vp-raw flex flex-col items-center">
+    <Pagination v-model="currentPage" :total-items="100" :show-labels="false">
+      <template #prev-icon>⬅️</template>
+      <template #next-icon>➡️</template>
+      <template v-slot:page-button="{ page, setPage }">
+        <button
+          @click="setPage(page)"
+          class="flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 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"
+        >
+          {{ page }}
+        </button>
+      </template>
+    </Pagination>
+    Current page: {{ currentPage }}
+  </div>
+</template>
+<script lang="ts" setup>
+import { Pagination } from '../../../../src/index'
+import { ref } from 'vue'
+
+const currentPage = ref<number>(1)
+</script>
diff --git a/docs/components/pagination/examples/PaginationTableExample.vue b/docs/components/pagination/examples/PaginationTableExample.vue
index 8a3105a..244de3e 100644
--- a/docs/components/pagination/examples/PaginationTableExample.vue
+++ b/docs/components/pagination/examples/PaginationTableExample.vue
@@ -1,11 +1,7 @@
 <template>
-  <div class="vp-raw flex items-center justify-center text-center">
-    <Pagination
-      v-model="currentPage"
-      :layout="'table'"
-      :per-page="10"
-      :total-items="998"
-    ></Pagination>
+  <div class="vp-raw flex flex-col items-center justify-center text-center">
+    <Pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" class="mb-2" />
+    <Pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" large />
   </div>
 </template>
 <script lang="ts" setup>
diff --git a/docs/components/pagination/examples/PaginationWithCustomSlice.vue b/docs/components/pagination/examples/PaginationWithCustomSlice.vue
index ce14e87..c2abdfc 100644
--- a/docs/components/pagination/examples/PaginationWithCustomSlice.vue
+++ b/docs/components/pagination/examples/PaginationWithCustomSlice.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vp-raw">
+  <div class="vp-raw flex items-center justify-center">
     <Pagination v-model="currentPage" :total-pages="100" :slice-length="4"></Pagination>
   </div>
 </template>
diff --git a/docs/components/pagination/examples/PaginationWithCustomTextExample.vue b/docs/components/pagination/examples/PaginationWithCustomTextExample.vue
index 2553685..f450695 100644
--- a/docs/components/pagination/examples/PaginationWithCustomTextExample.vue
+++ b/docs/components/pagination/examples/PaginationWithCustomTextExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vp-raw flex flex-col">
+  <div class="vp-raw flex flex-col items-center">
     <Pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></Pagination>
   </div>
 </template>
diff --git a/docs/components/pagination/examples/PaginationWithIconsExample.vue b/docs/components/pagination/examples/PaginationWithIconsExample.vue
index aaead23..8a1c035 100644
--- a/docs/components/pagination/examples/PaginationWithIconsExample.vue
+++ b/docs/components/pagination/examples/PaginationWithIconsExample.vue
@@ -1,6 +1,33 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Pagination v-model="currentPage" :total-pages="100" show-icons></Pagination>
+  <div class="vp-raw flex flex-col items-center">
+    <Pagination v-model="currentPage" :total-pages="100" :show-labels="false" class="mb-2">
+      <template #prev-icon>
+        <span class="sr-only">Previous</span>
+        <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
+        </svg>
+      </template>
+      <template #next-icon>
+        <span class="sr-only">Next</span>
+        <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
+        </svg>
+      </template>
+    </Pagination>
+    <Pagination v-model="currentPage" :total-pages="100" :show-labels="false" large>
+      <template #prev-icon>
+        <span class="sr-only">Previous</span>
+        <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
+        </svg>
+      </template>
+      <template #next-icon>
+        <span class="sr-only">Next</span>
+        <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
+        </svg>
+      </template>
+    </Pagination>
   </div>
 </template>
 <script lang="ts" setup>
diff --git a/src/components/Pagination/Pagination.vue b/src/components/Pagination/Pagination.vue
index 3c25526..076688a 100644
--- a/src/components/Pagination/Pagination.vue
+++ b/src/components/Pagination/Pagination.vue
@@ -1,6 +1,6 @@
 <template>
-  <nav aria-label="Page navigation example">
-    <div class="text-sm text-gray-700 dark:text-gray-400 mb-2" v-if="layout === 'table'">
+  <nav aria-label="Navigation">
+    <div class="text-gray-700 dark:text-gray-400 mb-2" :class="large ? 'text-base' : 'text-sm'" v-if="layout === 'table'">
       Showing
       <span class="font-semibold text-gray-900 dark:text-white">{{ startItemsCount }}</span>
       to
@@ -8,102 +8,146 @@
       of
       <span class="font-semibold text-gray-900 dark:text-white">{{ computedTotalItems }}</span>
     </div>
-    <ul class="inline-flex -space-x-px">
-      <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"
-        >
-          <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 }}
+    <div class="inline-flex" :class="large && 'text-base h-10'">
+      <slot name="start" />
+
+      <slot name="first-button" v-if="enableFirstAndLastButtons">
+        <button :disabled="isFirstPage" @click="goToFirstPage" :class="getNavigationButtonClasses(1)">First</button>
+      </slot>
+
+      <slot name="prev-button" :disabled="isDecreaseDisabled" :decrease-page="decreasePage">
+        <button :disabled="isDecreaseDisabled" @click="decreasePage" :class="getNavigationButtonClasses(modelValue - 1)">
+          <slot name="prev-icon">
+            <svg
+              v-if="showIcons || $slots['prev-icon']"
+              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>
+          </slot>
+          <template v-if="showLabels">{{ previousLabel }}</template>
         </button>
-      </li>
-      <li
-        v-for="index in pagesToDisplay"
-        :key="index"
-      >
-        <button
-            :disabled="isSetPageDisabled(index)"
-            @click="setPage(index)"
-            class="w-12 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"
-            :class="{'text-blue-600 dark:text-white bg-blue-50 dark:bg-gray-700': index === modelValue}"
-        >
+      </slot>
+      <slot v-for="index in pagesToDisplay" :key="index" name="page-button" :page="index" :set-page="setPage" :disabled="isSetPageDisabled(index)">
+        <button :disabled="isSetPageDisabled(index)" @click="setPage(index)" :class="getPageButtonClasses(index === modelValue)">
           {{ index }}
         </button>
-      </li>
-      <li>
-        <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"
-        >
-          {{ 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>
+      </slot>
+      <slot name="next-button" :disabled="isIncreaseDisabled" :increase-page="increasePage">
+        <button :disabled="isIncreaseDisabled" @click="increasePage" :class="getNavigationButtonClasses(modelValue + 1)">
+          <template v-if="showLabels">
+            {{ nextLabel }}
+          </template>
+          <slot name="next-icon">
+            <svg
+              v-if="showIcons || $slots['next-icon']"
+              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>
+          </slot>
         </button>
-      </li>
-    </ul>
+      </slot>
+
+      <slot name="last-button" v-if="enableFirstAndLastButtons">
+        <button :disabled="isLastPage" @click="goToLastPage" :class="getNavigationButtonClasses(computedTotalPages)">Last</button>
+      </slot>
+
+      <slot name="end" />
+    </div>
   </nav>
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue'
-import type { PropType } from 'vue'
 import type { PaginationLayout } from '@/components/Pagination/types'
+import { twMerge } from 'tailwind-merge'
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  'update:model-value': [page: number]
+  'page-changed': [page: number]
+}>()
+interface IPaginationProps {
+  modelValue?: number
+  totalPages?: number
+  perPage?: number
+  totalItems?: number
+  layout?: PaginationLayout
+  showIcons?: boolean
+  sliceLength?: number
+  previousLabel?: string
+  nextLabel?: string
+  enableFirstAndLastButtons?: boolean
+  showLabels?: boolean
+  large?: boolean
+}
 
-const props = defineProps({
-  modelValue: {
-    type: Number,
-    default: 1,
-  },
-  totalPages: {
-    type: Number,
-    default: 1,
-  },
-  perPage: {
-    type: Number,
-    default: 10,
-  },
-  totalItems: {
-    type: Number,
-    required: false,
-  },
-  layout: {
-    type: String as PropType<PaginationLayout>, // 'navigation' | 'pagination' | 'table'
-    default: 'pagination',
-  },
-  showIcons: {
-    type: Boolean,
-    default: false,
-  },
-  sliceLength: {
-    type: Number,
-    default: 2,
-  },
-  previousLabel: {
-    type: String,
-    default: 'Previous',
-  },
-  nextLabel: {
-    type: String,
-    default: 'Next',
-  },
+const props = withDefaults(defineProps<IPaginationProps>(), {
+  modelValue: 1,
+  totalPages: undefined,
+  perPage: 10,
+  totalItems: 10,
+  layout: 'pagination',
+  showIcons: false,
+  sliceLength: 2,
+  previousLabel: 'Prev',
+  nextLabel: 'Next',
+  enableFirstAndLastButtons: false,
+  showLabels: true,
+  large: false,
 })
-
-const setPage = (index: number) => {
-  emit('update:modelValue', index)
+defineSlots<{
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  start: any
+  'first-button': any
+  'prev-button': any
+  'prev-icon': any
+  'page-button': any
+  'next-button': any
+  'next-icon': any
+  'last-button': any
+  end: any
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+}>()
+function setPage(index: number) {
+  emit('update:model-value', index)
+  emit('page-changed', index)
 }
-const decreasePage = () => {
-  emit('update:modelValue', props.modelValue - 1)
+function decreasePage() {
+  emit('update:model-value', props.modelValue - 1)
+  emit('page-changed', props.modelValue - 1)
 }
-const increasePage = () => {
-  emit('update:modelValue', props.modelValue + 1)
+function increasePage() {
+  emit('update:model-value', props.modelValue + 1)
+  emit('page-changed', props.modelValue + 1)
+}
+function goToFirstPage() {
+  emit('update:model-value', 1)
+  emit('page-changed', 1)
+}
+function goToLastPage() {
+  const lastPage = computedTotalPages.value
+  emit('update:model-value', lastPage)
+  emit('page-changed', lastPage)
 }
 
 const computedTotalPages = computed(() => {
-  if (!props.totalItems) return props.totalPages
-  if (!props.perPage) return props.totalPages
+  if (props.totalPages) return props.totalPages
   return Math.ceil(props.totalItems / props.perPage)
 })
 
@@ -147,7 +191,6 @@ const pagesToDisplay = computed(() => {
   return pages
 })
 
-
 const startItemsCount = computed(() => props.modelValue * props.perPage - props.perPage + 1)
 const endItemsCount = computed(() => {
   const count = props.modelValue * props.perPage + 1
@@ -159,4 +202,32 @@ 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)
+
+function getPageButtonClasses(active: boolean) {
+  const baseClasses =
+    'flex items-center justify-center px-3 h-8 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'
+  const activeClasses = 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:bg-gray-700 dark:text-white'
+  const largeClasses = 'px-4 h-10'
+  return twMerge(baseClasses, active && activeClasses, props.large && largeClasses)
+}
+function getNavigationButtonClasses(toPage: number) {
+  const baseClasses =
+    'flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 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'
+  const disabledClasses = 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-white cursor-not-allowed'
+  const largeClasses = 'px-4 h-10'
+  const tableClasses =
+    'border-none text-white hover:text-white bg-gray-800 rounded-none first:rounded-l last:rounded-r hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
+  return twMerge(
+    baseClasses,
+    toPage === props.modelValue && disabledClasses,
+    props.large && largeClasses,
+    (toPage > computedTotalPages.value || toPage < 1) && disabledClasses,
+    props.layout === 'navigation' && 'first:mr-3',
+    (props.layout === 'navigation' || props.layout === 'table') && 'rounded-lg',
+    props.layout === 'table' && tableClasses,
+  )
+}
 </script>