完成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,94 +32,165 @@ class Steps extends Component {
     `
   ]
 
-  mounted() {
+  $updateStepStatus() {
     ;[...this.children].forEach((it, i) => {
-      if (it.tagName === 'WC-STEP') {
+      it.index = i + 1
-        it.index = i + 1
+      it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0
-        it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0
+      it.vertical = this.vertical
-        it.vertical = this.vertical
+      if (i === 0) {
-      } else {
+        it.setAttribute('first', '')
-        it.remove()
+      } 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 = [
+  static styles = css`
-    css`
+    :host {
-      :host {
+      flex: 1;
-        display: flex;
+      display: flex;
-        font-size: 14px;
+      font-size: 14px;
+    }
+    .container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      color: var(--color-dark-1);
+      user-select: none;
+
+      &[status='2'] {
+        color: var(--color-teal-1);
+
+        .num {
+          border-color: var(--color-teal-1);
+        }
       }
+      &[status='0'] {
+        opacity: 0.6;
+      }
+    }
+
+    .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: '';
+      }
+
+      &::after {
+        left: unset;
+        right: 0;
+      }
+    }
+
+    .num {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      border: 1px solid var(--color-grey-1);
+      border-radius: 50%;
+      --size: 14px;
+
+      &.custom {
+        border: 0;
+        --size: 26px;
+      }
+    }
+    .group {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    .title {
+      line-height: 2;
+    }
+    .description {
+      line-height: 1.5;
+      font-size: 12px;
+    }
+
+    :host([vertical]) {
       .container {
-        display: flex;
+        flex-direction: row;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        padding: 4px;
-        color: var(--color-dark-1);
-        user-select: none;
-
-        &[status='2'] {
-          color: var(--color-teal-1);
-
-          .num {
-            border-color: var(--color-teal-1);
-          }
-        }
-        &[status='0'] {
-          opacity: 0.6;
-        }
       }
+      .header {
+        width: 26px;
+        min-height: 64px;
 
-      :host([vertical]) {
+        &::before,
-        .container {
+        &::after {
-          flex-direction: row;
+          top: 0;
+          left: 12px;
+          width: 1px;
+          height: calc(50% - 16px);
         }
-        .group {
+        &::after {
-          align-items: flex-start;
+          top: unset;
-          margin-left: 12px;
+          bottom: 0;
         }
       }
-
-      .num {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 28px;
-        height: 28px;
-        border: 1px solid var(--color-grey-1);
-        border-radius: 50%;
-      }
       .group {
-        display: flex;
+        flex: 1;
-        flex-direction: column;
+        align-items: flex-start;
-        align-items: center;
+        margin-left: 12px;
-        justify-content: center;
       }
-      .title {
+    }
-        line-height: 2;
+
+    :host([first]) {
+      .header:before {
+        display: none;
       }
-      .description {
+    }
-        line-height: 1.5;
+    :host([last]) {
-        font-size: 12px;
+      .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>