vxe-pc-ui 3.19.8 → 3.20.1

package/packages/ui/src/utils.ts

@@ -6,6 +6,16 @@ export function isEnableConf (conf: any): boolean {
   return conf && conf.enabled !== false
 }
 
+/**
+ * 用于开关类型的配置项
+ * 局部启用规则：conf={}
+ * 局部禁用规则：conf={enabled:false}
+ * 全局默认启用规则：conf.enabled=true
+ */
+export function hasEnableConf (conf: any, opts: any): boolean {
+  return opts && (conf ? opts.enabled !== false : opts.enabled)
+}
+
 export function nextZIndex () {
   return DomZIndex.getNext()
 }
@@ -62,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/list.scss

@@ -287,3 +287,79 @@
   padding-right: var(--vxe-ui-list-current-padding);
   @include baseMixin.createRadioIcon();
 }
+
+// 滚动条
+.vxe-list {
+  &.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-list--virtual-wrapper {
+      overflow-x: hidden;
+    }
+  }
+  &.ov-y--hidden {
+    & > .vxe-list--virtual-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-list--virtual-wrapper {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+    & > .vxe-list--virtual-wrapper::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}

package/styles/components/scrollbar.scss

@@ -49,6 +49,9 @@
       background-color: var(--vxe-ui-scrollbar-thumb-active-background-color);
     }
   }
+}
+
+.vxe-scrollbar {
   &.ov-x--hidden {
     & > .vxe-scrollbar--view {
       overflow-x: hidden;

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' | 'yConfig' | '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/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' | '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' | '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

@@ -1,5 +1,6 @@
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, ValueOf } from '@vxe-ui/core'
 import { VxeContextMenuPropTypes, VxeContextMenuDefines } from './context-menu'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types,@typescript-eslint/no-unused-vars */
 
@@ -218,6 +219,17 @@ export namespace VxeListPropTypes {
      */
     enabled?: boolean
   }
+  export type UseScrollbar = boolean
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible'> {
+    /**
+     * 滚动条宽度
+     */
+    width?: number | string
+    /**
+     * 滚动条高度
+     */
+    height?: number | string
+  }
 }
 
 export interface VxeListProps<D = any> {
@@ -240,6 +252,14 @@ export interface VxeListProps<D = any> {
   dragConfig?: VxeListPropTypes.DragConfig
   menuConfig?: VxeListPropTypes.MenuConfig
   virtualYConfig?: VxeListPropTypes.VirtualYConfig
+  /**
+   * 使用虚拟滚动条
+   */
+  useScrollbar?: VxeListPropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
+  scrollbarConfig?: VxeListPropTypes.ScrollbarConfig
 
   /**
    * 已废弃，被 virtual-y-config 替换
@@ -268,6 +288,10 @@ export interface ListReactData {
   isAllChecked: boolean
   isAllIndeterminate: boolean
 
+  // 滚动条
+  yThumbHeight: number
+  xThumbWidth: number
+
   insertRowFlag: number
   removeRowFlag: number
 
@@ -277,13 +301,20 @@ export interface ListReactData {
 }
 
 export interface ListInternalData {
-  resizeObserver: ResizeObserver | undefined
   fullData: any[]
   afterList: any[]
   fullKeyMaps: Record<string, any>
   rowMaps: Record<string, VxeListDefines.RowCacheItem>
-  lastScrollLeft: number
+
+  // 滚动条
+  resizeObserver?: ResizeObserver
+  isThumbDrag?: boolean
+  thumbDragOffset: number
+  yThumbTop: number
+  xThumbLeft: number
   lastScrollTop: number
+  lastScrollLeft: number
+
   scrollYStore: {
     startIndex: number
     endIndex: number

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-plugins/extend-cell-area.d.ts

@@ -92,7 +92,7 @@ export interface VxeTableExtendCellAreaPrivateMethods<D = any> {
    * 内部方法
    * @private
    */
-  triggerClAreaMnEvent(evnt: MouseEvent, params: VxeTableDefines.CellClickEventParams<D>): void
+  triggerClAaMnEvent(evnt: MouseEvent, params: VxeTableDefines.CellClickEventParams<D>): void
   /**
    * 内部方法
    * @private

package/types/components/table.d.ts

@@ -1870,6 +1870,10 @@ export namespace VxeTablePropTypes {
    * 鼠标配置项
    */
   export interface MouseConfig {
+    /**
+     * 是否启用，支持局部/全局启用
+     */
+    enabled?: boolean
     /**
      * 开启单元格选中功能（只对 edit-config.mode=cell 有效）
      */
@@ -1889,6 +1893,10 @@ export namespace VxeTablePropTypes {
    * 区域配置项
    */
   export interface AreaConfig<D = any> {
+    /**
+     * 是否启用，支持局部/全局启用
+     */
+    enabled?: boolean
     /**
      * 是否显示操作提示消息
      */
@@ -2025,6 +2033,10 @@ export namespace VxeTablePropTypes {
    * 按键配置项
    */
   export interface KeyboardConfig<D = any> {
+    /**
+     * 是否启用，支持局部/全局启用
+     */
+    enabled?: boolean
     /**
      * 是否启用全选
      * Window/Linux对应按键: Ctrl+A
@@ -2928,33 +2940,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
   /**
    * 滚动条配置项
    */
@@ -2967,18 +2998,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
   }
 
   /**
@@ -2992,6 +3043,10 @@ export namespace VxeTablePropTypes {
      * 导入参数
      */
   export interface ImportConfig<D = any> {
+    /**
+     * 是否启用，支持局部/全局启用
+     */
+    enabled?: boolean
     /**
      * 内置属性
      * @private
@@ -3300,6 +3355,10 @@ export namespace VxeTablePropTypes {
    * 导出参数
    */
   export interface ExportConfig<D = any> extends ExportAndPrintConfig<D> {
+    /**
+     * 是否启用，支持局部/全局启用
+     */
+    enabled?: boolean
     // 内置属性
     _typeMaps?: Record<string, number>
     /**
@@ -3384,6 +3443,10 @@ export namespace VxeTablePropTypes {
    * 打印参数
    */
   export interface PrintConfig<D = any> extends ExportAndPrintConfig<D> {
+    /**
+     * 是否启用，支持局部/全局启用
+     */
+    enabled?: boolean
     /**
      * 列宽计算模式，支持默认default，等比例scale，自适应auto
      */
@@ -3815,6 +3878,10 @@ export interface VxeTableProps<D = any> {
    * 纵向虚拟滚动配置
    */
   virtualYConfig?: VxeTablePropTypes.VirtualYConfig
+  /**
+   * 使用虚拟滚动条
+   */
+  useScrollbar?: VxeTablePropTypes.UseScrollbar
   /**
    * 滚动条配置项
    */

package/types/components/tabs.d.ts

@@ -107,7 +107,16 @@ export namespace VxeTabsPropTypes {
     }) => boolean
   }
   export type UseScrollbar = boolean
-  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'native' | 'yConfig' | '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 VxeTabsProps = {

package/types/components/tree.d.ts

@@ -1,6 +1,7 @@
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, ValueOf } from '@vxe-ui/core'
 import { VxeContextMenuPropTypes, VxeContextMenuDefines } from './context-menu'
 import { VxeTooltipPropTypes } from './tooltip'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types,@typescript-eslint/no-unused-vars */
 
@@ -324,6 +325,17 @@ export namespace VxeTreePropTypes {
      */
     enabled?: boolean
   }
+  export type UseScrollbar = boolean
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible'> {
+    /**
+     * 滚动条宽度
+     */
+    width?: number | string
+    /**
+     * 滚动条高度
+     */
+    height?: number | string
+  }
 }
 
 export interface VxeTreeProps<D = any> {
@@ -403,6 +415,14 @@ export interface VxeTreeProps<D = any> {
   iconLoaded?: VxeTreePropTypes.IconLoaded
   size?: VxeTreePropTypes.Size
   virtualYConfig?: VxeTreePropTypes.VirtualYConfig
+  /**
+   * 使用虚拟滚动条
+   */
+  useScrollbar?: VxeTreePropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
+  scrollbarConfig?: VxeTreePropTypes.ScrollbarConfig
 }
 
 export interface TreePrivateComputed<D = any> {
@@ -431,6 +451,10 @@ export interface TreeReactData {
   updateExpandedFlag: number
   updateCheckboxFlag: number
 
+  // 滚动条
+  yThumbHeight: number
+  xThumbWidth: number
+
   insertNodeFlag: number
   removeNodeFlag: number
 
@@ -446,7 +470,6 @@ export interface TreeReactData {
 
 export interface TreeInternalData {
   initialized?: boolean
-  resizeObserver?: ResizeObserver
   lastFilterValue?: string
   afterTreeList: any[]
   treeFullData: any[]
@@ -456,8 +479,16 @@ export interface TreeInternalData {
   selectCheckboxMaps: Record<string, any>
   treeExpandedMaps: Record<string, boolean>
   treeExpandLazyLoadedMaps: Record<string, boolean>
-  lastScrollLeft: number
+
+  // 滚动条
+  resizeObserver?: ResizeObserver
+  isThumbDrag?: boolean
+  thumbDragOffset: number
+  yThumbTop: number
+  xThumbLeft: number
   lastScrollTop: number
+  lastScrollLeft: number
+
   scrollYStore: {
     startIndex: number
     endIndex: number