[Improvement] optimize staticClass (#337)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [bugfix] Search box-sizing wrong

* [Doc] update vant-demo respo

* [Doc] translate theme & demo pages

* [Doc] add Internationalization document

* [bugfix] remove unnecessary props

* [fix] optimize clickoutside

* [new feature] optimize find-parent

* [new feature]: change document title accordinng to language

* [new feature] Pagination code review

* [improvement] adjust icon-font unicode

* [improvement] Icon spinner color inherit

* [improvement] icon default width

* [bugfix] DateTimePicker validate date props

* [bugfix] Tab item text ellipsis

* [improvement] optimize single line ellipsis

* [Improvement] optimzie staticClass

packages/actionsheet/index.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="van-actionsheet-float">
-    <div :class="['van-actionsheet', { 'van-actionsheet--withtitle': title }]" v-show="value">
+    <div class="van-actionsheet" :class="{ 'van-actionsheet--withtitle': title }" v-show="value">
       <div class="van-actionsheet__header van-hairline--top-bottom" v-if="title">
         <div v-text="title" />
         <van-icon name="close" @click.stop="$emit('input', false)" />
@@ -9,14 +9,15 @@
         <li
           v-for="(item, index) in actions"
           :key="index"
-          :class="['van-actionsheet__item', 'van-hairline--top', item.className, { 'van-actionsheet__item--loading': item.loading }]"
+          class="van-actionsheet__item van-hairline--top"
+          :class="[item.className, { 'van-actionsheet__item--loading': item.loading }]"
           @click.stop="onClickItem(item)"
         >
           <template v-if="!item.loading">
             <span class="van-actionsheet__name">{{ item.name }}</span>
             <span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
           </template>
-          <van-loading v-else class="van-actionsheet__loading" type="circle" color="black" />
+          <van-loading v-else class="van-actionsheet__loading" type="circle" />
         </li>
       </ul>
       <div

packages/badge/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a :class="['van-badge van-hairline', { 'van-badge--select': isSelect }]" :href="url" @click="onClick">
+  <a class="van-badge van-hairline" :class="{ 'van-badge--select': isSelect }" :href="url" @click="onClick">
     <div v-if="info" class="van-badge__info">{{ info }}</div>
     {{ title }}
   </a>

packages/card/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['van-card', { 'van-card--center': centered }]">
+  <div class="van-card" :class="{ 'van-card--center': centered }">
     <div class="van-card__thumb">
       <slot name="thumb">
         <img :src="thumb" class="van-card__img" />

packages/cell/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['van-cell', 'van-hairline', { 'van-cell--required': required }]" @click="onClick">
+  <div class="van-cell van-hairline" :class="{ 'van-cell--required': required }" @click="onClick">
     <div class="van-cell__title" v-if="$slots.title || title">
       <slot name="icon">
         <van-icon v-if="icon" :name="icon" />

packages/checkbox/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
+    class="van-checkbox"
     :class="[
-      'van-checkbox',
       `van-checkbox--${shape}`, {
       'van-checkbox--disabled': isDisabled
     }]">

packages/col/index.vue

@@ -1,12 +1,10 @@
 <template>
   <div
-    :class="[`van-col`, { 
-      [`van-col-${span}`]: span,
-      [`van-col-offset-${offset}`]: offset,
-    }]"
+    class="van-col"
+    :class="{ [`van-col-${span}`]: span, [`van-col-offset-${offset}`]: offset}"
     :style="style"
   >
-      <slot></slot>
+    <slot></slot>
   </div>
 </template>
 

packages/contact-card/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['van-contact-card', `van-contact-card--${type}`]" v-on="$listeners">
+  <div class="van-contact-card" :class="`van-contact-card--${type}`" v-on="$listeners">
     <div class="van-contact-card__content">
       <template v-if="type === 'add'">
         <van-icon class="van-contact-card__icon" name="add2" />

packages/coupon-list/Item.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['van-coupon-item', { 'van-coupon-item--disabled': disabled }]">
+  <div class="van-coupon-item" :class="{ 'van-coupon-item--disabled': disabled }">
     <div class="van-coupon-item__head">
       <div class="van-coupon-item__lines"></div>
       <div class="van-coupon-item__gradient">

packages/coupon-list/index.vue

@@ -4,7 +4,7 @@
       <van-field class="van-coupon-list__filed van-hairline--surround" v-model="exchangeCode" :placeholder="inputPlaceholder" :maxlength="20" />
       <van-button size="small" type="danger" class="van-coupon-list__exchange" :disabled="exchangeButtonDisabled || !exchangeCode.length" @click="onClickExchangeButton">{{ exchangeButtonText }}</van-button>
     </van-cell-group>
-    <div :class="['van-coupon-list__list', { 'van-coupon-list--with-exchange': showExchangeBar }]" ref="list">
+    <div class="van-coupon-list__list" :class="{ 'van-coupon-list--with-exchange': showExchangeBar }" ref="list">
       <van-coupon-item
         ref="card"
         v-for="(item, index) in coupons"

packages/dialog/dialog.vue

@@ -18,7 +18,8 @@
         </van-button>
         <van-button
           size="large"
-          :class="['van-dialog__confirm', { 'van-hairline--left': showCancelButton && showConfirmButton }]"
+          class="van-dialog__confirm"
+          :class="{ 'van-hairline--left': showCancelButton && showConfirmButton }"
           v-show="showConfirmButton"
           @click="handleAction('confirm')"
         >

packages/field/index.vue

@@ -2,7 +2,8 @@
   <van-cell
     :title="label"
     :required="required"
-    :class="['van-field', {
+    class="van-field"
+    :class="{
       'van-field--has-textarea': type === 'textarea',
       'van-field--nolabel': !label,
       'van-field--disabled': $attrs.disabled,
@@ -11,7 +12,7 @@
       'van-field--autosize': autosize,
       'van-field--has-icon': hasIcon,
       'van-hairline--surround': border
-    }]">
+    }">
     <textarea
       v-if="type === 'textarea'"
       v-bind="$attrs"

packages/goods-action-mini-btn/index.vue

@@ -1,6 +1,6 @@
 <template>
   <a :href="url" class="van-goods-action__mini-btn van-hairline" @click="$emit('click', $event);">
-    <van-icon :class="['van-goods-action__mini-btn-icon', iconClass]" :name="icon" />
+    <van-icon class="van-goods-action__mini-btn-icon" :class="iconClass" :name="icon" />
     <slot></slot>
   </a>
 </template>

packages/icon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <i :class="['van-icon', 'van-icon-' + name]" @click="$emit('click', $event)">
+  <i class="van-icon" :class="`van-icon-${name}`" @click="$emit('click', $event)">
     <slot></slot>
   </i>
 </template>

packages/loading/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :class="['van-loading', 'van-loading--' + type, 'van-loading--' + color]">
-    <span :class="['van-loading__spinner', 'van-loading__spinner--' + type, 'van-loading__spinner--' + color]">
+  <div class="van-loading" :class="['van-loading--' + type, 'van-loading--' + color]">
+    <span class="van-loading__spinner" :class="['van-loading__spinner--' + type, 'van-loading__spinner--' + color]">
       <i v-if="type === 'spinner'" v-for="item in 12" />
     </span>
   </div>

packages/nav-bar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['van-nav-bar van-hairline--top-bottom', { 'van-nav-bar--fixed': fixed }]">
+  <div class="van-nav-bar van-hairline--top-bottom" :class="{ 'van-nav-bar--fixed': fixed }">
     <div class="van-nav-bar__left" @click="$emit('clickLeft')">
       <slot name="left">
         <van-icon v-if="leftArrow" class="van-nav-bar__arrow" name="arrow" />

packages/notice-bar/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div
     v-show="showNoticeBar"
-    :class="['van-notice-bar', { 'van-notice-bar--withicon': mode }]"
+    class="van-notice-bar"
+    :class="{ 'van-notice-bar--withicon': mode }"
     :style="barStyle"
     @click="$emit('click')"
   >
@@ -11,7 +12,8 @@
     <div class="van-notice-bar__content-wrap" ref="contentWrap">
       <div
         ref="content"
-        :class="['van-notice-bar__content', animationClass]"
+        class="van-notice-bar__content"
+        :class="animationClass"
         :style="contentStyle"
         @animationend="onAnimationEnd"
       >

packages/number-keyboard/index.vue

@@ -17,10 +17,11 @@
         v-for="(key, index) in keys" 
         v-text="key"
         :data-key="index"
-        :class="['van-hairline', {
+        class="van-hairline"
+        :class="{
           'van-number-keyboard--active': index === active,
           'van-number-keyboard__delete': index === 11 && showDeleteKey
-        }]"
+        }"
       />
     </div>
   </transition>

packages/pagination/index.vue

@@ -1,7 +1,8 @@
 <template>
-  <ul :class="['van-pagination', { 'van-pagination-simple': !isMultiMode }]">
+  <ul class="van-pagination" :class="{ 'van-pagination-simple': !isMultiMode }">
     <li
-      :class="[{ 'van-pagination--disabled': value === 1 } , 'van-pagination__item', 'van-pagination__prev', 'van-hairline']"
+      class="van-pagination__item van-pagination__prev van-hairline"
+      :class="{ 'van-pagination--disabled': value === 1 }"
       @click="selectPage(value - 1)"
     >
       {{ prevText || $t('prev') }}
@@ -10,7 +11,8 @@
       v-if="isMultiMode" 
       v-for="(page, index) in pages" 
       :key="index" 
-      :class="[{ 'van-pagination--active': page.active }, 'van-pagination__item', 'van-pagination__page', 'van-hairline']"
+      class="van-pagination__item van-pagination__page van-hairline"
+      :class="{ 'van-pagination--active': page.active }"
       @click="selectPage(page.number)"
     >
       {{ page.text }}
@@ -19,7 +21,8 @@
       <slot name="pageDesc">{{ pageDesc }}</slot>
     </li>
     <li
-      :class="[{ 'van-pagination--disabled': value === computedPageCount }, 'van-pagination__item', 'van-pagination__next', 'van-hairline']" 
+      class="van-pagination__item van-pagination__next van-hairline"
+      :class="{ 'van-pagination--disabled': value === computedPageCount }" 
        @click="selectPage(value + 1)"
     >
       {{ nextText || $t('next') }}

packages/picker/index.vue

@@ -7,16 +7,16 @@
         <div v-if="title" class="van-picker__title">{{ title }}</div>
       </slot>
     </div>
-    <div class="van-picker__columns" :class="['van-picker__columns--' + columns.length]">
+    <div class="van-picker__columns" :class="`van-picker__columns--${columns.length}`">
       <van-picker-column
         v-for="(item, index) in columns"
         :key="index"
         v-model="values[index]"
         :values="item.values"
-        :class-name="item.className"
+        :className="item.className"
         :itemHeight="itemHeight"
-        :visible-item-count="visibileColumnCount"
-        :value-key="valueKey"
+        :visibleItemCount="visibileColumnCount"
+        :valueKey="valueKey"
         @columnChange="columnValueChange(index)"
       />
       <div class="van-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>

packages/popup/index.vue

@@ -1,6 +1,6 @@
 <template>
   <transition :name="currentTransition">
-    <div v-show="value" class="van-popup" :class="[position ? 'van-popup--' + position : '']">
+    <div v-show="value" class="van-popup" :class="{ [`van-popup--${position}`]: position }">
       <slot></slot>
     </div>
   </transition>

packages/radio/index.vue

@@ -2,21 +2,16 @@
   <div
     @click="handleRadioClick"
     class="van-radio"
-    :class="{
-      'van-radio--disabled': isDisabled
-    }">
+    :class="{ 'van-radio--disabled': isDisabled }">
     <span class="van-radio__input">
       <input
         :value="name"
         v-model="currentValue"
         type="radio"
         class="van-radio__control"
-        :disabled="isDisabled">
-      <span class="van-icon" :class="{
-        'van-icon-checked': currentValue === name,
-        'van-icon-check': currentValue !== name
-      }">
-      </span>
+        :disabled="isDisabled"
+      >
+      <van-icon :name="currentValue === name ? 'checked' : 'check'" />
     </span>
     <span class="van-radio__label" @click="handleLabelClick">
       <slot></slot>
@@ -25,11 +20,16 @@
 </template>
 
 <script>
+import Icon from '../icon';
 import findParent from '../mixins/find-parent';
 
 export default {
   name: 'van-radio',
 
+  components: {
+    [Icon.name]: Icon
+  },
+
   mixins: [findParent],
 
   props: {

packages/sku/components/SkuRowItem.vue

@@ -1,7 +1,8 @@
 <template>
   <span v-if="isChoosable"
     @click="onSkuSelected"
-    :class="{ 'van-sku-row__item': true, 'van-sku-row__item--active': isChoosed }">
+    class="van-sku-row__item"
+    :class="{ 'van-sku-row__item--active': isChoosed }">
     {{ skuValue.name }}
   </span>
   <span v-else class="van-sku-row__item van-sku-row__item--disabled">{{ skuValue.name }}</span>

packages/steps/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['van-steps', `van-steps--${direction}`]">
+  <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">
         <slot name="icon">

packages/tab/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['van-tab__pane', { 'van-tab__pane--select': key === $parent.curActive }]">
+  <div class="van-tab__pane" :class="{ 'van-tab__pane--select': key === $parent.curActive }">
     <slot></slot>
   </div>
 </template>

packages/tabbar-item/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :class="['van-tabbar-item', { 'van-tabbar-item--active': active }]" @click="onClick">
-    <div :class="['van-tabbar-item__icon', { 'van-tabbar-item__icon-dot': dot }]">
+  <div class="van-tabbar-item" :class="{ 'van-tabbar-item--active': active }" @click="onClick">
+    <div class="van-tabbar-item__icon" :class="{ 'van-tabbar-item__icon-dot': dot }">
       <slot name="icon">
         <van-icon v-if="icon" :name="icon" />
       </slot>

packages/tabbar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['van-tabbar', 'van-hairline--top-bottom', { 'van-tabbar--fixed': fixed }]">
+  <div class="van-tabbar van-hairline--top-bottom" :class="{ 'van-tabbar--fixed': fixed }">
     <slot></slot>
   </div>
 </template>

packages/tabs/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van-tabs" :class="[`van-tabs--${type}`]">
+  <div class="van-tabs" :class="`van-tabs--${type}`">
     <div class="van-tabs__nav-wrap" v-if="type === 'line' && tabs.length > swipeThreshold">
       <div class="van-tabs__swipe" ref="swipe">
         <div class="van-tabs__nav van-tabs__nav--line">
@@ -20,7 +20,7 @@
     <div
       v-else
       class="van-tabs__nav"
-      :class="[`van-tabs__nav--${this.type}`]"
+      :class="`van-tabs__nav--${this.type}`"
     >
       <div class="van-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
       <div

packages/tag/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <span :class="['van-tag', 'van-hairline--surround', { [`van-tag--${type}`]: type, 'van-tag--plain': plain, 'van-tag--mark': mark }]">
+  <span class="van-tag van-hairline--surround" :class="{ [`van-tag--${type}`]: type, 'van-tag--plain': plain, 'van-tag--mark': mark }">
     <slot></slot>
   </span>
 </template>

packages/toast/toast.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="van-toast-fade">
     <div class="van-toast-wrapper" v-show="visible">
-      <div :class="['van-toast', `van-toast--${displayStyle}`, `van-toast--${position}`]">
+      <div class="van-toast" :class="[`van-toast--${displayStyle}`, `van-toast--${position}`]">
         <!-- text only -->
         <div v-if="displayStyle === 'text'">{{ message }}</div>
         <div v-if="displayStyle === 'html'" v-html="message" />
@@ -13,7 +13,7 @@
           <div v-if="message" class="van-toast__text">{{ message }}</div>
         </template>
       </div>
-      <div :class="['van-toast__overlay', { 'van-toast__overlay--mask': mask }]" v-if="forbidClick || mask" />
+      <div class="van-toast__overlay" :class="{ 'van-toast__overlay--mask': mask }" v-if="forbidClick || mask" />
     </div>
   </transition>
 </template>

packages/vant-css/scripts/icon-template.css

@@ -6,7 +6,6 @@
 }
 
 .van-icon {
-  width: 1em;
   display: inline-block;
   font: normal normal normal 14px/1 "<%= fontName %>";
   font-size: inherit;

packages/vant-css/src/icon.css

@@ -6,7 +6,6 @@
 }
 
 .van-icon {
-  width: 1em;
   display: inline-block;
   font: normal normal normal 14px/1 "vant-icon";
   font-size: inherit;

packages/vant-css/src/picker.css

@@ -20,12 +20,12 @@
   }
 
   &__cancel {
-    color: #3388FF;
+    color: $blue;
     float: left;
   }
 
   &__confirm {
-    color: #3388FF;
+    color: $blue;
     float: right;
   }
 

packages/vant-css/src/search.css

@@ -65,18 +65,15 @@
     transform: translateY(-50%);
     left: 10px;
     font-size: 16px;
-    line-height: 1;
   }
 
   .van-icon-clear {
     font-size: 14px;
-    line-height: 16px;
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
-    /* 增加 clear 点击区域 */
-    padding: 5px;
-    color: #888;
+    padding: 5px; /* increase click area */
+    color: $gray-dark;
   }
 }