vxe-pc-ui 4.8.23 → 4.8.25

package/styles/components/split.scss

@@ -2,6 +2,7 @@
 @use '../helpers/baseMixin.scss';
 
 .vxe-split {
+  position: relative;
   width: 100%;
   &.is--vertical {
     & > .vxe-split-wrapper {
@@ -32,6 +33,63 @@
     } 
   }
 }
+
+.vxe-split--resizable-split-tip {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 7;
+  pointer-events: none;
+  user-select: none;
+  cursor: col-resize;
+  &.is-resize--lazy {
+    &:before {
+      content: "";
+      display: block;
+      height: 100%;
+      background-color: var(--vxe-ui-split-resizable-drag-line-color);
+    }
+  }
+  &.is--horizontal {
+    width: 1px;
+    height: 100%;
+    .vxe-split--resizable-split-number-prev {
+      right: 0;
+    }
+    .vxe-split--resizable-split-number-next {
+      left: 1px;
+    }
+  }
+  &.is--vertical {
+    width: 100%;
+    height: 1px;
+    .vxe-split--resizable-split-number-prev {
+      bottom: 0;
+    }
+    .vxe-split--resizable-split-number-next {
+      top: 1px;
+    }
+  }
+}
+.vxe-split--resizable-split-tip-number {
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+  pointer-events: none;
+}
+.vxe-split--resizable-split-number-prev,
+.vxe-split--resizable-split-number-next {
+  position: absolute;
+  padding: 0.25em 0.25em;
+  font-size: 12px;
+  border-radius: var(--vxe-ui-border-radius);
+  white-space: nowrap;
+  color: #ffffff;
+  background-color: var(--vxe-ui-split-resizable-drag-line-color);
+}
+
 .vxe-split-wrapper {
   height: 100%;
   display: flex;
@@ -65,6 +123,9 @@
 }
 .vxe-split-pane-handle-bar {
   background-color: var(--vxe-ui-split-handle-bar-background-color);
+  &:hover {
+    background-color: var(--vxe-ui-split-handle-bar-hover-background-color);
+  }
 }
 .vxe-split-pane-action-btn {
   position: absolute;
@@ -84,7 +145,8 @@
   cursor: pointer;
   @include baseMixin.createAnimationTransition(transform, 0.1s);
   &:hover {
-    background-color: var(--vxe-ui-font-primary-lighten-color);
+    color: #ffffff;
+    background-color: var(--vxe-ui-font-primary-color);
   }
   &:active {
     transform: translate(-50%, -50%) scale(0.9);
@@ -117,28 +179,42 @@
   }
   &.is--resize {
     &.is--expand {
-      &.is--horizontal {
-        & > .vxe-split-pane-handle {
-          .vxe-split-pane-handle-bar {
-            cursor: w-resize;
+      &.is-resize--immediate {
+        &.is--horizontal {
+          & > .vxe-split-pane-handle {
+            .vxe-split-pane-handle-bar {
+              cursor: w-resize;
+            }
+          }
+        }
+        &.is--vertical {
+          & > .vxe-split-pane-handle {
+            .vxe-split-pane-handle-bar {
+              cursor: n-resize;
+            }
           }
         }
-      }
-      &.is--vertical {
         & > .vxe-split-pane-handle {
-          .vxe-split-pane-handle-bar {
-            cursor: n-resize;
+          & > .vxe-split-pane-handle-bar {
+            &:active {
+              background-color: var(--vxe-ui-font-primary-color);
+            }
           }
         }
       }
-      & > .vxe-split-pane-handle {
-        & > .vxe-split-pane-handle-bar {
-          background-color: var(--vxe-ui-split-handle-bar-background-color);
-          &:hover {
-            background-color: var(--vxe-ui-font-primary-lighten-color);
+      &.is-resize--lazy {
+        &.is--horizontal {
+          & > .vxe-split-pane-handle {
+            .vxe-split-pane-handle-bar {
+              cursor: col-resize;
+            }
           }
-          &:active {
-            background-color: var(--vxe-ui-font-primary-darken-color);
+        }
+        &.is--vertical {
+          & > .vxe-split-pane-handle {
+            .vxe-split-pane-handle-bar {
+              cursor: row-resize;
+            }
           }
         }
       }

package/styles/theme/base.scss

@@ -185,4 +185,6 @@
   --vxe-ui-split-handle-bar-horizontal-height: 6.8em;
   --vxe-ui-split-handle-bar-vertical-width: var(--vxe-ui-split-handle-bar-horizontal-height);
   --vxe-ui-split-handle-bar-vertical-height: var(--vxe-ui-split-handle-bar-horizontal-width);
+  --vxe-ui-split-resizable-line-color: #D9DDDF;
+  --vxe-ui-split-resizable-drag-line-color: var(--vxe-ui-font-primary-color);
 }

package/styles/theme/dark.scss

@@ -114,4 +114,5 @@
   /*split*/
   --vxe-ui-split-handle-button-background-color: #9f9f9f;
   --vxe-ui-split-handle-bar-background-color: #444444;
+  --vxe-ui-split-handle-bar-hover-background-color: #606060;
 }

package/styles/theme/light.scss

@@ -113,4 +113,5 @@
   /*split*/
   --vxe-ui-split-handle-button-background-color: #{light_variable.$vxe-ui-split-handle-button-background-color};
   --vxe-ui-split-handle-bar-background-color: #{light_variable.$vxe-ui-split-handle-bar-background-color};
+  --vxe-ui-split-handle-bar-hover-background-color: #{light_variable.$vxe-ui-split-handle-bar-hover-background-color};
 }

package/styles/variable.scss

@@ -106,4 +106,5 @@ $vxe-ui-rate-item-color: #f7ba2a !default;
 /*split*/
 $vxe-ui-split-handle-button-background-color: #8b8b8b;
 $vxe-ui-split-handle-bar-background-color: #e2e2e3;
+$vxe-ui-split-handle-bar-hover-background-color: #d8d8d8;
 

package/types/components/gantt-module/gantt-view.d.ts

@@ -33,6 +33,8 @@ export interface GanttViewReactData {
   // 横向滚动条的高度
   scrollbarHeight: number
 
+  // 最后滚动时间戳
+  lastScrollTime: number
   lazScrollLoading: boolean
 
   scrollVMLoading: boolean
@@ -47,13 +49,15 @@ export interface GanttViewReactData {
   maxViewDate: Date | null
   tableData: any[]
   tableColumn: VxeGanttDefines.ViewColumn[]
-  headerGroups: VxeGanttDefines.HeaderColumn[]
+  headerGroups: VxeGanttDefines.GroupColumn[]
 
   viewCellWidth: number
 }
 
 export interface GanttViewInternalData {
   xeTable: (VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods) | null
+  // 渲染所有列
+  visibleColumn: VxeGanttDefines.ViewColumn[]
   startMaps: Record<string, any>
   endMaps: Record<string, any>
   chartMaps: Record<string, VxeGanttDefines.RowCacheItem>
@@ -70,17 +74,13 @@ export interface GanttViewInternalData {
     startIndex: number
     endIndex: number
   }
-  // 存放纵向 Y 虚拟滚动相关信息
-  scrollYStore: {
-    adaptive?: boolean
-    preloadSize: number
-    offsetSize: number
-    visibleSize: number
-    visibleStartIndex: number
-    visibleEndIndex: number
-    startIndex: number
-    endIndex: number
-  }
+  // 最后滚动位置
+  lastScrollLeft: number
+  lastScrollTop: number
+
+  // 刷新布局
+  rceTimeout?: undefined | number
+  rceRunTime?: undefined | number
 
   // 滚动属性
   intoRunScroll?: boolean
@@ -138,7 +138,7 @@ export interface VxeGanttViewPrivateMethods {
   /**
    * @private
    */
-  triggerFooterScrollEvent(evnt: Event): void
+  // triggerFooterScrollEvent(evnt: Event): void
   /**
    * @private
    */

package/types/components/gantt.d.ts

@@ -101,7 +101,7 @@ export namespace VxeGanttPropTypes {
 
   export interface TaskViewConfig<D = any> {
     /**
-     * 日期列头颗粒度配置
+     * 日期轴配置项
      */
     scales?: VxeGanttDefines.ColumnScaleType[] | VxeGanttDefines.ColumnScaleConfig[]
     /**
@@ -149,6 +149,25 @@ export namespace VxeGanttPropTypes {
     showCollapseTaskButton?: boolean
   }
 
+  interface BarStyleConfig {
+    /**
+     * 圆角
+     */
+    round?: boolean
+    /**
+     * 任务条的背景颜色
+     */
+    bgColor?: string
+    /**
+     * 任务条的字体颜色
+     */
+    fontColor?: string
+    /**
+     * 已完成部分任务条的背景颜色
+     */
+    completedBgColor?: string
+  }
+
   export interface TaskBarConfig<D = any> {
     /**
      * 是否显示进度条
@@ -169,24 +188,10 @@ export namespace VxeGanttPropTypes {
     /**
      * 任务条样式
      */
-    barStyle?: {
-      /**
-       * 圆角
-       */
-      round?: boolean
-      /**
-       * 任务条的背景颜色
-       */
-      bgColor?: string
-      /**
-       * 任务条的字体颜色
-       */
-      fontColor?: string
-      /**
-       * 已完成部分任务条的背景颜色
-       */
-      completedBgColor?: string
-    }
+    barStyle?: BarStyleConfig | ((params: {
+      $gantt: VxeGanttConstructor<D>
+      row: D
+    }) => BarStyleConfig)
   }
 }
 
@@ -194,16 +199,16 @@ export interface VxeGanttProps<D = any> extends Omit<VxeGridProps<D>, 'layouts'>
   layouts?: VxeGanttPropTypes.Layouts
   taskConfig?: VxeGanttPropTypes.TaskConfig
   taskViewScaleConfs?: VxeGanttPropTypes.TaskViewScaleConfs
-  taskViewConfig?: VxeGanttPropTypes.TaskViewConfig
+  taskViewConfig?: VxeGanttPropTypes.TaskViewConfig<D>
   taskSplitConfig?: VxeGanttPropTypes.TaskSplitConfig
-  taskBarConfig?: VxeGanttPropTypes.TaskBarConfig
+  taskBarConfig?: VxeGanttPropTypes.TaskBarConfig<D>
 }
 
 export interface GanttPrivateComputed<D = any> extends GridPrivateComputed<D> {
   computeTaskOpts: ComputedRef<VxeGanttPropTypes.TaskConfig>
-  computeTaskViewOpts: ComputedRef<VxeGanttPropTypes.TaskViewConfig>
+  computeTaskViewOpts: ComputedRef<VxeGanttPropTypes.TaskViewConfig<D>>
   computeTaskViewScaleMapsOpts: ComputedRef<VxeGanttPropTypes.TaskViewScaleConfs>
-  computeTaskBarOpts: ComputedRef<VxeGanttPropTypes.TaskBarConfig>
+  computeTaskBarOpts: ComputedRef<VxeGanttPropTypes.TaskBarConfig<D>>
   computeTaskSplitOpts: ComputedRef<VxeGanttPropTypes.TaskSplitConfig>
   computeTaskScaleConfs: ComputedRef<VxeGanttDefines.ColumnScaleType[] | VxeGanttDefines.ColumnScaleConfig[] | undefined>
   computeTitleField: ComputedRef<string>
@@ -276,7 +281,9 @@ export type VxeGanttEmits = [
   'task-cell-click',
   'task-cell-dblclick',
   'task-bar-click',
-  'task-bar-dblclick'
+  'task-bar-dblclick',
+  'task-view-cell-click',
+  'task-view-cell-dblclick'
 ]
 
 export namespace VxeGanttDefines {
@@ -286,12 +293,15 @@ export namespace VxeGanttDefines {
 
   export type LayoutKey = 'Form' | 'Toolbar' | 'Top' | 'Gantt' | 'Bottom' | 'Pager'
 
-  export interface HeaderColumn<D = any> {
+  export interface GroupColumn<D = any> {
     scaleItem: ColumnScaleObj
     columns: ViewColumn<D>[]
   }
 
-  export interface ViewColumn<D = any> extends VxeGanttPropTypes.Column<D> {
+  export interface ViewColumn<D = any> {
+    field: string
+    title: string
+    dateObj: VxeGanttDefines.ScaleDateObj
     childCount?: number
     children?: ViewColumn<D>[]
   }
@@ -313,12 +323,16 @@ export namespace VxeGanttDefines {
     /**
      * 标题
      */
-    titleMethod?: (params: {
-      title: string | number
-      dateObj: VxeGanttDefines.ScaleDateObj
-      scaleObj: VxeGanttDefines.ColumnScaleObj
-      $rowIndex: number
-    }) => string | number
+    titleMethod?: (params: VxeGanttSlotTypes.TaskViewCellTitleSlotParams) => string | number
+    /**
+     * 自定义插槽模板
+     */
+    slots?: {
+      /**
+       * 自定义标题
+       */
+      title?: string | ((params: VxeGanttSlotTypes.TaskViewCellTitleSlotParams) => VxeComponentSlotType | VxeComponentSlotType[])
+    }
   }
 
   export interface ScaleWeekOptions extends ScaleDefaultOptions {
@@ -333,7 +347,7 @@ export namespace VxeGanttDefines {
    */
   export type ColumnScaleType = 'second' | 'minute' | 'hour' | 'date' | 'day' | 'week' | 'month' | 'quarter' | 'year'
 
-   export interface ColumnScaleConfig {
+   export interface ColumnScaleConfig extends ScaleDefaultOptions, ScaleWeekOptions {
     type: ColumnScaleType
     align?: VxeComponentAlignType
   }
@@ -362,6 +376,12 @@ export namespace VxeGanttDefines {
   export interface TaskCellDblClickEventParams<D = any> extends TaskCellClickEventParams<D> {}
   export interface TaskBarClickEventParams<D = any> extends TaskBarClickParams<D>, GanttEventParams {}
   export interface TaskBarDblClickEventParams<D = any> extends TaskBarClickEventParams<D> {}
+
+  export interface TaskViewCellClickEventParams<D = any> extends GanttEventParams {
+    row: D
+    column: ViewColumn<D>
+  }
+  export interface TaskViewCellDblClickEventParams<D = any> extends TaskViewCellClickEventParams<D> {}
 }
 
 export interface VxeGanttEventProps<D = any> extends VxeGridEventProps<D> {
@@ -369,6 +389,8 @@ export interface VxeGanttEventProps<D = any> extends VxeGridEventProps<D> {
   onTaskCellDblClick?: VxeGanttEvents.TaskCellDblClick<D>
   onTaskBarClick?: VxeGanttEvents.TaskBarClick<D>
   onTaskBarDblClick?: VxeGanttEvents.TaskBarDblClick<D>
+  onTaskViewCellClick?: VxeGanttEvents.TaskViewCellClick<D>
+  onTaskViewCellDblClick?: VxeGanttEvents.TaskViewCellDblClick<D>
 }
 
 export interface VxeGanttListeners<D = any> extends VxeGridListeners<D> {
@@ -376,6 +398,8 @@ export interface VxeGanttListeners<D = any> extends VxeGridListeners<D> {
   taskCellDblClick?: VxeGanttEvents.TaskCellDblClick<D>
   taskBarClick?: VxeGanttEvents.TaskBarClick<D>
   taskBarDblClick?: VxeGanttEvents.TaskBarDblClick<D>
+  taskViewCellClick?: VxeGanttEvents.TaskViewCellClick<D>
+  taskViewCellDblClick?: VxeGanttEvents.TaskViewCellDblClick<D>
 }
 
 export namespace VxeGanttEvents {
@@ -383,6 +407,8 @@ export namespace VxeGanttEvents {
   export type TaskCellDblClick<D = any> = (params: VxeGanttDefines.TaskCellDblClickEventParams<D>) => void
   export type TaskBarClick<D = any> = (params: VxeGanttDefines.TaskBarClickEventParams<D>) => void
   export type TaskBarDblClick<D = any> = (params: VxeGanttDefines.TaskBarDblClickEventParams<D>) => void
+  export type TaskViewCellClick<D = any> = (params: VxeGanttDefines.TaskViewCellClickEventParams<D>) => void
+  export type TaskViewCellDblClick<D = any> = (params: VxeGanttDefines.TaskViewCellDblClickEventParams<D>) => void
 }
 
 export namespace VxeGanttSlotTypes {
@@ -393,6 +419,13 @@ export namespace VxeGanttSlotTypes {
   export interface TaskBarSlotParams<D = any> {
     row: D
   }
+
+  export interface TaskViewCellTitleSlotParams {
+    title: string | number
+    dateObj: VxeGanttDefines.ScaleDateObj
+    scaleObj: VxeGanttDefines.ColumnScaleObj
+    $rowIndex: number
+  }
 }
 
 export interface VxeGanttSlots<D = any> extends VxeGridSlots<D> {

package/types/components/split.d.ts

@@ -39,6 +39,16 @@ export namespace VxeSplitPropTypes {
     width?: string | number
     height?: string | number
   }
+  export interface ResizeConfig {
+    /**
+     * 是否实时同步渲染
+     */
+    immediate?: boolean
+    /**
+     * 是否显示拖拽提示
+     */
+    showTip?: boolean
+  }
   export interface ActionConfig {
     /**
      * 是否启用
@@ -101,6 +111,10 @@ export type VxeSplitProps = {
    * 拖动条配置项
    */
   barConfig?: VxeSplitPropTypes.BarConfig
+  /**
+   * 拖拽配置项
+   */
+  resizeConfig?: VxeSplitPropTypes.ResizeConfig
   /**
    * 折叠按钮配置项
    */