vxe-pc-ui 4.10.43 → 4.10.44

package/packages/tooltip/src/tooltip.ts

@@ -3,7 +3,7 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, createEvent, useSize } from '../../ui'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
-import { getAbsolutePos, getDomNode, toCssUnit } from '../../ui/src/dom'
+import { toCssUnit } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
 
 import type { VxeTooltipPropTypes, VxeTooltipConstructor, VxeTooltipEmits, TooltipInternalData, TooltipReactData, TooltipMethods, TooltipPrivateRef, VxeComponentStyleType } from '../../../types'
@@ -87,6 +87,7 @@ export default defineVxeComponent({
       target: null,
       isUpdate: false,
       visible: false,
+      tipPos: null,
       tipContent: '',
       tipActive: false,
       tipTarget: null,
@@ -144,30 +145,74 @@ export default defineVxeComponent({
     let tooltipMethods = {} as TooltipMethods
 
     const updateTipStyle = () => {
-      const { tipTarget, tipStore } = reactData
-      if (tipTarget) {
-        const { scrollTop, scrollLeft, visibleWidth } = getDomNode()
-        const { top, left } = getAbsolutePos(tipTarget)
-        const el = refElem.value
-        if (!el) {
-          return
-        }
+      const { isArrow } = props
+      const { tipTarget: targetElem, tipStore, tipPos } = reactData
+      let top: number | '' = ''
+      let left: number | '' = ''
+      let panelPlacement: 'top' | 'bottom' = 'bottom'
+      let arrowLeft: number | '' = ''
+      const panelElem = refElem.value
+      if (panelElem && targetElem) {
+        const documentElement = document.documentElement
+        const bodyElem = document.body
+        const targetWidth = targetElem.offsetWidth
+        const targetHeight = targetElem.offsetHeight
+        const panelHeight = panelElem.offsetHeight
+        const panelWidth = panelElem.offsetWidth
+
+        const targetRect = targetElem.getBoundingClientRect()
+        const visibleHeight = documentElement.clientHeight || bodyElem.clientHeight
+        const visibleWidth = documentElement.clientWidth || bodyElem.clientWidth
+
         const marginSize = 6
-        const offsetHeight = el.offsetHeight
-        const offsetWidth = el.offsetWidth
-        let tipLeft = left
-        let tipTop = top - offsetHeight - marginSize
-        tipLeft = Math.max(marginSize, left + Math.floor((tipTarget.offsetWidth - offsetWidth) / 2))
-        if (tipLeft + offsetWidth + marginSize > scrollLeft + visibleWidth) {
-          tipLeft = scrollLeft + visibleWidth - offsetWidth - marginSize
+        top = targetRect.top + targetHeight
+        left = targetRect.left
+        if (tipPos && (tipPos.x && tipPos.y)) {
+          if (isArrow) {
+            left = left + Math.max(8, Math.min(targetWidth - 8, tipPos.oLeft)) - panelWidth / 2
+          } else {
+            left = tipPos.x + 1
+            top = tipPos.y + 1
+          }
+        } else {
+          left = targetRect.left + (targetWidth - panelWidth) / 2
+        }
+        // 如果下面不够放，则向上
+        if (top + panelHeight + marginSize > visibleHeight) {
+          panelPlacement = 'top'
+          top = targetRect.top - panelHeight
         }
-        if (top - offsetHeight < scrollTop + marginSize) {
-          tipStore.placement = 'bottom'
-          tipTop = top + tipTarget.offsetHeight + marginSize
+        // 如果上面不够放，则向下（优先）
+        if (top < marginSize) {
+          panelPlacement = 'bottom'
+          top = targetRect.top + targetHeight
         }
-        tipStore.style.top = `${tipTop}px`
-        tipStore.style.left = `${tipLeft}px`
-        tipStore.arrowStyle.left = `${left - tipLeft + tipTarget.offsetWidth / 2}px`
+        // 如果溢出右边
+        if (left + panelWidth + marginSize > visibleWidth) {
+          left -= left + panelWidth + marginSize - visibleWidth
+        }
+        // 如果溢出左边
+        if (left < marginSize) {
+          left = marginSize
+        }
+
+        // 箭头
+        if (left === targetRect.left) {
+          if (targetWidth <= panelWidth) {
+            arrowLeft = targetWidth / 2
+          }
+        } else if (left < targetRect.left) {
+          if (left + panelWidth > targetRect.left + targetWidth) {
+            arrowLeft = (targetRect.left - left) + targetWidth / 2
+          } else {
+            arrowLeft = (targetRect.left - left) + (panelWidth - (targetRect.left - left)) / 2
+          }
+        }
+
+        tipStore.placement = panelPlacement
+        tipStore.style.top = `${top}px`
+        tipStore.style.left = `${left}px`
+        tipStore.arrowStyle.left = `${arrowLeft}px`
       }
     }
 
@@ -252,7 +297,7 @@ export default defineVxeComponent({
       }, props.enterDelay, { leading: false, trailing: true })
     }
 
-    const handleVisible = (target: HTMLElement | null, content?: VxeTooltipPropTypes.Content) => {
+    const handleVisible = (target: HTMLElement | null, content?: VxeTooltipPropTypes.Content, evnt?: MouseEvent) => {
       const contentSlot = slots.content
       if (!contentSlot && (content === '' || XEUtils.eqNull(content))) {
         return nextTick()
@@ -260,9 +305,22 @@ export default defineVxeComponent({
       if (target) {
         const { showDelayTip } = internalData
         const { trigger, enterDelay } = props
+        if (evnt) {
+          reactData.tipPos = {
+            x: evnt.clientX,
+            y: evnt.clientY,
+            oLeft: evnt.offsetX,
+            oTop: evnt.offsetY
+          }
+        } else {
+          reactData.tipPos = null
+        }
         reactData.tipActive = true
         reactData.tipTarget = target
         reactData.tipContent = content
+        if (reactData.visible) {
+          return $xeTooltip.updatePlacement()
+        }
         if (enterDelay && trigger === 'hover') {
           if (showDelayTip) {
             showDelayTip()
@@ -291,10 +349,14 @@ export default defineVxeComponent({
       dispatchEvent (type, params, evnt) {
         emit(type, createEvent(evnt, { $tooltip: $xeTooltip }, params))
       },
+      openByEvent (evnt: Event, target?: HTMLElement | null, content?: VxeTooltipPropTypes.Content) {
+        return handleVisible(target || reactData.target as HTMLElement || getSelectorEl(), content, evnt as MouseEvent)
+      },
       open (target?: HTMLElement | null, content?: VxeTooltipPropTypes.Content) {
         return handleVisible(target || reactData.target as HTMLElement || getSelectorEl(), content)
       },
       close () {
+        reactData.tipPos = null
         reactData.tipTarget = null
         reactData.tipActive = false
         Object.assign(reactData.tipStore, {
@@ -391,11 +453,16 @@ export default defineVxeComponent({
         style: tipStore.style,
         ...ons
       }, [
-        renderContent(),
         h('div', {
-          class: 'vxe-tooltip--arrow',
-          style: tipStore.arrowStyle
-        }),
+          key: 'tby',
+          class: 'vxe-tooltip--body'
+        }, [
+          renderContent(),
+          h('div', {
+            class: 'vxe-tooltip--arrow',
+            style: tipStore.arrowStyle
+          })
+        ]),
         ...(defaultSlot ? getSlotVNs(defaultSlot({})) : [])
       ])
     }
@@ -433,7 +500,7 @@ export default defineVxeComponent({
             reactData.tipContent = content
             reactData.tipZindex = nextZIndex()
             XEUtils.arrayEach(wrapperElem.children, (elem, index) => {
-              if (index > 1) {
+              if (index) {
                 parentNode.insertBefore(elem, wrapperElem)
                 if (!reactData.target) {
                   reactData.target = elem as HTMLElement

package/styles/components/tooltip.scss

@@ -4,10 +4,6 @@
   top: -100%;
   left: -100%;
   font-size: 12px;
-  border-radius: var(--vxe-ui-base-border-radius);
-  white-space: normal;
-  word-break: break-word;
-  box-shadow: 2px 2px 4px -2px rgba(0,0,0,.2);
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
   &:not(.is--enterable) {
@@ -57,6 +53,9 @@
     }
   }
   &.placement--top {
+    &.is--arrow {
+      padding-bottom: 6px;
+    }
     &.is--enterable {
       &:after {
         bottom: -6px;
@@ -70,6 +69,9 @@
     }
   }
   &.placement--bottom {
+    &.is--arrow {
+      padding-top: 6px;
+    }
     &.is--enterable {
       &:after {
         top: -6px;
@@ -83,10 +85,19 @@
     }
   }
 }
+.vxe-tooltip--body {
+  position: relative;
+  border-radius: var(--vxe-ui-base-border-radius);
+  white-space: normal;
+  word-break: break-word;
+  box-shadow: 2px 2px 4px -2px rgba(0,0,0,.2);
+}
 .vxe-tooltip--wrapper {
   &.theme--light {
-    background-color: var(--vxe-ui-layout-background-color);
-    border: 1px solid var(--vxe-ui-input-border-color);
+    .vxe-tooltip--body {
+      background-color: var(--vxe-ui-layout-background-color);
+      border: 1px solid var(--vxe-ui-input-border-color);
+    }
     &.placement--top {
       .vxe-tooltip--arrow {
         border-top-color: var(--vxe-ui-input-border-color);
@@ -105,8 +116,10 @@
     }
   }
   &.theme--dark {
-    background: var(--vxe-ui-tooltip-dark-background-color);
-    color: var(--vxe-ui-tooltip-dark-color);
+    .vxe-tooltip--body {
+      background: var(--vxe-ui-tooltip-dark-background-color);
+      color: var(--vxe-ui-tooltip-dark-color);
+    }
     &.placement--top {
       .vxe-tooltip--arrow {
         border-top-color: var(--vxe-ui-tooltip-dark-background-color);

package/types/components/gantt.d.ts

@@ -2,6 +2,7 @@ import { RenderFunction, SetupContext, ComputedRef, Ref } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSlotType, VxeComponentAlignType } from '@vxe-ui/core'
 import { GridPrivateRef, VxeGridProps, VxeGridPropTypes, GridPrivateComputed, GridReactData, GridInternalData, GridMethods, GridPrivateMethods, VxeGridEmits, VxeGridSlots, VxeGridListeners, VxeGridEventProps, VxeGridMethods } from './grid'
 import { VxeTablePropTypes } from './table'
+import { VxeTooltipPropTypes } from './tooltip'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -229,6 +230,10 @@ export namespace VxeGanttPropTypes {
      * 是否在任务条显示内容
      */
     showContent?: boolean
+    /**
+     * 是否在任务条显示提示信息
+     */
+    showTooltip?: boolean
     /**
      * 自定义任务条内容方法
      */
@@ -253,6 +258,28 @@ export namespace VxeGanttPropTypes {
      */
     resize?: boolean
   }
+
+  export interface TaskBarTooltipConfig<D = any> {
+    theme?: VxeTooltipPropTypes.Theme
+    enterable?: VxeTooltipPropTypes.Enterable
+    enterDelay?: VxeTooltipPropTypes.EnterDelay
+    leaveDelay?: VxeTooltipPropTypes.LeaveDelay
+    width?: VxeTooltipPropTypes.Width
+    height?: VxeTooltipPropTypes.Height
+    minWidth?: VxeTooltipPropTypes.MinWidth
+    minHeight?: VxeTooltipPropTypes.MinHeight
+    maxWidth?: VxeTooltipPropTypes.MaxWidth
+    maxHeight?: VxeTooltipPropTypes.MaxHeight
+    useHTML?: VxeTooltipPropTypes.UseHTML
+    contentMethod?(params: {
+      $gantt: VxeGanttConstructor<D>
+      row: D
+      rowIndex: number
+      $rowIndex: number
+      _rowIndex: number
+    }): string | null | void
+  }
+
   export interface TaskBarResizeConfig<D = any> {
     /**
      * 是否允许拖拽调整任务条起始日期
@@ -277,6 +304,7 @@ export namespace VxeGanttPropTypes {
       row: D
     }): Promise<boolean> | boolean
   }
+
   export interface TaskBarDragConfig<D = any> {
     /**
      * 拖拽开始时是否允许行拖拽移动任务条日期的方法，该方法的返回值用来决定是否允许被拖拽
@@ -302,6 +330,7 @@ export interface VxeGanttProps<D = any> extends Omit<VxeGridProps<D>, 'layouts'>
   taskViewConfig?: VxeGanttPropTypes.TaskViewConfig<D>
   taskSplitConfig?: VxeGanttPropTypes.TaskSplitConfig
   taskBarConfig?: VxeGanttPropTypes.TaskBarConfig<D>
+  taskBarTooltipConfig?: VxeGanttPropTypes.TaskBarTooltipConfig<D>
   taskBarResizeConfig?: VxeGanttPropTypes.TaskBarResizeConfig<D>
   taskBarDragConfig?: VxeGanttPropTypes.TaskBarDragConfig<D>
 }
@@ -314,7 +343,8 @@ export interface GanttPrivateComputed<D = any> extends GridPrivateComputed<D> {
   computeTaskBarDragOpts: ComputedRef<VxeGanttPropTypes.TaskBarDragConfig<D>>
   computeTaskBarResizeOpts: ComputedRef<VxeGanttPropTypes.TaskBarResizeConfig<D>>
   computeTaskSplitOpts: ComputedRef<VxeGanttPropTypes.TaskSplitConfig>
-  computeTaskScaleConfs: ComputedRef<VxeGanttDefines.ColumnScaleType[] | VxeGanttDefines.ColumnScaleConfig[] | undefined>
+  computeTaskBarTooltipOpts: ComputedRef<VxeGanttPropTypes.TaskBarTooltipConfig>
+  computeTaskViewScales: ComputedRef<VxeGanttDefines.ColumnScaleType[] | VxeGanttDefines.ColumnScaleConfig[] | undefined>
   computeScaleUnit: ComputedRef<VxeGanttDefines.ColumnScaleType>
   computeMinScale: ComputedRef<VxeGanttDefines.ColumnScaleObj>
   computeWeekScale: ComputedRef<VxeGanttDefines.ColumnScaleObj | null | undefined>
@@ -332,10 +362,24 @@ export interface GanttReactData<D = any> extends GridReactData<D> {
   showLeftView: boolean
   showRightView: boolean
   taskScaleList: VxeGanttDefines.ColumnScaleObj[]
+
+  // 存放 bar tooltip 相关信息
+  barTipStore: {
+    row: D | null
+    content: string
+    visible: boolean
+    params?: null | {
+      row: D | null
+      rowIndex: number
+      $rowIndex: number
+      _rowIndex: number
+    }
+  }
 }
 
 export interface GanttInternalData extends GridInternalData {
   resizeTableWidth: number
+  barTipTimeout?: any
 }
 
 export interface GanttMethods<D = any> extends Omit<GridMethods<D>, 'dispatchEvent'> {
@@ -369,6 +413,10 @@ export interface GanttMethods<D = any> extends Omit<GridMethods<D>, 'dispatchEve
    * 隐藏任务视图
    */
   hideTaskView(): Promise<void>
+  /**
+   * 手动关闭任务条提示
+   */
+  closeTaskBarTooltip(): Promise<void>
 }
 export interface VxeGanttMethods<D = any> extends GanttMethods<D>, Omit<VxeGridMethods<D>, 'dispatchEvent'> { }
 
@@ -407,6 +455,14 @@ export interface GanttPrivateMethods extends GridPrivateMethods {
    * @private
    */
   handleTaskBarDblclickEvent(evnt: MouseEvent, params: VxeGanttDefines.TaskBarClickParams): void
+  /**
+   * @private
+   */
+  triggerTaskBarTooltipEvent(evnt: MouseEvent, params: VxeGanttDefines.TaskBarMouseoverParams): void
+  /**
+   * @private
+   */
+  handleTaskBarTooltipLeaveEvent(evnt: MouseEvent, params: VxeGanttDefines.TaskBarMouseoverParams): void
 }
 export interface VxeGanttPrivateMethods extends GanttPrivateMethods {}
 
@@ -415,10 +471,12 @@ export type VxeGanttEmits = [
 
   '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'
+  'task-view-cell-dblclick',
 ]
 
 export namespace VxeGanttDefines {
@@ -521,6 +579,13 @@ export namespace VxeGanttDefines {
   export interface TaskBarClickEventParams<D = any> extends TaskBarClickParams<D>, GanttEventParams {}
   export interface TaskBarDblClickEventParams<D = any> extends TaskBarClickEventParams<D> {}
 
+  export interface TaskBarMouseoverParams<D = any> extends GanttEventParams {
+    row: D
+    rowIndex: number
+    $rowIndex: number
+    _rowIndex: number
+  }
+
   export interface TaskHeaderContextmenuParams<D = any> {
     source: string
     type: string
@@ -601,6 +666,14 @@ export namespace VxeGanttSlotTypes {
     $rowIndex: number
   }
   export interface TaskViewHeaderCellStyleSlotParams extends TaskViewCellTitleSlotParams {}
+
+  export interface TaskBarTooltipSlotParams<D = any> {
+    row: D
+    rowIndex: number
+    $rowIndex: number
+    _rowIndex: number
+    tooltipContent: string
+  }
 }
 
 export interface VxeGanttSlots<D = any> extends VxeGridSlots<D> {
@@ -609,6 +682,11 @@ export interface VxeGanttSlots<D = any> extends VxeGridSlots<D> {
    */
   taskBar?(params: VxeGanttSlotTypes.TaskBarSlotParams<D>): any
   'task-bar'?(params: VxeGanttSlotTypes.TaskBarSlotParams<D>): any
+  /**
+   * 自定义任务条提示模板
+   */
+  taskBarTooltip?(params: VxeGanttSlotTypes.TaskBarTooltipSlotParams<D>): any
+  'task-bar-tooltip'?(params: VxeGanttSlotTypes.TaskBarTooltipSlotParams<D>): any
 }
 
 export * from './gantt-module'

package/types/components/grid.d.ts

@@ -904,6 +904,7 @@ export namespace VxeGridSlotTypes {
     field: string
     item: any
     data: any
+    tooltipContent: string
 
     /**
      * @deprecated

package/types/components/tooltip.d.ts

@@ -77,7 +77,13 @@ export interface TooltipReactData {
   target: HTMLElement | null
   isUpdate: boolean
   visible: boolean
-  tipContent: string | number | undefined,
+  tipPos: null | {
+    x: number
+    y: number
+    oLeft: number
+    oTop: number
+  }
+  tipContent: string | number | undefined
   tipActive: boolean
   tipTarget: HTMLElement | null
   tipZindex: number
@@ -96,8 +102,10 @@ export interface TooltipMethods {
   dispatchEvent(type: ValueOf<VxeTooltipEmits>, params: Record<string, any>, evnt: Event | null): void
   /**
    * 显示
-   * @param target 自定义目标元素
-   * @param content 自定义内容
+   */
+  openByEvent(evnt: Event, target?: any, content?: VxeTooltipPropTypes.Content): Promise<void>
+  /**
+   * 显示
    */
   open(target?: any, content?: VxeTooltipPropTypes.Content): Promise<void>
   /**