Merge branch 'dev'

CHANGELOG.md

@@ -1,4 +1,16 @@
 # Change Log
+
+## 0.6.0
+- [+] [wxc-button](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-button/README.md) supports more `type` settings, remove `normal`/ `highlight`，add new `type` ahout `white` and `blue`，new button `size` settings, pay attention to the upgrade.
+- [!] Solve the problem of too big packaging bundle of bindingx，`Binding related judgments` are transferred from `Utils.env` to `BindEnv`，pay attention to the upgrade. [issue 191](https://github.com/alibaba/weex-ui/issues/191)
+- [+] New Binding component: [`wxc-refresh`](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-refresh/README.md), at the present stage of beta, suggestions are welcome.
+- [-] Remove the hints for `default style of the component` in weex-vue-loader high version.  [issue 198](https://github.com/alibaba/weex-ui/issues/189)
+- [+] [wxc-popover](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-popover/README.md) support animation.  [pr 184](https://github.com/alibaba/weex-ui/pull/184/files)
+- [+] [wxc-searchbar](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-searchbar/README.md) support setting `bar-style` style to cover theme color.
+- [!] [wxc-rich-text](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-rich-text/README.md) enhanced compatibility with iPad and Android.
+- [+] Document update for Faq and Binding
+
+
 ## 0.5.3
 - [!] [wxc-city](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-city/README.md) support not to display the location, direct incoming `currentLocation` is empty.
 - [+] [wxc-checkbox](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-checkbox/README.md) add `has-top-border`/`has-bottom-border` for whether show top-border or bottom-border.

CHANGELOG_cn.md

@@ -1,4 +1,15 @@
 # 升级日志
+
+## 0.6.0
+- [+] [wxc-button](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-button/README.md) 组件支持更多 `type`，去除 `normal`/ `highlight`，新增 type 类型 `white`、`blue`，同时新增按钮 `size` 设置，升级后使用需要注意
+- [!] 解决 bindingx 打包体积过大问题，Binding 相关判断由 `Utils.env` 转移到 `BindEnv`，升级需注意 [issue 191](https://github.com/alibaba/weex-ui/issues/191)
+- [+] 新 Binding 组件: [`wxc-refresh`](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-refresh/README.md)，目前处于 beta 阶段，欢迎提建议
+- [-] 移除高版本 weex-vue-loader 中对组件默认样式的提示 [issue 198](https://github.com/alibaba/weex-ui/issues/189)
+- [+] [wxc-popover](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-popover/README.md) 组件支持动画 [pr 184](https://github.com/alibaba/weex-ui/pull/184/files)
+- [+] [wxc-searchbar](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-searchbar/README.md) 支持设置 `bar-style` 样式覆盖主题颜色
+- [!] [wxc-rich-text](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-rich-text/README.md)  对 `wxc-special-rich-text` iPad、Android 兼容性增强
+- [+] 常见问题/bindingx 相关组件文档更新
+
 ## 0.5.3
 - [!] [wxc-city](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-city/README.md) 支持不显示定位城市，直接传入`currentLocation`为空即可
 - [+] [wxc-checkbox](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-checkbox/README.md) 新增 `has-top-border`/`has-bottom-border` 参数用于控制是否展示上线border线

docs/_coverpage.md

@@ -1,6 +1,6 @@
 <img src="https://img.alicdn.com/tfs/TB1kCs_er_I8KJjy1XaXXbsxpXa-419-495.png" width="146px">
 
-# <span style="font-weight:400;">Weex Ui</span> <span style="font-size:14px">0.5.3</span>
+# <span style="font-weight:400;">Weex Ui</span> <span style="font-size:14px">0.6.0</span>
 
 > <span style="line-height:1.8rem;font-weight:400;font-size:1.3rem">A rich interaction, lightweight, high performance UI library.<span>
 

docs/faq.md

@@ -1,7 +1,13 @@
 ## FAQ
 
 #### wxc-ep-slider、wxc-slider-bar Can't slide
-- The two components in Weex Ui now depend on an innovative interaction feature called [BindingX](https://alibaba.github.io/bindingx/), And this feature is already open source, please refer to github for import.
+- The two components in Weex Ui now depend on an innovative interaction feature called [BindingX](https://alibaba.github.io/bindingx/), And this feature is already open source, please refer to github [to import](https://github.com/alibaba/bindingx#installation).
+
+
+#### Suggestions for using images in Weex.
+- Use CDN image：It is recommended to use, and to ensure that the actual size and size of the image is consistent with what you need to show.
+- Use local image：Weex’s native runtime support load image file from device’s disk, all you have to do set the file url like file:///sdcard/image_new0.png,More you can see [here](http://blog.csdn.net/codingfire/article/details/79528639), At the same time, Weex does not support the loading of image files in your project, nor does it support the direct use of local images by downgrade Web version. Therefore, it is recommended to use the CDN image link.
+- Use Base64：This depends on native image library resolution, but it is not recommended to use more than 2k Base64 in Weex, which makes the bundle too large to affect performance.
 
 #### Module not found: Error: Can't resolve 'weex-ui/packages/wxc-button/style.css'
 - This error should be the `babel-plugin-component` lack of style configuration, You can refer to [Weex-toolkit](https://alibaba.github.io/weex-ui/#/?id=weex-toolkit) to fix it.

docs/faq_cn.md

@@ -1,7 +1,12 @@
 ## 常见问题
 
 #### wxc-ep-slider、wxc-slider-bar 不能正常滑动
-- 目前 Weex Ui 中这两个组件依赖于一个创新交互特性 [BindingX](https://alibaba.github.io/bindingx/)，目前已经开源，请参考仓库进行引入。
+- 目前 Weex Ui 中这两个组件依赖于一个创新交互特性 [BindingX](https://alibaba.github.io/bindingx/)，目前已经开源，Native 请参考仓库进行 [引入](https://github.com/alibaba/bindingx#installation)。
+
+#### Weex 中图片使用建议
+- 使用CDN图片：建议使用，同时确保图片的实际尺寸比例和大小和你需要展示的一致
+- 使用本地图片：Weex 的原生运行机制支持从设备中加载图片，你只需要设置文件 url，例如 file:///sdcard/image_new0.png 这样的格式，具体使用可见[【这里】](http://blog.csdn.net/codingfire/article/details/79528639)，同时Weex 暂时还不支持加载你工程中的图片文件，也不支持降级版本直接使用本地图片，故建议使用 CDN 图片链接
+- 使用Base64：这个取决于底层图片库解析功能，但是不建议在 Weex 中使用超过 2k 的 Base64，容易让bundle体积过大，影响性能
 
 #### Module not found: Error: Can't resolve 'weex-ui/packages/wxc-button/style.css'
 - 此错误应该babel配置babel-plugin-component时候缺少style配置，详细可见 [Weex-toolkit](https://alibaba.github.io/weex-ui/#/cn/?id=weex-toolkit)

docs/who_use.md

@@ -20,8 +20,8 @@
         <td style="border: 0;"><img src="https://img.alicdn.com/tfs/TB1q9GtcMmTBuNjy1XbXXaMrVXa-630-630.png" width="66" /></td>
         <td style="border: 0;"><img src="https://img.alicdn.com/tfs/TB1UmqCcHGYBuNjy0FoXXciBFXa-246-246.jpg" width="66"  style="border-radius:8px"/></td>
         <td style="border: 0;"><img src="https://img.alicdn.com/tfs/TB1nYK9cNGYBuNjy0FnXXX5lpXa-630-630.png" width="66"  style="border-radius:8px"/></td>
+        <td style="border: 0;"><img src="https://img.alicdn.com/tfs/TB1FnQ7fAyWBuNjy0FpXXassXXa-246-246.png" width="66"  style="border-radius:8px" alt="本木医疗"/></td>
     </tr>
 </table>
 
-
 [Welcome to add your App !](https://github.com/alibaba/weex-ui/edit/master/docs/who_use.md)

example/button/index.vue

@@ -5,29 +5,98 @@
   <div class="wxc-demo">
     <scroller class="scroller">
       <title title="wxc-button"></title>
-      <category title="五种基本样式"></category>
+      <category title="类型样式"></category>
       <div class="button-list">
-        <text class="button-text">normal</text>
+        <text class="button-text">white</text>
         <wxc-button text="确定"
-                    type="normal"
+                    type="white"
                     @wxcButtonClicked="wxcButtonClicked"></wxc-button>
-        <text class="button-text">highlight</text>
+        <text class="button-text">white && disabled</text>
         <wxc-button text="确定"
-                    type="highlight"
+                    type="white"
+                    :disabled="true"
+                    @wxcButtonClicked="wxcButtonClicked"></wxc-button>
+        <text class="button-text">blue</text>
+        <wxc-button text="确定"
+                    type="blue"
+                    @wxcButtonClicked="wxcButtonClicked"></wxc-button>
+        <text class="button-text">blue && disabled</text>
+        <wxc-button text="确定"
+                    type="blue"
+                    :disabled="true"
                     @wxcButtonClicked="wxcButtonClicked"></wxc-button>
         <text class="button-text">red</text>
         <wxc-button text="确定"
                     type="red"
                     @wxcButtonClicked="wxcButtonClicked"></wxc-button>
+        <text class="button-text">red && disabled</text>
+        <wxc-button text="确定"
+                    type="red"
+                    :disabled="true"
+                    @wxcButtonClicked="wxcButtonClicked"></wxc-button>
         <text class="button-text">yellow</text>
         <wxc-button text="确定"
                     type="yellow"
                     @wxcButtonClicked="wxcButtonClicked"></wxc-button>
-        <text class="button-text">disabled</text>
+        <text class="button-text">yellow && disabled</text>
         <wxc-button text="确定"
+                    type="yellow"
                     :disabled="true"
                     @wxcButtonClicked="wxcButtonClicked"></wxc-button>
       </div>
+      <category title="尺寸"></category>
+      <div>
+        <text class="button-size-text">big</text>
+        <div class="size">
+          <wxc-button text="确定"
+                      type="white"
+                      size="big"
+                      @wxcButtonClicked="wxcButtonClicked"></wxc-button>
+          <wxc-button text="确定"
+                      type="white"
+                      size="big"
+                      :disabled="true"
+                      @wxcButtonClicked="wxcButtonClicked"></wxc-button>
+
+        </div>
+        <text class="button-size-text">medium</text>
+        <div class="size">
+          <wxc-button text="确定"
+                      type="blue"
+                      size="medium"
+                      @wxcButtonClicked="wxcButtonClicked"></wxc-button>
+          <wxc-button text="确定"
+                      type="blue"
+                      :disabled="true"
+                      size="medium"
+                      @wxcButtonClicked="wxcButtonClicked"></wxc-button>
+          <wxc-button text="确定"
+                      type="red"
+                      size="medium"
+                      @wxcButtonClicked="wxcButtonClicked"></wxc-button>
+        </div>
+        <text class="button-size-text">small</text>
+        <div class="size">
+          <wxc-button text="确定"
+                      type="red"
+                      size="small"
+                      @wxcButtonClicked="wxcButtonClicked"></wxc-button>
+          <wxc-button text="确定"
+                      type="red"
+                      size="small"
+                      :disabled="true"
+                      @wxcButtonClicked="wxcButtonClicked"></wxc-button>
+          <wxc-button text="确定"
+                      type="yellow"
+                      size="small"
+                      @wxcButtonClicked="wxcButtonClicked"></wxc-button>
+          <wxc-button text="确定"
+                      type="yellow"
+                      :disabled="true"
+                      size="small"
+                      @wxcButtonClicked="wxcButtonClicked"></wxc-button>
+        </div>
+      </div>
       <category title="自定义样式"></category>
       <wxc-cell :has-top-border="false" title="按钮的文字">
         <input class="input"
@@ -124,6 +193,17 @@
     text-align: right;
     font-size: 28px;
   }
+
+  .size {
+    flex-direction: row;
+    justify-content: space-around;
+  }
+
+  .button-size-text {
+    margin-left: 24px;
+    margin-bottom: 24px;
+    margin-top: 40px;
+  }
 </style>
 
 <script>

example/ep-slider/index.vue

@@ -122,7 +122,7 @@
 <script>
   const modal = weex.requireModule('modal');
 
-  import { WxcEpSlider, WxcPanItem, Utils } from '../../index';
+  import { WxcEpSlider, WxcPanItem, BindEnv } from '../../index';
   import Title from '../_mods/title.vue';
   import Category from '../_mods/category.vue';
   import { setTitle } from '../_mods/set-nav';
@@ -153,7 +153,7 @@
         this.$refs['wxc-ep-slider'].manualSetPage(1);
       },
       wxcPanItemPan (e) {
-        if (Utils.env.supportsEBForAndroid()) {
+        if (BindEnv.supportsEBForAndroid()) {
           this.$refs['wxc-ep-slider'].clearAutoPlay();
           this.$refs['wxc-ep-slider'].bindExp(e.element)
         }

example/popover/index.vue

@@ -13,25 +13,58 @@
                        background-color="#F2F3F4"
                        @wxcMinibarRightButtonClicked="minibarRightButtonClick"
                        right-text="..."></wxc-minibar>
-          <wxc-popover ref="wxc-popover"
-                       :buttons="btns"
-                       :position="popoverPosition"
-                       :arrowPosition="popoverArrowPosition"
-                       @wxcPopoverButtonClicked="popoverButtonClicked"
-          ></wxc-popover>
+        </div>
+
+        <div class="demo demo3">
+          <wxc-button text="向右弹出|无动画"
+                      :btnStyle="btn3Style"
+                      type="normal"
+                      @wxcButtonClicked="wxcButtonClicked('wxc-popover3')"></wxc-button>
+
+          <wxc-button text="向左弹出"
+                      :btnStyle="btn4Style"
+                      type="highlight"
+                      @wxcButtonClicked="wxcButtonClicked('wxc-popover4')"></wxc-button>
+
         </div>
 
         <div class="demo demo2">
           <wxc-button text="向上弹出"
-                      @wxcButtonClicked="wxcButtonClicked"></wxc-button>
-          <wxc-popover ref="wxc-popover2"
-                       :buttons="btns2"
-                       :position="popoverPosition2"
-                       :arrowPosition="popoverArrowPosition2"
-                       @wxcPopoverButtonClicked="popoverButtonClicked"
-          ></wxc-popover>
+                      @wxcButtonClicked="wxcButtonClicked('wxc-popover2')"></wxc-button>
         </div>
 
+        <!-- demo 1 pop -->
+        <wxc-popover ref="wxc-popover1"
+                     :buttons="btns"
+                     :position="popoverPosition"
+                     :arrowPosition="popoverArrowPosition"
+                     @wxcPopoverButtonClicked="popoverButtonClicked"
+        ></wxc-popover>
+
+        <!-- demo 2 pop -->
+        <wxc-popover ref="wxc-popover2"
+                     :buttons="btns2"
+                     :position="popoverPosition2"
+                     :arrowPosition="popoverArrowPosition2"
+                     @wxcPopoverButtonClicked="popoverButtonClicked"
+        ></wxc-popover>
+
+        <!-- demo 3 pop -->
+        <wxc-popover ref="wxc-popover3"
+                     :buttons="btns3"
+                     :position="popoverPosition3"
+                     :hasAnimation="false"
+                     :arrowPosition="popoverArrowPosition3"
+                     @wxcPopoverButtonClicked="popoverButtonClicked"
+        ></wxc-popover>
+
+        <!-- demo 4 pop -->
+        <wxc-popover ref="wxc-popover4"
+                     :buttons="btns4"
+                     :position="popoverPosition4"
+                     :arrowPosition="popoverArrowPosition4"
+                     @wxcPopoverButtonClicked="popoverButtonClicked"
+        ></wxc-popover>
       </div>
     </scroller>
   </div>
@@ -46,19 +79,17 @@
     right: 0;
     background-color: #FFFFFF;
   }
-
-  .scroller {
-    flex: 1;
-  }
-
   .demo {
     width: 750px;
-    height: 180px;
     padding-top: 60px;
   }
 
   .demo2 {
-    margin-top: 200px;
+    margin-top: 50px;
+    margin-left: 20px;
+  }
+  .demo3 {
+    margin-top: 50px;
     margin-left: 20px;
   }
 </style>
@@ -70,7 +101,7 @@
 
   const modal = weex.requireModule('modal');
   import { setTitle } from '../_mods/set-nav';
-  import { RETURN_ICON, SCAN_ICON, QRCODE_ICON, QUESTION_ICON } from './type';
+  import {WEEXUI_ICON, RETURN_ICON, SCAN_ICON, QRCODE_ICON, QUESTION_ICON } from './type';
 
   export default {
     components: { Title, Category, WxcMinibar, WxcButton, WxcPopover },
@@ -110,21 +141,46 @@
           key: 's3'
         }
       ],
-      popoverPosition2: { x: 200, y: 390 },
+      popoverPosition2: { x: 200, y: 520 },
       popoverArrowPosition2: { pos: 'bottom', x: 160 },
+      btns3: [
+        { icon: WEEXUI_ICON, text: 'Item 1', key: 's1'},
+        { icon: WEEXUI_ICON, text: 'Item 2', key: 's2'},
+        { icon: WEEXUI_ICON, text: 'Item 3', key: 's3'}
+      ],
+      popoverPosition3: { x: 325, y: 550 },
+      popoverArrowPosition3: { pos: 'left', y: 0 },
+      btns4: [
+        { icon: WEEXUI_ICON, text: 'Item 1', key: 's1'},
+        { icon: WEEXUI_ICON, text: 'Item 2', key: 's2'},
+        { icon: WEEXUI_ICON, text: 'Item 3', key: 's3'}
+      ],
+      popoverPosition4: { x: 175, y: 380 },
+      popoverArrowPosition4: { pos: 'right', y: -50 },
+      btn3Style:{
+        height: '200px',
+        width: '300px'
+      },
+      btn4Style:{
+        position: 'absolute',
+        right: '40px',
+        top: '60px',
+        height: '200px',
+        width: '300px'
+      }
     }),
     created () {
       setTitle('Popover')
     },
     methods: {
       minibarRightButtonClick () {
-        this.$refs['wxc-popover'].wxcPopoverShow();
+        this.$refs['wxc-popover1'].wxcPopoverShow();
       },
       popoverButtonClicked (obj) {
         modal.toast({ 'message': `key:${obj.key}, index:${obj.index}`, 'duration': 1 });
       },
-      wxcButtonClicked () {
-        this.$refs['wxc-popover2'].wxcPopoverShow();
+      wxcButtonClicked (ref='wxc-popover2') {
+        this.$refs[ref].wxcPopoverShow();
       }
     }
   };

example/popover/type.js

@@ -1,6 +1,7 @@
 /**
  * Created by zwwill on 2018/03/02.
  */
+export const WEEXUI_ICON = 'https://gw.alicdn.com/tfs/TB1JpgJRFXXXXc7XpXXXXXXXXXX-800-800.png';
 export const RETURN_ICON = 'https://gw.alicdn.com/tfs/TB1cAYsbv2H8KJjy0FcXXaDlFXa-30-53.png';
 export const SCAN_ICON = 'https://gw.alicdn.com/tfs/TB1Vm3abuuSBuNjy1XcXXcYjFXa-64-64.png';
 export const QRCODE_ICON = 'https://gw.alicdn.com/tfs/TB1U93abuuSBuNjy1XcXXcYjFXa-64-64.png';

example/refresher/index.js

@@ -0,0 +1,4 @@
+import entry from './index.vue'
+
+entry.el = '#root'
+export default new Vue(entry)