feat(steps): add sequence property

src/step-item/props.ts

@@ -24,7 +24,7 @@ const props: TdStepItemProps = {
     type: String,
     value: 'default',
   },
-  /** 子步骤条，仅支持 layout  = 'vertical' 时 */
+  /** 已废弃。子步骤条，仅支持 layout  = 'vertical' 时 */
   subStepItems: {
     type: Array,
     value: [],

src/step-item/step-item.less

@@ -200,7 +200,8 @@
       top: calc(@step-item-dot-size / 2);
     }
 
-    &--finish {
+    &--finish,
+    &--reverse&--process {
       background-color: @step-item-finish-line-color;
     }
 

src/step-item/step-item.ts

@@ -26,7 +26,6 @@ export default class StepItem extends SuperComponent {
 
   properties = props;
 
-  // 组件的内部数据
   data = {
     classPrefix: name,
     prefix,
@@ -35,10 +34,11 @@ export default class StepItem extends SuperComponent {
     curStatus: '',
     layout: 'vertical',
     isLastChild: false,
+    sequence: 'positive',
   };
 
   methods = {
-    updateStatus(current, currentStatus, index, theme, layout, steps) {
+    updateStatus({ current, currentStatus, index, theme, layout, items, sequence }) {
       let curStatus = this.data.status;
 
       if (curStatus === 'default') {
@@ -55,7 +55,8 @@ export default class StepItem extends SuperComponent {
         isDot: theme === 'dot',
         layout,
         theme,
-        isLastChild: steps.length - 1 === index,
+        sequence,
+        isLastChild: index === (sequence === 'positive' ? items.length - 1 : 0),
       });
     },
 

src/step-item/step-item.wxml

@@ -13,8 +13,8 @@
   <view class="{{_.cls(classPrefix + '__anchor', [layout])}}" aria-hidden="true">
     <view wx:if="{{isDot}}" class="{{_.cls(classPrefix + '__dot', [curStatus])}}" />
     <view wx:elif="{{icon}}" class="{{_.cls(classPrefix + '__icon', [curStatus])}}">
-      <slot name="icon" />
-      <t-icon name="{{icon}}" size="22" />
+      <slot wx:if="{{icon == 'slot'}}" name="icon" />
+      <t-icon wx:else name="{{icon}}" size="22" />
     </view>
     <view wx:else class="{{_.cls(classPrefix + '__circle', [curStatus])}}">
       <t-icon wx:if="{{curStatus == 'finish'}}" name="check" />
@@ -45,7 +45,7 @@
 
   <view
     wx:if="{{!isLastChild}}"
-    class="{{_.cls(classPrefix + '__line', [curStatus, layout, theme])}}"
+    class="{{_.cls(classPrefix + '__line', [curStatus, layout, theme, sequence])}}"
     aria-hidden="true"
   />
 </view>

src/step-item/type.ts

@@ -35,17 +35,10 @@ export interface TdStepItemProps {
     type: StringConstructor;
     value?: StepStatus;
   };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 子步骤条，仅支持 layout  = 'vertical' 时
    * @default []
+   * @deprecated
    */
   subStepItems?: {
     type: ArrayConstructor;

src/steps/README.en-US.md

@@ -12,7 +12,7 @@ external-classes | Array | - | `['t-class']` | N
 layout | String | horizontal | options：horizontal/vertical | N
 readonly | Boolean | false | \- | N
 separator | String | line | options：line/dashed/arrow | N
-style | String | - | \- | N
+sequence | String | positive | options：positive/reverse | N
 theme | String | default | options：default/dot | N
 
 ### Steps Events
@@ -25,10 +25,9 @@ change | `({current: string \| number, previous: string \| number})` | \-
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-content | String / Slot | '' | \- | N
+content | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 external-classes | Array | - | `['t-class', 't-class-content', 't-class-title', 't-class-description', 't-class-extra']` | N
-icon | String / Slot | - | \- | N
+icon | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 status | String | default | options：default/process/finish/error。Typescript：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
-style | String | - | \- | N
-sub-step-items | Array | [] | Typescript：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
-title | String / Slot | '' | \- | N
+sub-step-items | Array | [] | `deprecated`。Typescript：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
+title | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N

src/steps/README.md

@@ -66,7 +66,7 @@ external-classes | Array | - | 组件类名，用于设置组件外层元素元
 layout | String | horizontal | 步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N
 readonly | Boolean | false | 只读状态 | N
 separator | String | line | 步骤条分割符。可选项：line/dashed/arrow | N
-style | String | - | 自定义组件样式 | N
+sequence | String | positive | 步骤条顺序。可选项：positive/reverse | N
 theme | String | default | 步骤条风格。可选项：default/dot | N
 
 ### Steps Events
@@ -79,10 +79,9 @@ change | `({current: string \| number, previous: string \| number})` | 当前步
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-content | String / Slot | '' | 步骤描述 | N
+content | String / Slot | '' | 步骤描述。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class', 't-class-content', 't-class-title', 't-class-description', 't-class-extra']` | N
-icon | String / Slot | - | 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标 | N
+icon | String / Slot | - | 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 status | String | default | 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
-style | String | - | 自定义组件样式 | N
-sub-step-items | Array | [] | 废弃。子步骤条，仅支持 layout  = 'vertical' 时 | N
-title | String / Slot | '' | 标题 | N
+sub-step-items | Array | [] | 已废弃。子步骤条，仅支持 layout  = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
+title | String / Slot | '' | 标题。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N

src/steps/props.ts

@@ -39,6 +39,11 @@ const props: TdStepsProps = {
     type: String,
     value: 'line',
   },
+  /** 步骤条顺序 */
+  sequence: {
+    type: String,
+    value: 'positive',
+  },
   /** 步骤条风格 */
   theme: {
     type: String,

src/steps/steps.less

@@ -18,8 +18,15 @@
   display: flex;
   width: 100%;
 
-  // 垂直
   &--vertical {
     flex-direction: column;
   }
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+
+  &--vertical&--reverse {
+    flex-direction: column-reverse;
+  }
 }

src/steps/steps.ts

@@ -50,11 +50,10 @@ export default class Steps extends SuperComponent {
 
   methods = {
     updateChildren() {
-      const { current, currentStatus, readonly, theme, layout } = this.data;
       const items = this.$children;
 
       items.forEach((item, index) => {
-        item.updateStatus(current, currentStatus, index, theme, layout, items, readonly);
+        item.updateStatus({ index, items, ...this.data });
       });
     },
     updateLastChid() {

src/steps/steps.wxml

@@ -2,7 +2,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_.cls(classPrefix, [layout, ['readonly', readonly]])}} class {{prefix}}-class"
+  class="{{_.cls(classPrefix, [layout, ['readonly', readonly], sequence])}} class {{prefix}}-class"
 >
   <slot />
 </view>

src/steps/type.ts

@@ -59,12 +59,12 @@ export interface TdStepsProps {
     value?: 'line' | 'dashed' | 'arrow';
   };
   /**
-   * 自定义组件样式
-   * @default ''
+   * 步骤条顺序
+   * @default positive
    */
-  style?: {
+  sequence?: {
     type: StringConstructor;
-    value?: string;
+    value?: 'positive' | 'reverse';
   };
   /**
    * 步骤条风格