feat(steps): 支持 separator api & 完善反转逻辑

examples/steps/steps.md

@@ -5,13 +5,13 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-current | String / Number | undefined | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。支持语法糖 `v-model` | N
-defaultCurrent | String / Number | undefined | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。非受控属性 | N
-direction | String | horizontal | 已废弃。步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N
+current | String / Number | - | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。支持语法糖 `v-model` | N
+defaultCurrent | String / Number | - | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。非受控属性 | N
 layout | String | horizontal | 步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N
 options | Array | - | 步骤条数据列表（作用和 StepItem 效果一样）。TS 类型：`Array<TdStepItemProps>` | N
-readonly | Boolean | false | 是否只读 | N
-sequence | String | positive | 步骤条顺序，纵向步骤有效（direction = horizontal）。可选项：positive/reverse | N
+readonly | Boolean | false | 只读状态 | N
+separator | String | line | 步骤条分割符。可选项：line/dashed/arrow | N
+sequence | String | positive | 步骤条顺序。可选项：positive/reverse | N
 theme | String | default | 步骤条风格。可选项：default/dot | N
 onChange | Function |  | TS 类型：`(current: string | number, previous: string | number, context?: { e?: MouseEvent }) => void`<br/>当前步骤发生变化时触发 | N
 

examples/steps/usage/index.vue

@@ -2,7 +2,7 @@
 <template>
   <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @PanelChange="onPanelChange">
     <template #steps="{ configProps }">
-      <t-steps :current="1" v-bind="configProps">
+      <t-steps :defaultCurrent="1" v-bind="configProps">
         <t-step-item title="步骤1" content="提示文字" />
         <t-step-item title="步骤2" content="提示文字" />
         <t-step-item title="步骤3" content="提示文字" />
@@ -21,7 +21,7 @@ const panelList = [{ label: 'steps', value: 'steps' }];
 
 const usageCodeMap = {
   steps:
-    '\n        <t-steps :current="1" v-bind="configProps">\n          <t-step-item title="步骤1" content="提示文字" />\n          <t-step-item title="步骤2" content="提示文字" />\n          <t-step-item title="步骤3" content="提示文字" />\n        </t-steps>\n      ',
+    '\n        <t-steps :defaultCurrent="1" v-bind="configProps">\n          <t-step-item title="步骤1" content="提示文字" />\n          <t-step-item title="步骤2" content="提示文字" />\n          <t-step-item title="步骤3" content="提示文字" />\n        </t-steps>\n      ',
 };
 const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
 

examples/steps/usage/props.json

@@ -20,6 +20,25 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "separator",
+    "type": "enum",
+    "defaultValue": "line",
+    "options": [
+      {
+        "label": "line",
+        "value": "line"
+      },
+      {
+        "label": "dashed",
+        "value": "dashed"
+      },
+      {
+        "label": "arrow",
+        "value": "arrow"
+      }
+    ]
+  },
   {
     "name": "sequence",
     "type": "enum",

script/generate-usage/config.js

@@ -132,7 +132,7 @@ module.exports = {
     panelStr: `const panelList = [{label: 'steps', value: 'steps'}];`,
     render: {
       steps: `
-        <t-steps :current="1" v-bind="configProps">
+        <t-steps :defaultCurrent="1" v-bind="configProps">
           <t-step-item title="步骤1" content="提示文字" />
           <t-step-item title="步骤2" content="提示文字" />
           <t-step-item title="步骤3" content="提示文字" />

src/steps/props.ts

@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-25 10:38:48
  * */
 
 import { TdStepsProps } from './type';
@@ -17,32 +16,36 @@ export default {
   defaultCurrent: {
     type: [String, Number] as PropType<TdStepsProps['defaultCurrent']>,
   },
-  /** 已废弃。步骤条方向，有两种：横向和纵向 */
-  direction: {
-    type: String as PropType<TdStepsProps['direction']>,
-    validator(val: TdStepsProps['direction']): boolean {
-      return ['horizontal', 'vertical'].includes(val);
-    },
-  },
   /** 步骤条方向，有两种：横向和纵向 */
   layout: {
     type: String as PropType<TdStepsProps['layout']>,
     default: 'horizontal' as TdStepsProps['layout'],
     validator(val: TdStepsProps['layout']): boolean {
+      if (!val) return true;
       return ['horizontal', 'vertical'].includes(val);
     },
   },
   /** 步骤条数据列表（作用和 StepItem 效果一样） */
   options: {
     type: Array as PropType<TdStepsProps['options']>,
   },
-  /** 是否只读 */
+  /** 只读状态 */
   readonly: Boolean,
-  /** 步骤条顺序，纵向步骤有效（direction = horizontal） */
+  /** 步骤条分割符 */
+  separator: {
+    type: String as PropType<TdStepsProps['separator']>,
+    default: 'line' as TdStepsProps['separator'],
+    validator(val: TdStepsProps['separator']): boolean {
+      if (!val) return true;
+      return ['line', 'dashed', 'arrow'].includes(val);
+    },
+  },
+  /** 步骤条顺序 */
   sequence: {
     type: String as PropType<TdStepsProps['sequence']>,
     default: 'positive' as TdStepsProps['sequence'],
     validator(val: TdStepsProps['sequence']): boolean {
+      if (!val) return true;
       return ['positive', 'reverse'].includes(val);
     },
   },
@@ -51,6 +54,7 @@ export default {
     type: String as PropType<TdStepsProps['theme']>,
     default: 'default' as TdStepsProps['theme'],
     validator(val: TdStepsProps['theme']): boolean {
+      if (!val) return true;
       return ['default', 'dot'].includes(val);
     },
   },

src/steps/step-item-props.ts

@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-12 16:59:59
  * */
 
 import { TdStepItemProps } from '../steps/type';
@@ -32,6 +31,7 @@ export default {
     type: String as PropType<TdStepItemProps['status']>,
     default: 'default' as TdStepItemProps['status'],
     validator(val: TdStepItemProps['status']): boolean {
+      if (!val) return true;
       return ['default', 'process', 'finish', 'error'].includes(val);
     },
   },

src/steps/step-item.tsx

@@ -20,6 +20,7 @@ export default mixins(getConfigReceiverMixins<StepItemType, StepsConfig>('steps'
   name: 'TStepItem',
   props: {
     ...props,
+    index: Number,
   },
   components: {
     CheckIcon,
@@ -28,11 +29,6 @@ export default mixins(getConfigReceiverMixins<StepItemType, StepsConfig>('steps'
   inject: {
     steps: { default: undefined },
   },
-  data() {
-    return {
-      index: -1,
-    };
-  },
   computed: {
     current(): string | number {
       return this.steps && this.steps.current;
@@ -47,12 +43,6 @@ export default mixins(getConfigReceiverMixins<StepItemType, StepsConfig>('steps'
       return this.status !== 'process' && !this.steps?.readonly;
     },
   },
-  mounted() {
-    this.steps.addItem(this);
-  },
-  destroyed() {
-    this.steps.removeItem(this);
-  },
   methods: {
     renderIcon() {
       let defaultIcon;
@@ -79,6 +69,7 @@ export default mixins(getConfigReceiverMixins<StepItemType, StepsConfig>('steps'
       return renderTNodeJSX(this, 'icon', defaultIcon);
     },
     onStepClick(e: MouseEvent) {
+      if (!this.canClick) return;
       const val = this.value === undefined ? this.index : this.value;
       this.steps.handleChange(val, this.current, e);
     },

src/steps/steps.tsx

@@ -17,7 +17,6 @@ export default mixins(getConfigReceiverMixins('steps')).extend({
   props: { ...props },
   data() {
     return {
-      stepChildren: [],
       indexMap: {},
     };
   },
@@ -41,33 +40,31 @@ export default mixins(getConfigReceiverMixins('steps')).extend({
   },
   computed: {
     baseClass(): ClassName {
-      if (this.direction) {
-        console.warn('TDesign Steps Warn: `direction` is going to be deprecated. please use `layout` instead. ');
-      }
-      const layout = this.layout || this.direction || 'horizontal';
       return [
         name,
-        `${name}--${layout}`,
+        `${name}--${this.layout}`,
+        `${name}--${this.sequence}`,
         `${name}--${this.handleTheme()}-anchor`,
-        {
-          [`${name}--${this.sequence}`]: layout === 'vertical',
-        },
+        `${name}--${this.separator}-separator`,
       ];
     },
   },
   render() {
     const nodes = this.$scopedSlots?.default && this.$scopedSlots.default(null);
     const options = this.getOptions();
     const content = options.map((item, index) => {
+      const stepIndex = this.sequence === 'reverse' ? options.length - index - 1 : index;
       const propsData = {
         ...item,
+        index: stepIndex,
         status: this.handleStatus(item, index),
       };
 
       const stepItem = (
         <t-step-item
           props={{
             ...item,
+            index: stepIndex,
             status: this.handleStatus(item, index),
           }}
           key={item.value || index}
@@ -91,7 +88,7 @@ export default mixins(getConfigReceiverMixins('steps')).extend({
       const nodes = this.$scopedSlots?.default && this.$scopedSlots.default(null);
       let options: Array<TdStepItemProps>;
       if (this.options && this.options.length) {
-        options = this.options;
+        options = this.sequence === 'reverse' ? this.options.reverse() : this.options;
       } else {
         options = this.getOptionListBySlots(nodes);
       }
@@ -101,7 +98,8 @@ export default mixins(getConfigReceiverMixins('steps')).extend({
       const arr: Array<TdStepItemProps> = [];
       nodes?.forEach((node) => {
         const option = node?.componentOptions?.propsData;
-        option && arr.push(option);
+        if (!option) return;
+        this.sequence === 'reverse' ? arr.unshift(option) : arr.push(option);
       });
       return arr;
     },
@@ -120,29 +118,24 @@ export default mixins(getConfigReceiverMixins('steps')).extend({
       if (item.status && item.status !== 'default') return item.status;
       if (this.current === 'FINISH') return 'finish';
       // value 不存在时，使用 index 进行区分每一个步骤
-      if (item.value === undefined && index < this.current) return 'finish';
+      if (item.value === undefined) {
+        if (this.sequence === 'positive' && index < this.current) return 'finish';
+        if (this.sequence === 'reverse' && index > this.current) return 'finish';
+      }
       // value 存在，找匹配位置
       if (item.value !== undefined) {
         const matchIndex = this.indexMap[this.current];
         if (matchIndex === undefined) {
           console.warn('TDesign Steps Warn: The current `value` is not exist.');
           return 'default';
         }
-        if (index < matchIndex) return 'finish';
+        if (this.sequence === 'positive' && index < matchIndex) return 'finish';
+        if (this.sequence === 'reverse' && index > matchIndex) return 'finish';
       }
       const key = item.value === undefined ? index : item.value;
       if (key === this.current) return 'process';
       return 'default';
     },
-    addItem(item: InstanceType<typeof TStepItem>) {
-      const index = this.stepChildren.length;
-      // eslint-disable-next-line
-      item.index = index;
-      this.stepChildren.push(item);
-    },
-    removeItem(item: InstanceType<typeof TStepItem>) {
-      this.stepChildren = this.stepChildren.filter((t) => t !== item);
-    },
     handleChange(cur: TdStepsProps['current'], prev: TdStepsProps['current'], e: MouseEvent) {
       emitEvent<Parameters<TdStepsProps['onChange']>>(this, 'change', cur, prev, { e });
     },

src/steps/type.ts

@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-25 10:38:48
  * */
 
 import { TNode } from '../common';
@@ -16,12 +15,6 @@ export interface TdStepsProps {
    * 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成，非受控属性
    */
   defaultCurrent?: string | number;
-  /**
-   * 步骤条方向，有两种：横向和纵向
-   * @default horizontal
-   * @deprecated
-   */
-  direction?: 'horizontal' | 'vertical';
   /**
    * 步骤条方向，有两种：横向和纵向
    * @default horizontal
@@ -32,12 +25,17 @@ export interface TdStepsProps {
    */
   options?: Array<TdStepItemProps>;
   /**
-   * 是否只读
+   * 只读状态
    * @default false
    */
   readonly?: boolean;
   /**
-   * 步骤条顺序，纵向步骤有效（direction = horizontal）
+   * 步骤条分割符
+   * @default line
+   */
+  separator?: 'line' | 'dashed' | 'arrow';
+  /**
+   * 步骤条顺序
    * @default positive
    */
   sequence?: 'positive' | 'reverse';