[refactor] rename src{LimitSelect => PageSizeSelect}.vue, new datatable.props.pageSizeOptions

Ken Berkeley · Ken Berkeley · commit 859649a9186b · 2017-09-20T19:37:41.000+08:00
diff --git a/dist/min.css b/dist/min.css
diff --git a/dist/min.js b/dist/min.js
diff --git a/doc/_images/structure.png b/doc/_images/structure.png
diff --git a/doc/en/details/README.md b/doc/en/details/README.md
@@ -19,8 +19,8 @@ The source tree [`src/`](https://github.com/OneWayTech/vue2-datatable/tree/maste
  │   ├─ TableFrame.vue
  │   └─ TableHeader.vue
  ├─ index.vue
- ├─ LimitSelect.vue
  ├─ main.js
+ ├─ PageSizeSelect.vue
  └─ Pagination.vue
 ```
 
diff --git a/doc/en/details/datatable-props.md b/doc/en/details/datatable-props.md
@@ -13,6 +13,7 @@
 | xprops | Carrier for extra props passed to dynamic components | Object | - | - | N |
 | HeaderSettings | Whether to render `HeaderSettings` | Boolean | true / false | true | N |
 | Pagination | Whether to render pagination relevant | Boolean | true / false | true | N |
+| pageSizeOptions | options for `PageSizeSelect` | Array | - | [10, 20, 40, 80, 100] | N |
 | tbl-class | Classes for `<table>` | String / Object / Array | - | - | N |
 | tbl-style | Inline styles for `<table>` | String / Object / Array | - | - | N |
 | fixHeaderAndSetBodyMaxHeight | (Just as its name implies) | Number | - | - | N |
diff --git a/doc/en/i18n.md b/doc/en/i18n.md
@@ -22,15 +22,15 @@ export default {
   'Clear local settings backup and restore': '清空本地设置并恢复',
   'Using local settings': '正在使用本地设置',
 
+  /* MainTable/TableBody.vue */
+  'No Data': '无数据',
+
   /* index.vue */
   'Total': '共',
   ',': '项，',
   
-  /* LimitSelect.vue */
-  'items / page': '项 / 页',
-
-  /* MainTable/TableBody.vue */
-  'No Data': '无数据'
+  /* PageSizeSelect.vue */
+  'items / page': '项 / 页'
 }
 ```
 
@@ -59,14 +59,14 @@ if (typeof window !== 'undefined' && window.Vue) {
 export default Datatable
 ```
 
-Apply to [`src/LimitSelect.vue`](https://github.com/OneWayTech/vue2-datatable/blob/master/src/LimitSelect.vue):
+Apply to [`src/PageSizeSelect.vue`](https://github.com/OneWayTech/vue2-datatable/blob/master/src/PageSizeSelect.vue):
 
 ```html
 <template>
-  <label name="LimitSelect">
-    <select class="form-control input-sm -limit-select" v-model="query.limit"
+  <label name="PageSizeSelect">
+    <select class="form-control input-sm -page-size-select" v-model="query.limit"
       @change="query.offset = 0 /* reset to the first page */">
-      <option v-for="i in options" :value="i">{{ i }}</option>
+      <option v-for="i in pageSizeOptions" :value="i">{{ i }}</option>
     </select>
     {{ $i18nForDatatable('items / page') }}
   </label>
diff --git a/doc/zh-cn/README.md b/doc/zh-cn/README.md
@@ -13,4 +13,4 @@
 * [lodash: groupBy / throttle / debounce](https://lodash.com/docs)
 * [replace-with](https://github.com/kenberkeley/replace-with)
 
-注：BootStrap 以及 Font Awesome 的可替换性极强，您完全可以使用其他库替代（一般就是改一下类名即可）
+注：*BootStrap* 以及 *Font Awesome* 的可替换性极强，您完全可以使用其他库替代（一般就是改一下类名即可）
diff --git a/doc/zh-cn/details/README.md b/doc/zh-cn/details/README.md
@@ -19,8 +19,8 @@
  │   ├─ TableFrame.vue
  │   └─ TableHeader.vue
  ├─ index.vue
- ├─ LimitSelect.vue
  ├─ main.js
+ ├─ PageSizeSelect.vue
  └─ Pagination.vue
 ```
 
diff --git a/doc/zh-cn/details/datatable-props.md b/doc/zh-cn/details/datatable-props.md
@@ -13,6 +13,7 @@
 | xprops | 额外传给动态组件的 props 容器 | Object | - | - | 否 |
 | HeaderSettings | 是否显示表头设置组件 | Boolean | true / false | true | 否 |
 | Pagination | 是否显示分页相关组件 | Boolean | true / false | true | 否 |
+| pageSizeOptions | 每页显示条数选项 | Array | - | [10, 20, 40, 80, 100] | 否 |
 | tbl-class | 用于 `<table>` 的类名 | String / Object / Array | - | - | 否 |
 | tbl-style | 用于 `<table>` 的内联样式 | String / Object / Array | - | - | 否 |
 | fixHeaderAndSetBodyMaxHeight | 固定表头并设置表体最大高度 | Number | - | - | 否 |
diff --git a/doc/zh-cn/i18n.md b/doc/zh-cn/i18n.md
@@ -22,15 +22,15 @@ export default {
   'Clear local settings backup and restore': '清空本地设置并恢复',
   'Using local settings': '正在使用本地设置',
 
+  /* MainTable/TableBody.vue */
+  'No Data': '无数据',
+
   /* index.vue */
   'Total': '共',
   ',': '项，',
   
-  /* LimitSelect.vue */
-  'items / page': '项 / 页',
-
-  /* MainTable/TableBody.vue */
-  'No Data': '无数据'
+  /* PageSizeSelect.vue */
+  'items / page': '项 / 页'
 }
 ```
 
@@ -59,14 +59,14 @@ if (typeof window !== 'undefined' && window.Vue) {
 export default Datatable
 ```
 
-模板中是这样操作（以 [`src/LimitSelect.vue`](https://github.com/OneWayTech/vue2-datatable/blob/master/src/LimitSelect.vue) 为例）：
+模板中是这样操作（以 [`src/PageSizeSelect.vue`](https://github.com/OneWayTech/vue2-datatable/blob/master/src/PageSizeSelect.vue) 为例）：
 
 ```html
 <template>
-  <label name="LimitSelect">
-    <select class="form-control input-sm -limit-select" v-model="query.limit"
+  <label name="PageSizeSelect">
+    <select class="form-control input-sm -page-size-select" v-model="query.limit"
       @change="query.offset = 0 /* reset to the first page */">
-      <option v-for="i in options" :value="i">{{ i }}</option>
+      <option v-for="i in pageSizeOptions" :value="i">{{ i }}</option>
     </select>
     {{ $i18nForDatatable('items / page') }}
   </label>
diff --git a/examples/dist/client.0552cccc.css b/examples/dist/client.0552cccc.css
diff --git a/examples/dist/client.32f39670.js b/examples/dist/client.32f39670.js
diff --git a/examples/dist/client.3b2a3d53.js b/examples/dist/client.3b2a3d53.js
diff --git a/examples/dist/index.html b/examples/dist/index.html
@@ -5,12 +5,12 @@
   <title>Examples · vue2-datatable-component</title>
   <link href="//unpkg.com/bootstrap@3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-<link href="client.4934818d.css" rel="stylesheet"></head>
+<link href="client.0552cccc.css" rel="stylesheet"></head>
 <body>
 
   <div id="app"></div>
   
 <script src="//unpkg.com/jquery@2.1.4/dist/jquery.min.js"></script>
 <script src="//unpkg.com/bootstrap@3.3.5/dist/js/bootstrap.min.js"></script>
-<script type="text/javascript" src="client.3b2a3d53.js"></script></body>
+<script type="text/javascript" src="client.32f39670.js"></script></body>
 </html>
diff --git a/examples/src/Advanced/index.vue b/examples/src/Advanced/index.vue
@@ -26,6 +26,7 @@ export default {
       supportNested: true,
       tblClass: 'table-bordered',
       tblStyle: 'color: #666',
+      pageSizeOptions: [5, 10, 15, 20],
       columns: (() => {
         const cols = [
           { title: 'UID', field: 'uid', label: 'User ID', sortable: true, visible: 'true' },
diff --git a/locale/zh-cn.js b/locale/zh-cn.js
@@ -5,13 +5,13 @@ export default {
   'Clear local settings backup and restore': '清空本地设置并恢复',
   'Using local settings': '正在使用本地设置',
 
+  /* MainTable/TableBody.vue */
+  'No Data': '无数据',
+
   /* index.vue */
   'Total': '共',
   ',': '项，',
   
-  /* LimitSelect.vue */
-  'items / page': '项 / 页',
-
-  /* MainTable/TableBody.vue */
-  'No Data': '无数据'
+  /* PageSizeSelect.vue */
+  'items / page': '项 / 页'
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue2-datatable-component",
   "description": "The best Datatable for Vue.js 2.x which never sucks",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "main": "dist/min.js",
   "module": "src/main.js",
   "author": "Ken Berkeley <kenberkeley@foxmail.com>",
diff --git a/src/LimitSelect.vue b/src/LimitSelect.vue
diff --git a/src/PageSizeSelect.vue b/src/PageSizeSelect.vue
@@ -0,0 +1,23 @@
+<template>
+  <label name="PageSizeSelect">
+    <select class="form-control input-sm -page-size-select" v-model="query.limit"
+      @change="query.offset = 0 /* reset to the first page */">
+      <option v-for="i in pageSizeOptions" :value="i">{{ i }}</option>
+    </select>
+    {{ $i18nForDatatable('items / page') }}
+  </label>
+</template>
+<script>
+export default {
+  props: {
+    query: { type: Object, required: true },
+    pageSizeOptions: { type: Array, required: true }
+  }
+}
+</script>
+<style>
+.-page-size-select {
+  display: inline-block;
+  width: 65px;
+}
+</style>
diff --git a/src/_mixins/props.js b/src/_mixins/props.js
@@ -10,7 +10,8 @@ export default {
     summary: Object, // an extra summary row
     xprops: Object, // extra custom props carrier passed to dynamic components
     HeaderSettings: { type: Boolean, default: true }, // whether to render `HeaderSettings`
-    Pagination: { type: Boolean, default: true }, // whether to render `LimitSelect` and `Pagination`
+    Pagination: { type: Boolean, default: true }, // whether to render `PageSizeSelect` and `Pagination`
+    pageSizeOptions: { type: Array, default: () => [10, 20, 40, 80, 100] },
     tblClass: [String, Object, Array], // classes for <table>
     tblStyle: [String, Object, Array], // inline styles for <table>
     fixHeaderAndSetBodyMaxHeight: Number, // a fancy prop which combines two props into one
diff --git a/src/index.vue b/src/index.vue
@@ -14,7 +14,7 @@
         <strong>
           {{ $i18nForDatatable('Total') }} {{ total }} {{ $i18nForDatatable(',') }}
         </strong>
-        <limit-select :query="query" />
+        <page-size-select :query="query" :page-size-options="pageSizeOptions" />
       </div>
       <div class="col-sm-6">
         <pagination class="pull-right" :total="total" :query="query" />
@@ -25,14 +25,14 @@
 <script>
 import HeaderSettings from './HeaderSettings/index.vue'
 import MainTable from './MainTable/index.vue'
-import LimitSelect from './LimitSelect.vue'
 import Pagination from './Pagination.vue'
+import PageSizeSelect from './PageSizeSelect.vue'
 import props from './_mixins/props'
 
 export default {
   name: 'Datatable',
   mixins: [props],
-  components: { HeaderSettings, MainTable, LimitSelect, Pagination },
+  components: { HeaderSettings, MainTable, Pagination, PageSizeSelect },
   created () {
     // init query (make all the properties observable by using `$set`)
     const q = { limit: 10, offset: 0, sort: '', order: '', ...this.query }
diff --git a/test/Basic.spec.js b/test/Basic.spec.js
@@ -71,13 +71,13 @@ test('sort', async t => {
 
 test('pagination relevant', async t => {
   const { wrapper, vm } = t.context
-  const $LimitSelect = wrapper.find('label[name=LimitSelect] > select')[0]
+  const $PageSizeSelect = wrapper.find('label[name=PageSizeSelect] > select')[0]
 
   /* *** programmatic behaviors  *** */
   Object.assign(vm.query, { limit: 20, offset: 20 })
   await nextTick()
   t.is(
-    +$LimitSelect.value(),
+    +$PageSizeSelect.value(),
     20
   )
   t.is(
