vxe-gantt 4.1.0 → 4.1.2

package/lib/index.umd.js

@@ -2780,7 +2780,7 @@ var core_ = __webpack_require__(4345);
 const {
   log
 } = core_.VxeUI;
-const version = `gantt v${"4.1.0"}`;
+const version = `gantt v${"4.1.2"}`;
 const warnLog = log.create('warn', version);
 const errLog = log.create('error', version);
 ;// ./packages/ui/index.ts
@@ -2791,7 +2791,7 @@ const {
   setIcon,
   checkVersion
 } = core_.VxeUI;
-core_.VxeUI.ganttVersion = "4.1.0";
+core_.VxeUI.ganttVersion = "4.1.2";
 setConfig({
   gantt: {
     // size: null,
@@ -2830,6 +2830,9 @@ setConfig({
       // beforeSave: null,
       // afterSave: null
     },
+    taskBarTooltipConfig: {
+      enterable: true
+    },
     taskViewScaleConfig: {
       week: {
         startDay: 1
@@ -3079,7 +3082,7 @@ function getFuncText(content, args) {
   return '';
 }
 function formatText(value, placeholder) {
-  return '' + (isEmptyValue(value) ? placeholder ? VxeUI.getConfig().emptyCell : '' : value);
+  return '' + (isEmptyValue(value) ? placeholder ? core_.VxeUI.getConfig().emptyCell : '' : value);
 }
 /**
  * 判断值为：'' | null | undefined 时都属于空值
@@ -3297,7 +3300,7 @@ const tableEmits = ['update:data', 'keydown-start', 'keydown', 'keydown-end', 'p
 const gridEmits = [...tableEmits, 'page-change', 'form-submit', 'form-submit-invalid', 'form-reset', 'form-collapse', 'form-toggle-collapse', 'proxy-query', 'proxy-delete', 'proxy-save', 'toolbar-button-click', 'toolbar-tool-click', 'zoom'];
 ;// ./packages/gantt/src/emits.ts
 
-const ganttEmits = [...gridEmits, 'task-cell-click', 'task-cell-dblclick', 'task-bar-click', 'task-bar-dblclick', 'task-view-cell-click', 'task-view-cell-dblclick'];
+const ganttEmits = [...gridEmits, 'task-cell-click', 'task-cell-dblclick', 'task-bar-mouseenter', 'task-bar-mouseleave', 'task-bar-click', 'task-bar-dblclick', 'task-view-cell-click', 'task-view-cell-dblclick'];
 ;// ./packages/gantt/src/util.ts
 function getRefElem(refEl) {
   if (refEl) {
@@ -3412,15 +3415,17 @@ const viewType = 'header';
             dateObj
           } = column;
           let label = `${column.title}`;
-          if ($rowIndex < headerGroups.length - 1) {
-            if (scaleItem.type === 'day') {
-              label = getI18n(`vxe.gantt.dayss.w${dateObj.e}`);
-            } else {
-              label = getI18n(`vxe.gantt.${!$rowIndex && headerGroups.length > 1 ? 'tFullFormat' : 'tSimpleFormat'}.${type}`, dateObj);
-            }
+          if (scaleItem.type === 'day') {
+            label = getI18n(`vxe.gantt.dayss.w${dateObj.e}`);
           } else {
-            if (isLast && scaleItem.type === 'week') {
+            if ($rowIndex) {
               label = getI18n(`vxe.gantt.tSimpleFormat.${type}`, dateObj);
+            } else {
+              if (isLast && scaleItem.type === 'week') {
+                label = getI18n(`vxe.gantt.tSimpleFormat.${type}`, dateObj);
+              } else {
+                label = getI18n(`vxe.gantt.tFullFormat.${type}`, dateObj);
+              }
             }
           }
           let cellVNs = label;
@@ -3513,7 +3518,8 @@ const gantt_chart_viewType = 'chart';
     const {
       computeProgressField,
       computeTitleField,
-      computeTaskBarOpts
+      computeTaskBarOpts,
+      computeScaleUnit
     } = $xeGantt.getComputeMaps();
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const renderTaskBar = ($xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex) => {
@@ -3542,16 +3548,19 @@ const gantt_chart_viewType = 'chart';
       const titleField = computeTitleField.value;
       const progressField = computeProgressField.value;
       const taskBarOpts = computeTaskBarOpts.value;
+      const scaleUnit = computeScaleUnit.value;
       const barParams = {
         $gantt: $xeGantt,
-        row
+        row,
+        scaleType: scaleUnit
       };
       const {
         showProgress,
         showContent,
         contentMethod,
         barStyle,
-        drag
+        drag,
+        showTooltip
       } = taskBarOpts;
       const isBarRowStyle = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(barStyle);
       const barStyObj = (barStyle ? isBarRowStyle ? barStyle(barParams) : barStyle : {}) || {};
@@ -3583,17 +3592,49 @@ const gantt_chart_viewType = 'chart';
       if (contentMethod) {
         title = getStringValue(contentMethod({
           row,
-          title
+          title,
+          scaleType: scaleUnit
         }));
       }
       const ctParams = {
+        $gantt: $xeGantt,
         source: gantt_chart_sourceType,
         type: gantt_chart_viewType,
+        scaleType: scaleUnit,
         row,
         $rowIndex,
         rowIndex,
         _rowIndex
       };
+      const ons = {
+        onClick(evnt) {
+          $xeGantt.handleTaskBarClickEvent(evnt, barParams);
+        },
+        onDblclick(evnt) {
+          $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
+        },
+        onMousedown(evnt) {
+          if ($xeGantt.handleTaskBarMousedownEvent) {
+            $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
+          }
+        }
+      };
+      if (showTooltip) {
+        ons.onMouseover = evnt => {
+          const ttParams = Object.assign({
+            $event: evnt
+          }, ctParams);
+          $xeGantt.triggerTaskBarTooltipEvent(evnt, ttParams);
+          $xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt);
+        };
+        ons.onMouseleave = evnt => {
+          const ttParams = Object.assign({
+            $event: evnt
+          }, ctParams);
+          $xeGantt.handleTaskBarTooltipLeaveEvent(evnt, ttParams);
+          $xeGantt.dispatchEvent('task-bar-mouseleave', ttParams, evnt);
+        };
+      }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         key: treeConfig ? rowid : $rowIndex,
         rowid,
@@ -3612,17 +3653,7 @@ const gantt_chart_viewType = 'chart';
         class: taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar',
         style: vbStyle,
         rowid,
-        onClick(evnt) {
-          $xeGantt.handleTaskBarClickEvent(evnt, barParams);
-        },
-        onDblclick(evnt) {
-          $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
-        },
-        onMousedown(evnt) {
-          if ($xeGantt.handleTaskBarMousedownEvent) {
-            $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
-          }
-        }
+        ...ons
       }, taskBarSlot ? $xeGantt.callSlot(taskBarSlot, barParams) : [showProgress ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-gantt-view--chart-progress',
         style: vpStyle
@@ -3725,7 +3756,8 @@ const gantt_body_viewType = 'body';
     const $xeGantt = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeGantt', {});
     const $xeGanttView = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeGanttView', {});
     const {
-      computeTaskViewOpts
+      computeTaskViewOpts,
+      computeScaleUnit
     } = $xeGantt.getComputeMaps();
     const {
       reactData,
@@ -3770,6 +3802,7 @@ const gantt_body_viewType = 'body';
         showNowLine,
         viewStyle
       } = taskViewOpts;
+      const scaleUnit = computeScaleUnit.value;
       const {
         scaleItem
       } = headerGroups[headerGroups.length - 1] || {};
@@ -3820,8 +3853,10 @@ const gantt_body_viewType = 'body';
         }));
       }
       const ctParams = {
+        $gantt: $xeGantt,
         source: gantt_body_sourceType,
         type: gantt_body_viewType,
+        scaleType: scaleUnit,
         dateObj,
         row,
         column,
@@ -3892,6 +3927,7 @@ const gantt_body_viewType = 'body';
         transform
       } = treeOpts;
       const childrenField = treeOpts.children || treeOpts.childrenField;
+      const scaleUnit = computeScaleUnit.value;
       const taskViewOpts = computeTaskViewOpts.value;
       const {
         viewStyle
@@ -3939,8 +3975,10 @@ const gantt_body_viewType = 'body';
           trOns.onDragover = $xeTable.handleRowDragDragoverEvent;
         }
         const rowParams = {
+          $gantt: $xeGantt,
           source: gantt_body_sourceType,
           type: gantt_body_viewType,
+          scaleType: scaleUnit,
           row,
           rowIndex,
           $rowIndex,
@@ -4439,7 +4477,7 @@ const maxYHeight = 5e6;
           if (minScale.level < 17) {
             handleData('quarter', colMaps, minCol);
           }
-          if (minScale.level < 14) {
+          if (minScale.level < 15) {
             handleData('month', colMaps, minCol);
           }
           if (minScale.level < 13) {
@@ -4448,7 +4486,7 @@ const maxYHeight = 5e6;
           if (minScale.level < 11) {
             handleData('day', colMaps, minCol);
           }
-          if (minScale.level < 12) {
+          if (minScale.level < 9) {
             handleData('date', colMaps, minCol);
           }
           if (minScale.level < 7) {
@@ -4457,6 +4495,9 @@ const maxYHeight = 5e6;
           if (minScale.level < 5) {
             handleData('minute', colMaps, minCol);
           }
+          if (minScale.level < 3) {
+            handleData('second', colMaps, minCol);
+          }
           fullCols.push(minCol);
         }
         taskScaleList.forEach(scaleItem => {
@@ -5787,6 +5828,7 @@ function gantt_createInternalData() {
   return {
     uFoot: false,
     resizeTableWidth: 0
+    // barTipTimeout: undefined
   };
 }
 const viewTypeLevelMaps = {
@@ -5819,6 +5861,7 @@ function getViewTypeLevel(type) {
     taskViewScaleConfig: Object,
     taskViewConfig: Object,
     taskBarConfig: Object,
+    taskBarTooltipConfig: Object,
     taskSplitConfig: Object,
     taskBarResizeConfig: Object,
     taskBarDragConfig: Object,
@@ -5839,6 +5882,7 @@ function getViewTypeLevel(type) {
     const VxeUIPagerComponent = core_.VxeUI.getComponent('VxePager');
     const VxeTableComponent = core_.VxeUI.getComponent('VxeTable');
     const VxeToolbarComponent = core_.VxeUI.getComponent('VxeToolbar');
+    const VxeUITooltipComponent = core_.VxeUI.getComponent('VxeTooltip');
     const {
       computeSize
     } = useFns.useSize(props);
@@ -5859,7 +5903,13 @@ function getViewTypeLevel(type) {
       },
       showLeftView: true,
       showRightView: true,
-      taskScaleList: []
+      taskScaleList: [],
+      barTipStore: {
+        row: null,
+        content: '',
+        visible: false,
+        params: null
+      }
     });
     const internalData = gantt_createInternalData();
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -5878,6 +5928,7 @@ function getViewTypeLevel(type) {
     const refPagerWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refTableWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refGanttWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refTooltip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refResizableSplitTip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const extendTableMethods = methodKeys => {
       const funcs = {};
@@ -5944,6 +5995,9 @@ function getViewTypeLevel(type) {
     const computeTaskSplitOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().gantt.taskSplitConfig, props.taskSplitConfig);
     });
+    const computeTaskBarTooltipOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().gantt.taskBarTooltipConfig, props.taskBarTooltipConfig);
+    });
     const computeScaleUnit = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const minScale = computeMinScale.value;
       return minScale ? minScale.type : 'date';
@@ -5960,7 +6014,7 @@ function getViewTypeLevel(type) {
       } = reactData;
       return taskScaleList.find(item => item.type === 'week');
     });
-    const computeTaskScaleConfs = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+    const computeTaskViewScales = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const taskViewOpts = computeTaskViewOpts.value;
       const {
         scales
@@ -6220,7 +6274,8 @@ function getViewTypeLevel(type) {
       computeTaskBarDragOpts,
       computeTaskBarResizeOpts,
       computeTaskSplitOpts,
-      computeTaskScaleConfs,
+      computeTaskBarTooltipOpts,
+      computeTaskViewScales,
       computeScaleUnit,
       computeMinScale,
       computeWeekScale,
@@ -6232,6 +6287,7 @@ function getViewTypeLevel(type) {
       computeScrollbarXToTop,
       computeScrollbarYToLeft
     };
+    computeMaps.computeTaskScaleConfs = computeTaskViewScales;
     const $xeGantt = {
       xID,
       props: props,
@@ -6242,7 +6298,7 @@ function getViewTypeLevel(type) {
       getComputeMaps: () => computeMaps
     };
     const handleTaskScaleConfig = () => {
-      const taskScaleConfs = computeTaskScaleConfs.value;
+      const taskScaleConfs = computeTaskViewScales.value;
       const taskViewScaleOpts = computeTaskViewScaleOpts.value;
       const scaleConfs = [];
       if (taskScaleConfs) {
@@ -6779,6 +6835,17 @@ function getViewTypeLevel(type) {
         $gantt: $xeGantt
       }, params));
     };
+    const handleTargetEnterEvent = isClear => {
+      const $tooltip = refTooltip.value;
+      clearTimeout(internalData.barTipTimeout);
+      if (isClear) {
+        $xeGantt.closeTaskBarTooltip();
+      } else {
+        if ($tooltip && $tooltip.setActived) {
+          $tooltip.setActived(true);
+        }
+      }
+    };
     const ganttMethods = {
       dispatchEvent,
       getEl() {
@@ -7514,6 +7581,27 @@ function getViewTypeLevel(type) {
       hideTaskView() {
         reactData.showRightView = false;
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      /**
+       * 关闭 bar tooltip
+       */
+      closeTaskBarTooltip() {
+        const {
+          barTipStore
+        } = reactData;
+        const $tooltip = refTooltip.value;
+        if (barTipStore.visible) {
+          Object.assign(barTipStore, {
+            row: null,
+            content: null,
+            visible: false,
+            params: {}
+          });
+          if ($tooltip && $tooltip.close) {
+            $tooltip.close();
+          }
+        }
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
       }
     };
     const ganttPrivateMethods = {
@@ -7659,6 +7747,61 @@ function getViewTypeLevel(type) {
       handleTaskBarDblclickEvent(evnt, params) {
         $xeGantt.dispatchEvent('task-bar-dblclick', params, evnt);
       },
+      triggerTaskBarTooltipEvent(evnt, params) {
+        const {
+          barTipStore
+        } = reactData;
+        const taskBarTooltipOpts = computeTaskBarTooltipOpts.value;
+        const titleField = computeTitleField.value;
+        const {
+          contentMethod
+        } = taskBarTooltipOpts;
+        const {
+          row
+        } = params;
+        let content = formatText(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, titleField));
+        if (contentMethod) {
+          const customContnet = contentMethod(params);
+          if (!external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(customContnet)) {
+            content = `${customContnet}`;
+          }
+        }
+        handleTargetEnterEvent(barTipStore.row !== row);
+        const tipContent = formatText(content);
+        Object.assign(barTipStore, {
+          row,
+          visible: true,
+          content: tipContent,
+          params
+        });
+        (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+          const $tooltip = refTooltip.value;
+          if ($tooltip) {
+            if ($tooltip.openByEvent) {
+              $tooltip.openByEvent(evnt, evnt.currentTarget, tipContent);
+            } else if ($tooltip.open) {
+              $tooltip.open(evnt.currentTarget, tipContent);
+            }
+          }
+        });
+      },
+      handleTaskBarTooltipLeaveEvent() {
+        const taskBarTooltipOpts = computeTaskBarTooltipOpts.value;
+        let $tooltip = refTooltip.value;
+        if ($tooltip && $tooltip.setActived) {
+          $tooltip.setActived(false);
+        }
+        if (taskBarTooltipOpts.enterable) {
+          internalData.barTipTimeout = setTimeout(() => {
+            $tooltip = refTooltip.value;
+            if ($tooltip && $tooltip.isActived && !$tooltip.isActived()) {
+              $xeGantt.closeTaskBarTooltip();
+            }
+          }, taskBarTooltipOpts.leaveDelay);
+        } else {
+          $xeGantt.closeTaskBarTooltip();
+        }
+      },
       handleTaskHeaderContextmenuEvent(evnt, params) {
         const $xeTable = refTable.value;
         if ($xeTable) {
@@ -8112,14 +8255,19 @@ function getViewTypeLevel(type) {
       return childVNs;
     };
     const renderLayout = () => {
+      const {
+        barTipStore
+      } = reactData;
       const currLayoutConf = computeCurrLayoutConf.value;
       const {
         headKeys,
         bodyKeys,
         footKeys
       } = currLayoutConf;
+      const taskBarTooltipOpts = computeTaskBarTooltipOpts.value;
       const asideLeftSlot = slots.asideLeft || slots['aside-left'];
       const asideRightSlot = slots.asideRight || slots['aside-right'];
+      const taskBarTooltipSlot = slots.taskBarTooltip || slots['task-bar-tooltip'];
       return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-gantt--layout-header-wrapper'
       }, renderChildLayout(headKeys)), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -8134,7 +8282,40 @@ function getViewTypeLevel(type) {
         class: 'vxe-gantt--layout-footer-wrapper'
       }, renderChildLayout(footKeys)), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refPopupContainerElem
-      })];
+      }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {}, [
+      /**
+        * 任务条提示
+        */
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUITooltipComponent, {
+        key: 'gtp',
+        ref: refTooltip,
+        theme: taskBarTooltipOpts.theme,
+        enterable: taskBarTooltipOpts.enterable,
+        enterDelay: taskBarTooltipOpts.enterDelay,
+        leaveDelay: taskBarTooltipOpts.leaveDelay,
+        useHTML: taskBarTooltipOpts.useHTML,
+        width: taskBarTooltipOpts.width,
+        height: taskBarTooltipOpts.height,
+        minWidth: taskBarTooltipOpts.minWidth,
+        minHeight: taskBarTooltipOpts.minHeight,
+        maxWidth: taskBarTooltipOpts.maxWidth,
+        maxHeight: taskBarTooltipOpts.maxHeight,
+        isArrow: false
+      }, taskBarTooltipSlot ? {
+        content: () => {
+          const {
+            row,
+            content: tooltipContent
+          } = barTipStore;
+          if (row) {
+            return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {}, taskBarTooltipSlot(Object.assign({
+              tooltipContent,
+              $gantt: $xeGantt
+            }, barTipStore.params)));
+          }
+          return gantt_renderEmptyElement($xeGantt);
+        }
+      } : {})])];
     };
     const renderVN = () => {
       const {
@@ -8185,7 +8366,7 @@ function getViewTypeLevel(type) {
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.proxyConfig, () => {
       initProxy();
     });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeTaskScaleConfs, () => {
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeTaskViewScales, () => {
       handleTaskScaleConfig();
       $xeGantt.refreshTaskView();
     });