feat: added basic pagination

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>

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>
+        <button
-      </li>
+          :disabled="isIncreaseDisabled"
-      <li>
+          @click="increasePage"
-        <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>
+          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"
-      </li>
+        >
-      <li>
+          Next
-        <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>
+        </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">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>
       </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>

src/components/Pagination/types.ts

@@ -0,0 +1 @@
+export type PaginationLayout = 'navigation' | 'pagination' | 'table'