bw-pro-table 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/README.md +827 -151
  2. package/dist/bw-pro-table.css +1 -1
  3. package/dist/bw-pro-table.js +2638 -2112
  4. package/dist/bw-pro-table.umd.cjs +9 -9
  5. package/dist/types/BwProTable.vue.d.ts +35 -12
  6. package/dist/types/BwProTableBatchEditModal.vue.d.ts +4 -4
  7. package/dist/types/BwProTableColumnSearch.vue.d.ts +3 -3
  8. package/dist/types/BwProTableColumnSetting.vue.d.ts +4 -4
  9. package/dist/types/BwProTableCore.vue.d.ts +8 -5
  10. package/dist/types/BwProTableImportModal.vue.d.ts +40 -0
  11. package/dist/types/BwProTableSearch.vue.d.ts +5 -5
  12. package/dist/types/BwProTableToolbar.vue.d.ts +18 -6
  13. package/dist/types/composables/useBwKeyboard.d.ts +1 -1
  14. package/dist/types/composables/useBwPermission.d.ts +2 -2
  15. package/dist/types/composables/useBwRowEdit.d.ts +10 -8
  16. package/dist/types/composables/useBwRowSelection.d.ts +2 -2
  17. package/dist/types/composables/useColumnHeaderSearch.d.ts +2 -2
  18. package/dist/types/composables/useContextMenu.d.ts +4 -2
  19. package/dist/types/composables/useDragSort.d.ts +2 -2
  20. package/dist/types/composables/useExportExcel.d.ts +14 -7
  21. package/dist/types/composables/useImportExcel.d.ts +14 -8
  22. package/dist/types/composables/useLocale.d.ts +8 -4
  23. package/dist/types/composables/usePersistence.d.ts +4 -2
  24. package/dist/types/composables/useQueryParams.d.ts +2 -2
  25. package/dist/types/composables/useTableView.d.ts +4 -2
  26. package/dist/types/constants.d.ts +7 -3
  27. package/dist/types/drag-icon.vue.d.ts +3 -3
  28. package/dist/types/index.d.ts +1 -1
  29. package/dist/types/injection-keys.d.ts +7 -10
  30. package/dist/types/locales/zh-CN.d.ts +1 -4
  31. package/dist/types/renderers/action-renderer.d.ts +2 -2
  32. package/dist/types/renderers/avatar-renderer.d.ts +1 -1
  33. package/dist/types/renderers/boolean-renderer.d.ts +1 -1
  34. package/dist/types/renderers/currency-renderer.d.ts +1 -1
  35. package/dist/types/renderers/date-renderer.d.ts +1 -1
  36. package/dist/types/renderers/image-renderer.d.ts +1 -1
  37. package/dist/types/renderers/index-renderer.d.ts +1 -1
  38. package/dist/types/renderers/index.d.ts +1 -9
  39. package/dist/types/renderers/link-renderer.d.ts +1 -1
  40. package/dist/types/renderers/number-renderer.d.ts +1 -1
  41. package/dist/types/renderers/progress-renderer.d.ts +1 -1
  42. package/dist/types/renderers/registry.d.ts +6 -2
  43. package/dist/types/renderers/tag-enum-renderer.d.ts +1 -1
  44. package/dist/types/renderers/text-renderer.d.ts +1 -1
  45. package/dist/types/types.d.ts +69 -8
  46. package/locales/zh-CN.ts +1 -0
  47. package/package.json +12 -11
  48. package/dist/types/BwProTableAdvancedFilter.vue.d.ts +0 -17
  49. package/dist/types/BwProTableContextMenu.vue.d.ts +0 -20
@@ -1,8 +1,5 @@
1
- /**
2
- * BwProTable provide/inject 类型安全 InjectionKey
3
- */
4
- import type { InjectionKey, Ref, ComputedRef } from 'vue';
5
- import type { TableState } from './types';
1
+ import { InjectionKey, Ref, ComputedRef } from 'vue';
2
+ import { TableState } from './types';
6
3
  export interface BwProTableContext {
7
4
  /** 表格唯一标识 */
8
5
  tableId: ComputedRef<string | undefined>;
@@ -35,10 +32,10 @@ export interface BwProTableContext {
35
32
  isCellEditing: (key: string | number, field: string) => boolean;
36
33
  getDraftValue: (key: string | number, field: string) => any;
37
34
  setDraftValue: (key: string | number, field: string, value: any) => void;
38
- startCellEdit: (key: string | number, field: string) => void;
39
- startRowEdit: (key: string | number) => void;
35
+ startCellEdit: (key: string | number, field: string) => Promise<void>;
36
+ startRowEdit: (key: string | number) => Promise<void>;
40
37
  saveEdit: (key: string | number) => Promise<boolean>;
41
- cancelEdit: (key: string | number) => void;
38
+ cancelEdit: (key: string | number, field?: string) => void;
42
39
  deleteRow: (key: string | number) => Promise<void>;
43
40
  getFieldError: (key: string | number, field: string) => string | undefined;
44
41
  undo: () => void;
@@ -49,8 +46,8 @@ export interface BwProTableContext {
49
46
  columnDraggable?: Ref<boolean>;
50
47
  /** 表头拖拽后重排列(fromDataIndex → toDataIndex) */
51
48
  reorderColumns?: (fromDataIndex: string, toDataIndex: string) => void;
52
- /** 跨页选中 key 集合(仅跨页模式时注入) */
53
- crossPageKeys?: Ref<Set<string | number>>;
49
+ /** 跨页选中 key 集合(仅跨页模式时注入,computed 确保模式切换时响应式更新) */
50
+ crossPageKeys?: Ref<Set<string | number>> | ComputedRef<Set<string | number> | undefined>;
54
51
  /** 选中计数(computed,跨页模式下为全量数) */
55
52
  selectionCount?: ComputedRef<number>;
56
53
  /** 清空所有跨页选择 */
@@ -1,6 +1,3 @@
1
- /**
2
- * BwProTable 中文语言包
3
- */
4
- import type { BwProTableLocale } from '../types';
1
+ import { BwProTableLocale } from '../types';
5
2
  declare const zhCN: BwProTableLocale;
6
3
  export default zhCN;
@@ -1,6 +1,6 @@
1
- import type { RendererFn } from './registry';
1
+ import { RendererFn } from './registry';
2
2
  /**
3
3
  * 操作列渲染器 — valueType: 'action'
4
- * 渲染按钮组,自动 fixed:'right',a-popconfirm 删除确认
4
+ * 渲染按钮组,自动 fixed:'right',支持 Popconfirm 气泡确认
5
5
  */
6
6
  export declare const actionRenderer: RendererFn;
@@ -1,4 +1,4 @@
1
- import type { RendererFn } from './registry';
1
+ import { RendererFn } from './registry';
2
2
  /**
3
3
  * 头像渲染器 — valueType: 'avatar'
4
4
  * 渲染 a-avatar + 名称
@@ -1,4 +1,4 @@
1
- import type { RendererFn } from './registry';
1
+ import { RendererFn } from './registry';
2
2
  /**
3
3
  * 布尔渲染器 — valueType: 'boolean'
4
4
  * 渲染 ✓/✗ 图标或 a-switch 开关
@@ -1,4 +1,4 @@
1
- import type { RendererFn } from './registry';
1
+ import { RendererFn } from './registry';
2
2
  /**
3
3
  * 货币渲染器 — valueType: 'currency'
4
4
  * 自动千分位 + 前缀/后缀符号(¥ / $ / %)
@@ -1,4 +1,4 @@
1
- import type { RendererFn } from './registry';
1
+ import { RendererFn } from './registry';
2
2
  /**
3
3
  * 日期渲染器 — valueType: 'date'
4
4
  * 自动 dayjs 格式化,支持 dateFormat 配置
@@ -1,4 +1,4 @@
1
- import type { RendererFn } from './registry';
1
+ import { RendererFn } from './registry';
2
2
  /**
3
3
  * 图片渲染器 — valueType: 'image'
4
4
  * 缩略图展示 + a-image-preview-group 大图预览
@@ -1,4 +1,4 @@
1
- import type { RendererFn } from './registry';
1
+ import { RendererFn } from './registry';
2
2
  /**
3
3
  * 序号渲染器 — valueType: 'index'
4
4
  * 自动计算行号,支持跨页连续编号
@@ -1,11 +1,3 @@
1
- /**
2
- * 渲染器统一导出 + 内置渲染器注册
3
- *
4
- * 使用方式:
5
- * - 通过 ensureRenderers() 惰性初始化所有内置 valueType 渲染器
6
- * - 通过 defineColumnType() 注册自定义 valueType
7
- * - 初次调用 getRenderer/hasRenderer 前自动初始化
8
- */
9
1
  import { getRenderer } from './registry';
10
2
  /**
11
3
  * 惰性初始化所有内置渲染器(幂等,仅执行一次)
@@ -19,7 +11,7 @@ export declare const initBuiltinRenderers: typeof ensureRenderers;
19
11
  * 获取渲染器(自动确保内置渲染器已初始化)
20
12
  */
21
13
  export declare function getRendererSafe(type: string): ReturnType<typeof getRenderer>;
22
- export { registerRenderer, getRenderer, hasRenderer, defineColumnType } from './registry';
14
+ export { registerRenderer, getRenderer, hasRenderer, defineColumnType, clearRendererRegistry } from './registry';
23
15
  export type { RendererFn, RendererContext } from './registry';
24
16
  /**
25
17
  * 重置渲染器注册表(仅用于测试隔离)
@@ -1,4 +1,4 @@
1
- import type { RendererFn } from './registry';
1
+ import { RendererFn } from './registry';
2
2
  /**
3
3
  * 链接渲染器 — valueType: 'link'
4
4
  * 渲染 a-typography-link,支持 href 模板或 onClick 回调
@@ -1,4 +1,4 @@
1
- import type { RendererFn } from './registry';
1
+ import { RendererFn } from './registry';
2
2
  /**
3
3
  * 数字渲染器 — valueType: 'number'
4
4
  * 自动千分位格式化,支持 precision 配置
@@ -1,4 +1,4 @@
1
- import type { RendererFn } from './registry';
1
+ import { RendererFn } from './registry';
2
2
  /**
3
3
  * 进度条渲染器 — valueType: 'progress'
4
4
  * 将数值渲染为 a-progress 组件
@@ -1,5 +1,5 @@
1
- import type { ProColumnType } from '../types';
2
- import type { VNode } from 'vue';
1
+ import { ProColumnType } from '../types';
2
+ import { VNode } from 'vue';
3
3
  /**
4
4
  * 渲染器上下文 — 每个 valueType 渲染器都接收此上下文
5
5
  */
@@ -39,3 +39,7 @@ export declare function defineColumnType(type: string, renderer: RendererFn): vo
39
39
  * 获取渲染器注册表(仅用于调试)
40
40
  */
41
41
  export declare function getRendererRegistry(): ReadonlyMap<string, RendererFn>;
42
+ /**
43
+ * 清空渲染器注册表(仅用于测试隔离)
44
+ */
45
+ export declare function clearRendererRegistry(): void;
@@ -1,4 +1,4 @@
1
- import type { RendererFn } from './registry';
1
+ import { RendererFn } from './registry';
2
2
  /**
3
3
  * 标签/枚举渲染器 — valueType: 'tag'
4
4
  * 根据 valueEnum 映射为 a-tag + 颜色
@@ -1,4 +1,4 @@
1
- import type { RendererFn } from './registry';
1
+ import { RendererFn } from './registry';
2
2
  /**
3
3
  * 文本渲染器 — valueType: 'text'
4
4
  * 默认类型,自动应用 ellipsis + Tooltip
@@ -1,13 +1,55 @@
1
- import type { VNode } from 'vue';
2
- import type { TableColumnType, TablePaginationConfig } from 'ant-design-vue';
3
- import type { TableRowSelection, ExpandableConfig, GetRowKey } from 'ant-design-vue/es/table/interface';
1
+ import { VNode, CSSProperties } from 'vue';
2
+ import { TableColumnType, TablePaginationConfig } from 'ant-design-vue';
3
+ /** key 获取函数 */
4
+ export type GetRowKey<RecordType = any> = (record: RecordType, index?: number) => string | number;
5
+ /** 行选择配置(对齐 ant-design-vue TableRowSelection 接口) */
6
+ export interface TableRowSelection<RecordType = any> {
7
+ type?: 'checkbox' | 'radio';
8
+ selectedRowKeys?: (string | number)[];
9
+ onChange?: (selectedRowKeys: (string | number)[], selectedRows: RecordType[]) => void;
10
+ getCheckboxProps?: (record: RecordType) => any;
11
+ selections?: any[] | boolean;
12
+ columnWidth?: number | string;
13
+ fixed?: boolean;
14
+ hideSelectAll?: boolean;
15
+ preserveSelectedRowKeys?: boolean;
16
+ checkStrictly?: boolean;
17
+ renderCell?: (value: boolean, record: RecordType, index: number, originNode: VNode) => VNode;
18
+ onSelect?: (record: RecordType, selected: boolean, selectedRows: RecordType[], nativeEvent: Event) => void;
19
+ onSelectAll?: (selected: boolean, selectedRows: RecordType[], changeRows: RecordType[]) => void;
20
+ onSelectInvert?: (selectedRowKeys: (string | number)[]) => void;
21
+ onSelectNone?: () => void;
22
+ }
23
+ /** 可展开行配置(对齐 ant-design-vue ExpandableConfig 接口) */
24
+ export interface ExpandableConfig<RecordType = any> {
25
+ expandedRowKeys?: (string | number)[];
26
+ defaultExpandedRowKeys?: (string | number)[];
27
+ expandedRowRender?: (props: {
28
+ record: RecordType;
29
+ index: number;
30
+ indent: number;
31
+ expanded: boolean;
32
+ }) => VNode;
33
+ expandRowByClick?: boolean;
34
+ expandIcon?: (props: {
35
+ expanded: boolean;
36
+ onExpand: (record: RecordType, e: Event) => void;
37
+ record: RecordType;
38
+ }) => VNode;
39
+ rowExpandable?: (record: RecordType) => boolean;
40
+ onExpand?: (expanded: boolean, record: RecordType) => void;
41
+ onExpandedRowsChange?: (expandedRows: (string | number)[]) => void;
42
+ expandedRowClassName?: (record: RecordType, index: number, indent: number) => string;
43
+ indentSize?: number;
44
+ columnWidth?: number | string;
45
+ fixed?: boolean | 'left' | 'right';
46
+ }
4
47
  /** 排序方向 */
5
48
  export type SortOrder = 'ascend' | 'descend' | null;
6
49
  /** 筛选值类型 */
7
50
  export type FilterValue = (string | number)[] | null;
8
51
  /** 行 Key 类型 */
9
52
  export type Key = string | number;
10
- import type { CSSProperties } from 'vue';
11
53
  /** 支持的 valueType 预设值 */
12
54
  export type ValueType = 'text' | 'number' | 'date' | 'tag' | 'image' | 'link' | 'progress' | 'avatar' | 'action' | 'index' | 'currency' | 'boolean';
13
55
  /** valueEnum 映射定义 */
@@ -124,6 +166,7 @@ export interface ActionItem<RecordType = any> {
124
166
  /** 危险操作样式,对应 ant-design-vue Button 的 danger 属性 */
125
167
  danger?: boolean;
126
168
  icon?: string;
169
+ /** 气泡确认文案,设置后点击按钮会先弹出 Popconfirm 确认 */
127
170
  confirm?: string;
128
171
  authority?: string | string[];
129
172
  disabled?: boolean | ((record: RecordType) => boolean);
@@ -140,6 +183,11 @@ export interface FormRule {
140
183
  pattern?: RegExp;
141
184
  validator?: (value: any, record: any) => Promise<void> | void;
142
185
  }
186
+ /** 导入校验规则 — 继承 FormRule 并附加必填 field 字段 */
187
+ export interface ImportValidateRule extends FormRule {
188
+ /** 校验目标字段名(必填) */
189
+ field: string;
190
+ }
143
191
  export interface EditConfig<RecordType = any> {
144
192
  /** 编辑模式 */
145
193
  mode?: 'cell' | 'row';
@@ -240,14 +288,25 @@ export interface ExportConfig {
240
288
  type?: 'xlsx' | 'csv';
241
289
  /** 自定义列映射 */
242
290
  columnMapping?: Record<string, string>;
243
- /** 导出前回调 */
291
+ /** 导出前回调,返回 false 可阻止导出 */
244
292
  beforeExport?: () => Promise<boolean> | boolean;
293
+ /**
294
+ * Request 模式下导出全量数据回调。
295
+ * 不提供时仅导出当前页数据;提供后可通过此回调获取全部数据。
296
+ * 接收当前搜索/筛选/排序参数,返回全量数据数组。
297
+ */
298
+ onExportAll?: (params: Record<string, any>) => Promise<any[]> | any[];
299
+ /**
300
+ * Request 模式下导出选中行回调(跨页选择时选中行数据可能不完整)。
301
+ * 接收选中的 rowKey 数组,返回对应的行数据数组。
302
+ */
303
+ onExportSelected?: (keys: (string | number)[]) => Promise<any[]> | any[];
245
304
  }
246
305
  export interface ImportConfig {
247
306
  /** 列映射 */
248
307
  columnMapping?: Record<string, string>;
249
308
  /** 校验规则 */
250
- validateRules?: FormRule[];
309
+ validateRules?: ImportValidateRule[];
251
310
  /** 导入前回调 */
252
311
  beforeImport?: (data: any[]) => Promise<any[]> | any[];
253
312
  /** 导入回调 */
@@ -288,6 +347,7 @@ export interface BwProTableLocale {
288
347
  exitFullscreen: string;
289
348
  columnSetting: string;
290
349
  export: string;
350
+ import: string;
291
351
  clearFilter: string;
292
352
  search: string;
293
353
  border: string;
@@ -514,6 +574,8 @@ export interface BwProTableProps<RecordType = any> {
514
574
  class?: string;
515
575
  /** 表格样式 */
516
576
  style?: CSSProperties;
577
+ /** 行 className 函数(覆盖内置斑马纹/选中行样式) */
578
+ rowClassName?: (record: RecordType, index: number) => string;
517
579
  }
518
580
  export type TableStatus = 'loading' | 'success' | 'error';
519
581
  export interface TableState {
@@ -527,8 +589,7 @@ export interface PersistedColumnState {
527
589
  order: number;
528
590
  width?: number;
529
591
  }
530
- /** 当前持久化数据版本(已迁移到 constants.ts,保留向后兼容 re-export) */
531
- export { PERSISTED_DATA_VERSION } from './constants';
592
+ /** 当前持久化数据版本(已迁移到 constants.ts,请从 constants 直接导入) */
532
593
  export interface PersistedTableState {
533
594
  /** 数据版本号,用于版本迁移 */
534
595
  version: string;
package/locales/zh-CN.ts CHANGED
@@ -28,6 +28,7 @@ const zhCN: BwProTableLocale = {
28
28
  exitFullscreen: '退出全屏',
29
29
  columnSetting: '列设置',
30
30
  export: '导出',
31
+ import: '导入',
31
32
  clearFilter: '清除筛选',
32
33
  search: '搜索',
33
34
  border: '边框',
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "bw-pro-table",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
+ "author": {"name": "ZM"},
4
5
  "description": "基于 ant-design-vue 的高级业务表格组件(ProTable),支持请求/数据源双模式、行内编辑、搜索筛选、列拖拽排序、导出导入、跨页多选、持久化等",
5
6
  "type": "module",
6
7
  "main": "./dist/bw-pro-table.umd.cjs",
@@ -37,16 +38,16 @@
37
38
  ],
38
39
  "scripts": {
39
40
  "dev": "vite --open dev/index.html",
40
- "build": "vite build && vue-tsc --project tsconfig.build.json --emitDeclarationOnly",
41
- "build:vite": "vite build",
41
+ "build": "vite build",
42
+ "build:vue-tsc": "vite build && vue-tsc --project tsconfig.build.json --emitDeclarationOnly",
42
43
  "build:types": "vue-tsc --project tsconfig.build.json --emitDeclarationOnly",
43
44
  "typecheck": "vue-tsc --project tsconfig.build.json --noEmit",
44
45
  "lint": "eslint . --ext .vue,.ts",
45
46
  "prepublishOnly": "npm run build"
46
47
  },
47
48
  "peerDependencies": {
48
- "@ant-design/icons-vue": "^6.0.0 || ^7.0.0",
49
- "ant-design-vue": "^3.2.0 || ^4.0.0",
49
+ "@ant-design/icons-vue": "^7.0.0",
50
+ "ant-design-vue": "^4.0.0",
50
51
  "dayjs": "^1.11.0",
51
52
  "screenfull": "^6.0.0",
52
53
  "vue": "^3.3.0",
@@ -63,19 +64,19 @@
63
64
  },
64
65
  "devDependencies": {
65
66
  "@ant-design/icons-vue": "^7.0.1",
66
- "@types/node": "^24.13.2",
67
+ "@types/node": "^26.0.0",
67
68
  "@vitejs/plugin-vue": "^6.0.7",
68
- "@vue/language-core": "^3.3.4",
69
+ "@vue/language-core": "^3.3.5",
69
70
  "ant-design-vue": "^4.2.6",
70
71
  "dayjs": "^1.11.21",
71
- "less": "^4.6.4",
72
+ "less": "^4.6.6",
72
73
  "screenfull": "^6.0.2",
73
74
  "typescript": "^6.0.3",
74
75
  "vite": "^8.0.16",
75
76
  "vite-plugin-dts": "^5.0.2",
76
- "vue": "^3.5.35",
77
- "vue-i18n": "^11.4.5",
78
- "vue-tsc": "^3.3.4",
77
+ "vue": "^3.5.38",
78
+ "vue-i18n": "^11.4.6",
79
+ "vue-tsc": "^3.3.5",
79
80
  "xlsx": "^0.18.5"
80
81
  },
81
82
  "keywords": [
@@ -1,17 +0,0 @@
1
- import type { AdvancedFilterCondition, ProColumnsType } from './types';
2
- interface Props {
3
- visible: boolean;
4
- columns: ProColumnsType<any>;
5
- initialConditions?: AdvancedFilterCondition[];
6
- }
7
- declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
8
- reset: () => any;
9
- "update:visible": (value: boolean) => any;
10
- apply: (conditions: AdvancedFilterCondition[]) => any;
11
- }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
12
- onReset?: (() => any) | undefined;
13
- "onUpdate:visible"?: ((value: boolean) => any) | undefined;
14
- onApply?: ((conditions: AdvancedFilterCondition[]) => any) | undefined;
15
- }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
16
- declare const _default: typeof __VLS_export;
17
- export default _default;
@@ -1,20 +0,0 @@
1
- import type { ContextMenuItem } from './types';
2
- interface Props {
3
- visible: boolean;
4
- x: number;
5
- y: number;
6
- items: ContextMenuItem[];
7
- /** 菜单宽度 */
8
- width?: number;
9
- }
10
- declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
- click: (key: string, item: ContextMenuItem) => any;
12
- close: () => any;
13
- }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
14
- onClick?: ((key: string, item: ContextMenuItem) => any) | undefined;
15
- onClose?: (() => any) | undefined;
16
- }>, {
17
- width: number;
18
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
19
- declare const _default: typeof __VLS_export;
20
- export default _default;