vxe-gantt 0.0.2 → 3.0.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vxe-gantt",
-  "version": "0.0.2",
-  "description": "A Gantt chart based on Vxe UI and for use on PC systems",
+  "version": "3.0.0-beta.0",
+  "description": "A vue based gantt component",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
     "serve": "vue-cli-service serve",
@@ -20,13 +20,13 @@
   ],
   "main": "lib/index.common.js",
   "module": "es/index.esm.js",
-  "unpkg": "lib/index.umd.js",
+  "unpkg": "lib/index.umd.js", 
   "jsdelivr": "lib/index.umd.js",
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "peerDependencies": {
-    "vxe-pc-ui": "^4.8.0",
-    "vxe-table": "^4.14.0"
+    "vxe-pc-ui": "^3.8.0",
+    "vxe-table": "^3.17.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -57,14 +57,15 @@
     "gulp-sourcemaps": "^3.0.0",
     "gulp-typescript": "^5.0.1",
     "gulp-uglify": "^3.0.2",
-    "postcss": "^8.4.38",
     "sass": "^1.80.4",
     "sass-loader": "^14.2.1",
-    "typescript": "~4.9.5",
-    "vue": "3.4.27",
-    "vue-router": "~4.5.1",
-    "vxe-pc-ui": "^4.8.3",
-    "vxe-table": "^4.15.1"
+    "typescript": "~4.5.5",
+    "vue-template-compiler": "2.6.14",
+    "vue": "~2.6.14",
+    "vue-i18n": "^8.15.1",
+    "vue-router": "^3.5.1",
+    "vxe-pc-ui": "^3.8.15",
+    "vxe-table": "^3.17.8"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",
@@ -87,6 +88,5 @@
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/x-extends/vxe-gantt/issues"
-  },
-  "homepage": "https://github.com/x-extends/vxe-gantt/"
+  }
 }

package/packages/components.ts

@@ -1,19 +1,22 @@
-import { App } from 'vue'
-import { setConfig, VxeGlobalConfig } from '@vxe-ui/core'
-
+import { VueConstructor } from 'vue'
+import VxeUI from './ui'
 import VxeGantt from './gantt'
 
+import type { VxeGlobalConfig } from 'vxe-pc-ui'
+
+const { setConfig } = VxeUI
+
 const components = [
   VxeGantt
 ]
 
-export function install (app: App, options?: VxeGlobalConfig) {
+export function install (app: VueConstructor, options?: VxeGlobalConfig) {
   setConfig(options)
 
   components.forEach(component => app.use(component))
 }
 
-export * from './ui'
+export { VxeUI }
 
 // Components
 export * from './gantt'

package/packages/gantt/index.ts

@@ -1,9 +1,9 @@
-import { App } from 'vue'
+import { VueConstructor } from 'vue'
 import { VxeUI } from '@vxe-ui/core'
 import VxeGanttComponent from './src/gantt'
 
 export const VxeGantt = Object.assign({}, VxeGanttComponent, {
-  install (app: App) {
+  install (app: VueConstructor) {
     app.component(VxeGanttComponent.name as string, VxeGanttComponent)
   }
 })

package/packages/gantt/src/gantt-body.ts

@@ -0,0 +1,155 @@
+import { VNode, CreateElement } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import { getCellRestHeight } from './util'
+import GanttViewChartComponent from './gantt-chart'
+
+import type { VxeTablePropTypes, TableInternalData } from 'vxe-table'
+import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeGanttViewBody',
+  inject: {
+    $xeGantt: {
+      default: null
+    },
+    $xeGanttView: {
+      default: null
+    }
+  },
+  props: {},
+  data () {
+    return {}
+  },
+  computed: {
+    ...({} as {
+      $xeGantt(): (VxeGanttConstructor & VxeGanttPrivateMethods)
+      $xeGanttView(): (VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
+    })
+  },
+  methods: {
+    //
+    // Render
+    //
+    renderRows (h: CreateElement) {
+      const _vm = this
+      const $xeGantt = _vm.$xeGantt
+      const $xeGanttView = _vm.$xeGanttView
+      const $xeTable = $xeGanttView.internalData.xeTable
+
+      const tableInternalData = ($xeTable ? $xeTable as unknown : {}) as TableInternalData
+      const fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData || {}
+      let cellOpts: VxeTablePropTypes.CellConfig = {}
+      let rowOpts : VxeTablePropTypes.RowConfig = {}
+      let defaultRowHeight = 0
+      if ($xeTable) {
+        cellOpts = $xeTable.computeCellOpts
+        rowOpts = $xeTable.computeRowOpts
+        defaultRowHeight = $xeTable.computeDefaultRowHeight
+      }
+
+      const { reactData } = $xeGanttView
+      const { tableData, tableColumn } = reactData
+
+      const trVNs:VNode[] = []
+      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: MouseEvent) {
+                  $xeGantt.handleTaskCellClickEvent(evnt, { row })
+                },
+                dblclick (evnt: MouseEvent) {
+                  $xeGantt.handleTaskCellDblclickEvent(evnt, { row })
+                }
+              }
+            })
+          }))
+        )
+      })
+      return trVNs
+    },
+    renderVN (h: CreateElement) {
+      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 as HTMLDivElement
+    elemStore[`${prefix}scroll`] = _vm.$refs.refBodyScroll as HTMLDivElement
+    elemStore[`${prefix}table`] = _vm.$refs.refBodyTable as HTMLDivElement
+    elemStore[`${prefix}xSpace`] = _vm.$refs.refBodyXSpace as HTMLDivElement
+    elemStore[`${prefix}ySpace`] = _vm.$refs.refBodyYSpace as HTMLDivElement
+  },
+  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 (this: any, h) {
+    return this.renderVN(h)
+  }
+})

package/packages/gantt/src/gantt-chart.ts

@@ -0,0 +1,143 @@
+import { VNode, CreateElement } 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'
+
+import type { VxeTablePropTypes, TableInternalData } from 'vxe-table'
+import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
+
+const { renderEmptyElement } = VxeUI
+
+export default defineVxeComponent({
+  name: 'VxeGanttViewChart',
+  inject: {
+    $xeGantt: {
+      default: null
+    },
+    $xeGanttView: {
+      default: null
+    }
+  },
+  props: {},
+  data () {
+    return {}
+  },
+  computed: {
+    ...({} as {
+      $xeGantt(): (VxeGanttConstructor & VxeGanttPrivateMethods)
+      $xeGanttView(): (VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
+    })
+  },
+  methods: {
+    //
+    // Render
+    //
+    renderVN (h: CreateElement) {
+      const _vm = this
+      const $xeGantt = _vm.$xeGantt
+      const $xeGanttView = _vm.$xeGanttView
+      const $xeTable = $xeGanttView.internalData.xeTable
+
+      const tableInternalData = ($xeTable ? $xeTable as unknown : {}) as TableInternalData
+      const fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData || {}
+      let cellOpts: VxeTablePropTypes.CellConfig = {}
+      let rowOpts : VxeTablePropTypes.RowConfig = {}
+      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: VNode[] = []
+      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: MouseEvent) {
+                  $xeGantt.handleTaskBarClickEvent(evnt, { row })
+                },
+                dblclick (evnt: MouseEvent) {
+                  $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 as HTMLDivElement
+  },
+  destroyed () {
+    const _vm = this
+    const $xeGanttView = _vm.$xeGanttView
+    const { internalData } = $xeGanttView
+
+    const { elemStore } = internalData
+    const prefix = 'main-chart-'
+    elemStore[`${prefix}wrapper`] = null
+  },
+  render (this: any, h) {
+    return this.renderVN(h)
+  }
+})

package/packages/gantt/src/gantt-header.ts

@@ -0,0 +1,109 @@
+import { CreateElement } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+
+import type { VxeGanttViewConstructor, VxeGanttViewPrivateMethods, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeGanttView',
+  inject: {
+    $xeGantt: {
+      default: null
+    },
+    $xeGanttView: {
+      default: null
+    }
+  },
+  props: {},
+  data () {
+    return {}
+  },
+  computed: {
+    ...({} as {
+        $xeGantt(): (VxeGanttConstructor & VxeGanttPrivateMethods)
+        $xeGanttView(): (VxeGanttViewConstructor & VxeGanttViewPrivateMethods)
+      })
+  },
+  methods: {
+    //
+    // Render
+    //
+    renderVN (h: CreateElement) {
+      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 as HTMLDivElement
+    elemStore[`${prefix}scroll`] = _vm.$refs.refHeaderScroll as HTMLDivElement
+    elemStore[`${prefix}table`] = _vm.$refs.refHeaderTable as HTMLDivElement
+    elemStore[`${prefix}xSpace`] = _vm.$refs.refHeaderXSpace as HTMLDivElement
+  },
+  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 (this: any, h) {
+    return this.renderVN(h)
+  }
+})