From 1f5da4be9261ba5a23c0de6bcfd015aeba86d3ee Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Wed, 21 Dec 2022 20:42:49 +0400
Subject: [PATCH 1/4] feat: added basic pagination

---
 .../pagination/examples/PaginationExample.vue |  7 +-
 src/components/Pagination/Pagination.vue      | 87 ++++++++++++++-----
 src/components/Pagination/types.ts            |  1 +
 3 files changed, 71 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Pagination/types.ts

diff --git a/docs/components/pagination/examples/PaginationExample.vue b/docs/components/pagination/examples/PaginationExample.vue
index 548b3f3..a559591 100644
--- a/docs/components/pagination/examples/PaginationExample.vue
+++ b/docs/components/pagination/examples/PaginationExample.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Pagination></Pagination>
+    <Pagination v-model="currentPage" :total-pages="10"></Pagination>
   </div>
 </template>
-<script setup>
+<script lang="ts" setup>
 import { Pagination } from '../../../../src/index'
+import { ref } from 'vue'
+
+const currentPage = ref<number>(1)
 </script>
diff --git a/src/components/Pagination/Pagination.vue b/src/components/Pagination/Pagination.vue
index 6df6137..863b4fd 100644
--- a/src/components/Pagination/Pagination.vue
+++ b/src/components/Pagination/Pagination.vue
@@ -2,50 +2,93 @@
   <nav aria-label="Page navigation example">
     <ul class="inline-flex -space-x-px">
       <li>
-        <a href="#" class="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">Previous</a>
+        <button
+          :disabled="isDecreaseDisabled"
+          @click="decreasePage"
+          class="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"
+        >
+          Previous
+        </button>
+      </li>
+      <li
+        v-for="index in filteredPages"
+        :key="index"
+      >
+        <button
+            :disabled="isSetPageDisabled(index)"
+            @click="setPage(index)"
+            class="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}"
+        >
+          {{ index }}
+        </button>
       </li>
       <li>
-        <a href="#" class="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">1</a>
-      </li>
-      <li>
-        <a href="#" class="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">2</a>
-      </li>
-      <li>
-        <a href="#" aria-current="page" class="py-2 px-3 text-blue-600 bg-blue-50 border border-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
-      </li>
-      <li>
-        <a href="#" class="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">4</a>
-      </li>
-      <li>
-        <a href="#" class="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">5</a>
-      </li>
-      <li>
-        <a href="#" class="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">Next</a>
+        <button
+          :disabled="isIncreaseDisabled"
+          @click="increasePage"
+          class="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"
+        >
+          Next
+        </button>
       </li>
     </ul>
   </nav>
 </template>
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
+import { computed } from 'vue'
 import type { PropType } from 'vue'
+import type { PaginationLayout } from '@/components/Pagination/types'
+
+const emit = defineEmits(['update:modelValue'])
 
 const props = defineProps({
-  currentPage: {
+  modelValue: {
     type: Number,
     default: 1,
   },
+  totalPages: {
+    type: Number,
+    default: 10,
+  },
   layout: {
-    type: String, // 'navigation' | 'pagination' | 'table'
+    type: String as PropType<PaginationLayout>, // 'navigation' | 'pagination' | 'table'
     default: 'pagination',
   },
   showIcons: {
     type: Boolean,
     default: false,
   },
-  totalPages: {
+  sliceLength: {
     type: Number,
-    default: 1,
+    default: 3,
   },
 })
 
+
+const setPage = (index: number) => {
+  emit('update:modelValue', index)
+}
+const decreasePage = () => {
+  emit('update:modelValue', props.modelValue - 1)
+}
+const increasePage = () => {
+  emit('update:modelValue', props.modelValue + 1)
+}
+
+const isDecreaseDisabled = computed(() => props.modelValue <= 1)
+const isIncreaseDisabled = computed(() => props.modelValue >= props.totalPages)
+const isSetPageDisabled = (index: number) => index === props.modelValue
+
+const filteredPages = computed(() => {
+  if (props.modelValue <= props.sliceLength) return [...Array(Math.abs(props.modelValue - props.sliceLength) + props.modelValue + props.sliceLength + 1).keys()].map(num => num + 1)
+
+  const pages = []
+
+  let startedPage = props.modelValue - props.sliceLength > 0 ? props.modelValue - props.sliceLength : 1
+  for (let page = startedPage; page < props.modelValue + props.sliceLength + 1; page++) {
+    pages.push(page)
+  }
+  return pages
+})
 </script>
diff --git a/src/components/Pagination/types.ts b/src/components/Pagination/types.ts
new file mode 100644
index 0000000..15bf6b6
--- /dev/null
+++ b/src/components/Pagination/types.ts
@@ -0,0 +1 @@
+export type PaginationLayout = 'navigation' | 'pagination' | 'table'

From e3ac782c1b7fee8e7d95aebefe5ad7978d8bb5f7 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Fri, 23 Dec 2022 16:54:30 +0400
Subject: [PATCH 2/4] feat: added table layout

---
 docs/components/pagination.md                 | 32 ++++++-
 .../pagination/examples/PaginationExample.vue |  2 +-
 .../examples/PaginationNavigationExample.vue  | 11 +++
 .../examples/PaginationTableExample.vue       | 16 ++++
 src/components/Pagination/Pagination.vue      | 84 +++++++++++++++++--
 5 files changed, 134 insertions(+), 11 deletions(-)
 create mode 100644 docs/components/pagination/examples/PaginationNavigationExample.vue
 create mode 100644 docs/components/pagination/examples/PaginationTableExample.vue

diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index c4388f2..989472a 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -1,8 +1,12 @@
 <script setup>
-import PaginationExample from './pagination/examples/PaginationExample.vue'
+import PaginationExample from './pagination/examples/PaginationExample.vue';
+import PaginationNavigationExample from './pagination/examples/PaginationNavigationExample.vue';
+import PaginationTableExample from './pagination/examples/PaginationTableExample.vue';
 </script>
 # Vue Pagination Component - Flowbite
 
+## Default pagination
+
 ```vue
 <script setup>
 import { Pagination } from 'flowbite-vue'
@@ -13,3 +17,29 @@ import { Pagination } from 'flowbite-vue'
 ```
 
 <PaginationExample />
+
+## Pagination with navigation layout
+
+```vue
+<script setup>
+import { Pagination } from 'flowbite-vue'
+</script>
+<template>
+  <Pagination layout="navigation"></Pagination>
+</template>
+```
+
+<PaginationNavigationExample />
+
+## Pagination with table layout
+
+```vue
+<script setup>
+import { Pagination } from 'flowbite-vue'
+</script>
+<template>
+  <Pagination layout="table"></Pagination>
+</template>
+```
+
+<PaginationTableExample />
diff --git a/docs/components/pagination/examples/PaginationExample.vue b/docs/components/pagination/examples/PaginationExample.vue
index a559591..845de13 100644
--- a/docs/components/pagination/examples/PaginationExample.vue
+++ b/docs/components/pagination/examples/PaginationExample.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Pagination v-model="currentPage" :total-pages="10"></Pagination>
+    <Pagination v-model="currentPage" :total-pages="100"></Pagination>
   </div>
 </template>
 <script lang="ts" setup>
diff --git a/docs/components/pagination/examples/PaginationNavigationExample.vue b/docs/components/pagination/examples/PaginationNavigationExample.vue
new file mode 100644
index 0000000..1f6e9b7
--- /dev/null
+++ b/docs/components/pagination/examples/PaginationNavigationExample.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="vp-raw flex items-center justify-center text-center">
+    <Pagination v-model="currentPage" :total-pages="100" :layout="'navigation'"></Pagination>
+  </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
new file mode 100644
index 0000000..5660d0b
--- /dev/null
+++ b/docs/components/pagination/examples/PaginationTableExample.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="vp-raw flex items-center justify-center text-center">
+    <Pagination
+      v-model="currentPage"
+      :total-pages="100"
+      :layout="'table'"
+      :total-items="998"
+    ></Pagination>
+  </div>
+</template>
+<script lang="ts" setup>
+import { Pagination } from '../../../../src/index'
+import { ref } from 'vue'
+
+const currentPage = ref<number>(1)
+</script>
diff --git a/src/components/Pagination/Pagination.vue b/src/components/Pagination/Pagination.vue
index 863b4fd..42f59a9 100644
--- a/src/components/Pagination/Pagination.vue
+++ b/src/components/Pagination/Pagination.vue
@@ -1,5 +1,13 @@
 <template>
   <nav aria-label="Page navigation example">
+    <div class="text-sm text-gray-700 dark:text-gray-400 mb-2" v-if="layout === 'table'">
+      Showing
+      <span class="font-semibold text-gray-900 dark:text-white">{{ startItemsCount }}</span>
+      to
+      <span class="font-semibold text-gray-900 dark:text-white">{{ endItemsCount }}</span>
+      of
+      <span class="font-semibold text-gray-900 dark:text-white">{{ computedTotalItems }}</span>
+    </div>
     <ul class="inline-flex -space-x-px">
       <li>
         <button
@@ -7,17 +15,17 @@
           @click="decreasePage"
           class="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"
         >
-          Previous
+          {{ previousLabel }}
         </button>
       </li>
       <li
-        v-for="index in filteredPages"
+        v-for="index in pagesToDisplay"
         :key="index"
       >
         <button
             :disabled="isSetPageDisabled(index)"
             @click="setPage(index)"
-            class="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="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}"
         >
           {{ index }}
@@ -29,7 +37,7 @@
           @click="increasePage"
           class="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"
         >
-          Next
+          {{ nextLabel }}
         </button>
       </li>
     </ul>
@@ -48,9 +56,17 @@ const props = defineProps({
     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',
@@ -63,9 +79,16 @@ const props = defineProps({
     type: Number,
     default: 3,
   },
+  previousLabel: {
+    type: String,
+    default: 'Previous',
+  },
+  nextLabel: {
+    type: String,
+    default: 'Next',
+  },
 })
 
-
 const setPage = (index: number) => {
   emit('update:modelValue', index)
 }
@@ -76,19 +99,62 @@ const increasePage = () => {
   emit('update:modelValue', props.modelValue + 1)
 }
 
+const computedTotalPages = computed(() => {
+  if (!props.totalItems) return props.totalPages
+  if (!props.perPage) return props.totalPages
+  return Math.ceil(props.totalItems / props.perPage)
+})
+
 const isDecreaseDisabled = computed(() => props.modelValue <= 1)
-const isIncreaseDisabled = computed(() => props.modelValue >= props.totalPages)
+const isIncreaseDisabled = computed(() => props.modelValue >= computedTotalPages.value)
 const isSetPageDisabled = (index: number) => index === props.modelValue
 
-const filteredPages = computed(() => {
-  if (props.modelValue <= props.sliceLength) return [...Array(Math.abs(props.modelValue - props.sliceLength) + props.modelValue + props.sliceLength + 1).keys()].map(num => num + 1)
+const pagesToDisplay = computed(() => {
+  if (props.layout === 'navigation') return []
+  if (props.layout === 'table') return []
+
+  if (computedTotalPages.value <= props.sliceLength * 2 + 1) {
+    const pages = []
+    for (let page = 1; page <= computedTotalPages.value; page++) {
+      pages.push(page)
+    }
+    return pages
+  }
+  if (props.modelValue <= props.sliceLength) {
+    const pages = []
+    const slicedLength = Math.abs(props.modelValue - props.sliceLength) + props.modelValue + props.sliceLength + 1
+    for (let page = 1; page <= slicedLength; page++) {
+      pages.push(page)
+    }
+    return pages
+  }
+  if (props.modelValue >= computedTotalPages.value - props.sliceLength) {
+    const pages = []
+    for (let page = Math.abs(computedTotalPages.value - props.sliceLength * 2); page <= computedTotalPages.value; page++) {
+      pages.push(page)
+    }
+    return pages
+  }
 
   const pages = []
-
   let startedPage = props.modelValue - props.sliceLength > 0 ? props.modelValue - props.sliceLength : 1
   for (let page = startedPage; page < props.modelValue + props.sliceLength + 1; page++) {
+    if (page >= computedTotalPages.value) break
     pages.push(page)
   }
   return pages
 })
+
+
+const startItemsCount = computed(() => props.modelValue * props.perPage - props.perPage + 1)
+const endItemsCount = computed(() => {
+  const count = props.modelValue * props.perPage + 1
+  if (!props.totalItems) return count
+  if (count > props.totalItems) return props.totalItems
+  return count
+})
+const computedTotalItems = computed(() => {
+  if (props.totalItems) return props.totalItems
+  return computedTotalPages.value * props.perPage
+})
 </script>

From 64d629133c7b309e0efed095ec751a4047e6af07 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Fri, 23 Dec 2022 17:03:26 +0400
Subject: [PATCH 3/4] feat: added icons and custom text

---
 docs/components/pagination.md                 | 28 ++++++++++++++++++-
 .../PaginationWithCustomTextExample.vue       | 11 ++++++++
 .../examples/PaginationWithIconsExample.vue   | 11 ++++++++
 src/components/Pagination/Pagination.vue      |  6 ++--
 4 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 docs/components/pagination/examples/PaginationWithCustomTextExample.vue
 create mode 100644 docs/components/pagination/examples/PaginationWithIconsExample.vue

diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index 989472a..cdeea44 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -2,6 +2,8 @@
 import PaginationExample from './pagination/examples/PaginationExample.vue';
 import PaginationNavigationExample from './pagination/examples/PaginationNavigationExample.vue';
 import PaginationTableExample from './pagination/examples/PaginationTableExample.vue';
+import PaginationWithIconsExample from './pagination/examples/PaginationWithIconsExample.vue';
+import PaginationWithCustomTextExample from './pagination/examples/PaginationWithCustomTextExample.vue';
 </script>
 # Vue Pagination Component - Flowbite
 
@@ -42,4 +44,28 @@ import { Pagination } from 'flowbite-vue'
 </template>
 ```
 
-<PaginationTableExample />
+<PaginationWithIconsExample />
+
+## Pagination with icons
+
+```vue
+<script setup>
+import { Pagination } from 'flowbite-vue'
+</script>
+<template>
+  <Pagination></Pagination>
+</template>
+```
+
+<PaginationWithCustomTextExample />
+
+## Pagination with custom labels
+
+```vue
+<script setup>
+import { Pagination } from 'flowbite-vue'
+</script>
+<template>
+  <Pagination></Pagination>
+</template>
+```
diff --git a/docs/components/pagination/examples/PaginationWithCustomTextExample.vue b/docs/components/pagination/examples/PaginationWithCustomTextExample.vue
new file mode 100644
index 0000000..2553685
--- /dev/null
+++ b/docs/components/pagination/examples/PaginationWithCustomTextExample.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></Pagination>
+  </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/PaginationWithIconsExample.vue b/docs/components/pagination/examples/PaginationWithIconsExample.vue
new file mode 100644
index 0000000..aaead23
--- /dev/null
+++ b/docs/components/pagination/examples/PaginationWithIconsExample.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Pagination v-model="currentPage" :total-pages="100" show-icons></Pagination>
+  </div>
+</template>
+<script lang="ts" setup>
+import { Pagination } from '../../../../src/index'
+import { ref } from 'vue'
+
+const currentPage = ref<number>(1)
+</script>
diff --git a/src/components/Pagination/Pagination.vue b/src/components/Pagination/Pagination.vue
index 42f59a9..6c1158a 100644
--- a/src/components/Pagination/Pagination.vue
+++ b/src/components/Pagination/Pagination.vue
@@ -13,8 +13,9 @@
         <button
           :disabled="isDecreaseDisabled"
           @click="decreasePage"
-          class="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 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 }}
         </button>
       </li>
@@ -35,9 +36,10 @@
         <button
           :disabled="isIncreaseDisabled"
           @click="increasePage"
-          class="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 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>
         </button>
       </li>
     </ul>

From 6580c65be3c4e7cd5db582620846e078fab5335b Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Fri, 23 Dec 2022 17:25:45 +0400
Subject: [PATCH 4/4] doc: updated doc

---
 docs/.vitepress/config.ts                     |  2 +-
 docs/components/pagination.md                 | 64 ++++++++++++++++---
 .../pagination/examples/PaginationExample.vue |  2 +-
 .../examples/PaginationTableExample.vue       |  2 +-
 .../examples/PaginationWithCustomSlice.vue    | 11 ++++
 src/components/Pagination/Pagination.vue      |  2 +-
 6 files changed, 71 insertions(+), 12 deletions(-)
 create mode 100644 docs/components/pagination/examples/PaginationWithCustomSlice.vue

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index fe1830a..649fdf6 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -44,6 +44,7 @@ function getComponents() {
     { text: 'Card', link: 'components/card.md' },
     { text: 'Carousel', link: 'components/carousel' },
     { text: 'Dropdown', link: '/components/dropdown' },
+    { text: 'Pagination', link: 'components/pagination' },
     { text: 'Progress', link: 'components/progress' },
     { text: 'Rating', link: 'components/rating' },
     { text: 'Spinner', link: '/components/spinner' },
@@ -57,7 +58,6 @@ function getComponents() {
     { text: 'Navbar', link: 'components/navbar' },
 
     { text: '- Footer', link: 'components/footer' },
-    { text: '- Pagination', link: 'components/pagination' },
     { text: '- Sidebar', link: 'components/sidebar' },
   ]
 }
diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index cdeea44..f752709 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -4,6 +4,7 @@ import PaginationNavigationExample from './pagination/examples/PaginationNavigat
 import PaginationTableExample from './pagination/examples/PaginationTableExample.vue';
 import PaginationWithIconsExample from './pagination/examples/PaginationWithIconsExample.vue';
 import PaginationWithCustomTextExample from './pagination/examples/PaginationWithCustomTextExample.vue';
+import PaginationWithCustomSlice from './pagination/examples/PaginationWithCustomSlice.vue';
 </script>
 # Vue Pagination Component - Flowbite
 
@@ -12,60 +13,107 @@ import PaginationWithCustomTextExample from './pagination/examples/PaginationWit
 ```vue
 <script setup>
 import { Pagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
 </script>
 <template>
-  <Pagination></Pagination>
+  <Pagination v-model="currentPage" :total-pages="100"></Pagination>
+</template>
+```
+<PaginationExample />
+
+## Default with custom length
+You can use your own pages count in the row by passing props: `slice-length`
+This prop means left side and right side pages row slicing. In the example it has value `4`. So row length will be 4 + 1 + 4 pages - 9 pages.
+
+```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" :slice-length="4"></Pagination>
 </template>
 ```
 
-<PaginationExample />
+<PaginationWithCustomSlice />
 
 ## Pagination with navigation layout
 
 ```vue
 <script setup>
 import { Pagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
 </script>
 <template>
-  <Pagination layout="navigation"></Pagination>
+  <div class="flex items-center justify-center text-center">
+    <Pagination v-model="currentPage" :total-pages="100" :layout="'navigation'"></Pagination>
+  </div>
 </template>
 ```
 
 <PaginationNavigationExample />
 
 ## Pagination with table layout
+To use that layout you have to pass required props: 
+- `per-page`: it's items count displayed on each page.
+- `total-items`: it's the total items count.
+
+And there you don't need to use `total-pages` prop.
 
 ```vue
 <script setup>
 import { Pagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
 </script>
 <template>
-  <Pagination layout="table"></Pagination>
+  <div class="flex items-center justify-center text-center">
+    <Pagination
+        v-model="currentPage"
+        :layout="'table'"
+        :per-page="10"
+        :total-items="998"
+    ></Pagination>
+  </div>
 </template>
 ```
 
-<PaginationWithIconsExample />
+<PaginationTableExample />
 
 ## Pagination with icons
 
 ```vue
 <script setup>
 import { Pagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
 </script>
 <template>
-  <Pagination></Pagination>
+  <Pagination v-model="currentPage" :total-pages="100" show-icons></Pagination>
 </template>
 ```
 
-<PaginationWithCustomTextExample />
+<PaginationWithIconsExample />
 
 ## Pagination with custom labels
 
 ```vue
 <script setup>
 import { Pagination } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const currentPage = ref(1)
 </script>
 <template>
-  <Pagination></Pagination>
+  <Pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></Pagination>
 </template>
 ```
+<PaginationWithCustomTextExample />
diff --git a/docs/components/pagination/examples/PaginationExample.vue b/docs/components/pagination/examples/PaginationExample.vue
index 845de13..b1322db 100644
--- a/docs/components/pagination/examples/PaginationExample.vue
+++ b/docs/components/pagination/examples/PaginationExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vp-raw flex flex-col">
+  <div class="vp-raw">
     <Pagination v-model="currentPage" :total-pages="100"></Pagination>
   </div>
 </template>
diff --git a/docs/components/pagination/examples/PaginationTableExample.vue b/docs/components/pagination/examples/PaginationTableExample.vue
index 5660d0b..8a3105a 100644
--- a/docs/components/pagination/examples/PaginationTableExample.vue
+++ b/docs/components/pagination/examples/PaginationTableExample.vue
@@ -2,8 +2,8 @@
   <div class="vp-raw flex items-center justify-center text-center">
     <Pagination
       v-model="currentPage"
-      :total-pages="100"
       :layout="'table'"
+      :per-page="10"
       :total-items="998"
     ></Pagination>
   </div>
diff --git a/docs/components/pagination/examples/PaginationWithCustomSlice.vue b/docs/components/pagination/examples/PaginationWithCustomSlice.vue
new file mode 100644
index 0000000..ce14e87
--- /dev/null
+++ b/docs/components/pagination/examples/PaginationWithCustomSlice.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="vp-raw">
+    <Pagination v-model="currentPage" :total-pages="100" :slice-length="4"></Pagination>
+  </div>
+</template>
+<script lang="ts" setup>
+import { Pagination } from '../../../../src/index'
+import { ref } from 'vue'
+
+const currentPage = ref<number>(1)
+</script>
diff --git a/src/components/Pagination/Pagination.vue b/src/components/Pagination/Pagination.vue
index 6c1158a..3c25526 100644
--- a/src/components/Pagination/Pagination.vue
+++ b/src/components/Pagination/Pagination.vue
@@ -79,7 +79,7 @@ const props = defineProps({
   },
   sliceLength: {
     type: Number,
-    default: 3,
+    default: 2,
   },
   previousLabel: {
     type: String,