vxe-gantt 0.0.3 → 3.0.0-beta.1

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,72 +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~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
+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

@@ -1,31 +1,41 @@
-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 : {};
+    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) {
-                const { computeCellOpts, computeRowOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps();
-                cellOpts = computeCellOpts.value;
-                rowOpts = computeRowOpts.value;
-                defaultRowHeight = computeDefaultRowHeight.value;
+                cellOpts = $xeTable.computeCellOpts;
+                rowOpts = $xeTable.computeRowOpts;
+                defaultRowHeight = $xeTable.computeDefaultRowHeight;
             }
+            const { reactData } = $xeGanttView;
             const { tableData, tableColumn } = reactData;
             const trVNs = [];
             tableData.forEach((row, rIndex) => {
@@ -40,64 +50,88 @@ export default defineVxeComponent({
                         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;
-        };
-        const renderVN = () => {
-            const { tableColumn } = reactData;
+        },
+        renderVN(h) {
+            const _vm = this;
+            const $xeGanttView = _vm.$xeGanttView;
+            const { reactData } = $xeGanttView;
+            const { tableColumn, viewCellWidth } = reactData;
             return h('div', {
-                ref: refElem,
+                ref: 'refElem',
                 class: 'vxe-gantt-view--body-wrapper'
             }, [
                 h('div', {
-                    ref: refBodyScroll,
+                    ref: 'refBodyScroll',
                     class: 'vxe-gantt-view--body-inner-wrapper',
-                    onScroll: $xeGanttView.triggerBodyScrollEvent
+                    on: {
+                        scroll: $xeGanttView.triggerBodyScrollEvent
+                    }
                 }, [
                     h('div', {
-                        ref: refBodyXSpace,
+                        ref: 'refBodyXSpace',
                         class: 'vxe-body--x-space'
                     }),
                     h('div', {
-                        ref: refBodyYSpace,
+                        ref: 'refBodyYSpace',
                         class: 'vxe-body--y-space'
                     }),
                     h('table', {
-                        ref: refBodyTable,
+                        ref: 'refBodyTable',
                         class: 'vxe-gantt-view--body-table'
                     }, [
                         h('colgroup', {}, tableColumn.map((column, cIndex) => {
                             return h('col', {
-                                key: cIndex
+                                key: cIndex,
+                                style: {
+                                    width: `${viewCellWidth}px`
+                                }
                             });
                         })),
-                        h('tbody', {}, renderRows())
+                        h('tbody', {}, _vm.renderRows(h))
                     ]),
                     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;
+        }
+    },
+    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

@@ -1,77 +1,125 @@
-import { h, inject, ref, onMounted, onUnmounted } from 'vue';
 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',
-    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 : {};
+    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) {
-                const { computeCellOpts, computeRowOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps();
-                cellOpts = computeCellOpts.value;
-                rowOpts = computeRowOpts.value;
-                defaultRowHeight = computeDefaultRowHeight.value;
+                cellOpts = $xeTable.computeCellOpts;
+                rowOpts = $xeTable.computeRowOpts;
+                defaultRowHeight = $xeTable.computeDefaultRowHeight;
             }
+            const { reactData } = $xeGanttView;
             const { tableData } = reactData;
-            const progressField = computeProgressField.value;
+            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);
-                const progressValue = XEUtils.get(row, progressField);
+                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,
-                    rowid,
-                    class: 'vxe-gantt-view--chart-row',
+                    attrs: {
+                        rowid
+                    },
+                    class: ['vxe-gantt-view--chart-row', {
+                            'is--round': round
+                        }],
                     style: {
                         height: `${cellHeight}px`
                     }
                 }, [
                     h('div', {
                         class: 'vxe-gantt-view--chart-bar',
-                        rowid
+                        attrs: {
+                            rowid
+                        },
+                        on: {
+                            click(evnt) {
+                                $xeGantt.handleTaskBarClickEvent(evnt, { row });
+                            },
+                            dblclick(evnt) {
+                                $xeGantt.handleTaskBarDblclickEvent(evnt, { row });
+                            }
+                        }
                     }, [
-                        h('div', {
-                            class: 'vxe-gantt-view--chart-progress',
-                            style: progressValue
-                                ? {
-                                    width: `${progressValue}%`
+                        showProgress
+                            ? h('div', {
+                                class: 'vxe-gantt-view--chart-progress',
+                                style: {
+                                    width: `${progressValue || 0}%`
                                 }
-                                : undefined
-                        }),
-                        h('div', {
-                            class: 'vxe-gantt-view--chart-content'
-                        })
+                            })
+                            : renderEmptyElement($xeGantt),
+                        showContent
+                            ? h('div', {
+                                class: 'vxe-gantt-view--chart-content'
+                            }, title)
+                            : renderEmptyElement($xeGantt)
                     ])
                 ]));
             });
             return h('div', {
-                ref: refElem,
+                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;
+        }
+    },
+    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

@@ -1,36 +1,53 @@
-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;
+    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,
+                ref: 'refElem',
                 class: 'vxe-gantt-view--header-wrapper'
             }, [
                 h('div', {
-                    ref: refHeaderScroll,
+                    ref: 'refHeaderScroll',
                     class: 'vxe-gantt-view--header-inner-wrapper',
-                    onScroll: $xeGanttView.triggerHeaderScrollEvent
+                    on: {
+                        scroll: $xeGanttView.triggerHeaderScrollEvent
+                    }
                 }, [
                     h('div', {
-                        ref: refHeaderXSpace,
+                        ref: 'refHeaderXSpace',
                         class: 'vxe-body--x-space'
                     }),
                     h('table', {
-                        ref: refHeaderTable,
+                        ref: 'refHeaderTable',
                         class: 'vxe-gantt-view--header-table'
                     }, [
                         h('colgroup', {}, tableColumn.map((column, cIndex) => {
                             return h('col', {
-                                key: cIndex
+                                key: cIndex,
+                                style: {
+                                    width: `${viewCellWidth}px`
+                                }
                             });
                         })),
                         h('thead', {}, headerGroups.map((cols, rIndex) => {
@@ -40,31 +57,41 @@ export default defineVxeComponent({
                                 return h('th', {
                                     key: cIndex,
                                     class: 'vxe-gantt-view--header-column',
-                                    colspan: column.children ? column.children.length : null,
-                                    title: `${column.field}`
+                                    attrs: {
+                                        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;
+        }
+    },
+    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);
     }
 });