[+] More Standardization

apache · Dec 1, 2017 · 37f0a15 · 37f0a15
1 parent 58a0e2a
commit 37f0a15
Show file tree

Hide file tree

Showing 41 changed files with 465 additions and 531 deletions.
diff --git a/example/dialog/index.vue b/example/dialog/index.vue
@@ -6,32 +6,28 @@
     <scroller class="scroller">
       <title title="wxc-dialog"></title>
       <category title="Dialog配置"></category>
-      <wxc-cell :has-top-border="false"
-                title="标题文案">
+      <wxc-cell :has-top-border="false" title="标题文案">
         <input class="input"
                slot="value"
                placeholder="请输入标题"
                :value="title"
                @input="title=$event.value"/>
       </wxc-cell>
-      <wxc-cell :has-top-border="false"
-                title="说明文案">
+      <wxc-cell :has-top-border="false" title="说明文案">
         <input class="input"
                slot="value"
                placeholder="请输入说明内容"
                :value="content"
                @input="content=$event.value"/>
       </wxc-cell>
-      <wxc-cell :has-top-border="false"
-                title="主按钮">
+      <wxc-cell :has-top-border="false" title="主按钮">
         <input class="input"
                slot="value"
                placeholder="确定按钮文案"
                :value="confirmText"
                @input="confirmText=$event.value"/>
       </wxc-cell>
-      <wxc-cell :has-top-border="false"
-                title="副按钮">
+      <wxc-cell :has-top-border="false" title="副按钮">
         <input class="input"
                slot="value"
                placeholder="取消按钮文案"
@@ -68,8 +64,7 @@
                :value="noPromptText"
                @input="noPromptText=$event.value"/>
       </wxc-cell>
-      <div class="btn"
-           @click="openDialog">
+      <div class="btn" @click="openDialog">
         <text class="btn-txt">打开Dialog试一试</text>
       </div>
     </scroller>

diff --git a/packages/wxc-button/README.md b/packages/wxc-button/README.md
@@ -1,6 +1,6 @@
 # wxc-button
 
-> Weex 按钮组件，支持 4 种基本类型 button，可自定义样式，支持不可点击样式
+> Weex 按钮组件，支持 4 种基本类型 button，可自定义样式
 
 ## [Demo预览](https://h5.m.taobao.com/trip/wxc-button/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwxc-button%2Fdemo%2Findex.native-min.js)
 
@@ -28,12 +28,12 @@
 </script>
 
 ```
-更详细代码可以参考 [demo](https://github.com/alibaba/weex-ui/blob/master/button/loading/index.vue)
+更详细代码可以参考 [这里](https://github.com/alibaba/weex-ui/blob/master/button/loading/index.vue)
 
 ### 可配置参数
 | Prop | Type | Required | Default | Description |
 | ---- |:----:|:---:|:-------:| :----------:|
-| **`text`** | `string` | `Y` | `` | 展现的文字 |
+| **`text`** | `string` | `Y` | `-` | 展现的文字 |
 | **`type`** | `enum` | `N` | `taobao` | 四种基本类型：`taobao`/`fliggy`/`normal` /`highlight` |
 | **`disabled`** | `bool` | `N` | `false` | 是否 disabled（注1） |
 | **`btnStyle`** | `object` | `N` | `{}` | 按钮的样式对象（注2） |

diff --git a/packages/wxc-button/README_us.md b/packages/wxc-button/README_us.md
@@ -33,7 +33,7 @@ More details can be found [here](https://github.com/alibaba/weex-ui/blob/master/
 ### API
 | Prop | Type | Required | Default | Description |
 | ---- |:----:|:---:|:-------:| :----------:|
-| **`text`** | `string` | `Y` | `` | the text of button |
+| **`text`** | `string` | `Y` | `-` | the text of button |
 | **`type`** | `enum` | `N` | `taobao` | can be set to  `taobao`/`fliggy`/`normal`/ `highlight` |
 | **`disabled`** | `bool` | `N` | `false` | set disabled（*1） |
 | **`btnStyle`** | `object` | `N` | `{}` | custom style about button（*2） |

diff --git a/packages/wxc-cell/README.md b/packages/wxc-cell/README.md
@@ -3,10 +3,10 @@
 > Weex 单元格组件，可用作展示列表信息、链接或者表单等  
 
 ### 规则
-  - 可以设置label、标题、描述、跳转、箭头显示和点击事件回调功能
-  - 可以设置子元素传入
+  - 一般由主要信息、操作动作组成，信息在左、操作在右
+  - 可以对 label, title, value 进行 Slot 覆盖
 
-## [Demo预览](https://h5.m.taobao.com/trip/wxc-cell/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwxc-cell%2Fdemo%2Findex.native-min.js)
+## [Demo 预览](https://h5.m.taobao.com/trip/wxc-cell/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwxc-cell%2Fdemo%2Findex.native-min.js)
 <img src="https://img.alicdn.com/tfs/TB1mIA5c5qAXuNjy1XdXXaYcVXa-750-1334.jpg" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB15ta_SpXXXXcFaVXXXXXXXXXX-191-197.png" width="160"/>
 
 ## 使用方法
@@ -92,10 +92,10 @@
 
 | Prop      | Type   |Required  | Default   | Description  |
 |-------------|------------|--------|--------|-----|
-| label | `String` | `N`|  '' |label（常用于描述cell） |
-| title | `String` | `N`|  '' |标题 |
-| desc  | `String` | `N`| '' |描述字段，展示说明信息 |
-| link  | `String` | `N`| ''| 跳转链接，无链接不跳转 |
+| label | `String` | `N`|  `-` |前置标签 |
+| title | `String` | `N`|  `-` |标题 |
+| desc  | `String` | `N`| `-` | 展示说明信息 |
+| link  | `String` | `N`| `-`| 跳转链接，无链接不跳转 |
 | arrow-icon | `String` | `N`|`箭头` |  覆盖右向箭头 |
 | has-arrow | `Bool` |`N`| `false` |  是否显示箭头 |
 | has-top-border | `Bool` | `N`| `false` |  是否有上边框 |
@@ -107,7 +107,7 @@
 ### Slot
 1. `<slot name="label"></slot>`：label卡槽，替换默认 label 占位
 2. `<slot name="title"></slot>`：title卡槽，替换默认 title 占位
-3. `<slot name="value"></slot>`：右边卡槽，有时候可以需要传入输入框、checkbox情况
+3. `<slot name="value"></slot>`：右边卡槽，有需要传入输入框、checkbox的场景
 
 
 ### 事件回调

diff --git a/packages/wxc-cell/README_us.md b/packages/wxc-cell/README_us.md
@@ -92,10 +92,10 @@ More details can be found [here](https://github.com/alibaba/weex-ui/blob/master/
 
 | Prop      | Type   |Required  | Default   | Description  |
 |-------------|------------|--------|--------|-----|
-| label | `String` | `N`|  '' |label（常用于描述cell） |
-| title | `String` | `N`|  '' |标题 |
-| desc  | `String` | `N`| '' |描述字段，展示说明信息 |
-| link  | `String` | `N`| ''| 跳转链接，无链接不跳转 |
+| label | `String` | `N`|  `-` |label（常用于描述cell） |
+| title | `String` | `N`|  `-` |标题 |
+| desc  | `String` | `N`| `-` |描述字段，展示说明信息 |
+| link  | `String` | `N`| `-`| 跳转链接，无链接不跳转 |
 | arrow-icon | `String` | `N`|`箭头` |  覆盖右向箭头 |
 | has-arrow | `Bool` |`N`| `false` |  是否显示箭头 |
 | has-top-border | `Bool` | `N`| `false` |  是否有上边框 |

diff --git a/packages/wxc-checkbox/README.md b/packages/wxc-checkbox/README.md
@@ -1,9 +1,12 @@
 # wxc-checkbox 
 
-> Weex复选框组件，支持单个和列表checkbox的设置
+> Weex 复选框组件
 
+### 规则
+- 建议以成组的方式出现，使用`wxc-checkbox-list`
 
-## [Demo预览](https://h5.m.taobao.com/trip/wxc-checkbox/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwxc-checkbox%2Fdemo%2Findex.native-min.js)
+
+## [Demo 预览](https://h5.m.taobao.com/trip/wxc-checkbox/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwxc-checkbox%2Fdemo%2Findex.native-min.js)
 
 <img src="https://gw.alipayobjects.com/zos/rmsportal/uvtUDCJtVFhvszyfsLBJ.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB1aLygSpXXXXXVXFXXXXXXXXXX-200-200.png" width="160"/>
 
@@ -61,12 +64,12 @@
 #### Checkbox
 | Prop | Type | Required | Default | Description |
 | ---- |:----:|:---:|:-------:| :----------:|
-| **`title`** | `String` | `Y` | `` | checkbox显示label |
-| **`Value`** | `[String、Number、Object]` | `Y` | `` | checkbox的value |
+| **`title`** | `String` | `Y` | `-` | checkbox显示label |
+| **`Value`** | `[String、Number、Object]` | `Y` | `-` | checkbox的value |
 | **`checked`** | `Boolean` | `N` | `false` | checkbox是否选中 |
 | **`disabled`** | `Boolean` | `N` | `false` | checkbox是否不可选 |
 
-### 事件回调
+- 事件回调
 ```
 //点击事件回调  `@wxcCheckBoxItemChecked="wxcCheckBoxItemChecked"`
 将会返回e.value、e.checked
@@ -87,7 +90,7 @@ const list=[
       ];
 ```
 
-### 事件回调
+- 事件回调
 ```
 //点击事件回调  `@wxcCheckBoxListChecked="wxcCheckBoxListChecked"`
 将会返回已经选中的e.checkedList

diff --git a/packages/wxc-countdown/README.md b/packages/wxc-countdown/README.md
@@ -1,52 +1,38 @@
 # wxc-countdown
 
-> 一个倒计时组件
+> Weex 倒计时组件
 
-- 规则: 支持传入时间戳，然后用 setTimeout 去倒计时
-
-## [Demo预览](https://h5.m.taobao.com/trip/wxc-countdown/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwxc-countdown%2Fdemo%2Findex.native-min.js)
+## [Demo 预览](https://h5.m.taobao.com/trip/wxc-countdown/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwxc-countdown%2Fdemo%2Findex.native-min.js)
 <img src="https://gw.alipayobjects.com/zos/rmsportal/vKCrGoTgfBlPsFKtJNhk.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB1Kj1MSFXXXXbMXpXXXXXXXXXX-200-200.png" width="160"/>
 
 ## 参数配置
 
 | Prop | Type | Required | Default | Description |
 | ---- |:----:|:---:|:-------:| :----------:|
-| **`time`** | `Number` | `Y` | `1501200000000` | 倒计时最终时间戳 |
-| **`interval`** | `Number` | `N` | `1000` | 倒计时的间隔,单位为"毫秒" |
-| **`tpl`** | `String` | `N` | `{h}:{m}:{s}` | 倒计时展示模板。支持任意两个相邻的`{d}:{h}:{m}:{s}`，详细见 Demo |
-| **`onComplete`** | `Function` | `N` | `()=>()` | 倒计时完成时调用的方法 |
+| **`time`** | `Number` | `Y` | `1501200000000` | 最终时间戳 |
+| **`interval`** | `Number` | `N` | `1000` | 间隔,单位为"毫秒" |
+| **`tpl`** | `String` | `N` | `{h}:{m}:{s}` | 展示模板 |
+| **`onComplete`** | `Function` | `N` | `()=>()` | 完成时调用的方法 |
 | **`timeWrapStyle`** | `Object` | `N` | `-` | 最外层包裹 style |
 | **`timeBoxStyle`** | `Object` | `N` | `-` | 数字盒子 style |
-| **`dotBoxStyle`** | `Object` | `N` | `-` | : 盒子Style |
-| **`timeTextStyle`** | `Object` | `N` | `-` | 数字文字 Style |
-| **`dotTextStyle`** | `Object` | `N` | `-` | : 文字Style |
+| **`dotBoxStyle`** | `Object` | `N` | `-` |  符号盒子 style |
+| **`timeTextStyle`** | `Object` | `N` | `-` | 数字文字 style |
+| **`dotTextStyle`** | `Object` | `N` | `-` |  符号文字 style |
 
 
 ## 使用方法
 
 ```vue
 <template>
-  <wxc-countdown
-    tpl="{d}天{h}时{m}分{s}秒"
-    :time="TIME"
-  ></wxc-countdown>
+  <wxc-countdown tpl="{d}天{h}时{m}分{s}秒" :time="TIME"></wxc-countdown>
 </template>
 <script>
-    import WxcCountdown from '../index.vue'
+    import { WxcCountdown } from 'weex-ui'
     export default {
       components: { WxcCountdown },
       data: () => ({
         TIME: new Date().getTime() + 86400000 + ''
-      }),
-      created () {
-        const navigationBar = weex.requireModule('navigationBar')
-        if (navigationBar && navigationBar.setTitle) {
-          const NOOP = () => {}
-          navigationBar.setTitle({
-            title: 'wxc-countdown Demo'
-          }, NOOP, NOOP)
-        }
-      }
+      })
     }
 </script>
 ```

diff --git a/packages/wxc-dialog/README.md b/packages/wxc-dialog/README.md
@@ -1,14 +1,14 @@
 # wxc-dialog 
 
-> Weex二次确认弹窗组件，可以设置标题和内容、按钮定制、颜色、不再提示选项等等。
+> Weex 二次确认弹窗组件，可以设置标题、内容、按钮定制、不再提示等。
 
-- 规则
-   - 尽可能少用，Modal 会打断用户操作，只用在重要的时候。
-   - 标题不要超过一样，按钮最多两个。
-   - 取消按钮在左侧，确定按钮在右侧。
+### 规则
+- 尽可能少用，Dialog 会打断用户操作，只用在重要的时候
+- 标题不要超过一行，按钮最多两个
+- 取消按钮在左侧，确定按钮在右侧
 
 
-## [Demo预览](https://h5.m.taobao.com/trip/wxc-dialog/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwxc-dialog%2Fdemo%2Findex.native-min.js)
+## [Demo 预览](https://h5.m.taobao.com/trip/wxc-dialog/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwxc-dialog%2Fdemo%2Findex.native-min.js)
 <img src="https://gw.alipayobjects.com/zos/rmsportal/qastXqTFLQMoCDjYoeRc.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB1Oa09SpXXXXbiXVXXXXXXXXXX-200-200.png" width="160"/>
 
 ## 使用方法
@@ -21,15 +21,15 @@
         <text class="btn-txt">对话消息Dialog</text>
       </div>
     </div>
-    <wxc-dialog title="阿里旅行协议"
+    <wxc-dialog title="标题"
+                content="这里是内容"
                 :show="show"
+                :single="false"
+                :is-checked="isChecked"
+                :show-no-prompt="true"
                 @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"
                 @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked"
-                @wxcDialogNoPromptClicked="wxcDialogNoPromptClicked"
-                content="为保障消费者权益，阿里旅行·去啊服务保障全面升级，凡在阿里旅行·去啊购买机票、酒店、客栈、门票、度假产品全面享有成行保障和如实描述"
-                :single="single"
-                :is-checked="isChecked"
-                :show-no-prompt="showNoPrompt">
+                @wxcDialogNoPromptClicked="wxcDialogNoPromptClicked">
     </wxc-dialog>
   </div>
 </template>
@@ -41,17 +41,12 @@
     data: function () {
       return {
         show: false,
-        single: false,
-        showNoPrompt: false,
         isChecked: false
       };
     },
     methods: {
       openDialog () {
-        const self = this;
-        self.single = false;
-        self.showNoPrompt = false;
-        self.show = true;
+        this.show = true;
       },
       wxcDialogCancelBtnClicked () {
       //此处必须设置，组件为无状态组件，自己管理
@@ -75,28 +70,27 @@
 
 ### 可配置参数
 
-| 名称      | 类型     | 默认值   | 备注  |
-|-------------|------------|--------|-----|
-| title | `String` | '' | `required`标题 |
-| content | `String` | '' | 内容说明描述 |
-| top | `Number` | `400` |  弹层距离顶部的高度 |
-| single | `Boolean` | '' |  是否只有一个按钮（显示确认） |
-| cancel-text | `String` | '取消' |  取消按钮文案定制 |
-| confirm-text | `String` | '确定' |  确定按钮文案定制 |
-| main-btn-color | `String` | `#EE9900` |  主按钮的颜色值 |
-| second-btn-color | `String` | `#666666` |  次要按钮颜色 |
-| show-no-prompt | `Boolean` | `false` |  是否显示不再提示 |
-| no-prompt-text | `String` | `不再提示` |  不再提示的文案 |
+| Prop | Type | Required | Default | Description |
+|-------------|------------|--------|-----|-----|
+| title | `String` | `Y` | `-` | 标题 |
+| content | `String` | `N` | `-`| 内容说明描述 |
+| top | `Number` | `N` |`400` |  弹层距离顶部的高度 |
+| single | `Boolean` | `N` |`false` |  是否只有一个按钮（显示确认） |
+| cancel-text | `String` |`N` | `取消` |  取消按钮文案定制 |
+| confirm-text | `String` | `N` |`确定` |  确定按钮文案定制 |
+| main-btn-color | `String` | `N` |`#EE9900` |  主按钮的颜色值 |
+| second-btn-color | `String` | `N` |`#666666` |  次要按钮颜色 |
+| show-no-prompt | `Boolean` | `N` |`false` |  是否显示不再提示 |
+| no-prompt-text | `String` | `N` |`不再提示` |  不再提示的文案 |
 | is-checked | `Boolean` | `false` |  不再提示是否勾选 |
 
 
 ### 事件回调
 
 ```
-//请参考上述demo，需要设置
 @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"、
 @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked"、
-@wxcDialogNoPromptClicked="wxcDialogNoPromptClicked"的回调（假如有使用的话~）
+@wxcDialogNoPromptClicked="wxcDialogNoPromptClicked"
 ```
 
 ### slot卡槽

diff --git a/packages/wxc-dialog/index.vue b/packages/wxc-dialog/index.vue
@@ -4,12 +4,8 @@
 
 <template>
   <div class="container">
-    <wxc-overlay v-if="show"
-                 :show="true"
-                 :hasAnimation="false"></wxc-overlay>
-    <div class="dialog-box"
-         v-if="show"
-         :style="{top:top+'px'}">
+    <wxc-overlay v-if="show" :show="true" :hasAnimation="false"></wxc-overlay>
+    <div class="dialog-box" v-if="show" :style="{top:top+'px'}">
       <div class="dialog-content">
         <slot name="title">
           <text class="content-title">{{title}}</text>
@@ -20,22 +16,18 @@
         <div class="no-prompt"
              v-if="showNoPrompt"
              @click="noPromptClicked">
-          <image :src="noPromptIcon"
-                 class="no-prompt-icon"></image>
+          <image :src="noPromptIcon" class="no-prompt-icon"></image>
           <text class="no-prompt-text">{{noPromptText}}</text>
         </div>
       </div>
       <div class="dialog-footer">
         <div class="footer-btn cancel"
              v-if="!single"
              @click="secondaryClicked">
-          <text class="btn-text"
-                :style="{ color: secondBtnColor }">{{cancelText}}</text>
+          <text class="btn-text" :style="{ color: secondBtnColor }">{{cancelText}}</text>
         </div>
-        <div class="footer-btn confirm"
-             @click="primaryClicked">
-          <text class="btn-text"
-                :style="{ color: mainBtnColor }">{{confirmText}}</text>
+        <div class="footer-btn confirm" @click="primaryClicked">
+          <text class="btn-text" :style="{ color: mainBtnColor }">{{confirmText}}</text>
         </div>
       </div>
     </div>

diff --git a/packages/wxc-dialog/type.js b/packages/wxc-dialog/type.js
@@ -3,5 +3,5 @@
  * Created by Tw93 on 2016/10/29.
  */
 
-export const CHECKED = "https://gw.alicdn.com/tfs/TB1UT3VpgMPMeJjy1XdXXasrXXa-42-42.png";
-export const UN_CHECKED = "https://gw.alicdn.com/tfs/TB1hE3VpgMPMeJjy1XdXXasrXXa-42-42.png";
+export const CHECKED = 'https://gw.alicdn.com/tfs/TB1UT3VpgMPMeJjy1XdXXasrXXa-42-42.png';
+export const UN_CHECKED = 'https://gw.alicdn.com/tfs/TB1hE3VpgMPMeJjy1XdXXasrXXa-42-42.png';