@ysgroup/ui 0.1.15 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ysgroup/ui",
-  "version": "0.1.15",
+  "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;
@@ -95,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)),
   );
 });
 
@@ -159,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>
@@ -195,12 +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;
-}
 </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,7 @@
 /* @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";