AzuTear
39 lines
1.4 KiB
Vue
39 lines
1.4 KiB
Vue
<template>
|
||
<div v-if="filteredCount > 0" class="flex items-center justify-between gap-4 border-t border-violet-100 px-6 py-4 text-sm text-slate-500">
|
||
<span><strong class="text-violet-800">{{ rangeStart }}–{{ rangeEnd }}</strong> von {{ filteredCount }}</span>
|
||
<div class="flex items-center gap-2">
|
||
<button
|
||
class="grid h-9 w-9 place-items-center rounded-full border border-violet-200 text-violet-600 transition hover:bg-violet-50 disabled:opacity-40 disabled:hover:bg-transparent"
|
||
:disabled="page <= 1"
|
||
@click="$emit('update:page', page - 1)"
|
||
>
|
||
<ChevronLeft class="h-4 w-4" />
|
||
</button>
|
||
<span class="min-w-[72px] text-center font-semibold text-slate-700">Seite {{ page }}/{{ totalPages }}</span>
|
||
<button
|
||
class="grid h-9 w-9 place-items-center rounded-full border border-violet-200 text-violet-600 transition hover:bg-violet-50 disabled:opacity-40 disabled:hover:bg-transparent"
|
||
:disabled="page >= totalPages"
|
||
@click="$emit('update:page', page + 1)"
|
||
>
|
||
<ChevronRight class="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ChevronLeft, ChevronRight } from '@lucide/vue'
|
||
|
||
defineProps<{
|
||
page: number
|
||
totalPages: number
|
||
rangeStart: number
|
||
rangeEnd: number
|
||
filteredCount: number
|
||
}>()
|
||
|
||
defineEmits<{
|
||
'update:page': [page: number]
|
||
}>()
|
||
</script>
|