57 lines
1.7 KiB
Vue
57 lines
1.7 KiB
Vue
<script setup>
|
|
import {Link} from "@inertiajs/inertia-vue3";
|
|
const props = defineProps([
|
|
'currentPage',
|
|
'lastPage',
|
|
'total',
|
|
'perPage',
|
|
'links',
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<section class="pagination" v-if="lastPage > 1">
|
|
<template v-for="(link , index) in links" :key="index">
|
|
<div class="paginate" v-if="link.label == 'قبلی'">
|
|
<Link v-if="link.url" :href="link.url">
|
|
<i class="fi fi-rr-angle-small-right flex text-xl"></i>
|
|
</Link>
|
|
</div>
|
|
<div class="paginate" v-else-if="link.label == 'بعدی'">
|
|
<Link v-if="link.url" :href="link.url">
|
|
<i class="fi fi-rr-angle-small-left flex text-xl"></i>
|
|
</Link>
|
|
</div>
|
|
<div class="paginate flex items-center" :class="{'!text-white !bg-client-primary' : currentPage == link.label }" v-else>
|
|
<Link v-if="link.url" :href="link.url" class="flex pt-1">{{link.label}}</Link>
|
|
<Link v-else href="" class="flex">{{link.label}}</Link>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="postcss">
|
|
section.pagination{
|
|
padding: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
section.pagination div.paginate:first-child a{
|
|
border-top-right-radius: .4rem;
|
|
border-bottom-right-radius: .4rem;
|
|
}
|
|
section.pagination div.paginate:last-child a{
|
|
border-top-left-radius: .4rem;
|
|
border-bottom-left-radius: .4rem;
|
|
}
|
|
section.pagination div.paginate a{
|
|
display: flex;
|
|
height: 2.2rem;
|
|
width: 2.2rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #e6e6e6;
|
|
@apply text-client-Fontcolor
|
|
}
|
|
</style>
|