vxe-pc-ui 3.16.15 → 3.16.16

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,16 +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);
   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);
@@ -183,13 +196,8 @@
       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);
@@ -198,6 +206,12 @@
     .vxe-splitter-panel-action-btn {
       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 {
@@ -206,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-action-btn-width);
       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

@@ -248,12 +248,11 @@
   --vxe-ui-calendar-notice-selected-background-color: var(--vxe-ui-calendar-selected-color);
 
   /*splitter*/
-  --vxe-ui-splitter-handle-bar-horizontal-width: 0.65em;
-  // --vxe-ui-splitter-handle-bar-horizontal-height: 3.2em;
-  // --vxe-ui-splitter-handle-bar-vertical-width: var(--vxe-ui-splitter-handle-bar-horizontal-height);
+  --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-horizontal-action-btn-width: var(--vxe-ui-splitter-handle-bar-horizontal-width);
-  --vxe-ui-splitter-handle-bar-horizontal-action-btn-height: 3em;
   --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;

package/styles/theme/dark.scss

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

package/styles/theme/light.scss

@@ -115,7 +115,6 @@
   --vxe-ui-rate-item-color: #{light_variable.$vxe-ui-rate-item-color};
 
   /*splitter*/
-  --vxe-ui-splitter-handle-button-background-color: #{light_variable.$vxe-ui-splitter-handle-button-background-color};
   --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: #a4a4a4 !default;
 $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/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