@ysgroup/ui 0.1.14 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ysgroup/ui",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/YsCrudTable.vue

@@ -79,7 +79,6 @@ const dialogOpen = ref(false);
 const editing = ref<Record<string, unknown> | null>(null);
 const currentPage = ref(1);
 const pageSize = ref(20);
-const PAGE_SIZES = [20, 50, 100];
 
 const allSpecs = computed<FieldSpec[]>(() => (FIELD_SPECS as unknown as Record<string, FieldSpec[]>)[props.table] ?? []);
 
@@ -122,8 +121,6 @@ const paged = computed(() => {
   return filtered.value.slice(start, start + pageSize.value);
 });
 
-const showPagination = computed(() => filtered.value.length > 20);
-
 function display(row: Record<string, unknown>, f: FieldSpec): string {
   const v = props.rowDisplay ? props.rowDisplay(row, f.key, row[f.key]) : row[f.key];
   if (f.widget === "switch") return v ? "是" : "否";
@@ -187,15 +184,10 @@ function onSubmit(payload: Record<string, unknown>) {
       </el-table-column>
     </el-table>
 
-    <el-pagination
-      v-if="showPagination"
+    <YsTablePagination
       v-model:current-page="currentPage"
       v-model:page-size="pageSize"
-      :page-sizes="PAGE_SIZES"
       :total="filtered.length"
-      layout="total, sizes, prev, pager, next"
-      class="ys-crud__pagination"
-      @size-change="currentPage = 1"
     />
 
     <YsFormDialog v-if="!externalEditor" v-model="dialogOpen" :table="table" :record="editing" :hidden="hiddenInForm" :saving="saving" @submit="onSubmit" />
@@ -211,8 +203,4 @@ function onSubmit(payload: Record<string, unknown>) {
 .ys-crud__spacer {
   flex: 1;
 }
-.ys-crud__pagination {
-  margin-top: 12px;
-  justify-content: flex-end;
-}
 </style>

package/src/components/YsTablePagination.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+defineProps<{
+  total: number;
+  currentPage: number;
+  pageSize: number;
+}>();
+
+const emit = defineEmits<{
+  "update:currentPage": [value: number];
+  "update:pageSize": [value: number];
+}>();
+
+const PAGE_SIZES = [20, 50, 100];
+
+function updatePageSize(value: number): void {
+  emit("update:pageSize", value);
+  emit("update:currentPage", 1);
+}
+</script>
+
+<template>
+  <el-pagination
+    v-if="total > 20"
+    :current-page="currentPage"
+    :page-size="pageSize"
+    :page-sizes="PAGE_SIZES"
+    :total="total"
+    layout="total, sizes, prev, pager, next"
+    class="ys-table-pagination"
+    @update:current-page="emit('update:currentPage', $event)"
+    @update:page-size="updatePageSize"
+  />
+</template>
+
+<style scoped>
+.ys-table-pagination {
+  margin-top: 12px;
+  justify-content: flex-end;
+}
+</style>

package/src/index.ts

@@ -1,6 +1,7 @@
 /* @ysgroup/ui —— 平台组件库（基于 Element Plus 封装，令牌来自 @ysgroup/theme）。 */
 
 export { default as YsCrudTable } from "./components/YsCrudTable.vue";
+export { default as YsTablePagination } from "./components/YsTablePagination.vue";
 export { default as YsRowActionMenu } from "./components/YsRowActionMenu.vue";
 export type { YsRowAction } from "./components/YsRowActionMenu.vue";
 export { default as YsFormDialog } from "./components/YsFormDialog.vue";