[Improvement] more component use bem mixin (#932)

packages/password-input/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="van-password-input">
-    <ul class="van-password-input__security van-hairline--surround" @touchstart.stop="$emit('focus')">
+  <div :class="b()">
+    <ul :class="b('security')" class="van-hairline--surround" @touchstart.stop="$emit('focus')">
       <li v-for="visibility in points" class="van-hairline">
         <i :style="`visibility: ${visibility}`" />
       </li>
@@ -8,7 +8,7 @@
     <div
       v-if="errorInfo || info"
       v-text="errorInfo || info"
-      :class="errorInfo ? 'van-password-input__error-info' : 'van-password-input__info'"
+      :class="b(errorInfo ? 'error-info' : 'info')"
     />
   </div>
 </template>

packages/picker/PickerColumn.vue

@@ -1,8 +1,7 @@
 
 <template>
   <div
-    class="van-picker-column"
-    :class="className"
+    :class="[b(), className]"
     :style="columnStyle"
     @touchstart="onTouchStart"
     @touchmove.prevent="onTouchMove"
@@ -14,10 +13,10 @@
         v-for="(option, index) in options"
         v-text="getOptionText(option)"
         class="van-ellipsis"
-        :class="{
-          'van-picker-column--disabled': isDisabled(option),
-          'van-picker-column--selected': index === currentIndex
-        }"
+        :class="b('item', {
+          disabled: isDisabled(option),
+          selected: index === currentIndex
+        })"
         @click="setIndex(index, true)"
       />
     </ul>

packages/picker/index.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="van-picker">
-    <div class="van-picker__toolbar van-hairline--top-bottom" v-if="showToolbar">
+  <div :class="b()">
+    <div :class="b('toolbar')" class="van-hairline--top-bottom" v-if="showToolbar">
       <slot>
-        <div class="van-picker__cancel" @click="emit('cancel')">{{ cancelButtonText || $t('cancel') }}</div>
-        <div class="van-picker__title van-ellipsis" v-if="title" v-text="title" />
-        <div class="van-picker__confirm" @click="emit('confirm')">{{ confirmButtonText || $t('confirm') }}</div>
+        <div :class="b('cancel')" @click="emit('cancel')">{{ cancelButtonText || $t('cancel') }}</div>
+        <div :class="b('title')" class="van-ellipsis" v-if="title" v-text="title" />
+        <div :class="b('confirm')" @click="emit('confirm')">{{ confirmButtonText || $t('confirm') }}</div>
       </slot>
     </div>
-    <div v-if="loading" class="van-picker__loading">
+    <div v-if="loading" :class="b('loading')">
       <loading />
     </div>
-    <div class="van-picker__columns" :style="columnsStyle" @touchmove.prevent>
+    <div :class="b('columns')" :style="columnsStyle" @touchmove.prevent>
       <picker-column
         v-for="(item, index) in currentColumns"
         :key="index"
@@ -22,7 +22,7 @@
         :visible-item-count="visibleItemCount"
         @change="onChange(index)"
       />
-      <div class="van-picker__frame van-hairline--top-bottom" :style="frameStyle" />
+      <div :class="b('frame')" class="van-hairline--top-bottom" :style="frameStyle" />
     </div>
   </div>
 </template>

packages/popup/index.vue

@@ -1,6 +1,6 @@
 <template>
   <transition :name="currentTransition">
-    <div v-show="value" class="van-popup" :class="{ [`van-popup--${position}`]: position }">
+    <div v-show="value" :class="b({ [position]: position })">
       <slot />
     </div>
   </transition>
@@ -31,12 +31,10 @@ export default create({
     }
   },
 
-  data() {
-    const transition = this.transition || (this.position === '' ? 'van-fade' : `popup-slide-${this.position}`);
-    return {
-      currentValue: false,
-      currentTransition: transition
-    };
+  computed: {
+    currentTransition() {
+      return this.transition || (this.position === '' ? 'van-fade' : `popup-slide-${this.position}`);
+    }
   }
 });
 </script>

packages/progress/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="van-progress">
-    <span class="van-progress__portion" :style="portionStyle" />
-    <span class="van-progress__pivot" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
+  <div :class="b()">
+    <span :class="b('portion')" :style="portionStyle" />
+    <span :class="b('pivot')" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
   </div>
 </template>
 

packages/pull-refresh/index.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="van-pull-refresh">
+  <div :class="b()">
     <div
-      class="van-pull-refresh__track"
+      :class="b('track')"
       :style="style"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
       @touchend="onTouchEnd"
       @touchcancel="onTouchEnd"
     >
-      <div class="van-pull-refresh__head">
-        <slot name="normal" v-if="status === 'normal'"/>
-        <slot name="pulling" v-if="status === 'pulling'">
-          <span class="van-pull-refresh__text">{{ pullingText || $t('pulling') }}</span>
+      <div :class="b('head')">
+        <slot v-if="status === 'normal'" name="normal" />
+        <slot v-if="status === 'pulling'" name="pulling">
+          <span :class="b('text')">{{ pullingText || $t('pulling') }}</span>
         </slot>
-        <slot name="loosing" v-if="status === 'loosing'">
-          <span class="van-pull-refresh__text">{{ loosingText || $t('loosing') }}</span>
+        <slot v-if="status === 'loosing'" name="loosing">
+          <span :class="b('text')">{{ loosingText || $t('loosing') }}</span>
         </slot>
-        <slot name="loading" v-if="status === 'loading'">
-          <div class="van-pull-refresh__loading">
+        <slot v-if="status === 'loading'" name="loading">
+          <div :class="b('loading')">
             <loading />
             <span>{{ loadingText || $t('loadingTip') }}</span>
           </div>

packages/radio-group/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van-radio-group">
+  <div :class="b()">
     <slot />
   </div>
 </template>

packages/radio/index.vue

@@ -1,20 +1,16 @@
 <template>
-  <div
-    class="van-radio"
-    :class="{ 'van-radio--disabled': isDisabled }"
-    @click="$emit('click')"
-  >
+  <div :class="b({ disabled: isDisabled })" @click="$emit('click')">
     <span class="van-radio__input">
       <input
         :value="name"
         v-model="currentValue"
         type="radio"
-        class="van-radio__control"
+        :class="b('control')"
         :disabled="isDisabled"
       >
       <icon :name="currentValue === name ? 'checked' : 'check'" />
     </span>
-    <span v-if="$slots.default" class="van-radio__label" @click="onClickLabel">
+    <span v-if="$slots.default" :class="b('label')" @click="onClickLabel">
       <slot />
     </span>
   </div>

packages/row/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van-row" :style="style">
+  <div :class="b()" :style="style">
     <slot />
   </div>
 </template>

packages/search/index.vue

@@ -1,23 +1,23 @@
 <template>
   <div
-    class="van-search"
-    :class="{ 'van-search--show-action': showAction }"
-    :style="{ 'background-color': background }">
-    <div class="van-search__input-wrap" v-clickoutside="onClickoutside">
+    :class="b({ 'show-action': showAction })"
+    :style="{ 'background-color': background }"
+  >
+    <div :class="b('wrap')" v-clickoutside="onClickoutside">
       <icon name="search" />
       <input
         v-bind="$attrs"
         v-on="listeners"
         v-refocus="focusStatus"
         type="search"
-        class="van-search__input"
+        :class="b('input')"
         :value="value"
       >
       <icon name="clear" v-show="isFocus && value" @click="onClean" />
     </div>
-    <div class="van-search__action" v-if="showAction">
+    <div v-if="showAction" :class="b('action')" >
       <slot name="action">
-        <div class="van-search__action-text" @click="onBack">{{ $t('cancel') }}</div>
+        <div :class="b('cancel')" @click="onBack">{{ $t('cancel') }}</div>
       </slot>
     </div>
   </div>

packages/step/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="van-step van-hairline" :class="[`van-step--${$parent.direction}`, { [`van-step--${status}`]: status }]">
-    <div class="van-step__circle-container">
-      <i class="van-step__circle" v-if="status !== 'process'" />
-      <icon v-else name="checked" :style="{ color: $parent.activeColor }" />
-    </div>
-    <div class="van-step__title" :style="titleStyle">
+  <div class="van-hairline" :class="b([$parent.direction, { [status]: status }])">
+    <div :class="b('title')" :style="titleStyle">
       <slot />
     </div>
-    <div class="van-step__line" />
+    <div :class="b('circle-container')">
+      <i :class="b('circle')" v-if="status !== 'process'" />
+      <icon v-else name="checked" :style="{ color: $parent.activeColor }" />
+    </div>
+    <div :class="b('line')" />
   </div>
 </template>
 

packages/stepper/index.vue

@@ -1,20 +1,18 @@
 <template>
-  <div class="van-stepper" :class="{ 'van-stepper--disabled': disabled }">
+  <div :class="b({ disabled })">
     <button
-      class="van-stepper__stepper van-stepper__minus"
-      :class="{ 'van-stepper__minus--disabled': isMinusDisabled }"
+      :class="b('minus', { disabled: minusDisabled })"
       @click="onChange('minus')"
     />
     <input
       type="number"
-      class="van-stepper__input"
+      :class="b('input')"
       :value="currentValue"
       :disabled="disabled || disableInput"
       @input="onInput"
     >
     <button
-      class="van-stepper__stepper van-stepper__plus"
-      :class="{ 'van-stepper__plus--disabled': isPlusDisabled }"
+      :class="b('plus', { disabled: plusDisabled })"
       @click="onChange('plus')"
     />
   </div>
@@ -62,14 +60,14 @@ export default create({
   },
 
   computed: {
-    isMinusDisabled() {
+    minusDisabled() {
       const min = +this.min;
       const step = +this.step;
       const currentValue = +this.currentValue;
       return min === currentValue || (currentValue - step) < min || this.disabled;
     },
 
-    isPlusDisabled() {
+    plusDisabled() {
       const max = +this.max;
       const step = +this.step;
       const currentValue = +this.currentValue;
@@ -108,7 +106,7 @@ export default create({
     },
 
     onChange(type) {
-      if ((this.isMinusDisabled && type === 'minus') || (this.isPlusDisabled && type === 'plus')) {
+      if ((this.minusDisabled && type === 'minus') || (this.plusDisabled && type === 'plus')) {
         this.$emit('overlimit', type);
         return;
       }

packages/steps/index.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="van-steps" :class="`van-steps--${direction}`">
-    <div class="van-steps__status" v-if="title || description">
-      <div class="van-steps__icon" v-if="icon || $slots.icon">
+  <div :class="b([direction])">
+    <div v-if="title || description" :class="b('status')">
+      <div v-if="icon || $slots.icon" :class="b('icon')">
         <slot name="icon">
           <icon :name="icon" :class="iconClass" />
         </slot>
       </div>
-      <div class="van-steps__message">
-        <div class="van-steps__title" v-text="title" />
-        <div class="van-steps__desc van-ellipsis" v-text="description" />
+      <div :class="b('message')">
+        <div :class="b('title')" v-text="title" />
+        <div :class="b('desc')" class="van-ellipsis" v-text="description" />
       </div>
       <slot name="message-extra" />
     </div>
-    <div class="van-steps__items" :class="{ 'van-steps__items--alone': !title && !description }">
+    <div :class="b('items', { alone: !title && !description })">
       <slot />
     </div>
   </div>

packages/submit-bar/index.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="van-submit-bar">
-    <div class="van-submit-bar__tip" v-show="tip || $slots.tip">
+  <div :class="b()">
+    <div :class="b('tip')" v-show="tip || $slots.tip">
       {{ tip }}<slot name="tip" />
     </div>
-    <div class="van-submit-bar__bar">
+    <div :class="b('bar')">
       <slot />
-      <div class="van-submit-bar__price">
+      <div :class="b('price')">
         <template v-if="hasPrice">
           <span>{{ label || $t('label') }}</span>
-          <span class="van-submit-bar__price-interger">{{ currency }}{{ priceInterger }}.</span>
-          <span class="van-submit-bar__price-decimal">{{ priceDecimal }}</span>
+          <span :class="b('price-interger')">{{ currency }}{{ priceInterger }}.</span>
+          <span :class="b('price-decimal')">{{ priceDecimal }}</span>
         </template>
       </div>
       <van-button :type="buttonType" :disabled="disabled" :loading="loading" @click="onSubmit">

packages/swipe-item/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van-swipe-item" :style="style">
+  <div :class="b()" :style="style">
     <slot />
   </div>
 </template>

packages/swipe/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="van-swipe">
+  <div :class="b()">
     <div
       v-if="count > 1"
       :style="trackStyle"
-      class="van-swipe__track"
+      :class="b('track')"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
       @touchend="onTouchEnd"
@@ -12,11 +12,14 @@
     >
       <slot />
     </div>
-    <div v-else class="van-swipe__track">
+    <div v-else :class="b('track')">
       <slot />
     </div>
-    <div class="van-swipe__indicators" v-if="showIndicators && count > 1">
-      <i v-for="index in count" :class="{ 'van-swipe__indicator--active': index - 1 === activeIndicator }" />
+    <div
+      v-if="showIndicators && count > 1"
+      :class="b('indicators')"
+    >
+      <i v-for="index in count" :class="b('indicator', { active: index - 1 === activeIndicator })" />
     </div>
   </div>
 </template>

packages/vant-css/src/picker.css

@@ -65,17 +65,17 @@
     font-size: 17px;
     text-align: center;
 
-    li {
+    &__item {
       padding: 0 5px;
       color: $gray-darker;
-    }
 
-    li&--selected {
-      color: $black;
-    }
+      &--selected {
+        color: $black;
+      }
 
-    li&--disabled {
-      opacity: .3;
+      &--disabled {
+        opacity: .3;
+      }
     }
   }
 }

packages/vant-css/src/search.css

@@ -10,7 +10,7 @@
     padding-right: 0;
   }
 
-  &__input-wrap {
+  &__wrap {
     position: relative;
     flex: 1;
     height: 34px;
@@ -49,7 +49,7 @@
     letter-spacing: 1px;
   }
 
-  &__action-text {
+  &__cancel {
     padding: 0 10px;
     color: $green;
 

packages/vant-css/src/stepper.css

@@ -11,7 +11,8 @@
     }
   }
 
-  &__stepper {
+  &__minus,
+  &__plus {
     width: 40px;
     height: 30px;
     box-sizing: border-box;
@@ -42,10 +43,7 @@
       bottom: 0;
       background-color: #6c6c6c;
     }
-  }
 
-  &__minus,
-  &__plus {
     &:active {
       background-color: $active-color;
     }

packages/vant-css/src/swipe.css

@@ -22,23 +22,22 @@ $van-swipe-indicator: 6px;
     position: absolute;
     height: $van-swipe-indicator;
     transform: translate3d(-50%, 0, 0);
+  }
 
-    > i {
-      border-radius: 100%;
-      vertical-align: top;
-      display: inline-block;
-      background-color: $gray-dark;
-      width: $van-swipe-indicator;
-      height: $van-swipe-indicator;
-      &:not(:last-child) {
-        margin-right: $van-swipe-indicator;
-      }
+  &__indicator {
+    border-radius: 100%;
+    vertical-align: top;
+    display: inline-block;
+    background-color: $gray-dark;
+    width: $van-swipe-indicator;
+    height: $van-swipe-indicator;
+
+    &:not(:last-child) {
+      margin-right: $van-swipe-indicator;
     }
-
-    .van-swipe__indicator {
-      &--active {
-        background-color: $orange;
-      }
+  
+    &--active {
+      background-color: $orange;
     }
   }
 }

test/specs/picker.spec.js

@@ -260,7 +260,7 @@ describe('PickerColumn', () => {
       }
     });
 
-    expect(wrapper.find('.van-picker-column--disabled').length).to.equal(1);
+    expect(wrapper.find('.van-picker-column__item--disabled').length).to.equal(1);
     expect(wrapper.vm.currentIndex).to.equal(undefined);
   });
 

test/specs/popup.spec.js

@@ -84,7 +84,7 @@ describe('Popup', () => {
 
       modal.click();
       setTimeout(() => {
-        expect(wrapper.data().currentValue).to.be.false;
+        expect(wrapper.vm.value).to.be.false;
         done();
       }, 300);
     }, 300);

test/specs/search.spec.js

@@ -87,7 +87,7 @@ describe('Search', () => {
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
-    const cancelBtn = wrapper.find('.van-search__action-text')[0];
+    const cancelBtn = wrapper.find('.van-search__cancel')[0];
     cancelBtn.trigger('click');
 
     wrapper.vm.$nextTick(() => {