51 lines
936 B
Vue
51 lines
936 B
Vue
<script setup lang="ts">
|
|
import { useBreakpoints } from "shared/composables/breakpoints"
|
|
|
|
interface Props {
|
|
total: number
|
|
limit: number
|
|
page: number
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
limit: 10,
|
|
page: 1,
|
|
})
|
|
|
|
const emit = defineEmits(["update:limit", "update:page"])
|
|
|
|
const route = useRoute()
|
|
|
|
const { isDesktop } = useBreakpoints()
|
|
|
|
const limit = ref(props.limit)
|
|
const page = ref(props.page)
|
|
const sizes = [10, 30, 50]
|
|
|
|
watch(limit, () => emit("update:limit", limit))
|
|
watch(page, () => emit("update:page", page))
|
|
</script>
|
|
|
|
<template>
|
|
<n-pagination
|
|
v-if="props.total"
|
|
class="right margin"
|
|
:item-count="props.total"
|
|
v-model:page="page"
|
|
v-model:page-size="limit"
|
|
:page-sizes="sizes"
|
|
:page-slot="isDesktop ? 7 : 5"
|
|
show-size-picker
|
|
/>
|
|
</template>
|
|
<style scoped>
|
|
.margin {
|
|
margin: 20px 0;
|
|
}
|
|
.right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
width: 100%;
|
|
}
|
|
</style>
|