vxe-gantt 4.0.23 → 4.0.24

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

@@ -1,6 +1,8 @@
 import { h, inject, VNode, ref, Ref, onMounted, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { getCellRestHeight } from './util'
+import { getClass } from '../../ui/src/utils'
+import XEUtils from 'xe-utils'
 import GanttViewChartComponent from './gantt-chart'
 
 import type { VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods, VxeTableDefines } from 'vxe-table'
@@ -39,9 +41,10 @@ export default defineVxeComponent({
       const { headerGroups } = reactData
       const { todayDateMaps } = internalData
       const taskViewOpts = computeTaskViewOpts.value
-      const { showNowLine } = taskViewOpts
+      const { showNowLine, viewStyle } = taskViewOpts
       const { scaleItem } = headerGroups[headerGroups.length - 1] || {}
-      const { field } = column
+      const { field, dateObj } = column
+      const { cellClassName, cellStyle } = viewStyle || {}
       const todayValue = showNowLine && scaleItem ? todayDateMaps[scaleItem.type] : null
 
       const rowRest = fullAllDataRowIdData[rowid] || {}
@@ -85,16 +88,24 @@ export default defineVxeComponent({
           })
         )
       }
-      const ctParams = { source: sourceType, type: viewType, row, column, $rowIndex, rowIndex, _rowIndex }
+      const ctParams = { source: sourceType, type: viewType, dateObj, row, column, $rowIndex, rowIndex, _rowIndex }
       return h('td', {
         key: $columnIndex,
-        class: ['vxe-gantt-view--body-column', {
-          'is--now': showNowLine && todayValue === field,
-          'col--rs-height': isRsHeight
-        }],
-        style: {
-          height: `${cellHeight}px`
-        },
+        class: [
+          'vxe-gantt-view--body-column',
+          {
+            'is--now': showNowLine && todayValue === field,
+            'col--rs-height': isRsHeight
+          },
+          getClass(cellClassName, ctParams)
+        ],
+        style: cellStyle
+          ? Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle(ctParams) : cellStyle, {
+            height: `${cellHeight}px`
+          })
+          : {
+              height: `${cellHeight}px`
+            },
         onClick (evnt) {
           $xeGantt.handleTaskCellClickEvent(evnt, { row, column })
         },
@@ -122,6 +133,10 @@ export default defineVxeComponent({
       const { transform } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
 
+      const taskViewOpts = computeTaskViewOpts.value
+      const { viewStyle } = taskViewOpts
+      const { rowClassName, rowStyle } = viewStyle || {}
+
       const { tableColumn, scrollYLoad } = reactData
 
       const trVNs:VNode[] = []
@@ -155,17 +170,23 @@ export default defineVxeComponent({
           trOns.onDragend = $xeTable.handleRowDragDragendEvent
           trOns.onDragover = $xeTable.handleRowDragDragoverEvent
         }
+        const rowParams = { source: sourceType, type: viewType, row, rowIndex, $rowIndex, _rowIndex }
         trVNs.push(
           h('tr', {
             key: treeConfig ? rowid : $rowIndex,
-            class: ['vxe-gantt-view--body-row', {
-              'row--stripe': stripe && (_rowIndex + 1) % 2 === 0,
-              'is--new': isNewRow,
-              'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
-              'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
-              'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid]
-            }],
+            class: [
+              'vxe-gantt-view--body-row',
+              {
+                'row--stripe': stripe && (_rowIndex + 1) % 2 === 0,
+                'is--new': isNewRow,
+                'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
+                'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
+                'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid]
+              },
+              getClass(rowClassName, rowParams)
+            ],
             rowid,
+            style: rowStyle ? XEUtils.isFunction(rowStyle) ? rowStyle(rowParams) : rowStyle : undefined,
             ...trOns
           }, tableColumn.map((column, $columnIndex) => renderColumn($xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex, column, $columnIndex)))
         )

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

@@ -12,6 +12,8 @@ import type { VxeGanttViewConstructor, GanttViewReactData, GanttViewPrivateRef,
 
 const { globalEvents } = VxeUI
 
+const sourceType = 'gantt'
+
 function createInternalData (): GanttViewInternalData {
   return {
     xeTable: null,
@@ -855,8 +857,7 @@ export default defineVxeComponent({
       }, 200)
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const handleScrollEvent = (evnt: Event, isRollY: boolean, isRollX: boolean, scrollTop: number, scrollLeft: number) => {
+    const handleScrollData = (isRollY: boolean, isRollX: boolean, scrollTop: number, scrollLeft: number) => {
       if (isRollX) {
         internalData.lastScrollLeft = scrollLeft
       }
@@ -867,6 +868,91 @@ export default defineVxeComponent({
       checkLastSyncScroll(isRollX, isRollY)
     }
 
+    const handleScrollEvent = (evnt: Event, isRollY: boolean, isRollX: boolean, scrollTop: number, scrollLeft: number) => {
+      const $xeTable = internalData.xeTable
+
+      const { lastScrollLeft, lastScrollTop } = internalData
+      const xHandleEl = refScrollXHandleElem.value
+      const yHandleEl = refScrollYHandleElem.value
+      if (!xHandleEl || !yHandleEl) {
+        return
+      }
+      if (!$xeTable) {
+        return
+      }
+      const { computeScrollXThreshold, computeScrollYThreshold } = $xeTable.getComputeMaps()
+      const bodyHeight = yHandleEl.clientHeight
+      const bodyWidth = xHandleEl.clientWidth
+      const scrollHeight = yHandleEl.scrollHeight
+      const scrollWidth = xHandleEl.scrollWidth
+      let isTop = false
+      let isBottom = false
+      let isLeft = false
+      let isRight = false
+      let direction = ''
+      let isTopBoundary = false
+      let isBottomBoundary = false
+      let isLeftBoundary = false
+      let isRightBoundary = false
+      if (isRollX) {
+        const xThreshold = computeScrollXThreshold.value
+        isLeft = scrollLeft <= 0
+        if (!isLeft) {
+          isRight = scrollLeft + bodyWidth >= scrollWidth - 1
+        }
+        if (scrollLeft > lastScrollLeft) {
+          direction = 'right'
+          if (scrollLeft + bodyWidth >= scrollWidth - xThreshold) {
+            isRightBoundary = true
+          }
+        } else {
+          direction = 'left'
+          if (scrollLeft <= xThreshold) {
+            isLeftBoundary = true
+          }
+        }
+      }
+      if (isRollY) {
+        const yThreshold = computeScrollYThreshold.value
+        isTop = scrollTop <= 0
+        if (!isTop) {
+          isBottom = scrollTop + bodyHeight >= scrollHeight - 1
+        }
+        if (scrollTop > lastScrollTop) {
+          direction = 'bottom'
+          if (scrollTop + bodyHeight >= scrollHeight - yThreshold) {
+            isBottomBoundary = true
+          }
+        } else {
+          direction = 'top'
+          if (scrollTop <= yThreshold) {
+            isTopBoundary = true
+          }
+        }
+      }
+      handleScrollData(isRollY, isRollX, scrollTop, scrollLeft)
+      const evntParams = {
+        source: sourceType,
+        scrollTop,
+        scrollLeft,
+        bodyHeight,
+        bodyWidth,
+        scrollHeight,
+        scrollWidth,
+        isX: isRollX,
+        isY: isRollY,
+        isTop,
+        isBottom,
+        isLeft,
+        isRight,
+        direction
+      }
+      if (isBottomBoundary || isTopBoundary || isRightBoundary || isLeftBoundary) {
+        $xeGantt.dispatchEvent('scroll-boundary', evntParams, evnt)
+      }
+      $xeGantt.dispatchEvent('scroll', evntParams, evnt)
+    }
+
     const ganttViewMethods: VxeGanttViewMethods = {
       refreshData () {
         handleUpdateData()
@@ -986,7 +1072,12 @@ export default defineVxeComponent({
             triggerScrollXEvent()
           }
         }
-        handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, scrollLeft)
+        if (isRollY) {
+          handleScrollData(isRollY, isRollX, wrapperEl.scrollTop, scrollLeft)
+        }
+        if (isRollX) {
+          handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, scrollLeft)
+        }
       },
       // triggerFooterScrollEvent (evnt) {
       //   const { inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData
@@ -1040,7 +1131,7 @@ export default defineVxeComponent({
           internalData.inVirtualScroll = true
           setScrollTop(bodyScrollElem, currTopNum)
           syncTableScrollTop(currTopNum)
-          handleScrollEvent(evnt, isRollY, isRollX, currTopNum, wrapperEl.scrollLeft)
+          handleScrollData(isRollY, isRollX, currTopNum, wrapperEl.scrollLeft)
         }
       },
       handleUpdateSXSpace () {

package/packages/ui/src/utils.ts

@@ -52,3 +52,7 @@ export function eqEmptyValue (cellValue: any) {
 export function getStringValue (cellValue: any) {
   return eqEmptyValue(cellValue) ? '' : cellValue
 }
+
+export function getClass (property: any, params: any) {
+  return property ? XEUtils.isFunction(property) ? property(params) : property : ''
+}