@amaoaaaaa/search-table 0.1.0-beta.1

package/dist/ProTable/types.d.ts

@@ -0,0 +1,157 @@
+import { MaybeRefOrGetter } from 'vue';
+import { TableColumnProps } from 'element-plus/es/components/table/src/table-column/defaults';
+import { DefaultRow } from 'element-plus/es/components/table/src/table/defaults.mjs';
+export type TableRow = DefaultRow;
+export type FilterOption = {
+    label: string;
+    value: string | number | boolean;
+};
+/**
+ * 操作按钮显示状态
+ *
+ * - true: 正常显示
+ * - false: 不渲染
+ * - 'hidden': 不显示但占位
+ */
+export type ActionButtonVisibility = boolean | 'hidden';
+/**
+ * 表格操作按钮
+ */
+export interface ProTableAction<T extends TableRow = TableRow> {
+    text: string;
+    /**
+     * 按钮类型
+     *
+     * @default 'primary'
+     */
+    type?: '' | 'primary' | 'danger' | 'text' | 'default' | 'success' | 'warning' | 'info';
+    /**
+     * 是否显示
+     *
+     * - true: 正常显示
+     * - false: 不渲染
+     * - 'hidden': 不显示但占位
+     *
+     * @default true
+     */
+    visibility?: ActionButtonVisibility | ((row: T) => ActionButtonVisibility);
+    /**
+     * 是否禁用
+     *
+     * @default false
+     */
+    disabled?: boolean | ((row: T) => boolean);
+    handler: (row: T) => void;
+    /**
+     * 二次确认提示内容
+     *
+     * @description
+     * - 传入 `true` 表示使用默认提示内容：`是否确认${action.text}？`
+     * - 传入 `false` 表示不使用二次确认
+     * - 传入字符串表示使用自定义提示内容
+     * - 函数表示使用自定义提示内容
+     */
+    confirmText?: boolean | string | ((row: T) => string);
+}
+export type FilterType = 'radio' | 'checkbox' | 'datetimerange';
+/**
+ * 表格列配置
+ */
+export type ProTableColumn<T extends TableRow = TableRow> = Partial<Omit<TableColumnProps<T>, 'filters'>> & {
+    prop?: keyof T;
+    align?: 'left' | 'center' | 'right';
+    /**
+     * 是否可编辑
+     * @default false
+     */
+    editable?: boolean | ((row: T) => boolean);
+    /**
+     * 内容溢出自动截断，鼠标移入显示完整内容
+     *
+     * @default true
+     */
+    truncate?: boolean;
+    /**
+     * 是否可筛选
+     *
+     * @description 优先级高于 `filterOptions`
+     */
+    filterable?: boolean;
+    /**
+     * 数据过滤字段名，默认为当前列 `prop` 属性的值
+     */
+    filterFieldName?: string;
+    /**
+     * 时间范围筛选字段名
+     */
+    datetimerangeFilterFieldNames?: string[];
+    /**
+     * 数据过滤类型
+     * - radio: 单选（默认）
+     * - checkbox: 多选
+     * - datetimerange: 时间范围选择器
+     */
+    filterType?: FilterType;
+    /**
+     * 数据过滤选项
+     */
+    filterOptions?: MaybeRefOrGetter<FilterOption[] | undefined>;
+    /**
+     * 筛选弹窗宽度
+     */
+    filterPopoverWidth?: number;
+    /**
+     * 操作按钮
+     */
+    actions?: ProTableAction<T>[] | ((row: T) => ProTableAction<T>[]);
+};
+/**
+ * 表格配置
+ */
+export type ProTableProps<T extends TableRow = any> = {
+    data: T[];
+    columns: ProTableColumn<T>[];
+    /**
+     * 行数据的 Key，属性值必须唯一
+     *
+     * @default 'id'
+     */
+    rowKey?: string;
+    /**
+     * 是否可选择
+     * - 传入 true 表示所有行都可选择
+     * - 传入函数表示自定义选择逻辑
+     *
+     * @default undefined
+     */
+    selectable?: boolean | ((row: any, index: number) => boolean);
+    showIndex?: boolean;
+    indexWidth?: TableColumnProps['width'];
+    indexOffset?: number;
+    loading?: boolean;
+};
+export type ApplyFilterPayload = {
+    prop: string;
+    type: FilterType;
+    value: any;
+    filterData: Record<string, any>;
+    col: ProTableColumn;
+};
+/**
+ * 单元格退出编辑状态时触发回调的参数
+ * @template T 行数据类型
+ */
+export type CellEditPayload<T = any> = {
+    /** 编辑后的值 */
+    newValue: any;
+    /** 编辑前的值 */
+    oldValue: any;
+    /** 行索引 */
+    rowIndex: number;
+    /** 列索引 */
+    colIndex: number;
+    /** 当前行完整数据 */
+    row: T;
+    /** 当前列对应的字段名 */
+    prop: keyof T;
+};

package/dist/SearchTable/SelectionStore.d.ts

@@ -0,0 +1,45 @@
+type RowKey = string;
+/**
+ * 表格跨页选择状态管理器
+ */
+export declare class SelectionStore<T extends Record<string, any>> {
+    /** 存储选中的行 */
+    private map;
+    /** 行数据的 Key */
+    private rowKey;
+    /**
+     * 实例化 SelectionStore
+     *
+     * @param rowKey 作为 id 的字段名，默认为 `'id'`
+     */
+    constructor(rowKey?: string);
+    /** 获取所有选中行 */
+    get values(): T[];
+    /** 获取选中 id */
+    get ids(): RowKey[];
+    /** 是否选中 */
+    has(id: RowKey): boolean;
+    /** 选中一行 */
+    select(row: T): void;
+    /** 取消选中 */
+    unselect(id: RowKey): void;
+    /** 批量选中 */
+    selectMany(rows: T[]): void;
+    /** 批量取消 */
+    unselectMany(ids: RowKey[]): void;
+    /** 清空 */
+    clear(): void;
+    /**
+     * 同步当前页 selection-change
+     * @param pageRows 当前页数据
+     * @param selected 当前页勾选行
+     */
+    syncPage(pageRows: T[], selected: T[]): void;
+    /**
+     * 同步表格 UI 勾选状态
+     * @param pageRows 当前页数据
+     * @param toggleFn el-table toggleRowSelection
+     */
+    restorePageSelection(pageRows: T[], toggleFn: (row: T, selected: boolean) => void): void;
+}
+export {};