vxe-pc-ui 4.19.7 → 4.19.8

package/packages/tabs/src/tabs.ts

@@ -7,6 +7,7 @@ import { isEnableConf } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
 import XEUtils from 'xe-utils'
 import VxeLoadingComponent from '../../loading'
+import VxeScrollbarComponent from '../../scrollbar'
 
 import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, TabsPrivateRef, VxeTabsPrivateComputed, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, TabsMethods, TabsPrivateMethods, VxeComponentStyleType } from '../../../types'
 
@@ -52,6 +53,11 @@ export default defineVxeComponent({
       type: String as PropType<VxeTabsPropTypes.Size>,
       default: () => getConfig().tabs.size || getConfig().size
     },
+    useScrollbar: {
+      type: Boolean as PropType<VxeTabsPropTypes.UseScrollbar>,
+      default: () => getConfig().tabs.useScrollbar
+    },
+    scrollbarConfig: Object as PropType<VxeTabsPropTypes.ScrollbarConfig>,
     // 已废弃
     beforeCloseMethod: Function as PropType<VxeTabsPropTypes.BeforeCloseMethod>
   },
@@ -165,6 +171,10 @@ export default defineVxeComponent({
       return $xeParentTabs ? $xeParentTabs.reactData.resizeFlag : null
     })
 
+    const computeScrollbarOpts = computed(() => {
+      return Object.assign({}, getConfig().tabs.scrollbarConfig, props.scrollbarConfig)
+    })
+
     const computeMaps: VxeTabsPrivateComputed = {
     }
 
@@ -761,17 +771,33 @@ export default defineVxeComponent({
     }
 
     const renderTabPane = (item: VxeTabPaneProps | VxeTabPaneDefines.TabConfig) => {
+      const { useScrollbar } = props
       const { initNames, activeName } = reactData
       const { name, slots } = item
       const defaultSlot = slots ? slots.default : null
-      return name && initNames.includes(name)
-        ? h('div', {
-          key: `${name}`,
-          class: ['vxe-tabs-pane--item', {
-            'is--visible': activeName === name
-          }]
-        }, defaultSlot ? callSlot(defaultSlot, { name }) : [])
-        : renderEmptyElement($xeTabs)
+      const scrollbarOpts = computeScrollbarOpts.value
+      const { viewClassName, viewInnerClassName } = scrollbarOpts
+      if (name && initNames.includes(name)) {
+        return useScrollbar
+          ? h(VxeScrollbarComponent, {
+            key: `${name}`,
+            class: ['vxe-tabs-pane--scrollbar-item', {
+              'is--visible': activeName === name
+            }],
+            ...scrollbarOpts,
+            viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? (' ' + viewClassName) : ''),
+            viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+          }, {
+            default: () => defaultSlot ? callSlot(defaultSlot, { name }) : []
+          })
+          : h('div', {
+            key: `${name}`,
+            class: ['vxe-tabs-pane--item', {
+              'is--visible': activeName === name
+            }]
+          }, defaultSlot ? callSlot(defaultSlot, { name }) : [])
+      }
+      return renderEmptyElement($xeTabs)
     }
 
     const renderTabContent = (tabList: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {

package/packages/tree/src/tree.ts

@@ -6,7 +6,7 @@ import { createComponentLog } from '../../ui/src/log'
 import { getCrossTreeDragNodeInfo } from './store'
 import XEUtils from 'xe-utils'
 import { getSlotVNs } from '../../ui/src/vn'
-import { toCssUnit, isScale, getPaddingTopBottomSize, addClass, removeClass, getTpImg, hasControlKey, getEventTargetNode } from '../../ui/src/dom'
+import { toCssUnit, isScale, getPaddingTopBottomSize, addClass, removeClass, getTpImg, hasControlKey, getEventTargetNode, hasClass } from '../../ui/src/dom'
 import { isEnableConf, enModelValue, deModelValue, getText } from '../../ui/src/utils'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
 import VxeLoadingComponent from '../../loading'
@@ -936,11 +936,15 @@ export default defineVxeComponent({
       const { rowHeight } = scrollYStore
       const el = refElem.value
       if (el && el.clientWidth && el.clientHeight) {
-        const parentEl = getParentElem()
+        let parentEl = getParentElem()
         const headerWrapperEl = refHeaderWrapperElem.value
         const footerWrapperEl = refFooterWrapperElem.value
         const headHeight = headerWrapperEl ? headerWrapperEl.clientHeight : 0
         const footHeight = footerWrapperEl ? footerWrapperEl.clientHeight : 0
+        // 如果是虚拟滚动条
+        if (parentEl && hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
+          parentEl = parentEl.parentElement
+        }
         if (parentEl) {
           const parentPaddingSize = getPaddingTopBottomSize(parentEl)
           reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight)

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/scrollbar.scss

@@ -1,7 +1,6 @@
 @use '../helpers/baseMixin.scss';
 
 .vxe-scrollbar {
-  width: 100%;
   position: relative;
   &.is--virtual {
     & > .vxe-scrollbar--view {
@@ -74,6 +73,7 @@
   display: none;
   position: absolute;
   background-color: var(--vxe-ui-scrollbar-track-background-color);
+  overflow: hidden;
   user-select: none;
 }
 .vxe-scrollbar {
@@ -152,17 +152,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,5 +1,6 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -32,6 +33,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' | 'yConfig' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {}
 }
 
 export type VxeCardProps = {
@@ -44,6 +47,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

@@ -661,13 +661,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: ((params: T) => VxeComponentSlotType | VxeComponentSlotType[]) | string | null, params: T): 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

@@ -48,7 +48,13 @@ export interface VxeLayoutAsideProps {
   padding?: VxeLayoutAsidePropTypes.Padding
   size?: VxeLayoutAsidePropTypes.Size
   collapseConfig?: VxeLayoutAsidePropTypes.CollapseConfig
+  /**
+   * 使用虚拟滚动条
+   */
   useScrollbar?: VxeLayoutAsidePropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
   scrollbarConfig?: VxeLayoutAsidePropTypes.ScrollbarConfig
 }
 export interface LayoutAsidePrivateComputed {

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

@@ -40,7 +40,13 @@ export interface VxeLayoutBodyProps {
   padding?: VxeLayoutBodyPropTypes.Padding
   showBacktop?: VxeLayoutBodyPropTypes.ShowBacktop
   backtopConfig?: VxeLayoutBodyPropTypes.BacktopConfig
+  /**
+   * 使用虚拟滚动条
+   */
   useScrollbar?: VxeLayoutBodyPropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
   scrollbarConfig?: VxeLayoutBodyPropTypes.ScrollbarConfig
 }
 

package/types/components/menu.d.ts

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

package/types/components/table.d.ts

@@ -5514,12 +5514,11 @@ export interface TablePrivateMethods<D = any> {
    * @private
    */
   callSlot<T>(slotFunc: ((params: T) => VxeComponentSlotType | VxeComponentSlotType[]) | string | null, params: T): VxeComponentSlotType[]
-
   /**
    * 内部方法
    * @private
    */
-  getParentElem(): Element | null
+  getParentElem(): HTMLElement | null
   /**
    * 内部方法
    * @private

package/types/components/tabs.d.ts

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