Initial commit

resources/js/@core/components/TablePagination.vue

@@ -0,0 +1,42 @@
+<script setup>
+const props = defineProps({
+  page: {
+    type: Number,
+    required: true,
+  },
+  itemsPerPage: {
+    type: Number,
+    required: true,
+  },
+  totalItems: {
+    type: Number,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:page'])
+
+const updatePage = value => {
+  emit('update:page', value)
+}
+</script>
+
+<template>
+  <div>
+    <VDivider />
+
+    <div class="d-flex align-center justify-sm-space-between justify-center flex-wrap gap-3 px-6 py-3">
+      <p class="text-disabled mb-0">
+        {{ paginationMeta({ page, itemsPerPage }, totalItems) }}
+      </p>
+
+      <VPagination
+        :model-value="page"
+        active-color="primary"
+        :length="Math.ceil(totalItems / itemsPerPage)"
+        :total-visible="$vuetify.display.xs ? 1 : Math.min(Math.ceil(totalItems / itemsPerPage), 5)"
+        @update:model-value="updatePage"
+      />
+    </div>
+  </div>
+</template>