From 8f845f878f3fd2f5fdc7248f2643c6459b699cc6 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Tue, 14 May 2024 20:31:40 +0800 Subject: [PATCH 01/34] feat: add vue component --- common/config/rush/pnpm-lock.yaml | 212 ++++++++++- packages/react-vtable/demo/src/App.tsx | 3 +- packages/vue-vtable/.eslintrc.js | 265 ++++++++++++++ packages/vue-vtable/README.md | 93 +++++ packages/vue-vtable/bundler.config.js | 17 + packages/vue-vtable/demo/index.html | 12 + packages/vue-vtable/demo/src/App.vue | 12 + packages/vue-vtable/demo/src/index.css | 75 ++++ .../demo/src/list-table/ListTable.vue | 338 ++++++++++++++++++ .../demo/src/list-table/list-table.vue | 37 ++ packages/vue-vtable/demo/src/main.ts | 8 + packages/vue-vtable/demo/tsconfig.json | 21 ++ packages/vue-vtable/demo/tsconfig.node.json | 12 + packages/vue-vtable/demo/vite.config.ts | 34 ++ packages/vue-vtable/package.json | 96 +++++ packages/vue-vtable/setup-mock.js | 2 + packages/vue-vtable/src/constants.ts | 1 + packages/vue-vtable/src/eventsUtils.ts | 186 ++++++++++ packages/vue-vtable/src/global.d.ts | 1 + packages/vue-vtable/src/index.ts | 5 + packages/vue-vtable/src/tables/base-table.tsx | 82 +++++ packages/vue-vtable/src/tables/index.ts | 1 + packages/vue-vtable/src/tables/list-table.vue | 48 +++ packages/vue-vtable/src/util.ts | 102 ++++++ packages/vue-vtable/tscofig.eslint.json | 20 ++ packages/vue-vtable/tsconfig.json | 24 ++ rush.json | 9 + 27 files changed, 1712 insertions(+), 4 deletions(-) create mode 100644 packages/vue-vtable/.eslintrc.js create mode 100644 packages/vue-vtable/README.md create mode 100644 packages/vue-vtable/bundler.config.js create mode 100644 packages/vue-vtable/demo/index.html create mode 100644 packages/vue-vtable/demo/src/App.vue create mode 100644 packages/vue-vtable/demo/src/index.css create mode 100644 packages/vue-vtable/demo/src/list-table/ListTable.vue create mode 100644 packages/vue-vtable/demo/src/list-table/list-table.vue create mode 100644 packages/vue-vtable/demo/src/main.ts create mode 100644 packages/vue-vtable/demo/tsconfig.json create mode 100644 packages/vue-vtable/demo/tsconfig.node.json create mode 100644 packages/vue-vtable/demo/vite.config.ts create mode 100644 packages/vue-vtable/package.json create mode 100644 packages/vue-vtable/setup-mock.js create mode 100644 packages/vue-vtable/src/constants.ts create mode 100644 packages/vue-vtable/src/eventsUtils.ts create mode 100644 packages/vue-vtable/src/global.d.ts create mode 100644 packages/vue-vtable/src/index.ts create mode 100644 packages/vue-vtable/src/tables/base-table.tsx create mode 100644 packages/vue-vtable/src/tables/index.ts create mode 100644 packages/vue-vtable/src/tables/list-table.vue create mode 100644 packages/vue-vtable/src/util.ts create mode 100644 packages/vue-vtable/tscofig.eslint.json create mode 100644 packages/vue-vtable/tsconfig.json diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index dd1d80381..c2987d8f0 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -629,6 +629,93 @@ importers: vite: 3.2.6_v6jnjveypdiyhm2qwcbxbcwzue vite-plugin-markdown: 2.2.0_vite@3.2.6 + ../../packages/vue-vtable: + specifiers: + '@babel/core': 7.20.12 + '@babel/preset-env': 7.20.2 + '@internal/bundler': workspace:* + '@internal/eslint-config': workspace:* + '@internal/ts-config': workspace:* + '@rushstack/eslint-patch': ~1.1.4 + '@types/chai': 4.2.22 + '@types/jest': ^26.0.0 + '@types/mocha': 9.0.0 + '@types/node': '*' + '@types/offscreencanvas': 2019.6.4 + '@visactor/vchart': 1.10.5 + '@visactor/vtable': workspace:* + '@visactor/vutils': ~0.18.1 + '@vitejs/plugin-vue': ^5.0.3 + axios: ^1.4.0 + chai: 4.3.4 + eslint: ~8.18.0 + form-data: ~4.0.0 + inversify: 6.0.1 + jest: ^26.0.0 + jest-electron: ^0.1.12 + jest-transform-stub: ^2.0.0 + json-formatter-js: ^2.3.4 + magic-string: ^0.25.7 + markdown-it: ^13.0.0 + mocha: 9.1.3 + node-fetch: 2.6.7 + postcss: 8.4.21 + rimraf: 3.0.2 + sass: 1.43.5 + ts-jest: ^26.0.0 + ts-loader: 9.2.6 + ts-node: 10.9.0 + tslib: 2.3.1 + ttypescript: 1.5.13 + typescript: 4.9.5 + typescript-transform-paths: 3.3.1 + vite: 3.2.6 + vite-plugin-markdown: ^2.1.0 + vue: ^3.4.14 + dependencies: + '@visactor/vtable': link:../vtable + '@visactor/vutils': 0.18.1 + devDependencies: + '@babel/core': 7.20.12 + '@babel/preset-env': 7.20.2_@babel+core@7.20.12 + '@internal/bundler': link:../../tools/bundler + '@internal/eslint-config': link:../../share/eslint-config + '@internal/ts-config': link:../../share/ts-config + '@rushstack/eslint-patch': 1.1.4 + '@types/chai': 4.2.22 + '@types/jest': 26.0.24 + '@types/mocha': 9.0.0 + '@types/node': 20.12.7 + '@types/offscreencanvas': 2019.6.4 + '@visactor/vchart': 1.10.5 + '@vitejs/plugin-vue': 5.0.4_vite@3.2.6+vue@3.4.27 + axios: 1.6.8 + chai: 4.3.4 + eslint: 8.18.0 + form-data: 4.0.0 + inversify: 6.0.1 + jest: 26.6.3_ts-node@10.9.0 + jest-electron: 0.1.12_jest@26.6.3 + jest-transform-stub: 2.0.0 + json-formatter-js: 2.5.10 + magic-string: 0.25.9 + markdown-it: 13.0.2 + mocha: 9.1.3 + node-fetch: 2.6.7 + postcss: 8.4.21 + rimraf: 3.0.2 + sass: 1.43.5 + ts-jest: 26.5.6_xuote2qreek47x2di7kesslrai + ts-loader: 9.2.6_typescript@4.9.5 + ts-node: 10.9.0_misjo77sqtw74jgpkxp7bulu2q + tslib: 2.3.1 + ttypescript: 1.5.13_fxi2xlggroal5l3a4znftvxz2m + typescript: 4.9.5 + typescript-transform-paths: 3.3.1_typescript@4.9.5 + vite: 3.2.6_v6jnjveypdiyhm2qwcbxbcwzue + vite-plugin-markdown: 2.2.0_vite@3.2.6 + vue: 3.4.27_typescript@4.9.5 + ../../share/eslint-config: specifiers: '@typescript-eslint/eslint-plugin': 5.30.0 @@ -3765,6 +3852,17 @@ packages: - supports-color dev: true + /@vitejs/plugin-vue/5.0.4_vite@3.2.6+vue@3.4.27: + resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==} + engines: {node: ^18.0.0 || >=20.0.0} + peerDependencies: + vite: ^5.0.0 + vue: ^3.2.25 + dependencies: + vite: 3.2.6_v6jnjveypdiyhm2qwcbxbcwzue + vue: 3.4.27_typescript@4.9.5 + dev: true + /@vitest/expect/0.30.1: resolution: {integrity: sha512-c3kbEtN8XXJSeN81iDGq29bUzSjQhjES2WR3aColsS4lPGbivwLtas4DNUe0jD9gg/FYGIteqOenfU95EFituw==} dependencies: @@ -3785,7 +3883,7 @@ packages: /@vitest/snapshot/0.30.1: resolution: {integrity: sha512-fJZqKrE99zo27uoZA/azgWyWbFvM1rw2APS05yB0JaLwUIg9aUtvvnBf4q7JWhEcAHmSwbrxKFgyBUga6tq9Tw==} dependencies: - magic-string: 0.30.9 + magic-string: 0.30.10 pathe: 1.1.2 pretty-format: 27.5.1 dev: true @@ -3804,6 +3902,79 @@ packages: pretty-format: 27.5.1 dev: true + /@vue/compiler-core/3.4.27: + resolution: {integrity: sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==} + dependencies: + '@babel/parser': 7.24.4 + '@vue/shared': 3.4.27 + entities: 4.5.0 + estree-walker: 2.0.2 + source-map-js: 1.2.0 + dev: true + + /@vue/compiler-dom/3.4.27: + resolution: {integrity: sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==} + dependencies: + '@vue/compiler-core': 3.4.27 + '@vue/shared': 3.4.27 + dev: true + + /@vue/compiler-sfc/3.4.27: + resolution: {integrity: sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==} + dependencies: + '@babel/parser': 7.24.4 + '@vue/compiler-core': 3.4.27 + '@vue/compiler-dom': 3.4.27 + '@vue/compiler-ssr': 3.4.27 + '@vue/shared': 3.4.27 + estree-walker: 2.0.2 + magic-string: 0.30.10 + postcss: 8.4.38 + source-map-js: 1.2.0 + dev: true + + /@vue/compiler-ssr/3.4.27: + resolution: {integrity: sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==} + dependencies: + '@vue/compiler-dom': 3.4.27 + '@vue/shared': 3.4.27 + dev: true + + /@vue/reactivity/3.4.27: + resolution: {integrity: sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==} + dependencies: + '@vue/shared': 3.4.27 + dev: true + + /@vue/runtime-core/3.4.27: + resolution: {integrity: sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==} + dependencies: + '@vue/reactivity': 3.4.27 + '@vue/shared': 3.4.27 + dev: true + + /@vue/runtime-dom/3.4.27: + resolution: {integrity: sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==} + dependencies: + '@vue/runtime-core': 3.4.27 + '@vue/shared': 3.4.27 + csstype: 3.1.3 + dev: true + + /@vue/server-renderer/3.4.27_vue@3.4.27: + resolution: {integrity: sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==} + peerDependencies: + vue: 3.4.27 + dependencies: + '@vue/compiler-ssr': 3.4.27 + '@vue/shared': 3.4.27 + vue: 3.4.27_typescript@4.9.5 + dev: true + + /@vue/shared/3.4.27: + resolution: {integrity: sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==} + dev: true + /abab/2.0.6: resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==} deprecated: Use your platform's native atob() and btoa() methods instead @@ -5937,6 +6108,11 @@ packages: resolution: {integrity: sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==} engines: {node: '>=0.12'} + /entities/4.5.0: + resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} + engines: {node: '>=0.12'} + dev: true + /env-paths/2.2.1: resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==} engines: {node: '>=6'} @@ -6536,7 +6712,6 @@ packages: /estree-walker/2.0.2: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} - dev: false /esutils/2.0.3: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} @@ -7223,7 +7398,7 @@ packages: fs.realpath: 1.0.0 inflight: 1.0.6 inherits: 2.0.4 - minimatch: 3.0.4 + minimatch: 3.1.2 once: 1.4.0 path-is-absolute: 1.0.1 dev: true @@ -9603,6 +9778,12 @@ packages: dependencies: '@jridgewell/sourcemap-codec': 1.4.15 + /magic-string/0.30.10: + resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==} + dependencies: + '@jridgewell/sourcemap-codec': 1.4.15 + dev: true + /magic-string/0.30.9: resolution: {integrity: sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==} engines: {node: '>=12'} @@ -10993,6 +11174,15 @@ packages: picocolors: 1.0.0 source-map-js: 1.2.0 + /postcss/8.4.38: + resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.7 + picocolors: 1.0.0 + source-map-js: 1.2.0 + dev: true + /prelude-ls/1.1.2: resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==} engines: {node: '>= 0.8.0'} @@ -13585,6 +13775,22 @@ packages: - terser dev: true + /vue/3.4.27_typescript@4.9.5: + resolution: {integrity: sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@vue/compiler-dom': 3.4.27 + '@vue/compiler-sfc': 3.4.27 + '@vue/runtime-dom': 3.4.27 + '@vue/server-renderer': 3.4.27_vue@3.4.27 + '@vue/shared': 3.4.27 + typescript: 4.9.5 + dev: true + /w3c-hr-time/1.0.2: resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==} deprecated: Use your platform's native performance.now() and performance.timeOrigin. diff --git a/packages/react-vtable/demo/src/App.tsx b/packages/react-vtable/demo/src/App.tsx index a7b638e69..81c6eea3a 100644 --- a/packages/react-vtable/demo/src/App.tsx +++ b/packages/react-vtable/demo/src/App.tsx @@ -15,6 +15,7 @@ import eventRebind from './event/event-rebind'; import componentContainer from './component/component-container'; +export default listTable; // export default listEditor; // export default listOptionRecord; // export default listComponent; @@ -29,4 +30,4 @@ import componentContainer from './component/component-container'; // export default listTableEvent; // export default eventRebind; -export default componentContainer; +// export default componentContainer; diff --git a/packages/vue-vtable/.eslintrc.js b/packages/vue-vtable/.eslintrc.js new file mode 100644 index 000000000..9985a061b --- /dev/null +++ b/packages/vue-vtable/.eslintrc.js @@ -0,0 +1,265 @@ +/* eslint-disable no-undef */ +require('@rushstack/eslint-patch/modern-module-resolution'); + +module.exports = { + extends: ['@internal/eslint-config/profile/lib', '@internal/eslint-config/profile/vue'], + parserOptions: { + tsconfigRootDir: __dirname, + project: './tscofig.eslint.json' + }, + overrides: [ + { + files: ['**/__tests__/**', '**/*.test.ts'], + // 测试文件允许以下规则 + rules: { + '@typescript-eslint/no-empty-function': 'off', + 'no-console': 'off', + 'dot-notation': 'off' + } + } + ], + globals: { + __VERSION__: 'readonly' + }, + rules: { + 'prettier/prettier': ['warn'], + 'linebreak-style': [0, 'error', 'windows'], + // 强制换行时操作符在行首 + // 与prettier冲突 + // "operator-linebreak": ["error", "before", { "overrides": { "=": "after" } }], + // 允许给能自动推断出类型的primitive类型变量额外添加类型声明 + '@typescript-eslint/no-inferrable-types': 'off', + // 在类型导入时推荐import type写法 + '@typescript-eslint/consistent-type-imports': 'warn', + // 禁止出现空接口定义 + '@typescript-eslint/no-empty-interface': 'error', + // 禁止出现空函数 + '@typescript-eslint/no-empty-function': 'error', + '@typescript-eslint/no-this-alias': 'off', + // 禁止使用namespace + '@typescript-eslint/no-namespace': 'error', + // 禁止使用for-in Array + '@typescript-eslint/no-for-in-array': 'error', + // 禁止在optional chain语句后加非空断言 + '@typescript-eslint/no-non-null-asserted-optional-chain': 'error', + // 接口定义中使用函数属性而不是对象方法声明 + '@typescript-eslint/method-signature-style': 'error', + // 默认省略除属性以外的public修饰符 + '@typescript-eslint/explicit-member-accessibility': [ + 'warn', + { + overrides: { + accessors: 'off', + constructors: 'no-public', + methods: 'no-public', + properties: 'no-public', + parameterProperties: 'explicit' + } + } + ], + 'no-console': [ + 1, // 开发期间先关闭 + { + // allow: ["warn", "error"] + allow: ['warn', 'error'] + } + ], + // 如果一个变量不会被重新赋值,最好使用const进行声明 + 'prefer-const': 2, + // 禁止在条件中使用常量表达式 + 'no-constant-condition': 0, + 'no-debugger': 2, + // 禁止对象字面量中出现重复的 key + 'no-dupe-keys': 2, + // 禁止在正则表达式中使用空字符集 + 'no-empty-character-class': 2, + // 禁止对 catch 子句的参数重新赋值 + 'no-ex-assign': 2, + 'no-extra-boolean-cast': 0, + // 禁止对 function 声明重新赋值 + 'no-func-assign': 2, + // 禁止在嵌套的块中出现变量声明或 function 声明 + 'no-inner-declarations': 2, + // 禁止 RegExp 构造函数中存在无效的正则表达式字符串 + 'no-invalid-regexp': 2, + // 禁止对关系运算符的左操作数使用否定操作符 + 'no-unsafe-negation': 2, + // 禁止把全局对象作为函数调用 + 'no-obj-calls': 2, + // 禁用稀疏数组 + 'no-sparse-arrays': 2, + // 禁止在 return、throw、continue 和 break 语句之后出现不可达代码 + 'no-unreachable': 2, + // 要求使用 isNaN() 检查 NaN + 'use-isnan': 2, + // 强制 typeof 表达式与有效的字符串进行比较 + 'valid-typeof': 2, + // 要求使用 === 和 !==,除了与 null 字面量进行比较时 + eqeqeq: [ + 'error', + 'always', + { + null: 'ignore' + } + ], + // 允许 if 语句中 return 语句之后有 else 块 + 'no-else-return': 1, + // 禁用标签语句 + 'no-labels': [ + 2, + { + // 忽略循环语句中的标签 + allowLoop: true + } + ], + // 禁用 eval() + 'no-eval': 2, + // 禁止扩展原生类型 + 'no-extend-native': 2, + // 禁止不必要的 .bind() 调用 + 'no-extra-bind': 0, + // 禁止使用类似 eval() 的方法 + 'no-implied-eval': 2, + // 禁用 __iterator__ 属性 + 'no-iterator': 2, + // 禁止不规则的空白 + 'no-irregular-whitespace': 2, + // 禁用不必要的嵌套块 + 'no-lone-blocks': 2, + // 禁止循环中存在函数 + 'no-loop-func': 2, + // 禁止多行字符串 + 'no-multi-str': 2, + // 禁止对原生对象或只读的全局对象进行赋值 + 'no-global-assign': 2, + // 禁止对 String,Number 和 Boolean 使用 new 操作符 + 'no-new-wrappers': 2, + // 禁用八进制字面量 + 'no-octal': 2, + // 禁止在字符串中使用八进制转义序列 + 'no-octal-escape': 2, + // 禁用 __proto__ 属性 + 'no-proto': 2, + // 禁止自身比较 + 'no-self-compare': 2, + // 禁止可以在有更简单的可替代的表达式时使用三元操作符 + 'no-unneeded-ternary': 2, + // 禁用 with 语句 + 'no-with': 2, + // 强制在 parseInt() 使用基数参数 + radix: 2, + // 要求 IIFE 使用括号括起来 + 'wrap-iife': [2, 'any'], + // 禁止删除变量 + 'no-delete-var': 2, + // 禁止 function 定义中出现重名参数 + 'no-dupe-args': 2, + // 禁止出现重复的 case 标签 + 'no-duplicate-case': 2, + // 不允许标签与变量同名 + 'no-label-var': 2, + // 禁止将标识符定义为受限的名字 + 'no-shadow-restricted-names': 2, + // 禁用未声明的变量,除非它们在 /*global */ 注释中被提到 + 'no-undef': 2, + // 禁止将变量初始化为 undefined + 'no-undef-init': 2, + // 允许在变量定义之前使用它们 + 'no-use-before-define': 'off', + '@typescript-eslint/no-use-before-define': 0, + // 强制或禁止调用无参构造函数时有圆括号 + 'new-parens': 2, + // 禁用 Array 构造函数 + 'no-array-constructor': 2, + // 禁用 Object 的构造函数 + 'no-new-object': 2, + // 禁止不必要的括号 + 'no-extra-parens': [2, 'functions'], + // 禁止使用 空格 和 tab 混合缩进 + 'no-mixed-spaces-and-tabs': 2, + // 强制函数中的变量在分开声明 + 'one-var': [2, 'never'], + // 建议回调函数最大嵌套深度不超过5 + 'max-nested-callbacks': [1, 5], + // 建议可嵌套的块的最大深度不超过6 + 'max-depth': [1, 6], + // 强制一行的最大长度不超过120,不包括注释和url + 'max-len': [ + 'error', + { + code: 120, + ignoreUrls: true, + ignoreComments: true + } + ], + // 建议函数定义中最多允许的参数数量不超过15个 + 'max-params': [1, 15], + // 强制非一元操作符周围有空格 + 'space-infix-ops': 2, + // 强制尽可能地使用点号 + 'dot-notation': [ + 2, + { + // 避免对是保留字的属性使用点号 + allowKeywords: true, + allowPattern: '^catch$' + } + ], + // 强制箭头函数的箭头前后使用一致的空格 + 'arrow-spacing': 2, + // 要求在构造函数中有 super() 的调用 + 'constructor-super': 2, + // 禁止在可能与比较操作符相混淆的地方使用箭头函数 + // 与prettier冲突 + // "no-confusing-arrow": [ + // 2, + // { + // // 该规则不那么严格,将括号作为有效防止混淆的语法。 + // "allowParens": true + // } + // ], + // 禁止修改类声明的变量 + 'no-class-assign': 2, + // 禁止修改 const 声明的变量 + 'no-const-assign': 2, + // 允许在构造函数中,在调用 super() 之前使用 this 或 super + 'no-this-before-super': 0, + // 要求使用 let 或 const 而不是 var + 'no-var': 2, + // 重复模块导入 + // "no-duplicate-imports": 1, + '@typescript-eslint/no-duplicate-imports': 1, + // 建议使用剩余参数而不是 arguments + 'prefer-rest-params': 1, + // 禁止 Unicode 字节顺序标记 (BOM) + 'unicode-bom': 2, + // 强制每一行中所允许的最大语句数量为2 + 'max-statements-per-line': 2, + // 允许不必要的构造函数 + 'no-useless-constructor': 0, + // 允许在函数标识符和其调用之间有空格 + 'func-call-spacing': 'off', + '@typescript-eslint/func-call-spacing': 'error', + // 允许出现未使用过的变量 + 'no-unused-vars': 'off', + '@typescript-eslint/no-unused-vars': [ + 1, + { + // 仅仅检测本作用域中声明的变量是否使用,允许不使用全局环境中的变量。 + vars: 'local', + // 不检查参数 + args: 'none' + } + ], + // 禁用特定的全局变量 + 'no-restricted-globals': [2, 'event', 'name', 'length', 'orientation', 'top', 'parent', 'location', 'closed'], + // 不允许省略大括号 + curly: 'error', + 'promise/catch-or-return': 'warn', + // indent: [1, 2], + 'no-multi-spaces': 1, + 'no-multiple-empty-lines': [1, { max: 1 }], + 'no-trailing-spaces': 1 + }, + ignorePatterns: ['*.config.ts'] +}; diff --git a/packages/vue-vtable/README.md b/packages/vue-vtable/README.md new file mode 100644 index 000000000..7ee1e2015 --- /dev/null +++ b/packages/vue-vtable/README.md @@ -0,0 +1,93 @@ +
+ + VisActor Logo + +
+ +
+

React-VTable

+
+ +
+ +VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.React-VTable is a React wrapper of VTable. + +[![npm Version](https://img.shields.io/npm/v/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/vue-vtable) +[![npm Download](https://img.shields.io/npm/dm/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/vue-vtable) +[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vtable/blob/main/LICENSE) + +
+ +# Usage + +## Installation + +[npm package](https://www.npmjs.com/package/@visactor/vue-vtable) + +```bash +// npm +npm install @visactor/vue-vtable + +// yarn +yarn add @visactor/vue-vtable +``` + +## Quick Start + +```jsx +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { ListTable } from "@visactor/vue-vtable"; + +const option = { + header: [ + { + field: "0", + caption: "name", + }, + { + field: "1", + caption: "age", + }, + { + field: "2", + caption: "gender", + }, + { + field: "3", + caption: "hobby", + }, + ], + records: new Array(1000).fill(["John", 18, "male", "🏀"]), +}; + +ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( + +); +``` + +## + +[More demos and detailed tutorials](https://visactor.io/vtable) + +# Related Links + +- [Official website](https://visactor.io/vtable) + +# Ecosystem + +| Project | Description | +| -------------------------------------------------------- | ----------------------------- | +| [AI-generated Components](https://visactor.io/ai-vtable) | AI-generated table component. | + +# Contribution + +If you would like to contribute, please read the [Code of Conduct ](./CODE_OF_CONDUCT.md) 和 [ Guide](./CONTRIBUTING.zh-CN.md) first。 + +Small streams converge to make great rivers and seas! + + + +# License + +[MIT License](./LICENSE) diff --git a/packages/vue-vtable/bundler.config.js b/packages/vue-vtable/bundler.config.js new file mode 100644 index 000000000..24d8ed4be --- /dev/null +++ b/packages/vue-vtable/bundler.config.js @@ -0,0 +1,17 @@ +/** + * @type {Partial} + */ +module.exports = { + formats: ['cjs', 'es', 'umd'], + noEmitOnError: false, + copy: ['css'], + name: 'VueVTable', + umdOutputFilename: 'vue-vtable', + rollupOptions: { + treeshake: true + }, + globals: { + '@visactor/vtable': 'VTable' + }, + external: ['@visactor/vtable'] +}; diff --git a/packages/vue-vtable/demo/index.html b/packages/vue-vtable/demo/index.html new file mode 100644 index 000000000..b2c3c1b6b --- /dev/null +++ b/packages/vue-vtable/demo/index.html @@ -0,0 +1,12 @@ + + + + + + Vite + React + TS + + +
+ + + diff --git a/packages/vue-vtable/demo/src/App.vue b/packages/vue-vtable/demo/src/App.vue new file mode 100644 index 000000000..9c9381558 --- /dev/null +++ b/packages/vue-vtable/demo/src/App.vue @@ -0,0 +1,12 @@ + + + + + diff --git a/packages/vue-vtable/demo/src/index.css b/packages/vue-vtable/demo/src/index.css new file mode 100644 index 000000000..4fb97b8f4 --- /dev/null +++ b/packages/vue-vtable/demo/src/index.css @@ -0,0 +1,75 @@ +html, body, #root { + width: 100%; + height: 100%; + margin: 0; +} + +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/packages/vue-vtable/demo/src/list-table/ListTable.vue b/packages/vue-vtable/demo/src/list-table/ListTable.vue new file mode 100644 index 000000000..6ef234ced --- /dev/null +++ b/packages/vue-vtable/demo/src/list-table/ListTable.vue @@ -0,0 +1,338 @@ + + + + + + diff --git a/packages/vue-vtable/demo/src/list-table/list-table.vue b/packages/vue-vtable/demo/src/list-table/list-table.vue new file mode 100644 index 000000000..3f5b8299e --- /dev/null +++ b/packages/vue-vtable/demo/src/list-table/list-table.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/vue-vtable/demo/src/main.ts b/packages/vue-vtable/demo/src/main.ts new file mode 100644 index 000000000..75af2758f --- /dev/null +++ b/packages/vue-vtable/demo/src/main.ts @@ -0,0 +1,8 @@ +import { createApp } from 'vue'; +import App from './App.vue'; +import {ListTable} from '../../src/index'; + + +const app = createApp(App); +app.component('vue-list-table', ListTable); // 这样在整个应用中都可以使用 标签了 +app.mount('#app'); \ No newline at end of file diff --git a/packages/vue-vtable/demo/tsconfig.json b/packages/vue-vtable/demo/tsconfig.json new file mode 100644 index 000000000..505603ea7 --- /dev/null +++ b/packages/vue-vtable/demo/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve" + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/packages/vue-vtable/demo/tsconfig.node.json b/packages/vue-vtable/demo/tsconfig.node.json new file mode 100644 index 000000000..b242ad07b --- /dev/null +++ b/packages/vue-vtable/demo/tsconfig.node.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": [ + "vite.config.ts", + "vite.config.local.ts" + ] +} \ No newline at end of file diff --git a/packages/vue-vtable/demo/vite.config.ts b/packages/vue-vtable/demo/vite.config.ts new file mode 100644 index 000000000..2200e9668 --- /dev/null +++ b/packages/vue-vtable/demo/vite.config.ts @@ -0,0 +1,34 @@ +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue' +import path from 'path'; + +// let localConf: UserConfig = {}; + +// try { +// localConf = require('./vite.config.local').default; +// } catch (e) { +// console.warn('vite.config.local.ts not found', e); +// } + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue()], + define: { + __DEV__: true, + __VERSION__: JSON.stringify(require('../../vtable/package.json').version) + }, + optimizeDeps: {}, + server: { + host: '0.0.0.0', + port: 3100 + // port: localConf.server?.port || 3100 + }, + resolve: { + alias: { + '@visactor/vtable': path.resolve(__dirname, '../../vtable/src/index.ts'), + '@src': path.resolve(__dirname, '../../vtable/src/'), + '@vutils-extension': path.resolve(__dirname, '../../vtable/src/vutil-extension-temp') + // ...localConf.resolve?.alias + } + } +}); diff --git a/packages/vue-vtable/package.json b/packages/vue-vtable/package.json new file mode 100644 index 000000000..c3ab0a36e --- /dev/null +++ b/packages/vue-vtable/package.json @@ -0,0 +1,96 @@ +{ + "name": "@visactor/vue-vtable", + "version": "0.25.5", + "description": "The vue version of VTable", + "keywords": [ + "vue", + "grid", + "table", + "pivottable", + "visualization", + "VTable", + "VisActor", + "spreadsheet", + "canvas", + "datagrid", + "datatable" + ], + "author": { + "name": "VisActor", + "url": "https://VisActor.io/" + }, + "license": "MIT", + "sideEffects": false, + "main": "cjs/index.js", + "module": "es/index.js", + "types": "es/index.d.ts", + "files": [ + "cjs", + "es", + "dist" + ], + "exports": { + ".": { + "require": "./cjs/index.js", + "import": "./es/index.js" + } + }, + "scripts": { + "start": "vite ./demo", + "build": "bundle --clean", + "compile": "tsc --noEmit", + "eslint": "eslint --debug --fix src/" + }, + "unpkg": "latest", + "unpkgFiles": [ + "dist/vue-vtable.js" + ], + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@visactor/vtable": "workspace:*", + "@visactor/vutils": "~0.18.1" + }, + "devDependencies": { + "@visactor/vchart": "1.10.5", + "@internal/bundler": "workspace:*", + "@internal/eslint-config": "workspace:*", + "@internal/ts-config": "workspace:*", + "@rushstack/eslint-patch": "~1.1.4", + "vue": "^3.4.14", + "@vitejs/plugin-vue": "^5.0.3", + "eslint": "~8.18.0", + "vite": "3.2.6", + "typescript": "4.9.5", + "@babel/core": "7.20.12", + "@babel/preset-env": "7.20.2", + "@types/chai": "4.2.22", + "@types/jest": "^26.0.0", + "@types/mocha": "9.0.0", + "@types/node": "*", + "@types/offscreencanvas": "2019.6.4", + "chai": "4.3.4", + "jest": "^26.0.0", + "jest-electron": "^0.1.12", + "jest-transform-stub": "^2.0.0", + "magic-string": "^0.25.7", + "mocha": "9.1.3", + "postcss": "8.4.21", + "rimraf": "3.0.2", + "sass": "1.43.5", + "ts-jest": "^26.0.0", + "ts-loader": "9.2.6", + "ts-node": "10.9.0", + "tslib": "2.3.1", + "ttypescript": "1.5.13", + "typescript-transform-paths": "3.3.1", + "json-formatter-js": "^2.3.4", + "inversify": "6.0.1", + "vite-plugin-markdown": "^2.1.0", + "markdown-it": "^13.0.0", + "node-fetch": "2.6.7", + "form-data": "~4.0.0", + "axios": "^1.4.0" + } +} \ No newline at end of file diff --git a/packages/vue-vtable/setup-mock.js b/packages/vue-vtable/setup-mock.js new file mode 100644 index 000000000..b0df380be --- /dev/null +++ b/packages/vue-vtable/setup-mock.js @@ -0,0 +1,2 @@ +global.__DEV__ = true; +global.__VERSION__ = true; diff --git a/packages/vue-vtable/src/constants.ts b/packages/vue-vtable/src/constants.ts new file mode 100644 index 000000000..9efd91803 --- /dev/null +++ b/packages/vue-vtable/src/constants.ts @@ -0,0 +1 @@ +export const REACT_PRIVATE_PROPS = ['children', 'hooks', 'ref']; diff --git a/packages/vue-vtable/src/eventsUtils.ts b/packages/vue-vtable/src/eventsUtils.ts new file mode 100644 index 000000000..e4417affd --- /dev/null +++ b/packages/vue-vtable/src/eventsUtils.ts @@ -0,0 +1,186 @@ +import { ListTable, PivotTable, PivotChart } from '@visactor/vtable'; +import type { IVTable } from './tables/base-table'; +import type { TYPES } from '@visactor/vtable'; + +export type EventCallback = (params: Params) => void; + +const EVENT_TYPE = { + ...ListTable.EVENT_TYPE, + ...PivotTable.EVENT_TYPE, + ...PivotChart.EVENT_TYPE +}; + +export interface EventsProps { + onClickCell?: EventCallback; + onDblClickCell?: EventCallback; + onMouseDownCell?: EventCallback; + onMouseUpCell?: EventCallback; + onSelectedCell?: EventCallback; + onKeyDown?: EventCallback; + onMouseEnterTable?: EventCallback; + onMouseLeaveTable?: EventCallback; + onMouseDownTable?: EventCallback; + onMouseMoveCell?: EventCallback; + onMouseEnterCell?: EventCallback; + onMouseLeaveCell?: EventCallback; + onContextMenuCell?: EventCallback; + onResizeColumn?: EventCallback; + onResizeColumnEnd?: EventCallback; + onChangeHeaderPosition?: EventCallback; + onSortClick?: EventCallback; + onFreezeClick?: EventCallback; + onScroll?: EventCallback; + onDropdownMenuClick?: EventCallback; + onMouseOverChartSymbol?: EventCallback; + onDragSelectEnd?: EventCallback; + + onDropdownIconClick?: EventCallback; + onDropdownMenuClear?: EventCallback; + + onTreeHierarchyStateChange?: EventCallback; + + onShowMenu?: EventCallback; + onHideMenu?: EventCallback; + + onIconClick?: EventCallback; + + onLegendItemClick?: EventCallback; + onLegendItemHover?: EventCallback; + onLegendItemUnHover?: EventCallback; + onLegendChange?: EventCallback; + + onMouseEnterAxis?: EventCallback; + onMouseLeaveAxis?: EventCallback; + + onCheckboxStateChange?: EventCallback; + onRadioStateChange?: EventCallback; + onAfterRender?: EventCallback; + onInitialized?: EventCallback; + + // pivot table only + onPivotSortClick?: EventCallback; + onDrillMenuClick?: EventCallback; + + // pivot chart only + onVChartEventType?: EventCallback; + + onChangCellValue?: EventCallback; + + onMousedownFillHandle?: EventCallback; + onDragFillHandleEnd?: EventCallback; + onDblclickFillHandle?: EventCallback; + + onScrollVerticalEnd?: EventCallback; + onScrollHorizontalEnd?: EventCallback; +} + +export const TABLE_EVENTS = { + onClickCell: EVENT_TYPE.CLICK_CELL, + onDblClickCell: EVENT_TYPE.DBLCLICK_CELL, + onMouseDownCell: EVENT_TYPE.MOUSEDOWN_CELL, + onMouseUpCell: EVENT_TYPE.MOUSEUP_CELL, + onSelectedCell: EVENT_TYPE.SELECTED_CELL, + onKeyDown: EVENT_TYPE.KEYDOWN, + onMouseEnterTable: EVENT_TYPE.MOUSEENTER_TABLE, + onMouseLeaveTable: EVENT_TYPE.MOUSELEAVE_TABLE, + onMouseDownTable: EVENT_TYPE.MOUSEDOWN_TABLE, + onMouseMoveCell: EVENT_TYPE.MOUSEMOVE_CELL, + onMouseEnterCell: EVENT_TYPE.MOUSEENTER_CELL, + onMouseLeaveCell: EVENT_TYPE.MOUSELEAVE_CELL, + onContextMenuCell: EVENT_TYPE.CONTEXTMENU_CELL, + onResizeColumn: EVENT_TYPE.RESIZE_COLUMN, + onResizeColumnEnd: EVENT_TYPE.RESIZE_COLUMN_END, + onChangeHeaderPosition: EVENT_TYPE.CHANGE_HEADER_POSITION, + onSortClick: EVENT_TYPE.SORT_CLICK, + onFreezeClick: EVENT_TYPE.FREEZE_CLICK, + onScroll: EVENT_TYPE.SCROLL, + onDropdownMenuClick: EVENT_TYPE.DROPDOWN_MENU_CLICK, + onMouseOverChartSymbol: EVENT_TYPE.MOUSEOVER_CHART_SYMBOL, + onDragSelectEnd: EVENT_TYPE.DRAG_SELECT_END, + + onDropdownIconClick: EVENT_TYPE.DROPDOWN_ICON_CLICK, + onDropdownMenuClear: EVENT_TYPE.DROPDOWN_MENU_CLEAR, + + onTreeHierarchyStateChange: EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE, + + onShowMenu: EVENT_TYPE.SHOW_MENU, + onHideMenu: EVENT_TYPE.HIDE_MENU, + + onIconClick: EVENT_TYPE.ICON_CLICK, + + onLegendItemClick: EVENT_TYPE.LEGEND_ITEM_CLICK, + onLegendItemHover: EVENT_TYPE.LEGEND_ITEM_HOVER, + onLegendItemUnHover: EVENT_TYPE.LEGEND_ITEM_UNHOVER, + onLegendChange: EVENT_TYPE.LEGEND_CHANGE, + + onMouseEnterAxis: EVENT_TYPE.MOUSEENTER_AXIS, + onMouseLeaveAxis: EVENT_TYPE.MOUSELEAVE_AXIS, + + onCheckboxStateChange: EVENT_TYPE.CHECKBOX_STATE_CHANGE, + onRadioStateChange: EVENT_TYPE.RADIO_STATE_CHANGE, + onAfterRender: EVENT_TYPE.AFTER_RENDER, + onInitialized: EVENT_TYPE.INITIALIZED, + + // pivot table only + onPivotSortClick: EVENT_TYPE.PIVOT_SORT_CLICK, + onDrillMenuClick: EVENT_TYPE.DRILLMENU_CLICK, + + // pivot chart only + onVChartEventType: EVENT_TYPE.VCHART_EVENT_TYPE, + + onChangCellValue: EVENT_TYPE.CHANGE_CELL_VALUE, + onMousedownFillHandle: EVENT_TYPE.MOUSEDOWN_FILL_HANDLE, + onDragFillHandleEnd: EVENT_TYPE.DRAG_FILL_HANDLE_END, + onDblclickFillHandle: EVENT_TYPE.DBLCLICK_FILL_HANDLE, + onScrollVerticalEnd: EVENT_TYPE.SCROLL_VERTICAL_END, + onScrollHorizontalEnd: EVENT_TYPE.SCROLL_HORIZONTAL_END +}; + +export const TABLE_EVENTS_KEYS = Object.keys(TABLE_EVENTS); + +export const findEventProps = ( + props: T, + supportedEvents: Record = TABLE_EVENTS +): EventsProps => { + const result: EventsProps = {}; + + Object.keys(props).forEach(key => { + if (supportedEvents[key] && props[key]) { + result[key] = props[key]; + } + }); + + return result; +}; + +export const bindEventsToTable = ( + table: IVTable, + newProps?: T | null, + prevProps?: T | null, + supportedEvents: Record = TABLE_EVENTS +) => { + if ((!newProps && !prevProps) || !table) { + return false; + } + + const prevEventProps = prevProps ? findEventProps(prevProps, supportedEvents) : null; + const newEventProps = newProps ? findEventProps(newProps, supportedEvents) : null; + + if (prevEventProps) { + Object.keys(prevEventProps).forEach(eventKey => { + if (!newEventProps || !newEventProps[eventKey] || newEventProps[eventKey] !== prevEventProps[eventKey]) { + table.off(supportedEvents[eventKey], prevProps[eventKey]); + } + }); + } + + if (newEventProps) { + Object.keys(newEventProps).forEach(eventKey => { + if (!prevEventProps || !prevEventProps[eventKey] || prevEventProps[eventKey] !== newEventProps[eventKey]) { + table.on(supportedEvents[eventKey] as keyof TYPES.TableEventHandlersEventArgumentMap, newEventProps[eventKey]); + } + }); + } + + return true; +}; diff --git a/packages/vue-vtable/src/global.d.ts b/packages/vue-vtable/src/global.d.ts new file mode 100644 index 000000000..415c2c827 --- /dev/null +++ b/packages/vue-vtable/src/global.d.ts @@ -0,0 +1 @@ +declare const __VERSION__: string; diff --git a/packages/vue-vtable/src/index.ts b/packages/vue-vtable/src/index.ts new file mode 100644 index 000000000..bee210cb9 --- /dev/null +++ b/packages/vue-vtable/src/index.ts @@ -0,0 +1,5 @@ +import * as VTable from '@visactor/vtable'; +export * from './tables'; +export { VTable }; + +export const version = __VERSION__; diff --git a/packages/vue-vtable/src/tables/base-table.tsx b/packages/vue-vtable/src/tables/base-table.tsx new file mode 100644 index 000000000..fd91c1759 --- /dev/null +++ b/packages/vue-vtable/src/tables/base-table.tsx @@ -0,0 +1,82 @@ +/* eslint-disable react/display-name */ +import * as VTable from '@visactor/vtable'; +import { isNil } from '@visactor/vutils'; +import { toArray } from '../util'; +import { REACT_PRIVATE_PROPS } from '../constants'; +import type { EventsProps } from '../eventsUtils'; +import { TABLE_EVENTS_KEYS } from '../eventsUtils'; + +export type IVTable = VTable.ListTable | VTable.PivotTable | VTable.PivotChart; +export type IOption = + | VTable.ListTableConstructorOptions + | VTable.PivotTableConstructorOptions + | VTable.PivotChartConstructorOptions; + +export interface BaseTableProps extends EventsProps { + type?: string; + /** 上层container */ + container?: HTMLDivElement; + /** option */ + option?: any; + /** 数据 */ + records?: Record[]; + /** 画布宽度 */ + width?: number; + /** 画布高度 */ + height?: number; + skipFunctionDiff?: boolean; + + /** 表格渲染完成事件 */ + onReady?: (instance: IVTable, isInitial: boolean) => void; + /** throw error when chart run into an error */ + onError?: (err: Error) => void; +} + +type Props = React.PropsWithChildren; + +const notOptionKeys = [ + ...REACT_PRIVATE_PROPS, + ...TABLE_EVENTS_KEYS, + 'skipFunctionDiff', + 'onError', + 'onReady', + 'option', + 'records', + 'container' +]; + +const getComponentId = (child: React.ReactNode, index: number) => { + const componentName = child && (child as any).type && ((child as any).type.displayName || (child as any).type.name); + return `${componentName}-${index}`; +}; + +const parseOptionFromChildren = (props: Props) => { + const optionFromChildren: Omit = {}; + + toArray(props.children).map((child, index) => { + const parseOption = child && (child as any).type && (child as any).type.parseOption; + + if (parseOption && (child as any).props) { + const childProps = isNil((child as any).props.componentId) + ? { + ...(child as any).props, + componentId: getComponentId(child, index) + } + : (child as any).props; + + const optionResult = parseOption(childProps); + + if (optionResult.isSingle) { + optionFromChildren[optionResult.optionName] = optionResult.option; + } else { + if (!optionFromChildren[optionResult.optionName]) { + optionFromChildren[optionResult.optionName] = []; + } + + optionFromChildren[optionResult.optionName].push(optionResult.option); + } + } + }); + + return optionFromChildren; +}; diff --git a/packages/vue-vtable/src/tables/index.ts b/packages/vue-vtable/src/tables/index.ts new file mode 100644 index 000000000..2bdc47afd --- /dev/null +++ b/packages/vue-vtable/src/tables/index.ts @@ -0,0 +1 @@ +export { default as ListTable } from './list-table.vue'; \ No newline at end of file diff --git a/packages/vue-vtable/src/tables/list-table.vue b/packages/vue-vtable/src/tables/list-table.vue new file mode 100644 index 000000000..508bd17e1 --- /dev/null +++ b/packages/vue-vtable/src/tables/list-table.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/packages/vue-vtable/src/util.ts b/packages/vue-vtable/src/util.ts new file mode 100644 index 000000000..08b5a2f38 --- /dev/null +++ b/packages/vue-vtable/src/util.ts @@ -0,0 +1,102 @@ +import { isNil, isArray, isString, isFunction, isPlainObject } from '@visactor/vutils'; +import type { ReactNode } from 'react'; +import React from 'react'; +import { isFragment } from 'react-is'; + +let id = 0; + +export const uid = (prefix?: string) => { + if (prefix) { + return `${prefix}-${id++}`; + } + + return `${id++}`; +}; + +/** + * Get the display name of a component + * @param {Object} Comp Specified Component + * @return {String} Display name of Component + */ +export const getDisplayName = (Comp: any) => { + if (typeof Comp === 'string') { + return Comp; + } + if (!Comp) { + return ''; + } + return Comp.displayName || Comp.name; +}; + +export const typeOfComponent = (component: any, customTypeKey = '__TYPE'): string => { + return ( + (component?.props && component.props[customTypeKey]) || + (typeof component?.type === 'string' && component.type) || + (component?.type && + typeof component.type === 'symbol' && + component.type.toString() === 'Symbol(react.fragment)' && + 'react.fragment') || + (typeof component?.type === 'function' && component.type) || + (typeof component?.type === 'object' && + component.type.$$typeof.toString() === 'Symbol(react.forward_ref)' && + 'react.forward_ref') || + (typeof component === 'string' && 'string') || + (typeof component === 'function' && 'function') || + undefined + ); +}; + +export const toArray = (children: T): TC[] => { + let result: TC[] = []; + + React.Children.forEach(children, child => { + if (isNil(child)) { + return; + } + + if (isFragment(child)) { + result = result.concat(toArray(child.props.children)); + } else { + result.push(child as unknown as TC); + } + }); + + return result; +}; + +/* + * Find and return all matched children by type. `type` can be a React element class or + * string + */ +export const findAllByType = ( + children: React.ReactNode, + type: TC | TC[] +): T[] => { + const result: T[] = []; + let types: string[] = []; + + if (isArray(type)) { + types = type.map(t => getDisplayName(t)); + } else { + types = [getDisplayName(type)]; + } + + toArray(children).forEach(child => { + const childType = getDisplayName(typeOfComponent(child)); + + if (types.indexOf(childType) !== -1) { + result.push(child as T); + } + }); + + return result; +}; +/* + * Return the first matched child by type, return null otherwise. + * `type` can be a React element class or string. + */ +export const findChildByType = (children: React.ReactNode, type: TC): T => { + const result = findAllByType(children, type); + + return result?.[0]; +}; diff --git a/packages/vue-vtable/tscofig.eslint.json b/packages/vue-vtable/tscofig.eslint.json new file mode 100644 index 000000000..a8b2b56da --- /dev/null +++ b/packages/vue-vtable/tscofig.eslint.json @@ -0,0 +1,20 @@ +{ + "extends": "@internal/ts-config/tsconfig.base.json", + "compilerOptions": { + "types": [ + "jest", + "offscreencanvas", + "node" + ], + "lib": [ + "DOM", + "ESNext" + ], + "baseUrl": "./", + "rootDir": "./" + }, + "include": [ + "src", + "demo" + ] +} \ No newline at end of file diff --git a/packages/vue-vtable/tsconfig.json b/packages/vue-vtable/tsconfig.json new file mode 100644 index 000000000..75891b766 --- /dev/null +++ b/packages/vue-vtable/tsconfig.json @@ -0,0 +1,24 @@ +{ + "extends": "@internal/ts-config/tsconfig.base.json", + "compilerOptions": { + "jsx": "react", + "types": ["jest", "offscreencanvas", "node"], + "lib": ["DOM", "ESNext"], + "baseUrl": "./", + "rootDir": "./src", + "paths": { + } + }, + "ts-node": { + "transpileOnly": true, + "compilerOptions": { + "module": "commonjs" + } + }, + "references": [ + { + "path": "../vtable" + } + ], + "include": ["src"] +} \ No newline at end of file diff --git a/rush.json b/rush.json index 49ba6a59f..c2c25c6cc 100644 --- a/rush.json +++ b/rush.json @@ -83,6 +83,15 @@ "shouldPublish": true, "versionPolicyName": "vtableMain" }, + { + "packageName": "@visactor/vue-vtable", + "projectFolder": "packages/vue-vtable", + "tags": [ + "package" + ], + "shouldPublish": true, + "versionPolicyName": "vtableMain" + }, { "packageName": "@visactor/openinula-vtable", "projectFolder": "packages/openinula-vtable", From 45be0e65af55d25f5850903a34baa93b2a816982 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Wed, 15 May 2024 15:50:29 +0800 Subject: [PATCH 02/34] chore: add vue eslint rules --- common/config/rush/pnpm-lock.yaml | 58 +++++++++- packages/vue-vtable/.eslintrc.js | 9 +- packages/vue-vtable/demo/src/App.vue | 2 - packages/vue-vtable/package.json | 4 +- packages/vue-vtable/src/tables/base-table.ts | 28 +++++ packages/vue-vtable/src/tables/base-table.tsx | 82 -------------- packages/vue-vtable/src/tables/index.ts | 2 +- packages/vue-vtable/src/tables/list-table.vue | 11 +- packages/vue-vtable/src/util.ts | 102 ------------------ packages/vue-vtable/tsconfig.json | 5 +- share/eslint-config/package.json | 5 +- share/eslint-config/profile/common.js | 25 ++++- share/eslint-config/profile/vue.js | 1 + 13 files changed, 124 insertions(+), 210 deletions(-) create mode 100644 packages/vue-vtable/src/tables/base-table.ts delete mode 100644 packages/vue-vtable/src/tables/base-table.tsx delete mode 100644 packages/vue-vtable/src/util.ts create mode 100644 share/eslint-config/profile/vue.js diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index c2987d8f0..78b7d2324 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -649,6 +649,7 @@ importers: axios: ^1.4.0 chai: 4.3.4 eslint: ~8.18.0 + eslint-plugin-vue: ^9.26.0 form-data: ~4.0.0 inversify: 6.0.1 jest: ^26.0.0 @@ -672,6 +673,7 @@ importers: vite: 3.2.6 vite-plugin-markdown: ^2.1.0 vue: ^3.4.14 + vue-eslint-parser: ^9.4.2 dependencies: '@visactor/vtable': link:../vtable '@visactor/vutils': 0.18.1 @@ -692,6 +694,7 @@ importers: axios: 1.6.8 chai: 4.3.4 eslint: 8.18.0 + eslint-plugin-vue: 9.26.0_eslint@8.18.0 form-data: 4.0.0 inversify: 6.0.1 jest: 26.6.3_ts-node@10.9.0 @@ -715,6 +718,7 @@ importers: vite: 3.2.6_v6jnjveypdiyhm2qwcbxbcwzue vite-plugin-markdown: 2.2.0_vite@3.2.6 vue: 3.4.27_typescript@4.9.5 + vue-eslint-parser: 9.4.2_eslint@8.18.0 ../../share/eslint-config: specifiers: @@ -726,6 +730,7 @@ importers: eslint-plugin-promise: 6.0.0 eslint-plugin-react: 7.30.1 eslint-plugin-react-hooks: 4.6.0 + eslint-plugin-vue: ^9.26.0 prettier: ^2.8.8 typescript: 4.9.5 dependencies: @@ -736,6 +741,7 @@ importers: eslint-plugin-promise: 6.0.0_eslint@8.18.0 eslint-plugin-react: 7.30.1_eslint@8.18.0 eslint-plugin-react-hooks: 4.6.0_eslint@8.18.0 + eslint-plugin-vue: 9.26.0_eslint@8.18.0 prettier: 2.8.8 devDependencies: eslint: 8.18.0 @@ -2213,6 +2219,15 @@ packages: dev: true optional: true + /@eslint-community/eslint-utils/4.4.0_eslint@8.18.0: + resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 + dependencies: + eslint: 8.18.0 + eslint-visitor-keys: 3.4.3 + /@eslint/eslintrc/1.4.1: resolution: {integrity: sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -4781,7 +4796,6 @@ packages: /boolbase/1.0.0: resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} - dev: false /boolean/3.2.0: resolution: {integrity: sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==} @@ -5518,7 +5532,6 @@ packages: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} hasBin: true - dev: false /cssfontparser/1.2.1: resolution: {integrity: sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==} @@ -6584,6 +6597,24 @@ packages: string.prototype.matchall: 4.0.11 dev: false + /eslint-plugin-vue/9.26.0_eslint@8.18.0: + resolution: {integrity: sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==} + engines: {node: ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 + dependencies: + '@eslint-community/eslint-utils': 4.4.0_eslint@8.18.0 + eslint: 8.18.0 + globals: 13.24.0 + natural-compare: 1.4.0 + nth-check: 2.1.1 + postcss-selector-parser: 6.0.16 + semver: 7.6.0 + vue-eslint-parser: 9.4.2_eslint@8.18.0 + xml-name-validator: 4.0.0 + transitivePeerDependencies: + - supports-color + /eslint-scope/5.1.1: resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==} engines: {node: '>=8.0.0'} @@ -10227,7 +10258,6 @@ packages: resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} dependencies: boolbase: 1.0.0 - dev: false /number-is-nan/1.0.1: resolution: {integrity: sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==} @@ -11131,7 +11161,6 @@ packages: dependencies: cssesc: 3.0.0 util-deprecate: 1.0.2 - dev: false /postcss-svgo/5.1.0_postcss@8.4.21: resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==} @@ -13775,6 +13804,23 @@ packages: - terser dev: true + /vue-eslint-parser/9.4.2_eslint@8.18.0: + resolution: {integrity: sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==} + engines: {node: ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: '>=6.0.0' + dependencies: + debug: 4.3.4 + eslint: 8.18.0 + eslint-scope: 7.2.2 + eslint-visitor-keys: 3.4.3 + espree: 9.6.1 + esquery: 1.5.0 + lodash: 4.17.21 + semver: 7.6.0 + transitivePeerDependencies: + - supports-color + /vue/3.4.27_typescript@4.9.5: resolution: {integrity: sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==} peerDependencies: @@ -14012,6 +14058,10 @@ packages: resolution: {integrity: sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==} dev: true + /xml-name-validator/4.0.0: + resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==} + engines: {node: '>=12'} + /xmlchars/2.2.0: resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} diff --git a/packages/vue-vtable/.eslintrc.js b/packages/vue-vtable/.eslintrc.js index 9985a061b..51d0b5241 100644 --- a/packages/vue-vtable/.eslintrc.js +++ b/packages/vue-vtable/.eslintrc.js @@ -5,8 +5,15 @@ module.exports = { extends: ['@internal/eslint-config/profile/lib', '@internal/eslint-config/profile/vue'], parserOptions: { tsconfigRootDir: __dirname, - project: './tscofig.eslint.json' + parser: '@typescript-eslint/parser', // 如果您使用 TypeScript + project: './tscofig.eslint.json', + extraFileExtensions: ['.vue'] }, + plugins: [ + // ... 其他 plugins + 'vue' + ], + parser: 'vue-eslint-parser', overrides: [ { files: ['**/__tests__/**', '**/*.test.ts'], diff --git a/packages/vue-vtable/demo/src/App.vue b/packages/vue-vtable/demo/src/App.vue index 9c9381558..ed20b4fa7 100644 --- a/packages/vue-vtable/demo/src/App.vue +++ b/packages/vue-vtable/demo/src/App.vue @@ -4,9 +4,7 @@ import listtable from './list-table/list-table.vue'; diff --git a/packages/vue-vtable/package.json b/packages/vue-vtable/package.json index c3ab0a36e..d71d0370f 100644 --- a/packages/vue-vtable/package.json +++ b/packages/vue-vtable/package.json @@ -91,6 +91,8 @@ "markdown-it": "^13.0.0", "node-fetch": "2.6.7", "form-data": "~4.0.0", - "axios": "^1.4.0" + "axios": "^1.4.0", + "eslint-plugin-vue": "^9.26.0", + "vue-eslint-parser": "^9.4.2" } } \ No newline at end of file diff --git a/packages/vue-vtable/src/tables/base-table.ts b/packages/vue-vtable/src/tables/base-table.ts new file mode 100644 index 000000000..69fbaf07a --- /dev/null +++ b/packages/vue-vtable/src/tables/base-table.ts @@ -0,0 +1,28 @@ +import type * as VTable from '@visactor/vtable'; +import type { EventsProps } from '../eventsUtils'; + +export type IVTable = VTable.ListTable | VTable.PivotTable | VTable.PivotChart; +export type IOption = + | VTable.ListTableConstructorOptions + | VTable.PivotTableConstructorOptions + | VTable.PivotChartConstructorOptions; + +export interface BaseTableProps extends EventsProps { + type?: string; + /** 上层container */ + container?: HTMLDivElement; + /** option */ + option?: any; + /** 数据 */ + records?: Record[]; + /** 画布宽度 */ + width?: number; + /** 画布高度 */ + height?: number; + skipFunctionDiff?: boolean; + + /** 表格渲染完成事件 */ + onReady?: (instance: IVTable, isInitial: boolean) => void; + /** throw error when chart run into an error */ + onError?: (err: Error) => void; +} diff --git a/packages/vue-vtable/src/tables/base-table.tsx b/packages/vue-vtable/src/tables/base-table.tsx deleted file mode 100644 index fd91c1759..000000000 --- a/packages/vue-vtable/src/tables/base-table.tsx +++ /dev/null @@ -1,82 +0,0 @@ -/* eslint-disable react/display-name */ -import * as VTable from '@visactor/vtable'; -import { isNil } from '@visactor/vutils'; -import { toArray } from '../util'; -import { REACT_PRIVATE_PROPS } from '../constants'; -import type { EventsProps } from '../eventsUtils'; -import { TABLE_EVENTS_KEYS } from '../eventsUtils'; - -export type IVTable = VTable.ListTable | VTable.PivotTable | VTable.PivotChart; -export type IOption = - | VTable.ListTableConstructorOptions - | VTable.PivotTableConstructorOptions - | VTable.PivotChartConstructorOptions; - -export interface BaseTableProps extends EventsProps { - type?: string; - /** 上层container */ - container?: HTMLDivElement; - /** option */ - option?: any; - /** 数据 */ - records?: Record[]; - /** 画布宽度 */ - width?: number; - /** 画布高度 */ - height?: number; - skipFunctionDiff?: boolean; - - /** 表格渲染完成事件 */ - onReady?: (instance: IVTable, isInitial: boolean) => void; - /** throw error when chart run into an error */ - onError?: (err: Error) => void; -} - -type Props = React.PropsWithChildren; - -const notOptionKeys = [ - ...REACT_PRIVATE_PROPS, - ...TABLE_EVENTS_KEYS, - 'skipFunctionDiff', - 'onError', - 'onReady', - 'option', - 'records', - 'container' -]; - -const getComponentId = (child: React.ReactNode, index: number) => { - const componentName = child && (child as any).type && ((child as any).type.displayName || (child as any).type.name); - return `${componentName}-${index}`; -}; - -const parseOptionFromChildren = (props: Props) => { - const optionFromChildren: Omit = {}; - - toArray(props.children).map((child, index) => { - const parseOption = child && (child as any).type && (child as any).type.parseOption; - - if (parseOption && (child as any).props) { - const childProps = isNil((child as any).props.componentId) - ? { - ...(child as any).props, - componentId: getComponentId(child, index) - } - : (child as any).props; - - const optionResult = parseOption(childProps); - - if (optionResult.isSingle) { - optionFromChildren[optionResult.optionName] = optionResult.option; - } else { - if (!optionFromChildren[optionResult.optionName]) { - optionFromChildren[optionResult.optionName] = []; - } - - optionFromChildren[optionResult.optionName].push(optionResult.option); - } - } - }); - - return optionFromChildren; -}; diff --git a/packages/vue-vtable/src/tables/index.ts b/packages/vue-vtable/src/tables/index.ts index 2bdc47afd..c67226773 100644 --- a/packages/vue-vtable/src/tables/index.ts +++ b/packages/vue-vtable/src/tables/index.ts @@ -1 +1 @@ -export { default as ListTable } from './list-table.vue'; \ No newline at end of file +export { default as ListTable } from './list-table.vue'; diff --git a/packages/vue-vtable/src/tables/list-table.vue b/packages/vue-vtable/src/tables/list-table.vue index 508bd17e1..4b0ae9b1b 100644 --- a/packages/vue-vtable/src/tables/list-table.vue +++ b/packages/vue-vtable/src/tables/list-table.vue @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/packages/vue-vtable/src/tables/index.ts b/packages/vue-vtable/src/tables/index.ts index c67226773..300fbd090 100644 --- a/packages/vue-vtable/src/tables/index.ts +++ b/packages/vue-vtable/src/tables/index.ts @@ -1 +1,4 @@ export { default as ListTable } from './list-table.vue'; +export { default as PivotTable } from './pivot-table.vue'; +export { default as PivotChart } from './pivot-chart.vue'; +export { registerChartModule } from './chartModule'; diff --git a/packages/vue-vtable/src/tables/list-table.vue b/packages/vue-vtable/src/tables/list-table.vue index 4b0ae9b1b..e9c925ee2 100644 --- a/packages/vue-vtable/src/tables/list-table.vue +++ b/packages/vue-vtable/src/tables/list-table.vue @@ -1,39 +1,27 @@ - - - +const baseTableRef = ref | null>(null); +const vTableInstance = computed(() => baseTableRef.value ? baseTableRef.value.vTableInstance : null); +defineExpose({ vTableInstance }); + \ No newline at end of file diff --git a/packages/vue-vtable/src/tables/pivot-chart.vue b/packages/vue-vtable/src/tables/pivot-chart.vue new file mode 100644 index 000000000..345f76f68 --- /dev/null +++ b/packages/vue-vtable/src/tables/pivot-chart.vue @@ -0,0 +1,27 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/src/tables/pivot-table.vue b/packages/vue-vtable/src/tables/pivot-table.vue new file mode 100644 index 000000000..31361ed07 --- /dev/null +++ b/packages/vue-vtable/src/tables/pivot-table.vue @@ -0,0 +1,27 @@ + + + \ No newline at end of file From 9f3b23264822ef61cdc12378ea758343d4063b88 Mon Sep 17 00:00:00 2001 From: YEL!ne <1638317920@qq.com> Date: Sun, 21 Jul 2024 22:41:50 +0800 Subject: [PATCH 06/34] feat: register chart module --- packages/vue-vtable/src/tables/chartModule.ts | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/vue-vtable/src/tables/chartModule.ts diff --git a/packages/vue-vtable/src/tables/chartModule.ts b/packages/vue-vtable/src/tables/chartModule.ts new file mode 100644 index 000000000..1c825e091 --- /dev/null +++ b/packages/vue-vtable/src/tables/chartModule.ts @@ -0,0 +1,5 @@ +import * as VTable from '@visactor/vtable'; + +export const registerChartModule = (name: string, chart: any) => { + VTable.register.chartModule(name, chart); +}; From 5cc7a4c8149334d54573453b76cd74baa88a43f7 Mon Sep 17 00:00:00 2001 From: YEL!ne <1638317920@qq.com> Date: Sun, 21 Jul 2024 22:42:58 +0800 Subject: [PATCH 07/34] feat: update Vue VTable demo with new components and options --- packages/vue-vtable/demo/index.html | 2 +- packages/vue-vtable/demo/src/App.vue | 31 +- .../demo/src/components/content.vue | 75 +++ .../demo/src/components/sidebar.vue | 116 ++++ .../demo/src/list-table/ListTable.vue | 338 ------------ packages/vue-vtable/demo/src/main.ts | 10 +- .../list-table/list-table-edit.vue | 99 ++++ .../list-table/list-table-pagination.vue | 189 +++++++ .../pivot-chart/pivot-chart-listTable.vue | 245 +++++++++ .../composition/pivot-chart/pivot-chart.vue | 506 ++++++++++++++++++ .../pivot-table/pivot-table-lazyTreeload.vue | 480 +++++++++++++++++ .../list-table/list-table-checkbox.vue | 55 ++ .../options/list-table/list-table-fetch.vue | 40 ++ .../list-table/list-table-transpose.vue | 59 ++ .../options}/list-table/list-table.vue | 3 +- .../pivot-table-titleOnDimension.vue | 151 ++++++ .../options/pivot-table/pivot-table-tree.vue | 247 +++++++++ .../options/pivot-table/pivot-table.vue | 386 +++++++++++++ 18 files changed, 2684 insertions(+), 348 deletions(-) create mode 100644 packages/vue-vtable/demo/src/components/content.vue create mode 100644 packages/vue-vtable/demo/src/components/sidebar.vue delete mode 100644 packages/vue-vtable/demo/src/list-table/ListTable.vue create mode 100644 packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-edit.vue create mode 100644 packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-pagination.vue create mode 100644 packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart-listTable.vue create mode 100644 packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart.vue create mode 100644 packages/vue-vtable/demo/src/table/unified/composition/pivot-table/pivot-table-lazyTreeload.vue create mode 100644 packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-checkbox.vue create mode 100644 packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-fetch.vue create mode 100644 packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-transpose.vue rename packages/vue-vtable/demo/src/{ => table/unified/options}/list-table/list-table.vue (91%) create mode 100644 packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table-titleOnDimension.vue create mode 100644 packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table-tree.vue create mode 100644 packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table.vue diff --git a/packages/vue-vtable/demo/index.html b/packages/vue-vtable/demo/index.html index b2c3c1b6b..a5649bbf9 100644 --- a/packages/vue-vtable/demo/index.html +++ b/packages/vue-vtable/demo/index.html @@ -3,7 +3,7 @@ - Vite + React + TS + Vite + Vue + TS
diff --git a/packages/vue-vtable/demo/src/App.vue b/packages/vue-vtable/demo/src/App.vue index ed20b4fa7..bb92d3ed6 100644 --- a/packages/vue-vtable/demo/src/App.vue +++ b/packages/vue-vtable/demo/src/App.vue @@ -1,10 +1,35 @@ - + diff --git a/packages/vue-vtable/demo/src/components/content.vue b/packages/vue-vtable/demo/src/components/content.vue new file mode 100644 index 000000000..ca47155c7 --- /dev/null +++ b/packages/vue-vtable/demo/src/components/content.vue @@ -0,0 +1,75 @@ + + + + + \ No newline at end of file diff --git a/packages/vue-vtable/demo/src/components/sidebar.vue b/packages/vue-vtable/demo/src/components/sidebar.vue new file mode 100644 index 000000000..2b19142aa --- /dev/null +++ b/packages/vue-vtable/demo/src/components/sidebar.vue @@ -0,0 +1,116 @@ + + + + + diff --git a/packages/vue-vtable/demo/src/list-table/ListTable.vue b/packages/vue-vtable/demo/src/list-table/ListTable.vue deleted file mode 100644 index 6ef234ced..000000000 --- a/packages/vue-vtable/demo/src/list-table/ListTable.vue +++ /dev/null @@ -1,338 +0,0 @@ - - - - - - diff --git a/packages/vue-vtable/demo/src/main.ts b/packages/vue-vtable/demo/src/main.ts index 75af2758f..b43f8920b 100644 --- a/packages/vue-vtable/demo/src/main.ts +++ b/packages/vue-vtable/demo/src/main.ts @@ -1,8 +1,10 @@ import { createApp } from 'vue'; import App from './App.vue'; -import {ListTable} from '../../src/index'; - +import { ListTable, PivotTable, PivotChart } from '../../src/index'; +// import './index.css'; const app = createApp(App); -app.component('vue-list-table', ListTable); // 这样在整个应用中都可以使用 标签了 -app.mount('#app'); \ No newline at end of file +app.component('VueListTable', ListTable); +app.component('VuePivotTable', PivotTable); +app.component('VuePivotChart', PivotChart); +app.mount('#app'); diff --git a/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-edit.vue b/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-edit.vue new file mode 100644 index 000000000..e7f096039 --- /dev/null +++ b/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-edit.vue @@ -0,0 +1,99 @@ + + + diff --git a/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-pagination.vue b/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-pagination.vue new file mode 100644 index 000000000..350a3fead --- /dev/null +++ b/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-pagination.vue @@ -0,0 +1,189 @@ + + + diff --git a/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart-listTable.vue b/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart-listTable.vue new file mode 100644 index 000000000..bd90ec4a9 --- /dev/null +++ b/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart-listTable.vue @@ -0,0 +1,245 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart.vue b/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart.vue new file mode 100644 index 000000000..a1058785d --- /dev/null +++ b/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart.vue @@ -0,0 +1,506 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/demo/src/table/unified/composition/pivot-table/pivot-table-lazyTreeload.vue b/packages/vue-vtable/demo/src/table/unified/composition/pivot-table/pivot-table-lazyTreeload.vue new file mode 100644 index 000000000..b8d67e1b3 --- /dev/null +++ b/packages/vue-vtable/demo/src/table/unified/composition/pivot-table/pivot-table-lazyTreeload.vue @@ -0,0 +1,480 @@ + + + diff --git a/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-checkbox.vue b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-checkbox.vue new file mode 100644 index 000000000..23e365424 --- /dev/null +++ b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-checkbox.vue @@ -0,0 +1,55 @@ + + + diff --git a/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-fetch.vue b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-fetch.vue new file mode 100644 index 000000000..31d6edb29 --- /dev/null +++ b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-fetch.vue @@ -0,0 +1,40 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-transpose.vue b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-transpose.vue new file mode 100644 index 000000000..8f537c32b --- /dev/null +++ b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table-transpose.vue @@ -0,0 +1,59 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/demo/src/list-table/list-table.vue b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table.vue similarity index 91% rename from packages/vue-vtable/demo/src/list-table/list-table.vue rename to packages/vue-vtable/demo/src/table/unified/options/list-table/list-table.vue index 3f5b8299e..ac779da6e 100644 --- a/packages/vue-vtable/demo/src/list-table/list-table.vue +++ b/packages/vue-vtable/demo/src/table/unified/options/list-table/list-table.vue @@ -1,12 +1,11 @@ diff --git a/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table-tree.vue b/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table-tree.vue new file mode 100644 index 000000000..63fc1d8f3 --- /dev/null +++ b/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table-tree.vue @@ -0,0 +1,247 @@ + + + diff --git a/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table.vue b/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table.vue new file mode 100644 index 000000000..abb18dee5 --- /dev/null +++ b/packages/vue-vtable/demo/src/table/unified/options/pivot-table/pivot-table.vue @@ -0,0 +1,386 @@ + + + \ No newline at end of file From 27408aa245c55cd0efdd2f9c74e8e117cb991446 Mon Sep 17 00:00:00 2001 From: YEL!ne <1638317920@qq.com> Date: Wed, 24 Jul 2024 22:30:17 +0800 Subject: [PATCH 08/34] fix: organize the code --- .../table/unified/composition/list-table/list-table-edit.vue | 2 +- .../unified/composition/list-table/list-table-pagination.vue | 1 - .../unified/composition/pivot-chart/pivot-chart-listTable.vue | 3 +-- packages/vue-vtable/src/tables/base-table.vue | 3 +-- packages/vue-vtable/src/tables/list-table.vue | 4 ++-- packages/vue-vtable/src/tables/pivot-chart.vue | 3 +-- packages/vue-vtable/src/tables/pivot-table.vue | 3 +-- 7 files changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-edit.vue b/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-edit.vue index e7f096039..d54b21356 100644 --- a/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-edit.vue +++ b/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-edit.vue @@ -40,7 +40,7 @@ const handleClickCell = (args) => { }; const handleDropdownMenuClick = (args) => { - // console.log('menu click', args); + console.log('menu click', args); if (args.menuKey === 'copy') { copyData.value = listTableRef.value.baseTableRef.vTableInstance.getCopyValue(); } else if (args.menuKey === 'paste') { diff --git a/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-pagination.vue b/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-pagination.vue index 350a3fead..9e2b5f0fc 100644 --- a/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-pagination.vue +++ b/packages/vue-vtable/demo/src/table/unified/composition/list-table/list-table-pagination.vue @@ -121,7 +121,6 @@ onMounted(async () => { await nextTick(); createPagination(10, 1, tableRef.value.vTableInstance); - console.log('tableRef', tableRef.value); tableRef.value.vTableInstance.on('dropdown_menu_click', args => { console.log('menu click', args); diff --git a/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart-listTable.vue b/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart-listTable.vue index bd90ec4a9..07bf3bb0f 100644 --- a/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart-listTable.vue +++ b/packages/vue-vtable/demo/src/table/unified/composition/pivot-chart/pivot-chart-listTable.vue @@ -239,7 +239,6 @@ const option = { autoFillWidth: true }; -// Set the table options tableOptions.value = option; -console.log(tableOptions.value); + \ No newline at end of file diff --git a/packages/vue-vtable/src/tables/base-table.vue b/packages/vue-vtable/src/tables/base-table.vue index 618b5bc60..b6c2acf54 100644 --- a/packages/vue-vtable/src/tables/base-table.vue +++ b/packages/vue-vtable/src/tables/base-table.vue @@ -29,13 +29,12 @@ export interface BaseTableProps extends EventsProps { const props = withDefaults(defineProps(), { width: '100%', height: '100%', - records: () => [], }); const emit = defineEmits(TABLE_EVENTS_KEYS); const vTableContainer = ref(null); const vTableInstance = shallowRef(null); -defineExpose({ vTableInstance });// need to find a way to expose vTableInstance +defineExpose({ vTableInstance });//需要优化,暴露的方式不够“优雅” const containerWidth = computed(() => (typeof props.width === 'number' ? `${props.width}px` : props.width)); const containerHeight = computed(() => (typeof props.height === 'number' ? `${props.height}px` : props.height)); diff --git a/packages/vue-vtable/src/tables/list-table.vue b/packages/vue-vtable/src/tables/list-table.vue index e9c925ee2..fa0546e0d 100644 --- a/packages/vue-vtable/src/tables/list-table.vue +++ b/packages/vue-vtable/src/tables/list-table.vue @@ -13,14 +13,14 @@ import { ref, computed, defineProps} from 'vue'; import BaseTable from './base-table.vue'; -// Define props -const props = defineProps<{ +defineProps<{ options: Record, records?: Array>, width?: string | number, height?: string | number, }>(); +// 需要优化,暴露的方式不够“优雅” const baseTableRef = ref | null>(null); const vTableInstance = computed(() => baseTableRef.value ? baseTableRef.value.vTableInstance : null); defineExpose({ vTableInstance }); diff --git a/packages/vue-vtable/src/tables/pivot-chart.vue b/packages/vue-vtable/src/tables/pivot-chart.vue index 345f76f68..e064e4b75 100644 --- a/packages/vue-vtable/src/tables/pivot-chart.vue +++ b/packages/vue-vtable/src/tables/pivot-chart.vue @@ -13,8 +13,7 @@ import { ref, computed, defineProps,} from 'vue'; import BaseTable from './base-table.vue'; -// Define props -const props = defineProps<{ +defineProps<{ options: Record, records?: Array>, width?: string | number, diff --git a/packages/vue-vtable/src/tables/pivot-table.vue b/packages/vue-vtable/src/tables/pivot-table.vue index 31361ed07..9ca1a1f21 100644 --- a/packages/vue-vtable/src/tables/pivot-table.vue +++ b/packages/vue-vtable/src/tables/pivot-table.vue @@ -13,8 +13,7 @@ import { ref, computed, defineProps,} from 'vue'; import BaseTable from './base-table.vue'; -// Define props -const props = defineProps<{ +defineProps<{ options: Record, records?: Array>, width?: string | number, From 136e1b513a6630a235ab1848a83aeffcac5291f4 Mon Sep 17 00:00:00 2001 From: YEL!ne <1638317920@qq.com> Date: Thu, 25 Jul 2024 13:20:13 +0800 Subject: [PATCH 09/34] docs: update changlog of rush --- .../@visactor/vtable/feat-vue_2024-07-25-05-20.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/feat-vue_2024-07-25-05-20.json diff --git a/common/changes/@visactor/vtable/feat-vue_2024-07-25-05-20.json b/common/changes/@visactor/vtable/feat-vue_2024-07-25-05-20.json new file mode 100644 index 000000000..68fb6bdb9 --- /dev/null +++ b/common/changes/@visactor/vtable/feat-vue_2024-07-25-05-20.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: organize the code\n\n", + "type": "none", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "1638317920@qq.com" +} \ No newline at end of file From c2600f9a064c6460daefc9c39976d7c0927bdd5c Mon Sep 17 00:00:00 2001 From: YEL!ne <1638317920@qq.com> Date: Mon, 5 Aug 2024 18:06:46 +0800 Subject: [PATCH 10/34] feat: improving options handling for grammatical tag --- packages/vue-vtable/src/index.ts | 2 + packages/vue-vtable/src/tables/base-table.vue | 64 +++++++----- packages/vue-vtable/src/tables/list-table.vue | 77 ++++++++++++--- .../vue-vtable/src/tables/pivot-table.vue | 97 ++++++++++++++++--- 4 files changed, 194 insertions(+), 46 deletions(-) diff --git a/packages/vue-vtable/src/index.ts b/packages/vue-vtable/src/index.ts index bee210cb9..9f2eccb9f 100644 --- a/packages/vue-vtable/src/index.ts +++ b/packages/vue-vtable/src/index.ts @@ -1,5 +1,7 @@ import * as VTable from '@visactor/vtable'; + export * from './tables'; +export * from './components'; export { VTable }; export const version = __VERSION__; diff --git a/packages/vue-vtable/src/tables/base-table.vue b/packages/vue-vtable/src/tables/base-table.vue index b6c2acf54..8cbeb30e3 100644 --- a/packages/vue-vtable/src/tables/base-table.vue +++ b/packages/vue-vtable/src/tables/base-table.vue @@ -10,12 +10,14 @@ import { TABLE_EVENTS, TABLE_EVENTS_KEYS } from '../eventsUtils'; import type * as VTable from '@visactor/vtable'; import type { EventsProps } from '../eventsUtils'; +// 定义表格实例和选项的类型 export type IVTable = VTable.ListTable | VTable.PivotTable | VTable.PivotChart; export type IOption = | VTable.ListTableConstructorOptions | VTable.PivotTableConstructorOptions | VTable.PivotChartConstructorOptions; +// 定义组件的属性接口 export interface BaseTableProps extends EventsProps { type?: string; options?: IOption; @@ -26,19 +28,25 @@ export interface BaseTableProps extends EventsProps { onError?: (err: Error) => void; } +// 设置默认属性 const props = withDefaults(defineProps(), { width: '100%', height: '100%', }); -const emit = defineEmits(TABLE_EVENTS_KEYS); +// 创建用于引用 DOM 元素和表格实例的 ref const vTableContainer = ref(null); const vTableInstance = shallowRef(null); -defineExpose({ vTableInstance });//需要优化,暴露的方式不够“优雅” +// 公开 vTableInstance,以便外部组件可以访问 +defineExpose({ vTableInstance }); + +// 计算容器的宽度和高度 const containerWidth = computed(() => (typeof props.width === 'number' ? `${props.width}px` : props.width)); const containerHeight = computed(() => (typeof props.height === 'number' ? `${props.height}px` : props.height)); +// 绑定事件到表格实例 +const emit = defineEmits(TABLE_EVENTS_KEYS); const bindEvents = (instance: IVTable) => { TABLE_EVENTS_KEYS.forEach(eventKey => { const vueEventHandler = (event: any) => { @@ -48,26 +56,42 @@ const bindEvents = (instance: IVTable) => { }); }; +// 创建表格实例 const createVTable = () => { if (!vTableContainer.value) return; if (vTableInstance.value) { vTableInstance.value.release(); } - + + const getRecords = () => { + return props.records !== undefined && props.records !== null && props.records.length > 0 ? props.records : props.options.records; + }; + + const createTableInstance = (Type: any, options: any) => { + vTableInstance.value = new Type(vTableContainer.value, options); + }; + try { switch (props.type) { case 'list': - vTableInstance.value = new ListTable(vTableContainer.value, props.options as VTable.ListTableConstructorOptions); + createTableInstance(ListTable, { + ...props.options, + records: getRecords() + } as VTable.ListTableConstructorOptions); break; case 'pivot': - vTableInstance.value = new PivotTable(vTableContainer.value, props.options as VTable.PivotTableConstructorOptions); + createTableInstance(PivotTable, { + ...props.options, + records: getRecords() + } as VTable.PivotTableConstructorOptions); break; case 'chart': - vTableInstance.value = new PivotChart(vTableContainer.value, props.options as VTable.PivotChartConstructorOptions); + createTableInstance(PivotChart, { + ...props.options, + records: getRecords() + } as VTable.PivotChartConstructorOptions); break; - default: - throw new Error(`Unknown table type: ${props.type}`); } bindEvents(vTableInstance.value); props.onReady?.(vTableInstance.value, true); @@ -76,6 +100,7 @@ const createVTable = () => { } }; +// 更新表格实例 const updateVTable = (newOptions: IOption) => { if (!vTableInstance.value) return; @@ -102,14 +127,15 @@ const updateVTable = (newOptions: IOption) => { } }; +// 组件挂载时创建表格 onMounted(createVTable); onBeforeUnmount(() => vTableInstance.value?.release()); -// 粒度更细的监听 TODO: 优化 +// 监听 options 属性的变化 watch( () => props.options, (newOptions, oldOptions) => { - if (!isEqual(newOptions, oldOptions)) { + if (isEqual(newOptions, oldOptions)) { if (vTableInstance.value) { updateVTable(newOptions); } else { @@ -119,25 +145,17 @@ watch( }, ); +// 监听 records 属性的变化并更新表格 watch( () => props.records, - (newRecords, oldRecords) => { - if (!isEqual(newRecords, oldRecords)) { + (newRecords) => { if (vTableInstance.value && vTableInstance.value.updateOption) { updateVTable({ ...props.options, records: newRecords }); } else { createVTable(); } - } - }, + }, + { deep: true } ); -watch( - () => props.type, - (newType, oldType) => { - if (newType !== oldType) { - createVTable(); - } - } -); - \ No newline at end of file + diff --git a/packages/vue-vtable/src/tables/list-table.vue b/packages/vue-vtable/src/tables/list-table.vue index fa0546e0d..2f7bb9e0b 100644 --- a/packages/vue-vtable/src/tables/list-table.vue +++ b/packages/vue-vtable/src/tables/list-table.vue @@ -1,27 +1,80 @@ \ No newline at end of file diff --git a/packages/vue-vtable/src/tables/pivot-table.vue b/packages/vue-vtable/src/tables/pivot-table.vue index 9ca1a1f21..7b01cc1f5 100644 --- a/packages/vue-vtable/src/tables/pivot-table.vue +++ b/packages/vue-vtable/src/tables/pivot-table.vue @@ -1,26 +1,101 @@ \ No newline at end of file From c29d3f812e3810de62d109f183e08b432254acab Mon Sep 17 00:00:00 2001 From: YEL!ne <1638317920@qq.com> Date: Mon, 5 Aug 2024 18:07:20 +0800 Subject: [PATCH 11/34] feat: add ListColumn component --- packages/vue-vtable/src/components/index.ts | 1 + .../vue-vtable/src/components/list-column.vue | 40 +++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 packages/vue-vtable/src/components/index.ts create mode 100644 packages/vue-vtable/src/components/list-column.vue diff --git a/packages/vue-vtable/src/components/index.ts b/packages/vue-vtable/src/components/index.ts new file mode 100644 index 000000000..eedf4e878 --- /dev/null +++ b/packages/vue-vtable/src/components/index.ts @@ -0,0 +1 @@ +export { default as ListColumn } from './list-column.vue'; diff --git a/packages/vue-vtable/src/components/list-column.vue b/packages/vue-vtable/src/components/list-column.vue new file mode 100644 index 000000000..c5f08567a --- /dev/null +++ b/packages/vue-vtable/src/components/list-column.vue @@ -0,0 +1,40 @@ + + + \ No newline at end of file From 73ddc33df5ecd610fabbd21e4dd8f4536a84f733 Mon Sep 17 00:00:00 2001 From: YEL!ne <1638317920@qq.com> Date: Mon, 5 Aug 2024 18:14:35 +0800 Subject: [PATCH 12/34] feat: add new components and options to Vue VTable demo --- packages/vue-vtable/demo/src/App.vue | 24 ++- .../composition/ListTable-destruction.vue | 109 ++++++++++++ .../composition/ListTable-fetch.vue | 47 +++++ .../gramatical/composition/ListTable-tree.vue | 94 ++++++++++ .../gramatical/composition/ListTable.vue | 66 +++++++ .../gramatical/options/ListTable-v-for.vue | 54 ++++++ .../table/gramatical/options/ListTable.vue | 81 +++++++++ .../table/gramatical/options/PivotTable.vue | 166 ++++++++++++++++++ 8 files changed, 638 insertions(+), 3 deletions(-) create mode 100644 packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-destruction.vue create mode 100644 packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-fetch.vue create mode 100644 packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-tree.vue create mode 100644 packages/vue-vtable/demo/src/table/gramatical/composition/ListTable.vue create mode 100644 packages/vue-vtable/demo/src/table/gramatical/options/ListTable-v-for.vue create mode 100644 packages/vue-vtable/demo/src/table/gramatical/options/ListTable.vue create mode 100644 packages/vue-vtable/demo/src/table/gramatical/options/PivotTable.vue diff --git a/packages/vue-vtable/demo/src/App.vue b/packages/vue-vtable/demo/src/App.vue index bb92d3ed6..fa333977f 100644 --- a/packages/vue-vtable/demo/src/App.vue +++ b/packages/vue-vtable/demo/src/App.vue @@ -1,23 +1,41 @@ diff --git a/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-destruction.vue b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-destruction.vue new file mode 100644 index 000000000..13cd12851 --- /dev/null +++ b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-destruction.vue @@ -0,0 +1,109 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-fetch.vue b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-fetch.vue new file mode 100644 index 000000000..ef670ffdb --- /dev/null +++ b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-fetch.vue @@ -0,0 +1,47 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-tree.vue b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-tree.vue new file mode 100644 index 000000000..1a4026144 --- /dev/null +++ b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable-tree.vue @@ -0,0 +1,94 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable.vue b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable.vue new file mode 100644 index 000000000..423fe2ff3 --- /dev/null +++ b/packages/vue-vtable/demo/src/table/gramatical/composition/ListTable.vue @@ -0,0 +1,66 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/demo/src/table/gramatical/options/ListTable-v-for.vue b/packages/vue-vtable/demo/src/table/gramatical/options/ListTable-v-for.vue new file mode 100644 index 000000000..c8c5dda72 --- /dev/null +++ b/packages/vue-vtable/demo/src/table/gramatical/options/ListTable-v-for.vue @@ -0,0 +1,54 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/demo/src/table/gramatical/options/ListTable.vue b/packages/vue-vtable/demo/src/table/gramatical/options/ListTable.vue new file mode 100644 index 000000000..5fd3adb37 --- /dev/null +++ b/packages/vue-vtable/demo/src/table/gramatical/options/ListTable.vue @@ -0,0 +1,81 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/demo/src/table/gramatical/options/PivotTable.vue b/packages/vue-vtable/demo/src/table/gramatical/options/PivotTable.vue new file mode 100644 index 000000000..38d651308 --- /dev/null +++ b/packages/vue-vtable/demo/src/table/gramatical/options/PivotTable.vue @@ -0,0 +1,166 @@ + + + \ No newline at end of file From bd507459582eb07a5b4a0789635e79fb5ce53a06 Mon Sep 17 00:00:00 2001 From: YEL!ne <1638317920@qq.com> Date: Tue, 6 Aug 2024 23:00:57 +0800 Subject: [PATCH 13/34] feat: grammatical tags enhancement --- .../src/components/component/menu.vue | 14 +++ .../src/components/component/tooltip.vue | 13 +++ packages/vue-vtable/src/components/index.ts | 12 ++- .../vue-vtable/src/components/list-column.vue | 40 --------- .../src/components/list/list-column.vue | 8 ++ .../pivot/pivot-column-dimension.vue | 7 ++ .../pivot/pivot-column-header-title.vue | 7 ++ .../src/components/pivot/pivot-corner.vue | 7 ++ .../src/components/pivot/pivot-indicator.vue | 7 ++ .../components/pivot/pivot-row-dimension.vue | 7 ++ .../pivot/pivot-row-header-title.vue | 7 ++ packages/vue-vtable/src/tables/list-table.vue | 27 +++--- .../vue-vtable/src/tables/pivot-chart.vue | 90 ++++++++++++++++--- .../vue-vtable/src/tables/pivot-table.vue | 68 +++++++------- 14 files changed, 212 insertions(+), 102 deletions(-) create mode 100644 packages/vue-vtable/src/components/component/menu.vue create mode 100644 packages/vue-vtable/src/components/component/tooltip.vue delete mode 100644 packages/vue-vtable/src/components/list-column.vue create mode 100644 packages/vue-vtable/src/components/list/list-column.vue create mode 100644 packages/vue-vtable/src/components/pivot/pivot-column-dimension.vue create mode 100644 packages/vue-vtable/src/components/pivot/pivot-column-header-title.vue create mode 100644 packages/vue-vtable/src/components/pivot/pivot-corner.vue create mode 100644 packages/vue-vtable/src/components/pivot/pivot-indicator.vue create mode 100644 packages/vue-vtable/src/components/pivot/pivot-row-dimension.vue create mode 100644 packages/vue-vtable/src/components/pivot/pivot-row-header-title.vue diff --git a/packages/vue-vtable/src/components/component/menu.vue b/packages/vue-vtable/src/components/component/menu.vue new file mode 100644 index 000000000..2e7c11ffe --- /dev/null +++ b/packages/vue-vtable/src/components/component/menu.vue @@ -0,0 +1,14 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/src/components/component/tooltip.vue b/packages/vue-vtable/src/components/component/tooltip.vue new file mode 100644 index 000000000..713156871 --- /dev/null +++ b/packages/vue-vtable/src/components/component/tooltip.vue @@ -0,0 +1,13 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/src/components/index.ts b/packages/vue-vtable/src/components/index.ts index eedf4e878..37efbb8f1 100644 --- a/packages/vue-vtable/src/components/index.ts +++ b/packages/vue-vtable/src/components/index.ts @@ -1 +1,11 @@ -export { default as ListColumn } from './list-column.vue'; +export { default as ListColumn } from './list/list-column.vue'; + +export { default as PivotColumnDimension } from './pivot/pivot-column-dimension.vue'; +export { default as PivotColumnHeaderTitle } from './pivot/pivot-column-header-title.vue'; +export { default as PivotRowDimension } from './pivot/pivot-row-dimension.vue'; +export { default as PivotRowHeaderTitle } from './pivot/pivot-row-header-title.vue'; +export { default as PivotIndicator } from './pivot/pivot-indicator.vue'; +export { default as PivotCorner } from './pivot/pivot-corner.vue'; + +export { default as Menu } from './component/menu.vue'; +export { default as Tooltip } from './component/tooltip.vue'; diff --git a/packages/vue-vtable/src/components/list-column.vue b/packages/vue-vtable/src/components/list-column.vue deleted file mode 100644 index c5f08567a..000000000 --- a/packages/vue-vtable/src/components/list-column.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/vue-vtable/src/components/list/list-column.vue b/packages/vue-vtable/src/components/list/list-column.vue new file mode 100644 index 000000000..60566f7cb --- /dev/null +++ b/packages/vue-vtable/src/components/list/list-column.vue @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/src/components/pivot/pivot-column-dimension.vue b/packages/vue-vtable/src/components/pivot/pivot-column-dimension.vue new file mode 100644 index 000000000..8cc19cf8f --- /dev/null +++ b/packages/vue-vtable/src/components/pivot/pivot-column-dimension.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/src/components/pivot/pivot-column-header-title.vue b/packages/vue-vtable/src/components/pivot/pivot-column-header-title.vue new file mode 100644 index 000000000..d596630b7 --- /dev/null +++ b/packages/vue-vtable/src/components/pivot/pivot-column-header-title.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/src/components/pivot/pivot-corner.vue b/packages/vue-vtable/src/components/pivot/pivot-corner.vue new file mode 100644 index 000000000..14cbfabf6 --- /dev/null +++ b/packages/vue-vtable/src/components/pivot/pivot-corner.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/src/components/pivot/pivot-indicator.vue b/packages/vue-vtable/src/components/pivot/pivot-indicator.vue new file mode 100644 index 000000000..9a885ea20 --- /dev/null +++ b/packages/vue-vtable/src/components/pivot/pivot-indicator.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/src/components/pivot/pivot-row-dimension.vue b/packages/vue-vtable/src/components/pivot/pivot-row-dimension.vue new file mode 100644 index 000000000..eef7f54b0 --- /dev/null +++ b/packages/vue-vtable/src/components/pivot/pivot-row-dimension.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/src/components/pivot/pivot-row-header-title.vue b/packages/vue-vtable/src/components/pivot/pivot-row-header-title.vue new file mode 100644 index 000000000..d596630b7 --- /dev/null +++ b/packages/vue-vtable/src/components/pivot/pivot-row-header-title.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/packages/vue-vtable/src/tables/list-table.vue b/packages/vue-vtable/src/tables/list-table.vue index 2f7bb9e0b..00ea6eb7d 100644 --- a/packages/vue-vtable/src/tables/list-table.vue +++ b/packages/vue-vtable/src/tables/list-table.vue @@ -43,26 +43,27 @@ function flattenVNodes(vnodes: any[]): any[] { // 合并props.options和插槽中的配置 const computedOptions = computed(() => { const flattenedSlots = flattenVNodes(slots.default?.() || []); - const options = { columns: [] as Record[], tooltip: null as Record | null, menu: null as Record | null, }; + + const typeMapping: Record = { + 'list-column': 'columns', + 'tooltip': 'tooltip', + 'menu': 'menu', + }; flattenedSlots.forEach(vnode => { - if (vnode.type) { - switch ( vnode.type?.__name ?? vnode.type) { - case 'list-column': - case 'ListColumn': - options.columns.push(vnode.props); - break; - case 'Tooltip': - options.tooltip = vnode.props; - break; - case 'Menu': - options.menu = vnode.props; - break; + const typeName = vnode.type?.__name ; + const optionKey = typeMapping[typeName]; + + if (optionKey) { + if (Array.isArray(options[optionKey])) { + (options[optionKey] as any[]).push(vnode.props); + } else { + options[optionKey] = vnode.props; } } }); diff --git a/packages/vue-vtable/src/tables/pivot-chart.vue b/packages/vue-vtable/src/tables/pivot-chart.vue index e064e4b75..54d472b09 100644 --- a/packages/vue-vtable/src/tables/pivot-chart.vue +++ b/packages/vue-vtable/src/tables/pivot-chart.vue @@ -1,26 +1,94 @@ \ No newline at end of file diff --git a/packages/vue-vtable/src/tables/pivot-table.vue b/packages/vue-vtable/src/tables/pivot-table.vue index 7b01cc1f5..cb0722576 100644 --- a/packages/vue-vtable/src/tables/pivot-table.vue +++ b/packages/vue-vtable/src/tables/pivot-table.vue @@ -14,20 +14,9 @@ From 3c8a878f8e06c20513df0790d0456e9610a6652f Mon Sep 17 00:00:00 2001 From: YEL!ne <1638317920@qq.com> Date: Tue, 6 Aug 2024 23:07:21 +0800 Subject: [PATCH 15/34] fix: modified some demos --- packages/vue-vtable/demo/src/App.vue | 7 +- .../composition/ListTable-destruction.vue | 27 ++++--- .../table/gramatical/options/ListTable.vue | 81 ------------------- .../table/gramatical/options/PivotTable.vue | 11 ++- 4 files changed, 30 insertions(+), 96 deletions(-) delete mode 100644 packages/vue-vtable/demo/src/table/gramatical/options/ListTable.vue diff --git a/packages/vue-vtable/demo/src/App.vue b/packages/vue-vtable/demo/src/App.vue index fa333977f..e7770dfdf 100644 --- a/packages/vue-vtable/demo/src/App.vue +++ b/packages/vue-vtable/demo/src/App.vue @@ -19,7 +19,9 @@ import PivotTable from './table/gramatical/options/PivotTable.vue'; \ No newline at end of file diff --git a/packages/vue-vtable/src/tables/pivot-chart.vue b/packages/vue-vtable/src/tables/pivot-chart.vue index 54d472b09..750397884 100644 --- a/packages/vue-vtable/src/tables/pivot-chart.vue +++ b/packages/vue-vtable/src/tables/pivot-chart.vue @@ -8,14 +8,15 @@ ref="baseTableRef" v-bind="$attrs" /> +