vxe-pc-ui 3.18.23 → 3.19.1

package/packages/scrollbar/src/scrollbar.ts

@@ -32,6 +32,7 @@ function createInternalData (): ScrollbarInternalData {
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeScrollbar',
   props: {
+    id: [String, Number] as PropType<VxeScrollbarPropTypes.Id>,
     width: [String, Number] as PropType<VxeScrollbarPropTypes.Width>,
     height: [String, Number] as PropType<VxeScrollbarPropTypes.Height>,
     minWidth: [String, Number] as PropType<VxeScrollbarPropTypes.MinWidth>,
@@ -45,8 +46,22 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     xConfig: Object as PropType<VxeScrollbarPropTypes.XConfig>,
     yConfig: Object as PropType<VxeScrollbarPropTypes.YConfig>,
-    className: String as PropType<VxeScrollbarPropTypes.ClassName>,
-    viewClassName: String as PropType<VxeScrollbarPropTypes.ViewClassName>,
+    className: {
+      type: String as PropType<VxeScrollbarPropTypes.ClassName>,
+      default: () => getConfig().scrollbar.className
+    },
+    viewAttrs: {
+      type: Object as PropType<VxeScrollbarPropTypes.ViewAttrs>,
+      default: () => getConfig().scrollbar.viewAttrs
+    },
+    viewClassName: {
+      type: String as PropType<VxeScrollbarPropTypes.ViewClassName>,
+      default: () => getConfig().scrollbar.viewClassName
+    },
+    viewInnerClassName: {
+      type: String as PropType<VxeScrollbarPropTypes.ViewInnerClassName>,
+      default: () => getConfig().scrollbar.viewInnerClassName
+    },
     autoResize: {
       type: Boolean as PropType<VxeScrollbarPropTypes.AutoResize>,
       default: () => getConfig().scrollbar.autoResize
@@ -105,8 +120,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
     computeWrapperClss () {
       const $xeScrollbar = this
       const props = $xeScrollbar
+      const reactData = $xeScrollbar.reactData
 
       const { native, className } = props
+      const { yThumbHeight, xThumbWidth } = reactData
       const xOpts = ($xeScrollbar as any).computeXOpts as VxeScrollbarPropTypes.XConfig
       const yOpts = ($xeScrollbar as any).computeYOpts as VxeScrollbarPropTypes.YConfig
       return domUtils.buildClass([
@@ -117,7 +134,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
         className
       ], {
         'ov-x--auto-hide': xOpts.autoHide,
-        'ov-y--auto-hide': yOpts.autoHide
+        'ov-y--auto-hide': yOpts.autoHide,
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
       })
     },
     computeViewClss () {
@@ -130,6 +149,16 @@ export default /* define-vxe-component start */ defineVxeComponent({
         viewClassName
       ])
     },
+    computeViewInnerClss () {
+      const $xeScrollbar = this
+      const props = $xeScrollbar
+
+      const { viewInnerClassName } = props
+      return domUtils.buildClass([
+        'vxe-scrollbar--view-inner',
+        viewInnerClassName
+      ])
+    },
     computeXOpts () {
       const $xeScrollbar = this
       const props = $xeScrollbar
@@ -441,37 +470,35 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeScrollbar
       const slots = $xeScrollbar.$scopedSlots
 
-      const { native, loading, autoResize } = props
+      const { id, native, loading, viewAttrs } = props
       const wrapperStyle = $xeScrollbar.computeWrapperStyle
       const wrapperClss = $xeScrollbar.computeWrapperClss
       const viewClss = $xeScrollbar.computeViewClss
+      const viewInnerClss = $xeScrollbar.computeViewInnerClss
       const xOpts = $xeScrollbar.computeXOpts
       const yOpts = $xeScrollbar.computeYOpts
       const defaultSlot = slots.default
       return h('div', {
         ref: 'refElem',
+        attrs: {
+          id: id || null
+        },
         class: wrapperClss,
         style: wrapperStyle
       }, [
         h('div', {
           ref: 'refViewElem',
           class: viewClss,
+          attrs: viewAttrs,
           on: {
             scroll: $xeScrollbar.scrollEvent
           }
         }, [
           h('div', {
+            key: 'vi',
             ref: 'refViewInnerElem',
-            class: 'vxe-scrollbar--view-inner'
-          }, autoResize
-            ? [
-                h('div', {
-                  key: 'vi',
-                  ref: 'refViewInnerElem',
-                  class: 'vxe-scrollbar--view-inner'
-                }, defaultSlot ? defaultSlot({}) : [])
-              ]
-            : defaultSlot ? defaultSlot({}) : [])
+            class: viewInnerClss
+          }, defaultSlot ? defaultSlot({}) : [])
         ]),
         native || xOpts.visible === 'hidden'
           ? renderEmptyElement($xeScrollbar)

package/packages/select/src/select.ts

@@ -6,8 +6,8 @@ import { getEventTargetNode, getPopupAppendElement, toCssUnit, updatePanelPlacem
 import { getLastZIndex, nextZIndex, getFuncText, eqEmptyValue } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
-import VxeInputComponent from '../../input/src/input'
-import VxeButtonComponent from '../../button/src/button'
+import VxeInputComponent from '../../input'
+import VxeButtonComponent from '../../button'
 
 import type { VxeSelectPropTypes, SelectInternalData, ValueOf, VxeComponentSizeType, SelectReactData, VxeSelectEmits, VxeButtonDefines, VxeInputDefines, VxeSelectDefines, VxeOptionProps, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeInputConstructor, VxeComponentSlotType, VxeComponentStyleType, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'

package/packages/table-select/src/table-select.ts

@@ -6,7 +6,7 @@ import { getEventTargetNode, updatePanelPlacement, toCssUnit, getPopupAppendElem
 import { getOnName } from '../../ui/src/vn'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
-import VxeInputComponent from '../../input/src/input'
+import VxeInputComponent from '../../input'
 
 import type { TableSelectReactData, VxeTableSelectPropTypes, TableSelectInternalData, VxeTableSelectEmits, VxeInputConstructor, VxeFormDefines, ValueOf, VxeComponentStyleType, VxeComponentSizeType, VxeModalConstructor, VxeModalMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTablePropTypes } from '../../../types/components/table'

package/packages/tabs/src/tabs.ts

@@ -6,7 +6,7 @@ import { getSlotVNs } from '../../ui/src/vn'
 import { toCssUnit, addClass, removeClass } from '../../ui/src/dom'
 import { isEnableConf } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
-import VxeLoadingComponent from '../../loading/src/loading'
+import VxeLoadingComponent from '../../loading'
 
 import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, VxeComponentSizeType, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, VxeComponentStyleType } from '../../../types'
 

package/packages/ui/index.ts

@@ -221,11 +221,16 @@ setConfig({
     digits: 2,
     controls: true
   },
-  layoutAside: {},
-  layoutBody: {
-    backtopConfig: {
+  layoutAside: {
+    scrollbarConfig: {
+      yConfig: {
+        autoHide: true
+      }
     }
   },
+  layoutBody: {
+    backtopConfig: {}
+  },
   layoutContainer: {},
   layoutFooter: {},
   layoutHeader: {},

package/packages/upload/src/upload.ts

@@ -6,7 +6,7 @@ import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
 import { initTpImg, getTpImg, getEventTargetNode, toCssUnit } from '../../ui/src/dom'
 import { readLocalFile } from './util'
-import VxeButtonComponent from '../../button/src/button'
+import VxeButtonComponent from '../../button'
 
 import type { VxeUploadDefines, VxeUploadConstructor, VxeUploadPropTypes, UploadReactData, UploadInternalData, VxeUploadEmits, VxeComponentSizeType, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, ValueOf, VxeComponentEventParams } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'

package/styles/components/layout-aside.scss

@@ -15,9 +15,14 @@
     padding: var(--vxe-ui-layout-padding-default);
   }
 }
+
 .vxe-layout-aside--inner {
   flex-grow: 1;
   overflow-y: auto;
   overflow-x: hidden;
   outline: 0;
+}
+.vxe-layout-aside--scrollbar {
+  flex-grow: 1;
+  overflow: hidden;
 }

package/styles/components/layout-body.scss

@@ -11,5 +11,8 @@
 .vxe-layout-body--inner {
   flex-grow: 1;
   overflow: auto;
-  outline: 0;
+}
+.vxe-layout-body--scrollbar {
+  flex-grow: 1;
+  overflow: hidden;
 }

package/styles/components/menu.scss

@@ -98,11 +98,12 @@
 
 .vxe-menu--collapse-wrapper {
   display: none;
+  flex-direction: column;
   position: absolute;
-  overflow: auto;
+  overflow: hidden;
   background-color: var(--vxe-ui-layout-background-color);
   &.is--collapsed {
-    display: block;
+    display: flex;
     @include baseMixin.createAnimationTransition(all, 0.25s);
   }
   &:not(.is--enter) {
@@ -117,6 +118,18 @@
     width: var(--vxe-ui-layout-aside-default-width);
     box-shadow: var(--vxe-ui-menu-collapse-wrapper-box-shadow);
   }
+  & > .vxe-menu--header,
+  & > .vxe-menu--footer {
+    flex-shrink: 0;
+  }
+  & > .vxe-menu--scrollbar-body {
+    flex-grow: 1;
+    overflow: hidden;
+  }
+  & > .vxe-menu--body {
+    flex-grow: 1;
+    overflow: auto;
+  }
 }
 
 .vxe-menu--item-link {

package/styles/components/scrollbar.scss

@@ -7,8 +7,6 @@
     & > .vxe-scrollbar--view {
       scrollbar-width: none;
       -ms-overflow-style: none;
-      overflow-x: auto;
-      overflow-y: auto;
     }
     & > .vxe-scrollbar--view::-webkit-scrollbar {
       display: none;
@@ -37,20 +35,6 @@
     }
   }
   &.is--native {
-    & > .vxe-scrollbar--view {
-      overflow-x: auto;
-      overflow-y: auto;
-    }
-    &.ov-x--hidden {
-      & > .vxe-scrollbar--view {
-        overflow-x: hidden;
-      }
-    }
-    &.ov-y--hidden {
-      & > .vxe-scrollbar--view {
-        overflow-y: hidden;
-      }
-    }
     & > .vxe-scrollbar--view::-webkit-scrollbar {
       width: var(--vxe-ui-scrollbar-y-width);
       height: var(--vxe-ui-scrollbar-x-height);
@@ -66,25 +50,47 @@
       background-color: var(--vxe-ui-scrollbar-thumb-active-background-color);
     }
   }
+  &.ov-x--hidden {
+    & > .vxe-scrollbar--view {
+      overflow-x: hidden;
+    }
+  }
+  &.ov-y--hidden {
+    & > .vxe-scrollbar--view {
+      overflow-y: hidden;
+    }
+  }
 }
 
 .vxe-scrollbar--view {
   height: 100%;
   width: 100%;
+  overflow-x: auto;
+  overflow-y: auto;
 }
 
 .vxe-scrollbar--track-x,
 .vxe-scrollbar--track-y {
+  display: none;
   position: absolute;
   background-color: var(--vxe-ui-scrollbar-track-background-color);
   user-select: none;
 }
+.vxe-scrollbar {
+  &.overflow-y {
+    & > .vxe-scrollbar--track-x,
+    & > .vxe-scrollbar--track-y {
+      display: block;
+    }
+  }
+}
 
 .vxe-scrollbar--track-x {
   width: 100%;
   bottom: 0;
   left: 0;
   height: var(--vxe-ui-scrollbar-x-height);
+  padding: var(--vxe-ui-scrollbar-track-padding) 0;
 }
 
 .vxe-scrollbar--track-y {
@@ -92,6 +98,7 @@
   right: 0;
   top: 0;
   width: var(--vxe-ui-scrollbar-y-width);
+  padding: 0 var(--vxe-ui-scrollbar-track-padding);
 }
 
 .vxe-scrollbar--thumb-y {
@@ -103,7 +110,7 @@
 
 .vxe-scrollbar--thumb-x,
 .vxe-scrollbar--thumb-y {
-  border-radius: var(--vxe-ui-base-border-radius);
+  border-radius: var(--vxe-ui-scrollbar-thumb-border-radius);
   background-color: var(--vxe-ui-scrollbar-thumb-background-color);
   &:hover {
     background-color: var(--vxe-ui-scrollbar-thumb-hover-background-color);

package/styles/components/text-ellipsis.scss

@@ -1,63 +1,34 @@
 @use "sass:map";
 @use "sass:list";
+@use '../helpers/themeStatus.scss';
 
-$btnThemeList: (
-  (
-    name: "primary",
-    textColor: var(--vxe-ui-font-primary-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-font-primary-lighten-color),
-    btnDarkenColor: var(--vxe-ui-font-primary-darken-color),
-    btnDisabledColor: var(--vxe-ui-font-primary-disabled-color)
-  ),
-  (
-    name: "success",
-    textColor: var(--vxe-ui-status-success-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-success-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-success-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-success-disabled-color)
-  ),
-  (
-    name: "info",
-    textColor: var(--vxe-ui-status-info-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-info-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-info-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-info-disabled-color)
-  ),
-  (
-    name: "warning",
-    textColor: var(--vxe-ui-status-warning-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-warning-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-warning-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-warning-disabled-color)
-  ),
-  (
-    name: "danger",
-    textColor: var(--vxe-ui-status-danger-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-danger-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-danger-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-danger-disabled-color)
-  ),
-  (
-    name: "error",
-    textColor: var(--vxe-ui-status-error-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-error-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-error-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-error-disabled-color)
-  )
-);
+// 局部变量
+.vxe-text-ellipsis {
+  --vxe-ui-text-ellipsis-current-font-size: inherit;
+  &.size--xlarge {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-large);
+  }
+  &.size--medium {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-mini);
+  }
+}
 
 .vxe-text-ellipsis {
   display: block;
   overflow: hidden;
   white-space: normal;
-  @for $index from 0 to list.length($btnThemeList) {
-    $item: list.nth($btnThemeList, $index + 1);
+  font-size: var(--vxe-ui-text-ellipsis-current-font-size);
+  @for $index from 0 to list.length(themeStatus.$btnThemeList) {
+    $item: list.nth(themeStatus.$btnThemeList, $index + 1);
     &.theme--#{map.get($item, name)} {
       color: map.get($item, textColor);
       & > .vxe-text-ellipsis--link {
@@ -117,15 +88,3 @@ $btnThemeList: (
   text-decoration: none;
   color: inherit;
 }
-
-.vxe-text-ellipsis {
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-  }
-}

package/styles/theme/base.scss

@@ -323,4 +323,6 @@
   --vxe-ui-scrollbar-y-width: 10px;
   --vxe-ui-scrollbar-x-height: var(--vxe-ui-scrollbar-y-width);
   --vxe-ui-scrollbar-track-background-color: transparent;
+  --vxe-ui-scrollbar-track-padding: 0;
+  --vxe-ui-scrollbar-thumb-border-radius: var(--vxe-ui-base-border-radius);
 }

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

@@ -1,4 +1,5 @@
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentStyleType } from '@vxe-ui/core'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -28,6 +29,8 @@ export namespace VxeLayoutAsidePropTypes {
      */
     animation?: boolean
   }
+  export type UseScrollbar = boolean
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'native' | 'yConfig' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {}
 }
 
 export interface VxeLayoutAsideProps {
@@ -38,6 +41,8 @@ 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

@@ -1,5 +1,6 @@
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
 import { VxeBacktopProps, VxeBacktopSlotTypes } from './backtop'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -23,14 +24,17 @@ export namespace VxeLayoutBodyPropTypes {
   export type Padding = boolean
   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 VxeLayoutBodyProps {
   size?: VxeLayoutBodyPropTypes.Size
   loading?: VxeLayoutBodyPropTypes.Loading
   padding?: VxeLayoutBodyPropTypes.Padding
   showBacktop?: VxeLayoutBodyPropTypes.ShowBacktop
   backtopConfig?: VxeLayoutBodyPropTypes.BacktopConfig
+  useScrollbar?: VxeLayoutBodyPropTypes.UseScrollbar
+  scrollbarConfig?: VxeLayoutBodyPropTypes.ScrollbarConfig
 }
 
 export interface LayoutBodyPrivateComputed {

package/types/components/menu.d.ts

@@ -2,6 +2,7 @@ import { CreateElement } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentStyleType, VxeComponentPermissionCodeType, VxeComponentSlotType } from '@vxe-ui/core'
 import { VxeLinkPropTypes } from './link'
 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 */
 
@@ -79,6 +80,8 @@ export namespace VxeMenuPropTypes {
     }): boolean
   }
   export type AppendTo = string | HTMLElement | ((params: {}) => string | HTMLElement)
+  export type UseScrollbar = boolean
+  export interface ScrollbarConfig extends VxeScrollbarProps {}
 }
 
 export interface VxeMenuProps {
@@ -100,6 +103,8 @@ export interface VxeMenuProps {
   expandKeys?: VxeMenuPropTypes.ExpandKeys
   options?: VxeMenuPropTypes.Options
   menuConfig?: VxeMenuPropTypes.MenuConfig
+  useScrollbar?: VxeMenuPropTypes.UseScrollbar
+  scrollbarConfig?: VxeMenuPropTypes.ScrollbarConfig
   /**
    * 挂载到指定元素下
    */

package/types/components/scrollbar.d.ts

@@ -17,6 +17,8 @@ export interface ScrollbarPrivateRef {
 export interface VxeScrollbarPrivateRef extends ScrollbarPrivateRef { }
 
 export namespace VxeScrollbarPropTypes {
+  export type Id = number | string
+  export type ViewId = number | string
   export type Width = number | string
   export type Height = number | string
   export type MinWidth = number | string
@@ -52,12 +54,18 @@ export namespace VxeScrollbarPropTypes {
     threshold?: string | number
   }
   export type ClassName = string
+  export type ViewAttrs = Record<string, any>
   export type ViewClassName = string
+  export type ViewInnerClassName = string
   export type AutoResize = boolean
   export type SyncResize = boolean
 }
 
 export interface VxeScrollbarProps {
+  /**
+   * ID
+   */
+  id?: VxeScrollbarPropTypes.Id
   /**
    * 容器宽度
    */
@@ -102,10 +110,18 @@ export interface VxeScrollbarProps {
    * 给容器附加 class
    */
   className?: VxeScrollbarPropTypes.ClassName
+  /**
+   * 给视图元素附加属性
+   */
+  viewAttrs?: VxeScrollbarPropTypes.ViewAttrs
   /**
    * 给视图元素附加 class
    */
   viewClassName?: VxeScrollbarPropTypes.ViewClassName
+  /**
+   * 给视图内元素附加 class
+   */
+  viewInnerClassName?: VxeScrollbarPropTypes.ViewInnerClassName
   /**
    * 自动监听元素的变化去重新计算样式
    */