vxe-gantt 0.0.2 → 3.0.0-beta.0

package/README.md

@@ -1,7 +1,5 @@
 # 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)
@@ -14,46 +12,42 @@
 
 一个基于 [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+，只支持现代浏览器，不支持 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+ ✔ |
 
 ## 安装
 
-版本：[vue](https://www.npmjs.com/package/vue) 3.x
-
 ```shell
-npm install vxe-gantt
+npm install vxe-pc-ui@3 vxe-table@3 vxe-gantt@3
 ```
 
-Get on [unpkg](https://unpkg.com/vxe-gantt/) and [cdnjs](https://cdn.jsdelivr.net/npm/vxe-gantt/)
-
-### NPM
-
 ```javascript
+import Vue from 'vue'
 // ...
 import VxeUIAll from 'vxe-pc-ui'
-import 'vxe-pc-ui/lib/style.css'
+import 'vxe-pc-ui/es/style.css'
 
 import VxeUITable from 'vxe-table'
-import 'vxe-table/lib/style.css'
+import 'vxe-table/es/style.css'
 
 import VxeUIGantt from 'vxe-gantt'
 import 'vxe-gantt/lib/style.css'
 // ...
 
-createApp(App).use(VxeUIAll).use(VxeUITable).use(VxeUIGantt).mount('#app')
+Vue.use(VxeUIAll)
+Vue.use(VxeUITable)
+Vue.use(VxeUIGantt)
 ```
 
+## Contributors
+
+Thank you to everyone who contributed to this project.
+
+[![vxe-gantt](https://contrib.rocks/image?repo=x-extends/vxe-gantt)](https://github.com/x-extends/vxe-gantt/graphs/contributors)
+
 ## License
 
-[MIT](LICENSE) © 2025-present, Xu Liangzhan
+[MIT](LICENSE) © 2019-present, Xu Liangzhan

package/es/components.js

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

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

@@ -0,0 +1,137 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import { getCellRestHeight } from './util';
+import GanttViewChartComponent from './gantt-chart';
+export default defineVxeComponent({
+    name: 'VxeGanttViewBody',
+    inject: {
+        $xeGantt: {
+            default: null
+        },
+        $xeGanttView: {
+            default: null
+        }
+    },
+    props: {},
+    data() {
+        return {};
+    },
+    computed: Object.assign({}, {}),
+    methods: {
+        //
+        // Render
+        //
+        renderRows(h) {
+            const _vm = this;
+            const $xeGantt = _vm.$xeGantt;
+            const $xeGanttView = _vm.$xeGanttView;
+            const $xeTable = $xeGanttView.internalData.xeTable;
+            const tableInternalData = ($xeTable ? $xeTable : {});
+            const fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData || {};
+            let cellOpts = {};
+            let rowOpts = {};
+            let defaultRowHeight = 0;
+            if ($xeTable) {
+                cellOpts = $xeTable.computeCellOpts;
+                rowOpts = $xeTable.computeRowOpts;
+                defaultRowHeight = $xeTable.computeDefaultRowHeight;
+            }
+            const { reactData } = $xeGanttView;
+            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`
+                        },
+                        on: {
+                            click(evnt) {
+                                $xeGantt.handleTaskCellClickEvent(evnt, { row });
+                            },
+                            dblclick(evnt) {
+                                $xeGantt.handleTaskCellDblclickEvent(evnt, { row });
+                            }
+                        }
+                    });
+                })));
+            });
+            return trVNs;
+        },
+        renderVN(h) {
+            const _vm = this;
+            const $xeGanttView = _vm.$xeGanttView;
+            const { reactData } = $xeGanttView;
+            const { tableColumn, viewCellWidth } = reactData;
+            return h('div', {
+                ref: 'refElem',
+                class: 'vxe-gantt-view--body-wrapper'
+            }, [
+                h('div', {
+                    ref: 'refBodyScroll',
+                    class: 'vxe-gantt-view--body-inner-wrapper',
+                    on: {
+                        scroll: $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,
+                                style: {
+                                    width: `${viewCellWidth}px`
+                                }
+                            });
+                        })),
+                        h('tbody', {}, _vm.renderRows(h))
+                    ]),
+                    h(GanttViewChartComponent)
+                ])
+            ]);
+        }
+    },
+    mounted() {
+        const _vm = this;
+        const $xeGanttView = _vm.$xeGanttView;
+        const { internalData } = $xeGanttView;
+        const { elemStore } = internalData;
+        const prefix = 'main-body-';
+        elemStore[`${prefix}wrapper`] = _vm.$refs.refElem;
+        elemStore[`${prefix}scroll`] = _vm.$refs.refBodyScroll;
+        elemStore[`${prefix}table`] = _vm.$refs.refBodyTable;
+        elemStore[`${prefix}xSpace`] = _vm.$refs.refBodyXSpace;
+        elemStore[`${prefix}ySpace`] = _vm.$refs.refBodyYSpace;
+    },
+    destroyed() {
+        const _vm = this;
+        const $xeGanttView = _vm.$xeGanttView;
+        const { internalData } = $xeGanttView;
+        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;
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});

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

@@ -0,0 +1,125 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import { VxeUI } from '@vxe-ui/core';
+import XEUtils from 'xe-utils';
+import { getCellRestHeight } from './util';
+import { getStringValue } from '../../ui/src/utils';
+const { renderEmptyElement } = VxeUI;
+export default defineVxeComponent({
+    name: 'VxeGanttViewChart',
+    inject: {
+        $xeGantt: {
+            default: null
+        },
+        $xeGanttView: {
+            default: null
+        }
+    },
+    props: {},
+    data() {
+        return {};
+    },
+    computed: Object.assign({}, {}),
+    methods: {
+        //
+        // Render
+        //
+        renderVN(h) {
+            const _vm = this;
+            const $xeGantt = _vm.$xeGantt;
+            const $xeGanttView = _vm.$xeGanttView;
+            const $xeTable = $xeGanttView.internalData.xeTable;
+            const tableInternalData = ($xeTable ? $xeTable : {});
+            const fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData || {};
+            let cellOpts = {};
+            let rowOpts = {};
+            let defaultRowHeight = 0;
+            if ($xeTable) {
+                cellOpts = $xeTable.computeCellOpts;
+                rowOpts = $xeTable.computeRowOpts;
+                defaultRowHeight = $xeTable.computeDefaultRowHeight;
+            }
+            const { reactData } = $xeGanttView;
+            const { tableData } = reactData;
+            const titleField = $xeGantt.computeTitleField;
+            const progressField = $xeGantt.computeProgressField;
+            const taskBarOpts = $xeGantt.computeTaskBarOpts;
+            const { showProgress, showContent, contentMethod, barStyle } = taskBarOpts;
+            const { round } = barStyle || {};
+            const trVNs = [];
+            tableData.forEach((row, rIndex) => {
+                const rowid = $xeTable ? $xeTable.getRowid(row) : '';
+                const rowRest = fullAllDataRowIdData[rowid] || {};
+                const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
+                let title = getStringValue(XEUtils.get(row, titleField));
+                const progressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(row, progressField)))) : 0;
+                if (contentMethod) {
+                    title = getStringValue(contentMethod({ row, title }));
+                }
+                trVNs.push(h('div', {
+                    key: rIndex,
+                    attrs: {
+                        rowid
+                    },
+                    class: ['vxe-gantt-view--chart-row', {
+                            'is--round': round
+                        }],
+                    style: {
+                        height: `${cellHeight}px`
+                    }
+                }, [
+                    h('div', {
+                        class: 'vxe-gantt-view--chart-bar',
+                        attrs: {
+                            rowid
+                        },
+                        on: {
+                            click(evnt) {
+                                $xeGantt.handleTaskBarClickEvent(evnt, { row });
+                            },
+                            dblclick(evnt) {
+                                $xeGantt.handleTaskBarDblclickEvent(evnt, { row });
+                            }
+                        }
+                    }, [
+                        showProgress
+                            ? h('div', {
+                                class: 'vxe-gantt-view--chart-progress',
+                                style: {
+                                    width: `${progressValue || 0}%`
+                                }
+                            })
+                            : renderEmptyElement($xeGantt),
+                        showContent
+                            ? h('div', {
+                                class: 'vxe-gantt-view--chart-content'
+                            }, title)
+                            : renderEmptyElement($xeGantt)
+                    ])
+                ]));
+            });
+            return h('div', {
+                ref: 'refElem',
+                class: 'vxe-gantt-view--chart-wrapper'
+            }, trVNs);
+        }
+    },
+    mounted() {
+        const _vm = this;
+        const $xeGanttView = _vm.$xeGanttView;
+        const { internalData } = $xeGanttView;
+        const { elemStore } = internalData;
+        const prefix = 'main-chart-';
+        elemStore[`${prefix}wrapper`] = _vm.$refs.refElem;
+    },
+    destroyed() {
+        const _vm = this;
+        const $xeGanttView = _vm.$xeGanttView;
+        const { internalData } = $xeGanttView;
+        const { elemStore } = internalData;
+        const prefix = 'main-chart-';
+        elemStore[`${prefix}wrapper`] = null;
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});

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

@@ -0,0 +1,97 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+export default defineVxeComponent({
+    name: 'VxeGanttView',
+    inject: {
+        $xeGantt: {
+            default: null
+        },
+        $xeGanttView: {
+            default: null
+        }
+    },
+    props: {},
+    data() {
+        return {};
+    },
+    computed: Object.assign({}, {}),
+    methods: {
+        //
+        // Render
+        //
+        renderVN(h) {
+            const _vm = this;
+            const $xeGanttView = _vm.$xeGanttView;
+            const { reactData } = $xeGanttView;
+            const { tableColumn, headerGroups, viewCellWidth } = reactData;
+            return h('div', {
+                ref: 'refElem',
+                class: 'vxe-gantt-view--header-wrapper'
+            }, [
+                h('div', {
+                    ref: 'refHeaderScroll',
+                    class: 'vxe-gantt-view--header-inner-wrapper',
+                    on: {
+                        scroll: $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,
+                                style: {
+                                    width: `${viewCellWidth}px`
+                                }
+                            });
+                        })),
+                        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',
+                                    attrs: {
+                                        colspan: column.children ? column.children.length : null,
+                                        title: `${column.field}`
+                                    }
+                                }, column.title);
+                            }));
+                        }))
+                    ])
+                ])
+            ]);
+        }
+    },
+    mounted() {
+        const _vm = this;
+        const $xeGanttView = _vm.$xeGanttView;
+        const { internalData } = $xeGanttView;
+        const { elemStore } = internalData;
+        const prefix = 'main-header-';
+        elemStore[`${prefix}wrapper`] = _vm.$refs.refElem;
+        elemStore[`${prefix}scroll`] = _vm.$refs.refHeaderScroll;
+        elemStore[`${prefix}table`] = _vm.$refs.refHeaderTable;
+        elemStore[`${prefix}xSpace`] = _vm.$refs.refHeaderXSpace;
+    },
+    destroyed() {
+        const _vm = this;
+        const $xeGanttView = _vm.$xeGanttView;
+        const { internalData } = $xeGanttView;
+        const { elemStore } = internalData;
+        const prefix = 'main-header-';
+        elemStore[`${prefix}wrapper`] = null;
+        elemStore[`${prefix}scroll`] = null;
+        elemStore[`${prefix}table`] = null;
+        elemStore[`${prefix}xSpace`] = null;
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});