vxe-pc-ui 3.16.14 → 3.16.16

package/packages/language/vi-VN.ts

@@ -240,7 +240,7 @@ export default {
       expMode: 'Chọn dữ liệu',
       expCurrentColumn: 'Tất cả các lĩnh vực',
       expColumn: 'Chọn một trường',
-      widthMode: '列宽方式',
+      widthMode: '列宽设置',
       wModeTitle: '设置打印时列宽的渲染方式',
       wdModes: {
         default: '默认',

package/packages/language/zh-CHT.ts

@@ -240,7 +240,7 @@ export default {
       expMode: '選擇數據',
       expCurrentColumn: '全部字段',
       expColumn: '選擇字段',
-      widthMode: '列宽方式',
+      widthMode: '列宽设置',
       wModeTitle: '设置打印时列宽的渲染方式',
       wdModes: {
         default: '默认',

package/packages/language/zh-CN.ts

@@ -240,7 +240,7 @@ export default {
       expMode: '选择数据',
       expCurrentColumn: '全部字段',
       expColumn: '选择字段',
-      widthMode: '列宽方式',
+      widthMode: '列宽设置',
       wModeTitle: '设置打印时列宽的渲染方式',
       wdModes: {
         default: '默认',

package/packages/splitter/src/splitter.ts

@@ -133,11 +133,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
         autoItems
       }
     },
-    computeBarStyle () {
+    computeWrapperStyle () {
       const $xeSplitter = this
+      const props = $xeSplitter
 
+      const { width, height } = props
       const barOpts = $xeSplitter.computeBarOpts
-      const { width, height } = barOpts
+      const { width: barWidth, height: barHeight } = barOpts
       const stys: Record<string, string | number> = {}
       if (height) {
         stys.height = toCssUnit(height)
@@ -145,6 +147,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       if (width) {
         stys.width = toCssUnit(width)
       }
+      if (barHeight) {
+        stys['--vxe-ui-splitter-handle-bar-vertical-height'] = toCssUnit(barHeight)
+      }
+      if (barWidth) {
+        stys['--vxe-ui-splitter-handle-bar-horizontal-width'] = toCssUnit(barWidth)
+      }
       return stys
     },
     computeSItemSize () {
@@ -803,7 +811,6 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const { border, resize, vertical } = props
       const { itemList } = reactData
-      const barStyle = $xeSplitter.computeBarStyle
       const actionOpts = $xeSplitter.computeActionOpts
       const { direction } = actionOpts
       const showPrevButton = XEUtils.isBoolean(actionOpts.showPrevButton) ? actionOpts.showPrevButton : (itemList.some(item => item.showAction))
@@ -818,7 +825,6 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }, [
         h('div', {
           class: 'vxe-splitter-panel-handle-bar',
-          style: barStyle,
           on: {
             mousedown: $xeSplitter.dragEvent
           }
@@ -829,7 +835,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           }, [
             showPrevButton && nextItem.isExpand
               ? h('div', {
-                class: 'vxe-splitter-panel-action-btn',
+                class: ['vxe-splitter-panel-action-btn', prevItem.isExpand ? 'is--prev' : 'is--next'],
                 on: {
                   dblclick: $xeSplitter.handlePrevActionDblclickEvent,
                   click: $xeSplitter.handlePrevActionClickEvent
@@ -842,7 +848,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
               : renderEmptyElement($xeSplitter),
             showNextButton && prevItem.isExpand
               ? h('div', {
-                class: 'vxe-splitter-panel-action-btn',
+                class: ['vxe-splitter-panel-action-btn', nextItem.isExpand ? 'is--next' : 'is--prev'],
                 on: {
                   dblclick: $xeSplitter.handleNextActionDblclickEvent,
                   click: $xeSplitter.handleNextActionClickEvent
@@ -865,6 +871,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { border, padding, resize, vertical } = props
       const { itemList } = reactData
       const vSize = $xeSplitter.computeSize
+      const actionOpts = $xeSplitter.computeActionOpts
+      const { autoHideButton } = actionOpts
       const resizeOpts = $xeSplitter.computeResizeOpts
       const { immediate } = resizeOpts
       const visibleItems = $xeSplitter.computeVisibleItems
@@ -938,7 +946,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }
       })
       return h('div', {
-        class: 'vxe-splitter-wrapper'
+        class: ['vxe-splitter-wrapper', {
+          'is--ah-btn': autoHideButton
+        }]
       }, itemVNs)
     },
     renderVN (h: CreateElement): VNode {
@@ -946,24 +956,18 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeSplitter
       const slots = $xeSplitter.$scopedSlots
 
-      const { vertical, width, height } = props
+      const { vertical } = props
       const vSize = $xeSplitter.computeSize
       const resizeOpts = $xeSplitter.computeResizeOpts
+      const wrapperStyle = $xeSplitter.computeWrapperStyle
       const { immediate, showTip } = resizeOpts
       const defaultSlot = slots.default
-      const stys: Record<string, string | number> = {}
-      if (height) {
-        stys.height = toCssUnit(height)
-      }
-      if (width) {
-        stys.width = toCssUnit(width)
-      }
       return h('div', {
         ref: 'refElem',
         class: ['vxe-splitter', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
           [`size--${vSize}`]: vSize
         }],
-        style: stys
+        style: wrapperStyle
       }, [
         h('div', {
           class: 'vxe-splitter-slots'

package/packages/ui/index.ts

@@ -370,6 +370,9 @@ setConfig({
     resizeConfig: {
       // immediate: false,
       showTip: true
+    },
+    actionConfig: {
+      autoHideButton: true
     }
   },
   splitterPanel: {},

package/packages/ui/src/log.ts

@@ -8,7 +8,7 @@ export function createComponentLog (name: string) {
   const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : ''
   const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : ''
   const designVersion = VxeUI.designVersion ? `design v${VxeUI.designVersion}` : ''
-  const versionInfo = [uiVersion, tableVersion, ganttVersion, designVersion].join(' ')
+  const versionInfo = [uiVersion, tableVersion, ganttVersion, designVersion].filter(v => v).join(' ')
   return {
     warnLog: log.create('warn', versionInfo + '] [' + name),
     errLog: log.create('error', versionInfo + '] [' + name)

package/styles/components/splitter.scss

@@ -111,6 +111,20 @@
   display: flex;
   flex-direction: row;
   overflow: hidden;
+  &.is--ah-btn {
+    & > .vxe-splitter-panel-handle {
+      .vxe-splitter-panel-action-btn {
+        opacity: 0;
+      }
+    }
+    &:hover {
+      & > .vxe-splitter-panel-handle {
+        .vxe-splitter-panel-action-btn {
+          opacity: 1;
+        }
+      }
+    }
+  }
 }
 
 .vxe-splitter-slots {
@@ -147,7 +161,6 @@
 
 .vxe-splitter-panel-action-btn-wrapper {
   position: absolute;
-  display: flex;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -155,17 +168,16 @@
   pointer-events: none;
 }
 .vxe-splitter-panel-action-btn {
+  position: absolute;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   border-radius: var(--vxe-ui-base-border-radius);
-  color: var(--vxe-ui-layout-background-color);
   background-color: var(--vxe-ui-splitter-handle-button-background-color);
-  border: 1px solid var(--vxe-ui-input-border-color);
   cursor: pointer;
   pointer-events: all;
-  @include baseMixin.createAnimationTransition(transform, 0.1s);
+  @include baseMixin.createAnimationTransition(all, 0.15s);
   &:hover {
     color: #ffffff;
     background-color: var(--vxe-ui-font-primary-color);
@@ -174,7 +186,7 @@
     transform: scale(0.9);
   }
   & > i {
-    font-size: 0.6em;
+    font-size: 0.76em;
   }
 }
 .vxe-splitter-panel-handle {
@@ -184,21 +196,22 @@
       border-width: 1px 0 1px 0;
     }
     .vxe-splitter-panel-action-btn-wrapper {
-      flex-direction: column;
-      & div {
-        margin-top: 1em;
-        &:first-child {
-          margin-top: 0;
-        }
-      }
+      width: var(--vxe-ui-splitter-handle-bar-horizontal-width);
+      height: var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-height);
     }
     .vxe-splitter-panel-handle-bar {
       width: var(--vxe-ui-splitter-handle-bar-horizontal-width);
       height: 100%;
     }
     .vxe-splitter-panel-action-btn {
-      width: var(--vxe-ui-splitter-handle-bar-horizontal-width);
-      height: var(--vxe-ui-splitter-handle-bar-horizontal-height);
+      width: var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-width);
+      height: var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-height);
+      &.is--prev {
+        left: calc(var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-width) * -1 - 0.2em);
+      }
+      &.is--next {
+        right: calc(var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-width) * -1 - 0.2em);
+      }
     }
   }
   &.is--vertical {
@@ -207,21 +220,22 @@
       border-width: 0 1px 0 1px;
     }
     .vxe-splitter-panel-action-btn-wrapper {
-      flex-direction: row;
-      & div {
-        margin-left: 1em;
-        &:first-child {
-          margin-left: 0;
-        }
-      }
+      height: var(--vxe-ui-splitter-handle-bar-vertical-height);
+      width: var(--vxe-ui-splitter-handle-bar-vertical-action-btn-width);
     }
     .vxe-splitter-panel-handle-bar {
       height: var(--vxe-ui-splitter-handle-bar-vertical-height);
       width: 100%;
     }
     .vxe-splitter-panel-action-btn {
-      width: var(--vxe-ui-splitter-handle-bar-vertical-width);
-      height: var(--vxe-ui-splitter-handle-bar-vertical-height);
+      height: var(--vxe-ui-splitter-handle-bar-vertical-action-btn-height);
+      width: var(--vxe-ui-splitter-handle-bar-vertical-action-btn-width);
+      &.is--prev {
+        top: calc(var(--vxe-ui-splitter-handle-bar-vertical-action-btn-height) * -1 - 0.2em);
+      }
+      &.is--next {
+        bottom: calc(var(--vxe-ui-splitter-handle-bar-vertical-action-btn-height) * -1 - 0.2em);
+      }
     }
   }
   &.is--resize {

package/styles/theme/base.scss

@@ -247,11 +247,14 @@
   --vxe-ui-calendar-festival-selected-color: var(--vxe-ui-calendar-selected-color);
   --vxe-ui-calendar-notice-selected-background-color: var(--vxe-ui-calendar-selected-color);
 
-  /*split*/
-  --vxe-ui-splitter-handle-bar-horizontal-width: 0.68em;
-  --vxe-ui-splitter-handle-bar-horizontal-height: 3.2em;
-  --vxe-ui-splitter-handle-bar-vertical-width: var(--vxe-ui-splitter-handle-bar-horizontal-height);
+  /*splitter*/
+  --vxe-ui-splitter-handle-button-background-color: var(--vxe-ui-splitter-handle-bar-background-color);
+  --vxe-ui-splitter-handle-bar-horizontal-width: 2px;
+  --vxe-ui-splitter-handle-bar-horizontal-action-btn-width: 1.2em;
+  --vxe-ui-splitter-handle-bar-horizontal-action-btn-height: 2.4em;
   --vxe-ui-splitter-handle-bar-vertical-height: var(--vxe-ui-splitter-handle-bar-horizontal-width);
+  --vxe-ui-splitter-handle-bar-vertical-action-btn-width: var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-height);
+  --vxe-ui-splitter-handle-bar-vertical-action-btn-height: var(--vxe-ui-splitter-handle-bar-horizontal-action-btn-width);
   --vxe-ui-splitter-resizable-line-color: #D9DDDF;
   --vxe-ui-splitter-resizable-drag-line-color: var(--vxe-ui-font-primary-color);
 

package/styles/theme/dark.scss

@@ -115,8 +115,7 @@
   /*rate*/
   --vxe-ui-rate-item-color: #bd9537;
 
-  /*split*/
-  --vxe-ui-splitter-handle-button-background-color: #9f9f9f;
+  /*splitter*/
   --vxe-ui-splitter-handle-bar-background-color: #444444;
   --vxe-ui-splitter-handle-bar-hover-background-color: #606060;
 

package/styles/theme/light.scss

@@ -114,8 +114,7 @@
   /*rate*/
   --vxe-ui-rate-item-color: #{light_variable.$vxe-ui-rate-item-color};
 
-  /*split*/
-  --vxe-ui-splitter-handle-button-background-color: #{light_variable.$vxe-ui-splitter-handle-button-background-color};
+  /*splitter*/
   --vxe-ui-splitter-handle-bar-background-color: #{light_variable.$vxe-ui-splitter-handle-bar-background-color};
   --vxe-ui-splitter-handle-bar-hover-background-color: #{light_variable.$vxe-ui-splitter-handle-bar-hover-background-color};
 

package/styles/variable.scss

@@ -109,9 +109,9 @@ $vxe-ui-tree-drag-over-background-color: rgba(255,255,200,0.3) !default;
 $vxe-ui-rate-item-color: #f7ba2a !default;
 
 /*split*/
-$vxe-ui-splitter-handle-button-background-color: #8b8b8b;
-$vxe-ui-splitter-handle-bar-background-color: #e2e2e3;
-$vxe-ui-splitter-handle-bar-hover-background-color: #d8d8d8;
+$vxe-ui-splitter-handle-bar-background-color: #e2e2e3 !default;
+$vxe-ui-splitter-handle-bar-hover-background-color: #d8d8d8 !default;
+$vxe-ui-splitter-handle-button-background-color: $vxe-ui-splitter-handle-bar-background-color !default;
 
 /*cascader*/
 $vxe-ui-cascader-node-hover-background-color: #f5f7fa !default;

package/types/components/button.d.ts

@@ -87,7 +87,14 @@ export namespace VxeButtonPropTypes {
      * 设置弹出面板方向
      */
     placement?: 'top' | 'bottom' | '' | null
+    /**
+     * 是否启用元素挂载
+     */
     transfer?: boolean
+    /**
+     * 挂载到指定元素下
+     */
+    appendTo?: string | HTMLElement | (() => string | HTMLElement)
     zIndex?: number | string
     className?: string | ((params: { $button: VxeButtonConstructor }) => string)
   }

package/types/components/color-picker.d.ts

@@ -58,7 +58,14 @@ export namespace VxeColorPickerPropTypes {
      * 触发方式
      */
     trigger?: 'default' | 'icon' | 'manual' | '' | null
+    /**
+     * 是否启用元素挂载
+     */
     transfer?: boolean
+    /**
+     * 挂载到指定元素下
+     */
+    appendTo?: string | HTMLElement | (() => string | HTMLElement)
     width?: number | string
     height?: number | string
     zIndex?: number | string

package/types/components/date-picker.d.ts

@@ -109,7 +109,14 @@ export namespace VxeDatePickerPropTypes {
      * 触发方式
      */
     trigger?: 'default' | 'icon' | 'manual' | '' | null
+    /**
+     * 是否启用元素挂载
+     */
     transfer?: boolean
+    /**
+     * 挂载到指定元素下
+     */
+    appendTo?: string | HTMLElement | (() => string | HTMLElement)
     width?: number | string
     height?: number | string
     zIndex?: number | string

package/types/components/date-range-picker.d.ts

@@ -92,7 +92,14 @@ export namespace VxeDateRangePickerPropTypes {
      * 触发方式
      */
     trigger?: 'default' | 'icon' | 'manual' | '' | null
+    /**
+     * 是否启用元素挂载
+     */
     transfer?: boolean
+    /**
+     * 挂载到指定元素下
+     */
+    appendTo?: string | HTMLElement | (() => string | HTMLElement)
     width?: number | string
     height?: number | string
     zIndex?: number | string

package/types/components/gantt.d.ts

@@ -245,6 +245,10 @@ export namespace VxeGanttPropTypes {
      * 是否允许拖拽调整视图宽度
      */
     resize?: boolean
+    /**
+     * 是否自动隐藏折叠按钮
+     */
+    autoHideCollapseButton?: boolean
     /**
      * 是否显示左侧表格的折叠按钮
      */

package/types/components/pulldown.d.ts

@@ -56,7 +56,14 @@ export namespace VxePulldownPropTypes {
      * 触发方式
      */
     trigger?: 'click' | 'manual' | 'default' | '' | null
+    /**
+     * 是否启用元素挂载
+     */
     transfer?: boolean
+    /**
+     * 挂载到指定元素下
+     */
+    appendTo?: string | HTMLElement | (() => string | HTMLElement)
     width?: number | string
     height?: number | string
     zIndex?: number | string

package/types/components/select.d.ts

@@ -152,7 +152,14 @@ export namespace VxeSelectPropTypes {
      * 触发方式
      */
     trigger?: 'default' | 'icon' | 'manual' | '' | null
+    /**
+     * 是否启用元素挂载
+     */
     transfer?: boolean
+    /**
+     * 挂载到指定元素下
+     */
+    appendTo?: string | HTMLElement | (() => string | HTMLElement)
     width?: number | string
     height?: number | string
     zIndex?: number | string

package/types/components/splitter.d.ts

@@ -52,6 +52,10 @@ export namespace VxeSplitterPropTypes {
      * 触发方式
      */
     trigger?: 'click' | 'dblclick' | '' | null
+    /**
+     * 是否自动隐藏折叠按钮
+     */
+    autoHideButton?: boolean
     /**
      * 显示往向前折叠按钮
      */

package/types/components/table-select.d.ts

@@ -56,7 +56,14 @@ export namespace VxeTableSelectPropTypes {
      * 触发方式
      */
     trigger?: 'default' | 'icon' | 'manual' | '' | null
+    /**
+     * 是否启用元素挂载
+     */
     transfer?: boolean
+    /**
+     * 挂载到指定元素下
+     */
+    appendTo?: string | HTMLElement | (() => string | HTMLElement)
     width?: number | string
     height?: number | string
     zIndex?: number | string

package/types/components/table.d.ts

@@ -2954,7 +2954,7 @@ export namespace VxeTablePropTypes {
   /**
      * 导入参数
      */
-  export interface ImportConfig {
+  export interface ImportConfig<D = any> {
     // 内置属性
     _typeMaps?: Record<string, number>
 
@@ -3029,7 +3029,7 @@ export namespace VxeTablePropTypes {
     width?: number | string
   }
 
-  interface ExportAndPrintConfig {
+  interface ExportAndPrintConfig<D = any> {
     /**
      * 文件名
      */
@@ -3159,7 +3159,7 @@ export namespace VxeTablePropTypes {
   /**
    * 导出参数
    */
-  export interface ExportConfig extends ExportAndPrintConfig {
+  export interface ExportConfig<D = any> extends ExportAndPrintConfig<D> {
     // 内置属性
     _typeMaps?: Record<string, number>
     /**
@@ -3234,7 +3234,7 @@ export namespace VxeTablePropTypes {
   /**
    * 打印参数
    */
-  export interface PrintConfig extends ExportAndPrintConfig {
+  export interface PrintConfig<D = any> extends ExportAndPrintConfig<D> {
     /**
      * 列宽计算模式，支持默认default，等比例scale，自适应auto
      */
@@ -3549,15 +3549,15 @@ export interface VxeTableProps<D = any> {
   /**
    * 导出配置项
    */
-  exportConfig?: VxeTablePropTypes.ExportConfig
+  exportConfig?: VxeTablePropTypes.ExportConfig<D>
   /**
    * 导入配置项
    */
-  importConfig?: VxeTablePropTypes.ImportConfig
+  importConfig?: VxeTablePropTypes.ImportConfig<D>
   /**
    * 打印配置项
    */
-  printConfig?: VxeTablePropTypes.PrintConfig
+  printConfig?: VxeTablePropTypes.PrintConfig<D>
   /**
    * 展开行配置项
    */
@@ -4768,12 +4768,14 @@ export interface TableMethods<DT = any> {
    * @param checked 是否选中
    */
   setCheckboxRow(rows: any | any[], checked: boolean): Promise<any>
+  // 后续可能废弃
+  setCheckboxRowKey(keys: string | number | (string | number)[] | null | undefined, checked: boolean): Promise<any>
   /**
    * 用于 type=checkbox，设置行为选中状态，第二个参数为选中与否
    * @param keys 指定主键
    * @param checked 是否选中
    */
-  setCheckboxRowKey(keys: string | number | (string | number)[] | null | undefined, checked: boolean): Promise<any>
+  setCheckboxRowByKey(keys: string | number | (string | number)[] | null | undefined, checked: boolean): Promise<any>
   /**
    * 用于 type=checkbox，判断列头复选框是否被选中
    */
@@ -4860,11 +4862,12 @@ export interface TableMethods<DT = any> {
    * @param row 指定行
    */
   setRadioRow(row: any): Promise<any>
+  setRadioRowKey(key: string | number | null | undefined): Promise<any>
   /**
    * 用于 type=radio，设置某一行为选中状态
    * @param key 指定主键
    */
-  setRadioRowKey(key: string | number | null | undefined): Promise<any>
+  setRadioByRowKey(key: string | number | null | undefined): Promise<any>
   /**
    * 将指定行设置为取消/标记待删除状态
    */

package/types/components/tree-select.d.ts

@@ -122,7 +122,14 @@ export namespace VxeTreeSelectPropTypes {
      * 触发方式
      */
     trigger?: 'default' | 'icon' | 'manual' | '' | null
+    /**
+     * 是否启用元素挂载
+     */
     transfer?: boolean
+    /**
+     * 挂载到指定元素下
+     */
+    appendTo?: string | HTMLElement | (() => string | HTMLElement)
     width?: number | string
     height?: number | string
     zIndex?: number | string