jws-frontend/src/components/PaginationComponent.vue

<script setup lang="ts">
const currentPage = defineModel<number>('currentPage', { default: 1 });
const maxPage = defineModel<number>('maxPage', { default: 1 });

withDefaults(
  defineProps<{
    fetchData?: (...args: unknown[]) => void;
  }>(),
  {},
);
</script>

<template>
  <q-pagination
    v-model="currentPage"
    text-color="primary"
    :max="maxPage"
    direction-links
    active-color="grey-8"
    active-design="outline"
    gutter="sm"
    boundary-numbers
    :max-pages="4"
    @update:model-value="fetchData"
  />
</template>

<style scoped></style>