vxe-pc-ui 3.19.7 → 3.20.0

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()
 }

package/styles/components/card.scss

@@ -1,8 +1,34 @@
+// 局部变量
+.vxe-card {
+  --vxe-ui-card-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-card-current-padding: var(--vxe-ui-card-padding-default);
+  &.size--xlarge {
+    --vxe-ui-card-current-font-size: var(--vxe-ui-font-size-xlarge);
+    --vxe-ui-card-current-padding: var(--vxe-ui-card-padding-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-card-current-font-size: var(--vxe-ui-font-size-large);
+    --vxe-ui-card-current-padding: var(--vxe-ui-card-padding-large);
+  }
+  &.size--medium {
+    --vxe-ui-card-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-card-current-padding: var(--vxe-ui-card-padding-medium);
+  }
+  &.size--small {
+    --vxe-ui-card-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-card-current-padding: var(--vxe-ui-card-padding-small);
+  }
+  &.size--mini {
+    --vxe-ui-card-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-card-current-padding: var(--vxe-ui-card-padding-mini);
+  }
+}
+
 .vxe-card {
   position: relative;
   display: inline-flex;
   flex-direction: column;
-  font-size: var(--vxe-ui-font-size-default);
+  font-size: var(--vxe-ui-card-current-font-size);
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
   background-color: var(--vxe-ui-layout-background-color);
@@ -33,19 +59,25 @@
   flex-grow: 1;
 }
 .vxe-card--body-left,
+.vxe-card--body-scrollbar-left,
 .vxe-card--body-right,
-.vxe-card--body-content {
+.vxe-card--body-scrollbar-right,
+.vxe-card--body-content,
+.vxe-card--body-scrollbar-content {
   overflow: auto;
 }
 .vxe-card--header,
 .vxe-card--header-extra,
 .vxe-card--footer,
 .vxe-card--body-left,
-.vxe-card--body-right {
+.vxe-card--body-scrollbar-left,
+.vxe-card--body-right,
+.vxe-card--body-scrollbar-right {
   flex-shrink: 0;
 }
 .vxe-card--header-title,
-.vxe-card--body-content {
+.vxe-card--body-content,
+.vxe-card--body-scrollbar-content {
   flex-grow: 1;
 }
 .vxe-card--header-title {
@@ -57,66 +89,20 @@
 }
 
 .vxe-card {
-  font-size: var(--vxe-ui-font-size-default);
   & > .vxe-card--header,
   & > .vxe-card--footer {
-    padding: var(--vxe-ui-card-padding-default);
+    padding: var(--vxe-ui-card-current-padding);
   }
   &.is--padding {
     & > .vxe-card--body {
-      .vxe-card--body-content,
       .vxe-card--body-left,
-      .vxe-card--body-right {
-        padding: var(--vxe-ui-card-padding-default);
-      }
-    }
-  }
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-    & > .vxe-card--header,
-    & > .vxe-card--footer {
-      padding: var(--vxe-ui-card-padding-medium);
-    }
-    &.is--padding {
-      & > .vxe-card--body {
-        .vxe-card--body-content,
-        .vxe-card--body-left,
-        .vxe-card--body-right {
-          padding: var(--vxe-ui-card-padding-medium);
-        }
-      }
-    }
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-    & > .vxe-card--header,
-    & > .vxe-card--footer {
-      padding: var(--vxe-ui-card-padding-small);
-    }
-    &.is--padding {
-      & > .vxe-card--body {
-        .vxe-card--body-content,
-        .vxe-card--body-left,
-        .vxe-card--body-right {
-          padding: var(--vxe-ui-card-padding-small);
-        }
-      }
-    }
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-    & > .vxe-card--header,
-    & > .vxe-card--footer {
-      padding: var(--vxe-ui-card-padding-mini);
-    }
-    &.is--padding {
-      & > .vxe-card--body {
-        .vxe-card--body-content,
-        .vxe-card--body-left,
-        .vxe-card--body-right {
-          padding: var(--vxe-ui-card-padding-mini);
-        }
+      .vxe-card--body-scrollbar-left-view,
+      .vxe-card--body-right,
+      .vxe-card--body-scrollbar-right-view,
+      .vxe-card--body-content,
+      .vxe-card--body-scrollbar-content-view {
+        padding: var(--vxe-ui-card-current-padding);
       }
     }
   }
-}
+}

package/styles/components/list.scss

@@ -287,3 +287,54 @@
   padding-right: var(--vxe-ui-list-current-padding);
   @include baseMixin.createRadioIcon();
 }
+
+// 滚动条
+.vxe-list {
+  & > .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;
+    }
+  }
+}
+
+.vxe-list {
+  &.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);
+        }
+      }
+    }
+  }
+}

package/styles/components/scrollbar.scss

@@ -1,7 +1,6 @@
 @use '../helpers/baseMixin.scss';
 
 .vxe-scrollbar {
-  width: 100%;
   position: relative;
   &.is--virtual {
     & > .vxe-scrollbar--view {
@@ -50,6 +49,9 @@
       background-color: var(--vxe-ui-scrollbar-thumb-active-background-color);
     }
   }
+}
+
+.vxe-scrollbar {
   &.ov-x--hidden {
     & > .vxe-scrollbar--view {
       overflow-x: hidden;
@@ -74,6 +76,7 @@
   display: none;
   position: absolute;
   background-color: var(--vxe-ui-scrollbar-track-background-color);
+  overflow: hidden;
   user-select: none;
 }
 .vxe-scrollbar {
@@ -152,17 +155,21 @@
 
 .vxe-scrollbar {
   &.is--padding {
-    &.sx-pos--top {
-      padding-top: var(--vxe-ui-scrollbar-x-height);
-    }
-    &.sx-pos--bottom {
-      padding-bottom: var(--vxe-ui-scrollbar-x-height);
-    }
-    &.sy-pos--left {
-      padding-left: var(--vxe-ui-scrollbar-y-width);
+    &.overflow-x {
+      &.sx-pos--top {
+        padding-top: var(--vxe-ui-scrollbar-x-height);
+      }
+      &.sx-pos--bottom {
+        padding-bottom: var(--vxe-ui-scrollbar-x-height);
+      }
     }
-    &.sy-pos--right {
-      padding-right: var(--vxe-ui-scrollbar-y-width);
+    &.overflow-y {
+      &.sy-pos--left {
+        padding-left: var(--vxe-ui-scrollbar-y-width);
+      }
+      &.sy-pos--right {
+        padding-right: var(--vxe-ui-scrollbar-y-width);
+      }
     }
   }
 }

package/styles/components/tabs.scss

@@ -470,7 +470,8 @@ $scrollbarOffsetSize: 20px;
   overflow: auto;
 }
 
-.vxe-tabs-pane--item {
+.vxe-tabs-pane--item,
+.vxe-tabs-pane--scrollbar-item {
   display: none;
   height: 100%;
   overflow: auto;

package/types/components/card.d.ts

@@ -1,4 +1,5 @@
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -25,6 +26,8 @@ export namespace VxeCardPropTypes {
   export type Shadow = boolean
   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 type VxeCardProps = {
@@ -37,6 +40,14 @@ export type VxeCardProps = {
   shadow?: VxeCardPropTypes.Shadow
   padding?: VxeCardPropTypes.Padding
   size?: VxeCardPropTypes.Size
+  /**
+   * 使用虚拟滚动条
+   */
+  useScrollbar?: VxeCardPropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
+  scrollbarConfig?: VxeCardPropTypes.ScrollbarConfig
 }
 
 export interface CardPrivateComputed {

package/types/components/grid.d.ts

@@ -659,13 +659,50 @@ export interface GridMethods<D = any> {
 export interface VxeGridMethods<D = any> extends GridMethods<D>, Omit<TableMethods<D>, 'dispatchEvent'> { }
 
 export interface GridPrivateMethods<D = any> {
+  /**
+   * 内部方法
+   * @private
+   */
   callSlot<T = any>(slotFunc: NormalizedScopedSlot | ((params: T) => VxeComponentSlotType | VxeComponentSlotType[]) | string | null, params: T, h: CreateElement): VxeComponentSlotType[]
+  /**
+   * 内部方法
+   * @private
+   */
   extendTableMethods<T>(methodKeys: T[]): any
+  /**
+   * 内部方法
+   * @private
+   */
   triggerToolbarCommitEvent(params: VxeToolbarPropTypes.ButtonConfig | VxeToolbarPropTypes.ToolConfig, evnt: Event): Promise<any>
+  /**
+   * 内部方法
+   * @private
+   */
   triggerToolbarBtnEvent(button: VxeToolbarPropTypes.ButtonConfig, evnt: Event): void
+  /**
+   * 内部方法
+   * @private
+   */
   triggerToolbarTolEvent(button: VxeToolbarPropTypes.ToolConfig, evnt: Event): void
+  /**
+   * 内部方法
+   * @private
+   */
   triggerZoomEvent(evnt: Event): void
+  /**
+   * 内部方法
+   * @private
+   */
+  getParentElem(): HTMLElement | null
+  /**
+   * 内部方法
+   * @private
+   */
   getParentHeight(): number
+  /**
+   * 内部方法
+   * @private
+   */
   getExcludeHeight(): number
 }
 export interface VxeGridPrivateMethods<D = any> extends GridPrivateMethods<D> { }

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

@@ -30,7 +30,7 @@ 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, 'native' | 'yConfig' | 'padding' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {}
 }
 
 export interface VxeLayoutAsideProps {
@@ -41,7 +41,13 @@ export interface VxeLayoutAsideProps {
   padding?: VxeLayoutAsidePropTypes.Padding
   size?: VxeLayoutAsidePropTypes.Size
   collapseConfig?: VxeLayoutAsidePropTypes.CollapseConfig
+  /**
+   * 使用虚拟滚动条
+   */
   useScrollbar?: VxeLayoutAsidePropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
   scrollbarConfig?: VxeLayoutAsidePropTypes.ScrollbarConfig
 }
 

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

@@ -25,7 +25,7 @@ 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, 'native' | 'xConfig' | 'yConfig' | 'padding' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {}
 }
 export interface VxeLayoutBodyProps {
   size?: VxeLayoutBodyPropTypes.Size
@@ -33,7 +33,13 @@ export interface VxeLayoutBodyProps {
   padding?: VxeLayoutBodyPropTypes.Padding
   showBacktop?: VxeLayoutBodyPropTypes.ShowBacktop
   backtopConfig?: VxeLayoutBodyPropTypes.BacktopConfig
+  /**
+   * 使用虚拟滚动条
+   */
   useScrollbar?: VxeLayoutBodyPropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
   scrollbarConfig?: VxeLayoutBodyPropTypes.ScrollbarConfig
 }
 

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,8 @@ export namespace VxeListPropTypes {
      */
     enabled?: boolean
   }
+  export type UseScrollbar = boolean
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding'> {}
 }
 
 export interface VxeListProps<D = any> {
@@ -240,6 +243,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 +279,10 @@ export interface ListReactData {
   isAllChecked: boolean
   isAllIndeterminate: boolean
 
+  // 滚动条
+  yThumbHeight: number
+  xThumbWidth: number
+
   insertRowFlag: number
   removeRowFlag: number
 
@@ -277,13 +292,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/menu.d.ts

@@ -103,7 +103,13 @@ export interface VxeMenuProps {
   expandKeys?: VxeMenuPropTypes.ExpandKeys
   options?: VxeMenuPropTypes.Options
   menuConfig?: VxeMenuPropTypes.MenuConfig
+  /**
+   * 使用虚拟滚动条
+   */
   useScrollbar?: VxeMenuPropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
   scrollbarConfig?: VxeMenuPropTypes.ScrollbarConfig
   /**
    * 挂载到指定元素下

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

@@ -3,7 +3,7 @@ import { NormalizedScopedSlot } from 'vue/types/vnode'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, ValueOf, VxeGlobalConfig, VxeComponentStyleType, VxeComponentSlotType, VxeGlobalRendererOptions } from '@vxe-ui/core'
 import { VxeColumnPropTypes, VxeColumnProps, VxeColumnSlotTypes } from './column'
 import { VxeTableExtendCellAreaDefines, VxeTableExtendCellAreaEmits } from './table-plugins'
-import { VxeGridConstructor } from './grid'
+import { VxeGridConstructor, VxeGridPrivateMethods } from './grid'
 import { VxeTooltipPropTypes } from './tooltip'
 import { VxeModalConstructor, VxeModalPrivateMethods, VxeModalPropTypes } from './modal'
 import { VxeDrawerPropTypes } from './drawer'
@@ -30,7 +30,7 @@ export type VxeTableInstance<D = any> = DefineVxeComponentInstance<{
    */
   internalData: TableInternalData<D>
   $xeParentTable: (VxeTableConstructor<D> & VxeTablePrivateMethods) | null | undefined
-  $xeGrid: VxeGridConstructor<D> | null | undefined
+  $xeGrid: (VxeGridConstructor<D> & VxeGridPrivateMethods)| null | undefined
   $xeGantt: VxeTableDefines.InjectGanttType | null | undefined
   $xeTabs: (VxeTabsConstructor & VxeTabsPrivateMethods) | null
   $xeModal: (VxeModalConstructor & VxeModalPrivateMethods) | null
@@ -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
@@ -2992,6 +3004,10 @@ export namespace VxeTablePropTypes {
      * 导入参数
      */
   export interface ImportConfig<D = any> {
+    /**
+     * 是否启用，支持局部/全局启用
+     */
+    enabled?: boolean
     /**
      * 内置属性
      * @private
@@ -3300,6 +3316,10 @@ export namespace VxeTablePropTypes {
    * 导出参数
    */
   export interface ExportConfig<D = any> extends ExportAndPrintConfig<D> {
+    /**
+     * 是否启用，支持局部/全局启用
+     */
+    enabled?: boolean
     // 内置属性
     _typeMaps?: Record<string, number>
     /**
@@ -3384,6 +3404,10 @@ export namespace VxeTablePropTypes {
    * 打印参数
    */
   export interface PrintConfig<D = any> extends ExportAndPrintConfig<D> {
+    /**
+     * 是否启用，支持局部/全局启用
+     */
+    enabled?: boolean
     /**
      * 列宽计算模式，支持默认default，等比例scale，自适应auto
      */
@@ -5530,12 +5554,11 @@ export interface TablePrivateMethods<D = any> {
    * @private
    */
   callSlot<T>(slotFunc: NormalizedScopedSlot | ((params: T) => VxeComponentSlotType | VxeComponentSlotType[]) | string | null, params: T, h: CreateElement): VxeComponentSlotType[]
-
   /**
    * 内部方法
    * @private
    */
-  getParentElem(): Element | null
+  getParentElem(): HTMLElement | null
   /**
    * 内部方法
    * @private

package/types/components/tabs.d.ts

@@ -1,5 +1,6 @@
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
 import { VxeTabPaneProps, VxeTabPaneDefines, VxeTabPanePropTypes } from './tab-pane'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -105,6 +106,8 @@ export namespace VxeTabsPropTypes {
       option: Omit<VxeTabPaneProps, 'slots'>
     }) => boolean
   }
+  export type UseScrollbar = boolean
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'native' | 'xConfig' | 'yConfig' | 'padding' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {}
 }
 
 export type VxeTabsProps = {
@@ -131,6 +134,14 @@ export type VxeTabsProps = {
    * 刷新配置项
    */
   refreshConfig?: VxeTabsPropTypes.RefreshConfig
+  /**
+   * 使用虚拟滚动条
+   */
+  useScrollbar?: VxeTabsPropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
+  scrollbarConfig?: VxeTabsPropTypes.ScrollbarConfig
 
   /**
    * 请使用 closeConfig.beforeMethod