code review

packages/badge/src/badge-group.vue

@@ -14,6 +14,12 @@
         type: [Number, String],
         default: 0
       }
+    },
+
+    data() {
+      return {
+        badges: []
+      };
     }
   };
 </script>

packages/badge/src/badge.vue

@@ -1,5 +1,7 @@
 <template>
-    <a class="zan-badge" :class="classNames" :href="url" @click="handleClick">
+    <a class="zan-badge" :href="url" @click="handleClick" :class="{
+      'zan-badge--select': isSelect
+    }">
       <div class="zan-badge__active"></div>
       <div v-if="info" class="zan-badge__info">{{info}}</div>
       {{title}}
@@ -9,11 +11,8 @@
 <script>
 export default {
   name: 'zan-badge',
+
   props: {
-    mark: {
-      type: [Number, String],
-      required: true
-    },
     title: {
       type: String,
       required: true
@@ -26,22 +25,26 @@ export default {
       type: String
     }
   },
+
+  beforeCreate() {
+    this.$parent.badges.push(this);
+  },
+
+  computed: {
+    isSelect() {
+      const parent = this.$parent;
+      return parent.badges.indexOf(this) === parent.activeKey;
+    }
+  },
+
   methods: {
     handleClick(e) {
       this.$emit('click', e, {
-        mark: this.mark,
         title: this.title,
         url: this.url,
         info: this.info
       });
     }
-  },
-  computed: {
-    classNames() {
-      return {
-        'is-select': this.mark === this.$parent.activeKey
-      };
-    }
   }
 };
 </script>

packages/card/src/card.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="zan-card">
     <img :src="thumb" alt="" class="zan-card__img">
-    <div class="zan-card__content" :class="{'is-center': !this.$slots.footer}">
+    <div class="zan-card__content" :class="{'zan-card__content--center': !this.$slots.footer}">
       <div class="zan-card__info">
         <slot name="title">
           <h4 v-text="title" class="zan-card__title"></h4>

packages/progress/src/progress.vue

@@ -2,7 +2,7 @@
   <div class="zan-progress">
     <div class="zan-progress__bar">
       <span class="zan-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
-      <span class="zan-progress__bar__pivot" :style="pivotStyle">{{currentPivotText}}</span>
+      <span class="zan-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
     </div>
   </div>
 </template>
@@ -21,6 +21,11 @@
  * @example
  * <zan-switch checked="true" disabled="false"></zan-switch>
  */
+
+const DEFAULT_COLOR = '#38f';
+const DEFAULT_TEXT_COLOR = '#fff';
+const INACTIVE_COLOR = '#cacaca';
+
 export default {
   name: 'zan-progress',
 
@@ -32,32 +37,29 @@ export default {
         return value <= 100 && value >= 0;
       }
     },
-    inactive: {
-      type: Boolean,
-      default: false
-    },
+    inactive: Boolean,
     pivotText: {
       type: String,
       default: function() {
-        return this.percentage.toString() + '%';
+        return this.percentage + '%';
       }
     },
     color: {
       type: String,
-      default: '#38f'
+      default: DEFAULT_COLOR
     },
     textColor: {
       type: String,
-      default: '#fff'
+      default: DEFAULT_TEXT_COLOR
     }
   },
 
   computed: {
     currentPivotText() {
-      return this.pivotText ? this.pivotText : this.this.percentage.toString() + '%';
+      return this.pivotText ? this.pivotText : this.percentage + '%';
     },
     componentColor() {
-      return this.inactive ? '#cacaca' : this.color;
+      return this.inactive ? INACTIVE_COLOR : this.color;
     },
     pivotStyle() {
       const pivotStyle = {

packages/steps/src/steps.vue

@@ -1,7 +1,11 @@
 <template>
   <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__status" v-if="title || description">
+      <div class="zan-steps__icon" v-if="icon || $slot.icon">
+        <slot name="icon">
+          <zan-icon :name="icon" :class="iconClass"></zan-icon>
+        </slot>
+      </div>
       <div class="zan-steps__message">
         <div class="zan-steps__message-wrapper">
           <h4 class="zan-steps__title" v-text="title"></h4>
@@ -11,16 +15,24 @@
       <slot name="message-extra">
       </slot>
     </div>
-    <div class="zan-steps__items">
+    <div class="zan-steps__items" :class="{
+      'zan-steps__items--alone': !title && !description
+    }">
       <slot></slot>
     </div>
   </div>
 </template>
 
 <script>
+import Icon from 'packages/icon';
+
 export default {
   name: 'zan-steps',
 
+  components: {
+    'zan-icon': Icon
+  },
+
   props: {
     active: Number,
     icon: String,
@@ -32,16 +44,6 @@ export default {
     description: String
   },
 
-  computed: {
-    computedIconClass() {
-      const iconName = `zan-icon-${this.icon}`;
-      const result = this.iconClass.split(' ');
-      result.push(iconName);
-
-      return result;
-    }
-  },
-
   data() {
     return {
       steps: []

packages/zanui-css/src/badge.css

@@ -2,70 +2,76 @@
 @import './mixins/border_retina.css';
 
 @component-namespace zan {
-    @b badge-group {
-        position: relative;
-        width: 85px;
-        &::after {
-          @mixin border-retina (top);
-        }
+  @b badge-group {
+    position: relative;
+    width: 85px;
+    &::after {
+      @mixin border-retina (top);
     }
-    @b badge {
+  }
+
+  @b badge {
+    display: block;
+    overflow: hidden;
+    position: relative;
+    padding: 20px 12px;
+    box-sizing: border-box;
+    line-height: 1.4;
+    background-color: $c-background;
+    color: $c-gray-darker;
+    font-size: 14px;
+    text-decoration: none;
+    word-break: break-all;
+
+    @m select {
+      font-weight: bold;
+      color: $c-black;
+      background-color: $c-white;
+      .zan-badge__active {
         display: block;
-        overflow: hidden;
-        position: relative;
-        padding: 20px 12px;
-        box-sizing: border-box;
-        line-height: 1.4;
-        background-color: $c-background;
-        color: $c-gray-darker;
-        font-size: 14px;
-        text-decoration: none;
-        word-break: break-all;
-        @e active {
-            display: none;
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 3px;
-            height: 100%;
-            background-color: #FF4444;
-        }
-        @e info {
-            position: absolute;
-            top: 2px;
-            right: 2px;
-            font-size: 10px;
-            transform:scale(0.8);
-            text-align: center;
-            box-sizing: border-box;
-            padding: 0 6px;
-            min-width: 18px;
-            height: 18px;
-            line-height: 18px;
-            border-radius: 9px;
-            background-color: #FF4444;
-            color: $c-white;
-        }
-        @when select {
-            font-weight: bold;
-            color: $c-black;
-            background-color: $c-white;
-            .zan-badge__active {
-                display: block;
-            }
-            &::after {
-                @mixin border-retina (top);
-                @mixin border-retina (right);
-                @mixin border-retina (left);
-            }
-        }
-        &::after {
-          @mixin border-retina (bottom);
-        }
-        &:last-child {
-          &::after {
-            border-bottom: 0;
-          }
-        }
+      }
+      &::after {
+        @mixin border-retina (top);
+        @mixin border-retina (right);
+        @mixin border-retina (left);
+      }
     }
+
+    @e active {
+      display: none;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 3px;
+      height: 100%;
+      background-color: #FF4444;
+    }
+
+    @e info {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      font-size: 10px;
+      transform:scale(0.8);
+      text-align: center;
+      box-sizing: border-box;
+      padding: 0 6px;
+      min-width: 18px;
+      height: 18px;
+      line-height: 18px;
+      border-radius: 9px;
+      background-color: #FF4444;
+      color: $c-white;
+    }
+
+    &::after {
+      @mixin border-retina (bottom);
+    }
+
+    &:last-child {
+      &::after {
+        border-bottom: 0;
+      }
+    }
+  }
 }

packages/zanui-css/src/card.css

@@ -15,7 +15,7 @@
 
     @e img {
       width: 90px;
-      height: 90px;
+      height: auto;
       border: 0;
       position: absolute;
       top: 5px;
@@ -26,7 +26,7 @@
       display: table;
       width: 100%;
 
-      @when center {
+      @m center {
         display: table;
         height: 90px;
 

packages/zanui-css/src/steps.css

@@ -20,12 +20,15 @@
     }
 
     @e icon {
-      font-size: 40px;
-      line-height: 1;
       float: left;
       margin-right: 10px;
     }
 
+    .zan-icon {
+      font-size: 40px;
+      line-height: 1;
+    }
+
     @e message {
       display: table;
       height: 40px;
@@ -53,8 +56,12 @@
     @e items {
       margin: 0 0 10px;
       overflow: hidden;
-      padding-bottom: 20px;
       position: relative;
+      padding-bottom: 20px;
+
+      @m alone {
+        padding-top: 10px;
+      }
     }
   }
 

packages/zanui-css/src/tag.css

@@ -23,6 +23,7 @@
       &::after {
         border-color: $c-green;
       }
+
       @when plain {
         color: $c-green;
       }
@@ -34,6 +35,7 @@
       &::after {
         border-color: $button-danger-background-color;
       }
+
       @when plain {
         color: $button-danger-background-color;
       }
@@ -45,6 +47,7 @@
       &::after {
         border-color: $c-blue;
       }
+
       @when plain {
         color: $c-blue;
       }