完成steps组件开发

src/steps/index.js

@@ -9,7 +9,13 @@ import '../icon/index.js'
 
 class Steps extends Component {
   static props = {
-    active: 1,
+    active: {
+      type: Number,
+      default: 1,
+      observer() {
+        this.$updateStepStatus()
+      }
+    },
     vertical: false
   }
 
@@ -26,31 +32,37 @@ class Steps extends Component {
     `
   ]
 
-  mounted() {
+  $updateStepStatus() {
     ;[...this.children].forEach((it, i) => {
-      if (it.tagName === 'WC-STEP') {
       it.index = i + 1
       it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0
       it.vertical = this.vertical
-      } else {
-        it.remove()
+      if (i === 0) {
+        it.setAttribute('first', '')
+      } else if (i === this.children.length - 1) {
+        it.setAttribute('last', '')
       }
     })
   }
+
+  mounted() {
+    this.$updateStepStatus()
+  }
 }
 
 class Step extends Component {
   static props = {
     title: '',
     description: '',
+    icon: { type: String, default: null },
     index: { type: Number, default: 1, attribute: false },
     status: { type: Number, default: 0, attribute: false },
     vertical: false
   }
 
-  static styles = [
-    css`
+  static styles = css`
     :host {
+      flex: 1;
       display: flex;
       font-size: 14px;
     }
@@ -58,8 +70,7 @@ class Step extends Component {
       display: flex;
       flex-direction: column;
       align-items: center;
-        justify-content: space-between;
-        padding: 4px;
+      width: 100%;
       color: var(--color-dark-1);
       user-select: none;
 
@@ -75,13 +86,28 @@ class Step extends Component {
       }
     }
 
-      :host([vertical]) {
-        .container {
-          flex-direction: row;
+    .header {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 26px;
+
+      &::before,
+      &::after {
+        position: absolute;
+        left: 0;
+        top: 12px;
+        width: calc(50% - 24px);
+        height: 1px;
+        background: var(--color-grey-1);
+        content: '';
       }
-        .group {
-          align-items: flex-start;
-          margin-left: 12px;
+
+      &::after {
+        left: unset;
+        right: 0;
       }
     }
 
@@ -89,10 +115,16 @@ class Step extends Component {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-        width: 28px;
-        height: 28px;
+      width: 26px;
+      height: 26px;
       border: 1px solid var(--color-grey-1);
       border-radius: 50%;
+      --size: 14px;
+
+      &.custom {
+        border: 0;
+        --size: 26px;
+      }
     }
     .group {
       display: flex;
@@ -107,13 +139,58 @@ class Step extends Component {
       line-height: 1.5;
       font-size: 12px;
     }
+
+    :host([vertical]) {
+      .container {
+        flex-direction: row;
+      }
+      .header {
+        width: 26px;
+        min-height: 64px;
+
+        &::before,
+        &::after {
+          top: 0;
+          left: 12px;
+          width: 1px;
+          height: calc(50% - 16px);
+        }
+        &::after {
+          top: unset;
+          bottom: 0;
+        }
+      }
+      .group {
+        flex: 1;
+        align-items: flex-start;
+        margin-left: 12px;
+      }
+    }
+
+    :host([first]) {
+      .header:before {
+        display: none;
+      }
+    }
+    :host([last]) {
+      .header:after {
+        display: none;
+      }
+    }
   `
-  ]
 
   render() {
     return html`
       <label class="container" status=${this.status}>
-        <span class="num">${this.index}</span>
+        <header class="header">
+          <span class=${classMap({ num: true, custom: this.icon })}>
+            ${this.icon
+              ? html`<wc-icon name=${this.icon}></wc-icon>`
+              : this.status === 2
+              ? html`<wc-icon name="get"></wc-icon>`
+              : this.index}
+          </span>
+        </header>
         <div class="group">
           <strong class="title">${this.title}</strong>
           <cite class="description">${this.description}</cite>