vxe-pc-ui 3.20.0 → 3.20.2

package/packages/ui/src/utils.ts

@@ -72,3 +72,7 @@ export function enModelValue (nodeid: string | number | null | undefined) {
 export function deModelValue (nodeid: string | number | null) {
   return nodeid ? decodeURIComponent(`${nodeid}`) : nodeid
 }
+
+export function getDefaultConfig <T = any, D = any> (val1: T, def1: D): (T | D) {
+  return XEUtils.eqNull(val1) ? def1 : val1
+}

package/styles/components/drawer.scss

@@ -181,8 +181,8 @@
   &.is--drag {
     cursor: move;
     transition: none;
-   .vxe-modal--body,
-   .vxe-modal--footer {
+   .vxe-drawer--body,
+   .vxe-drawer--footer {
       &:after {
         content: "";
         position: absolute;
@@ -192,9 +192,10 @@
         height: 100%;
       }
     }
-    .vxe-modal--body {
+    .vxe-drawer--body {
       overflow: hidden;
-      .vxe-modal--content {
+      .vxe-drawer--content,
+      .vxe-drawer--scrollbar-content {
         overflow: hidden;
       }
     }
@@ -213,7 +214,8 @@
   overflow: auto;
   outline: 0;
 }
-.vxe-drawer--content {
+.vxe-drawer--content,
+.vxe-drawer--scrollbar-content  {
   flex-grow: 1;
   white-space: pre-line;
 }
@@ -227,7 +229,8 @@
   flex-grow: 1;
   overflow: auto;
   outline: 0;
-  .vxe-drawer--content {
+  .vxe-drawer--content,
+  .vxe-drawer--scrollbar-content  {
     overflow: auto;
   }
 }
@@ -349,3 +352,7 @@
     overflow: hidden;
   }
 }
+
+.vxe-drawer--scrollbar-content {
+  width: 100%;
+}

package/styles/components/list.scss

@@ -290,21 +290,34 @@
 
 // 滚动条
 .vxe-list {
-  & > .vxe-scrollbar {
-    position: unset;
+  &.ov-padding {
+    &.overflow-x {
+      &.sx-pos--top {
+        padding-top: var(--vxe-ui-scrollbar-x-height);
+      }
+      &.sx-pos--bottom {
+        padding-bottom: var(--vxe-ui-scrollbar-x-height);
+      }
+    }
+    &.overflow-y {
+      &.sy-pos--left {
+        padding-left: var(--vxe-ui-scrollbar-y-width);
+      }
+      &.sy-pos--right {
+        padding-right: var(--vxe-ui-scrollbar-y-width);
+      }
+    }
   }
-  &.is--virtual-scrollbar {
+  &.ov-x--hidden {
     & > .vxe-list--virtual-wrapper {
-      scrollbar-width: none;
-      -ms-overflow-style: none;
+      overflow-x: hidden;
     }
-    & > .vxe-list--virtual-wrapper::-webkit-scrollbar {
-      display: none;
+  }
+  &.ov-y--hidden {
+    & > .vxe-list--virtual-wrapper {
+      overflow-y: hidden;
     }
   }
-}
-
-.vxe-list {
   &.is--virtual-scrollbar {
     &.ov-x--auto-hide {
       &:hover {
@@ -337,4 +350,16 @@
       }
     }
   }
+  & > .vxe-scrollbar {
+    position: unset;
+  }
+  &.is--virtual-scrollbar {
+    & > .vxe-list--virtual-wrapper {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+    & > .vxe-list--virtual-wrapper::-webkit-scrollbar {
+      display: none;
+    }
+  }
 }

package/styles/components/modal.scss

@@ -538,3 +538,7 @@ html[data-vxe-lock-scroll] {
     overflow: hidden;
   }
 }
+
+.vxe-modal--scrollbar-content {
+  width: 100%;
+}

package/styles/components/tree.scss

@@ -308,3 +308,79 @@
   width: 0;
   float: left;
 }
+
+// 滚动条
+.vxe-tree {
+  &.ov-padding {
+    &.overflow-x {
+      &.sx-pos--top {
+        padding-top: var(--vxe-ui-scrollbar-x-height);
+      }
+      &.sx-pos--bottom {
+        padding-bottom: var(--vxe-ui-scrollbar-x-height);
+      }
+    }
+    &.overflow-y {
+      &.sy-pos--left {
+        padding-left: var(--vxe-ui-scrollbar-y-width);
+      }
+      &.sy-pos--right {
+        padding-right: var(--vxe-ui-scrollbar-y-width);
+      }
+    }
+  }
+  &.ov-x--hidden {
+    & > .vxe-tree--node-list-wrapper {
+      overflow-x: hidden;
+    }
+  }
+  &.ov-y--hidden {
+    & > .vxe-tree--node-list-wrapper {
+      overflow-y: hidden;
+    }
+  }
+  &.is--virtual-scrollbar {
+    &.ov-x--auto-hide {
+      &:hover {
+        & > .vxe-scrollbar {
+          & > .vxe-scrollbar--track-x {
+            opacity: 1;
+          }
+        }
+      }
+      & > .vxe-scrollbar {
+        & > .vxe-scrollbar--track-x {
+          opacity: 0;
+          @include baseMixin.createAnimationTransition(opacity, 0.8s);
+        }
+      }
+    }
+    &.ov-y--auto-hide {
+      &:hover {
+        & > .vxe-scrollbar {
+          & > .vxe-scrollbar--track-y {
+            opacity: 1;
+          }
+        }
+      }
+      & > .vxe-scrollbar {
+        & > .vxe-scrollbar--track-y {
+          opacity: 0;
+          @include baseMixin.createAnimationTransition(opacity, 0.8s);
+        }
+      }
+    }
+  }
+  & > .vxe-scrollbar {
+    position: unset;
+  }
+  &.is--virtual-scrollbar {
+    & > .vxe-tree--node-list-wrapper {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+    & > .vxe-tree--node-list-wrapper::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}

package/types/components/card.d.ts

@@ -27,7 +27,16 @@ export namespace VxeCardPropTypes {
   export type Padding = boolean
   export type Size = VxeComponentSizeType
   export type UseScrollbar = boolean
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'native' | 'xConfig' | 'yConfig' | 'padding' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {}
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+    /**
+     * 滚动条宽度
+     */
+    width?: number | string
+    /**
+     * 滚动条高度
+     */
+    height?: number | string
+  }
 }
 
 export type VxeCardProps = {

package/types/components/drawer.d.ts

@@ -1,5 +1,6 @@
 import { CreateElement } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, VxeComponentSlotType, ValueOf } from '@vxe-ui/core'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -67,6 +68,17 @@ export namespace VxeDrawerPropTypes {
   export type Padding = boolean
   export type BeforeHideMethod = (params: VxeDrawerDefines.DrawerVisibleParams) => Promise<any>
   export type Slots = VxeDrawerSlots
+  export type UseScrollbar = boolean
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+    /**
+     * 滚动条宽度
+     */
+    width?: number | string
+    /**
+     * 滚动条高度
+     */
+    height?: number | string
+  }
 }
 
 export interface VxeDrawerProps {
@@ -119,6 +131,14 @@ export interface VxeDrawerProps {
   padding?: VxeDrawerPropTypes.Padding
   beforeHideMethod?: VxeDrawerPropTypes.BeforeHideMethod
   slots?: VxeDrawerPropTypes.Slots
+  /**
+   * 使用虚拟滚动条
+   */
+  useScrollbar?: VxeDrawerPropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
+  scrollbarConfig?: VxeDrawerPropTypes.ScrollbarConfig
 }
 
 export interface DrawerPrivateComputed {

package/types/components/gantt-module/gantt-view.d.ts

@@ -1,6 +1,7 @@
 import { DefineVxeComponentInstance } from '@vxe-ui/core'
 import { VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from '../table'
 import { VxeGanttDefines, VxeGanttConstructor } from '../gantt'
+import { VxeScrollbarPropTypes } from '../scrollbar'
 
 /* eslint-disable no-use-before-define */
 
@@ -34,6 +35,10 @@ export interface GanttViewReactData {
   lastScrollTime: number
   lazScrollLoading: boolean
 
+  // 滚动条
+  yThumbHeight: number
+  xThumbWidth: number
+
   scrollVMLoading: boolean
   scrollYHeight: number
   scrollYTop: number
@@ -72,7 +77,13 @@ export interface GanttViewInternalData {
     startIndex: number
     endIndex: number
   }
-  // 最后滚动位置
+
+  // 滚动条
+  scrollObserver?: ResizeObserver
+  isThumbDrag?: boolean
+  thumbDragOffset: number
+  yThumbTop: number
+  xThumbLeft: number
   lastScrollLeft: number
   lastScrollTop: number
 
@@ -105,6 +116,14 @@ export interface GanttViewPrivateRef {
 }
 
 export interface GanttViewPrivateComputed {
+  computeScrollXHeight: number | undefined
+  computeScrollYWidth: number | undefined
+  computeScrollXVisible: 'auto' | 'visible' | 'hidden' | boolean | undefined
+  computeScrollYVisible: 'auto' | 'visible' | 'hidden' | boolean | undefined
+  computeScrollXAutoHide: VxeScrollbarPropTypes.AutoHide | undefined
+  computeScrollYAutoHide: VxeScrollbarPropTypes.AutoHide | undefined
+  computeScrollbarXToTop: boolean
+  computeScrollbarYToLeft: boolean
   computeScaleDateList: Date[]
   computeNowLineLeft: number
 }
@@ -158,6 +177,10 @@ export interface VxeGanttViewPrivateMethods {
    * @private
    */
   handleUpdateSYStatus(scrollYLoad: boolean): void
+  /**
+   * @private
+   */
+  updateScrollbar(): void
 }
 
 export interface VxeGanttViewMethods {

package/types/components/gantt.d.ts

@@ -723,6 +723,8 @@ export interface GanttPrivateComputed<D = any> extends GridPrivateComputed<D> {
   computeTypeField: string
   computeProgressField: string
   computeScrollbarOpts: VxeTablePropTypes.ScrollbarConfig
+  computeScrollbarXOpts: VxeTablePropTypes.ScrollbarXConfig
+  computeScrollbarYOpts: VxeTablePropTypes.ScrollbarYConfig
   computeScrollbarXToTop: boolean
   computeScrollbarYToLeft: boolean
 }

package/types/components/layout-aside.d.ts

@@ -30,7 +30,16 @@ export namespace VxeLayoutAsidePropTypes {
     animation?: boolean
   }
   export type UseScrollbar = boolean
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'native' | 'yConfig' | 'padding' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {}
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+    /**
+     * 滚动条宽度
+     */
+    width?: number | string
+    /**
+     * 滚动条高度
+     */
+    height?: number | string
+  }
 }
 
 export interface VxeLayoutAsideProps {

package/types/components/layout-body.d.ts

@@ -25,7 +25,16 @@ export namespace VxeLayoutBodyPropTypes {
   export type ShowBacktop = boolean
   export interface BacktopConfig extends Omit<VxeBacktopProps, 'target'> {}
   export type UseScrollbar = boolean
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'native' | 'xConfig' | 'yConfig' | 'padding' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {}
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+    /**
+     * 滚动条宽度
+     */
+    width?: number | string
+    /**
+     * 滚动条高度
+     */
+    height?: number | string
+  }
 }
 export interface VxeLayoutBodyProps {
   size?: VxeLayoutBodyPropTypes.Size

package/types/components/list.d.ts

@@ -220,7 +220,16 @@ export namespace VxeListPropTypes {
     enabled?: boolean
   }
   export type UseScrollbar = boolean
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding'> {}
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible'> {
+    /**
+     * 滚动条宽度
+     */
+    width?: number | string
+    /**
+     * 滚动条高度
+     */
+    height?: number | string
+  }
 }
 
 export interface VxeListProps<D = any> {
@@ -297,8 +306,10 @@ export interface ListInternalData {
   fullKeyMaps: Record<string, any>
   rowMaps: Record<string, VxeListDefines.RowCacheItem>
 
-  // 滚动条
   resizeObserver?: ResizeObserver
+
+  // 滚动条
+  scrollObserver?: ResizeObserver
   isThumbDrag?: boolean
   thumbDragOffset: number
   yThumbTop: number

package/types/components/modal.d.ts

@@ -1,5 +1,6 @@
 import { CreateElement } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentSizeType, VxeComponentEventParams, ValueOf, VxeComponentSlotType } from '@vxe-ui/core'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -120,6 +121,17 @@ export namespace VxeModalPropTypes {
     type: ModalEventTypes
   }) => Promise<any>
   export type Slots = VxeModalSlots
+  export type UseScrollbar = boolean
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+    /**
+     * 滚动条宽度
+     */
+    width?: number | string
+    /**
+     * 滚动条高度
+     */
+    height?: number | string
+  }
 }
 
 export interface VxeModalProps {
@@ -189,6 +201,14 @@ export interface VxeModalProps {
   padding?: VxeModalPropTypes.Padding
   beforeHideMethod?: VxeModalPropTypes.BeforeHideMethod
   slots?: VxeModalPropTypes.Slots
+  /**
+   * 使用虚拟滚动条
+   */
+  useScrollbar?: VxeModalPropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
+  scrollbarConfig?: VxeModalPropTypes.ScrollbarConfig
   /**
    * @deprecated 已废弃，请使用 content
    */

package/types/components/scrollbar.d.ts

@@ -28,6 +28,8 @@ export namespace VxeScrollbarPropTypes {
   export type Loading = boolean
   export type Native = boolean
   export type Padding = boolean
+  export type AutoHide = boolean
+  export type Visible = boolean
   export interface XConfig {
     height?: number | string
     // showArrows?: boolean
@@ -39,7 +41,7 @@ export namespace VxeScrollbarPropTypes {
      * 滚动条显示位置
      */
     position?: 'top' | 'bottom' | ''
-    visible?: 'auto' | 'hidden' | 'visible' | ''
+    visible?: boolean
     /**
      * 滚动到边界触发的阈值会触发 scroll-boundary 事件
      */
@@ -56,7 +58,7 @@ export namespace VxeScrollbarPropTypes {
      * 滚动条显示位置
      */
     position?: 'left' | 'right' | ''
-    visible?: 'auto' | 'hidden' | 'visible' | ''
+    visible?: boolean
     /**
      * 滚动到边界触发的阈值会触发 scroll-boundary 事件
      */
@@ -75,6 +77,10 @@ export interface VxeScrollbarProps {
    * ID
    */
   id?: VxeScrollbarPropTypes.Id
+  /**
+   * View ID
+   */
+  viewId?: VxeScrollbarPropTypes.ViewId
   /**
    * 容器宽度
    */
@@ -111,6 +117,14 @@ export interface VxeScrollbarProps {
    * 滚动条是否需要边距
    */
   padding?: VxeScrollbarPropTypes.Padding
+  /**
+   * 是否自动隐藏
+   */
+  autoHide?: VxeScrollbarPropTypes.AutoHide
+  /**
+   * 是否显示
+   */
+  visible?: VxeScrollbarPropTypes.Visible
   /**
    * 纵向滚动条宽度
    */

package/types/components/table.d.ts

@@ -12,6 +12,7 @@ import { VxeTabsConstructor, VxeTabsPrivateMethods } from './tabs'
 import { VxeSplitterConstructor, VxeSplitterMethods } from './splitter'
 import { VxeGanttConstructor, VxeGanttPrivateMethods } from './gantt'
 import { VxeGanttViewConstructor, VxeGanttViewInstance, VxeGanttViewPrivateMethods } from './gantt-module/gantt-view'
+import { VxeScrollbarPropTypes } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types,@typescript-eslint/no-unused-vars */
 
@@ -2940,33 +2941,52 @@ export namespace VxeTablePropTypes {
   }
 
   export interface ScrollbarXConfig {
+    /**
+     * 滚动条高度
+     */
+    height?: number
     /**
      * 滚动条显示位置
      */
     position?: 'top' | 'bottom' | ''
     /**
-     * 滚动条显示方式
+     * 是否显示
      */
     visible?: 'auto' | 'visible' | 'hidden' | boolean
+    /**
+     * 是否自动隐藏滚动条
+     */
+    autoHide?: boolean
     /**
      * 滚动行为
+     * @deprecated
      */
     overscrollBehavior?: 'contain' | 'none' | ''
   }
   export interface ScrollbarYConfig {
+    /**
+     * 滚动条宽度
+     */
+    width?: number
     /**
      * 滚动条显示位置
      */
     position?: 'left' | 'right' | ''
     /**
-     * 滚动条显示方式
+     * 是否显示
      */
     visible?: 'auto' | 'visible' | 'hidden' | boolean
+    /**
+     * 是否自动隐藏滚动条
+     */
+    autoHide?: boolean
     /**
      * 滚动行为
+     * @deprecated
      */
     overscrollBehavior?: 'contain' | 'none' | ''
   }
+  export type UseScrollbar = boolean
   /**
    * 滚动条配置项
    */
@@ -2979,18 +2999,38 @@ export namespace VxeTablePropTypes {
      * 滚动条高度
      */
     height?: number
+    padding?: boolean
+    /**
+     * 是否自动隐藏滚动条
+     */
+    autoHide?: boolean
+    /**
+     * 是否显示
+     */
+    visible?: boolean
     /**
      * 滚动行为
+     * @deprecated
      */
     overscrollBehavior?: 'contain' | 'none' | ''
     /**
-     * 横向滚动条
+     * 已废弃，请使用 xConfig
+     * @deprecated
      */
     x?: ScrollbarXConfig
     /**
-     * 纵向滚动条
+     * 横向滚动条
+     */
+    xConfig?: ScrollbarXConfig
+    /**
+     * 已废弃，请使用 yConfig
+     * @deprecated
      */
     y?: ScrollbarYConfig
+    /**
+     * 纵向滚动条
+     */
+    yConfig?: ScrollbarYConfig
   }
 
   /**
@@ -3839,6 +3879,10 @@ export interface VxeTableProps<D = any> {
    * 纵向虚拟滚动配置
    */
   virtualYConfig?: VxeTablePropTypes.VirtualYConfig
+  /**
+   * 使用虚拟滚动条
+   */
+  useScrollbar?: VxeTablePropTypes.UseScrollbar
   /**
    * 滚动条配置项
    */
@@ -3927,8 +3971,15 @@ export interface TablePrivateComputed<D = any> {
   computeScrollbarOpts: VxeTablePropTypes.ScrollbarConfig
   computeScrollbarXOpts: VxeTablePropTypes.ScrollbarXConfig
   computeScrollbarYOpts: VxeTablePropTypes.ScrollbarYConfig
+  computeScrollXHeight: number | undefined
+  computeScrollYWidth: number | undefined
+  computeScrollXVisible: 'auto' | 'visible' | 'hidden' | boolean | undefined
+  computeScrollYVisible: 'auto' | 'visible' | 'hidden' | boolean | undefined
+  computeScrollXAutoHide: VxeScrollbarPropTypes.AutoHide | undefined
+  computeScrollYAutoHide: VxeScrollbarPropTypes.AutoHide | undefined
   computeScrollbarXToTop: boolean
   computeScrollbarYToLeft: boolean
+  computeScrollbarWrapperClss: string
   computeColumnOpts: VxeTablePropTypes.ColumnOpts
   computeCurrentColumnOpts: VxeTablePropTypes.CurrentColumnConfig
   computeScrollXThreshold: number
@@ -4095,6 +4146,11 @@ export interface TableReactData<D = any> {
   scrollbarWidth: number
   // 横向滚动条的高度
   scrollbarHeight: number
+
+  // 滚动条
+  yThumbHeight: number
+  xThumbWidth: number
+
   /**
    * 行高
    * @deprecated
@@ -4336,9 +4392,17 @@ export interface TableInternalData<D = any> {
   currentRow: D | null
   currentCol: VxeTableDefines.ColumnInfo | null
 
-  // 最后滚动位置
-  lastScrollLeft: number
+  resizeObserver?: ResizeObserver
+
+  // 滚动条
+  scrollObserver?: ResizeObserver
+  isThumbDrag?: boolean
+  thumbDragOffset: number
+  yThumbTop: number
+  xThumbLeft: number
   lastScrollTop: number
+  lastScrollLeft: number
+
   // 单选框属性，已选中保留的行
   radioReserveRow: any
   // 复选框属性，已选中保留的行
@@ -5938,6 +6002,16 @@ export interface TablePrivateMethods<D = any> {
     row: any
     column: VxeTableDefines.ColumnInfo
   }, cellValue?: any): Promise<any>
+  /**
+   * 内部方法
+   * @private
+   */
+  updateScrollbar(): void
+  /**
+   * 内部方法
+   * @private
+   */
+  updateThumbOffset(): void
   /**
    * 内部方法
    * @private