vxe-table 3.4.14-beta.3 → 3.5.0-beta.1

package/packages/tooltip/src/tooltip.js

@@ -1,7 +1,8 @@
 import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import vSize from '../../mixins/size'
-import { UtilTools, DomTools } from '../../tools'
+import UtilTools from '../../tools/utils'
+import DomTools from '../../tools/dom'
 
 function updateTipStyle (_vm) {
   const { $el: wrapperElem, tipTarget, tipStore } = _vm
@@ -26,6 +27,43 @@ function updateTipStyle (_vm) {
   }
 }
 
+function showTip (_vm) {
+  const { $el, tipStore, zIndex } = _vm
+  const parentNode = $el.parentNode
+  if (!parentNode) {
+    document.body.appendChild($el)
+  }
+  _vm.updateValue(true)
+  _vm.updateZindex()
+  tipStore.placement = 'top'
+  tipStore.style = { width: 'auto', left: 0, top: 0, zIndex: zIndex || _vm.tipZindex }
+  tipStore.arrowStyle = { left: '50%' }
+  return _vm.updatePlacement()
+}
+
+function renderContent (h, _vm) {
+  const { $scopedSlots, useHTML, tipContent } = _vm
+  if ($scopedSlots.content) {
+    return h('div', {
+      key: 1,
+      class: 'vxe-table--tooltip-content'
+    }, $scopedSlots.content.call(this, {}))
+  }
+  if (useHTML) {
+    return h('div', {
+      key: 2,
+      class: 'vxe-table--tooltip-content',
+      domProps: {
+        innerHTML: tipContent
+      }
+    })
+  }
+  return h('div', {
+    key: 3,
+    class: 'vxe-table--tooltip-content'
+  }, UtilTools.formatText(tipContent))
+}
+
 export default {
   name: 'VxeTooltip',
   mixins: [vSize],
@@ -34,19 +72,20 @@ export default {
     size: { type: String, default: () => GlobalConfig.tooltip.size || GlobalConfig.size },
     trigger: { type: String, default: () => GlobalConfig.tooltip.trigger },
     theme: { type: String, default: () => GlobalConfig.tooltip.theme },
-    content: [String, Number],
+    content: { type: [String, Number], default: null },
+    useHTML: Boolean,
     zIndex: [String, Number],
     isArrow: { type: Boolean, default: true },
     enterable: Boolean,
-    leaveDelay: { type: Number, default: () => GlobalConfig.tooltip.leaveDelay },
-    leaveMethod: Function
+    enterDelay: { type: Number, default: () => GlobalConfig.tooltip.enterDelay },
+    leaveDelay: { type: Number, default: () => GlobalConfig.tooltip.leaveDelay }
   },
   data () {
     return {
       isUpdate: false,
-      isHover: false,
       visible: false,
-      message: '',
+      tipContent: '',
+      tipActive: false,
       tipTarget: null,
       tipZindex: 0,
       tipStore: {
@@ -58,7 +97,7 @@ export default {
   },
   watch: {
     content (value) {
-      this.message = value
+      this.tipContent = value
     },
     value (value) {
       if (!this.isUpdate) {
@@ -67,11 +106,18 @@ export default {
       this.isUpdate = false
     }
   },
+  created () {
+    this.showDelayTip = XEUtils.debounce(() => {
+      if (this.tipActive) {
+        showTip(this)
+      }
+    }, this.enterDelay, { leading: false, trailing: true })
+  },
   mounted () {
     const { $el, trigger, content, value } = this
     const parentNode = $el.parentNode
     let target
-    this.message = content
+    this.tipContent = content
     this.tipZindex = UtilTools.nextZIndex()
     XEUtils.arrayEach($el.children, (elem, index) => {
       if (index > 1) {
@@ -111,7 +157,7 @@ export default {
     }
   },
   render (h) {
-    const { $scopedSlots, vSize, theme, message, isHover, isArrow, visible, tipStore, enterable } = this
+    const { $scopedSlots, vSize, theme, tipActive, isArrow, visible, tipStore, enterable } = this
     let on
     if (enterable) {
       on = {
@@ -126,15 +172,13 @@ export default {
         'is--enterable': enterable,
         'is--visible': visible,
         'is--arrow': isArrow,
-        'is--hover': isHover
+        'is--actived': tipActive
       }],
       style: tipStore.style,
       ref: 'tipWrapper',
       on
     }, [
-      h('div', {
-        class: 'vxe-table--tooltip-content'
-      }, $scopedSlots.content ? $scopedSlots.content.call(this, {}) : message),
+      renderContent(h, this),
       h('div', {
         class: 'vxe-table--tooltip-arrow',
         style: tipStore.arrowStyle
@@ -142,20 +186,21 @@ export default {
     ].concat($scopedSlots.default ? $scopedSlots.default.call(this, {}) : []))
   },
   methods: {
-    open (target, message) {
-      return this.toVisible(target || this.target, message)
+    open (target, content) {
+      return this.toVisible(target || this.target, content)
     },
     close () {
       this.tipTarget = null
+      this.tipActive = false
       Object.assign(this.tipStore, {
         style: {},
         placement: '',
         arrowStyle: null
       })
-      this.update(false)
+      this.updateValue(false)
       return this.$nextTick()
     },
-    update (value) {
+    updateValue (value) {
       if (value !== this.visible) {
         this.visible = value
         this.isUpdate = true
@@ -169,24 +214,19 @@ export default {
         this.tipZindex = UtilTools.nextZIndex()
       }
     },
-    toVisible (target, message) {
-      this.targetActive = true
+    toVisible (target, content) {
       if (target) {
-        const { $el, tipStore, zIndex } = this
-        const parentNode = $el.parentNode
-        if (!parentNode) {
-          document.body.appendChild($el)
+        const { trigger, enterDelay } = this
+        this.tipActive = true
+        this.tipTarget = target
+        if (content) {
+          this.tipContent = content
         }
-        if (message) {
-          this.message = message
+        if (enterDelay && trigger === 'hover') {
+          this.showDelayTip()
+        } else {
+          return showTip(this)
         }
-        this.tipTarget = target
-        this.update(true)
-        this.updateZindex()
-        tipStore.placement = 'top'
-        tipStore.style = { width: 'auto', left: 0, top: 0, zIndex: zIndex || this.tipZindex }
-        tipStore.arrowStyle = { left: '50%' }
-        return this.updatePlacement()
       }
       return this.$nextTick()
     },
@@ -199,6 +239,12 @@ export default {
         }
       })
     },
+    isActived () {
+      return this.tipActive
+    },
+    setActived (actived) {
+      this.tipActive = !!actived
+    },
     clickEvent () {
       this[this.visible ? 'close' : 'open']()
     },
@@ -207,10 +253,10 @@ export default {
     },
     targetMouseleaveEvent () {
       const { trigger, enterable, leaveDelay } = this
-      this.targetActive = false
+      this.tipActive = false
       if (enterable && trigger === 'hover') {
         setTimeout(() => {
-          if (!this.isHover) {
+          if (!this.tipActive) {
             this.close()
           }
         }, leaveDelay)
@@ -219,19 +265,17 @@ export default {
       }
     },
     wrapperMouseenterEvent () {
-      this.isHover = true
+      this.tipActive = true
     },
-    wrapperMouseleaveEvent (evnt) {
-      const { leaveMethod, trigger, enterable, leaveDelay } = this
-      this.isHover = false
-      if (!leaveMethod || leaveMethod({ $event: evnt }) !== false) {
-        if (enterable && trigger === 'hover') {
-          setTimeout(() => {
-            if (!this.targetActive) {
-              this.close()
-            }
-          }, leaveDelay)
-        }
+    wrapperMouseleaveEvent () {
+      const { trigger, enterable, leaveDelay } = this
+      this.tipActive = false
+      if (enterable && trigger === 'hover') {
+        setTimeout(() => {
+          if (!this.tipActive) {
+            this.close()
+          }
+        }, leaveDelay)
       }
     }
   }

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

@@ -6,7 +6,8 @@ import { commands } from './src/commands'
 import { menus } from './src/menus'
 import { formats } from './src/formats'
 import { setup } from './src/setup'
-import { UtilTools } from '../tools'
+import { UtilTools } from '../tools/utils'
+import { errLog } from '../tools/log'
 
 const installedPlugins = []
 
@@ -29,7 +30,7 @@ function reg (key) {
   // 检测安装顺序是否正确
   if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
     if (VXETable.Table) {
-      UtilTools.error('vxe.error.useErr', [key])
+      errLog('vxe.error.useErr', [key])
     }
   }
   VXETable[`_${key}`] = 1
@@ -88,6 +89,7 @@ export const v = 'v3'
 
 export const VXETable = {
   v,
+  version: process.env.VUE_APP_VXE_TABLE_VERSION,
   reg,
   use,
   setup,

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

@@ -26,6 +26,9 @@ export default {
     // emptyRender: {
     //   name: ''
     // },
+    // rowConfig: {
+    //   keyField: '_X_ID' // 行数据的唯一主键字段名
+    // },
     radioConfig: {
       // trigger: 'default'
       strict: true
@@ -34,10 +37,9 @@ export default {
       // trigger: 'default',
       strict: true
     },
-    // tooltipConfig: {
-    //   theme: 'dark',
-    //   enterable: false
-    // },
+    tooltipConfig: {
+      enterable: true
+    },
     validConfig: {
       showMessage: true,
       message: 'default'
@@ -49,7 +51,6 @@ export default {
     //  storage: false,
     //  checkMethod () {}
     // },
-    // rowId: '_X_ID', // 行数据的唯一主键字段名
     sortConfig: {
       // remote: false,
       // trigger: 'default',
@@ -228,6 +229,7 @@ export default {
     // size: null,
     trigger: 'hover',
     theme: 'dark',
+    enterDelay: 500,
     leaveDelay: 300
   },
   pager: {
@@ -241,12 +243,15 @@ export default {
   },
   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.js

@@ -1,5 +1,5 @@
-import { UtilTools } from '../../tools'
 import XEUtils from 'xe-utils'
+import { warnLog } from '../../tools/log'
 
 function toType (type) {
   return XEUtils.toValueString(type).replace('_', '').toLowerCase()
@@ -22,7 +22,7 @@ export const interceptor = {
     // 检测类型
     if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
       if (eventTypes.indexOf(type) === -1) {
-        UtilTools.warn('vxe.error.errProp', [`Interceptor.${type}`, eventTypes.join('|')])
+        warnLog('vxe.error.errProp', [`Interceptor.${type}`, eventTypes.join('|')])
       }
     }
 
@@ -35,7 +35,7 @@ export const interceptor = {
       // 检测重复
       if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
         if (eList.indexOf(callback) > -1) {
-          UtilTools.warn('vxe.error.coverProp', ['Interceptor', type])
+          warnLog('vxe.error.coverProp', ['Interceptor', type])
         }
       }
 

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

@@ -1,6 +1,7 @@
 import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
-import { UtilTools } from '../../tools'
+import UtilTools, { getFuncText } from '../../tools/utils'
+import { warnLog } from '../../tools/log'
 
 const defaultCompProps = { transfer: true }
 
@@ -92,7 +93,7 @@ function getCellLabelVNs (h, renderOpts, params, cellLabel) {
     }, placeholder && isEmptyValue(cellLabel) ? [
       h('span', {
         class: 'vxe-cell--placeholder'
-      }, UtilTools.formatText(UtilTools.getFuncText(placeholder), 1))
+      }, UtilTools.formatText(getFuncText(placeholder), 1))
     ] : UtilTools.formatText(cellLabel, 1))
   ]
 }
@@ -672,7 +673,7 @@ export const renderer = {
         if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
           XEUtils.each(options, (val, key) => {
             if (!XEUtils.eqNull(renders[key]) && renders[key] !== val) {
-              UtilTools.warn('vxe.error.coverProp', [`Renderer.${name}`, key])
+              warnLog('vxe.error.coverProp', [`Renderer.${name}`, key])
             }
           })
         }

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

@@ -1,5 +1,5 @@
-import { UtilTools } from '../../tools'
 import XEUtils from 'xe-utils'
+import { warnLog } from '../../tools/log'
 
 /**
  * 创建数据仓库
@@ -22,7 +22,7 @@ class Store {
     // 检测是否覆盖
     if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
       if (!XEUtils.eqNull(this.store[name]) && this.store[name] !== render) {
-        UtilTools.warn('vxe.error.coverProp', [this._name, name])
+        warnLog('vxe.error.coverProp', [this._name, name])
       }
     }
     this.store[name] = render

package/packages/validator/src/mixin.js

@@ -1,7 +1,7 @@
 import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
-import { UtilTools, DomTools } from '../../tools'
-import { eqEmptyValue } from '../../tools/src/utils'
+import { eqEmptyValue, getFuncText } from '../../tools/utils'
+import DomTools from '../../tools/dom'
 
 /**
  * 校验规则
@@ -26,7 +26,7 @@ class Rule {
    * 支持国际化翻译
    */
   get content () {
-    return UtilTools.getFuncText(this.$options.content || this.$options.message)
+    return getFuncText(this.$options.content || this.$options.message)
   }
 
   get message () {

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/v-x-e-table/index.d.ts

@@ -38,7 +38,15 @@ export type VXETableVersion = 'v1' | 'v2' | 'v3' | 'v4'
 export const v: VXETableVersion
 
 export interface VXETableCore {
+  /**
+   * 已被 version 替换
+   * @deprecated
+   */
   v: VXETableVersion;
+  /**
+   * 版本号
+   */
+  version: string;
   /**
    * 设置全局参数/获取所有参数
    */

package/README.en.md

@@ -1,170 +0,0 @@
-# vxe-table
-
-[简体中文](README.md) | [繁體中文](README.zh-TW.md) | English  
-
-[![star](https://gitee.com/xuliangzhan_admin/vxe-table/badge/star.svg?theme=gvp)](https://gitee.com/xuliangzhan_admin/vxe-table/stargazers)
-[![npm version](https://img.shields.io/npm/v/vxe-table.svg?style=flat-square)](https://www.npmjs.com/package/vxe-table)
-[![npm build](https://travis-ci.com/x-extends/vxe-table.svg?branch=master)](https://travis-ci.com/x-extends/vxe-table)
-[![npm downloads](https://img.shields.io/npm/dt/vxe-table.svg?style=flat-square)](https://npm-stat.com/charts.html?package=vxe-table)
-[![issues](https://img.shields.io/github/issues/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/issues)
-[![issues closed](https://img.shields.io/github/issues-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/issues?q=is%3Aissue+is%3Aclosed)
-[![pull requests](https://img.shields.io/github/issues-pr/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls)
-[![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed)
-[![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
-
-A [vue](https://www.npmjs.com/package/vue) based PC form component, support add, delete, change, virtual list, virtual tree, lazy load, shortcut menu, data validation, print export, form rendering, data paging, modal window, custom template, renderer, flexible configuration items, extension interface, etc...
-
-* Design concept
-  * Efficient and concise API design for modern browsers
-  * Modular tables, on-demand loading, extended interfaces
-  * Designed for single row table editing, supports addition, deletion, modification and query as well as more expansion, with powerful functions and performance at the same time
-
-## Browser Support
-
-![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
---- | --- | --- | --- | --- | --- |
-11+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 8+ ✔ |
-
-## Features
-
-* [x] Basic table
-* [x] Grid
-* [x] Striped
-* [x] Table with border
-* [x] Cell style
-* [x] Column resizing
-* [x] Maximum table height
-* [x] Resize height & width
-* [x] Fixed column
-* [x] Grouping table header
-* [x] Table footer
-* [x] Highlight row & column
-* [x] Table sequence
-* [x] Radio
-* [x] Checkbox
-* [x] Select
-* [x] Switch
-* [x] Sorting
-* [x] Multi field sorting
-* [x] Filter
-* [x] Merged cells
-* [x] Merged footer items
-* [x] Import/Export/Print
-* [x] Show/Hide column
-* [x] Loading
-* [x] Formatted cell
-* [x] Slot - template
-* [x] Context menu
-* [x] Detail - Expandable row
-* [x] Pager
-* [x] Form
-* [x] Toolbar
-* [x] Pulldown
-* [x] Virtual list
-* [x] Virtual tree
-* [x] Editable CRUD
-* [x] Validate
-* [x] Data Proxy
-* [x] Keyboard navigation
-* [x] Modal
-* [x] Renderer
-* [x] Virtual scroller
-* [x] Virtual merger
-* [x] (pro) Cell area selection
-* [x] (pro) Cell copy & paste
-* [x] (pro) Cell find and replace
-
-## Installing
-
-Version：[vue](https://www.npmjs.com/package/vue) 2.6.x, Dependent: [xe-utils](https://www.npmjs.com/package/xe-utils)
-
-```shell
-npm install xe-utils vxe-table@3
-```
-
-Get on [unpkg](https://unpkg.com/vxe-table/) and [cdnjs](https://cdn.jsdelivr.net/npm/vxe-table/)
-
-### npm
-
-```javascript
-import Vue from 'vue'
-import 'xe-utils'
-import VXETable from 'vxe-table'
-import 'vxe-table/lib/style.css'
-
-Vue.use(VXETable)
-```
-
-### CDN
-
-It is not recommended to use the public CDN address for production, because the connection may fail at any time, causing the project to hang up;  
-Remember to lock the version number by using CDN to avoid being affected by incompatible updates.
-
-```HTML
-<!-- Style -->
-<link rel="stylesheet" href="https://unpkg.com/vxe-table/lib/style.css">
-<!-- Script -->
-<script src="https://unpkg.com/xe-utils"></script>
-<script src="https://unpkg.com/vxe-table"></script>
-```
-
-## Example
-
-```html
-<template>
-  <div>
-    <vxe-table :data="tableData">
-      <vxe-column type="seq" title="Seq" width="60"></vxe-column>
-      <vxe-column field="name" title="Name"></vxe-column>
-      <vxe-colgroup title="Group1">
-        <vxe-column field="sex" title="Sex"></vxe-column>
-        <vxe-column field="address" title="Address"></vxe-column>
-      </vxe-colgroup>
-    </vxe-table>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      tableData: [
-        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
-        { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
-        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
-      ]
-    }
-  }
-}
-</script>
-```
-
-## Docs
-
-💡 [User guide](https://github.com/xuliangzhan/vxe-table-demo)  
-👉 [View example](https://x-extends.github.io/vxe-table/#/table/base/basic)  
-👉 [View API](https://x-extends.github.io/vxe-table/#/table/api)
-
-## Run the project
-
-Install dependencies
-
-```shell
-npm install
-```
-
-Start local debugging
-
-```shell
-npm run serve
-```
-
-Compile packaging, generated compiled directory: lib
-
-```shell
-npm run lib
-```
-
-## License
-
-[MIT](LICENSE) © 2019-present, Xu Liangzhan