vxe-pc-ui 4.18.23 → 4.19.0

package/styles/components/layout-body.scss

@@ -8,8 +8,7 @@
     padding: var(--vxe-ui-layout-padding-double);
   }
 }
-.vxe-layout-body--inner {
+.vxe-layout-body--scrollbar {
   flex-grow: 1;
-  overflow: auto;
-  outline: 0;
+  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,14 @@
     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--body {
+    flex-grow: 1;
+    overflow: hidden;
+  }
 }
 
 .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,5 +1,6 @@
 import { RenderFunction, ComputedRef, SetupContext, Ref } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentStyleType } from '@vxe-ui/core'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -35,6 +36,7 @@ export namespace VxeLayoutAsidePropTypes {
      */
     animation?: boolean
   }
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'native' | 'yConfig' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {}
 }
 
 export interface VxeLayoutAsideProps {
@@ -45,6 +47,7 @@ export interface VxeLayoutAsideProps {
   padding?: VxeLayoutAsidePropTypes.Padding
   size?: VxeLayoutAsidePropTypes.Size
   collapseConfig?: VxeLayoutAsidePropTypes.CollapseConfig
+  scrollbarConfig?: VxeLayoutAsidePropTypes.ScrollbarConfig
 }
 export interface LayoutAsidePrivateComputed {
   computeSize: ComputedRef<VxeLayoutAsidePropTypes.Size>

package/types/components/layout-body.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 { VxeBacktopProps, VxeBacktopSlotTypes } from './backtop'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -30,14 +31,15 @@ export namespace VxeLayoutBodyPropTypes {
   export type Padding = boolean
   export type ShowBacktop = boolean
   export interface BacktopConfig extends Omit<VxeBacktopProps, 'target'> {}
+  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
+  scrollbarConfig?: VxeLayoutBodyPropTypes.ScrollbarConfig
 }
 
 export interface LayoutBodyPrivateComputed {

package/types/components/menu.d.ts

@@ -2,6 +2,7 @@ import { RenderFunction, SetupContext, Ref } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentSlotType, VxeComponentStyleType, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentPermissionCodeType } from '@vxe-ui/core'
 import { VxeLinkPropTypes } from './link'
 import { VxeContextMenuPropTypes, VxeContextMenuDefines } from './context-menu'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -85,6 +86,7 @@ export namespace VxeMenuPropTypes {
     }): boolean
   }
   export type AppendTo = string | HTMLElement | ((params: {}) => string | HTMLElement)
+  export interface ScrollbarConfig extends VxeScrollbarProps {}
 }
 
 export interface VxeMenuProps {
@@ -106,6 +108,7 @@ export interface VxeMenuProps {
   expandKeys?: VxeMenuPropTypes.ExpandKeys
   options?: VxeMenuPropTypes.Options
   menuConfig?: VxeMenuPropTypes.MenuConfig
+  scrollbarConfig?: VxeMenuPropTypes.ScrollbarConfig
   /**
    * 挂载到指定元素下
    */

package/types/components/scrollbar.d.ts

@@ -24,6 +24,7 @@ export interface ScrollbarPrivateRef {
 export interface VxeScrollbarPrivateRef extends ScrollbarPrivateRef { }
 
 export namespace VxeScrollbarPropTypes {
+  export type Id = number | string
   export type Width = number | string
   export type Height = number | string
   export type MinWidth = number | string
@@ -59,12 +60,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
   /**
    * 容器宽度
    */
@@ -109,10 +116,18 @@ export interface VxeScrollbarProps {
    * 给容器附加 class
    */
   className?: VxeScrollbarPropTypes.ClassName
+  /**
+   * 给视图元素附加属性
+   */
+  viewAttrs?: VxeScrollbarPropTypes.ViewAttrs
   /**
    * 给视图元素附加 class
    */
   viewClassName?: VxeScrollbarPropTypes.ViewClassName
+  /**
+   * 给视图内元素附加 class
+   */
+  viewInnerClassName?: VxeScrollbarPropTypes.ViewInnerClassName
   /**
    * 自动监听元素的变化去重新计算样式
    */