Merge branch 'dev'

.all-contributorsrc

@@ -68,7 +68,27 @@
       "contributions": [
         "bug"
       ]
+    },
+    {
+      "login": "lianghx-319",
+      "name": "Han",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/27187946?v=4",
+      "profile": "https://github.com/lianghx-319",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "PPPenny",
+      "name": "PPPenny",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/20984729?v=4",
+      "profile": "https://github.com/PPPenny",
+      "contributions": [
+        "code",
+        "doc"
+      ]
     }
   ],
-  "contributorsPerLine": 7
+  "contributorsPerLine": 7,
+  "skipCi": true
 }

.travis.yml

@@ -5,7 +5,7 @@ language: node_js
 node_js:
 - lts/*
 git:
-  depth: 3
+  depth: 30
 install:
 - yarn --frozen-lockfile
 - yarn test

README.md

@@ -140,18 +140,25 @@ Please refer to our [contributing guide](https://github.com/FEMessage/.github/bl
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="https://github.com/listars"><img src="https://avatars2.githubusercontent.com/u/20613509?v=4" width="100px;" alt="listars"/><br /><sub><b>listars</b></sub></a><br /><a href="https://github.com/FEMessage/data-list/commits?author=listars" title="Code">💻</a> <a href="https://github.com/FEMessage/data-list/issues?q=author%3Alistars" title="Bug reports">🐛</a> <a href="https://github.com/FEMessage/data-list/commits?author=listars" title="Documentation">📖</a> <a href="#example-listars" title="Examples">💡</a></td>
-    <td align="center"><a href="http://levy.work"><img src="https://avatars3.githubusercontent.com/u/9384365?v=4" width="100px;" alt="levy"/><br /><sub><b>levy</b></sub></a><br /><a href="#review-levy9527" title="Reviewed Pull Requests">👀</a> <a href="#ideas-levy9527" title="Ideas, Planning, & Feedback">🤔</a></td>
-    <td align="center"><a href="https://evila.me"><img src="https://avatars3.githubusercontent.com/u/19513289?v=4" width="100px;" alt="EVILLT"/><br /><sub><b>EVILLT</b></sub></a><br /><a href="#infra-evillt" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
-    <td align="center"><a href="http://67.216.223.155/resume/"><img src="https://avatars3.githubusercontent.com/u/26338853?v=4" width="100px;" alt="OuZuYu"/><br /><sub><b>OuZuYu</b></sub></a><br /><a href="https://github.com/FEMessage/data-list/issues?q=author%3AOuZuYu" title="Bug reports">🐛</a></td>
-    <td align="center"><a href="https://donaldshen.github.io/portfolio"><img src="https://avatars3.githubusercontent.com/u/19591950?v=4" width="100px;" alt="Donald Shen"/><br /><sub><b>Donald Shen</b></sub></a><br /><a href="https://github.com/FEMessage/data-list/issues?q=author%3Adonaldshen" title="Bug reports">🐛</a> <a href="#question-donaldshen" title="Answering Questions">💬</a></td>
-    <td align="center"><a href="https://github.com/zcqno1"><img src="https://avatars0.githubusercontent.com/u/11766057?v=4" width="100px;" alt="Sponge"/><br /><sub><b>Sponge</b></sub></a><br /><a href="https://github.com/FEMessage/data-list/issues?q=author%3Azcqno1" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/listars"><img src="https://avatars2.githubusercontent.com/u/20613509?v=4" width="100px;" alt=""/><br /><sub><b>listars</b></sub></a><br /><a href="https://github.com/FEMessage/data-list/commits?author=listars" title="Code">💻</a> <a href="https://github.com/FEMessage/data-list/issues?q=author%3Alistars" title="Bug reports">🐛</a> <a href="https://github.com/FEMessage/data-list/commits?author=listars" title="Documentation">📖</a> <a href="#example-listars" title="Examples">💡</a></td>
+    <td align="center"><a href="http://levy.work"><img src="https://avatars3.githubusercontent.com/u/9384365?v=4" width="100px;" alt=""/><br /><sub><b>levy</b></sub></a><br /><a href="https://github.com/FEMessage/data-list/pulls?q=is%3Apr+reviewed-by%3Alevy9527" title="Reviewed Pull Requests">👀</a> <a href="#ideas-levy9527" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://evila.me"><img src="https://avatars3.githubusercontent.com/u/19513289?v=4" width="100px;" alt=""/><br /><sub><b>EVILLT</b></sub></a><br /><a href="#infra-evillt" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="http://67.216.223.155/resume/"><img src="https://avatars3.githubusercontent.com/u/26338853?v=4" width="100px;" alt=""/><br /><sub><b>OuZuYu</b></sub></a><br /><a href="https://github.com/FEMessage/data-list/issues?q=author%3AOuZuYu" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://donaldshen.github.io/portfolio"><img src="https://avatars3.githubusercontent.com/u/19591950?v=4" width="100px;" alt=""/><br /><sub><b>Donald Shen</b></sub></a><br /><a href="https://github.com/FEMessage/data-list/issues?q=author%3Adonaldshen" title="Bug reports">🐛</a> <a href="#question-donaldshen" title="Answering Questions">💬</a></td>
+    <td align="center"><a href="https://github.com/zcqno1"><img src="https://avatars0.githubusercontent.com/u/11766057?v=4" width="100px;" alt=""/><br /><sub><b>Sponge</b></sub></a><br /><a href="https://github.com/FEMessage/data-list/issues?q=author%3Azcqno1" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/lianghx-319"><img src="https://avatars2.githubusercontent.com/u/27187946?v=4" width="100px;" alt=""/><br /><sub><b>Han</b></sub></a><br /><a href="https://github.com/FEMessage/data-list/commits?author=lianghx-319" title="Documentation">📖</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/PPPenny"><img src="https://avatars3.githubusercontent.com/u/20984729?v=4" width="100px;" alt=""/><br /><sub><b>PPPenny</b></sub></a><br /><a href="https://github.com/FEMessage/data-list/commits?author=PPPenny" title="Code">💻</a> <a href="https://github.com/FEMessage/data-list/commits?author=PPPenny" title="Documentation">📖</a></td>
   </tr>
 </table>
 
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

docs/faq.md

@@ -1,3 +1,13 @@
+## 为什么数据为空时不会触发 loaded 事件
+可能有些小伙伴以为 loaded 事件会在每次下/上拉发起数据请求结束时触发，但其实只对了一半：
+- loaded 事件仅在真正获取到数据时（payload数组长度大于0）触发，可以理解为这时真正有数据被“loaded”；
+- complete 事件在获取数据为空时触发。
+也就是说这两个事件加起来才代表着：“用户每次下/上拉刷新后的时机”
+
+那这样区分的好处是：组件可以知道什么时候该展示 slot-no-results（列表完全没内容时的友好提示）而什么时候该展示 slot-no-more（提示用户别再下拉）并不再监听用户下拉动作
+
+这里对应的是内部使用的 [vue-infinite-loading 组件逻辑](https://peachscript.github.io/vue-infinite-loading/zh/api/#%E4%BA%8B%E4%BB%B6)，有兴趣的同学可以花一分钟看一下
+
 ## 有时会出现加载多次或者无法加载的问题
 加载多次和无法加载都是复杂的页面布局导致组件监听的滚动元素异常的问题，这些问题都不应该是组件去处理
 
@@ -17,7 +27,13 @@
 * 指定监听的滚动元素（避免错乱布局造成的多次请求或者不发送请求）
 
 ```html
-<div style="overflow-y: auto">
+<div style="overflow-y: auto;">
   <data-list ref="dataList" :url="url" force-use-infinite-wrapper></data-list>
 </div>
 ```
+
+## 多 Tabs 切换 data-list 的时候列表元素叠加的问题
+
+在移动端使用多 Tabs 切换 data-list 列表时，如果当前 tab 的 data-list 正在 loading，同时去切换 tab，前一个 data-list 的数据会被更新到，后一个 data-list 中
+
+为了防止这种情况，可以[监听 loading 事件](https://femessage.github.io/data-list/#/Components?id=datalist)，当 data-list loading 时，禁止切换 Tabs。

docs/throw-custom-error.md

@@ -0,0 +1,44 @@
+
+throw-custom-error
+
+```vue
+<template>
+  <div style="height: 400px; overflow: auto">
+    <data-list ref="dataList" v-bind="listConfig"  @error="error">
+      <!--通过slot-scope从data-list组件获取到返回的数据-->
+      <!-- get list itme data via slot, so you can customize rendering-->
+      <ul slot-scope="props">
+        <li v-for="(item, index) in props.list" :key="index">
+          {{item.name}}
+        </li>
+      </ul>
+      <div slot="error">{{errorMsg}}</div>
+    </data-list>
+  </div>
+</template>
+<script>
+import _get from 'lodash.get'
+export default {
+  data() {
+    return {
+        listConfig:{
+           url: 'https://mockapi.eolinker.com/KNhMPAkb444ac06613fc8d63795be9ad0beaf55011936ac/data-list',
+           throwCustomError:this.throwCustomError
+        },
+       errorMsg:''
+    }
+  },
+  methods:{
+     error(e){
+      this.errorMsg = e.message
+    },
+     throwCustomError(resp){
+       if(!_get(resp, 'payload')){
+         throw resp
+       }
+    }
+  }
+}
+</script>
+```
+

netlify.sh

@@ -0,0 +1,17 @@
+#!/bin/sh
+echo "is netlify: $NETLIFY"
+echo "in branch: $BRANCH"
+echo "head: $HEAD"
+
+if [ "$NETLIFY" != "true" ]
+then
+  echo "this script only runs in netlify, bye"
+  exit 1
+fi
+
+if [ "$BRANCH" != "dev" ] && [ "$HEAD" != "dev" ]
+then
+  yarn doc
+else
+  echo "this script only runs in targeting dev's PR deploy preview, bye"
+fi

notify.sh

@@ -5,12 +5,15 @@ then
   exit 1
 fi
 
-git remote add github https://$GITHUB_TOKEN@github.com/FEMessage/data-list.git > /dev/null 2>&1
+ORG_NAME=$(echo "$TRAVIS_REPO_SLUG" | cut -d '/' -f 1)
+REPO_NAME=$(echo "$TRAVIS_REPO_SLUG" | cut -d '/' -f 2)
+
+git remote add github https://$GITHUB_TOKEN@github.com/$TRAVIS_REPO_SLUG.git > /dev/null 2>&1
 git push github HEAD:master --follow-tags
 
 GREN_GITHUB_TOKEN=$GITHUB_TOKEN yarn release
 
-url=https://api.github.com/repos/FEMessage/data-list/releases/latest
+url=https://api.github.com/repos/$TRAVIS_REPO_SLUG/releases/latest
 resp_tmp_file=resp.tmp
 
 curl -H "Authorization: token $GITHUB_TOKEN" $url > $resp_tmp_file
@@ -19,7 +22,7 @@ html_url=$(sed -n 5p $resp_tmp_file | sed 's/\"html_url\"://g' | awk -F '"' '{pr
 body=$(grep body < $resp_tmp_file | sed 's/\"body\"://g;s/\"//g')
 version=$(echo $html_url | awk -F '/' '{print $NF}')
 
-msg='{"msgtype": "markdown", "markdown": {"title": "data-list更新", "text": "@所有人\n# [data-list('$version')]('$html_url')\n'$body'"}}'
+msg='{"msgtype": "markdown", "markdown": {"title": "'$REPO_NAME'更新", "text": "@所有人\n# ['$REPO_NAME'('$version')]('$html_url')\n'$body'"}}'
 
 curl -X POST https://oapi.dingtalk.com/robot/send\?access_token\=$DINGTALK_ROBOT_TOKEN -H 'Content-Type: application/json' -d "$msg"
 

package.json

@@ -42,10 +42,10 @@
     "@babel/core": "^7.4.3",
     "@babel/plugin-transform-runtime": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
+    "@femessage/github-release-notes": "^0.19.0",
     "axios": "^0.19.0",
     "babel-loader": "^8.0.5",
     "file-loader": "^3.0.1",
-    "github-release-notes": "^0.17.0",
     "glob": "^7.1.3",
     "husky": "1.3.1",
     "jest": "^24.8.0",
@@ -71,7 +71,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "vue-sfc-cli": "1.10.6",
+  "vue-sfc-cli": "1.11.4",
   "engines": {
     "node": ">= 4.0.0",
     "npm": ">= 3.0.0"
@@ -92,5 +92,6 @@
       "stylelint --fix",
       "git add"
     ]
-  }
+  },
+  "gren": "@femessage/grenrc"
 }

src/data-list.vue

@@ -116,6 +116,13 @@ export default {
     saveQuery: {
       type: Boolean,
       default: true
+    },
+    /**
+     * error 特殊处理异常情况
+     */
+    throwCustomError:{
+      type: Function,
+      default: null
     }
   },
   data() {
@@ -195,7 +202,8 @@ export default {
 
       try {
         const {data: resp} = await this.$axios.get(url + queryStr)
-
+        // 处理业务异常情况
+         this.throwCustomError && this.throwCustomError(resp)
         // 当读取结果为undefined时取默认值[]
         const data = _get(resp, this.dataPath, [])
         const action = isDirectionDown ? 'push' : 'unshift'

src/index.js

@@ -1,16 +1,12 @@
 // Import vue component
 import Component from './data-list.vue'
 
-// install function executed by Vue.use()
-export function install(Vue) {
-  if (install.installed) return
-  install.installed = true
-  Vue.component('DataList', Component)
-}
-
-// Create module definition for Vue.use()
-const plugin = {
-  install
+// `Vue.use` automatically prevents you from using
+// the same plugin more than once,
+// so calling it multiple times on the same plugin
+// will install the plugin only once
+Component.install = Vue => {
+  Vue.component(Component.name, Component)
 }
 
 // To auto-install when vue is found
@@ -21,7 +17,7 @@ if (typeof window !== 'undefined') {
   GlobalVue = global.Vue
 }
 if (GlobalVue) {
-  GlobalVue.use(plugin)
+  GlobalVue.use(Component)
 }
 
 // To allow use as module (npm/webpack/etc.) export component