[05/18] incubator-weex git commit: Merge branch 'v0.10.0-playground' into 0.11-dev

[cx...@apache.org]

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/93063f14/android/playground/app/src/main/assets/vue/showcase/progress.js
----------------------------------------------------------------------
diff --git a/android/playground/app/src/main/assets/vue/showcase/progress.js b/android/playground/app/src/main/assets/vue/showcase/progress.js
new file mode 100644
index 0000000..8ed8cf0
--- /dev/null
+++ b/android/playground/app/src/main/assets/vue/showcase/progress.js
@@ -0,0 +1,336 @@
+// { "framework": "Vue" }
+
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* script */
+	__vue_exports__ = __webpack_require__(541)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(542)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/showcase/progress.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+	module.exports.el = 'true'
+	new Vue(module.exports)
+
+
+/***/ },
+
+/***/ 383:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(384)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(385)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(386)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/include/panel.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 384:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "panel": {
+	    "marginBottom": 20,
+	    "backgroundColor": "#ffffff",
+	    "borderColor": "#dddddd",
+	    "borderWidth": 1
+	  },
+	  "panel-primary": {
+	    "borderColor": "rgb(40,96,144)"
+	  },
+	  "panel-success": {
+	    "borderColor": "rgb(76,174,76)"
+	  },
+	  "panel-info": {
+	    "borderColor": "rgb(70,184,218)"
+	  },
+	  "panel-warning": {
+	    "borderColor": "rgb(238,162,54)"
+	  },
+	  "panel-danger": {
+	    "borderColor": "rgb(212,63,58)"
+	  },
+	  "panel-header": {
+	    "backgroundColor": "#f5f5f5",
+	    "fontSize": 40,
+	    "color": "#333333"
+	  },
+	  "panel-header-primary": {
+	    "backgroundColor": "rgb(40,96,144)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-success": {
+	    "backgroundColor": "rgb(92,184,92)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-info": {
+	    "backgroundColor": "rgb(91,192,222)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-warning": {
+	    "backgroundColor": "rgb(240,173,78)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-danger": {
+	    "backgroundColor": "rgb(217,83,79)",
+	    "color": "#ffffff"
+	  }
+	}
+
+/***/ },
+
+/***/ 385:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    type: { default: 'default' },
+	    title: { default: '' },
+	    paddingBody: { default: 20 },
+	    paddingHead: { default: 20 },
+	    dataClass: { default: '' }, // FIXME transfer class
+	    border: { default: 0 }
+	  }
+	};
+
+/***/ },
+
+/***/ 386:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    class: ['panel', 'panel-' + _vm.type],
+	    style: {
+	      borderWidth: _vm.border
+	    }
+	  }, [_h('text', {
+	    class: ['panel-header', 'panel-header-' + _vm.type],
+	    style: {
+	      paddingTop: _vm.paddingHead,
+	      paddingBottom: _vm.paddingHead,
+	      paddingLeft: _vm.paddingHead * 1.5,
+	      paddingRight: _vm.paddingHead * 1.5
+	    }
+	  }, [_vm._s(_vm.title)]), _h('div', {
+	    class: ['panel-body', 'panel-body-' + _vm.type],
+	    style: {
+	      paddingTop: _vm.paddingBody,
+	      paddingBottom: _vm.paddingBody,
+	      paddingLeft: _vm.paddingBody * 1.5,
+	      paddingRight: _vm.paddingBody * 1.5
+	    }
+	  }, [_vm._t("default")])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 541:
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	var INC = 20;
+	module.exports = {
+	  data: function data() {
+	    return {
+	      fullW: 600,
+	      w: 40
+	    };
+	  },
+	  components: {
+	    panel: __webpack_require__(383)
+	  },
+	  created: function created() {
+	    var me = this;
+	    setInterval(function () {
+	      if (me.w >= me.fullW) {
+	        me.w = 0;
+	      }
+	      me.w = me.w + INC >= me.fullW ? me.fullW : me.w + INC;
+	    }, 33);
+	  }
+	};
+
+/***/ },
+
+/***/ 542:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('scroller', [_h('panel', {
+	    attrs: {
+	      "title": "Basic",
+	      "type": "primary"
+	    }
+	  }, [_h('div', {
+	    style: {
+	      width: _vm.fullW,
+	      borderColor: '#333',
+	      borderWidth: 1,
+	      borderStyle: 'solid'
+	    }
+	  }, [_h('div', {
+	    style: {
+	      width: _vm.w,
+	      height: 60,
+	      backgroundColor: '#333'
+	    }
+	  })])])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ }
+
+/******/ });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/93063f14/android/playground/app/src/main/assets/vue/style/index.js
----------------------------------------------------------------------
diff --git a/android/playground/app/src/main/assets/vue/style/index.js b/android/playground/app/src/main/assets/vue/style/index.js
new file mode 100644
index 0000000..a1e6cd0
--- /dev/null
+++ b/android/playground/app/src/main/assets/vue/style/index.js
@@ -0,0 +1,1566 @@
+// { "framework": "Vue" }
+
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(543)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(544)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(557)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/style/index.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+	module.exports.el = 'true'
+	new Vue(module.exports)
+
+
+/***/ },
+
+/***/ 383:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(384)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(385)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(386)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/include/panel.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 384:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "panel": {
+	    "marginBottom": 20,
+	    "backgroundColor": "#ffffff",
+	    "borderColor": "#dddddd",
+	    "borderWidth": 1
+	  },
+	  "panel-primary": {
+	    "borderColor": "rgb(40,96,144)"
+	  },
+	  "panel-success": {
+	    "borderColor": "rgb(76,174,76)"
+	  },
+	  "panel-info": {
+	    "borderColor": "rgb(70,184,218)"
+	  },
+	  "panel-warning": {
+	    "borderColor": "rgb(238,162,54)"
+	  },
+	  "panel-danger": {
+	    "borderColor": "rgb(212,63,58)"
+	  },
+	  "panel-header": {
+	    "backgroundColor": "#f5f5f5",
+	    "fontSize": 40,
+	    "color": "#333333"
+	  },
+	  "panel-header-primary": {
+	    "backgroundColor": "rgb(40,96,144)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-success": {
+	    "backgroundColor": "rgb(92,184,92)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-info": {
+	    "backgroundColor": "rgb(91,192,222)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-warning": {
+	    "backgroundColor": "rgb(240,173,78)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-danger": {
+	    "backgroundColor": "rgb(217,83,79)",
+	    "color": "#ffffff"
+	  }
+	}
+
+/***/ },
+
+/***/ 385:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    type: { default: 'default' },
+	    title: { default: '' },
+	    paddingBody: { default: 20 },
+	    paddingHead: { default: 20 },
+	    dataClass: { default: '' }, // FIXME transfer class
+	    border: { default: 0 }
+	  }
+	};
+
+/***/ },
+
+/***/ 386:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    class: ['panel', 'panel-' + _vm.type],
+	    style: {
+	      borderWidth: _vm.border
+	    }
+	  }, [_h('text', {
+	    class: ['panel-header', 'panel-header-' + _vm.type],
+	    style: {
+	      paddingTop: _vm.paddingHead,
+	      paddingBottom: _vm.paddingHead,
+	      paddingLeft: _vm.paddingHead * 1.5,
+	      paddingRight: _vm.paddingHead * 1.5
+	    }
+	  }, [_vm._s(_vm.title)]), _h('div', {
+	    class: ['panel-body', 'panel-body-' + _vm.type],
+	    style: {
+	      paddingTop: _vm.paddingBody,
+	      paddingBottom: _vm.paddingBody,
+	      paddingLeft: _vm.paddingBody * 1.5,
+	      paddingRight: _vm.paddingBody * 1.5
+	    }
+	  }, [_vm._t("default")])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 393:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(394)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(395)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(396)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/include/tip.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 394:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "tip": {
+	    "paddingLeft": 36,
+	    "paddingRight": 36,
+	    "paddingTop": 36,
+	    "paddingBottom": 36,
+	    "borderRadius": 10
+	  },
+	  "tip-txt": {
+	    "fontSize": 28
+	  },
+	  "tip-success": {
+	    "backgroundColor": "#dff0d8",
+	    "borderColor": "#d6e9c6"
+	  },
+	  "tip-txt-success": {
+	    "color": "#3c763d"
+	  },
+	  "tip-info": {
+	    "backgroundColor": "#d9edf7",
+	    "borderColor": "#bce8f1"
+	  },
+	  "tip-txt-info": {
+	    "color": "#31708f"
+	  },
+	  "tip-warning": {
+	    "backgroundColor": "#fcf8e3",
+	    "borderColor": "#faebcc"
+	  },
+	  "tip-txt-warning": {
+	    "color": "#8a6d3b"
+	  },
+	  "tip-danger": {
+	    "backgroundColor": "#f2dede",
+	    "borderColor": "#ebccd1"
+	  },
+	  "tip-txt-danger": {
+	    "color": "#a94442"
+	  }
+	}
+
+/***/ },
+
+/***/ 395:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    type: { default: 'success' },
+	    value: { default: '' }
+	  }
+	};
+
+/***/ },
+
+/***/ 396:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    class: ['tip', 'tip-' + _vm.type]
+	  }, [_h('text', {
+	    class: ['tip-txt', 'tip-txt-' + _vm.type]
+	  }, [_vm._s(_vm.value)])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 543:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "bg-item": {
+	    "width": 690,
+	    "marginBottom": 10
+	  }
+	}
+
+/***/ },
+
+/***/ 544:
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  components: {
+	    panel: __webpack_require__(383),
+	    styleBox: __webpack_require__(545),
+	    styleFlex: __webpack_require__(553),
+	    styleItem: __webpack_require__(548)
+	  }
+	};
+
+/***/ },
+
+/***/ 545:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(546)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(547)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(552)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/style/style-box.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 546:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "box": {
+	    "backgroundColor": "#f5f5f5",
+	    "width": 260,
+	    "height": 260,
+	    "paddingLeft": 40,
+	    "paddingTop": 40,
+	    "paddingRight": 40,
+	    "paddingBottom": 40,
+	    "marginLeft": 40,
+	    "marginTop": 40,
+	    "marginRight": 40,
+	    "marginBottom": 40,
+	    "borderWidth": 40,
+	    "borderColor": "#333333",
+	    "borderStyle": "solid"
+	  }
+	}
+
+/***/ },
+
+/***/ 547:
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  components: {
+	    panel: __webpack_require__(383),
+	    tip: __webpack_require__(393),
+	    styleItem: __webpack_require__(548)
+	  }
+	};
+
+/***/ },
+
+/***/ 548:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(549)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(550)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(551)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/style/style-item.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 549:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "item": {
+	    "marginRight": 10,
+	    "width": 160,
+	    "height": 75,
+	    "paddingLeft": 8,
+	    "paddingRight": 8,
+	    "paddingTop": 8,
+	    "paddingBottom": 8
+	  },
+	  "txt": {
+	    "color": "#eeeeee"
+	  }
+	}
+
+/***/ },
+
+/***/ 550:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    value: { default: '' },
+	    type: { default: '0' } // 0, 1
+	  },
+	  computed: {
+	    bgColor: function bgColor() {
+	      return this.type == '1' ? '#7BA3A8' : '#BEAD92';
+	    }
+	  }
+	};
+
+/***/ },
+
+/***/ 551:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('text', {
+	    staticClass: ["item", "txt"],
+	    style: {
+	      backgroundColor: _vm.bgColor
+	    },
+	    attrs: {
+	      "value": _vm.value
+	    }
+	  })
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 552:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', [_h('panel', {
+	    attrs: {
+	      "title": "Box Model",
+	      "padding-body": "0",
+	      "type": "primary"
+	    }
+	  }, [_h('text', {
+	    staticClass: ["box"]
+	  }, ["Box"])]), _h('panel', {
+	    attrs: {
+	      "title": "border",
+	      "type": "primary"
+	    }
+	  }, [_h('panel', {
+	    attrs: {
+	      "title": "border-width",
+	      "type": ""
+	    }
+	  }, [_h('div', {
+	    staticStyle: {
+	      flexDirection: "row"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderWidth: "2px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderWidth: "10px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderLeftWidth: "4px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderBottomWidth: "4px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "border-color",
+	      "type": ""
+	    }
+	  }, [_h('div', {
+	    staticStyle: {
+	      flexDirection: "row"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderWidth: "4px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderWidth: "4px",
+	      borderColor: "#ddd"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderWidth: "4px",
+	      borderColor: "red"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "border-style",
+	      "type": ""
+	    }
+	  }, [_h('tip', {
+	    staticStyle: {
+	      marginBottom: "10px"
+	    },
+	    attrs: {
+	      "type": "warning",
+	      "value": "just support four edges"
+	    }
+	  }), _h('div', {
+	    staticStyle: {
+	      flexDirection: "row"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderWidth: "4px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderStyle: "dashed",
+	      borderWidth: "4px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": "",
+	      "type": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderStyle: "dotted",
+	      borderWidth: "4px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "border-radius",
+	      "type": ""
+	    }
+	  }, [_h('div', {
+	    staticStyle: {
+	      flexDirection: "row"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      width: "75px",
+	      borderRadius: "38px"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderRadius: "20px"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderTopLeftRadius: "20px",
+	      borderTopRightRadius: "20px"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderBottomLeftRadius: "20px",
+	      borderBottomRightRadius: "20px"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  })])])])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 553:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(554)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(555)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(556)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/style/style-flex.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 554:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "row": {
+	    "flexDirection": "row",
+	    "marginBottom": 10
+	  },
+	  "row-align": {
+	    "height": 160,
+	    "borderWidth": 3,
+	    "borderColor": "#dddddd",
+	    "borderStyle": "solid"
+	  }
+	}
+
+/***/ },
+
+/***/ 555:
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  components: {
+	    panel: __webpack_require__(383),
+	    styleItem: __webpack_require__(548)
+	  }
+	};
+
+/***/ },
+
+/***/ 556:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', [_h('panel', {
+	    attrs: {
+	      "title": "flex-direction",
+	      "type": "primary"
+	    }
+	  }, [_h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      flexDirection: "row"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "value": "row"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "type": "1"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      flexDirection: "column"
+	    }
+	  }, [_h('style-item', {
+	    attrs: {
+	      "value": "column"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "type": "1"
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "justify-content",
+	      "type": "primary"
+	    }
+	  }, [_h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      justifyContent: "flex-start"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      justifyContent: "flex-end"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      justifyContent: "center"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      justifyContent: "space-between"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "align-items",
+	      "type": "primary"
+	    }
+	  }, [_h('div', {
+	    staticClass: ["row", "row-align"],
+	    staticStyle: {
+	      alignItems: "flex-start"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row", "row-align"],
+	    staticStyle: {
+	      alignItems: "flex-end"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row", "row-align"],
+	    staticStyle: {
+	      alignItems: "center"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row", "row-align"],
+	    staticStyle: {
+	      alignItems: "stretch"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "flex",
+	      "type": "primary"
+	    }
+	  }, [_h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      alignItems: "flex-start"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "value": "no flex"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "value": "no flex",
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "value": "no flex"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      alignItems: "flex-start"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "value": "no flex"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "1"
+	    },
+	    attrs: {
+	      "type": "1",
+	      "value": "flex:1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "2"
+	    },
+	    attrs: {
+	      "value": "flex:2"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      alignItems: "flex-start"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "1"
+	    },
+	    attrs: {
+	      "value": "flex:1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "1"
+	    },
+	    attrs: {
+	      "type": "1",
+	      "value": "flex:1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "1"
+	    },
+	    attrs: {
+	      "value": "flex:1"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      alignItems: "flex-start"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "1"
+	    },
+	    attrs: {
+	      "value": "flex:1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "2"
+	    },
+	    attrs: {
+	      "type": "1",
+	      "value": "flex:2"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "3"
+	    },
+	    attrs: {
+	      "value": "flex:3"
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "flex-wrap",
+	      "type": "primary"
+	    }
+	  }, [_h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      flexWrap: "wrap",
+	      backgroundColor: "grey",
+	      padding: "10"
+	    }
+	  }, [_h('style-item', {
+	    attrs: {
+	      "value": "1:wrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "2:wrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "3:wrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "4:wrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "5:wrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "6:wrap"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      flexWrap: "nowrap",
+	      backgroundColor: "grey",
+	      padding: "10"
+	    }
+	  }, [_h('style-item', {
+	    attrs: {
+	      "value": "1:nowrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "2:nowrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "3:nowrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "4:nowrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "5:nowrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "6:nowrap"
+	    }
+	  })])])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 557:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('scroller', [_h('style-box'), _h('style-flex'), _h('panel', {
+	    attrs: {
+	      "title": "opacity",
+	      "type": "primary"
+	    }
+	  }, [_h('div', {
+	    staticStyle: {
+	      flexDirection: "row"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      opacity: "1"
+	    },
+	    attrs: {
+	      "value": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      opacity: "0.9"
+	    },
+	    attrs: {
+	      "value": "0.9"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      opacity: "0.5"
+	    },
+	    attrs: {
+	      "value": "0.5"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      opacity: "0.2"
+	    },
+	    attrs: {
+	      "value": "0.2"
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "background-color",
+	      "type": "primary"
+	    }
+	  }, [_h('div', [_h('style-item', {
+	    staticClass: ["bg-item"],
+	    staticStyle: {
+	      backgroundColor: "#333"
+	    },
+	    attrs: {
+	      "value": "#333"
+	    }
+	  }), _h('style-item', {
+	    staticClass: ["bg-item"],
+	    staticStyle: {
+	      backgroundColor: "#333333"
+	    },
+	    attrs: {
+	      "value": "#333333"
+	    }
+	  }), _h('style-item', {
+	    staticClass: ["bg-item"],
+	    staticStyle: {
+	      backgroundColor: "rgb(238, 162, 54)"
+	    },
+	    attrs: {
+	      "value": "rgb()"
+	    }
+	  }), _h('style-item', {
+	    staticClass: ["bg-item"],
+	    staticStyle: {
+	      backgroundColor: "rgba(238, 162, 54, 0.5)"
+	    },
+	    attrs: {
+	      "value": "rgba()"
+	    }
+	  }), _h('style-item', {
+	    staticClass: ["bg-item"],
+	    staticStyle: {
+	      backgroundColor: "red"
+	    },
+	    attrs: {
+	      "value": "red"
+	    }
+	  })])])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ }
+
+/******/ });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/93063f14/android/playground/app/src/main/assets/vue/style/style-box.js
----------------------------------------------------------------------
diff --git a/android/playground/app/src/main/assets/vue/style/style-box.js b/android/playground/app/src/main/assets/vue/style/style-box.js
new file mode 100644
index 0000000..d018835
--- /dev/null
+++ b/android/playground/app/src/main/assets/vue/style/style-box.js
@@ -0,0 +1,780 @@
+// { "framework": "Vue" }
+
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(546)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(547)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(552)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/style/style-box.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+	module.exports.el = 'true'
+	new Vue(module.exports)
+
+
+/***/ },
+
+/***/ 383:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(384)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(385)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(386)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/include/panel.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 384:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "panel": {
+	    "marginBottom": 20,
+	    "backgroundColor": "#ffffff",
+	    "borderColor": "#dddddd",
+	    "borderWidth": 1
+	  },
+	  "panel-primary": {
+	    "borderColor": "rgb(40,96,144)"
+	  },
+	  "panel-success": {
+	    "borderColor": "rgb(76,174,76)"
+	  },
+	  "panel-info": {
+	    "borderColor": "rgb(70,184,218)"
+	  },
+	  "panel-warning": {
+	    "borderColor": "rgb(238,162,54)"
+	  },
+	  "panel-danger": {
+	    "borderColor": "rgb(212,63,58)"
+	  },
+	  "panel-header": {
+	    "backgroundColor": "#f5f5f5",
+	    "fontSize": 40,
+	    "color": "#333333"
+	  },
+	  "panel-header-primary": {
+	    "backgroundColor": "rgb(40,96,144)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-success": {
+	    "backgroundColor": "rgb(92,184,92)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-info": {
+	    "backgroundColor": "rgb(91,192,222)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-warning": {
+	    "backgroundColor": "rgb(240,173,78)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-danger": {
+	    "backgroundColor": "rgb(217,83,79)",
+	    "color": "#ffffff"
+	  }
+	}
+
+/***/ },
+
+/***/ 385:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    type: { default: 'default' },
+	    title: { default: '' },
+	    paddingBody: { default: 20 },
+	    paddingHead: { default: 20 },
+	    dataClass: { default: '' }, // FIXME transfer class
+	    border: { default: 0 }
+	  }
+	};
+
+/***/ },
+
+/***/ 386:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    class: ['panel', 'panel-' + _vm.type],
+	    style: {
+	      borderWidth: _vm.border
+	    }
+	  }, [_h('text', {
+	    class: ['panel-header', 'panel-header-' + _vm.type],
+	    style: {
+	      paddingTop: _vm.paddingHead,
+	      paddingBottom: _vm.paddingHead,
+	      paddingLeft: _vm.paddingHead * 1.5,
+	      paddingRight: _vm.paddingHead * 1.5
+	    }
+	  }, [_vm._s(_vm.title)]), _h('div', {
+	    class: ['panel-body', 'panel-body-' + _vm.type],
+	    style: {
+	      paddingTop: _vm.paddingBody,
+	      paddingBottom: _vm.paddingBody,
+	      paddingLeft: _vm.paddingBody * 1.5,
+	      paddingRight: _vm.paddingBody * 1.5
+	    }
+	  }, [_vm._t("default")])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 393:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(394)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(395)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(396)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/include/tip.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 394:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "tip": {
+	    "paddingLeft": 36,
+	    "paddingRight": 36,
+	    "paddingTop": 36,
+	    "paddingBottom": 36,
+	    "borderRadius": 10
+	  },
+	  "tip-txt": {
+	    "fontSize": 28
+	  },
+	  "tip-success": {
+	    "backgroundColor": "#dff0d8",
+	    "borderColor": "#d6e9c6"
+	  },
+	  "tip-txt-success": {
+	    "color": "#3c763d"
+	  },
+	  "tip-info": {
+	    "backgroundColor": "#d9edf7",
+	    "borderColor": "#bce8f1"
+	  },
+	  "tip-txt-info": {
+	    "color": "#31708f"
+	  },
+	  "tip-warning": {
+	    "backgroundColor": "#fcf8e3",
+	    "borderColor": "#faebcc"
+	  },
+	  "tip-txt-warning": {
+	    "color": "#8a6d3b"
+	  },
+	  "tip-danger": {
+	    "backgroundColor": "#f2dede",
+	    "borderColor": "#ebccd1"
+	  },
+	  "tip-txt-danger": {
+	    "color": "#a94442"
+	  }
+	}
+
+/***/ },
+
+/***/ 395:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    type: { default: 'success' },
+	    value: { default: '' }
+	  }
+	};
+
+/***/ },
+
+/***/ 396:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    class: ['tip', 'tip-' + _vm.type]
+	  }, [_h('text', {
+	    class: ['tip-txt', 'tip-txt-' + _vm.type]
+	  }, [_vm._s(_vm.value)])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 546:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "box": {
+	    "backgroundColor": "#f5f5f5",
+	    "width": 260,
+	    "height": 260,
+	    "paddingLeft": 40,
+	    "paddingTop": 40,
+	    "paddingRight": 40,
+	    "paddingBottom": 40,
+	    "marginLeft": 40,
+	    "marginTop": 40,
+	    "marginRight": 40,
+	    "marginBottom": 40,
+	    "borderWidth": 40,
+	    "borderColor": "#333333",
+	    "borderStyle": "solid"
+	  }
+	}
+
+/***/ },
+
+/***/ 547:
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  components: {
+	    panel: __webpack_require__(383),
+	    tip: __webpack_require__(393),
+	    styleItem: __webpack_require__(548)
+	  }
+	};
+
+/***/ },
+
+/***/ 548:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(549)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(550)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(551)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/style/style-item.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 549:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "item": {
+	    "marginRight": 10,
+	    "width": 160,
+	    "height": 75,
+	    "paddingLeft": 8,
+	    "paddingRight": 8,
+	    "paddingTop": 8,
+	    "paddingBottom": 8
+	  },
+	  "txt": {
+	    "color": "#eeeeee"
+	  }
+	}
+
+/***/ },
+
+/***/ 550:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    value: { default: '' },
+	    type: { default: '0' } // 0, 1
+	  },
+	  computed: {
+	    bgColor: function bgColor() {
+	      return this.type == '1' ? '#7BA3A8' : '#BEAD92';
+	    }
+	  }
+	};
+
+/***/ },
+
+/***/ 551:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('text', {
+	    staticClass: ["item", "txt"],
+	    style: {
+	      backgroundColor: _vm.bgColor
+	    },
+	    attrs: {
+	      "value": _vm.value
+	    }
+	  })
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 552:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', [_h('panel', {
+	    attrs: {
+	      "title": "Box Model",
+	      "padding-body": "0",
+	      "type": "primary"
+	    }
+	  }, [_h('text', {
+	    staticClass: ["box"]
+	  }, ["Box"])]), _h('panel', {
+	    attrs: {
+	      "title": "border",
+	      "type": "primary"
+	    }
+	  }, [_h('panel', {
+	    attrs: {
+	      "title": "border-width",
+	      "type": ""
+	    }
+	  }, [_h('div', {
+	    staticStyle: {
+	      flexDirection: "row"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderWidth: "2px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderWidth: "10px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderLeftWidth: "4px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderBottomWidth: "4px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "border-color",
+	      "type": ""
+	    }
+	  }, [_h('div', {
+	    staticStyle: {
+	      flexDirection: "row"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderWidth: "4px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderWidth: "4px",
+	      borderColor: "#ddd"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderWidth: "4px",
+	      borderColor: "red"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "border-style",
+	      "type": ""
+	    }
+	  }, [_h('tip', {
+	    staticStyle: {
+	      marginBottom: "10px"
+	    },
+	    attrs: {
+	      "type": "warning",
+	      "value": "just support four edges"
+	    }
+	  }), _h('div', {
+	    staticStyle: {
+	      flexDirection: "row"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      borderStyle: "solid",
+	      borderWidth: "4px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderStyle: "dashed",
+	      borderWidth: "4px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": "",
+	      "type": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderStyle: "dotted",
+	      borderWidth: "4px",
+	      borderColor: "#333"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "border-radius",
+	      "type": ""
+	    }
+	  }, [_h('div', {
+	    staticStyle: {
+	      flexDirection: "row"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      width: "75px",
+	      borderRadius: "38px"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderRadius: "20px"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderTopLeftRadius: "20px",
+	      borderTopRightRadius: "20px"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      borderBottomLeftRadius: "20px",
+	      borderBottomRightRadius: "20px"
+	    },
+	    attrs: {
+	      "value": ""
+	    }
+	  })])])])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ }
+
+/******/ });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/93063f14/android/playground/app/src/main/assets/vue/style/style-flex.js
----------------------------------------------------------------------
diff --git a/android/playground/app/src/main/assets/vue/style/style-flex.js b/android/playground/app/src/main/assets/vue/style/style-flex.js
new file mode 100644
index 0000000..b5e4e82
--- /dev/null
+++ b/android/playground/app/src/main/assets/vue/style/style-flex.js
@@ -0,0 +1,919 @@
+// { "framework": "Vue" }
+
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(554)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(555)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(556)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/style/style-flex.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+	module.exports.el = 'true'
+	new Vue(module.exports)
+
+
+/***/ },
+
+/***/ 383:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(384)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(385)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(386)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/include/panel.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 384:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "panel": {
+	    "marginBottom": 20,
+	    "backgroundColor": "#ffffff",
+	    "borderColor": "#dddddd",
+	    "borderWidth": 1
+	  },
+	  "panel-primary": {
+	    "borderColor": "rgb(40,96,144)"
+	  },
+	  "panel-success": {
+	    "borderColor": "rgb(76,174,76)"
+	  },
+	  "panel-info": {
+	    "borderColor": "rgb(70,184,218)"
+	  },
+	  "panel-warning": {
+	    "borderColor": "rgb(238,162,54)"
+	  },
+	  "panel-danger": {
+	    "borderColor": "rgb(212,63,58)"
+	  },
+	  "panel-header": {
+	    "backgroundColor": "#f5f5f5",
+	    "fontSize": 40,
+	    "color": "#333333"
+	  },
+	  "panel-header-primary": {
+	    "backgroundColor": "rgb(40,96,144)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-success": {
+	    "backgroundColor": "rgb(92,184,92)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-info": {
+	    "backgroundColor": "rgb(91,192,222)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-warning": {
+	    "backgroundColor": "rgb(240,173,78)",
+	    "color": "#ffffff"
+	  },
+	  "panel-header-danger": {
+	    "backgroundColor": "rgb(217,83,79)",
+	    "color": "#ffffff"
+	  }
+	}
+
+/***/ },
+
+/***/ 385:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    type: { default: 'default' },
+	    title: { default: '' },
+	    paddingBody: { default: 20 },
+	    paddingHead: { default: 20 },
+	    dataClass: { default: '' }, // FIXME transfer class
+	    border: { default: 0 }
+	  }
+	};
+
+/***/ },
+
+/***/ 386:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    class: ['panel', 'panel-' + _vm.type],
+	    style: {
+	      borderWidth: _vm.border
+	    }
+	  }, [_h('text', {
+	    class: ['panel-header', 'panel-header-' + _vm.type],
+	    style: {
+	      paddingTop: _vm.paddingHead,
+	      paddingBottom: _vm.paddingHead,
+	      paddingLeft: _vm.paddingHead * 1.5,
+	      paddingRight: _vm.paddingHead * 1.5
+	    }
+	  }, [_vm._s(_vm.title)]), _h('div', {
+	    class: ['panel-body', 'panel-body-' + _vm.type],
+	    style: {
+	      paddingTop: _vm.paddingBody,
+	      paddingBottom: _vm.paddingBody,
+	      paddingLeft: _vm.paddingBody * 1.5,
+	      paddingRight: _vm.paddingBody * 1.5
+	    }
+	  }, [_vm._t("default")])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 548:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(549)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(550)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(551)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/style/style-item.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+
+
+/***/ },
+
+/***/ 549:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "item": {
+	    "marginRight": 10,
+	    "width": 160,
+	    "height": 75,
+	    "paddingLeft": 8,
+	    "paddingRight": 8,
+	    "paddingTop": 8,
+	    "paddingBottom": 8
+	  },
+	  "txt": {
+	    "color": "#eeeeee"
+	  }
+	}
+
+/***/ },
+
+/***/ 550:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    value: { default: '' },
+	    type: { default: '0' } // 0, 1
+	  },
+	  computed: {
+	    bgColor: function bgColor() {
+	      return this.type == '1' ? '#7BA3A8' : '#BEAD92';
+	    }
+	  }
+	};
+
+/***/ },
+
+/***/ 551:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('text', {
+	    staticClass: ["item", "txt"],
+	    style: {
+	      backgroundColor: _vm.bgColor
+	    },
+	    attrs: {
+	      "value": _vm.value
+	    }
+	  })
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ },
+
+/***/ 554:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "row": {
+	    "flexDirection": "row",
+	    "marginBottom": 10
+	  },
+	  "row-align": {
+	    "height": 160,
+	    "borderWidth": 3,
+	    "borderColor": "#dddddd",
+	    "borderStyle": "solid"
+	  }
+	}
+
+/***/ },
+
+/***/ 555:
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  components: {
+	    panel: __webpack_require__(383),
+	    styleItem: __webpack_require__(548)
+	  }
+	};
+
+/***/ },
+
+/***/ 556:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', [_h('panel', {
+	    attrs: {
+	      "title": "flex-direction",
+	      "type": "primary"
+	    }
+	  }, [_h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      flexDirection: "row"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "value": "row"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "type": "1"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      flexDirection: "column"
+	    }
+	  }, [_h('style-item', {
+	    attrs: {
+	      "value": "column"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "type": "1"
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "justify-content",
+	      "type": "primary"
+	    }
+	  }, [_h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      justifyContent: "flex-start"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      justifyContent: "flex-end"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      justifyContent: "center"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      justifyContent: "space-between"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "align-items",
+	      "type": "primary"
+	    }
+	  }, [_h('div', {
+	    staticClass: ["row", "row-align"],
+	    staticStyle: {
+	      alignItems: "flex-start"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row", "row-align"],
+	    staticStyle: {
+	      alignItems: "flex-end"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row", "row-align"],
+	    staticStyle: {
+	      alignItems: "center"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row", "row-align"],
+	    staticStyle: {
+	      alignItems: "stretch"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "flex",
+	      "type": "primary"
+	    }
+	  }, [_h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      alignItems: "flex-start"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "value": "no flex"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "value": "no flex",
+	      "type": "1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "value": "no flex"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      alignItems: "flex-start"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0"
+	    },
+	    attrs: {
+	      "value": "no flex"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "1"
+	    },
+	    attrs: {
+	      "type": "1",
+	      "value": "flex:1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "2"
+	    },
+	    attrs: {
+	      "value": "flex:2"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      alignItems: "flex-start"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "1"
+	    },
+	    attrs: {
+	      "value": "flex:1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "1"
+	    },
+	    attrs: {
+	      "type": "1",
+	      "value": "flex:1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "1"
+	    },
+	    attrs: {
+	      "value": "flex:1"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      alignItems: "flex-start"
+	    }
+	  }, [_h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "1"
+	    },
+	    attrs: {
+	      "value": "flex:1"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "2"
+	    },
+	    attrs: {
+	      "type": "1",
+	      "value": "flex:2"
+	    }
+	  }), _h('style-item', {
+	    staticStyle: {
+	      marginRight: "0",
+	      flex: "3"
+	    },
+	    attrs: {
+	      "value": "flex:3"
+	    }
+	  })])]), _h('panel', {
+	    attrs: {
+	      "title": "flex-wrap",
+	      "type": "primary"
+	    }
+	  }, [_h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      flexWrap: "wrap",
+	      backgroundColor: "grey",
+	      padding: "10"
+	    }
+	  }, [_h('style-item', {
+	    attrs: {
+	      "value": "1:wrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "2:wrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "3:wrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "4:wrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "5:wrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "6:wrap"
+	    }
+	  })]), _h('div', {
+	    staticClass: ["row"],
+	    staticStyle: {
+	      flexWrap: "nowrap",
+	      backgroundColor: "grey",
+	      padding: "10"
+	    }
+	  }, [_h('style-item', {
+	    attrs: {
+	      "value": "1:nowrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "2:nowrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "3:nowrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "4:nowrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "5:nowrap"
+	    }
+	  }), _h('style-item', {
+	    attrs: {
+	      "value": "6:nowrap"
+	    }
+	  })])])])
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ }
+
+/******/ });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/93063f14/android/playground/app/src/main/assets/vue/style/style-item.js
----------------------------------------------------------------------
diff --git a/android/playground/app/src/main/assets/vue/style/style-item.js b/android/playground/app/src/main/assets/vue/style/style-item.js
new file mode 100644
index 0000000..35b36fb
--- /dev/null
+++ b/android/playground/app/src/main/assets/vue/style/style-item.js
@@ -0,0 +1,155 @@
+// { "framework": "Vue" }
+
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* styles */
+	__vue_styles__.push(__webpack_require__(549)
+	)
+
+	/* script */
+	__vue_exports__ = __webpack_require__(550)
+
+	/* template */
+	var __vue_template__ = __webpack_require__(551)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/style/style-item.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+	module.exports.el = 'true'
+	new Vue(module.exports)
+
+
+/***/ },
+
+/***/ 549:
+/***/ function(module, exports) {
+
+	module.exports = {
+	  "item": {
+	    "marginRight": 10,
+	    "width": 160,
+	    "height": 75,
+	    "paddingLeft": 8,
+	    "paddingRight": 8,
+	    "paddingTop": 8,
+	    "paddingBottom": 8
+	  },
+	  "txt": {
+	    "color": "#eeeeee"
+	  }
+	}
+
+/***/ },
+
+/***/ 550:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	//
+	//
+	//
+	//
+	//
+	//
+	//
+
+	module.exports = {
+	  props: {
+	    value: { default: '' },
+	    type: { default: '0' } // 0, 1
+	  },
+	  computed: {
+	    bgColor: function bgColor() {
+	      return this.type == '1' ? '#7BA3A8' : '#BEAD92';
+	    }
+	  }
+	};
+
+/***/ },
+
+/***/ 551:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('text', {
+	    staticClass: ["item", "txt"],
+	    style: {
+	      backgroundColor: _vm.bgColor
+	    },
+	    attrs: {
+	      "value": _vm.value
+	    }
+	  })
+	},staticRenderFns: []}
+	module.exports.render._withStripped = true
+
+/***/ }
+
+/******/ });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/93063f14/android/playground/app/src/main/assets/vue/syntax/hello-world-1.js
----------------------------------------------------------------------
diff --git a/android/playground/app/src/main/assets/vue/syntax/hello-world-1.js b/android/playground/app/src/main/assets/vue/syntax/hello-world-1.js
new file mode 100644
index 0000000..4a0919b
--- /dev/null
+++ b/android/playground/app/src/main/assets/vue/syntax/hello-world-1.js
@@ -0,0 +1,95 @@
+// { "framework": "Vue" }
+
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* template */
+	var __vue_template__ = __webpack_require__(561)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/syntax/hello-world-1.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+	module.exports.el = 'true'
+	new Vue(module.exports)
+
+
+/***/ },
+
+/***/ 561:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _vm._m(0)
+	},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', [_h('text', ["Hello World"])])
+	}]}
+	module.exports.render._withStripped = true
+
+/***/ }
+
+/******/ });
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/93063f14/android/playground/app/src/main/assets/vue/syntax/hello-world-2.js
----------------------------------------------------------------------
diff --git a/android/playground/app/src/main/assets/vue/syntax/hello-world-2.js b/android/playground/app/src/main/assets/vue/syntax/hello-world-2.js
new file mode 100644
index 0000000..de7f9e0
--- /dev/null
+++ b/android/playground/app/src/main/assets/vue/syntax/hello-world-2.js
@@ -0,0 +1,112 @@
+// { "framework": "Vue" }
+
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_exports__, __vue_options__
+	var __vue_styles__ = []
+
+	/* template */
+	var __vue_template__ = __webpack_require__(562)
+	__vue_options__ = __vue_exports__ = __vue_exports__ || {}
+	if (
+	  typeof __vue_exports__.default === "object" ||
+	  typeof __vue_exports__.default === "function"
+	) {
+	if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
+	__vue_options__ = __vue_exports__ = __vue_exports__.default
+	}
+	if (typeof __vue_options__ === "function") {
+	  __vue_options__ = __vue_options__.options
+	}
+	__vue_options__.__file = "/Users/lixinke/git/other/weex/examples/vue/syntax/hello-world-2.vue"
+	__vue_options__.render = __vue_template__.render
+	__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
+	__vue_options__.style = __vue_options__.style || {}
+	__vue_styles__.forEach(function (module) {
+	for (var name in module) {
+	__vue_options__.style[name] = module[name]
+	}
+	})
+
+	module.exports = __vue_exports__
+	module.exports.el = 'true'
+	new Vue(module.exports)
+
+
+/***/ },
+
+/***/ 562:
+/***/ function(module, exports) {
+
+	module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _vm._m(0)
+	},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+	  return _h('div', {
+	    staticStyle: {
+	      alignItems: "center",
+	      marginTop: "120px"
+	    }
+	  }, [_h('image', {
+	    staticStyle: {
+	      width: "360px",
+	      height: "82px"
+	    },
+	    attrs: {
+	      "src": "https://alibaba.github.io/weex/img/weex_logo_blue@3x.png"
+	    }
+	  }), _h('text', {
+	    staticStyle: {
+	      fontSize: "48px"
+	    }
+	  }, ["Hello World"])])
+	}]}
+	module.exports.render._withStripped = true
+
+/***/ }
+
+/******/ });
\ No newline at end of file