From 19dcc0f4f06642da9ed7cfb9fe342d35ead8e1fa Mon Sep 17 00:00:00 2001 From: Peach Date: Wed, 24 Oct 2018 17:36:09 +0800 Subject: [PATCH 01/56] build: create docs deployment script --- .gitignore | 3 ++- package.json | 1 + scripts/deploy_docs.sh | 24 ++++++++++++++++++++++++ 3 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 scripts/deploy_docs.sh diff --git a/.gitignore b/.gitignore index c8b2d72..afb7312 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .DS_Store -node_modules/ +node_modules npm-debug.log test/unit/coverage +docs/.vuepress/dist diff --git a/package.json b/package.json index 103fea8..3f199ef 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "build": "NODE_ENV=production webpack --config scripts/webpack.config.js -p --progress --hide-modules", "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs", + "docs:deploy": "bash ./scripts/deploy_docs.sh", "lint": "eslint -f friendly --ext .js,.vue ./", "test": "BABEL_ENV=test karma start scripts/karma.conf.js", "precommit": "npm run lint", diff --git a/scripts/deploy_docs.sh b/scripts/deploy_docs.sh new file mode 100644 index 0000000..6b5d1ff --- /dev/null +++ b/scripts/deploy_docs.sh @@ -0,0 +1,24 @@ +set -e +shopt -s extglob + +TEMP_PATH="docs/.vuepress/.temp" + +# build docs +npm run docs:build + +# prepare deploy +mkdir $TEMP_PATH +cd $TEMP_PATH +git init +git pull git@github.com:PeachScript/vue-infinite-loading.git gh-pages +rm -rf ./!(old) # keep old version docs +cp -r ../dist/* . + +# commit and push changes +git add -A +git commit --am -m "deploy documentation" +git push -f git@github.com:PeachScript/vue-infinite-loading.git master:gh-pages + +# clean +cd - +rm -rf $TEMP_PATH From 0ac1643078a7104ffc3beabfa99337d0cc5f197d Mon Sep 17 00:00:00 2001 From: Peach Date: Wed, 24 Oct 2018 18:00:50 +0800 Subject: [PATCH 02/56] fix: add missing types for plugin options and error slot --- types/index.d.ts | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index b016106..91f1f5d 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -3,7 +3,7 @@ // Definitions by: Phil Scott // PeachScript -import Vue, { VNode } from 'vue'; +import Vue, { VNode, Component } from 'vue'; export type SpinnerType = 'default' | 'bubbles' | 'circles' | 'spiral' | 'waveDots'; export type DirectionType = 'top' | 'bottom'; @@ -12,6 +12,7 @@ export interface Slots { spinner: VNode[]; 'no-result': VNode[]; 'no-more': VNode[]; + 'error': VNode[]; [key: string]: VNode[]; } @@ -19,6 +20,27 @@ export interface StateChanger { loaded(): void; complete(): void; reset(): void; + error(): void; +} + +export interface InfiniteOptions { + props?: { + spinner?: SpinnerType; + distance?: number; + forceUseInfiniteWrapper?: boolean | string; + }; + + system?: { + throttleLimit?: number; + }; + + slots?: { + noResults?: string | Component; + noMore?: string | Component; + error?: string | Component; + errorBtnText?: string; + spinner?: string | Component; + }; } export default class InfiniteLoading extends Vue { @@ -32,7 +54,7 @@ export default class InfiniteLoading extends Vue { direction: DirectionType; // Whether find the element which has `infinite-wrapper` attribute as the scroll wrapper - forceUseInfiniteWrapper: boolean; + forceUseInfiniteWrapper: boolean | string; // Infinite event handler onInfinite: ($state: StateChanger) => void; From a1d02aab78e5c00039f7f3525c44b8dfa3d8e554 Mon Sep 17 00:00:00 2001 From: Peach Date: Thu, 25 Oct 2018 14:46:42 +0800 Subject: [PATCH 03/56] docs: add en and zh top direction guide page --- docs/.vuepress/config.js | 2 ++ docs/guide/top-dir-scroll.md | 55 +++++++++++++++++++++++++++++++++ docs/zh/guide/top-dir-scroll.md | 55 +++++++++++++++++++++++++++++++++ 3 files changed, 112 insertions(+) create mode 100644 docs/guide/top-dir-scroll.md create mode 100644 docs/zh/guide/top-dir-scroll.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 71eff7f..7d7064a 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -43,6 +43,7 @@ module.exports = { '', 'start-with-hn', 'use-with-filter-or-tabs', + 'top-dir-scroll', 'configure-load-msg', 'configure-plugin-opts', ], @@ -86,6 +87,7 @@ module.exports = { '', 'start-with-hn', 'use-with-filter-or-tabs', + 'top-dir-scroll', 'configure-load-msg', 'configure-plugin-opts', ], diff --git a/docs/guide/top-dir-scroll.md b/docs/guide/top-dir-scroll.md new file mode 100644 index 0000000..a9559d3 --- /dev/null +++ b/docs/guide/top-dir-scroll.md @@ -0,0 +1,55 @@ +--- +previewLink: //jsfiddle.net/PeachScript/qac2h5v1/embedded/result/ +--- + +# Top Direction Scroll + +Okay, it's the time to try the top direction scroll list, this plugin will save and restore scroll height automatically since `v2.4.0`, it means top direction feature can be used out of the box now! + +``` html {5} +
+ +
+ + + +
+ +
+``` + +In the template, we moved the `InfiniteLoading` component to the top of the news list, and set `direction` property to `top`. + +``` js {21} +import axios from 'axios'; + +const api = '//hn.algolia.com/api/v1/search_by_date?tags=story'; + +export default { + data() { + return { + page: 1, + list: [], + }; + }, + methods: { + infiniteHandler($state) { + axios.get(api, { + params: { + page: this.page, + }, + }).then(({ data }) => { + if (data.hits.length) { + this.page += 1; + this.list.unshift(...data.hits.reverse()); + $state.loaded(); + } else { + $state.complete(); + } + }); + }, + }, +}; +``` + +The script part is almost the same as the [basic Hacker News](./start-with-hn.md), the difference is, we reverse the news data from server and unshift them into the `list`. That's it, this plugin will do the remaining work, is it very easy? diff --git a/docs/zh/guide/top-dir-scroll.md b/docs/zh/guide/top-dir-scroll.md new file mode 100644 index 0000000..6b9f457 --- /dev/null +++ b/docs/zh/guide/top-dir-scroll.md @@ -0,0 +1,55 @@ +--- +previewLink: //jsfiddle.net/PeachScript/qac2h5v1/embedded/result/ +--- + +# 向上进行无限滚动 + +现在是时候尝试完成一个方向朝上的无限滚动列表了，从 `v2.4.0` 版本开始，此插件将会自动保存和复原滚动条的高度，这意味着向上无限滚动的功能现在可以开箱即用！ + +``` html {5} +
+ +
+ + + +
+ +
+``` + +在模板中，我们将 `InfiniteLoading` 组件移动到了新闻列表的上方，并且设置 `direction` 属性值为 `top`。 + +``` js {21} +import axios from 'axios'; + +const api = '//hn.algolia.com/api/v1/search_by_date?tags=story'; + +export default { + data() { + return { + page: 1, + list: [], + }; + }, + methods: { + infiniteHandler($state) { + axios.get(api, { + params: { + page: this.page, + }, + }).then(({ data }) => { + if (data.hits.length) { + this.page += 1; + this.list.unshift(...data.hits.reverse()); + $state.loaded(); + } else { + $state.complete(); + } + }); + }, + }, +}; +``` + +逻辑部分跟 [基础 Hacker News](./start-with-hn.md) 几乎一致，不同的地方在于，我们将拿到的新闻数据进行了反转然后插入到了列表的最前面。这样就可以了，剩下的事插件将会替我们完成，是不是很简单？ From 90b8fb9bfbd47e2be655e67f4d8878fb36ba1379 Mon Sep 17 00:00:00 2001 From: Peach Date: Thu, 25 Oct 2018 18:02:30 +0800 Subject: [PATCH 04/56] docs: improve basic and filter Hacker News example and preview --- docs/README.md | 2 +- docs/guide/README.md | 6 +++--- docs/guide/start-with-hn.md | 8 ++++---- docs/guide/use-with-filter-or-tabs.md | 14 +++++++------- docs/zh/README.md | 2 +- docs/zh/guide/README.md | 4 ++-- docs/zh/guide/start-with-hn.md | 8 ++++---- docs/zh/guide/use-with-filter-or-tabs.md | 16 ++++++++-------- 8 files changed, 30 insertions(+), 30 deletions(-) diff --git a/docs/README.md b/docs/README.md index 267830c..5b3267e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -10,5 +10,5 @@ features: details: Support top and bottom directions currently, adapt to more different scenes - title: Result display details: Configurable load result display, for example no more data, no results and etc -previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/ +previewLink: //jsfiddle.net/PeachScript/a4Lxbf9w/embedded/result/ --- diff --git a/docs/guide/README.md b/docs/guide/README.md index 9acc54b..2327490 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -1,5 +1,5 @@ --- -previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/ +previewLink: //jsfiddle.net/PeachScript/a4Lxbf9w/embedded/result/ --- # Guide @@ -7,7 +7,7 @@ previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/ ### NPM -If you are building big application now, recommend you use the way. +If you are building large application now, recommend you use the way. ``` bash npm install vue-infinite-loading -S @@ -22,7 +22,7 @@ After you imported this plugin through `script` tag, it will register `InfiniteL You can import this plugin from [unpkg](https://unpkg.com): ``` html - + ``` #### Manual diff --git a/docs/guide/start-with-hn.md b/docs/guide/start-with-hn.md index 508123c..7923a6f 100644 --- a/docs/guide/start-with-hn.md +++ b/docs/guide/start-with-hn.md @@ -1,5 +1,5 @@ --- -previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/ +previewLink: //jsfiddle.net/PeachScript/a4Lxbf9w/embedded/result/ --- # Start With Hacker News @@ -8,12 +8,12 @@ As the first step in learning this plugin, we will create a infinite scroll vers Firstly, we need to write template, it similar to this (ommited unimportant code): -``` html +``` html {9}
-
+
@@ -45,7 +45,7 @@ export default { }).then(({ data }) => { if (data.hits.length) { this.page += 1; - this.list = this.list.concat(data.hits); + this.list.push(...data.hits); $state.loaded(); } else { $state.complete(); diff --git a/docs/guide/use-with-filter-or-tabs.md b/docs/guide/use-with-filter-or-tabs.md index 494a7f9..caf3bdc 100644 --- a/docs/guide/use-with-filter-or-tabs.md +++ b/docs/guide/use-with-filter-or-tabs.md @@ -1,12 +1,12 @@ --- -previewLink: //jsfiddle.net/PeachScript/bv9Lgj2k/embedded/result/ +previewLink: //jsfiddle.net/PeachScript/w197rfy0/embedded/result/ --- # Use With Filter/Tabs -The loading process is exactly same as the previous example, the key point is how to reset the component when we changing filter or tabs. The component will reset itself whenever the `identifier` is changed, sounds ease, let's do it! +The loading process is exactly same as the previous example, the key point is how to reset the component when we changing filter or tabs. In fact, this component will reset itself whenever the `identifier` is changed, sounds ease, let's do it! -``` html +``` html {12}
-
+
@@ -23,10 +23,10 @@ The loading process is exactly same as the previous example, the key point is ho In the template, we add a `select` element and listen it's `change` event, for `InfiniteLoading` component, we add an `identifier` property. -``` js +``` js {10,11,19,31,32,33,34,35} import axios from 'axios'; -const api = '//hn.algolia.com/api/v1/search_by_date?tags=story'; +const api = '//hn.algolia.com/api/v1/search_by_date'; export default { data() { @@ -47,7 +47,7 @@ export default { }).then(({ data }) => { if (data.hits.length) { this.page += 1; - this.list = this.list.concat(data.hits); + this.list.push(...data.hits); $state.loaded(); } else { $state.complete(); diff --git a/docs/zh/README.md b/docs/zh/README.md index cccc30c..1953a74 100644 --- a/docs/zh/README.md +++ b/docs/zh/README.md @@ -10,5 +10,5 @@ features: details: 目前支持向上和向下两种加载方式，可适应于更多的应用场景 - title: 结果展示 details: 可配置的加载结果展示，比如没有更多数据、没有任何数据等等 -previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/ +previewLink: //jsfiddle.net/PeachScript/a4Lxbf9w/embedded/result/ --- diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md index 2a7ee30..9c9f69c 100644 --- a/docs/zh/guide/README.md +++ b/docs/zh/guide/README.md @@ -1,5 +1,5 @@ --- -previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/ +previewLink: //jsfiddle.net/PeachScript/a4Lxbf9w/embedded/result/ --- # 指南 @@ -22,7 +22,7 @@ npm install vue-infinite-loading -S 你可以借助 [unpkg](https://unpkg.com) 引入此插件： ``` html - + ``` #### 手动引入 diff --git a/docs/zh/guide/start-with-hn.md b/docs/zh/guide/start-with-hn.md index 430f352..87a2db8 100644 --- a/docs/zh/guide/start-with-hn.md +++ b/docs/zh/guide/start-with-hn.md @@ -1,5 +1,5 @@ --- -previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/ +previewLink: //jsfiddle.net/PeachScript/a4Lxbf9w/embedded/result/ --- # 从 Hacker News 开始 @@ -8,12 +8,12 @@ previewLink: //jsfiddle.net/PeachScript/zqb73oLv/embedded/result/ 首先，我们需要编写模板，内容大概如下（已省略不重要的代码）： -``` html +``` html {9}
-
+
@@ -45,7 +45,7 @@ export default { }).then(({ data }) => { if (data.hits.length) { this.page += 1; - this.list = this.list.concat(data.hits); + this.list.push(...data.hits); $state.loaded(); } else { $state.complete(); diff --git a/docs/zh/guide/use-with-filter-or-tabs.md b/docs/zh/guide/use-with-filter-or-tabs.md index eb9e31f..25f8b1c 100644 --- a/docs/zh/guide/use-with-filter-or-tabs.md +++ b/docs/zh/guide/use-with-filter-or-tabs.md @@ -1,12 +1,12 @@ --- -previewLink: //jsfiddle.net/PeachScript/bv9Lgj2k/embedded/result/ +previewLink: //jsfiddle.net/PeachScript/w197rfy0/embedded/result/ --- # 与过滤器和选项卡一起使用 -加载数据的过程与上一个案例完全一致，关键在于当我们改变过滤器选项或者切换选项卡的时候应该如何重设组件。每当 `identifier` 属性发生变化的时候，该组件就会自行重设，所以一切看起来都很容易，我们开始吧！ +加载数据的过程与上一个案例完全一致，关键在于当我们改变过滤器选项或者切换选项卡的时候应该如何重设组件。实际上，每当 `identifier` 属性发生变化的时候，该组件就会自行重设，所以一切看起来都很容易，我们开始吧！ -``` html +``` html {12}
-
+
@@ -23,10 +23,10 @@ previewLink: //jsfiddle.net/PeachScript/bv9Lgj2k/embedded/result/ 在模板中，我们添加了一个 `select` 元素并监听它的 `change` 事件，我们还为 `InfiniteLoading` 组件添加了一个 `identifier` 属性。 -``` js +``` js {10,11,19,31,32,33,34,35} import axios from 'axios'; -const api = '//hn.algolia.com/api/v1/search_by_date?tags=story'; +const api = '//hn.algolia.com/api/v1/search_by_date'; export default { data() { @@ -47,7 +47,7 @@ export default { }).then(({ data }) => { if (data.hits.length) { this.page += 1; - this.list = this.list.concat(data.hits); + this.list.push(...data.hits); $state.loaded(); } else { $state.complete(); @@ -65,4 +65,4 @@ export default { 在这段脚本中，我们为 `select` 和 `identifier` 属性设定了默认值，然后在 API 请求逻辑中添加了类型参数。我们还创建了一个 `changeType` 方法用于重设列表数据和加载组件，请注意，我们必须在清空列表之后再改变 `identifier` 属性，否则组件将可能无法在重设之后立即触发 `infinite` 事件。 -就这样，你已经搞定啦！ +恭喜，你已经搞定了！ From 0f7958fe5078a17453651a1234df1a72699bbfb0 Mon Sep 17 00:00:00 2001 From: Peach Date: Thu, 25 Oct 2018 18:03:20 +0800 Subject: [PATCH 05/56] docs: add language options for homepage --- docs/.vuepress/theme/components/Intro.vue | 35 +++++++++++++++++++++-- docs/.vuepress/theme/layouts/Layout.vue | 6 ++-- 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/docs/.vuepress/theme/components/Intro.vue b/docs/.vuepress/theme/components/Intro.vue index ec7b432..295208d 100644 --- a/docs/.vuepress/theme/components/Intro.vue +++ b/docs/.vuepress/theme/components/Intro.vue @@ -1,6 +1,11 @@