vxe-gantt 0.0.2 → 4.0.0-beta.0

package/README.md

@@ -21,12 +21,38 @@
   * **V4**
     * [x] v4.0 基于 vue3.2+，只支持现代浏览器，不支持 IE
   * **V3**
-    * [x] v3.0 基于 vue2.6+，只支持现代浏览器，不支持 IE
+    * [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

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;
+    }
+});