Merge branch 'master' into hotfix/switch_loading_fix

packages/button/src/button.js

@@ -61,9 +61,9 @@ export default {
           'zan-button--' + type,
           'zan-button--' + size,
           {
-            'is-disabled': disabled,
-            'is-loading': loading,
-            'is-block': block
+            'z-button--disabled': disabled,
+            'z-button--loading': loading,
+            'z-button--block': block
           }
         ]}
         onClick={this.handleClick}

packages/cell/src/cell.vue

@@ -11,7 +11,7 @@
     </div>
     <div class="zan-cell__value" :class="{
       'is-link': isLink,
-      'is-alone': !title && !label
+      'is-alone': !this.$slots.title && !title && !label
     }">
       <slot>
         <span v-text="value"></span>

packages/step/index.js

@@ -0,0 +1,3 @@
+import Step from 'packages/steps/src/step';
+
+export default Step;

packages/steps/src/step.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="zan-step" :class="`zan-step--${status}`">
+    <div class="zan-step__circle-container">
+      <i class="zan-step__circle" v-if="status !== 'process'"></i>
+      <i class="zan-icon zan-icon-checked" v-else></i>
+    </div>
+    <p class="zan-step__title">
+      <slot></slot>
+    </p>
+    <div class="zan-step__line"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zan-step',
+
+  beforeCreate() {
+    this.$parent.steps.push(this);
+  },
+
+  computed: {
+    status() {
+      let index = this.$parent.steps.indexOf(this);
+      let active = this.$parent.active;
+
+      if (index === -1) {
+        return '';
+      } else if (index < active) {
+        return 'finish';
+      } else if (index === active) {
+        return 'process';
+      }
+    }
+  }
+};
+</script>

packages/steps/src/steps.vue

@@ -1,18 +1,51 @@
 <template>
-  <div>
-    <h2>author: {{ author }}</h2>
-    <div>Hello {{ name }}</div>
+  <div class="zan-steps" :class="`zan-steps--${steps.length}`">
+    <div class="zan-steps__status" v-if="icon">
+      <i class="zan-icon zan-steps__icon" :class="computedIconClass"></i>
+      <div class="zan-steps__message">
+        <div class="zan-steps__message-wrapper">
+          <h4 class="zan-steps__title" v-text="title"></h4>
+          <p class="zan-steps__desc" v-text="description"></p>
+        </div>
+      </div>
+      <slot name="message-extra">
+      </slot>
+    </div>
+    <div class="zan-steps__items">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'Sample',
-    props: ['author'],
-    data() {
-      return {
-        name: 'World'
-      };
+export default {
+  name: 'zan-steps',
+
+  props: {
+    active: Number,
+    icon: String,
+    iconClass: {
+      type: String,
+      default: ''
+    },
+    title: String,
+    description: String
+  },
+
+  computed: {
+    computedIconClass() {
+      let iconName = `zan-icon-${this.icon}`;
+      let result = this.iconClass.split(' ');
+      result.push(iconName);
+
+      return result;
     }
-  };
+  },
+
+  data() {
+    return {
+      steps: []
+    };
+  }
+};
 </script>

packages/zanui-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-css",
-  "version": "0.0.7",
+  "version": "0.0.12",
   "description": "zanui css.",
   "main": "lib/index.css",
   "style": "lib/index.css",

packages/zanui-css/src/button.css

@@ -75,13 +75,13 @@
       font-size: 10px;
     }
 
-    @when disabled {
+    @m disabled {
       color: $button-disabled-color;
       background-color: $button-disabled-background-color;
       border: 1px solid $button-disabled-border-color;
     }
 
-    @when block {
+    @m block {
       display: block;
     }
   }

packages/zanui-css/src/button_group.css

@@ -2,6 +2,7 @@
   display: inline-block;
   box-sizing: border-box;
   padding-right: 10px;
+  vertical-align: middle;
   &:last-child {
     padding-right: 0;
   }

packages/zanui-css/src/cell.css

@@ -5,6 +5,7 @@
   @b cell-group {
     padding-left: 10px;
     position: relative;
+    background-color: #fff;
 
     &::after {
       @mixin border-retina (top, bottom);

packages/zanui-css/src/icon.css

@@ -63,4 +63,4 @@
 .zan-icon-sign:before { content: '\e80d'; } /* '' */
 .zan-icon-store:before { content: '\e80e'; } /* '' */
 .zan-icon-topay:before { content: '\e80f'; } /* '' */
-.zan-icon-tosend:before { content: '\e810'; } /* '' */
+.zan-icon-tosend:before { content: '\e810'; } /* '' */

packages/zanui-css/src/steps.css

@@ -1,5 +1,149 @@
+@import "./common/var.css";
+@import "./mixins/ellipsis.css";
+
 @component-namespace zan {
   @b steps {
-    color: red;
+    overflow: hidden;
+    padding: 0 10px;
+
+    @m 4 {
+      .zan-step {
+        width: 33.2%;
+      }
+    }
+
+    @m 3 {
+      .zan-step {
+        width: 50%;
+      }
+    }
+
+    @e icon {
+      font-size: 40px;
+      line-height: 1;
+      float: left;
+      margin-right: 10px;
+    }
+
+    @e message {
+      display: table;
+      height: 40px;
+      margin: 15px 0;
+
+      .zan-steps__message-wrapper {
+        display: table-cell;
+        vertical-align: middle;
+      }
+    }
+
+    @e title {
+      font-size: 14px;
+      color: $c-black;
+    }
+
+    @e desc {
+      font-size: 12px;
+      line-height: 1.5;
+      color: $c-gray-dark;
+      max-height: 18px;
+      @mixin multi-ellipsis 1;
+    }
+
+    @e items {
+      margin: 0 0 10px;
+      overflow: hidden;
+      padding-bottom: 20px;
+    }
+  }
+
+  @b step {
+    font-size: 14px;
+    float: left;
+    position: relative;
+    color: $c-gray-dark;
+
+    @m finish {
+      color: $c-black;
+
+      .zan-step__circle,
+      .zan-step__line {
+        background-color: $c-green;
+      }
+    }
+
+    @m process {
+      color: $c-black;
+
+      .zan-step__circle-container {
+        top: 24px;
+      }
+
+      .zan-icon {
+        font-size: 12px;
+        color: $c-green;
+        line-height: 1;
+        display: block;
+      }
+    }
+
+    &:first-child {
+      .zan-step__title {
+        transform: none;
+        margin-left: 0;
+      }
+    }
+
+    &:last-child {
+      position: absolute;
+      right: 10px;
+      width: auto;
+
+      .zan-step__title {
+        transform: none;
+        margin-left: 0;
+      }
+
+      .zan-step__circle-container {
+        left: auto;
+        right: -6px;
+      }
+
+      .zan-step__line {
+        width: 0;
+      }
+    }
+
+    .zan-step__circle-container {
+      position: absolute;
+      top: 28px;
+      left: -8px;
+      padding: 0 8px;
+      background-color: #fff;
+      z-index: 1;
+    }
+
+    @e circle {
+      display: block;
+      width: 5px;
+      height: 5px;
+      background-color: #888;
+      border-radius: 50%;
+    }
+
+    @e title {
+      font-size: 12px;
+      transform: translate3d(-50%, 0, 0);
+      display: inline-block;
+      margin-left: 3px;
+    }
+
+    @e line {
+      position: absolute;
+      left: 0px;
+      top: 30px;
+      width: 100%;
+      height: 1px;
+      background-color: $c-gray-light;
+    }
   }
 }