@amaoaaaaa/search-table 0.2.2 → 0.3.0

package/README.md

@@ -135,11 +135,74 @@ const columns = [{ label: '姓名', prop: 'name' }];
 | `getSelectionRows` | `() => TableRow[]`           | 获取已勾选的行 |
 | `selectRows`       | `(rows: TableRow[]) => void` | 勾选指定行     |
 
+### SearchTable 样式定制
+
+组件内部按 BEM 规范预留了类名，块名为 `search-table`，可在外层通过 `:deep()` 覆盖样式：
+
+```vue
+<template>
+    <SearchTable class="my-search-table" :columns="columns" :fetch-fn="fetchData" />
+</template>
+
+<style scoped>
+.my-search-table :deep(.search-table__search-button) {
+    border-radius: 9999px;
+}
+</style>
+```
+
+| 类名                                   | 说明                                       |
+| -------------------------------------- | ------------------------------------------ |
+| `search-table`                         | 根容器                                     |
+| `search-table__toolbar`                | 顶部区域（搜索区 + 操作区）                |
+| `search-table__search`                 | 左侧搜索组（搜索框 + 搜索表单 + 搜索按钮） |
+| `search-table__search-input`           | 搜索输入框                                 |
+| `search-table__search-button`          | 搜索按钮                                   |
+| `search-table__actions`                | 右侧操作按钮组（新增 / 批量删除 / 插槽）   |
+| `search-table__add-button`             | 新增按钮                                   |
+| `search-table__batch-delete-button`    | 批量删除按钮                               |
+| `search-table__body`                   | 表格区域（ProTable 根节点）                |
+| `search-table__footer`                 | 底部分页区域                               |
+| `search-table__selection`              | 已选条数提示区域                           |
+| `search-table__clear-selection-button` | 清空勾选按钮                               |
+| `search-table__pagination`             | 分页组件                                   |
+| `search-table__footer-spacer`          | 分页区域右侧占位（用于保持分页居中）       |
+
+### SearchTableConfigProvider 全局配置
+
+组件默认按 element-plus 表格的默认尺寸（表头 40px、每行 40px）计算每页条数。
+如果业务中修改了表格样式，可用 `SearchTableConfigProvider` 统一覆盖，避免分页行数计算错误。
+该组件只提供配置、不渲染额外 DOM，用法类似 `ElConfigProvider`：
+
+```vue
+<template>
+    <SearchTableConfigProvider row-height="48" header-height="56px">
+        <SearchTable :columns="columns" :fetch-fn="fetchData" />
+    </SearchTableConfigProvider>
+</template>
+
+<script setup lang="ts">
+import { SearchTable, SearchTableConfigProvider } from '@amaoaaaaa/search-table';
+</script>
+```
+
+| 属性           | 类型               | 默认值 | 说明                             |
+| -------------- | ------------------ | ------ | -------------------------------- |
+| `rowHeight`    | `number \| string` | `40`   | 表格行高（px），用于计算每页条数 |
+| `headerHeight` | `number \| string` | `40`   | 表头高度（px），用于计算每页条数 |
+
+取值规则：
+
+- 支持数字或字符串，字符串只提取前导数字并忽略单位：`48`、`'48'`、`'48px'`、`' 48.5px '` 均可用，`'3rem'` 会被当成 `3`（不做单位换算）。
+- 解析结果四舍五入为整数：`'48.5px'` 为 `49`，`'48.4'` 为 `48`。
+- 无法解析或非正数（如 `'abc'`、`''`、`0`、`Infinity`）会回退默认值 `40`。
+- 只影响未显式传入 `pageSize` 的实例；配置在实例挂载时读取一次，运行中修改 props 不会让已挂载实例重新计算。
+
 ## 导出清单
 
-**组件：** `SearchTable`, `ProTable`
+**组件：** `SearchTable`, `SearchTableConfigProvider`, `ProTable`
 
-**类型：** `SearchTableProps`, `SearchTableFetchFn`, `PageParams`, `PageResp`, `ProTableProps`, `ProTableColumn`, `ProTableAction`, `TableRow`, `ApplyFilterPayload`, `CellEditPayload`, `SortState`, `ProTableInstance`
+**类型：** `SearchTableProps`, `SearchTableFetchFn`, `PageParams`, `PageResp`, `SearchTableConfigProviderProps`, `ProTableProps`, `ProTableColumn`, `ProTableAction`, `TableRow`, `ApplyFilterPayload`, `CellEditPayload`, `SortState`, `ProTableInstance`
 
 **工具：** `SelectionStore`, `useTableSort`, `useDelayedRef`, `parseErrorReason`
 

package/dist/SearchTable/ConfigProvider.vue.d.ts

@@ -0,0 +1,21 @@
+import { SearchTableConfigProviderProps } from './config';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SearchTableConfigProviderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SearchTableConfigProviderProps> & Readonly<{}>, {
+    rowHeight: number | string;
+    headerHeight: number | string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/SearchTable/config.d.ts

@@ -0,0 +1,46 @@
+import { InjectionKey } from 'vue';
+/**
+ * SearchTableConfigProvider 的配置项
+ */
+export interface SearchTableConfigProviderProps {
+    /**
+     * 表格行高，用于计算每页条数
+     *
+     * 支持数字或字符串（如 `48`、`'48px'`），单位会被忽略
+     *
+     * @default 40
+     */
+    rowHeight?: number | string;
+    /**
+     * 表头高度，用于计算每页条数
+     *
+     * 支持数字或字符串（如 `48`、`'48px'`），单位会被忽略
+     *
+     * @default 40
+     */
+    headerHeight?: number | string;
+}
+/**
+ * 解析后的高度配置
+ */
+export interface SearchTableHeightConfig {
+    /** 表格行高，正整数 */
+    rowHeight: number;
+    /** 表头高度，正整数 */
+    headerHeight: number;
+}
+/**
+ * 默认高度配置，与 element-plus 表格默认样式保持一致
+ */
+export declare const DEFAULT_SEARCH_TABLE_HEIGHT_CONFIG: SearchTableHeightConfig;
+/**
+ * 解析高度配置
+ *
+ * @param config 原始配置
+ * @returns 解析后的正整数高度配置
+ */
+export declare function resolveHeightConfig(config?: SearchTableConfigProviderProps): SearchTableHeightConfig;
+/**
+ * 高度配置的注入 key，由 SearchTableConfigProvider 提供、SearchTable 读取
+ */
+export declare const searchTableConfigKey: InjectionKey<SearchTableHeightConfig>;

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { default as SearchTable } from './SearchTable/index.vue';
+export { default as SearchTableConfigProvider } from './SearchTable/ConfigProvider.vue';
 export { default as ProTable } from './ProTable/index.vue';
 export type { ProTableInstance } from './ProTable';
 export type { SearchTableProps, SearchTableFetchFn, PageParams, PageResp, } from './SearchTable/types';
 export type { SearchTableInstance } from './SearchTable';
+export type { SearchTableConfigProviderProps } from './SearchTable/config';
 export type { ProTableProps, ProTableColumn, ProTableAction, TableRow, FilterOption, FilterType, ActionButtonVisibility, ApplyFilterPayload, CellEditPayload, ProTableColumn as SearchTableColumn, ProTableAction as SearchTableAction, } from './ProTable/types';