vxe-table 4.13.21 → 4.13.23

package/packages/locale/lang/es-ES.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} años'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'Enero',

package/packages/locale/lang/fr-FR.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} ans'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'Janvier',

package/packages/locale/lang/hu-HU.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} Évek'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'január',

package/packages/locale/lang/hy-AM.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} 年'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: '01 月',

package/packages/locale/lang/id-ID.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} tahun'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'Januari',

package/packages/locale/lang/it-IT.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} anni'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'Gennaio',

package/packages/locale/lang/ja-JP.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} 年'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: '1月',

package/packages/locale/lang/ko-KR.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} 년'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: '1월',

package/packages/locale/lang/ms-MY.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} tahun'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: '01 bulan',

package/packages/locale/lang/nb-NO.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} år'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'januar',

package/packages/locale/lang/pt-BR.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} anos'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'Janeiro',

package/packages/locale/lang/ru-RU.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} Годы'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'Январь',

package/packages/locale/lang/th-TH.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} ปี'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'มกราคม',

package/packages/locale/lang/ug-CN.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} يىل'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: '01 ئاي',

package/packages/locale/lang/uk-UA.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} років'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'Січень',

package/packages/locale/lang/uz-UZ.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} yillar'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: '01 oy',

package/packages/locale/lang/vi-VN.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} năm'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: 'Tháng Một',

package/packages/locale/lang/zh-CHT.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} 年'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: '01 月',

package/packages/locale/lang/zh-CN.ts

@@ -245,6 +245,9 @@ export default {
     datePicker: {
       yearTitle: '{0} 年'
     },
+    dateRangePicker: {
+      pleaseRange: '请选择开始日期与结束日期'
+    },
     input: {
       date: {
         m1: '01 月',

package/packages/table/render/index.ts

@@ -176,7 +176,7 @@ function getComponentOns (renderOpts: any, params: any, eFns?: {
   model: (cellValue: any) => void
   change?: (...args: any[]) => void
   blur?: (...args: any[]) => void
-}) {
+}, eventOns?: Record<string, any>) {
   const { events } = renderOpts
   const modelEvent = getModelEvent(renderOpts)
   const changeEvent = getChangeEvent(renderOpts)
@@ -214,7 +214,7 @@ function getComponentOns (renderOpts: any, params: any, eFns?: {
       }
     }
   }
-  return ons
+  return eventOns ? Object.assign(ons, eventOns) : ons
 }
 
 function getEditOns (renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderTableEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
@@ -822,6 +822,76 @@ renderer.mixin({
     renderTableFilter: defaultFilterRender,
     tableFilterDefaultMethod: handleFilterMethod
   },
+  VxeDateRangePicker: {
+    tableAutoFocus: 'input',
+    renderTableEdit (renderOpts, params: VxeGlobalRendererHandles.RenderTableEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
+      const { startField, endField } = renderOpts
+      const { $table, row, column } = params
+      const { model } = column
+      const cellValue = getCellValue(row, column)
+      const seProps: Record<string, any> = {}
+      const seOs: Record<string, any> = {}
+      if (startField && endField) {
+        seProps.startValue = XEUtils.get(row, startField)
+        seProps.endValue = XEUtils.get(row, endField)
+        seOs['onUpdate:startValue'] = (value: any) => {
+          if (startField) {
+            XEUtils.set(row, startField, value)
+          }
+        }
+        seOs['onUpdate:endValue'] = (value: any) => {
+          if (endField) {
+            XEUtils.set(row, endField, value)
+          }
+        }
+      }
+      return [
+        h(getDefaultComponent(renderOpts), {
+          ...getCellEditProps(renderOpts, params, cellValue, seProps),
+          ...getComponentOns(renderOpts, params, {
+            model (cellValue) {
+              model.update = true
+              model.value = cellValue
+              setCellValue(row, column, cellValue)
+            },
+            change () {
+              $table.updateStatus(params)
+            },
+            blur () {
+              $table.handleCellRuleUpdateStatus('blur', params)
+            }
+          }, seOs)
+        })
+      ]
+    },
+    renderTableCell (renderOpts, params) {
+      const { startField, endField } = renderOpts
+      const { row, column } = params
+      let startValue = ''
+      let endValue = ''
+      if (startField && endField) {
+        startValue = XEUtils.get(row, startField)
+        endValue = XEUtils.get(row, endField)
+      } else {
+        const cellValue = XEUtils.get(row, column.field)
+        if (cellValue) {
+          if (XEUtils.isArray(cellValue)) {
+            startValue = cellValue[0]
+            endValue = cellValue[1]
+          } else {
+            const strs = `${cellValue}`.split(',')
+            startValue = strs[0]
+            endValue = strs[1]
+          }
+        }
+      }
+      let cellLabel = ''
+      if (startValue && endValue) {
+        cellLabel = `${startValue} ~ ${endValue}`
+      }
+      return getCellLabelVNs(renderOpts, params, cellLabel)
+    }
+  },
   VxeTextarea: {
     tableAutoFocus: 'textarea',
     renderTableEdit: defaultEditRender,

package/packages/table/src/cell.ts

@@ -14,15 +14,19 @@ function renderTitlePrefixIcon (params: VxeTableDefines.CellRenderHeaderParams &
   const { $table, column } = params
   const titlePrefix = column.titlePrefix || column.titleHelp
   if (titlePrefix) {
-    return h('i', {
-      class: ['vxe-cell-title-prefix-icon', titlePrefix.iconStatus ? `theme--${titlePrefix.iconStatus}` : '', titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX],
+    return h('span', {
+      class: ['vxe-cell-title-prefix-icon', titlePrefix.iconStatus ? `theme--${titlePrefix.iconStatus}` : ''],
       onMouseenter (evnt: MouseEvent) {
         $table.triggerHeaderTitleEvent(evnt, titlePrefix, params)
       },
       onMouseleave (evnt: MouseEvent) {
         $table.handleTargetLeaveEvent(evnt)
       }
-    })
+    }, [
+      h('i', {
+        class: titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX
+      })
+    ])
   }
   return renderEmptyElement($table)
 }
@@ -31,15 +35,19 @@ function renderTitleSuffixIcon (params: VxeTableDefines.CellRenderHeaderParams &
   const { $table, column } = params
   const titleSuffix = column.titleSuffix
   if (titleSuffix) {
-    return h('i', {
-      class: ['vxe-cell-title-suffix-icon', titleSuffix.iconStatus ? `theme--${titleSuffix.iconStatus}` : '', titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX],
+    return h('span', {
+      class: ['vxe-cell-title-suffix-icon', titleSuffix.iconStatus ? `theme--${titleSuffix.iconStatus}` : ''],
       onMouseenter (evnt: MouseEvent) {
         $table.triggerHeaderTitleEvent(evnt, titleSuffix, params)
       },
       onMouseleave (evnt: MouseEvent) {
         $table.handleTargetLeaveEvent(evnt)
       }
-    })
+    }, [
+      h('i', {
+        class: titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX
+      })
+    ])
   }
   return renderEmptyElement($table)
 }
@@ -1090,14 +1098,20 @@ export const Cell = {
     if (isEnableConf(editConfig)) {
       editIconVNs = [
         isRequired && editOpts.showAsterisk
-          ? h('i', {
+          ? h('span', {
             class: 'vxe-cell--required-icon'
-          })
+          }, [
+            h('i')
+          ])
           : renderEmptyElement($table),
         isEnableConf(editRender) && editOpts.showIcon
-          ? h('i', {
-            class: ['vxe-cell--edit-icon', editOpts.icon || getIcon().TABLE_EDIT]
-          })
+          ? h('span', {
+            class: 'vxe-cell--edit-icon'
+          }, [
+            h('i', {
+              class: editOpts.icon || getIcon().TABLE_EDIT
+            })
+          ])
           : renderEmptyElement($table)
       ]
     }

package/packages/table/src/util.ts

@@ -1,7 +1,7 @@
 import { watch, reactive, nextTick } from 'vue'
 import XEUtils from 'xe-utils'
 import { ColumnInfo } from './columnInfo'
-import { isPx, isScale } from '../../ui/src/dom'
+import { isPx, isScale, queryElement } from '../../ui/src/dom'
 import { eqEmptyValue } from '../../ui/src/utils'
 
 import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines } from '../../../types'
@@ -191,7 +191,7 @@ function getPaddingLeftRightSize (elem: HTMLElement | null) {
   return 0
 }
 
-function getElementMarginWidth (elem: HTMLElement | null) {
+function getElementMarginAndWidth (elem: HTMLElement | null) {
   if (elem) {
     const computedStyle = getComputedStyle(elem)
     const marginLeft = XEUtils.toNumber(computedStyle.marginLeft)
@@ -201,10 +201,6 @@ function getElementMarginWidth (elem: HTMLElement | null) {
   return 0
 }
 
-function queryCellElement (cell: HTMLTableCellElement, selector: string) {
-  return cell.querySelector('.vxe-cell' + selector) as HTMLElement | null
-}
-
 export function toFilters (filters: any) {
   if (filters && XEUtils.isArray(filters)) {
     return filters.map(({ label, value, data, resetValue, checked }) => {
@@ -304,19 +300,19 @@ export function getColReMinWidth (params: {
   const showTitle = headOverflow === 'title'
   const showTooltip = headOverflow === true || headOverflow === 'tooltip'
   const hasEllipsis = showTitle || showTooltip || showEllipsis
-  const minTitleWidth = XEUtils.floor((XEUtils.toNumber(getComputedStyle(cell).fontSize) || 14) * 1.6)
-  const paddingLeftRight = getPaddingLeftRightSize(cell) + getPaddingLeftRightSize(queryCellElement(cell, ''))
+  const minTitleWidth = XEUtils.floor((XEUtils.toNumber(getComputedStyle(cell).fontSize) || 14) * 1.8)
+  const paddingLeftRight = getPaddingLeftRightSize(cell) + getPaddingLeftRightSize(queryElement(cell, '.vxe-cell'))
   let mWidth = minTitleWidth + paddingLeftRight
   // 默认最小宽处理
   if (hasEllipsis) {
-    const dragIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '>.vxe-cell--drag-handle'))
-    const checkboxIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '>.vxe-cell--checkbox'))
-    const requiredIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--required-icon'))
-    const editIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--edit-icon'))
-    const prefixIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell-title-prefix-icon'))
-    const suffixIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell-title-suffix-icon'))
-    const sortIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--sort'))
-    const filterIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--filter'))
+    const dragIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--drag-handle'))
+    const checkboxIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--checkbox'))
+    const requiredIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--required-icon'))
+    const editIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--edit-icon'))
+    const prefixIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell-title-prefix-icon'))
+    const suffixIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell-title-suffix-icon'))
+    const sortIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--sort'))
+    const filterIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--filter'))
     mWidth += dragIconWidth + checkboxIconWidth + requiredIconWidth + editIconWidth + prefixIconWidth + suffixIconWidth + filterIconWidth + sortIconWidth
   }
   // 如果设置最小宽

package/packages/toolbar/src/toolbar.ts

@@ -227,7 +227,7 @@ export default defineComponent({
           $xeGrid.triggerToolbarTolEvent(item, evnt)
         } else {
           const gCommandOpts = commands.get(code)
-          const params = { code, tool: item, $table: $table!, $grid: $xeGrid, $event: evnt }
+          const params = { code, button: null, tool: item, $table: $table!, $grid: $xeGrid, $event: evnt }
           if (gCommandOpts) {
             const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod
             if (tCommandMethod) {

package/packages/ui/src/dom.ts

@@ -82,6 +82,13 @@ export function toCssUnit (val?: number | string, unit = 'px') {
   return `${val || ''}`
 }
 
+export function queryElement (elem: HTMLTableCellElement, selector: string) {
+  if (elem) {
+    return elem.querySelector<HTMLElement>(selector)
+  }
+  return null
+}
+
 export function getDomNode () {
   const documentElement = document.documentElement
   const bodyElem = document.body

package/styles/components/table.scss

@@ -138,6 +138,7 @@ $btnThemeList: (
         .vxe-select,
         .vxe-tree-select,
         .vxe-date-picker,
+        .vxe-date-range-picker,
         .vxe-number-input,
         .vxe-ico-picker {
           width: 100%;
@@ -160,6 +161,7 @@ $btnThemeList: (
         & > .vxe-select,
         & > .vxe-tree-select,
         & > .vxe-date-picker,
+        & > .vxe-date-range-picker,
         & > .vxe-number-input,
         & > .vxe-ico-picker {
           width: 100%;
@@ -174,6 +176,7 @@ $btnThemeList: (
           .vxe-select,
           .vxe-tree-select,
           .vxe-date-picker,
+          .vxe-date-range-picker,
           .vxe-number-input,
           .vxe-ico-picker {
             width: 100%;
@@ -194,6 +197,7 @@ $btnThemeList: (
   & > .vxe-select,
   & > .vxe-tree-select,
   & > .vxe-date-picker,
+  & > .vxe-date-range-picker,
   & > .vxe-number-input,
   & > .vxe-ico-picker {
     width: 100%;
@@ -772,19 +776,25 @@ $btnThemeList: (
   // user-select: none;
   &.col--ellipsis {
     & > .vxe-cell {
-      display: flex;
-      align-items: center;
+      .vxe-cell--wrapper {
+        display: flex;
+        align-items: center;
+        .vxe-cell--drag-handle,
+        .vxe-cell--sort,
+        .vxe-cell--filter,
+        .vxe-cell-title-prefix-icon,
+        .vxe-cell-title-suffix-icon,
+        .vxe-cell--checkbox,
+        .vxe-cell-title-suffix-icon,
+        .vxe-cell--required-icon {
+          flex-shrink: 0;
+        }
+      }
       .vxe-cell--title {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-      & > i,
-      & > span {
-        &:not(.vxe-cell--title) {
-          flex-shrink: 0;
-        }
-      }
     }
   }
   .vxe-cell--required-icon {
@@ -793,14 +803,16 @@ $btnThemeList: (
     width: 0.8em;
     height: 1em;
     line-height: 1em;
-    font-family: Verdana,Arial,Tahoma;
-    font-weight: normal;
     position: relative;
-    &:before {
-      content: "*";
-      position: absolute;
-      left: 0;
-      top: 0.2em;
+    & > i {
+      font-family: Verdana,Arial,Tahoma;
+      font-weight: normal;
+      &:before {
+        content: "*";
+        position: absolute;
+        left: 0;
+        top: 0.2em;
+      }
     }
   }
   // .vxe-cell--required-icon,