vxe-table 4.1.20 → 4.2.0-beta.2

package/packages/tooltip/src/tooltip.ts

@@ -14,12 +14,13 @@ export default defineComponent({
     size: { type: String as PropType<VxeTooltipPropTypes.Size>, default: () => GlobalConfig.tooltip.size || GlobalConfig.size },
     trigger: { type: String as PropType<VxeTooltipPropTypes.Trigger>, default: () => GlobalConfig.tooltip.trigger },
     theme: { type: String as PropType<VxeTooltipPropTypes.Theme>, default: () => GlobalConfig.tooltip.theme },
-    content: [String, Number] as PropType<VxeTooltipPropTypes.Content>,
+    content: { type: [String, Number] as PropType<VxeTooltipPropTypes.Content>, default: null },
+    useHTML: Boolean as PropType<VxeTooltipPropTypes.UseHTML>,
     zIndex: [String, Number] as PropType<VxeTooltipPropTypes.ZIndex>,
     isArrow: { type: Boolean as PropType<VxeTooltipPropTypes.IsArrow>, default: true },
     enterable: Boolean as PropType<VxeTooltipPropTypes.Enterable>,
-    leaveDelay: { type: Number as PropType<VxeTooltipPropTypes.LeaveDelay>, default: () => GlobalConfig.tooltip.leaveDelay },
-    leaveMethod: Function as PropType<VxeTooltipPropTypes.LeaveMethod>
+    enterDelay: { type: Number as PropType<VxeTooltipPropTypes.EnterDelay>, default: () => GlobalConfig.tooltip.enterDelay },
+    leaveDelay: { type: Number as PropType<VxeTooltipPropTypes.LeaveDelay>, default: () => GlobalConfig.tooltip.leaveDelay }
   },
   emits: [
     'update:modelValue'
@@ -34,9 +35,9 @@ export default defineComponent({
     const reactData = reactive<TooltipReactData>({
       target: null,
       isUpdate: false,
-      isHover: false,
       visible: false,
-      message: '',
+      tipContent: '',
+      tipActive: false,
       tipTarget: null,
       tipZindex: 0,
       tipStore: {
@@ -62,8 +63,6 @@ export default defineComponent({
 
     let tooltipMethods = {} as TooltipMethods
 
-    let targetActive: boolean
-
     const updateTipStyle = () => {
       const { tipTarget, tipStore } = reactData
       if (tipTarget) {
@@ -117,10 +116,10 @@ export default defineComponent({
 
     const targetMouseleaveEvent = () => {
       const { trigger, enterable, leaveDelay } = props
-      targetActive = false
+      reactData.tipActive = false
       if (enterable && trigger === 'hover') {
         setTimeout(() => {
-          if (!reactData.isHover) {
+          if (!reactData.tipActive) {
             tooltipMethods.close()
           }
         }, leaveDelay)
@@ -130,32 +129,54 @@ export default defineComponent({
     }
 
     const wrapperMouseenterEvent = () => {
-      reactData.isHover = true
+      reactData.tipActive = true
     }
 
-    const wrapperMouseleaveEvent = (evnt: MouseEvent) => {
-      const { leaveMethod, trigger, enterable, leaveDelay } = props
-      reactData.isHover = false
-      if (!leaveMethod || leaveMethod({ $event: evnt }) !== false) {
-        if (enterable && trigger === 'hover') {
-          setTimeout(() => {
-            if (!targetActive) {
-              tooltipMethods.close()
-            }
-          }, leaveDelay)
+    const wrapperMouseleaveEvent = () => {
+      const { trigger, enterable, leaveDelay } = props
+      reactData.tipActive = false
+      if (enterable && trigger === 'hover') {
+        setTimeout(() => {
+          if (!reactData.tipActive) {
+            tooltipMethods.close()
+          }
+        }, leaveDelay)
+      }
+    }
+
+    const showTip = () => {
+      const { tipStore } = reactData
+      const el = refElem.value
+      if (el) {
+        const parentNode = el.parentNode
+        if (!parentNode) {
+          document.body.appendChild(el)
         }
       }
+      updateValue(true)
+      updateZindex()
+      tipStore.placement = 'top'
+      tipStore.style = { width: 'auto', left: 0, top: 0, zIndex: props.zIndex || reactData.tipZindex }
+      tipStore.arrowStyle = { left: '50%' }
+      return tooltipMethods.updatePlacement()
     }
 
+    const showDelayTip = XEUtils.debounce(() => {
+      if (reactData.tipActive) {
+        showTip()
+      }
+    }, props.enterDelay, { leading: false, trailing: true })
+
     tooltipMethods = {
       dispatchEvent (type, params, evnt) {
         emit(type, Object.assign({ $tooltip: $xetooltip, $event: evnt }, params))
       },
-      open (target?: HTMLElement, message?: VxeTooltipPropTypes.Content) {
-        return tooltipMethods.toVisible(target || reactData.target as HTMLElement, message)
+      open (target?: HTMLElement, content?: VxeTooltipPropTypes.Content) {
+        return tooltipMethods.toVisible(target || reactData.target as HTMLElement, content)
       },
       close () {
         reactData.tipTarget = null
+        reactData.tipActive = false
         Object.assign(reactData.tipStore, {
           style: {},
           placement: '',
@@ -164,25 +185,19 @@ export default defineComponent({
         updateValue(false)
         return nextTick()
       },
-      toVisible (target: HTMLElement, message?: VxeTooltipPropTypes.Content) {
-        targetActive = true
+      toVisible (target: HTMLElement, content?: VxeTooltipPropTypes.Content) {
         if (target) {
-          const { tipStore } = reactData
-          const el = refElem.value
-          const parentNode = el.parentNode
-          if (!parentNode) {
-            document.body.appendChild(el)
+          const { trigger, enterDelay } = props
+          reactData.tipActive = true
+          reactData.tipTarget = target
+          if (content) {
+            reactData.tipContent = content
           }
-          if (message) {
-            reactData.message = message
+          if (enterDelay && trigger === 'hover') {
+            showDelayTip()
+          } else {
+            return showTip()
           }
-          reactData.tipTarget = target
-          updateValue(true)
-          updateZindex()
-          tipStore.placement = 'top'
-          tipStore.style = { width: 'auto', left: 0, top: 0, zIndex: props.zIndex || reactData.tipZindex }
-          tipStore.arrowStyle = { left: '50%' }
-          return tooltipMethods.updatePlacement()
         }
         return nextTick()
       },
@@ -195,13 +210,19 @@ export default defineComponent({
             return nextTick().then(updateTipStyle)
           }
         })
+      },
+      isActived () {
+        return reactData.tipActive
+      },
+      setActived (actived) {
+        reactData.tipActive = !!actived
       }
     }
 
     Object.assign($xetooltip, tooltipMethods)
 
     watch(() => props.content, () => {
-      reactData.message = props.content
+      reactData.tipContent = props.content
     })
 
     watch(() => props.modelValue, () => {
@@ -221,7 +242,7 @@ export default defineComponent({
         const wrapperElem = refElem.value
         const parentNode = wrapperElem.parentNode
         if (parentNode) {
-          reactData.message = content
+          reactData.tipContent = content
           reactData.tipZindex = nextZIndex()
           XEUtils.arrayEach(wrapperElem.children, (elem, index) => {
             if (index > 1) {
@@ -235,8 +256,8 @@ export default defineComponent({
           const { target } = reactData
           if (target) {
             if (trigger === 'hover') {
-              target.onmouseleave = targetMouseleaveEvent
               target.onmouseenter = targetMouseenterEvent
+              target.onmouseleave = targetMouseleaveEvent
             } else if (trigger === 'click') {
               target.onclick = clickEvent
             }
@@ -268,9 +289,31 @@ export default defineComponent({
       }
     })
 
+    const renderContent = () => {
+      const { useHTML } = props
+      const { tipContent } = reactData
+      if (slots.content) {
+        return h('div', {
+          key: 1,
+          class: 'vxe-table--tooltip-content'
+        }, slots.content({}))
+      }
+      if (useHTML) {
+        return h('div', {
+          key: 2,
+          class: 'vxe-table--tooltip-content',
+          innerHTML: tipContent
+        })
+      }
+      return h('div', {
+        key: 3,
+        class: 'vxe-table--tooltip-content'
+      }, formatText(tipContent))
+    }
+
     const renderVN = () => {
       const { theme, isArrow, enterable } = props
-      const { isHover, visible, tipStore, message } = reactData
+      const { tipActive, visible, tipStore } = reactData
       const vSize = computeSize.value
       let ons
       if (enterable) {
@@ -287,14 +330,12 @@ export default defineComponent({
           'is--enterable': enterable,
           'is--visible': visible,
           'is--arrow': isArrow,
-          'is--hover': isHover
+          'is--actived': tipActive
         }],
         style: tipStore.style,
         ...ons
       }, [
-        h('div', {
-          class: 'vxe-table--tooltip-content'
-        }, slots.content ? slots.content({}) : formatText(message)),
+        renderContent(),
         h('div', {
           class: 'vxe-table--tooltip-arrow',
           style: tipStore.arrowStyle

package/packages/v-x-e-table/index.ts

@@ -77,6 +77,7 @@ export const v = 'v4'
 
 export const VXETable = {
   v,
+  version: process.env.VUE_APP_VXE_TABLE_VERSION,
   setup,
   interceptor,
   renderer,

package/packages/v-x-e-table/src/conf.ts

@@ -28,6 +28,9 @@ const GlobalConfig: VXETableGlobalConfig = {
     // emptyRender: {
     //   name: ''
     // },
+    // rowConfig: {
+    //   keyField: '_X_ID' // 行数据的唯一主键字段名
+    // },
     radioConfig: {
       // trigger: 'default'
       strict: true
@@ -36,10 +39,9 @@ const GlobalConfig: VXETableGlobalConfig = {
       // trigger: 'default',
       strict: true
     },
-    // tooltipConfig: {
-    //   theme: 'dark',
-    //   enterable: false
-    // },
+    tooltipConfig: {
+      enterable: true
+    },
     validConfig: {
       showMessage: true,
       message: 'default'
@@ -51,7 +53,6 @@ const GlobalConfig: VXETableGlobalConfig = {
     //  storage: false,
     //  checkMethod () {}
     // },
-    // rowId: '_X_ID', // 行数据的唯一主键字段名
     sortConfig: {
       // remote: false,
       // trigger: 'default',
@@ -230,6 +231,7 @@ const GlobalConfig: VXETableGlobalConfig = {
     // size: null,
     trigger: 'hover',
     theme: 'dark',
+    enterDelay: 500,
     leaveDelay: 300
   },
   pager: {
@@ -243,12 +245,15 @@ const GlobalConfig: VXETableGlobalConfig = {
   },
   form: {
     // preventSubmit: false,
+    // size: null,
+    // colon: false,
     validConfig: {
       showMessage: true,
       autoPos: true
     },
-    // size: null,
-    // colon: false,
+    tooltipConfig: {
+      enterable: true
+    },
     titleAsterisk: true
   },
   input: {

package/packages/v-x-e-table/src/interceptor.ts

@@ -1,5 +1,5 @@
 import XEUtils from 'xe-utils'
-import { warnLog } from '../../tools/utils'
+import { warnLog } from '../../tools/log'
 
 import { VxeGlobalInterceptor, VxeGlobalInterceptorHandles } from '../../../types/v-x-e-table'
 

package/packages/v-x-e-table/src/renderer.ts

@@ -2,7 +2,8 @@ import { h, resolveComponent, ComponentOptions } from 'vue'
 import XEUtils from 'xe-utils'
 import GlobalConfig from './conf'
 import { getCellValue, setCellValue } from '../../table/src/util'
-import { warnLog, getFuncText, formatText, isEmptyValue } from '../../tools/utils'
+import { getFuncText, formatText, isEmptyValue } from '../../tools/utils'
+import { warnLog } from '../../tools/log'
 import { getOnName } from '../../tools/vn'
 
 import { VxeGlobalRendererHandles, VxeGlobalRenderer, VxeColumnPropTypes } from '../../../types/all'

package/packages/v-x-e-table/src/store.ts

@@ -1,4 +1,4 @@
-import { warnLog } from '../../tools/utils'
+import { warnLog } from '../../tools/log'
 import XEUtils from 'xe-utils'
 
 /**

package/styles/select.scss

@@ -104,7 +104,7 @@
 
 .vxe-select-option {
   padding: 0 10px;
-  max-width: 400px;
+  max-width: 600px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/styles/tooltip.scss

@@ -7,7 +7,7 @@
   top: -100%;
   left: -100%;
   font-size: 12px;
-  max-width: 500px;
+  max-width: 600px;
   border-radius: $vxe-border-radius;
   padding: 8px 12px;
   white-space: normal;

package/types/all.d.ts

@@ -1,11 +1,11 @@
 import { App } from 'vue'
 import { VXETableSetupOptions, VXETableCore } from './v-x-e-table'
 
-export function install(app: App, options?: VXETableSetupOptions): void;
+export function install(app: App, options?: VXETableSetupOptions): void
 
 declare global {
   interface Window {
-    VXETable: VXETableCore;
+    VXETable: VXETableCore
   }
 }
 

package/types/button.d.ts

@@ -5,117 +5,117 @@ import { VXEComponent, VxeComponentBase, VxeEvent, SizeType, ValueOf, VNodeStyle
  * 组件 - 按钮
  * @example import { Button as VxeButton } from 'vxe-table'
  */
-export const Button: VXEComponent<VxeButtonProps, VxeButtonEventProps>;
+export const Button: VXEComponent<VxeButtonProps, VxeButtonEventProps>
 
-export type VxeButtonInstance = ComponentPublicInstance<VxeButtonProps, VxeButtonConstructor>;
+export type VxeButtonInstance = ComponentPublicInstance<VxeButtonProps, VxeButtonConstructor>
 
 export interface VxeButtonConstructor extends VxeComponentBase, VxeButtonMethods {
-  props: VxeButtonProps;
-  context: SetupContext<VxeButtonEmits>;
-  reactData: ButtonReactData;
-  internalData: ButtonInternalData;
-  getRefMaps(): ButtonPrivateRef;
-  renderVN: RenderFunction;
+  props: VxeButtonProps
+  context: SetupContext<VxeButtonEmits>
+  reactData: ButtonReactData
+  internalData: ButtonInternalData
+  getRefMaps(): ButtonPrivateRef
+  renderVN: RenderFunction
 }
 
 export interface ButtonPrivateRef {
-  refElem: Ref<HTMLDivElement>;
+  refElem: Ref<HTMLDivElement>
 }
 export interface VxeButtonPrivateRef extends ButtonPrivateRef { }
 
 export interface ButtonReactData {
-  inited: boolean;
-  showPanel: boolean;
-  animatVisible: boolean;
-  panelIndex: number;
-  panelStyle: VNodeStyle;
-  panelPlacement: any;
+  inited: boolean
+  showPanel: boolean
+  animatVisible: boolean
+  panelIndex: number
+  panelStyle: VNodeStyle
+  panelPlacement: any
 }
 
 export interface ButtonInternalData {
-  showTime: any;
+  showTime: any
 }
 
 export namespace VxeButtonPropTypes {
-  export type Size = SizeType;
-  export type Type = string;
-  export type ClassName = string;
-  export type Name = string | number;
-  export type Content = string;
-  export type Placement = string;
-  export type Status = string;
-  export type Icon = string;
-  export type Round = boolean;
-  export type Circle = boolean;
-  export type Disabled = boolean;
-  export type Loading = boolean;
-  export type DestroyOnClose = boolean;
-  export type Transfer = boolean;
+  export type Size = SizeType
+  export type Type = string
+  export type ClassName = string
+  export type Name = string | number
+  export type Content = string
+  export type Placement = string
+  export type Status = string
+  export type Icon = string
+  export type Round = boolean
+  export type Circle = boolean
+  export type Disabled = boolean
+  export type Loading = boolean
+  export type DestroyOnClose = boolean
+  export type Transfer = boolean
 }
 
 export type VxeButtonProps = {
-  size?: VxeButtonPropTypes.Size;
+  size?: VxeButtonPropTypes.Size
   /**
    * 按钮类型
    */
-  type?: VxeButtonPropTypes.Type;
-  className?: VxeButtonPropTypes.ClassName;
+  type?: VxeButtonPropTypes.Type
+  className?: VxeButtonPropTypes.ClassName
   /**
    * 用来标识这一项
    */
-  name?: VxeButtonPropTypes.Name;
+  name?: VxeButtonPropTypes.Name
   /**
    * 按钮内容
    */
-  content?: VxeButtonPropTypes.Content;
+  content?: VxeButtonPropTypes.Content
   /**
    * 固定显示下拉面板的方向
    */
-  placement?: VxeButtonPropTypes.Placement;
+  placement?: VxeButtonPropTypes.Placement
   /**
    * 按钮状态
    */
-  status?: VxeButtonPropTypes.Status;
+  status?: VxeButtonPropTypes.Status
   /**
    * 按钮的图标
    */
-  icon?: VxeButtonPropTypes.Icon;
+  icon?: VxeButtonPropTypes.Icon
   /**
    * 圆角边框
    */
-  round?: VxeButtonPropTypes.Round;
+  round?: VxeButtonPropTypes.Round
   /**
    * 圆角按钮
    */
-  circle?: VxeButtonPropTypes.Circle;
+  circle?: VxeButtonPropTypes.Circle
   /**
    * 是否禁用
    */
-  disabled?: VxeButtonPropTypes.Disabled;
+  disabled?: VxeButtonPropTypes.Disabled
   /**
    * 是否加载中
    */
-  loading?: VxeButtonPropTypes.Loading;
+  loading?: VxeButtonPropTypes.Loading
   /**
    * 在下拉面板关闭时销毁内容
    */
-  destroyOnClose?: VxeButtonPropTypes.DestroyOnClose;
+  destroyOnClose?: VxeButtonPropTypes.DestroyOnClose
   /**
    * 是否将弹框容器插入于 body 内
    */
-  transfer?: VxeButtonPropTypes.Transfer;
+  transfer?: VxeButtonPropTypes.Transfer
 }
 
 export interface ButtonMethods {
-  dispatchEvent(type: ValueOf<VxeButtonEmits>, params: any, evnt: Event): void;
+  dispatchEvent(type: ValueOf<VxeButtonEmits>, params: any, evnt: Event): void
   /**
    * 获取焦点
    */
-  focus(): Promise<any>;
+  focus(): Promise<any>
   /**
    * 失去焦点
    */
-  blur(): Promise<any>;
+  blur(): Promise<any>
 }
 export interface VxeButtonMethods extends ButtonMethods { }
 
@@ -129,7 +129,7 @@ export type VxeButtonEmits = [
 
 export namespace VxeButtonDefines {
   interface ButtonEventParams extends VxeEvent {
-    $button: VxeButtonConstructor;
+    $button: VxeButtonConstructor
   }
 
   export interface ClickParams { }
@@ -140,16 +140,16 @@ export namespace VxeButtonDefines {
 }
 
 export type VxeButtonEventProps = {
-  onClick?: VxeButtonEvents.Click;
-  onDropdownClick?: VxeButtonEvents.DropdownClick;
+  onClick?: VxeButtonEvents.Click
+  onDropdownClick?: VxeButtonEvents.DropdownClick
 }
 
 export interface VxeButtonListeners {
-  click?: VxeButtonEvents.Click;
-  dropdownClick?: VxeButtonEvents.DropdownClick;
+  click?: VxeButtonEvents.Click
+  dropdownClick?: VxeButtonEvents.DropdownClick
 }
 
 export namespace VxeButtonEvents {
-  export type Click = (params: VxeButtonDefines.ClickEventParams) => void;
-  export type DropdownClick = (params: VxeButtonDefines.DropdownClickParams) => void;
+  export type Click = (params: VxeButtonDefines.ClickEventParams) => void
+  export type DropdownClick = (params: VxeButtonDefines.DropdownClickParams) => void
 }

package/types/checkbox-group.d.ts

@@ -6,45 +6,45 @@ import { VxeCheckboxEvents, VxeCheckboxPropTypes } from './checkbox'
  * 组件 - 复选框组
  * @example import { CheckboxGroup as VxeCheckboxGroup } from 'vxe-table'
  */
-export const CheckboxGroup: VXEComponent<VxeCheckboxGroupProps, VxeCheckboxGroupEventProps>;
+export const CheckboxGroup: VXEComponent<VxeCheckboxGroupProps, VxeCheckboxGroupEventProps>
 
-export type VxeCheckboxGroupInstance = ComponentPublicInstance<VxeCheckboxGroupProps, VxeCheckboxGroupConstructor>;
+export type VxeCheckboxGroupInstance = ComponentPublicInstance<VxeCheckboxGroupProps, VxeCheckboxGroupConstructor>
 
 export interface VxeCheckboxGroupConstructor extends VxeComponentBase, VxeCheckboxGroupMethods {
-  props: VxeCheckboxGroupProps;
-  context: SetupContext<VxeCheckboxGroupEmits>;
-  renderVN: RenderFunction;
+  props: VxeCheckboxGroupProps
+  context: SetupContext<VxeCheckboxGroupEmits>
+  renderVN: RenderFunction
 }
 
 export type VxeCheckboxGroupProps = {
-  size?: VxeCheckboxGroupPropTypes.Size;
+  size?: VxeCheckboxGroupPropTypes.Size
   /**
    * 绑定值
    */
-  modelValue?: VxeCheckboxGroupPropTypes.ModelValue;
+  modelValue?: VxeCheckboxGroupPropTypes.ModelValue
   /**
    * 是否禁用
    */
-  disabled?: VxeCheckboxGroupPropTypes.Disabled;
+  disabled?: VxeCheckboxGroupPropTypes.Disabled
 }
 
 export namespace VxeCheckboxGroupPropTypes {
-  export type Size = SizeType;
-  export type ModelValue = any[];
-  export type Disabled = boolean;
+  export type Size = SizeType
+  export type ModelValue = any[]
+  export type Disabled = boolean
 }
 
 export interface CheckboxGroupMethods {
-  dispatchEvent(type: ValueOf<VxeCheckboxGroupEmits>, params: any, evnt: Event): void;
+  dispatchEvent(type: ValueOf<VxeCheckboxGroupEmits>, params: any, evnt: Event): void
 }
 export interface VxeCheckboxGroupMethods extends CheckboxGroupMethods { }
 
 export interface CheckboxGroupPrivateMethods {
   handleChecked(params: {
-    checked: boolean;
-    value: VxeCheckboxPropTypes.ModelValue;
-    label: VxeCheckboxPropTypes.Label;
-  }, evnt: Event): void;
+    checked: boolean
+    value: VxeCheckboxPropTypes.ModelValue
+    label: VxeCheckboxPropTypes.Label
+  }, evnt: Event): void
 }
 export interface VxeCheckboxGroupPrivateMethods extends CheckboxGroupPrivateMethods { }
 
@@ -55,23 +55,23 @@ export type VxeCheckboxGroupEmits = [
 
 export namespace VxeCheckboxGroupDefines {
   interface CheckboxGroupEventParams extends VxeEvent {
-    $checkboxGroup: VxeCheckboxGroupConstructor;
+    $checkboxGroup: VxeCheckboxGroupConstructor
   }
 
   export type ChangeParams = {
-    checklist: any[];
+    checklist: any[]
   }
   export interface ChangeEventParams extends CheckboxGroupEventParams, ChangeParams { }
 }
 
 export type VxeCheckboxGroupEventProps = {
-  onChange?: VxeCheckboxGroupEvents.Change;
+  onChange?: VxeCheckboxGroupEvents.Change
 }
 
 export interface VxeCheckboxGroupListeners {
-  change?: VxeCheckboxGroupEvents.Change;
+  change?: VxeCheckboxGroupEvents.Change
 }
 
 export namespace VxeCheckboxGroupEvents {
-  export type Change = (params: VxeCheckboxGroupDefines.ChangeEventParams) => void;
+  export type Change = (params: VxeCheckboxGroupDefines.ChangeEventParams) => void
 }