vxe-pc-ui 4.18.21 → 4.18.23

package/styles/components/scrollbar.scss

@@ -0,0 +1,114 @@
+@use '../helpers/baseMixin.scss';
+
+.vxe-scrollbar {
+  width: 100%;
+  position: relative;
+  &.is--virtual {
+    & > .vxe-scrollbar--view {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      overflow-x: auto;
+      overflow-y: auto;
+    }
+    & > .vxe-scrollbar--view::-webkit-scrollbar {
+      display: none;
+    }
+    &.ov-x--auto-hide {
+      &:hover {
+        & > .vxe-scrollbar--track-x {
+          opacity: 1;
+        }
+      }
+      & > .vxe-scrollbar--track-x {
+        opacity: 0;
+        @include baseMixin.createAnimationTransition(opacity, 0.8s);
+      }
+    }
+    &.ov-y--auto-hide {
+      &:hover {
+        & > .vxe-scrollbar--track-y {
+          opacity: 1;
+        }
+      }
+      & > .vxe-scrollbar--track-y {
+        opacity: 0;
+        @include baseMixin.createAnimationTransition(opacity, 0.8s);
+      }
+    }
+  }
+  &.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);
+    }
+    & > .vxe-scrollbar--view::-webkit-scrollbar-thumb {
+      border-radius: var(--vxe-ui-base-border-radius);
+      background-color: var(--vxe-ui-scrollbar-thumb-background-color);
+    }
+    & > .vxe-scrollbar--view::-webkit-scrollbar-thumb:hover {
+      background-color: var(--vxe-ui-scrollbar-thumb-hover-background-color);
+    }
+    & > .vxe-scrollbar--view::-webkit-scrollbar-thumb:active {
+      background-color: var(--vxe-ui-scrollbar-thumb-active-background-color);
+    }
+  }
+}
+
+.vxe-scrollbar--view {
+  height: 100%;
+  width: 100%;
+}
+
+.vxe-scrollbar--track-x,
+.vxe-scrollbar--track-y {
+  position: absolute;
+  background-color: var(--vxe-ui-scrollbar-track-background-color);
+  user-select: none;
+}
+
+.vxe-scrollbar--track-x {
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  height: var(--vxe-ui-scrollbar-x-height);
+}
+
+.vxe-scrollbar--track-y {
+  height: 100%;
+  right: 0;
+  top: 0;
+  width: var(--vxe-ui-scrollbar-y-width);
+}
+
+.vxe-scrollbar--thumb-y {
+  width: 100%;
+}
+.vxe-scrollbar--thumb-x {
+  height: 100%;
+}
+
+.vxe-scrollbar--thumb-x,
+.vxe-scrollbar--thumb-y {
+  border-radius: var(--vxe-ui-base-border-radius);
+  background-color: var(--vxe-ui-scrollbar-thumb-background-color);
+  &:hover {
+    background-color: var(--vxe-ui-scrollbar-thumb-hover-background-color);
+  }
+  &:active {
+    background-color: var(--vxe-ui-scrollbar-thumb-active-background-color);
+  }
+}

package/styles/components/upload.scss

@@ -412,9 +412,8 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  width: 1.8em;
-  height: 1.8em;
-  font-size: 0.8em;
+  width: 1.2em;
+  height: 1.2em;
   border-radius: 50%;
   color: #fff;
   background-color: var(--vxe-ui-status-error-color);
@@ -423,6 +422,9 @@
   &:hover {
     background-color: var(--vxe-ui-status-error-lighten-color);
   }
+  i {
+    font-size: 0.6em;
+  }
 }
 
 .vxe-upload--file-message-over-error {

package/styles/theme/base.scss

@@ -318,4 +318,9 @@
   --vxe-ui-divider-vertical-margin-small: 8px;
   --vxe-ui-divider-vertical-margin-mini: 6px;
   --vxe-ui-divider-border-width: 1px;
+
+  /*scrollbar*/
+  --vxe-ui-scrollbar-y-width: 10px;
+  --vxe-ui-scrollbar-x-height: var(--vxe-ui-scrollbar-y-width);
+  --vxe-ui-scrollbar-track-background-color: transparent;
 }

package/styles/theme/dark.scss

@@ -147,4 +147,9 @@
   /*image-preview*/
   --vxe-ui-vxe-image-preview-operation-color: rgba(0,0,0,0.7);
   --vxe-ui-vxe-image-preview-operation-background-color: rgba(255,255,255,0.4);
+
+  /*scrollbar*/
+  --vxe-ui-scrollbar-thumb-background-color: #8b8b8b;
+  --vxe-ui-scrollbar-thumb-hover-background-color: #d1d1d1;
+  --vxe-ui-scrollbar-thumb-active-background-color: #e0e0e0;
 }

package/styles/theme/light.scss

@@ -146,4 +146,9 @@
   /*image-preview*/
   --vxe-ui-vxe-image-preview-operation-color: #{light_variable.$vxe-ui-vxe-image-preview-operation-color};
   --vxe-ui-vxe-image-preview-operation-background-color: #{light_variable.$vxe-ui-vxe-image-preview-operation-background-color};
+
+  /*scrollbar*/
+  --vxe-ui-scrollbar-thumb-background-color: #{light_variable.$vxe-ui-scrollbar-thumb-background-color};
+  --vxe-ui-scrollbar-thumb-hover-background-color: #{light_variable.$vxe-ui-scrollbar-thumb-hover-background-color};
+  --vxe-ui-scrollbar-thumb-active-background-color: #{light_variable.$vxe-ui-scrollbar-thumb-active-background-color};
 }

package/styles/variable.scss

@@ -141,3 +141,8 @@ $vxe-ui-list-drag-over-background-color: rgba(255,255,200,0.3) !default;
 /*image-preview*/
 $vxe-ui-vxe-image-preview-operation-color: rgba(255,255,255,0.6) !default;
 $vxe-ui-vxe-image-preview-operation-background-color: rgba(0, 0, 0, 0.7) !default;
+
+/*scrollbar*/
+$vxe-ui-scrollbar-thumb-background-color: #8b8b8b !default;
+$vxe-ui-scrollbar-thumb-hover-background-color: #636363 !default;
+$vxe-ui-scrollbar-thumb-active-background-color: #555555 !default;

package/types/all.d.ts

@@ -66,6 +66,7 @@ import VxeRadioButton from './components/radio-button'
 import VxeRadioGroup from './components/radio-group'
 import VxeResult from './components/result'
 import VxeRow from './components/row'
+import VxeScrollbar from './components/scrollbar'
 import VxeSegmented from './components/segmented'
 import VxeSelect from './components/select'
 import VxeSplitter from './components/splitter'
@@ -343,6 +344,7 @@ interface UIComponents {
   VxeRate: typeof VxeRate
   VxeResult: typeof VxeResult
   VxeRow: typeof VxeRow
+  VxeScrollbar: typeof VxeScrollbar
   VxeSegmented: typeof VxeSegmented
   VxeSelect: typeof VxeSelect
   VxeSplitter: typeof VxeSplitter
@@ -519,6 +521,7 @@ export * from './components/radio-group'
 export * from './components/rate'
 export * from './components/result'
 export * from './components/row'
+export * from './components/scrollbar'
 export * from './components/segmented'
 export * from './components/select'
 export * from './components/splitter'

package/types/components/gantt.d.ts

@@ -36,15 +36,15 @@ export namespace VxeGanttPropTypes {
   export type Columns<D = any> = Column<D>[]
   export interface Link<D = any> extends VxeGanttDefines.LinkStyleConfig {
     /**
-     * 线类型
+     * 线类型 (0 = FinishToStart), (1 = StartToFinish), (2 = StartToStart), (3 = FinishToFinish)
      */
     type: VxeGanttDependencyType
     /**
-     * 从指定行
+     * 从指定行开始线连接
      */
     from: D | string | number
     /**
-     * 到目标行
+     * 到目标行结束线连接
      */
     to: D | string | number
   }

package/types/components/scrollbar.d.ts

@@ -0,0 +1,216 @@
+import { RenderFunction, SetupContext, Ref } from 'vue'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf } from '@vxe-ui/core'
+
+/* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
+
+export declare const VxeScrollbar: DefineVxeComponentApp<VxeScrollbarProps, VxeScrollbarEventProps, VxeScrollbarSlots, VxeScrollbarMethods>
+export type VxeScrollbarComponent = DefineVxeComponentOptions<VxeScrollbarProps, VxeScrollbarEventProps>
+
+export type VxeScrollbarInstance = DefineVxeComponentInstance<VxeScrollbarProps, VxeScrollbarConstructor>
+
+export interface VxeScrollbarConstructor extends VxeComponentBaseOptions, VxeScrollbarMethods {
+  props: VxeScrollbarProps
+  context: SetupContext<VxeScrollbarEmits>
+  reactData: ScrollbarReactData
+  internalData: ScrollbarInternalData
+  getRefMaps(): ScrollbarPrivateRef
+  getComputeMaps(): ScrollbarPrivateComputed
+  renderVN: RenderFunction
+}
+
+export interface ScrollbarPrivateRef {
+  refElem: Ref<HTMLDivElement | undefined>
+}
+export interface VxeScrollbarPrivateRef extends ScrollbarPrivateRef { }
+
+export namespace VxeScrollbarPropTypes {
+  export type Width = number | string
+  export type Height = number | string
+  export type MinWidth = number | string
+  export type MinHeight = number | string
+  export type MaxWidth = number | string
+  export type MaxHeight = number | string
+  export type Loading = boolean
+  export type Native = boolean
+  export interface XConfig {
+    height?: number | string
+    // showArrows?: boolean
+    /**
+     * 是否自动隐藏滚动条
+     */
+    autoHide?: boolean
+    visible?: 'auto' | 'hidden' | 'visible' | ''
+    /**
+     * 滚动到边界触发的阈值会触发 scroll-boundary 事件
+     */
+    threshold?: string | number
+  }
+  export interface YConfig {
+    width?: number | string
+    // showArrows?: boolean
+    /**
+     * 是否自动隐藏滚动条
+     */
+    autoHide?: boolean
+    visible?: 'auto' | 'hidden' | 'visible' | ''
+    /**
+     * 滚动到边界触发的阈值会触发 scroll-boundary 事件
+     */
+    threshold?: string | number
+  }
+  export type ClassName = string
+  export type ViewClassName = string
+  export type AutoResize = boolean
+  export type SyncResize = boolean
+}
+
+export interface VxeScrollbarProps {
+  /**
+   * 容器宽度
+   */
+  width?: VxeScrollbarPropTypes.Width
+  /**
+   * 容器最小高度
+   */
+  height?: VxeScrollbarPropTypes.Height
+  /**
+   * 容器最小宽度
+   */
+  minWidth?: VxeScrollbarPropTypes.MinWidth
+  /**
+   * 容器最大高度
+   */
+  minHeight?: VxeScrollbarPropTypes.MinHeight
+  /**
+   * 容器最大宽度
+   */
+  maxWidth?: VxeScrollbarPropTypes.MaxWidth
+  /**
+   * 容器高度
+   */
+  maxHeight?: VxeScrollbarPropTypes.MaxHeight
+  /**
+   * 是否加载中
+   */
+  loading?: VxeScrollbarPropTypes.Loading
+  /**
+   * 是否使用原生滚动条
+   */
+  native?: VxeScrollbarPropTypes.Native
+  /**
+   * 纵向滚动条宽度
+   */
+  xConfig?: VxeScrollbarPropTypes.XConfig
+  /**
+   * 横向滚动条高度
+   */
+  yConfig?: VxeScrollbarPropTypes.YConfig
+  /**
+   * 给容器附加 class
+   */
+  className?: VxeScrollbarPropTypes.ClassName
+  /**
+   * 给视图元素附加 class
+   */
+  viewClassName?: VxeScrollbarPropTypes.ViewClassName
+  /**
+   * 自动监听元素的变化去重新计算样式
+   */
+  autoResize?: VxeScrollbarPropTypes.AutoResize
+  /**
+   * 自动跟随某个属性的变化去重新计算表格，和手动调用 recalculate 方法是一样的效果（对于通过某个属性来更新内容时可能会用到）
+   */
+  syncResize?: VxeScrollbarPropTypes.SyncResize
+}
+
+export interface ScrollbarPrivateComputed {
+}
+export interface VxeScrollbarPrivateComputed extends ScrollbarPrivateComputed { }
+
+export interface ScrollbarReactData {
+  yThumbHeight: number
+  xThumbWidth: number
+}
+export interface ScrollbarInternalData {
+  resizeObserver?: ResizeObserver
+  isThumbDrag?: boolean
+  thumbDragOffset: number
+  yThumbTop: number
+  xThumbLeft: number
+  lastScrollTop: number
+  lastScrollLeft: number
+}
+
+export interface ScrollbarMethods {
+  dispatchEvent(type: ValueOf<VxeScrollbarEmits>, params: Record<string, any>, evnt: Event | null): void
+  /**
+   * 滚动到指定位置
+   */
+  scrollTo(options: ScrollToOptions): void
+  scrollTo(left: number, top: number): void
+  /**
+   * 滚动元素到可见位置
+   */
+  scrollIntoView(): void
+  /**
+   * 重新计算样式
+   * 对于某些特殊场景可能会用到，比如更新内容
+   */
+  recalculate(): Promise<void>
+}
+export interface VxeScrollbarMethods extends ScrollbarMethods { }
+
+export interface ScrollbarPrivateMethods { }
+export interface VxeScrollbarPrivateMethods extends ScrollbarPrivateMethods { }
+
+export type VxeScrollbarEmits = [
+  'scroll',
+  'scroll-boundary'
+]
+
+export namespace VxeScrollbarDefines {
+  export interface ScrollbarEventParams extends VxeComponentEventParams {
+    $scrollbar: VxeScrollbarConstructor
+  }
+
+  export interface ScrollEventParams extends ScrollbarEventParams {
+    direction: 'top' | 'bottom' | 'left' | 'right'
+    isTop: boolean
+    isBottom: boolean
+    isLeft: boolean
+    isRight: boolean
+    scrollTop: number
+    scrollLeft: number
+    clientWidth: number
+    clientHeight: number
+    scrollHeight: number
+    scrollWidth: number
+  }
+  export interface ScrollBoundaryEventParams extends ScrollEventParams {}
+}
+
+export type VxeScrollbarEventProps = {
+  onScroll?: VxeScrollbarEvents.Scroll
+  onScrolllBoundary?: VxeScrollbarEvents.ScrollBoundary
+}
+
+export interface VxeScrollbarListeners {
+  scroll?: VxeScrollbarEvents.Scroll
+  scrolllBoundary?: VxeScrollbarEvents.ScrollBoundary
+}
+
+export namespace VxeScrollbarEvents {
+  export type Scroll = (params: VxeScrollbarDefines.ScrollEventParams) => void
+  export type ScrollBoundary = (params: VxeScrollbarDefines.ScrollBoundaryEventParams) => void
+}
+
+export namespace VxeScrollbarSlotTypes {
+  export interface DefaultSlotParams {}
+}
+
+export interface VxeScrollbarSlots {
+  default?: (params: VxeScrollbarSlotTypes.DefaultSlotParams) => any
+}
+
+export const Scrollbar: typeof VxeScrollbar
+export default VxeScrollbar

package/types/ui/global-config.d.ts

@@ -65,6 +65,7 @@ import { VxeRadioGroupProps } from '../components/radio-group'
 import { VxeRateProps } from '../components/rate'
 import { VxeResultProps } from '../components/result'
 import { VxeRowProps } from '../components/row'
+import { VxeScrollbarProps } from '../components/scrollbar'
 import { VxeSegmentedProps } from '../components/segmented'
 import { VxeSelectProps } from '../components/select'
 import { VxeSplitterProps } from '../components/splitter'
@@ -180,6 +181,7 @@ declare module '@vxe-ui/core' {
     rate?: VxeRateProps
     result?: VxeResultProps
     row?: VxeRowProps
+    scrollbar?: VxeScrollbarProps
     segmented?: VxeSegmentedProps
     select?: VxeSelectProps
     splitter?: VxeSplitterProps