[merge] Merge branch 'dev'

wdfe · Jun 19, 2017 · 537b27d · 537b27d
2 parents ca1c56d + f2b4ca7
commit 537b27d
Show file tree

Hide file tree

Showing 39 changed files with 217 additions and 49 deletions.
diff --git a/docs/zh-cn/Picker.md b/docs/zh-cn/Picker.md
@@ -151,6 +151,69 @@ export default {
 }
 ```
 
+## 使用 Picker 组件实现日期选择器示例
+```html
+<wd-button @click.native="showDatePicker">日期选择器示例</wd-button>
+```
+```javascript
+methods: {
+  showDatePicker() {
+    let getYearArray = (offset) => {
+      let currentYear = new Date().getFullYear()
+      let yearArr = []
+      for(let i = currentYear - offset; i <= currentYear + offset; i++) {
+        yearArr.push(i)
+      }
+      return yearArr
+    }
+    let getDayArray = (year, month) => {
+      let tday = new Date(year, month, 0)
+      let dayArr = []
+      for(let i = 1; i <= tday.getDate(); i++) {
+        dayArr.push(i)
+      }
+      return dayArr
+    }
+    this.$Picker({
+      slots: [{
+        type: 'data',
+        flex: 1,
+        values: getYearArray(3),
+        textAlign: 'center',
+        defaultValue: new Date().getFullYear()
+      }, {
+        type: 'divider',
+        content: '-'
+      }, {
+        type: 'data',
+        flex: 1,
+        values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+        textAlign: 'center',
+        defaultValue: new Date().getMonth() + 1
+      }, {
+        type: 'divider',
+        content: '-'
+      }, {
+        type: 'data',
+        flex: 1,
+        values: getDayArray(new Date().getFullYear(), new Date().getMonth() + 1),
+        textAlign: 'center',
+        defaultValue: new Date().getDate()
+      }],
+      onConfirm: (instance, datas) => {
+        alert(datas.slot0 + ' - ' + datas.slot2 + ' - ' + datas.slot4)
+        instance.value = false
+      },
+      onChange: (instance, changeInfo) => {
+        if(changeInfo.changedSlotIndex === 0 || changeInfo.changedSlotIndex === 2) {
+          instance.setSlotValues(4, getDayArray(changeInfo.val.slot0, changeInfo.val.slot2, 0), changeInfo.val.slot4 - 1)
+        }
+      }
+    })
+  }
+}
+```
+
 ## 配置项
 
 | 参数                | 描述                        | 类型      | 默认值         | 备注                                                    |
@@ -184,4 +247,4 @@ export default {
 | 属性/方法名    | 类型      | 参数                                  | 备注                  |
 |---------------  |---------- |-------------------------------------  |---------------------- |
 | value           | Boolean   | /                                     | 控制窗体打开与关闭     |
-| setSlotValues   | Function  | index(slot序号), values(slot选择项)  | 动态改变slot的选择项  |
+| setSlotValues   | Function  | index(slot序号), values(slot选择项), valueIndex(slot 默认选中的 index)  | 动态改变slot的选择项  |
diff --git a/docs/zh-cn/Radio.md b/docs/zh-cn/Radio.md
@@ -30,6 +30,7 @@ Radio 组件 通过 `v-model` 设置已选中的数据。
         :text="list.value || list"
         v-model="currentValue">
       </wd-radio>
+      <p class="custome-text">{{list.text || list.value || list}}</p>
     </label>
   </li>
 </ul>
@@ -53,7 +54,7 @@ export default {
   ...
   data () {
     return {
-      [{value: '选项1'}, {value: '选中'}, {value: '选项3'}, {value: '被禁用', disChoose: true}],
+      listData: [{value: '选项1', text: '选项text1'}, {value: '选项2', text: '选项text2'}, {value: '选项3', text: '选项text3'}, {value: '选项4', text: '选项text4'}],
       currentValue: '选中',
     }
   }
@@ -116,7 +117,7 @@ export default {
   ...
   data () {
     return {
-      listdata: [lists2: [{value: '选项1'}, {value: '选中'}, {value: '选项3'}, {value: '被禁用', disChoose: true}],
+      listdata: [{value: '选项1', text: '选项text1'}, {value: '选中', text: '选中text'}, {value: '选项3', text: '选项text3'}, {value: '被禁用', text: '被禁用text', disChoose: true}],
       currentValue: '选中',
     }
   }
@@ -127,6 +128,6 @@ export default {
 
 | 参数      | 描述                                            | 类型    | 默认值   | 备注  |
 |---------- |-----------------------------------------------  |-------- |-------- |------ |
-| listData  | 传入的 RadioGroup 数据                         | Array   | []      | 必需  |
+| listData  | 传入的 RadioGroup 数据：value表单value值，text表单展示文字                      | Array   | []      | 必需  |
 | name      | radio name 值，多个表单 list 同时存在时需传入   | String  | ''      | 可选  |
 | v-model   | 双向绑定数据值，同步已选中数据                 | String  | ''      | 必需  |
diff --git a/docs/zh-cn/Scroller.md b/docs/zh-cn/Scroller.md
@@ -145,12 +145,14 @@ export default {
 }
 ```
 
-**__注意__**
+**注意**
 
-Scroller 组件在加载时需要获取组件 DOM 元素宽高，若在 `v-show` 为 `false`，即 `display:none` 的元素中初始化（或类似情景）该组件会导致获取宽高不正常，无法正常工作。
+1.Scroller 组件在加载时需要获取组件 DOM 元素宽高，若在 `v-show` 为 `false`（即 `display:none` ）的元素中初始化该组件会导致获取宽高不正常，无法正常工作。
 
 请在需要切换可视的场景下，使用 `v-if` 指令控制该组件。
 
+2.Scroller 组件在外层绑定了 touch 事件组接管滚动行为。若在 Scroller 组件内部存在需要滚动的元素，请为该元素绑定 touch 事件组并阻止冒泡。
+
 ## Props
 
 | 参数          | 描述                | 类型      | 默认值           | 备注  |

diff --git a/example/components/Example/Checkbox.vue b/example/components/Example/Checkbox.vue
@@ -42,10 +42,10 @@ export default {
   data() {
     return {
       lists1: ['选项1', '选项2', '选项3', '选项4'],
-      lists2: [{value: '多选项'},
-          {value: '选中'},
-          {value: '被禁用', disChoose: true},
-          {value: '选中禁用', disChoose: true}],
+      lists2: [{value: '多选项', text: '多选项text1'},
+                {value: '选中', text: '多选项text2'},
+                {value: '被禁用', text: '多选项text3', disChoose: true},
+                {value: '选中禁用', text: '多选项text4', disChoose: true}],
       lists3: ['选项1', '选项2', '选项3', '选项4'],
       value1: [],
       value2: ['选中', '选中禁用'],

diff --git a/example/components/Example/Picker.vue b/example/components/Example/Picker.vue
@@ -7,6 +7,7 @@
     </wd-header>
     <wd-button @click.native="showPicker">单行 Picker 示例</wd-button>
     <wd-button @click.native="showPicker2">多行动态 Picker 示例</wd-button>
+    <wd-button @click.native="showDatePicker">日期选择器示例</wd-button>
   </div>
 </template>
 
@@ -54,7 +55,7 @@ export default {
     }
   },
   methods: {
-    showPicker: function() {
+    showPicker() {
       this.$Picker({
         slots: [{
           type: 'data',
@@ -76,7 +77,7 @@ export default {
         }
       })
     },
-    showPicker2: function() {
+    showPicker2() {
       this.$Picker({
         slots: [{
           type: 'data',
@@ -104,7 +105,61 @@ export default {
           }
         }
       })
-    }
+    },
+    showDatePicker() {
+      let getYearArray = (offset) => {
+        let currentYear = new Date().getFullYear()
+        let yearArr = []
+        for(let i = currentYear - offset; i <= currentYear + offset; i++) {
+          yearArr.push(i)
+        }
+        return yearArr
+      }
+      let getDayArray = (year, month) => {
+        let tday = new Date(year, month, 0)
+        let dayArr = []
+        for(let i = 1; i <= tday.getDate(); i++) {
+          dayArr.push(i)
+        }
+        return dayArr
+      }
+      this.$Picker({
+        slots: [{
+          type: 'data',
+          flex: 1,
+          values: getYearArray(3),
+          textAlign: 'center',
+          defaultValue: new Date().getFullYear()
+        }, {
+          type: 'divider',
+          content: '-'
+        }, {
+          type: 'data',
+          flex: 1,
+          values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+          textAlign: 'center',
+          defaultValue: new Date().getMonth() + 1
+        }, {
+          type: 'divider',
+          content: '-'
+        }, {
+          type: 'data',
+          flex: 1,
+          values: getDayArray(new Date().getFullYear(), new Date().getMonth() + 1),
+          textAlign: 'center',
+          defaultValue: new Date().getDate()
+        }],
+        onConfirm: (instance, datas) => {
+          alert(datas.slot0 + ' - ' + datas.slot2 + ' - ' + datas.slot4)
+          instance.value = false
+        },
+        onChange: (instance, changeInfo) => {
+          if(changeInfo.changedSlotIndex === 0 || changeInfo.changedSlotIndex === 2) {
+            instance.setSlotValues(4, getDayArray(changeInfo.val.slot0, changeInfo.val.slot2, 0), changeInfo.val.slot4 - 1)
+          }
+        }
+      })
+    },
   }
 }
 </script>

diff --git a/lib/action-sheet.js b/lib/action-sheet.js
diff --git a/lib/badge.js b/lib/badge.js
diff --git a/lib/button.js b/lib/button.js
diff --git a/lib/cell.js b/lib/cell.js
diff --git a/lib/checkbox-group.js b/lib/checkbox-group.js
diff --git a/lib/checkbox.js b/lib/checkbox.js
diff --git a/lib/dialog.js b/lib/dialog.js
diff --git a/lib/header.js b/lib/header.js
diff --git a/lib/image-preview.js b/lib/image-preview.js
diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/lazyload.js b/lib/lazyload.js
diff --git a/lib/message-box.js b/lib/message-box.js
diff --git a/lib/navbar.js b/lib/navbar.js
diff --git a/lib/picker.js b/lib/picker.js
diff --git a/lib/popup.js b/lib/popup.js
diff --git a/lib/radio-group.js b/lib/radio-group.js
diff --git a/lib/radio.js b/lib/radio.js
diff --git a/lib/scroller.js b/lib/scroller.js
diff --git a/lib/search.js b/lib/search.js
diff --git a/lib/swipe-item.js b/lib/swipe-item.js
diff --git a/lib/swipe.js b/lib/swipe.js
diff --git a/lib/switch.js b/lib/switch.js
diff --git a/lib/tab-container-item.js b/lib/tab-container-item.js
diff --git a/lib/tab-container.js b/lib/tab-container.js
diff --git a/lib/tab-item.js b/lib/tab-item.js
diff --git a/lib/tabbar.js b/lib/tabbar.js
diff --git a/lib/toast.js b/lib/toast.js
diff --git a/lib/tooltip.js b/lib/tooltip.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wdui",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "description": "Mobile UI Components Library based on Vue 2.0",
   "main": "lib/index.js",
   "repository": {
@@ -47,7 +47,7 @@
     "chai": "^3.5.0",
     "clean-webpack-plugin": "^0.1.15",
     "coveralls": "^2.13.0",
-    "css-loader": "^0.28.0",
+    "css-loader": "^0.28.4",
     "es6-promise": "^4.0.5",
     "eslint": "^3.19.0",
     "eslint-config-wdfe": "^0.3.2",

diff --git a/packages/CheckboxGroup/src/CheckboxGroup.vue b/packages/CheckboxGroup/src/CheckboxGroup.vue
@@ -9,16 +9,21 @@
         :nowValue="value"
         v-model="currentCheck"
         ></wd-checkbox>
-        <p class="wd-checkboxgroup-text">{{list.value || list}}</p>
+        <p class="wd-checkboxgroup-text">{{list.text || list.value || list}}</p>
       </label>
     </li>
    </ul>
   </div>
 </template>
 
 <script>
+import Checkbox from '../../Checkbox/index.js'
+
 export default {
   name: 'wd-checkboxgroup',
+  components: {
+    'wd-checkbox': Checkbox
+  },
   props: {
     listData: {
       type: Array,

diff --git a/packages/Scroller/src/Scroller.vue b/packages/Scroller/src/Scroller.vue
@@ -150,7 +150,6 @@ export default {
        * 使用 MutationObserver 监听 slot 内 DOM 变动，并及时更新 Scroller
        * ios 6+ , Android 4.4+
        */
-
       this.slotObserver = new MutationObserver(() => {
         this.updateDOMData()
         this.resetDimensions()
@@ -179,6 +178,7 @@ export default {
         bouncing: this.bouncing
       })
       this.scroller.setPosition(this.scrollTargetRect.left + this.$scrollTarget.clientLeft, this.scrollTargetRect.top + this.$scrollTarget.clientTop)
+      this.resetDimensions()
 
       /*
        * 若 onRefresh 不为空，绑定下拉刷新相关事件

diff --git a/src/index.js b/src/index.js
@@ -65,7 +65,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue)
 }
 
-const version = '0.6.7'
+const version = '0.6.8'
 
 export {
   install,

diff --git a/test/unit/CheckGroup.spec.js b/test/unit/CheckGroup.spec.js
@@ -29,6 +29,32 @@ describe('CheckboxGroup', () => {
       done()
     })
   })
+  it('CheckboxGroup 初始化对象数据', done => {
+    vm = createVueInstance({
+      template: `
+        <wd-checkboxgroup :listData="lists" :name="'group1'" v-model="value1"></wd-checkboxgroup>
+      `,
+      data() {
+        return {
+          lists: [{value: '选项1', text: '选项text1'}, {value: '选项2', text: '选项text2'}, {value: '选项3', text: '选项text3'}, {value: '选项4', text: '选项text4'}],
+          value1: ''
+        }
+      }
+    })
+    Vue.nextTick(() => {
+      const $dom = document.body.querySelector('.wd-checkboxgroup')
+      expect($dom).to.exist
+      const inputNum = $dom.getElementsByTagName('input').length
+      expect(inputNum).to.equal(vm.lists.length)
+      const listsText = document.body.querySelectorAll('.wd-checkboxgroup-text')
+      expect(listsText[0].innerText).to.equal('选项text1')
+      expect(listsText[1].innerText).to.equal('选项text2')
+      expect(listsText[2].innerText).to.equal('选项text3')
+      expect(listsText[3].innerText).to.equal('选项text4')
+      destroyVM(vm)
+      done()
+    })
+  })
   it('CheckboxGroup 初始化未传值', done => {
     vm = createVueInstance({
       template: `

diff --git a/yarn.lock b/yarn.lock
@@ -1495,13 +1495,14 @@ css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
-css-loader@^0.28.0:
-  version "0.28.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.0.tgz#417cfa9789f8cde59a30ccbf3e4da7a806889bad"
+css-loader@latest:
+  version "0.28.4"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.4.tgz#6cf3579192ce355e8b38d5f42dd7a1f2ec898d0f"
   dependencies:
     babel-code-frame "^6.11.0"
     css-selector-tokenizer "^0.7.0"
     cssnano ">=2.6.1 <4"
+    icss-utils "^2.1.0"
     loader-utils "^1.0.2"
     lodash.camelcase "^4.3.0"
     object-assign "^4.0.1"
@@ -1510,6 +1511,7 @@ css-loader@^0.28.0:
     postcss-modules-local-by-default "^1.0.1"
     postcss-modules-scope "^1.0.0"
     postcss-modules-values "^1.1.0"
+    postcss-value-parser "^3.3.0"
     source-list-map "^0.1.7"
 
 css-select@^1.1.0:
@@ -3135,6 +3137,12 @@ icss-replace-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
 
+icss-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
+  dependencies:
+    postcss "^6.0.1"
+
 ieee754@^1.1.4:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
@@ -5216,6 +5224,14 @@ postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
+postcss@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.2.tgz#5c4fea589f0ac3b00caa75b1cbc3a284195b7e5d"
+  dependencies:
+    chalk "^1.1.3"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
 pre-commit@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.2.2.tgz#dbcee0ee9de7235e57f79c56d7ce94641a69eec6"