feat(pagination): slot

demo/documentation/components/pagination/enUS/index.md

@@ -2,6 +2,7 @@
 <!--single-column-->
 ```demo
 basic
+slot
 quick-jumper
 size-picker
 disabled

demo/documentation/components/pagination/enUS/slot.md

@@ -0,0 +1,33 @@
+# Slot
+```html
+<n-pagination
+  v-model="page"
+  :page-count="100"
+/>
+<n-pagination
+  v-model="page"
+  :page-count="100"
+  :page-slot="8"
+/>
+<n-pagination
+  v-model="page"
+  :page-count="100"
+  :page-slot="7"
+/>
+```
+
+```js
+export default {
+  data () {
+    return {
+      page: 2
+    }
+  }
+}
+```
+
+```css
+.n-pagination {
+  margin-bottom: 12px;
+}
+```

packages/common/Pagination/src/main.vue

@@ -130,6 +130,10 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    pageSlot: {
+      type: Number,
+      default: 9
     }
   },
   data () {
@@ -149,7 +153,7 @@ export default {
       }))
     },
     pageItems () {
-      return pageItems(this.page, this.safePageCount)
+      return pageItems(this.page, this.safePageCount, this.pageSlot)
     }
   },
   watch: {
@@ -192,12 +196,12 @@ export default {
     },
     fastForward () {
       if (this.disabled) return
-      const page = Math.min(this.page + 5, this.safePageCount)
+      const page = Math.min(this.page + (this.pageSlot - 4), this.safePageCount)
       this.$emit('input', page)
     },
     fastBackward () {
       if (this.disabled) return
-      const page = Math.max(this.page - 5, 1)
+      const page = Math.max(this.page - (this.pageSlot - 4), 1)
       this.$emit('input', page)
     },
     handleSizePickerInput (value) {

packages/common/Pagination/src/utils.js

@@ -11,9 +11,9 @@ function pagesToShow (currentPage, pageCount, pageSlot = 9) {
   let middleStart = currentPage
   let middleEnd = currentPage
   const middleDelta = (pageSlot - 5) / 2
-  middleEnd += middleDelta
+  middleEnd += Math.ceil(middleDelta)
   middleEnd = Math.min(Math.max(middleEnd, firstPage + pageSlot - 3), lastPage - 2)
-  middleStart -= middleDelta
+  middleStart -= Math.floor(middleDelta)
   middleStart = Math.max(Math.min(middleStart, lastPage - pageSlot + 3), firstPage + 2)
   let leftSplit = false
   let rightSplit = false
@@ -69,8 +69,8 @@ function mapPagesToPageItems (pages, currentPage) {
   })
 }
 
-function pageItems (currentPage, pageCount) {
-  const pages = pagesToShow(currentPage, pageCount)
+function pageItems (currentPage, pageCount, pageSlot) {
+  const pages = pagesToShow(currentPage, pageCount, pageSlot)
   const items = mapPagesToPageItems(pages, currentPage)
   return items
 }

styles/Pagination.scss

@@ -4,7 +4,7 @@
 @include themes-mixin {
   @include b(pagination) {
     @include once {
-      display: inline-flex;
+      display: flex;
       vertical-align: middle;
       @include b(select) {
         width: 120px;