vxe-gantt 0.0.1 → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 xuliangzhan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.en.md

@@ -0,0 +1,72 @@
+# vxe-gantt
+
+[简体中文](README.md) | [繁體中文](README.zh-TW.md) | English | [日本語](README.ja-JP.md)  
+
+[![star](https://gitee.com/x-extends/vxe-gantt/badge/star.svg?theme=gvp)](https://gitee.com/x-extends/vxe-gantt/stargazers)
+[![npm version](https://img.shields.io/npm/v/vxe-gantt.svg?style=flat-square)](https://www.npmjs.com/package/vxe-gantt)
+[![NodeJS with Webpack](https://github.com/x-extends/vxe-gantt/actions/workflows/webpack.yml/badge.svg)](https://github.com/x-extends/vxe-gantt/actions/workflows/webpack.yml)
+[![npm downloads](https://img.shields.io/npm/dt/vxe-gantt.svg?style=flat-square)](https://npm-stat.com/charts.html?package=vxe-gantt)
+[![issues](https://img.shields.io/github/issues/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/issues)
+[![issues closed](https://img.shields.io/github/issues-closed/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/issues?q=is%3Aissue+is%3Aclosed)
+[![pull requests](https://img.shields.io/github/issues-pr/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/pulls)
+[![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/pulls?q=is%3Apr+is%3Aclosed)
+[![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
+
+A PC-based Gantt chart component based on [Vxe UI](https://github.com/x-extends/  vxe-pc-ui).
+
+## Browser Support
+
+![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
+--- | --- | --- | --- | --- |
+80+ ✔ | 80+ ✔ | 90+ ✔ | 75+ ✔ | 10+ ✔ |
+
+## Use
+
+版本：[vue](https://www.npmjs.com/package/vue) 3.x
+
+```shell
+npm install vxe-gantt
+```
+
+Get on [unpkg](https://unpkg.com/vxe-gantt/) and [cdnjs](https://cdn.jsdelivr.net/npm/vxe-gantt/)
+
+### NPM
+
+```javascript
+// ...
+import VxeUIAll from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'
+
+import VxeUITable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
+import VxeUIGantt from 'vxe-gantt'
+import 'vxe-gantt/lib/style.css'
+// ...
+
+createApp(App).use(VxeUIAll).use(VxeUITable).use(VxeUIGantt).mount('#app')
+```
+
+## Run the project
+
+Install dependencies
+
+```shell
+npm install
+```
+
+Start local debugging
+
+```shell
+npm run serve
+```
+
+Compile packaging, generated compiled directory: es,lib
+
+```shell
+npm run lib
+```
+
+## License
+
+[MIT](LICENSE) © 2025-present, Xu Liangzhan

package/README.ja-JP.md

@@ -0,0 +1,72 @@
+# vxe-gantt
+
+[简体中文](README.md) | [繁體中文](README.zh-TW.md) | [English](README.en.md) | 日本語  
+
+[![star](https://gitee.com/x-extends/vxe-gantt/badge/star.svg?theme=gvp)](https://gitee.com/x-extends/vxe-gantt/stargazers)
+[![npm version](https://img.shields.io/npm/v/vxe-gantt.svg?style=flat-square)](https://www.npmjs.com/package/vxe-gantt)
+[![NodeJS with Webpack](https://github.com/x-extends/vxe-gantt/actions/workflows/webpack.yml/badge.svg)](https://github.com/x-extends/vxe-gantt/actions/workflows/webpack.yml)
+[![npm downloads](https://img.shields.io/npm/dt/vxe-gantt.svg?style=flat-square)](https://npm-stat.com/charts.html?package=vxe-gantt)
+[![issues](https://img.shields.io/github/issues/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/issues)
+[![issues closed](https://img.shields.io/github/issues-closed/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/issues?q=is%3Aissue+is%3Aclosed)
+[![pull requests](https://img.shields.io/github/issues-pr/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/pulls)
+[![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/pulls?q=is%3Apr+is%3Aclosed)
+[![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
+
+一个基于 [Vxe UI](https://github.com/x-extends/vxe-pc-ui) 的基于 PC 端甘特图组件  
+
+## ブラウザサポート
+
+![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
+--- | --- | --- | --- | --- |
+80+ ✔ | 80+ ✔ | 90+ ✔ | 75+ ✔ | 10+ ✔ |
+
+### テーブルとUIの使用
+
+版本：[vue](https://www.npmjs.com/package/vue) 3.x
+
+```shell
+npm install vxe-gantt
+```
+
+Get on [unpkg](https://unpkg.com/vxe-gantt/) and [cdnjs](https://cdn.jsdelivr.net/npm/vxe-gantt/)
+
+### NPM
+
+```javascript
+// ...
+import VxeUIAll from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'
+
+import VxeUITable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
+import VxeUIGantt from 'vxe-gantt'
+import 'vxe-gantt/lib/style.css'
+// ...
+
+createApp(App).use(VxeUIAll).use(VxeUITable).use(VxeUIGantt).mount('#app')
+```
+
+## プロジェクトの実行
+
+依存関係をインストールする
+
+```shell
+npm install
+```
+
+ローカルデバッグを開始する
+
+```shell
+npm run serve
+```
+
+コンパイルパッケージング、生成されたコンパイルディレクトリ: es,lib
+
+```shell
+npm run lib
+```
+
+## ライセンス
+
+[MIT](LICENSE) © 2025-present, Xu Liangzhan

package/README.md

@@ -1,5 +1,85 @@
-# vxejs
+# vxe-gantt
+
+简体中文 | [繁體中文](README.zh-TW.md) | [English](README.en.md) | [日本語](README.ja-JP.md) 
+
+[![star](https://gitee.com/x-extends/vxe-gantt/badge/star.svg?theme=gvp)](https://gitee.com/x-extends/vxe-gantt/stargazers)
+[![npm version](https://img.shields.io/npm/v/vxe-gantt.svg?style=flat-square)](https://www.npmjs.com/package/vxe-gantt)
+[![NodeJS with Webpack](https://github.com/x-extends/vxe-gantt/actions/workflows/webpack.yml/badge.svg)](https://github.com/x-extends/vxe-gantt/actions/workflows/webpack.yml)
+[![npm downloads](https://img.shields.io/npm/dt/vxe-gantt.svg?style=flat-square)](https://npm-stat.com/charts.html?package=vxe-gantt)
+[![issues](https://img.shields.io/github/issues/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/issues)
+[![issues closed](https://img.shields.io/github/issues-closed/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/issues?q=is%3Aissue+is%3Aclosed)
+[![pull requests](https://img.shields.io/github/issues-pr/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/pulls)
+[![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/pulls?q=is%3Apr+is%3Aclosed)
+[![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
+
+一个基于 [Vxe UI](https://github.com/x-extends/vxe-pc-ui) 的基于 PC 端甘特图组件  
+
+* 设计理念
+  * 面向现代浏览器，高效的简洁 API 设计
+
+* 版本说明
+  * **V4**
+    * [x] v4.0 基于 vue3.2+，只支持现代浏览器，不支持 IE
+  * **V3**
+    * [x] v3.0 基于 vue2.6~2.7，只支持现代浏览器，不支持 IE
+  * **V2**
+    * [x] ~~v2.0 基于 vue2.6+，停止维护~~
+  * **V1**
+    * [x] ~~v1.0 基于 vue2.6+，停止维护~~
+
+## 浏览器支持
+
+![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
+--- | --- | --- | --- | --- |
+80+ ✔ | 80+ ✔ | 90+ ✔ | 75+ ✔ | 10+ ✔ |
+
+## 在线文档
+
+👉 [基础库](https://vxeui.com)  
+👉 [表格库](https://vxetable.cn)  
+👉 [甘特图](https://gantt.vxeui.com)  
+👉 [可视化](https://design.vxeui.com)  
+
+## QQ 交流群
+
+该群供大家交流問題，如果群人数已满，将会不定期剔除不活跃的。  
+
+![qq](https://vxeui.com/resource/donation/qq1.png)
+![qq](https://vxeui.com/resource/donation/qq2.png)
+
+## 功能点
+
+[👀 Vxe Gantt](https://gantt.vxeui.com/)  
+
+* [x] gantt 甘特图
+
+## 安装
+
+版本：[vue](https://www.npmjs.com/package/vue) 3.x
+
+```shell
+npm install vxe-gantt
+```
+
+Get on [unpkg](https://unpkg.com/vxe-gantt/) and [cdnjs](https://cdn.jsdelivr.net/npm/vxe-gantt/)
+
+### NPM
+
+```javascript
+// ...
+import VxeUIAll from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'
+
+import VxeUITable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
+import VxeUIGantt from 'vxe-gantt'
+import 'vxe-gantt/lib/style.css'
+// ...
+
+createApp(App).use(VxeUIAll).use(VxeUITable).use(VxeUIGantt).mount('#app')
+```
 
 ## License
 
-[MIT](LICENSE) © 2019-present, Xu Liangzhan
+[MIT](LICENSE) © 2025-present, Xu Liangzhan

package/README.zh-TW.md

@@ -0,0 +1,73 @@
+# vxe-gantt
+
+[简体中文](README.md) | 繁體中文 | [English](README.en.md) | [日本語](README.ja-JP.md)  
+
+[![star](https://gitee.com/x-extends/vxe-gantt/badge/star.svg?theme=gvp)](https://gitee.com/x-extends/vxe-gantt/stargazers)
+[![npm version](https://img.shields.io/npm/v/vxe-gantt.svg?style=flat-square)](https://www.npmjs.com/package/vxe-gantt)
+[![NodeJS with Webpack](https://github.com/x-extends/vxe-gantt/actions/workflows/webpack.yml/badge.svg)](https://github.com/x-extends/vxe-gantt/actions/workflows/webpack.yml)
+[![npm downloads](https://img.shields.io/npm/dt/vxe-gantt.svg?style=flat-square)](https://npm-stat.com/charts.html?package=vxe-gantt)
+[![issues](https://img.shields.io/github/issues/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/issues)
+[![issues closed](https://img.shields.io/github/issues-closed/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/issues?q=is%3Aissue+is%3Aclosed)
+[![pull requests](https://img.shields.io/github/issues-pr/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/pulls)
+[![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-gantt.svg)](https://github.com/x-extends/vxe-gantt/pulls?q=is%3Apr+is%3Aclosed)
+[![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
+
+一个基于 [Vxe UI](https://github.com/x-extends/vxe-pc-ui) 的基于 PC 端甘特图组件  
+
+## 浏览器支持
+
+![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
+--- | --- | --- | --- | --- |
+80+ ✔ | 80+ ✔ | 90+ ✔ | 75+ ✔ | 10+ ✔ |
+
+
+## 安装
+
+版本：[vue](https://www.npmjs.com/package/vue) 3.x
+
+```shell
+npm install vxe-gantt
+```
+
+Get on [unpkg](https://unpkg.com/vxe-gantt/) and [cdnjs](https://cdn.jsdelivr.net/npm/vxe-gantt/)
+
+### NPM
+
+```javascript
+// ...
+import VxeUIAll from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'
+
+import VxeUITable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
+import VxeUIGantt from 'vxe-gantt'
+import 'vxe-gantt/lib/style.css'
+// ...
+
+createApp(App).use(VxeUIAll).use(VxeUITable).use(VxeUIGantt).mount('#app')
+```
+
+## 運行項目
+
+安裝依賴
+
+```shell
+npm install
+```
+
+啓動本地調試
+
+```shell
+npm run serve
+```
+
+編譯打包，生成編譯後的目錄：es,lib
+
+```shell
+npm run lib
+```
+
+## 許可證
+
+[MIT](LICENSE) © 2025-present, Xu Liangzhan

package/es/components.js

@@ -0,0 +1,12 @@
+import { setConfig } from '@vxe-ui/core';
+import VxeGantt from './gantt';
+const components = [
+    VxeGantt
+];
+export function install(app, options) {
+    setConfig(options);
+    components.forEach(component => app.use(component));
+}
+export * from './ui';
+// Components
+export * from './gantt';

package/es/gantt/index.js

@@ -0,0 +1,13 @@
+import { VxeUI } from '@vxe-ui/core';
+import VxeGanttComponent from './src/gantt';
+export const VxeGantt = Object.assign({}, VxeGanttComponent, {
+    install(app) {
+        app.component(VxeGanttComponent.name, VxeGanttComponent);
+    }
+});
+if (VxeUI.dynamicApp) {
+    VxeUI.dynamicApp.use(VxeGantt);
+}
+VxeUI.component(VxeGanttComponent);
+export const Gantt = VxeGantt;
+export default VxeGantt;

package/es/gantt/src/emits.js

@@ -0,0 +1,4 @@
+import { gridEmits } from './grid-emits';
+export const ganttEmits = [
+    ...gridEmits
+];

package/es/gantt/src/gantt-body.js

@@ -0,0 +1,103 @@
+import { h, inject, ref, onMounted, onUnmounted } from 'vue';
+import { defineVxeComponent } from '../../ui/src/comp';
+import { getCellRestHeight } from './util';
+import GanttViewChartComponent from './gantt-chart';
+export default defineVxeComponent({
+    name: 'VxeGanttViewBody',
+    setup() {
+        const $xeGantt = inject('$xeGantt', {});
+        const $xeGanttView = inject('$xeGanttView', {});
+        const { reactData, internalData } = $xeGanttView;
+        const { refTable } = $xeGantt.getRefMaps();
+        const refElem = ref();
+        const refBodyScroll = ref();
+        const refBodyTable = ref();
+        const refBodyXSpace = ref();
+        const refBodyYSpace = ref();
+        const renderRows = () => {
+            const $xeTable = refTable.value;
+            const fullAllDataRowIdData = $xeTable ? $xeTable.internalData.fullAllDataRowIdData : {};
+            let cellOpts = {};
+            let rowOpts = {};
+            let defaultRowHeight = 0;
+            if ($xeTable) {
+                const { computeCellOpts, computeRowOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps();
+                cellOpts = computeCellOpts.value;
+                rowOpts = computeRowOpts.value;
+                defaultRowHeight = computeDefaultRowHeight.value;
+            }
+            const { tableData, tableColumn } = reactData;
+            const trVNs = [];
+            tableData.forEach((row, rIndex) => {
+                const rowid = $xeTable ? $xeTable.getRowid(row) : '';
+                const rowRest = fullAllDataRowIdData[rowid] || {};
+                const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
+                trVNs.push(h('tr', {
+                    key: rIndex
+                }, tableColumn.map((column, cIndex) => {
+                    return h('td', {
+                        key: cIndex,
+                        class: 'vxe-gantt-view--body-column',
+                        style: {
+                            height: `${cellHeight}px`
+                        }
+                    });
+                })));
+            });
+            return trVNs;
+        };
+        const renderVN = () => {
+            const { tableColumn } = reactData;
+            return h('div', {
+                ref: refElem,
+                class: 'vxe-gantt-view--body-wrapper'
+            }, [
+                h('div', {
+                    ref: refBodyScroll,
+                    class: 'vxe-gantt-view--body-inner-wrapper',
+                    onScroll: $xeGanttView.triggerBodyScrollEvent
+                }, [
+                    h('div', {
+                        ref: refBodyXSpace,
+                        class: 'vxe-body--x-space'
+                    }),
+                    h('div', {
+                        ref: refBodyYSpace,
+                        class: 'vxe-body--y-space'
+                    }),
+                    h('table', {
+                        ref: refBodyTable,
+                        class: 'vxe-gantt-view--body-table'
+                    }, [
+                        h('colgroup', {}, tableColumn.map((column, cIndex) => {
+                            return h('col', {
+                                key: cIndex
+                            });
+                        })),
+                        h('tbody', {}, renderRows())
+                    ]),
+                    h(GanttViewChartComponent)
+                ])
+            ]);
+        };
+        onMounted(() => {
+            const { elemStore } = internalData;
+            const prefix = 'main-body-';
+            elemStore[`${prefix}wrapper`] = refElem;
+            elemStore[`${prefix}scroll`] = refBodyScroll;
+            elemStore[`${prefix}table`] = refBodyTable;
+            elemStore[`${prefix}xSpace`] = refBodyXSpace;
+            elemStore[`${prefix}ySpace`] = refBodyYSpace;
+        });
+        onUnmounted(() => {
+            const { elemStore } = internalData;
+            const prefix = 'main-body-';
+            elemStore[`${prefix}wrapper`] = null;
+            elemStore[`${prefix}scroll`] = null;
+            elemStore[`${prefix}table`] = null;
+            elemStore[`${prefix}xSpace`] = null;
+            elemStore[`${prefix}ySpace`] = null;
+        });
+        return renderVN;
+    }
+});

package/es/gantt/src/gantt-chart.js

@@ -0,0 +1,77 @@
+import { h, inject, ref, onMounted, onUnmounted } from 'vue';
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getCellRestHeight } from './util';
+export default defineVxeComponent({
+    name: 'VxeGanttViewChart',
+    setup() {
+        const $xeGantt = inject('$xeGantt', {});
+        const $xeGanttView = inject('$xeGanttView', {});
+        const { reactData, internalData } = $xeGanttView;
+        const { refTable } = $xeGantt.getRefMaps();
+        const { computeProgressField } = $xeGantt.getComputeMaps();
+        const refElem = ref();
+        const renderVN = () => {
+            const $xeTable = refTable.value;
+            const fullAllDataRowIdData = $xeTable ? $xeTable.internalData.fullAllDataRowIdData : {};
+            let cellOpts = {};
+            let rowOpts = {};
+            let defaultRowHeight = 0;
+            if ($xeTable) {
+                const { computeCellOpts, computeRowOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps();
+                cellOpts = computeCellOpts.value;
+                rowOpts = computeRowOpts.value;
+                defaultRowHeight = computeDefaultRowHeight.value;
+            }
+            const { tableData } = reactData;
+            const progressField = computeProgressField.value;
+            const trVNs = [];
+            tableData.forEach((row, rIndex) => {
+                const rowid = $xeTable ? $xeTable.getRowid(row) : '';
+                const rowRest = fullAllDataRowIdData[rowid] || {};
+                const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
+                const progressValue = XEUtils.get(row, progressField);
+                trVNs.push(h('div', {
+                    key: rIndex,
+                    rowid,
+                    class: 'vxe-gantt-view--chart-row',
+                    style: {
+                        height: `${cellHeight}px`
+                    }
+                }, [
+                    h('div', {
+                        class: 'vxe-gantt-view--chart-bar',
+                        rowid
+                    }, [
+                        h('div', {
+                            class: 'vxe-gantt-view--chart-progress',
+                            style: progressValue
+                                ? {
+                                    width: `${progressValue}%`
+                                }
+                                : undefined
+                        }),
+                        h('div', {
+                            class: 'vxe-gantt-view--chart-content'
+                        })
+                    ])
+                ]));
+            });
+            return h('div', {
+                ref: refElem,
+                class: 'vxe-gantt-view--chart-wrapper'
+            }, trVNs);
+        };
+        onMounted(() => {
+            const { elemStore } = internalData;
+            const prefix = 'main-chart-';
+            elemStore[`${prefix}wrapper`] = refElem;
+        });
+        onUnmounted(() => {
+            const { elemStore } = internalData;
+            const prefix = 'main-chart-';
+            elemStore[`${prefix}wrapper`] = null;
+        });
+        return renderVN;
+    }
+});

package/es/gantt/src/gantt-header.js

@@ -0,0 +1,70 @@
+import { h, inject, ref, onMounted, onUnmounted } from 'vue';
+import { defineVxeComponent } from '../../ui/src/comp';
+export default defineVxeComponent({
+    name: 'VxeGanttView',
+    setup() {
+        const $xeGanttView = inject('$xeGanttView', {});
+        const { reactData, internalData } = $xeGanttView;
+        const refElem = ref();
+        const refHeaderScroll = ref();
+        const refHeaderTable = ref();
+        const refHeaderXSpace = ref();
+        const renderVN = () => {
+            const { tableColumn, headerGroups } = reactData;
+            return h('div', {
+                ref: refElem,
+                class: 'vxe-gantt-view--header-wrapper'
+            }, [
+                h('div', {
+                    ref: refHeaderScroll,
+                    class: 'vxe-gantt-view--header-inner-wrapper',
+                    onScroll: $xeGanttView.triggerHeaderScrollEvent
+                }, [
+                    h('div', {
+                        ref: refHeaderXSpace,
+                        class: 'vxe-body--x-space'
+                    }),
+                    h('table', {
+                        ref: refHeaderTable,
+                        class: 'vxe-gantt-view--header-table'
+                    }, [
+                        h('colgroup', {}, tableColumn.map((column, cIndex) => {
+                            return h('col', {
+                                key: cIndex
+                            });
+                        })),
+                        h('thead', {}, headerGroups.map((cols, rIndex) => {
+                            return h('tr', {
+                                key: rIndex
+                            }, cols.map((column, cIndex) => {
+                                return h('th', {
+                                    key: cIndex,
+                                    class: 'vxe-gantt-view--header-column',
+                                    colspan: column.children ? column.children.length : null,
+                                    title: `${column.field}`
+                                }, column.title);
+                            }));
+                        }))
+                    ])
+                ])
+            ]);
+        };
+        onMounted(() => {
+            const { elemStore } = internalData;
+            const prefix = 'main-header-';
+            elemStore[`${prefix}wrapper`] = refElem;
+            elemStore[`${prefix}scroll`] = refHeaderScroll;
+            elemStore[`${prefix}table`] = refHeaderTable;
+            elemStore[`${prefix}xSpace`] = refHeaderXSpace;
+        });
+        onUnmounted(() => {
+            const { elemStore } = internalData;
+            const prefix = 'main-header-';
+            elemStore[`${prefix}wrapper`] = null;
+            elemStore[`${prefix}scroll`] = null;
+            elemStore[`${prefix}table`] = null;
+            elemStore[`${prefix}xSpace`] = null;
+        });
+        return renderVN;
+    }
+});