[improvement] use wxs.bem instead of computed classNames (#1051)

packages/checkbox/index.ts

@@ -24,18 +24,6 @@ VantComponent({
   },
 
   computed: {
-    iconClass(): string {
-      const { disabled, value, shape } = this.data;
-      return this.classNames(
-        'van-checkbox__icon',
-        `van-checkbox__icon--${shape}`,
-        {
-          'van-checkbox__icon--disabled': disabled,
-          'van-checkbox__icon--checked': value
-        }
-      );
-    },
-
     iconStyle(): string {
       const { value, disabled, checkedColor } = this.data;
       if (checkedColor && value && !disabled) {

packages/checkbox/index.wxml

@@ -1,10 +1,12 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="van-checkbox custom-class">
   <view class="van-checkbox__icon-wrap" bindtap="toggle">
     <slot wx:if="{{ useIconSlot }}" name="icon" />
     <van-icon
       wx:else
       name="success"
-      class="{{ iconClass }}"
+      class="{{ utils.bem('checkbox__icon', [shape, { disabled, checked: value }]) }}"
       style="{{ iconStyle }}"
       custom-class="icon-class"
       custom-style="line-height: 20px;"

packages/col/index.ts

@@ -15,16 +15,6 @@ VantComponent({
     style: ''
   },
 
-  computed: {
-    classes(): string {
-      const { span, offset } = this.data;
-      return this.classNames('van-col', {
-        [`van-col--${span}`]: span,
-        [`van-col--offset-${offset}`]: offset
-      });
-    }
-  },
-
   methods: {
     setGutter(gutter: number) {
       const padding = `${gutter / 2}px`;

packages/col/index.wxml

@@ -1,5 +1,7 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  class="custom-class {{ classes }}"
+  class="custom-class {{ utils.bem('col', [span]) }} {{ offset ? 'van-col--offset-' + offset : '' }}"
   style="{{ style }}"
 >
   <slot />

packages/collapse-item/index.ts

@@ -12,11 +12,11 @@ VantComponent({
   },
 
   props: {
-    name: [String, Number],
+    name: null,
+    title: null,
+    value: null,
     icon: String,
     label: String,
-    title: [String, Number],
-    value: [String, Number],
     disabled: Boolean,
     border: {
       type: Boolean,
@@ -33,16 +33,6 @@ VantComponent({
     expanded: false
   },
 
-  computed: {
-    titleClass() {
-      const { disabled, expanded } = this.data;
-      return this.classNames('van-collapse-item__title', {
-        'van-collapse-item__title--disabled': disabled,
-        'van-collapse-item__title--expanded': expanded
-      });
-    }
-  },
-
   methods: {
     updateExpanded() {
       if (!this.parent) {

packages/collapse-item/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="van-collapse-item van-hairline--top custom-class">
   <van-cell
     title="{{ title }}"
@@ -6,7 +8,7 @@
     value="{{ value }}"
     label="{{ label }}"
     border="{{ border && expanded }}"
-    class="{{ titleClass }}"
+    class="{{ utils.bem('collapse-item__title', { disabled, expanded }) }}"
     right-icon-class="van-cell__right-icon"
     custom-class="van-cell"
     bind:click="onClick"

packages/common/class-names.ts

@@ -1,29 +0,0 @@
-const hasOwn = {}.hasOwnProperty;
-
-export function classNames(): string {
-  const classes = [];
-
-  for (let i = 0; i < arguments.length; i++) {
-    const arg = arguments[i];
-    if (!arg) continue;
-
-    const argType = typeof arg;
-
-    if (argType === 'string' || argType === 'number') {
-      classes.push(arg);
-    } else if (Array.isArray(arg) && arg.length) {
-      const inner = classNames.apply(null, arg);
-      if (inner) {
-        classes.push(inner);
-      }
-    } else if (argType === 'object') {
-      for (const key in arg) {
-        if (hasOwn.call(arg, key) && arg[key]) {
-          classes.push(key);
-        }
-      }
-    }
-  }
-
-  return classes.join(' ');
-};

packages/field/index.less

@@ -37,6 +37,10 @@
     &--right {
       text-align: right;
     }
+
+    &--error {
+      color: @red;
+    }
   }
 
   &__clear-root {
@@ -78,8 +82,4 @@
     font-size: 12px;
     text-align: left;
   }
-
-  &--error {
-    color: @red;
-  }
 }

packages/field/index.ts

@@ -64,18 +64,6 @@ VantComponent({
     showClear: false
   },
 
-  computed: {
-    inputClass(): string {
-      const { data } = this;
-      return this.classNames('input-class', 'van-field__input', {
-        'van-field--error': data.error,
-        'van-field__textarea': data.type === 'textarea',
-        'van-field__input--disabled': data.disabled,
-        [`van-field__input--${data.inputAlign}`]: data.inputAlign
-      });
-    }
-  },
-
   beforeCreate() {
     this.focused = false;
   },

packages/field/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <van-cell
   icon="{{ leftIcon }}"
   title="{{ label }}"
@@ -14,7 +16,7 @@
   <view class="van-field__body {{ type === 'textarea' ? 'van-field__body--textarea' : '' }}">
     <textarea
       wx:if="{{ type === 'textarea' }}"
-      class="{{ inputClass }}"
+      class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}"
       fixed="{{ fixed }}"
       focus="{{ focus }}"
       value="{{ value }}"
@@ -23,7 +25,7 @@
       auto-height="{{ autosize }}"
       placeholder="{{ placeholder }}"
       placeholder-style="{{ placeholderStyle }}"
-      placeholder-class="{{ error ? 'van-field--error' : '' }}"
+      placeholder-class="{{ error ? 'van-field__input--error' : '' }}"
       cursor-spacing="{{ cursorSpacing }}"
       adjust-position="{{ adjustPosition }}"
       show-confirm-bar="{{ showConfirmBar }}"
@@ -34,7 +36,7 @@
     />
     <input
       wx:else
-      class="{{ inputClass }}"
+      class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}"
       type="{{ type }}"
       focus="{{ focus }}"
       value="{{ value }}"
@@ -42,7 +44,7 @@
       maxlength="{{ maxlength }}"
       placeholder="{{ placeholder }}"
       placeholder-style="{{ placeholderStyle }}"
-      placeholder-class="{{ error ? 'van-field--error' : '' }}"
+      placeholder-class="{{ error ? 'van-field__input--error' : '' }}"
       confirm-type="{{ confirmType }}"
       confirm-hold="{{ confirmHold }}"
       cursor-spacing="{{ cursorSpacing }}"

packages/goods-action/index.ts

@@ -9,14 +9,5 @@ VantComponent({
       type: Boolean,
       value: true
     }
-  },
-
-  computed: {
-    rootClass() {
-      const { safeAreaInsetBottom, isIPhoneX } = this.data;
-      return this.classNames('van-goods-action', 'custom-class', {
-        [`van-goods-action--safe`]: isIPhoneX && safeAreaInsetBottom
-      });
-    }
   }
 });

packages/goods-action/index.wxml

@@ -1,3 +1,5 @@
-<view class="{{ rootClass }}">
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="custom-class {{ utils.bem('goods-action', { safe: isIPhoneX && safeAreaInsetBottom }) }}">
   <slot />
 </view>

packages/mixins/basic.ts

@@ -1,9 +1,5 @@
-import { classNames } from '../common/class-names';
-
 export const basic = Behavior({
   methods: {
-    classNames,
-
     $emit() {
       this.triggerEvent.apply(this, arguments);
     },

packages/popup/index.ts

@@ -31,16 +31,6 @@ VantComponent({
     }
   },
 
-  computed: {
-    popupClass() {
-      const { position, safeAreaInsetBottom, isIPhoneX } = this.data;
-      return this.classNames('custom-class', 'van-popup', {
-        [`van-popup--${position}`]: position,
-        [`van-popup--safe`]: isIPhoneX && safeAreaInsetBottom && position === 'bottom'
-      });
-    }
-  },
-
   methods: {
     onClickOverlay() {
       this.$emit('click-overlay');

packages/popup/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <van-overlay
   wx:if="{{ inited && overlay }}"
   mask
@@ -8,7 +10,7 @@
 />
 <view
   wx:if="{{ inited }}"
-  class="{{ popupClass }}"
+  class="custom-class {{ utils.bem('popup', [position, { safe: isIPhoneX && safeAreaInsetBottom && position === 'bottom' }]) }}"
   style="z-index: {{ zIndex }}; -webkit-animation: van-{{ transition || position }}-{{ type }} {{ duration }}ms both; animation: van-{{ transition || position }}-{{ type }} {{ duration }}ms both; {{ display ? '' : 'display: none;' }}{{ customStyle }}"
   bind:animationend="onAnimationEnd"
 >

packages/radio/index.ts

@@ -19,17 +19,6 @@ VantComponent({
     checkedColor: String
   },
 
-  computed: {
-    iconClass(): string {
-      const { disabled, name, value } = this.data;
-      return this.classNames('van-radio__icon', {
-        'van-radio__icon--disabled': disabled,
-        'van-radio__icon--checked': !disabled && name === value,
-        'van-radio__icon--check': !disabled && name !== value
-      });
-    }
-  },
-
   methods: {
     emitChange(value) {
       const instance = this.getRelationNodes('../radio-group/index')[0] || this;

packages/radio/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="van-radio custom-class">
   <view class="van-radio__input">
     <radio-group bindchange="onChange">
@@ -9,7 +11,7 @@
       />
     </radio-group>
     <van-icon
-      class="{{ iconClass }}"
+      class="{{ utils.bem('radio__icon', { disabled, checked: !disabled && name === value, check: !disabled && name !== value }) }}"
       custom-class="icon-class"
       color="{{ value === name ? checkedColor : '' }}"
       name="{{ value === name ? 'checked' : 'check' }}"

packages/submit-bar/index.ts

@@ -44,13 +44,6 @@ VantComponent({
     tipStr() {
       const { tip } = this.data;
       return typeof tip === 'string' ? tip : '';
-    },
-
-    barClass() {
-      const { isIPhoneX, safeAreaInsetBottom } = this.data;
-      return this.classNames('van-submit-bar__bar', 'bar-class', {
-        'van-submit-bar__bar--safe': safeAreaInsetBottom && isIPhoneX
-      });
     }
   },
 

packages/submit-bar/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="van-submit-bar custom-class">
   <slot name="top" />
 
@@ -5,7 +7,7 @@
     {{ tipStr }}<slot name="tip" />
   </view>
 
-  <view class="{{ barClass }}">
+  <view class="bar-class {{ utils.bem('submit-bar__bar', { safe: safeAreaInsetBottom && isIPhoneX }) }}">
     <slot />
     <view class="van-submit-bar__text">
       <block wx:if="{{ hasPrice }}">

packages/switch/index.ts

@@ -24,13 +24,6 @@ VantComponent({
   },
 
   computed: {
-    classes(): string {
-      return this.classNames('van-switch', {
-        'van-switch--on': this.data.checked,
-        'van-switch--disabled': this.data.disabled
-      });
-    },
-
     style() {
       const backgroundColor = this.data.checked ? this.data.activeColor : this.data.inactiveColor;
       return `font-size: ${this.data.size}; ${ backgroundColor ? `background-color: ${backgroundColor}` : '' }`

packages/switch/index.wxml

@@ -1,6 +1,8 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
   style="{{ style }}"
-  class="custom-class {{ classes }}"
+  class="custom-class {{ utils.bem('switch', { on: checked, disabled }) }}"
   bind:tap="onClick"
 >
   <view class="van-switch__node node-class">

packages/tabbar/index.ts

@@ -42,16 +42,6 @@ VantComponent({
     currentActive: -1
   },
 
-  computed: {
-    tabbarClass() {
-      const { fixed, isIPhoneX, safeAreaInsetBottom } = this.data;
-      return this.classNames('custom-class', 'van-tabbar', 'van-hairline--top-bottom', {
-        'van-tabbar--fixed': fixed,
-        'van-tabbar--safe': isIPhoneX && safeAreaInsetBottom
-      });
-    }
-  },
-
   watch: {
     active(active) {
       this.set({ currentActive: active });

packages/tabbar/index.wxml

@@ -1,5 +1,7 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  class="{{ tabbarClass }}"
+  class="custom-class van-hairline--top-bottom {{ utils.bem('tabbar', { fixed, safe: isIPhoneX && safeAreaInsetBottom }) }}"
   style="{{ zIndex ? 'z-index: ' + zIndex : '' }}"
 >
   <slot />

packages/tag/index.ts

@@ -19,17 +19,6 @@ VantComponent({
   },
 
   computed: {
-    classes() {
-      const { data } = this;
-      return this.classNames('van-tag', {
-        'van-tag--mark': data.mark,
-        'van-tag--plain': data.plain,
-        'van-tag--round': data.round,
-        [`van-tag--${data.size}`]: data.size,
-        'van-hairline--surround': data.plain
-      });
-    },
-
     style() {
       const color = this.data.color || COLOR_MAP[this.data.type] || DEFAULT_COLOR;
       const key = this.data.plain ? 'color' : 'background-color';

packages/tag/index.wxml

@@ -1,5 +1,7 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  class="custom-class {{ classes }}"
+  class="custom-class {{ utils.bem('tag', [size, { mark, plain, round }]) }} {{ plain ? 'van-hairline--surround' : '' }}"
   style="{{ style }}"
 >
   <slot />

packages/wxs/bem.wxs

@@ -16,7 +16,7 @@ function traversing(mods, conf) {
     return;
   }
 
-  if (typeof conf === 'string') {
+  if (typeof conf === 'string' || typeof conf === 'number') {
     mods.push(conf);
   } else if (array.isArray(conf)) {
     conf.forEach(function(item) {