@ysgroup/ui 0.1.14 → 0.1.16

package/package.json

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

package/src/components/YsCrudTable.vue

@@ -7,6 +7,7 @@ import { FIELD_SPECS, ENUM_META } from "@ysgroup/contracts";
 import { enumLabel } from "../tokens-runtime";
 import YsFormDialog from "./YsFormDialog.vue";
 import YsRowActionMenu from "./YsRowActionMenu.vue";
+import YsTableToolbar from "./YsTableToolbar.vue";
 
 interface FieldSpec {
   key: string;
@@ -79,7 +80,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] ?? []);
 
@@ -96,11 +96,7 @@ const filtered = computed(() => {
   const kw = keyword.value.trim().toLowerCase();
   if (!kw) return props.rows;
   return props.rows.filter((r) =>
-    displayColumns.value.some((c) =>
-      String(r[c.key] ?? "")
-        .toLowerCase()
-        .includes(kw),
-    ),
+    displayColumns.value.some((c) => display(r, c).toLowerCase().includes(kw)),
   );
 });
 
@@ -122,8 +118,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 ? "是" : "否";
@@ -162,11 +156,9 @@ function onSubmit(payload: Record<string, unknown>) {
 
 <template>
   <div class="ys-crud">
-    <div class="ys-crud__toolbar">
-      <el-input v-model="keyword" placeholder="搜索" clearable style="width: 200px" />
-      <div class="ys-crud__spacer" />
-      <el-button v-if="!readonly" type="primary" @click="onCreate">{{ createLabel || "新建" }}</el-button>
-    </div>
+    <YsTableToolbar v-model:keyword="keyword">
+      <template #actions><el-button v-if="!readonly" type="primary" @click="onCreate">{{ createLabel || "新建" }}</el-button></template>
+    </YsTableToolbar>
 
     <el-table :data="paged" v-loading="loading" stripe border size="small" table-layout="fixed" row-key="_id">
       <el-table-column v-for="c in displayColumns" :key="c.key" :label="c.title" :width="columnWidth(c)" show-overflow-tooltip>
@@ -187,15 +179,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" />
@@ -203,16 +190,4 @@ function onSubmit(payload: Record<string, unknown>) {
 </template>
 
 <style scoped>
-.ys-crud__toolbar {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-.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/components/YsTableToolbar.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+  keyword: string;
+  placeholder?: string;
+}>();
+
+const emit = defineEmits<{
+  "update:keyword": [value: string];
+}>();
+</script>
+
+<template>
+  <div class="ys-table-toolbar">
+    <el-input
+      :model-value="keyword"
+      :placeholder="placeholder || '搜索'"
+      clearable
+      class="ys-table-toolbar__search"
+      @update:model-value="emit('update:keyword', String($event))"
+    />
+    <slot />
+    <div class="ys-table-toolbar__spacer" />
+    <slot name="actions" />
+  </div>
+</template>
+
+<style scoped>
+.ys-table-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+.ys-table-toolbar__search {
+  width: 200px;
+}
+.ys-table-toolbar__spacer {
+  flex: 1;
+}
+</style>

package/src/index.ts

@@ -1,6 +1,8 @@
 /* @ysgroup/ui —— 平台组件库（基于 Element Plus 封装，令牌来自 @ysgroup/theme）。 */
 
 export { default as YsCrudTable } from "./components/YsCrudTable.vue";
+export { default as YsTableToolbar } from "./components/YsTableToolbar.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";