alauda · 2eron · Dec 6, 2021 · Dec 5, 2021
diff --git a/.changeset/steps-optimize.md b/.changeset/steps-optimize.md
@@ -0,0 +1,4 @@
+"@alauda/ui": patch
+---
+
+feat: add selectable input param, deprecate linear param and editable property of StepItem
diff --git a/src/steps/steps.component.html b/src/steps/steps.component.html
@@ -6,9 +6,9 @@
   <ng-container *ngFor="let step of steps; let i = index; let isLast = last">
     <div
       class="aui-step"
-      (click)="select(i, step)"
+      (click)="select(i)"
       [class.isLastActive]="isLastActive(i, steps)"
-      [class.clickable]="isSelectable(i, step)"
+      [class.clickable]="isSelectable(i)"
     >
       <div class="aui-step__indicator">
         <ng-container *ngIf="isProgress">

diff --git a/src/steps/steps.component.ts b/src/steps/steps.component.ts
@@ -48,6 +48,9 @@ export class StepsComponent implements OnInit, OnDestroy {
     this.stepsChange$$.next(val);
   }
 
+  /**
+   * @deprecated type 为 step 时一般在使用上下文中控制是否可以进行下一步；type 为 progress 时强制按顺序执行
+   */
   @Input()
   linear = false;
 
@@ -66,6 +69,9 @@ export class StepsComponent implements OnInit, OnDestroy {
   @Input()
   type: StepsType = 'step';
 
+  @Input()
+  selectable = false;
+
   @Output()
   currentIndexChange = new EventEmitter<number>();
 
@@ -99,15 +105,18 @@ export class StepsComponent implements OnInit, OnDestroy {
       if (this.steps?.length) {
         const ret = Math.min(Math.max(0, index), this.steps.length - 1);
         const reversedPrevSteps = this.steps.slice(0, ret).reverse();
+        const doneIndex = reversedPrevSteps.findIndex(
+          step => step.state === StepState.Done || step.optional,
+        );
         const lastDoneStepIndex =
-          reversedPrevSteps.length -
-          reversedPrevSteps.findIndex(
-            step => step.state === StepState.Done || step.optional,
-          );
-        this._currentIndex = Math.min(lastDoneStepIndex, ret);
+          doneIndex > -1 ? reversedPrevSteps.length - doneIndex : 0;
+        this._currentIndex = this.selectedIndex = Math.min(
+          lastDoneStepIndex,
+          ret,
+        );
       }
     } else {
-      this._currentIndex = index;
+      this._currentIndex = this.selectedIndex = index;
     }
   }
 
@@ -153,29 +162,34 @@ export class StepsComponent implements OnInit, OnDestroy {
       : StepDefaultIcon[state];
   }
 
-  select(i: number, step: StepItem) {
-    if (this.isSelectable(i, step)) {
+  select(i: number) {
+    if (this.isSelectable(i)) {
       if (this.isProgress) {
         this.selectedIndexChange.emit(i);
         this.selectedIndex = i;
       } else {
         this.currentIndexChange.emit(i);
         this._currentIndex = i;
+        this.selectedIndex = i;
       }
     }
   }
 
-  isSelectable(i: number, step: StepItem) {
+  isSelectable(i: number) {
     const currentStep = this.steps[this._currentIndex];
+    if (!this.selectable || this.selectedIndex === i) {
+      return false;
+    }
+    const isLinear = this.isProgress ? true : this.linear;
     if (
-      this.linear &&
-      currentStep.state !== StepState.Done &&
+      isLinear &&
       !currentStep.optional &&
-      i > this._currentIndex
+      ((currentStep.state === StepState.Done && i > this._currentIndex + 1) ||
+        (currentStep.state !== StepState.Done && i > this._currentIndex))
     ) {
       return false;
     }
-    if (i < this._currentIndex && !(step.editable ?? true)) {
+    if (i < this._currentIndex && !this.selectable) {
       return false;
     }
     return true;

diff --git a/src/steps/types.ts b/src/steps/types.ts
@@ -14,6 +14,9 @@ export interface StepItem {
   description?: string;
   state?: StepState;
   optional?: boolean;
+  /**
+   * @deprecated 每个步骤不再需要单独控制。通过组件参数 selectable 统一控制
+   */
   editable?: boolean;
 }
 

diff --git a/stories/steps/demos.ts b/stories/steps/demos.ts
@@ -7,18 +7,24 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       [currentIndex]="currentIndex"
       [orientation]="orientation"
       [steps]="steps"
+      [linear]="linear"
+      [selectable]="selectable"
       (currentIndexChange)="currentIndexChange($event)"
     ></aui-steps>
     <div style="margin-top: 50px">
       <button aui-button="primary" (click)="prev()">Previous</button>
       <button aui-button="primary" (click)="next()">Next</button>
     </div>
+    <div>Linear: <aui-switch [(ngModel)]="linear"></aui-switch></div>
+    <div>Selectable: <aui-switch [(ngModel)]="selectable"></aui-switch></div>
     <div>Current index: {{ currentIndex }}</div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BasicHorizontalDemoComponent {
   currentIndex = 0;
+  linear = false;
+  selectable = false;
   steps: StepItem[] = [
     {
       label: 'Step 1',
@@ -50,9 +56,9 @@ export class BasicHorizontalDemoComponent {
 @Component({
   template: `
     <aui-steps
-      [linear]="true"
       [orientation]="orientation"
       [type]="'progress'"
+      [selectable]="selectable"
       [steps]="steps"
       (currentIndexChange)="currentIndexChange($event)"
       (selectedIndexChange)="selectedIndexChange($event)"
@@ -62,6 +68,7 @@ export class BasicHorizontalDemoComponent {
       <button aui-button="primary" (click)="complete()">Complete</button>
       <button aui-button="primary" (click)="error()">Set Error</button>
     </div>
+    <div>Selectable: <aui-switch [(ngModel)]="selectable"></aui-switch></div>
     <div>
       Selected Index: {{ selectedIndex }}, Current index: {{ currentIndex }}
     </div>
@@ -72,6 +79,7 @@ export class BasicVerticalDemoComponent {
   orientation: StepsOrientation = 'vertical';
   currentIndex = 0;
   selectedIndex: number;
+  selectable = false;
   steps: StepItem[] = [
     {
       label: 'Step 1',

diff --git a/stories/steps/steps.stories.mdx b/stories/steps/steps.stories.mdx
@@ -3,13 +3,13 @@ import { moduleMetadata } from '@storybook/angular';
 
 import * as Demo from './demos';
 
-import { StepsModule, ButtonModule } from '@alauda/ui';
+import { StepsModule, ButtonModule, SwitchModule } from '@alauda/ui';
 
 <Meta
   title="Steps"
   decorators={[
     moduleMetadata({
-      imports: [StepsModule, ButtonModule],
+      imports: [StepsModule, ButtonModule, SwitchModule],
     }),
   ]}
 />
@@ -28,20 +28,28 @@ Steps
             [currentIndex]="currentIndex"
             [orientation]="orientation"
             [steps]="steps"
+            [linear]="linear"
+            [selectable]="selectable"
             (currentIndexChange)="currentIndexChange($event)"
           ></aui-steps>
           <div style="margin-top: 50px">
             <button aui-button="primary" (click)="prev()">Previous</button>
             <button aui-button="primary" (click)="next()">Next</button>
           </div>
           <div>
-            Current index: {{ currentIndex }}
+            Linear: <aui-switch [(ngModel)]="linear"></aui-switch>
           </div>
+          <div>
+            Selectable: <aui-switch [(ngModel)]="selectable"></aui-switch>
+          </div>
+          <div>Current index: {{ currentIndex }}</div>
         ,
         changeDetection: ChangeDetectionStrategy.OnPush,
       })
       export class BasicHorizontalDemoComponent {
         currentIndex = 0;
+        linear = false;
+        selectable = false;
         steps: StepItem[] = [
           {
             label: 'Step 1',
@@ -82,9 +90,9 @@ Steps
         @Component({
           template: 
             <aui-steps
-              [linear]="true"
               [orientation]="orientation"
               [type]="'progress'"
+              [selectable]="selectable"
               [steps]="steps"
               (currentIndexChange)="currentIndexChange($event)"
               (selectedIndexChange)="selectedIndexChange($event)"
@@ -95,15 +103,18 @@ Steps
               <button aui-button="primary" (click)="error()">Set Error</button>
             </div>
             <div>
-              Selected Index: {{ selectedIndex }},
-              Current index: {{ currentIndex }}
+              Selectable: <aui-switch [(ngModel)]="selectable"></aui-switch>
+            </div>
+            <div>
+              Selected Index: {{ selectedIndex }}, Current index: {{ currentIndex }}
             </div>
           ,
         })
         export class BasicVerticalDemoComponent {
           orientation: StepsOrientation = 'vertical';
           currentIndex = 0;
           selectedIndex: number;
+          selectable = false;
           steps: StepItem[] = [
             {
               label: 'Step 1',
@@ -148,13 +159,14 @@ Steps
 
 ### Steps Properties
 
-| 名称         | 类型                       | 描述                                                                                  |
-| ------------ | -------------------------- | ------------------------------------------------------------------------------------- |
-| linear       | boolean                    | 是否按顺序执行，默认为 false。如果为 true，当前步骤非可选及未完成时后面步骤无法的点击 |
-| orientation  | 'vertical' or 'horizontal' | 方向                                                                                  |
-| currentIndex | number                     | 当前的步骤。当 type 为 progress 时，无需传入，组件会根据 steps 的状态自动设置         |
-| steps        | StepItem[]                 | 步骤                                                                                  |
-| type         | 'step' or 'progress'       | 默认为 step                                                                           |
+| 名称         | 类型                       | 描述                                                                                                  |
+| ------------ | -------------------------- | ----------------------------------------------------------------------------------------------------- |
+| linear       | boolean                    | 是否按顺序执行，默认为 false。如果为 true，当前步骤非可选及未完成时后面步骤无法的点击。（deprecated） |
+| selectable   | boolean                    | 是否可以点击步骤切换或查看。默认为 false                                                              |
+| orientation  | 'vertical' or 'horizontal' | 方向                                                                                                  |
+| currentIndex | number                     | 当前的步骤。当 type 为 progress 时，无需传入，组件会根据 steps 的状态自动设置                         |
+| steps        | StepItem[]                 | 步骤                                                                                                  |
+| type         | 'step' or 'progress'       | 默认为 step                                                                                           |
 
 ### Steps Output
 
@@ -165,10 +177,10 @@ Steps
 
 ### StepItem Definition
 
-| 名称        | 类型      | 可选  | 描述                                  |
-| ----------- | --------- | ----- | ------------------------------------- |
-| label       | string    | false | 步骤名称                              |
-| description | string    | true  | 步骤描述                              |
-| editable    | boolean   | true  | 完成后是否可以选择该步骤。默认为 true |
-| state       | StepState | true  | 状态。'done', 'pending' or 'error'    |
-| optional    | boolean   | true  | 是否可跳过。默认为 false              |
+| 名称        | 类型      | 可选  | 描述                                                  |
+| ----------- | --------- | ----- | ----------------------------------------------------- |
+| label       | string    | false | 步骤名称                                              |
+| description | string    | true  | 步骤描述                                              |
+| editable    | boolean   | true  | 完成后是否可以选择该步骤。默认为 true。（deprecated） |
+| state       | StepState | true  | 状态。'done', 'pending' or 'error'                    |
+| optional    | boolean   | true  | 是否可跳过。默认为 false                              |