[new feature] Pagination code review (#328)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [bugfix] Search box-sizing wrong

* [Doc] update vant-demo respo

* [Doc] translate theme & demo pages

* [Doc] add Internationalization document

* [bugfix] remove unnecessary props

* [fix] optimize clickoutside

* [new feature] optimize find-parent

* [new feature]: change document title accordinng to language

* [new feature] Pagination code review

docs/demos/views/pagination.vue

@@ -2,38 +2,34 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-pagination 
-        :totalItems="totalItems" 
+        v-model="currentPage1" 
-        :itemsPerPage="itemsPerPage"
+        :totalItems="24" 
-        :showPageSize="showPageSize2" 
+        :itemsPerPage="5"
         :previousText= "$t('prevText')" 
         :nextText= "$t('nextText')" 
-        v-model="pagination1" 
+      />
-        @change="pageChanged()"
-      ></van-pagination>
-      <pre>Page: {{pagination1.currentPage}} / {{pagination1.numPages}}</pre>
     </demo-block>
-    <demo-block :title="$t('simpleMode')">
+
+    <demo-block :title="$t('title2')">
       <van-pagination 
-        :totalItems="bigTotalItems" 
+        v-model="currentPage2"
-        v-model="pagination2" 
+        :pageCount="12"
         :previousText= "$t('prevText')" 
         :nextText= "$t('nextText')" 
         mode="simple" 
         size="small" 
-      ></van-pagination>
+      />
-      <pre>Page: {{pagination2.currentPage}} / {{pagination2.numPages}}</pre>
     </demo-block>
-    <demo-block :title="$t('advancedUsage')">
+
+    <demo-block :title="$t('title3')">
       <van-pagination 
-        :totalItems="bigTotalItems" 
+        forceEllipses
-        v-model="pagination3" 
+        v-model="currentPage3" 
-        :showPageSize="showPageSize" 
+        :totalItems="125" 
-        :forceEllipses="true"
+        :showPageSize="3" 
         :previousText= "$t('prevText')" 
         :nextText= "$t('nextText')" 
-      ></van-pagination>
+      />
-
-      <pre>Page: {{pagination3.currentPage}} / {{pagination3.numPages}}</pre>
     </demo-block>
   </demo-section>
 </template>
@@ -42,12 +38,14 @@
 export default {
   i18n: {
     'zh-CN': {
-      simpleMode: '简单模式',
+      title2: '简单模式',
+      title3: '',
       prevText: '上一页',
       nextText: '下一页'
     },
     'en-US': {
-      simpleMode: 'Simple Mode',
+      title2: 'Simple Mode',
+      title3: 'Show ellipses',
       prevText: 'Prev',
       nextText: 'Next'
     }
@@ -55,26 +53,9 @@ export default {
 
   data() {
     return {
-      totalItems: 24,
+      currentPage1: 1,
-      pagination1: {
+      currentPage2: 1,
-        currentPage: 2
+      currentPage3: 1,
-      },
-      pagination2: {
-        currentPage: 1
-      },
-      pagination3: {
-        currentPage: 1
-      },
-      setPage(pageNo) {
-        this.pagination1.currentPage = pageNo;
-      },
-      pageChanged() {
-        console.log('Page changed to: ' + this.pagination1.currentPage);
-      },
-      showPageSize: 3,
-      showPageSize2: 5,
-      bigTotalItems: 125,
-      itemsPerPage: 5
     };
   }
 };
@@ -90,5 +71,9 @@ export default {
   .van-doc-demo-block {
     padding: 0 15px;
   }
+
+  .van-doc-demo-block__title {
+    padding-left: 0;
+  }
 }
 </style>

docs/markdown/en-US/pagination.md

@@ -1,104 +1,69 @@
-
 ## Pagination
 
-### Usage
+### Install
 ``` javascript
 import { Pagination } from 'vant';
 
 Vue.component(Pagination.name, Pagination);
 ```
 
-### Demo
+### Usage
 
 #### Basic Usage
 
 ```html
 <van-pagination 
-  :totalItems="totalItems" 
+  v-model="currentPage" 
-  :itemsPerPage="itemsPerPage"
+  :totalItems="24" 
-  :showPageSize="showPageSize2" 
+  :itemsPerPage="5"
-  previousText= "Prev" 
+/>
-  nextText= "Next" 
-  v-model="pagination1" 
-  @change="pageChanged"
-></van-pagination>
-
-<pre>Page: {{pagination1.currentPage}} / {{pagination1.numPages}}</pre>
 ```
 
 ```javascript
 export default {
   data() {
     return  {
-        totalItems: 24,
+      currentPage: 1
-        pagination1: {
-            currentPage: 2
-        },
-        pagination2: {
-            currentPage: 1
-        },
-        pagination3: {
-            currentPage: 1
-        },
-        setPage (pageNo) {
-            this.pagination1.currentPage = pageNo;
-        },
-        pageChanged () {
-            console.log('Page changed to: ' + this.pagination1.currentPage);
-        },
-        showPageSize: 3,
-        showPageSize2: 5
-        bigTotalItems: 125,
-        itemsPerPage: 5
     }
   }
 }
 ```
 
-Set `mode=simple` use Simple Mode
+#### Simple mode
 
 ```html
 <van-pagination 
-  :totalItems="bigTotalItems" 
+  v-model="currentPage" 
-  v-model="pagination2" 
+  :pageCount="12"
-  :previousText="'Prev'" 
-  :nextText="'Next'" 
   mode="simple" 
-></van-pagination>
+/>
-<pre>Page: {{pagination2.currentPage}} / {{pagination2.numPages}}</pre>
 ```
 
-#### Advanced Usage
+#### Show ellipses
-
-Set `forceEllipses: true`, show ellipses
 
 ```html
 <van-pagination 
-  :totalItems="bigTotalItems" 
+  v-model="currentPage" 
-  v-model="pagination3" 
+  :totalItems="125" 
-  :showPageSize="showPageSize" 
+  :showPageSize="3" 
   :forceEllipses="true"
-  previousText= "Prev" 
+/>
-  nextText= "Next" 
-></van-pagination>
-
-<pre>Page: {{pagination3.currentPage}} / {{pagination3.numPages}}</pre>
 ```
 
 ### API
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| v-model | pageModel | Object | - | - |
+| v-model | pageModel | `Object` | - | - |
-| mode | mode | String | multi | multi : simple  |
+| mode | mode | `String` | `multi` | `simple`  |
-| itemsPerPage | itemsPerPage | Number | 10 | - |
+| itemsPerPage | itemsPerPage | `Number` | `10` | - |
-| previousText | previousText | String | Previous | - |
+| prevText | previousText | `String` | `Previous` | - |
-| nextText | nextText | String | Next | - |
+| nextText | nextText | `String` | `Next` | - |
-| showPageSize | showPageSize | Number | 5 | - |
+| showPageSize | showPageSize | `Number` | `5` | - |
-| forceEllipses | ellipses | Boolean | false | - |
+| forceEllipses | ellipses | `Boolean` | `false` | - |
 
 ### Event
 
 | Event | Description | Attribute |
 |-----------|-----------|-----------|
-| change | triggered on page change | - |
+| change | Triggered on page change | - |

docs/markdown/zh-CN/pagination.md

@@ -12,90 +12,57 @@ Vue.component(Pagination.name, Pagination);
 
 #### 基础用法
 
+
 ```html
 <van-pagination 
-  :totalItems="totalItems" 
+  v-model="currentPage" 
-  :itemsPerPage="itemsPerPage"
+  :totalItems="24" 
-  :showPageSize="showPageSize2" 
+  :itemsPerPage="5"
-  previousText= "上一页" 
+/>
-  nextText= "下一页" 
-  v-model="pagination1" 
-  @change="pageChanged"
-></van-pagination>
-
-<pre>Page: {{pagination1.currentPage}} / {{pagination1.numPages}}</pre>
 ```
 
 ```javascript
 export default {
   data() {
     return  {
-        totalItems: 24,
+      currentPage: 1
-        pagination1: {
-            currentPage: 2
-        },
-        pagination2: {
-            currentPage: 1
-        },
-        pagination3: {
-            currentPage: 1
-        },
-        setPage (pageNo) {
-            this.pagination1.currentPage = pageNo;
-        },
-        pageChanged () {
-            console.log('Page changed to: ' + this.pagination1.currentPage);
-        },
-        showPageSize: 3,
-        showPageSize2: 5,
-        bigTotalItems: 125,
-        itemsPerPage: 5
     }
   }
 }
 ```
 
-设置`mode=simple`，使用简单模式
+#### 简单模式
 
 ```html
 <van-pagination 
-  :totalItems="bigTotalItems" 
+  v-model="currentPage" 
-  v-model="pagination2" 
+  :pageCount="12"
-  previousText="上一页" 
-  nextText="下一页" 
   mode="simple" 
-></van-pagination>
+/>
-<pre>Page: {{pagination2.currentPage}} / {{pagination2.numPages}}</pre>
 ```
 
-#### 高级用法
+#### 显示省略号
-
-设置 `forceEllipses: true`，显示省略号
 
 ```html
 <van-pagination 
-  :totalItems="bigTotalItems" 
+  v-model="currentPage" 
-  v-model="pagination3" 
+  :totalItems="125" 
-  :showPageSize="showPageSize" 
+  :showPageSize="3" 
   :forceEllipses="true"
-  previousText= "上一页" 
+/>
-  nextText= "下一页" 
-></van-pagination>
-
-<pre>Page: {{pagination3.currentPage}} / {{pagination3.numPages}}</pre>
 ```
 
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| v-model | 当前页码 | Object | - | - |
+| v-model | 当前页码 | `Object` | - | - |
-| mode | 显示模式 | String | multi | multi : simple  |
+| mode | 显示模式 | `String` | `multi` | `simple`  |
-| itemsPerPage | 每页记录数 | Number | 10 | - |
+| itemsPerPage | 每页记录数 | `Number` | `10` | - |
-| previousText | 上一页 | String | Previous | - |
+| previousText | 上一页 | `String` | `上一页` | - |
-| nextText | 下一页 | String | Next | - |
+| nextText | 下一页 | `String` | `下一页` | - |
-| showPageSize | 显示的页码个数 | Number | 5 | - |
+| showPageSize | 显示的页码个数 | `Number` | `5` | - |
-| forceEllipses | 显示省略号 | Boolean | false | - |
+| forceEllipses | 显示省略号 | `Boolean` | `false` | - |
 
 ### Event
 

docs/src/doc.config.js

@@ -386,6 +386,10 @@ module.exports = {
                 path: '/notice-bar',
                 title: 'NoticeBar'
               },
+              {
+                path: '/pagination',
+                title: 'Pagination'
+              },
               {
                 path: '/panel',
                 title: 'Panel'

docs/src/utils/lang.js

@@ -7,6 +7,11 @@ const langMap = {
   'zh-CN': zhCN
 };
 
+const titleMap = {
+  'en-US': 'Vant - A Vue.js 2.0 Mobile UI at YouZan',
+  'zh-CN': 'Vant - 有赞移动端 Vue 组件库'
+};
+
 const userLang = window.localStorage.getItem('VANT_LANGUAGE') || window.navigator.language || 'en-US';
 let defaultLang = 'en-US';
 if (userLang.indexOf('zh-') !== -1) {
@@ -17,4 +22,5 @@ setLang(defaultLang);
 export function setLang(lang) {
   window.localStorage.setItem('VANT_LANGUAGE', lang);
   Locale.use(lang, langMap[lang]);
+  document.title = titleMap[lang];
 }

packages/locale/lang/en-US.js

@@ -60,6 +60,10 @@ export default {
     delete: 'Delete',
     confirmDelete: 'Are you sure you want to delete this contact?'
   },
+  vanPagination: {
+    prev: 'Previous',
+    next: 'Next'
+  },
   vanPullRefresh: {
     pullingText: 'Pull to refresh...',
     loosingText: 'Loose to refresh...',

packages/locale/lang/zh-CN.js

@@ -64,6 +64,10 @@ export default {
   vanPicker: {
     confirm: '完成'
   },
+  vanPagination: {
+    prev: '上一页',
+    next: '下一页'
+  },
   vanPullRefresh: {
     pullingText: '下拉即可刷新...',
     loosingText: '释放即可刷新...',

packages/pagination/index.vue

@@ -1,70 +1,57 @@
 <template>
   <ul :class="['van-pagination', { 'van-pagination-simple': !isMultiMode }]">
     <li
-      :class="[{ 'van-pagination--disabled': isNoPrevious } , 'van-pagination__item', 'van-pagination__prev', 'van-hairline']"
+      :class="[{ 'van-pagination--disabled': value === 1 } , 'van-pagination__item', 'van-pagination__prev', 'van-hairline']"
-      @click="selectPage(currentPage - 1, $event)"
+      @click="selectPage(value - 1)"
     >
-      {{ previousText }}
+      {{ prevText || $t('prev') }}
     </li>
     <li 
       v-if="isMultiMode" 
       v-for="(page, index) in pages" 
       :key="index" 
       :class="[{ 'van-pagination--active': page.active }, 'van-pagination__item', 'van-pagination__page', 'van-hairline']"
-      @click="selectPage(page.number, $event)"
+      @click="selectPage(page.number)"
     >
       {{ page.text }}
     </li>
     <li v-if="!isMultiMode" class="van-pagination__page-desc">
       <slot name="pageDesc">{{ pageDesc }}</slot>
     </li>
-    <li 
+    <li
-      :class="[{ 'van-pagination--disabled': isNoNext }, 'van-pagination__item', 'van-pagination__next', 'van-hairline']" 
+      :class="[{ 'van-pagination--disabled': value === computedPageCount }, 'van-pagination__item', 'van-pagination__next', 'van-hairline']" 
-       @click="selectPage(currentPage + 1, $event)"
+       @click="selectPage(value + 1)"
     >
-      {{ nextText }}
+      {{ nextText || $t('next') }}
     </li>
   </ul>
 </template>
 
 <script>
+import { i18n } from '../locale';
+
 export default {
   name: 'van-pagination',
 
+  mixins: [i18n],
+
   props: {
+    value: Number,
+    prevText: String,
+    nextText: String,
+    pageCount: Number,
+    forceEllipses: Boolean,
     mode: {
       type: String,
       default: 'multi'
     },
-    forceEllipses: Boolean,
     itemsPerPage: {
       type: Number,
       default: 10
     },
     showPageSize: {
       type: Number,
-      default: 5,
+      default: 5
-      validator: value => typeof value === 'number' && value >= 1
-    },
-    /* vModel { currentPage: 1, numPages: 10 } */
-    value: {
-      type: Object,
-      required: true,
-      validator: function(value) {
-        return (
-          value &&
-          value.currentPage != undefined &&
-          typeof value.currentPage === 'number'
-        );
-      }
-    },
-    previousText: {
-      type: String,
-      default: 'Previous'
-    },
-    nextText: {
-      type: String,
-      default: 'Next'
     },
     totalItems: {
       type: Number,
@@ -72,117 +59,86 @@ export default {
     }
   },
 
-  data() {
-    const currentPage = this.value.currentPage !== undefined ? this.value.currentPage : 1;
-    let totalPages = this.itemsPerPage < 1 ? 1 : Math.ceil(this.totalItems / this.itemsPerPage);
-    totalPages = Math.max(totalPages, 1);
-
-    return { currentPage, totalPages };
-  },
-
   computed: {
     isMultiMode() {
       return this.mode === 'multi';
     },
 
-    isNoPrevious() {
+    computedPageCount() {
-      return this.value.currentPage === 1;
+      const count = this.pageCount || Math.ceil(this.totalItems / this.itemsPerPage);
+      return Math.max(1, count);
     },
 
-    isNoNext() {
+    pageDesc() {
-      return this.value.currentPage === this.totalPages;
+      return this.value + '/' + this.computedPageCount;
     },
 
     pages() {
       const pages = [];
-
+      const pageCount = this.computedPageCount;
-      if (this.currentPage <= 0 || this.currentPage > this.totalPages) {
-        return pages;
-      }
 
       // Default page limits
-      let startPage = 1,
+      let startPage = 1, endPage = pageCount;
-        endPage = this.totalPages;
+      const isMaxSized = this.showPageSize !== undefined && this.showPageSize < pageCount;
-      const isMaxSized = this.showPageSize !== undefined && this.showPageSize < this.totalPages;
 
       // recompute if showPageSize
       if (isMaxSized) {
         // Current page is displayed in the middle of the visible ones
-        startPage = Math.max(
+        startPage = Math.max(this.value - Math.floor(this.showPageSize / 2), 1);
-          this.currentPage - Math.floor(this.showPageSize / 2),
-          1
-        );
         endPage = startPage + this.showPageSize - 1;
 
         // Adjust if limit is exceeded
-        if (endPage > this.totalPages) {
+        if (endPage > pageCount) {
-          endPage = this.totalPages;
+          endPage = pageCount;
           startPage = endPage - this.showPageSize + 1;
         }
       }
 
       // Add page number links
       for (let number = startPage; number <= endPage; number++) {
-        let page = this.makePage(number, number, number === this.currentPage);
+        let page = this.makePage(number, number, number === this.value);
         pages.push(page);
       }
 
       // Add links to move between page sets
       if (isMaxSized && this.showPageSize > 0 && this.forceEllipses) {
         if (startPage > 1) {
-          //need ellipsis for all options unless range is too close to beginning
           let previousPageSet = this.makePage(startPage - 1, '...', false);
           pages.unshift(previousPageSet);
         }
 
-        if (endPage < this.totalPages) {
+        if (endPage < pageCount) {
-          //need ellipsis for all options unless range is too close to end
           let nextPageSet = this.makePage(endPage + 1, '...', false);
           pages.push(nextPageSet);
         }
       }
 
       return pages;
-    },
-    pageDesc() {
-      return this.currentPage + '/' + this.totalPages;
     }
   },
 
   created() {
-    // 初始value值
+    this.selectPage(this.value);
-    this.triggerInput();
   },
 
   watch: {
-    'value.currentPage'(value, oldValue) {
+    value(page) {
-      this.currentPage = value;
+      this.selectPage(page);
-
-      this.$emit('change');
     }
   },
 
   methods: {
-    selectPage(page, evt) {
+    selectPage(page) {
-      if (this.currentPage !== page && page > 0 && page <= this.totalPages) {
+      page = Math.max(1, page);
-        this.currentPage = page;
+      page = Math.min(this.computedPageCount, page);
+      if (this.value !== page) {
+        this.$emit('input', page);
+        this.$emit('change', page);
       }
-
-      this.triggerInput();
-    },
-
-    triggerInput() {
-      //  Emit the new data to the parent.
-      this.$emit('input', this.createDataForModel(this.currentPage, this.totalPages));
     },
 
     makePage(number, text, active) {
       return { number, text, active };
-    },
-
-    createDataForModel(currentPage, numPages) {
-      let data = { currentPage, numPages };
-      return data;
     }
   }
 };

test/unit/specs/pagination.spec.js

@@ -15,9 +15,7 @@ describe('Pagination', () => {
         totalItems: 120,
         itemsPerPage: 10,
         showPageSize: 5,
-        value: {
+        value: 2
-          currentPage: 2
-        }
       }
     });
     expect(wrapper.hasClass('van-pagination')).to.be.true;
@@ -25,26 +23,25 @@ describe('Pagination', () => {
     expect(
       wrapper.find('.van-pagination__item')[0].hasClass('van-pagination__prev')
     ).to.be.true;
-    expect(wrapper.vm.value.currentPage).to.equal(2);
+    expect(wrapper.vm.value).to.equal(2);
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
     wrapper.find('.van-pagination__next')[0].trigger('click');
     Vue.nextTick(() => {
       expect(eventStub.calledWith('input'));
       expect(eventStub.calledWith('change'));
-      // expect(wrapper.data().currentPage).to.equal(5);
+      expect(wrapper.vm.value).to.equal(2);
-      done();
-    });
 
-    wrapper.vm.value = { currentPage: 12 };
+      wrapper.vm.value = 12;
-    wrapper.update();
+      wrapper.update();
-    Vue.nextTick(() => {
+      Vue.nextTick(() => {
-      expect(
+        expect(
-        wrapper
+          wrapper
-          .find('.van-pagination__next')[0]
+            .find('.van-pagination__next')[0]
-          .hasClass('van-pagination--disabled')
+            .hasClass('van-pagination--disabled')
-      ).to.be.true;
+        ).to.be.true;
-      done();
+        done();
+      });
     });
   });
 
@@ -56,23 +53,26 @@ describe('Pagination', () => {
         itemsPerPage: 10,
         showPageSize: 5,
         forceEllipses: true,
-        value: {
+        value: 1
-          currentPage: 1
-        }
       }
     });
 
     const ellipsesLink = wrapper.find('.van-pagination__page')[5];
-    expect(ellipsesLink.element.textContent.trim()).to.equal('...');
+    expect(ellipsesLink.text().trim()).to.equal('...');
 
-    wrapper.vm.value = { currentPage: 7 };
+    wrapper.vm.value = 7;
     wrapper.update();
     Vue.nextTick(() => {
-      // expect(wrapper.find('.van-pagination__item').length).to.equal(2);
-      // expect(wrapper.data().pages.length).to.equal(2);
       const ellipsesLink = wrapper.find('.van-pagination__page')[0];
-      expect(ellipsesLink.element.textContent.trim()).to.equal('...');
+      expect(ellipsesLink.text().trim()).to.equal('...');
-      done();
+
+      wrapper.vm.value = 12;
+      Vue.nextTick(() => {
+        const pages = wrapper.find('.van-pagination__page');
+        const ellipsesLink = pages[pages.length - 1];
+        expect(ellipsesLink.text().trim()).to.equal('12');
+        done();
+      });
     });
   });
 
@@ -82,9 +82,7 @@ describe('Pagination', () => {
         mode: 'simple',
         totalItems: 120,
         itemsPerPage: 10,
-        value: {
+        value: 1
-          currentPage: 1
-        }
       }
     });
     expect(wrapper.hasClass('van-pagination')).to.be.true;
@@ -103,14 +101,12 @@ describe('Pagination', () => {
         showPageSize: 5,
         nextText: '下一页',
         previousText: '上一页',
-        value: {
+        value: 2
-          currentPage: 2
-        }
       }
     });
 
-    expect(wrapper.find('.van-pagination__prev')[0].element.textContent.trim()).to.equal('上一页');
+    expect(wrapper.find('.van-pagination__prev')[0].text().trim()).to.equal('上一页');
-    expect(wrapper.find('.van-pagination__next')[0].element.textContent.trim()).to.equal('下一页');
+    expect(wrapper.find('.van-pagination__next')[0].text().trim()).to.equal('下一页');
 
     wrapper.vm.value = { currentPage: 18 };
     wrapper.update();
@@ -119,4 +115,20 @@ describe('Pagination', () => {
       done();
     });
   });
+
+  it('create a multi forceEllipses Pagination && max show page size', () => {
+    wrapper = mount(Pagination, {
+      propsData: {
+        mode: 'multi',
+        totalItems: 120,
+        itemsPerPage: 10,
+        showPageSize: 12,
+        forceEllipses: true,
+        value: 1
+      }
+    });
+
+    const ellipsesLink = wrapper.find('.van-pagination__page')[11];
+    expect(ellipsesLink.text().trim()).to.equal('12');
+  });
 });