@agile-team/mach-table-vue 0.29.2 → 0.30.1
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.
- package/README.md +1 -1
- package/dist/mach-table.css +31 -31
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
# @agile-team/mach-table-vue
|
|
6
6
|
|
|
7
|
-
MachTable 0.
|
|
7
|
+
MachTable 0.30.1 的官方 Vue 3 适配包。一个依赖即可获得 Core、泛型 `<MachTable>`、原生 slots、应用/路由配置、按需工作流、异步组件边界和自动生命周期清理。
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
10
|
pnpm add @agile-team/mach-table-vue
|
package/dist/mach-table.css
CHANGED
|
@@ -580,36 +580,36 @@
|
|
|
580
580
|
overscroll-behavior: contain;
|
|
581
581
|
}
|
|
582
582
|
|
|
583
|
-
.mach-body-viewport--scroll {
|
|
584
|
-
scrollbar-width: thin;
|
|
585
|
-
scrollbar-color: var(--mach-scrollbar-thumb) transparent;
|
|
586
|
-
}
|
|
587
|
-
|
|
588
|
-
.mach-body-viewport--scroll::-webkit-scrollbar {
|
|
589
|
-
width: 10px;
|
|
590
|
-
height: 10px;
|
|
591
|
-
}
|
|
592
|
-
|
|
593
|
-
.mach-body-viewport--scroll::-webkit-scrollbar-track {
|
|
594
|
-
background: transparent;
|
|
595
|
-
}
|
|
596
|
-
|
|
597
|
-
.mach-body-viewport--scroll::-webkit-scrollbar-thumb {
|
|
598
|
-
background: var(--mach-scrollbar-thumb);
|
|
599
|
-
border-radius: 999px;
|
|
600
|
-
border: 3px solid transparent;
|
|
601
|
-
background-clip: padding-box;
|
|
602
|
-
transition: background-color var(--mach-transition);
|
|
603
|
-
}
|
|
604
|
-
|
|
605
|
-
.mach-body-viewport--scroll::-webkit-scrollbar-thumb:hover {
|
|
606
|
-
background: color-mix(in srgb, var(--mach-scrollbar-thumb) 60%, var(--mach-primary));
|
|
607
|
-
background-clip: padding-box;
|
|
608
|
-
}
|
|
609
|
-
|
|
610
|
-
.mach-body-viewport--scroll::-webkit-scrollbar-thumb:active {
|
|
611
|
-
background: var(--mach-primary);
|
|
612
|
-
background-clip: padding-box;
|
|
583
|
+
.mach-body-viewport--scroll {
|
|
584
|
+
scrollbar-width: thin;
|
|
585
|
+
scrollbar-color: var(--mach-scrollbar-thumb) transparent;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
.mach-body-viewport--scroll::-webkit-scrollbar {
|
|
589
|
+
width: 10px;
|
|
590
|
+
height: 10px;
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
.mach-body-viewport--scroll::-webkit-scrollbar-track {
|
|
594
|
+
background: transparent;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
.mach-body-viewport--scroll::-webkit-scrollbar-thumb {
|
|
598
|
+
background: var(--mach-scrollbar-thumb);
|
|
599
|
+
border-radius: 999px;
|
|
600
|
+
border: 3px solid transparent;
|
|
601
|
+
background-clip: padding-box;
|
|
602
|
+
transition: background-color var(--mach-transition);
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
.mach-body-viewport--scroll::-webkit-scrollbar-thumb:hover {
|
|
606
|
+
background: color-mix(in srgb, var(--mach-scrollbar-thumb) 60%, var(--mach-primary));
|
|
607
|
+
background-clip: padding-box;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.mach-body-viewport--scroll::-webkit-scrollbar-thumb:active {
|
|
611
|
+
background: var(--mach-primary);
|
|
612
|
+
background-clip: padding-box;
|
|
613
613
|
}
|
|
614
614
|
|
|
615
615
|
.mach-body-viewport--scroll::-webkit-scrollbar-corner {
|
|
@@ -2160,7 +2160,7 @@ input.mach-select-all {
|
|
|
2160
2160
|
.mach-context-menu-item:disabled {
|
|
2161
2161
|
opacity: 0.45;
|
|
2162
2162
|
cursor: not-allowed;
|
|
2163
|
-
}
|
|
2163
|
+
}
|
|
2164
2164
|
|
|
2165
2165
|
.mach-pagination {
|
|
2166
2166
|
display: flex;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agile-team/mach-table-vue",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.30.1",
|
|
4
4
|
"description": "Official Vue 3 adapter for the MachTable enterprise data grid",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vue",
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
"**/*.css"
|
|
119
119
|
],
|
|
120
120
|
"dependencies": {
|
|
121
|
-
"@agile-team/mach-table": "0.
|
|
121
|
+
"@agile-team/mach-table": "0.30.1"
|
|
122
122
|
},
|
|
123
123
|
"peerDependencies": {
|
|
124
124
|
"vue": ">=3.2.0"
|
|
@@ -132,5 +132,5 @@
|
|
|
132
132
|
"test": "vitest run",
|
|
133
133
|
"test:coverage": "vitest run --coverage"
|
|
134
134
|
},
|
|
135
|
-
"readme": "<p align=\"center\">\n <img src=\"https://raw.githubusercontent.com/ChenyCHENYU/MachTable/main/assets/mach-table-logo.svg\" alt=\"MachTable\" width=\"760\" />\n</p>\n\n# @agile-team/mach-table-vue\n\nMachTable 0.
|
|
135
|
+
"readme": "<p align=\"center\">\n <img src=\"https://raw.githubusercontent.com/ChenyCHENYU/MachTable/main/assets/mach-table-logo.svg\" alt=\"MachTable\" width=\"760\" />\n</p>\n\n# @agile-team/mach-table-vue\n\nMachTable 0.30.1 的官方 Vue 3 适配包。一个依赖即可获得 Core、泛型 `<MachTable>`、原生 slots、应用/路由配置、按需工作流、异步组件边界和自动生命周期清理。\n\n```bash\npnpm add @agile-team/mach-table-vue\n```\n\n应用入口只引入一次样式：\n\n```ts\nimport \"@agile-team/mach-table-vue/styles.css\";\n```\n\n## 局部接入\n\n```vue\n<script setup lang=\"ts\">\nimport { h, ref } from \"vue\";\nimport {\n MachTable,\n defineVueColumns,\n defineVueTableConfig,\n indexColumn,\n useMachTable,\n} from \"@agile-team/mach-table-vue\";\n\ninterface Row { id: string; name: string; status: \"enabled\" | \"disabled\" }\nconst table = useMachTable<Row>();\nconst rows = ref<Row[]>([{ id: \"1\", name: \"MachTable\", status: \"enabled\" }]);\nconst columns = defineVueColumns<Row>([\n indexColumn({ headerName: \"序号\" }),\n { field: \"name\", flex: 1, editable: true },\n {\n field: \"status\",\n headerName: \"状态\",\n render: (row) => h(\"span\", { class: `status-${row.status}` }, row.status === \"enabled\" ? \"启用\" : \"停用\")\n }\n]);\nconst tableConfig = defineVueTableConfig<Row>({\n rowKey: \"id\",\n enableColumnResize: true,\n stripedRows: true,\n persistence: { key: \"customers:list\", sections: [\"columns\"] }\n});\n</script>\n\n<template>\n <div style=\"height: 520px\">\n <MachTable\n v-bind=\"tableConfig\"\n :ref=\"table.ref\"\n :row-data=\"rows\"\n :column-defs=\"columns\"\n />\n </div>\n</template>\n```\n\n业务列优先用 `defineVueColumns()` 的 `render(row, index, params)` 返回 VNode；它保留 Vue 应用上下文、支持原位刷新，并遵循全局、表格和单列对齐配置。复杂页面编排仍可使用 `#cell-*` 具名插槽，具名插槽会显式覆盖同列 `render`。多个稳定表格参数推荐放进页面 `data.ts` 或共享配置模块，模板通过一次 `v-bind=\"tableConfig\"` 注入；`rowData`、`columnDefs` 和实例 `ref` 保持显式，便于看清数据来源。\n\n未声明 `#loading` / `#empty` 时会直接使用 Core 的紧凑骨架加载态与插画空态；只有产品确实需要品牌化呈现时才提供 slot，避免每个页面重复维护同类状态组件。\n\n单元格编辑在用户点击对勾/取消或执行 Enter、Escape、Tab 键盘命令前保持挂载，焦点变化和中文输入法组合输入不会提前提交。整行事务请设置 `edit-type=\"fullRow\"` 并增加 `rowActionsColumn()`，该操作列会自动切换编辑、保存和取消状态。\n\n## 全局接入\n\n表格页面较多时，全局注册一次，页面模板直接使用 `<MachTable>`：\n\n```ts\nimport { createApp } from \"vue\";\nimport { MachTablePlugin } from \"@agile-team/mach-table-vue\";\nimport machTableConfig from \"@/config/mach-table.config\";\n\ncreateApp(App).use(MachTablePlugin, machTableConfig).mount(\"#app\");\n```\n\n需要减少首屏代码时改用异步全局插件：\n\n```ts\nimport AsyncMachTablePlugin, { preloadMachTable } from \"@agile-team/mach-table-vue/async\";\n\napp.use(AsyncMachTablePlugin, machTableConfig);\nvoid preloadMachTable(); // 可选：路由 hover 时预取\n```\n\n推荐把约定集中到独立文件：\n\n```ts\n// src/config/mach-table.config.ts\nimport { defineMachTableConfig, defineMachTablePreset } from \"@agile-team/mach-table-vue\";\n\nexport default defineMachTableConfig({\n defaults: {\n size: \"compact\",\n columnLayout: \"fit\",\n enableColumnResize: true,\n defaultColDef: { sortable: true, filter: true, resizable: true }\n },\n defaultPreset: \"list\",\n presets: {\n list: defineMachTablePreset({ stripedRows: true }),\n crud: defineMachTablePreset({ rowSelection: \"multiple\", editType: \"fullRow\" })\n }\n});\n```\n\n布局或路由可用响应式 `provideMachTableConfig()` 叠加配置，表格 props 始终拥有最高优先级。\n\n## 按需子入口\n\n```ts\nimport { useMachTableQuery, useMachTableEditing } from \"@agile-team/mach-table-vue/workflows\";\nimport { MachTableToolbar } from \"@agile-team/mach-table-vue/ui\";\nimport { vueCellRenderer } from \"@agile-team/mach-table-vue/adapters\";\nimport { createElementPlusEditors } from \"@agile-team/mach-table-vue/editors\";\nimport { createWorkerDataProcessor } from \"@agile-team/mach-table-vue/worker\";\n```\n\n- `/workflows`：请求取消、防过期覆盖、服务端分页、跨页选择、脏数据和冲突保存；`reset()` 清空全部表格过滤且只请求一次。\n- `/ui`：可选标准工具栏；需要全局组件时另行 `app.use(MachTableUiPlugin)`，其全局组件类型也只在导入该子入口后生效。\n- `/adapters`：自定义 Vue renderer/editor/detail/overlay 桥接。\n- `/editors`：可选 Element Plus 编辑器，Element Plus 由宿主注入。\n- `/worker`：大型本地过滤/排序的独立 Worker 能力。\n\n该包自动依赖 `@agile-team/mach-table` 并重导出 Core 类型；宿主只需提供 `vue >= 3.2`。\n\n文档：[Vue 指南](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/guide/vue.md) · [企业接入](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/guide/enterprise-integration.md) · [配置中心](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/guide/configuration.md)\n\nSource-available © ChenyCHENYU (Agile Team). 任何使用均须事先取得书面授权。详见 [LICENSE](https://github.com/ChenyCHENYU/MachTable/blob/main/LICENSE) 与[授权流程](https://github.com/ChenyCHENYU/MachTable/blob/main/LICENSING.md)。\n"
|
|
136
136
|
}
|