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] 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,