<template>
  <div class="kole-pagination kole-pagination-pager" aria-label="分页"><button class="kole-pagination-page" type="button" @click="change(Math.max(1, props.page - 1))">上一页</button><button class="kole-pagination-page is-current" type="button">{{ props.page }}</button><button class="kole-pagination-page" type="button" @click="change(props.page + 1)">下一页</button><span class="kole-pagination-desc">共 {{ props.total }} 条 · 每页 {{ props.pageSize }} 条</span></div>
</template>

<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
    total: { type: Number, default: 128 }, // 总数
    page: { type: Number, default: 1 }, // 当前页码
    pageSize: { type: Number, default: 10 }, // 每页条数
    size: { type: String, default: 'default' }, // 尺寸
});
const emit = defineEmits(["pagechange", "sizechange"]);

function change(value) { emit('update:modelValue', value); emit('change', value); emit('pagechange', value); }
</script>

<style src="./Pagination.css"></style>
