Feat index list options

* feat(index-list): add "options" props

* docs(index-list): update document about props "options"

* refactor: deprecated

document/components/docs/en-US/index-list.md

@@ -231,8 +231,9 @@
 | data | data to be displayed | Array | [] |
 | navbar | whether need navbar | Boolean | true |
 | speed | when click the navigator, the transition time of scrolling to the specific anchor (unit: ms). | number | 0 |
-| pullUpLoad<sup>1.8.0+</sup> | pull-up-load, the detail config is same as the `options.pullUpLoad` of Scroll | Boolean/Object | false |
-| pullDownRefresh<sup>1.8.0+</sup> | pull-down-refresh, the detail config is same as the `options.pullDownRefresh` of Scroll | Boolean/Object | false |
+| options<sup>1.9.8+</sup> | the options of better-scroll, you could find details at [BS Document](https://ustbhuangyi.github.io/better-scroll/doc/en/options.html) | Object | {<br>  observeDOM: true,<br>  click: true,<br>  probeType: 1,<br>  scrollbar: false,<br>  pullDownRefresh: false,<br>  pullUpLoad: false<br>} |
+| pullUpLoad<sup>1.8.0+</sup> | pull-up-load, the detail config is same as the `options.pullUpLoad` of Scroll. `Deprecated`, please use the property `options` instead. | Boolean/Object | false |
+| pullDownRefresh<sup>1.8.0+</sup> | pull-down-refresh, the detail config is same as the `options.pullDownRefresh` of Scroll. `Deprecated`, please use the property `options` instead. | Boolean/Object | false |
 
 - `data` sub configuration
 

document/components/docs/zh-CN/index-list.md

@@ -231,8 +231,9 @@
 | data | 需要展示的数据 | Array | [] |
 | navbar | 是否需要导航栏 | Boolean | true |
 | speed | 点击导航栏索引时，滚动到相应位置的动画时间（单位：ms） | number | 0 |
-| pullUpLoad<sup>1.8.0+</sup> | 上拉加载，具体配置参考 scroll 组件的 `options.pullUpLoad` | Boolean/Object | false |
-| pullDownRefresh<sup>1.8.0+</sup> | 下拉刷新，具体配置参考 scroll 组件的 `options.pullDownRefresh` | Boolean/Object | false |
+| options<sup>1.9.8+</sup> | better-scroll 配置项，具体请参考[BS 官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html) | Object | {<br>  observeDOM: true,<br>  click: true,<br>  probeType: 1,<br>  scrollbar: false,<br>  pullDownRefresh: false,<br>  pullUpLoad: false<br>} |
+| pullUpLoad<sup>1.8.0+</sup> | 上拉加载，具体配置参考 scroll 组件的 `options.pullUpLoad`。`即将废弃`，推荐使用 `options` 属性 | Boolean/Object | false |
+| pullDownRefresh<sup>1.8.0+</sup> | 下拉刷新，具体配置参考 scroll 组件的 `options.pullDownRefresh`。`即将废弃`，推荐使用 `options` 属性 | Boolean/Object | false |
 
 - `data` 子配置项
 

example/pages/index-list/pull-down-refresh.vue

@@ -7,7 +7,7 @@
             ref="indexList"
             :data="data"
             :title="title"
-            :pullDownRefresh="pullDownRefresh"
+            :options="options"
             @select="selectItem"
             @title-click="clickTitle"
             @pulling-down="onPullingDown">
@@ -30,8 +30,10 @@
       return {
         title: 'Current City: BEIJING',
         data: cityData,
-        pullDownRefresh: {
-          stop: 55
+        options: {
+          pullDownRefresh: {
+            stop: 55
+          }
         }
       }
     },

example/pages/index-list/pull-up-load.vue

@@ -7,7 +7,7 @@
             ref="indexList"
             :data="data"
             :title="title"
-            :pullUpLoad="true"
+            :options="options"
             @select="selectItem"
             @title-click="clickTitle"
             @pulling-up="onPullingUp">
@@ -29,7 +29,10 @@
     data() {
       return {
         title: 'Current City: BEIJING',
-        data: cityData.slice(0, 4)
+        data: cityData.slice(0, 4),
+        options: {
+          pullUpLoad: true
+        }
       }
     },
     methods: {

src/common/mixins/deprecated.js

+import { tip } from '../../common/helpers/debug'
+import { kebab } from '../../common/lang/string'
+
+export default {
+  methods: {
+    _checkDeprecated() {
+      const props = this.$options.props
+      const componentName = this.$options.name
+
+      Object.entries(props).forEach(([key, prop]) => {
+        const deprecated = prop.deprecated
+
+        if (deprecated && this[key] !== undefined) {
+          tip(`The property "${kebab(key)}" is deprecated, please use the recommended property "${deprecated.replacedBy}" to replace it. Details could be found in https://didi.github.io/cube-ui/#/en-US/docs/${componentName.substr(5)}#cube-Propsconfiguration-anchor`, componentName)
+        }
+      })
+    }
+  },
+  mounted() {
+    this._checkDeprecated()
+  }
+}

src/components/index-list/index-list.vue

@@ -3,7 +3,7 @@
     <cube-scroll
       ref="scroll"
       :scroll-events="scrollEvents"
-      :options="options"
+      :options="scrollOptions"
       :data="data"
       @scroll="scroll"
       @pulling-down="onPullingDown"
@@ -67,6 +67,8 @@
 
   import CubeScroll from '../scroll/scroll.vue'
   import CubeIndexListGroup from './index-list-group.vue'
+  import scrollMixin from '../../common/mixins/scroll'
+  import deprecatedMixin from '../../common/mixins/deprecated'
 
   const COMPONENT_NAME = 'cube-index-list'
   const EVENT_SELECT = 'select'
@@ -79,6 +81,7 @@
 
   export default {
     name: COMPONENT_NAME,
+    mixins: [scrollMixin, deprecatedMixin],
     props: {
       title: {
         type: String,
@@ -99,12 +102,18 @@
         default: true
       },
       pullDownRefresh: {
-        type: [Boolean, Object],
-        default: false
+        type: [Object, Boolean],
+        default: undefined,
+        deprecated: {
+          replacedBy: 'options'
+        }
       },
       pullUpLoad: {
-        type: [Boolean, Object],
-        default: false
+        type: [Object, Boolean],
+        default: undefined,
+        deprecated: {
+          replacedBy: 'options'
+        }
       }
     },
     data() {
@@ -127,12 +136,11 @@
           return group ? group.shortcut || group.name.substr(0, 1) : ''
         })
       },
-      options() {
-        return {
-          probeType: 3,
+      scrollOptions() {
+        return Object.assign({}, {
           pullDownRefresh: this.pullDownRefresh,
           pullUpLoad: this.pullUpLoad
-        }
+        }, this.options)
       }
     },
     created() {

src/components/scroll/scroll.vue

@@ -52,9 +52,9 @@
   import Loading from '../loading/loading.vue'
   import Bubble from '../bubble/bubble.vue'
   import scrollMixin from '../../common/mixins/scroll'
+  import deprecatedMixin from '../../common/mixins/deprecated'
   import { getRect } from '../../common/helpers/dom'
-  import { camelize, kebab } from '../../common/lang/string'
-  import { tip } from '../../common/helpers/debug'
+  import { camelize } from '../../common/lang/string'
 
   const COMPONENT_NAME = 'cube-scroll'
   const DIRECTION_H = 'horizontal'
@@ -83,7 +83,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [scrollMixin],
+    mixins: [scrollMixin, deprecatedMixin],
     props: {
       data: {
         type: Array,
@@ -105,11 +105,17 @@
       // TODO: plan to remove at 1.10.0
       listenScroll: {
         type: Boolean,
-        default: false
+        default: undefined,
+        deprecated: {
+          replacedBy: 'options'
+        }
       },
       listenBeforeScroll: {
         type: Boolean,
-        default: false
+        default: undefined,
+        deprecated: {
+          replacedBy: 'options'
+        }
       },
       direction: {
         type: String,
@@ -223,7 +229,6 @@
       this.$nextTick(() => {
         this.initScroll()
       })
-      this._checkDeprecated()
     },
     beforeDestroy() {
       this.destroy()
@@ -356,12 +361,6 @@
           dirty && this.refresh()
         }, this.scroll.options.bounceTime)
       },
-      _checkDeprecated() {
-        const deprecatedKeys = ['listenScroll', 'listenBeforeScroll']
-        deprecatedKeys.forEach((key) => {
-          this[key] && tip(`The property "${kebab(key)}" is deprecated, please use the recommended property "scroll-events" to replace it. Details could be found in https://didi.github.io/cube-ui/#/en-US/docs/scroll#cube-Propsconfiguration-anchor`, COMPONENT_NAME)
-        })
-      },
       _getPullDownEleHeight() {
         const pulldown = this.$refs.pulldown.firstChild
         this.pullDownHeight = getRect(pulldown).height

src/components/slide/slide.vue

@@ -22,8 +22,7 @@
   import CubeSlideItem from './slide-item.vue'
   import BScroll from 'better-scroll'
   import scrollMixin from '../../common/mixins/scroll'
-  import { tip } from '../../common/helpers/debug'
-  import { kebab } from '../../common/lang/string'
+  import deprecatedMixin from '../../common/mixins/deprecated'
 
   const COMPONENT_NAME = 'cube-slide'
   const EVENT_CHANGE = 'change'
@@ -42,7 +41,7 @@
 
   export default {
     name: COMPONENT_NAME,
-    mixins: [scrollMixin],
+    mixins: [scrollMixin, deprecatedMixin],
     props: {
       data: {
         type: Array,
@@ -86,11 +85,17 @@
       // The props allowVertical, stopPropagation could be removed in next minor version.
       allowVertical: {
         type: Boolean,
-        default: false
+        default: undefined,
+        deprecated: {
+          replacedBy: 'options'
+        }
       },
       stopPropagation: {
         type: Boolean,
-        default: false
+        default: undefined,
+        deprecated: {
+          replacedBy: 'options'
+        }
       }
     },
     data() {
@@ -263,12 +268,6 @@
           }
           this._refresh()
         }, 60)
-      },
-      _checkDeprecated() {
-        const deprecatedKeys = ['allowVertical', 'stopPropagation']
-        deprecatedKeys.forEach((key) => {
-          this[key] && tip(`The property "${kebab(key)}" is deprecated, please use the recommended property "options" to replace it. Details could be found in https://didi.github.io/cube-ui/#/en-US/docs/slide#cube-Propsconfiguration-anchor`, COMPONENT_NAME)
-        })
       }
     },
     mounted() {
@@ -277,8 +276,6 @@
       })
 
       window.addEventListener('resize', this._resizeHandler)
-
-      this._checkDeprecated()
     },
     activated() {
       /* istanbul ignore next */