[breaking change] use es module (#499)

dist/behaviors/button.js

@@ -1,4 +1,4 @@
-module.exports = Behavior({
+export default Behavior({
   properties: {
     loading: Boolean,
     // 在自定义组件中，无法与外界的 form 组件联动，暂时不开放

dist/behaviors/touch.js

@@ -1,4 +1,4 @@
-module.exports = Behavior({
+export default Behavior({
   methods: {
     touchStart(event) {
       this.direction = '';

dist/behaviors/transition.js

@@ -0,0 +1,52 @@
+export default Behavior({
+  properties: {
+    customStyle: String,
+    show: {
+      value: true,
+      type: Boolean,
+      observer(value) {
+        if (value) {
+          this.show();
+        } else {
+          this.setData({
+            type: 'leave'
+          });
+        }
+      }
+    },
+    duration: {
+      type: Number,
+      value: 300
+    }
+  },
+
+  data: {
+    type: '',
+    inited: false,
+    display: false
+  },
+
+  attached() {
+    if (this.data.show) {
+      this.show();
+    }
+  },
+
+  methods: {
+    show() {
+      this.setData({
+        inited: true,
+        display: true,
+        type: 'enter'
+      });
+    },
+
+    onAnimationEnd() {
+      if (!this.data.show) {
+        this.setData({
+          display: false
+        });
+      }
+    }
+  }
+});

dist/button/behaviors.js

@@ -1,57 +0,0 @@
-module.exports = Behavior({
-  properties: {
-    loading: Boolean,
-    // 在自定义组件中，无法与外界的 form 组件联动，暂时不开放
-    // formType: String,
-    openType: String,
-    appParameter: String,
-    // 暂时不开放，直接传入无法设置样式
-    // hoverClass: {
-    //   type: String,
-    //   value: 'button-hover'
-    // },
-    hoverStopPropagation: Boolean,
-    hoverStartTime: {
-      type: Number,
-      value: 20
-    },
-    hoverStayTime: {
-      type: Number,
-      value: 70
-    },
-    lang: {
-      type: String,
-      value: 'en'
-    },
-    sessionFrom: {
-      type: String,
-      value: ''
-    },
-    sendMessageTitle: String,
-    sendMessagePath: String,
-    sendMessageImg: String,
-    showMessageCard: String
-  },
-
-  methods: {
-    bindgetuserinfo(event = {}) {
-      this.triggerEvent('getuserinfo', event.detail || {});
-    },
-
-    bindcontact(event = {}) {
-      this.triggerEvent('contact', event.detail || {});
-    },
-
-    bindgetphonenumber(event = {}) {
-      this.triggerEvent('getphonenumber', event.detail || {});
-    },
-
-    bindopensetting(event = {}) {
-      this.triggerEvent('opensetting', event.detail || {});
-    },
-
-    binderror(event = {}) {
-      this.triggerEvent('error', event.detail || {});
-    }
-  }
-});

dist/button/index.js

@@ -1,9 +1,5 @@
-const buttonBehaviors = require('../behaviors/button');
+import buttonBehaviors from '../behaviors/button';
-const classnames = require('../common/classnames');
+import classnames from '../common/classnames';
-
-const observer = function() {
-  this.setClasses();
-};
 
 Component({
   options: {
@@ -18,32 +14,32 @@ Component({
     type: {
       type: String,
       value: 'default',
-      observer
+      observer: 'setClasses'
     },
     size: {
       type: String,
       value: 'normal',
-      observer
+      observer: 'setClasses'
     },
     plain: {
       type: Boolean,
-      observer
+      observer: 'setClasses'
     },
     disabled: {
       type: Boolean,
-      observer
+      observer: 'setClasses'
     },
     loading: {
       type: Boolean,
-      observer
+      observer: 'setClasses'
     },
     block: {
       type: Boolean,
-      observer
+      observer: 'setClasses'
     },
     square: {
       type: Boolean,
-      observer
+      observer: 'setClasses'
     }
   },
 

dist/common/classnames.js

@@ -1,6 +1,6 @@
 const hasOwn = {}.hasOwnProperty;
 
-module.exports = function classNames() {
+export default function classNames() {
   const classes = [];
 
   for (let i = 0; i < arguments.length; i++) {

dist/popup/index.js

@@ -1,3 +1,5 @@
+import transitionBehaviors from '../behaviors/transition';
+
 Component({
   options: {
     addGlobalClass: true
@@ -8,9 +10,23 @@ Component({
     'overlay-class'
   ],
 
+  behaviors: [transitionBehaviors],
+
   properties: {
-    show: Boolean,
     overlayStyle: String,
+    show: {
+      value: false,
+      type: Boolean,
+      observer(value) {
+        if (value) {
+          this.show();
+        } else {
+          this.setData({
+            type: 'leave'
+          });
+        }
+      }
+    },
     overlay: {
       type: Boolean,
       value: true

dist/popup/index.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "van-overlay": "../overlay/index"
+  }
 }

dist/popup/index.wxml

@@ -1,9 +1,14 @@
-<view
+<van-overlay
-  wx:if="{{ overlay }}"
+  mask
-  class="overlay-class van-popup__overlay {{ show ? 'van-popup--show' : '' }}"
+  show="{{ overlay && show }}"
-  style="{{ overlayStyle }}"
+  custom-style="{{ overlayStyle }}"
-  bind:tap="onClickOverlay"
+  bind:click="onClickOverlay"
 />
-<view class="custom-class van-popup {{ position ? 'van-popup--' + position : '' }} {{ show ? 'van-popup--show' : '' }}">
+<view
+  wx:if="{{ inited }}"
+  class="custom-class van-popup {{ position ? 'van-popup--' + position : '' }}"
+  style="animation-name: van-{{ position }}-{{ type }}; animation-duration: {{ duration }}ms; {{ display ? '' : 'display: none;' }}"
+  bind:animationend="onAnimationEnd"
+>
   <slot />
 </view>

dist/popup/index.wxss

@@ -1 +1 @@
-.van-popup{top:50%;left:50%;z-index:11;max-height:100%;overflow-y:auto;box-sizing:border-box;background-color:#fff;-webkit-overflow-scrolling:touch;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-popup,.van-popup__overlay{display:none;position:fixed;-webkit-animation:van-fade-in .3s ease;animation:van-fade-in .3s ease}.van-popup__overlay{width:100%;height:100%;top:0;left:0;z-index:10;background-color:rgba(0,0,0,.7)}.van-popup--top{width:100%;top:0;right:auto;bottom:auto;left:50%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);-webkit-animation-name:van-popup-top;animation-name:van-popup-top}.van-popup--right{top:50%;right:0;bottom:auto;left:auto;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-webkit-animation-name:van-popup-right;animation-name:van-popup-right}.van-popup--bottom{width:100%;top:auto;bottom:0;right:auto;left:50%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);-webkit-animation-name:van-popup-bottom;animation-name:van-popup-bottom}.van-popup--left{top:50%;right:auto;bottom:auto;left:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-webkit-animation-name:van-popup-left;animation-name:van-popup-left}.van-popup--show{display:block}@-webkit-keyframes van-popup-top{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@keyframes van-popup-top{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@-webkit-keyframes van-popup-bottom{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@keyframes van-popup-bottom{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@-webkit-keyframes van-popup-left{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@keyframes van-popup-left{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@-webkit-keyframes van-popup-right{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}}@keyframes van-popup-right{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}
+.van-popup{top:50%;left:50%;z-index:11;position:fixed;max-height:100%;overflow-y:auto;box-sizing:border-box;background-color:#fff;-webkit-overflow-scrolling:touch;-webkit-animation:ease both;animation:ease both}.van-popup--center{-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-popup--top{width:100%;top:0;right:auto;bottom:auto;left:50%}.van-popup--right{top:50%;right:0;bottom:auto;left:auto}.van-popup--bottom{width:100%;top:auto;bottom:0;right:auto;left:50%}.van-popup--left{top:50%;right:auto;bottom:auto;left:0}@-webkit-keyframes van-center-enter{from{opacity:0}to{opacity:1}}@keyframes van-center-enter{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-center-leave{from{opacity:1}to{opacity:0}}@keyframes van-center-leave{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-bottom-enter{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes van-bottom-enter{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@-webkit-keyframes van-bottom-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@keyframes van-bottom-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@-webkit-keyframes van-top-enter{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes van-top-enter{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@-webkit-keyframes van-top-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@keyframes van-top-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@-webkit-keyframes van-left-enter{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@keyframes van-left-enter{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@-webkit-keyframes van-left-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@keyframes van-left-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@-webkit-keyframes van-right-enter{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@keyframes van-right-enter{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@-webkit-keyframes van-right-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}}@keyframes van-right-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}}

dist/slider/index.js

@@ -1,4 +1,4 @@
-const touchBehaviors = require('../behaviors/touch');
+import touchBehaviors from '../behaviors/touch';
 
 Component({
   options: {

dist/transition/index.js

@@ -1,3 +1,5 @@
+import transitionBehaviors from '../behaviors/transition';
+
 Component({
   options: {
     addGlobalClass: true
@@ -5,58 +7,12 @@ Component({
 
   externalClasses: ['custom-class'],
 
+  behaviors: [transitionBehaviors],
+
   properties: {
-    customStyle: String,
-    show: {
-      value: true,
-      type: Boolean,
-      observer(value) {
-        if (value) {
-          this.show();
-        } else {
-          this.setData({
-            type: 'leave'
-          });
-        }
-      }
-    },
     name: {
       type: String,
       value: 'fade'
-    },
-    duration: {
-      type: Number,
-      value: 300
-    }
-  },
-
-  data: {
-    type: '',
-    inited: false,
-    display: false
-  },
-
-  attached() {
-    if (this.data.show) {
-      this.show();
-    }
-  },
-
-  methods: {
-    show() {
-      this.setData({
-        inited: true,
-        display: true,
-        type: 'enter'
-      });
-    },
-
-    onAnimationEnd() {
-      if (!this.data.show) {
-        this.setData({
-          display: false
-        });
-      }
     }
   }
 });

dist/utils/index.js

@@ -7,7 +7,7 @@ function isObj(x) {
   return x !== null && (type === 'object' || type === 'function');
 }
 
-module.exports = {
+export default {
   isObj,
   isDef
 };

packages/behaviors/button.js

@@ -1,4 +1,4 @@
-module.exports = Behavior({
+export default Behavior({
   properties: {
     loading: Boolean,
     // 在自定义组件中，无法与外界的 form 组件联动，暂时不开放

packages/behaviors/touch.js

@@ -1,4 +1,4 @@
-module.exports = Behavior({
+export default Behavior({
   methods: {
     touchStart(event) {
       this.direction = '';

packages/behaviors/transition.js

@@ -1,4 +1,4 @@
-module.exports = Behavior({
+export default Behavior({
   properties: {
     customStyle: String,
     show: {

packages/button/index.js

@@ -1,9 +1,5 @@
-const buttonBehaviors = require('../behaviors/button');
+import buttonBehaviors from '../behaviors/button';
-const classnames = require('../common/classnames');
+import classnames from '../common/classnames';
-
-const observer = function() {
-  this.setClasses();
-};
 
 Component({
   options: {
@@ -18,32 +14,32 @@ Component({
     type: {
       type: String,
       value: 'default',
-      observer
+      observer: 'setClasses'
     },
     size: {
       type: String,
       value: 'normal',
-      observer
+      observer: 'setClasses'
     },
     plain: {
       type: Boolean,
-      observer
+      observer: 'setClasses'
     },
     disabled: {
       type: Boolean,
-      observer
+      observer: 'setClasses'
     },
     loading: {
       type: Boolean,
-      observer
+      observer: 'setClasses'
     },
     block: {
       type: Boolean,
-      observer
+      observer: 'setClasses'
     },
     square: {
       type: Boolean,
-      observer
+      observer: 'setClasses'
     }
   },
 

packages/common/classnames.js

@@ -1,6 +1,6 @@
 const hasOwn = {}.hasOwnProperty;
 
-module.exports = function classNames() {
+export default function classNames() {
   const classes = [];
 
   for (let i = 0; i < arguments.length; i++) {

packages/popup/index.js

@@ -1,4 +1,4 @@
-const transitionBehaviors = require('../behaviors/transition');
+import transitionBehaviors from '../behaviors/transition';
 
 Component({
   options: {

packages/slider/index.js

@@ -1,4 +1,4 @@
-const touchBehaviors = require('../behaviors/touch');
+import touchBehaviors from '../behaviors/touch';
 
 Component({
   options: {

packages/transition/index.js

@@ -1,4 +1,4 @@
-const transitionBehaviors = require('../behaviors/transition');
+import transitionBehaviors from '../behaviors/transition';
 
 Component({
   options: {

packages/utils/index.js

@@ -7,7 +7,7 @@ function isObj(x) {
   return x !== null && (type === 'object' || type === 'function');
 }
 
-module.exports = {
+export default {
   isObj,
   isDef
 };