[bugfix] Badge: active prop not work (#569)

dist/action-sheet/index.wxml

@@ -1,9 +1,9 @@
 <van-popup
   show="{{ show }}"
-  overlay="{{ overlay }}"
-  close-on-click-overlay="{{ closeOnClickOverlay }}"
-  custom-class="van-action-sheet {{ title ? 'van-action-sheet--withtitle' : '' }}"
   position="bottom"
+  overlay="{{ overlay }}"
+  custom-class="van-action-sheet"
+  close-on-click-overlay="{{ closeOnClickOverlay }}"
   bind:close="onClose"
 >
   <view wx:if="{{ title }}" class="van-hairline--top-bottom van-action-sheet__header">

dist/action-sheet/index.wxss

@@ -1 +1 @@
-.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #eee}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}.van-action-sheet{color:#333;max-height:90%;overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:#f8f8f8}.van-action-sheet--withtitle{background-color:#fff}.van-action-sheet__cancel,.van-action-sheet__item{height:50px;line-height:50px;font-size:16px;text-align:center;background-color:#fff}.van-action-sheet__cancel:active,.van-action-sheet__item:active{background-color:#e8e8e8}.van-action-sheet__item--disabled{color:#c9c9c9}.van-action-sheet__item--disabled:active{background-color:#fff}.van-action-sheet__name,.van-action-sheet__subname{display:inline-block}.van-action-sheet__subname{font-size:12px;color:#666;margin-left:5px}.van-action-sheet__loading{display:inline-block}.van-action-sheet__cancel{margin-top:10px}.van-action-sheet__header{font-size:16px;line-height:44px;text-align:center}.van-action-sheet__close{top:0;right:0;padding:0 15px;font-size:18px!important;color:#999;position:absolute!important;line-height:inherit!important}
+.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #eee}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}.van-action-sheet{color:#333;max-height:90%;overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:#f8f8f8}.van-action-sheet__cancel,.van-action-sheet__item{height:50px;line-height:50px;font-size:16px;text-align:center;background-color:#fff}.van-action-sheet__cancel:active,.van-action-sheet__item:active{background-color:#e8e8e8}.van-action-sheet__item--disabled{color:#c9c9c9}.van-action-sheet__item--disabled:active{background-color:#fff}.van-action-sheet__name,.van-action-sheet__subname{display:inline-block}.van-action-sheet__subname{font-size:12px;color:#666;margin-left:5px}.van-action-sheet__loading{display:inline-block}.van-action-sheet__cancel{margin-top:10px}.van-action-sheet__header{font-size:16px;line-height:44px;text-align:center}.van-action-sheet__close{top:0;right:0;padding:0 15px;font-size:18px!important;color:#999;position:absolute!important;line-height:inherit!important}

dist/badge-group/index.js

@@ -29,7 +29,7 @@ create({
     badges: []
   },
 
-  attached() {
+  created() {
     this.currentActive = -1;
   },
 
@@ -46,13 +46,15 @@ create({
         return;
       }
 
-      if (this.currentActive !== -1) {
+      if (this.currentActive !== -1 && badges[this.currentActive]) {
         this.$emit('change', active);
         badges[this.currentActive].setActive(false);
       }
 
-      badges[active].setActive(true);
-      this.currentActive = active;
+      if (badges[active]) {
+        badges[active].setActive(true);
+        this.currentActive = active;
+      }
     }
   }
 });

dist/button/index.js

@@ -1,35 +1,37 @@
 import { create } from '../common/create';
-import { classNames } from '../common/class-names';
 import { button } from '../mixins/button';
 
-const booleanProp = {
-  type: Boolean,
-  observer: 'setClasses'
-};
-
 create({
   mixins: [button],
 
   props: {
+    plain: Boolean,
+    block: Boolean,
+    square: Boolean,
+    loading: Boolean,
+    disabled: Boolean,
     type: {
       type: String,
-      value: 'default',
-      observer: 'setClasses'
+      value: 'default'
     },
     size: {
       type: String,
-      value: 'normal',
-      observer: 'setClasses'
-    },
-    plain: booleanProp,
-    block: booleanProp,
-    square: booleanProp,
-    loading: booleanProp,
-    disabled: booleanProp
+      value: 'normal'
+    }
   },
 
-  attached() {
-    this.setClasses();
+  computed: {
+    classes() {
+      const { type, size, plain, disabled, loading, square, block } = this.data;
+      return this.classNames(`van-button--${type}`, `van-button--${size}`, {
+        'van-button--block': block,
+        'van-button--plain': plain,
+        'van-button--square': square,
+        'van-button--loading': loading,
+        'van-button--disabled': disabled,
+        'van-button--unclickable': disabled || loading
+      });
+    }
   },
 
   methods: {
@@ -37,20 +39,6 @@ create({
       if (!this.data.disabled && !this.data.loading) {
         this.$emit('click');
       }
-    },
-
-    setClasses() {
-      const { type, size, plain, disabled, loading, square, block } = this.data;
-      this.setData({
-        classes: classNames(`van-button--${type}`, `van-button--${size}`, {
-          'van-button--block': block,
-          'van-button--plain': plain,
-          'van-button--square': square,
-          'van-button--loading': loading,
-          'van-button--disabled': disabled,
-          'van-button--unclickable': disabled || loading
-        })
-      });
     }
   }
 });

dist/cell/index.js

@@ -4,9 +4,7 @@ create({
   classes: [
     'title-class',
     'label-class',
-    'value-class',
-    'left-icon-class',
-    'right-icon-class'
+    'value-class'
   ],
 
   props: {
@@ -21,7 +19,6 @@ create({
     clickable: Boolean,
     titleWidth: String,
     customStyle: String,
-    arrowDirection: String,
     linkType: {
       type: String,
       value: 'navigateTo'
@@ -32,6 +29,23 @@ create({
     }
   },
 
+  computed: {
+    cellClass() {
+      const { data } = this;
+      return this.classNames('custom-class', 'van-cell', {
+        'van-hairline': data.border,
+        'van-cell--center': data.center,
+        'van-cell--required': data.required,
+        'van-cell--clickable': data.isLink || data.clickable
+      });
+    },
+
+    titleStyle() {
+      const { titleWidth } = this.data;
+      return titleWidth ? `max-width: ${titleWidth};min-width: ${titleWidth}` : '';
+    }
+  },
+
   methods: {
     onClick() {
       const { url } = this.data;

dist/cell/index.wxml

@@ -1,12 +1,20 @@
 <view
-  class="custom-class van-cell {{ center ? 'van-cell--center' : '' }} {{ required ? 'van-cell--required' : '' }} {{ isLink || clickable ? 'van-cell--clickable' : '' }} {{ border ? 'van-hairline' : '' }}"  
+  class="{{ cellClass }}"  
   style="{{ customStyle }}"
   bind:tap="onClick"
 >
-  <van-icon wx:if="{{ icon }}" custom-class="van-cell__left-icon left-icon-class" name="{{ icon }}" />
+  <van-icon
+    wx:if="{{ icon }}"
+    name="{{ icon }}"
+    custom-class="van-cell__left-icon"
+  />
   <slot wx:else name="icon" />
 
-  <view wx:if="{{ title }}" class="van-cell__title title-class" style="{{ titleWidth ? 'max-width: ' + titleWidth + ';min-width: ' + titleWidth : '' }}">
+  <view
+    wx:if="{{ title }}"
+    style="{{ titleStyle }}"
+    class="van-cell__title title-class"
+  >
     {{ title }}
     <view wx:if="{{ label }}" class="van-cell__label label-class">{{ label }}</view>
   </view>
@@ -20,7 +28,7 @@
   <van-icon
     wx:if="{{ isLink }}"
     name="arrow"
-    custom-class="van-cell__right-icon right-icon-class {{ arrowDirection ? 'van-cell__right-icon--' + arrowDirection : '' }}"
+    custom-class="van-cell__right-icon"
   />
   <slot wx:else name="right-icon" />
 

dist/cell/index.wxss

@@ -1 +1 @@
-.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #eee}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}.van-cell{width:100%;display:-webkit-box;display:-webkit-flex;display:flex;padding:10px 15px;box-sizing:border-box;line-height:24px;position:relative;background-color:#fff;color:#333;font-size:14px}.van-cell::after{left:15px;right:0;width:auto;-webkit-transform:scale(1,.5);transform:scale(1,.5);border-bottom-width:1px}.van-cell-group{background-color:#fff}.van-cell__label{font-size:12px;line-height:1.2;color:#666}.van-cell__title,.van-cell__value{-webkit-box-flex:1;-webkit-flex:1;flex:1}.van-cell__value{overflow:hidden;text-align:right;vertical-align:middle}.van-cell__left-icon{font-size:16px;line-height:24px;margin-right:5px;vertical-align:middle}.van-cell__right-icon{color:#999;font-size:12px;line-height:24px;margin-left:5px}.van-cell__right-icon--left::before{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.van-cell__right-icon--up::before{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-cell__right-icon--down::before{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.van-cell--clickable:active{background-color:#e8e8e8}.van-cell--required{overflow:visible}.van-cell--required::before{content:'*';position:absolute;left:7px;font-size:14px;color:#f44}.van-cell--center{-webkit-box-align:center;-webkit-align-items:center;align-items:center}
+.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #eee}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}.van-cell{width:100%;display:-webkit-box;display:-webkit-flex;display:flex;padding:10px 15px;box-sizing:border-box;line-height:24px;position:relative;background-color:#fff;color:#333;font-size:14px}.van-cell::after{left:15px;right:0;width:auto;-webkit-transform:scale(1,.5);transform:scale(1,.5);border-bottom-width:1px}.van-cell-group{background-color:#fff}.van-cell__label{font-size:12px;line-height:1.2;color:#666}.van-cell__title,.van-cell__value{-webkit-box-flex:1;-webkit-flex:1;flex:1}.van-cell__value{overflow:hidden;text-align:right;vertical-align:middle}.van-cell__left-icon{font-size:16px;line-height:24px;margin-right:5px;vertical-align:middle}.van-cell__right-icon{color:#999;font-size:12px;line-height:24px;margin-left:5px}.van-cell--clickable:active{background-color:#e8e8e8}.van-cell--required{overflow:visible}.van-cell--required::before{content:'*';position:absolute;left:7px;font-size:14px;color:#f44}.van-cell--center{-webkit-box-align:center;-webkit-align-items:center;align-items:center}

dist/col/index.js

@@ -12,6 +12,16 @@ create({
     offset: Number
   },
 
+  computed: {
+    classes() {
+      const { span, offset } = this.data;
+      return this.classNames('custom-class', 'van-col', {
+        [`van-col--${span}`]: span,
+        [`van-col--${offset}`]: offset
+      });
+    }
+  },
+
   methods: {
     setGutter(gutter) {
       const padding = `${gutter / 2}px`;

dist/col/index.wxml

@@ -1,5 +1,5 @@
 <view
-  class="custom-class van-col {{ span ? 'van-col--' + span : '' }} {{ offset ? 'van-col--offset-' + offset : '' }}"
+  class="{{ classes }}"
   style="{{ style }}"
 >
   <slot />

dist/common/create.js

@@ -1,4 +1,5 @@
 import { basic } from '../mixins/basic';
+import { observe } from '../mixins/observer/index';
 
 export function create(sfc) {
   // map props to properties
@@ -34,5 +35,6 @@ export function create(sfc) {
     sfc.behaviors.push('wx://form-field');
   }
 
+  observe(sfc);
   Component(sfc);
 };

dist/field/index.js

@@ -19,7 +19,6 @@ create({
     required: Boolean,
     iconClass: String,
     clearable: Boolean,
-    labelAlign: String,
     inputAlign: String,
     customClass: String,
     confirmType: String,
@@ -60,6 +59,18 @@ create({
     showClear: false
   },
 
+  computed: {
+    inputClass() {
+      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--${data.inputAlign}`]: data.inputAlign
+      });
+    }
+  },
+
   methods: {
     onInput(event) {
       const { value = '' } = event.detail || {};

dist/field/index.wxml

@@ -7,13 +7,13 @@
   required="{{ required }}"
   custom-style="{{ customStyle }}"
   title-width="{{ titleWidth }}"
-  custom-class="{{ customClass }} van-field {{ labelAlign ? 'van-field--label-' + labelAlign : '' }}"
+  custom-class="van-field"
 >
   <slot name="label" slot="title" />
   <view class="van-field__body {{ type === 'textarea' ? 'van-field__body--textarea' : '' }}">
     <textarea
       wx:if="{{ type === 'textarea' }}"
-      class="input-class van-field__control van-field__textarea {{ inputAlign ? 'van-field--' + inputAlign : '' }} {{ error ? 'van-field--error' : '' }} {{ disabled ? 'van-field__control--disabled' : '' }}"
+      class="{{ inputClass }}"
       focus="{{ focus }}"
       value="{{ value }}"
       disabled="{{ disabled }}"
@@ -30,7 +30,7 @@
     />
     <input
       wx:else
-      class="input-class van-field__control {{ inputAlign ? 'van-field--' + inputAlign : '' }} {{ error ? 'van-field--error' : '' }} {{ disabled ? 'van-field__control--disabled' : '' }}"
+      class="{{ inputClass }}"
       type="{{ type }}"
       focus="{{ focus }}"
       value="{{ value }}"
@@ -49,6 +49,7 @@
     <van-icon
       wx:if="{{ showClear }}"
       name="clear"
+      class="van-field__clear-root"
       custom-class="van-field__clear"
       bind:touchstart="onClear"
     />

dist/field/index.wxss

@@ -1 +1 @@
-.van-field__body{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.van-field__body--textarea{min-height:24px}.van-field__control{border:0;margin:0;padding:0;width:100%;resize:none;display:block;text-align:left;box-sizing:border-box;line-height:inherit;background-color:transparent}.van-field__control--disabled{opacity:1;color:#666;background-color:transparent}.van-field__control--center{text-align:center}.van-field__control--right{text-align:right}.van-field__button,.van-field__clear,.van-field__icon-container{-webkit-flex-shrink:0;flex-shrink:0}.van-field__clear,.van-field__icon-container{padding:0 10px;line-height:inherit;margin-right:-10px;vertical-align:middle}.van-field__clear{color:#c9c9c9}.van-field__icon-container{color:#999}.van-field__icon{display:block;font-size:16px;line-height:inherit}.van-field__button{padding-left:10px}.van-field__error-message{color:#f44;font-size:12px;text-align:left}.van-field--error{color:#f44}.van-field--label-center .van-cell__title{text-align:center}.van-field--label-right .van-cell__title{text-align:right}
+.van-field__body{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.van-field__body--textarea{min-height:24px}.van-field__input{border:0;margin:0;padding:0;width:100%;height:24px;resize:none;display:block;text-align:left;min-height:24px;line-height:inherit;box-sizing:border-box;background-color:transparent}.van-field__input--disabled{opacity:1;color:#666;background-color:transparent}.van-field__input--center{text-align:center}.van-field__input--right{text-align:right}.van-field__clear-root{height:24px}.van-field__button,.van-field__clear,.van-field__icon-container{-webkit-flex-shrink:0;flex-shrink:0}.van-field__clear,.van-field__icon-container{padding:0 10px;line-height:inherit;margin-right:-10px;vertical-align:middle}.van-field__clear{color:#c9c9c9}.van-field__icon-container{color:#999}.van-field__icon{display:block;font-size:16px;line-height:inherit}.van-field__button{padding-left:10px}.van-field__error-message{color:#f44;font-size:12px;text-align:left}.van-field--error{color:#f44}

dist/mixins/basic.js

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

dist/mixins/observer/behavior.js

@@ -0,0 +1,34 @@
+export const behavior = Behavior({
+  created() {
+    if (!this.$options) {
+      return;
+    }
+
+    const cache = {};
+    const { setData } = this;
+    const { computed } = this.$options();
+    const keys = Object.keys(computed);
+
+    const calcComputed = () => {
+      const needUpdate = {};
+      keys.forEach(key => {
+        const value = computed[key].call(this);
+
+        if (cache[key] !== value) {
+          cache[key] = needUpdate[key] = value;
+        }
+      });
+
+      return needUpdate;
+    };
+
+    this.setData = (data, callback) => {
+      data && setData.call(this, data, callback);
+      setData.call(this, calcComputed());
+    };
+  },
+
+  attached() {
+    this.setData();
+  }
+});

dist/mixins/observer/index.js

@@ -0,0 +1,14 @@
+import { behavior } from './behavior';
+import { observeProps } from './props';
+
+export function observe(sfc) {
+  if (sfc.computed) {
+    sfc.behaviors.push(behavior);
+    sfc.methods = sfc.methods || {};
+    sfc.methods.$options = () => sfc;
+
+    if (sfc.properties) {
+      observeProps(sfc.properties);
+    }
+  }
+}

dist/mixins/observer/props.js

@@ -0,0 +1,25 @@
+export function observeProps(props) {
+  if (!props) {
+    return;
+  }
+
+  Object.keys(props).forEach(key => {
+    let prop = props[key];
+    if (prop === null || !prop.type) {
+      prop = { type: prop };
+    }
+
+    let { observer } = prop;
+    prop.observer = function() {
+      if (observer) {
+        if (typeof observer === 'string') {
+          observer = this[observer];
+        }
+        observer.apply(this, arguments);
+      }
+      this.setData();
+    };
+
+    props[key] = prop;
+  });
+}

example/pages/badge/index.wxml

@@ -1,6 +1,6 @@
 <demo-block title="基础用法">
   <view class="container">
-    <van-badge-group active="0" bind:change="onChange" custom-class="group">
+    <van-badge-group bind:change="onChange" custom-class="group">
       <van-badge title="标签名称" />
       <van-badge title="标签名称" info="8" />
       <van-badge title="标签名称" info="99" />

packages/badge-group/index.js

@@ -29,7 +29,7 @@ create({
     badges: []
   },
 
-  attached() {
+  created() {
     this.currentActive = -1;
   },
 
@@ -46,13 +46,15 @@ create({
         return;
       }
 
-      if (this.currentActive !== -1) {
+      if (this.currentActive !== -1 && badges[this.currentActive]) {
         this.$emit('change', active);
         badges[this.currentActive].setActive(false);
       }
 
-      badges[active].setActive(true);
-      this.currentActive = active;
+      if (badges[active]) {
+        badges[active].setActive(true);
+        this.currentActive = active;
+      }
     }
   }
 });