vxe-pc-ui 4.20.34 → 4.20.35

package/styles/components/steps.scss

@@ -0,0 +1,354 @@
+// 局部变量
+.vxe-steps {
+  --vxe-ui-steps-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-steps-current-padding: var(--vxe-ui-form-item-padding-default);
+
+  &.size--xlarge {
+    --vxe-ui-steps-current-font-size: var(--vxe-ui-font-size-xlarge);
+    --vxe-ui-steps-current-padding: var(--vxe-ui-form-item-padding-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-steps-current-font-size: var(--vxe-ui-font-size-large);
+    --vxe-ui-steps-current-padding: var(--vxe-ui-form-item-padding-large);
+  }
+  &.size--medium {
+    --vxe-ui-steps-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-steps-current-padding: var(--vxe-ui-form-item-padding-medium);
+  }
+  &.size--small {
+    --vxe-ui-steps-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-steps-current-padding: var(--vxe-ui-form-item-padding-small);
+  }
+  &.size--mini {
+    --vxe-ui-steps-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-steps-current-padding: var(--vxe-ui-form-item-padding-mini);
+  }
+}
+
+.vxe-steps {
+  --vxe-ui-steps-current-icon-size: var(--vxe-ui-steps-icon-dot-size);
+  &.is--number {
+    --vxe-ui-steps-current-icon-size: var(--vxe-ui-steps-icon-num-size);
+  }
+}
+
+.vxe-steps {
+  display: flex;
+  flex-direction: column;
+  padding: var(--vxe-ui-steps-current-padding) 0;
+  font-size: var(--vxe-ui-steps-current-font-size);
+  color: var(--vxe-ui-font-color);
+
+  .vxe-steps--body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .vxe-steps--item {
+    position: relative;
+    display: flex;
+    padding-bottom: calc(var(--vxe-ui-steps-current-icon-size) + 0.5em);
+    &:last-child {
+      padding-bottom: 0;
+    }
+    &.is--last {
+      .vxe-steps--item-line {
+        display: none;
+      }
+    }
+  }
+
+  // ---- 连线 ----
+  .vxe-steps--item-line {
+    position: absolute;
+    left: calc(var(--vxe-ui-steps-current-icon-size) / 2 - var(--vxe-ui-steps-line-width) / 2);
+    top: var(--vxe-ui-steps-current-icon-size);
+    bottom: 0;
+    width: var(--vxe-ui-steps-line-width);
+    background-color: var(--vxe-ui-base-border-color);
+  }
+
+  // ---- 图标容器 ----
+  .vxe-steps--item-icon {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--vxe-ui-steps-current-icon-size);
+    height: var(--vxe-ui-steps-current-icon-size);
+    margin-right: 0.75em;
+  }
+
+  // 小圆点（默认空心，背景用布局色以遮挡连线穿过）
+  .vxe-steps--item-icon-dot {
+    width: var(--vxe-ui-steps-icon-dot-size);
+    height: var(--vxe-ui-steps-icon-dot-size);
+    border: var(--vxe-ui-steps-line-width) solid currentColor;
+    border-radius: 50%;
+    background-color: var(--vxe-ui-layout-background-color);
+    box-sizing: border-box;
+  }
+
+  // 序号（圆环）
+  .vxe-steps--item-icon-num {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--vxe-ui-steps-icon-num-size);
+    height: var(--vxe-ui-steps-icon-num-size);
+    border-radius: 50%;
+    border: var(--vxe-ui-steps-line-width) solid currentColor;
+    background-color: var(--vxe-ui-layout-background-color);
+    box-sizing: border-box;
+    font-size: 0.875em;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  // 状态图标
+  .vxe-steps--item-icon-status {
+    line-height: 1;
+    background-color: var(--vxe-ui-layout-background-color);
+    i {
+      font-size: var(--vxe-ui-steps-icon-num-size);
+    }
+  }
+
+  .vxe-steps--item-wrapper {
+    flex: 1;
+    min-width: 0;
+    padding-top: 0.125em;
+  }
+  .vxe-steps--item-title {
+    font-weight: 600;
+    line-height: 1.4;
+  }
+  .vxe-steps--item-content {
+    margin-top: 0.25em;
+    line-height: 1.5;
+    word-break: break-word;
+    color: var(--vxe-ui-font-lighten-color);
+  }
+
+  // ---- 横向 ----
+  &.is--horizontal {
+    .vxe-steps--body {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+    .vxe-steps--item {
+      --vxe-ui-steps-item-padding-x: calc(var(--vxe-ui-steps-current-icon-size) + 0.5em);
+      flex: 1;
+      flex-direction: column;
+      align-items: center;
+      padding-bottom: 0;
+      padding-right: var(--vxe-ui-steps-item-padding-x);
+      text-align: center;
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+    // 连线
+    .vxe-steps--item-line {
+      left: calc(50% - var(--vxe-ui-steps-item-padding-x) / 2);
+      right: calc(-50% + var(--vxe-ui-steps-item-padding-x) / 2);
+      top: calc(var(--vxe-ui-steps-current-icon-size) / 2 - var(--vxe-ui-steps-line-width) / 2);
+      bottom: auto;
+      width: auto;
+      height: var(--vxe-ui-steps-line-width);
+    }
+    .vxe-steps--item-icon {
+      margin-right: 0;
+      margin-bottom: 0.5em;
+    }
+    .vxe-steps--item-wrapper {
+      width: 100%;
+      padding-top: 0;
+    }
+    .vxe-steps--item-content {
+      margin-top: 0.125em;
+    }
+  }
+}
+
+// 序号 / 圆点尺寸切换
+.vxe-steps--item {
+  color: var(--vxe-ui-steps-status-default-color);
+  &.status--finish {
+    .vxe-steps--item-icon-num {
+      color: var(--vxe-ui-steps-status-finish-color);
+      border-color: var(--vxe-ui-steps-status-finish-color);
+    }
+    .vxe-steps--item-title {
+      color: var(--vxe-ui-steps-status-finish-color);
+    }
+    .vxe-steps--item-icon-status {
+      color: var(--vxe-ui-steps-status-finish-color);
+    }
+  }
+  // error：小圆点空心危险色
+  &.status--error {
+    .vxe-steps--item-icon-num {
+      color: var(--vxe-ui-steps-status-error-color);
+      border-color: var(--vxe-ui-steps-status-error-color);
+    }
+    .vxe-steps--item-title {
+      color: var(--vxe-ui-steps-status-error-color);
+    }
+    .vxe-steps--item-icon-status {
+      color: var(--vxe-ui-steps-status-error-color);
+    }
+  }
+  &.status--process {
+    .vxe-steps--item-icon-dot {
+      background-color: var(--vxe-ui-steps-status-process-color);
+    }
+  }
+
+  &.is--finish {
+    &.status--finish {
+      .vxe-steps--item-icon-num {
+        color: var(--vxe-ui-steps-status-finish-color);
+      }
+      .vxe-steps--item-icon-status {
+        color: var(--vxe-ui-steps-status-finish-color);
+      }
+      .vxe-steps--item-icon-dot {
+        border-color: var(--vxe-ui-steps-status-finish-color);
+      }
+    }
+    &.status--error {
+      .vxe-steps--item-icon-num {
+        color: var(--vxe-ui-steps-status-error-color);
+      }
+      .vxe-steps--item-icon-status {
+        color: var(--vxe-ui-steps-status-error-color);
+      }
+      .vxe-steps--item-icon-dot {
+        border-color: var(--vxe-ui-steps-status-error-color);
+      }
+    }
+    .vxe-steps--item-icon-num {
+      color: var(--vxe-ui-font-primary-color);
+    }
+    .vxe-steps--item-icon-dot {
+      border-color: var(--vxe-ui-font-primary-color);
+    } 
+    .vxe-steps--item-line {
+      background-color: var(--vxe-ui-font-primary-color);
+    }
+    .vxe-steps--item-icon-status {
+      color: var(--vxe-ui-font-primary-color);
+    }
+  }
+
+  // current：小圆点实心
+  &.is--current {
+    &.status--finish {
+      .vxe-steps--item-icon-num {
+        background-color: var(--vxe-ui-steps-status-finish-color);
+        color: var(--vxe-ui-layout-background-color);
+        border-color: var(--vxe-ui-steps-status-finish-color);
+      }
+      .vxe-steps--item-title {
+        color: var(--vxe-ui-steps-status-finish-color);
+      }
+      .vxe-steps--item-icon-status {
+        color: var(--vxe-ui-steps-status-finish-color);
+      }
+      .vxe-steps--item-icon-dot {
+        border-color: var(--vxe-ui-steps-status-finish-color);
+        background-color: var(--vxe-ui-steps-status-finish-color);
+      }
+    }
+    &.status--error {
+      .vxe-steps--item-icon-num {
+        background-color: var(--vxe-ui-steps-status-error-color);
+        color: var(--vxe-ui-layout-background-color);
+        border-color: var(--vxe-ui-steps-status-error-color);
+      }
+      .vxe-steps--item-title {
+        color: var(--vxe-ui-steps-status-error-color);
+      }
+      .vxe-steps--item-icon-status {
+        color: var(--vxe-ui-steps-status-error-color);
+      }
+      .vxe-steps--item-icon-dot {
+        border-color: var(--vxe-ui-steps-status-error-color);
+        background-color: var(--vxe-ui-steps-status-error-color);
+      }
+    }
+    .vxe-steps--item-icon-dot {
+      border-color: var(--vxe-ui-font-primary-color);
+      background-color: var(--vxe-ui-font-primary-color);
+    }
+    .vxe-steps--item-icon-num {
+      background-color: var(--vxe-ui-font-primary-color);
+      color: var(--vxe-ui-layout-background-color);
+      border-color: var(--vxe-ui-font-primary-color);
+    }
+    .vxe-steps--item-title {
+      color: var(--vxe-ui-font-primary-color);
+      font-weight: 700;
+    }
+  }
+}
+
+// 分隔符节点
+.vxe-steps--item-separator {
+  display: flex;
+  align-items: center;
+  flex: none;
+  margin: 0 0.5em;
+  color: var(--vxe-ui-font-placeholder-color);
+  white-space: nowrap;
+}
+
+// 简单类型
+.vxe-steps {
+  &.is--simple {
+    .vxe-steps--item-icon,
+    .vxe-steps--item-line,
+    .vxe-steps--item-content {
+      display: none;
+    }
+    .vxe-steps--item {
+      padding-bottom: 0;
+    }
+    .vxe-steps--item-wrapper {
+      padding-top: 0;
+    }
+
+    &.is--horizontal {
+      .vxe-steps--body {
+        flex-wrap: wrap;
+        align-items: center;
+      }
+      .vxe-steps--item {
+        flex: none;
+        flex-direction: row;
+        align-items: center;
+        padding-right: 0;
+        text-align: left;
+      }
+      .vxe-steps--item-wrapper {
+        width: auto;
+      }
+    }
+
+    &.is--vertical {
+      .vxe-steps--item {
+        padding-bottom: 0.5em;
+        &:last-child {
+          padding-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+.vxe-steps--slots {
+  display: none;
+}

package/styles/theme/base.scss

@@ -333,4 +333,13 @@
   --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);
+
+  /*steps*/
+  --vxe-ui-steps-line-width: 0.125em;
+  --vxe-ui-steps-icon-dot-size: 0.6em;
+  --vxe-ui-steps-icon-num-size: 1.5em;
+  --vxe-ui-steps-status-default-color: var(--vxe-ui-font-placeholder-color);
+  --vxe-ui-steps-status-process-color: var(--vxe-ui-font-primary-color);
+  --vxe-ui-steps-status-finish-color: var(--vxe-ui-status-success-color);
+  --vxe-ui-steps-status-error-color: var(--vxe-ui-status-error-color);
 }

package/types/all.d.ts

@@ -77,6 +77,7 @@ import VxeSlider from './components/slider'
 import VxeSpace from './components/space'
 import VxeRate from './components/rate'
 import VxeSteps from './components/steps'
+import VxeStepItem from './components/step-item'
 import VxeSwitch from './components/switch'
 import VxeTabPane from './components/tab-pane'
 import VxeTableSelect from './components/table-select'
@@ -354,6 +355,7 @@ interface UIComponents {
   VxeSlider: typeof VxeSlider
   VxeSpace: typeof VxeSpace
   VxeSteps: typeof VxeSteps
+  VxeStepItem: typeof VxeStepItem
   VxeSwitch: typeof VxeSwitch
   VxeTabPane: typeof VxeTabPane
   VxeTableSelect: typeof VxeTableSelect
@@ -531,6 +533,7 @@ export * from './components/split-pane'
 export * from './components/slider'
 export * from './components/space'
 export * from './components/steps'
+export * from './components/step-item'
 export * from './components/switch'
 export * from './components/tab-pane'
 export * from './components/table-select'

package/types/components/gantt.d.ts

@@ -337,9 +337,7 @@ export namespace VxeGanttPropTypes {
     /**
      * 任务条样式
      */
-    barStyle?:
-      | VxeGanttDefines.DefaultBarStyleConfig
-      | ((params: { source: string; type: string; scaleType: VxeGanttDefines.ColumnScaleType; $gantt: VxeGanttConstructor<D>; row: D; rowIndex: number; $rowIndex: number; _rowIndex: number }) => void | null | undefined | VxeGanttDefines.DefaultBarStyleConfig)
+    barStyle?: VxeGanttDefines.DefaultBarStyleConfig | ((params: { source: string; type: string; scaleType: VxeGanttDefines.ColumnScaleType; $gantt: VxeGanttConstructor<D>; row: D; rowIndex: number; $rowIndex: number; _rowIndex: number }) => void | null | undefined | VxeGanttDefines.DefaultBarStyleConfig)
     /**
      * 是否启用拖拽移动日期
      */

package/types/components/select.d.ts

@@ -1,17 +1,5 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import {
-  DefineVxeComponentApp,
-  DefineVxeComponentOptions,
-  DefineVxeComponentInstance,
-  VxeComponentBaseOptions,
-  VxeComponentEventParams,
-  VxeComponentSizeType,
-  VxeComponentStyleType,
-  ValueOf,
-  VxeComponentIsVScrollbar,
-  VxeUseInitVScrollbarReactData,
-  VxeUseInitVScrollbarInternalData
-} from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, VxeComponentSizeType, VxeComponentStyleType, ValueOf, VxeComponentIsVScrollbar, VxeUseInitVScrollbarReactData, VxeUseInitVScrollbarInternalData } from '@vxe-ui/core'
 import { VxeOptgroupProps } from './optgroup'
 import { VxeOptionProps, VxeOptionPropTypes } from './option'
 import { VxeScrollbarProps } from './scrollbar'

package/types/components/step-item.d.ts

@@ -0,0 +1,72 @@
+import { RenderFunction, SetupContext, Ref } from 'vue'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams } from '@vxe-ui/core'
+
+/* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
+
+export declare const VxeStepItem: DefineVxeComponentApp<VxeStepItemProps, VxeStepItemEventProps, VxeStepItemSlots, VxeStepItemMethods>
+export type VxeStepItemComponent = DefineVxeComponentOptions<VxeStepItemProps, VxeStepItemEventProps>
+
+export type VxeStepItemInstance = DefineVxeComponentInstance<VxeStepItemProps, VxeStepItemConstructor>
+
+export interface VxeStepItemConstructor extends VxeComponentBaseOptions, VxeStepItemMethods {
+  props: VxeStepItemProps
+  context: SetupContext<VxeStepItemEmits>
+  getRefMaps(): StepItemPrivateRef
+  getComputeMaps(): VxeStepItemPrivateComputed
+  renderVN: RenderFunction
+}
+
+export interface StepItemPrivateRef {
+  refElem: Ref<HTMLDivElement | undefined>
+}
+export interface VxeStepItemPrivateRef extends StepItemPrivateRef {}
+
+export namespace VxeStepItemPropTypes {
+  export type Title = string | number
+  export type Content = string | number
+  export type Status = 'default' | 'process' | 'finish' | 'error'
+}
+
+export interface VxeStepItemProps {
+  title?: VxeStepItemPropTypes.Title
+  content?: VxeStepItemPropTypes.Content
+  status?: VxeStepItemPropTypes.Status
+}
+
+export interface StepItemPrivateComputed {}
+export interface VxeStepItemPrivateComputed extends StepItemPrivateComputed {}
+
+export interface StepItemMethods {}
+export interface VxeStepItemMethods extends StepItemMethods {}
+
+export interface StepItemPrivateMethods {}
+export interface VxeStepItemPrivateMethods extends StepItemPrivateMethods {}
+
+export type VxeStepItemEmits = []
+
+export namespace VxeStepItemDefines {
+  export interface StepItemEventParams extends VxeComponentEventParams {
+    $stepItem: VxeStepItemConstructor
+  }
+}
+
+export type VxeStepItemEventProps = {}
+
+export interface VxeStepItemListeners {}
+
+export namespace VxeStepItemSlotTypes {
+  export interface DefaultSlotParams {
+    item: any
+  }
+  export interface TitleSlotParams {
+    item: any
+  }
+}
+
+export interface VxeStepItemSlots {
+  default?: (params: VxeStepItemSlotTypes.DefaultSlotParams) => any
+  title?: (params: VxeStepItemSlotTypes.TitleSlotParams) => any
+}
+
+export const StepItem: typeof VxeStepItem
+export default VxeStepItem

package/types/components/steps.d.ts

@@ -1,5 +1,6 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, ValueOf, DefineVxeComponentInstance, VxeComponentSizeType, VxeComponentBaseOptions, VxeComponentEventParams } from '@vxe-ui/core'
+import { VxeStepItemPropTypes } from './step-item'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -12,6 +13,7 @@ export interface VxeStepsConstructor extends VxeComponentBaseOptions, VxeStepsMe
   props: VxeStepsProps
   context: SetupContext<VxeStepsEmits>
   reactData: StepsReactData
+  internalData: StepsInternalData
   getRefMaps(): StepsPrivateRef
   getComputeMaps(): StepsPrivateComputed
   renderVN: RenderFunction
@@ -22,24 +24,72 @@ export interface StepsPrivateRef {
 }
 export interface VxeStepsPrivateRef extends StepsPrivateRef {}
 
-export namespace VxeStepsPropTypes {}
+export namespace VxeStepsPropTypes {
+  export type Size = VxeComponentSizeType
+  export type ModelValue = string | number | null
+  export type Type = '' | 'simple' | string
+  export type Vertical = boolean
+  export interface OptionProps {
+    title?: string
+    content?: string
+    status?: string
+  }
+  type Option = Record<string, any>
+  export type Options = Option[]
+
+  export type Separator = string | number
+  export type ShowNumber = boolean
+  export type ShowIcon = boolean
+}
 
-export interface VxeStepsProps {}
+export interface VxeStepsProps {
+  size?: VxeStepsPropTypes.Size
+  modelValue?: VxeStepsPropTypes.ModelValue
+  options?: VxeStepsPropTypes.Options
+  type?: VxeStepsPropTypes.Type
+  vertical?: VxeStepsPropTypes.Vertical
+  optionProps?: VxeStepsPropTypes.OptionProps
+  /**
+   * 步骤条分割符
+   */
+  separator?: VxeStepsPropTypes.Separator
+  showNumber?: VxeStepsPropTypes.ShowNumber
+  showIcon?: VxeStepsPropTypes.ShowIcon
+}
 
 export interface StepsPrivateComputed {}
 export interface VxeStepsPrivateComputed extends StepsPrivateComputed {}
 
-export interface StepsReactData {}
+export interface StepsReactData {
+  itemList: any[]
+  staticItems: VxeStepsDefines.ItemInfo[]
+  isOptConf: boolean
+}
+export interface StepsInternalData {
+  fullData: any[]
+}
 
-export interface StepsMethods {}
+export interface StepsMethods {
+  dispatchEvent(type: ValueOf<VxeStepsEmits>, params: Record<string, any>, evnt: Event | null): void
+}
 export interface VxeStepsMethods extends StepsMethods {}
 
 export interface StepsPrivateMethods {}
 export interface VxeStepsPrivateMethods extends StepsPrivateMethods {}
 
-export type VxeStepsEmits = []
+export type VxeStepsEmits = [
+  'update:modelValue'
+]
 
 export namespace VxeStepsDefines {
+  export interface ItemInfo {
+    id: string
+    title?: string | number
+    content?: string | number
+    status?: VxeStepItemPropTypes.Status
+    [key: string]: any
+  }
+
   export interface StepsEventParams extends VxeComponentEventParams {
     $steps: VxeStepsConstructor
   }
@@ -52,11 +102,20 @@ export interface VxeStepsListeners {}
 export namespace VxeStepsEvents {}
 
 export namespace VxeStepsSlotTypes {
-  export interface DefaultSlotParams {}
+  export interface TitleSlotParams {
+    item: any
+  }
+  export interface ContentSlotParams {
+    item: any
+  }
+  export interface SeparatorSlotParams {}
 }
 
 export interface VxeStepsSlots {
-  default?: (params: VxeStepsSlotTypes.DefaultSlotParams) => any
+  default?: (params: Record<string, any>) => any
+  title?: (params: VxeStepsSlotTypes.TitleSlotParams) => any
+  content?: (params: VxeStepsSlotTypes.ContentSlotParams) => any
+  separator?: (params: VxeStepsSlotTypes.SeparatorSlotParams) => any
 }
 
 export const Steps: typeof VxeSteps