init

cms/src/components/CmsListPagination.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="cms-list-pagination mt-16">
+        <el-pagination
+            v-model:current-page="page"
+            v-model:page-size="limit"
+            :page-sizes="pageSizes"
+            :total="total"
+            layout="total, sizes, prev, pager, next"
+            @change="onChange"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+const pageSizes = [10, 20, 50];
+
+defineProps({
+    total: {
+        type: Number,
+        required: true
+    }
+});
+
+const page = defineModel<number>('page', { required: true });
+const limit = defineModel<number>('limit', { required: true });
+
+const emit = defineEmits<{
+    change: [page: number, limit: number];
+}>();
+
+const onChange = (nextPage: number, nextLimit: number): void => {
+    emit('change', nextPage, nextLimit);
+};
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/breakpoints' as *;
+
+.cms-list-pagination {
+    display: flex;
+    justify-content: flex-end;
+}
+
+@media (max-width: $cms-bp-tablet) {
+    .cms-list-pagination {
+        justify-content: center;
+        overflow-x: auto;
+    }
+
+    .cms-list-pagination :deep(.el-pagination) {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+}
+
+@media (max-width: $cms-bp-phone) {
+    .cms-list-pagination :deep(.el-pagination__sizes),
+    .cms-list-pagination :deep(.el-pagination__total) {
+        display: none;
+    }
+
+    .cms-list-pagination :deep(.el-pagination) {
+        --el-pagination-button-width: 28px;
+        --el-pagination-button-height: 28px;
+        font-size: 12px;
+    }
+}
+</style>