* [html5] bugfix:

  - fix waterfall: use headers below cells as footers.
  - fix issue WEEX-97.
  - fix click handler being invoked twice for switch.

html5/render/vue/README.md

@@ -193,11 +193,15 @@ vue: {
 
 * fix image lazyloading.
 
-#### 0.12.23
+#### 0.12.24
 
 * add try catch to accessing localStorage.
 * support image sprite.
 
+#### 0.12.25
+
+* fix indicator position in one page slider.
+
 ## component -> dom map
 
 | component | dom element | children | note |

html5/render/vue/components/scrollable/waterfall.js

@@ -93,35 +93,66 @@ function getWaterfall (weex) {
       _createChildren (h, rootStyle) {
         const slots = this.$slots.default || []
         this._headers = []
+        this._footers = []
         this._others = []
+        const len = slots.length
+
+        for (let i = 0; i < len; i++) {
+          const vnode = slots[i]
+          const tag = vnode.componentOptions && vnode.componentOptions.tag
+          if (tag === 'refresh' || tag === 'loading') {
+            continue
+          }
+          if (tag === 'cell') {
+            break
+          }
+          if (tag === 'header') {
+            this._headers.push(vnode)
+          }
+        }
+
+        for (let i = len - 1; i >= 0; i--) {
+          const vnode = slots[i]
+          const tag = vnode.componentOptions && vnode.componentOptions.tag
+          if (tag === 'refresh' || tag === 'loading') {
+            continue
+          }
+          if (tag === 'cell') {
+            break
+          }
+          if (tag === 'header') {
+            this._footers.push(vnode)
+          }
+        }
+
         this._cells = slots.filter(vnode => {
           if (!vnode.tag || !vnode.componentOptions) return false
           const tag = vnode.componentOptions.tag
           if (tag === 'refresh' || tag === 'loading') {
             this[`_${tag}`] = vnode
             return false
           }
-          if (tag === 'header') {
-            this._headers.push(vnode)
-            return false
-          }
           if (tag !== 'cell') {
             this._others.push(vnode)
             return false
           }
           return true
         })
+
         this._reCalc(rootStyle)
         this._genColumns(h)
         let children = []
         this._refresh && children.push(this._refresh)
-        children = children
-          .concat(this._headers)
-          .concat(this._others)
+        children = children.concat(this._headers)
+          // .concat(this._others)
         children.push(h('html:div', {
           ref: 'columns',
           staticClass: 'weex-waterfall-inner-columns weex-ct'
         }, this._columns))
+        children.push(h('html:div', {
+          ref: 'footers',
+          staticClass: 'weex-waterfall-footers weex-ct'
+        }, this._footers))
         this._loading && children.push(this._loading)
         return [
           h('article', {

html5/render/vue/components/switch.js

@@ -115,19 +115,34 @@ function getSwitch (weex) {
       }
     },
 
+    mounted () {
+      const el = this.$el
+      if (el && el.nodeType === 1) {
+        if (!this._removeClickHandler) {
+          const handler = evt => {
+            this.toggle()
+          }
+          this._removeClickHandler = el.removeEventListener.bind(el, 'click', handler)
+          el.addEventListener('click', handler)
+        }
+      }
+    },
+
+    beforeDestroy () {
+      const rm = this._removeClickHandler
+      if (rm) {
+        rm()
+        delete this._removeClickHandler
+      }
+    },
+
     render (createElement) {
       /* istanbul ignore next */
       // if (process.env.NODE_ENV === 'development') {
       //   validateStyles('switch', this.$vnode.data && this.$vnode.data.staticStyle)
       // }
       return createElement('span', {
         attrs: { 'weex-type': 'switch' },
-        on: {
-          click: event => {
-            this.$emit('click', event)
-            this.toggle()
-          }
-        },
         staticClass: this.wrapperClass,
         staticStyle: extractComponentStyle(this)
       }, [createElement('small', { staticClass: 'weex-switch-inner' })])

html5/render/vue/core/style.js

@@ -225,13 +225,13 @@ export function getComponentStyle (context, extract) {
     }
     return {}
   }
-  let style = {}
+  const style = {}
   let vnode = context.$vnode
   while (vnode) {
     extend(style, getStyle(vnode, extract))
     vnode = vnode.parent
   }
-  style = autoPrefix(style)
+  const prefixedStyle = autoPrefix(style)
   /**
    * when prefixed value is a array, it should be applied to element
    * during the next tick.
@@ -245,9 +245,9 @@ export function getComponentStyle (context, extract) {
    *      "linear-gradient(to top,#f5fefd,#ffffff)"]
    *  }
    */
-  for (const k in style) {
-    if (Array.isArray(style[k])) {
-      const vals = style[k]
+  for (const k in prefixedStyle) {
+    if (Array.isArray(prefixedStyle[k])) {
+      const vals = prefixedStyle[k]
       context.$nextTick(function () {
         const el = context.$el
         if (el) {
@@ -256,14 +256,20 @@ export function getComponentStyle (context, extract) {
           }
         }
       })
-      if (k !== 'position') { delete style[k] }
+      if (k !== 'position') {
+        /**
+         * Should not delete prefixedStyle[k] directly. Otherwise will
+         * trigger issue: https://issues.apache.org/jira/projects/WEEX/issues/WEEX-97
+         */
+        prefixedStyle[k] = style[k]
+      }
     }
   }
 
   /**
    * If position is 'sticky', then add it to the stickyChildren of the parent scroller.
    */
-  const pos = style.position
+  const pos = prefixedStyle.position
   const reg = /sticky$/
   if (pos === 'fixed') {
     context.$nextTick(function () {
@@ -274,7 +280,7 @@ export function getComponentStyle (context, extract) {
     })
   }
   else if (isArray(pos) && pos[0].match(reg) || (pos + '').match(reg)) {
-    delete style.position
+    delete prefixedStyle.position
     // use native sticky.
     if (supportSticky()) {
       context.$nextTick(function () {
@@ -304,7 +310,7 @@ export function getComponentStyle (context, extract) {
     }
   }
 
-  return style
+  return prefixedStyle
 }
 
 export function extractComponentStyle (context) {

package.json

@@ -4,7 +4,7 @@
   "subversion": {
     "browser": "0.5.0",
     "framework": "0.22.4",
-    "vue-render": "0.12.24",
+    "vue-render": "0.12.25",
     "transformer": ">=0.1.5 <0.5"
   },
   "description": "A framework for building Mobile cross-platform UI",

packages/weex-vue-render/README.md

@@ -193,11 +193,15 @@ vue: {
 
 * fix image lazyloading.
 
-#### 0.12.23
+#### 0.12.24
 
 * add try catch to accessing localStorage.
 * support image sprite.
 
+#### 0.12.25
+
+* fix indicator position in one page slider.
+
 ## component -> dom map
 
 | component | dom element | children | note |

packages/weex-vue-render/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weex-vue-render",
-  "version": "0.12.24",
+  "version": "0.12.25",
   "description": "Weex built-in components for Vue 2.x.",
   "license": "Apache-2.0",
   "main": "dist/index.common.js",