feat: page utils & test for it

build/webpack.test.js

@@ -6,7 +6,7 @@ const config = require('./config')
 const webpackConfig = {
   mode: 'development',
   entry: {
-    app: ['./src/index.js']
+    app: ['./index.js']
   },
   output: {
     path: path.resolve(process.cwd(), './dist'),
@@ -37,8 +37,12 @@ const webpackConfig = {
         }
       },
       {
-        test: /\.css$/,
+        test: /\.(scss|css)$/,
-        loaders: ['style-loader', 'css-loader']
+        use: [
+          'style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
       },
       {
         test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,

demo/components/paginationDemo.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="doc">
+    <h1>分页 / n-pagination</h1>
+    <hr>
+    <h2>基本用法</h2>
+    <n-pagination v-model="page" />
+    <br>
+    <textarea rows="5">scaffold</textarea>
+    <hr>
+  </div>
+</template>
+
+<script>
+import docCodeEditorMixin from './docCodeEditorMixin'
+export default {
+  mixins: [docCodeEditorMixin],
+  data () {
+    return {
+      page: 1
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.doc {
+  width: 900px;
+  margin: auto;
+  textarea {
+    width: 100%;
+    min-height: 3em;
+  }
+}
+</style>

demo/demo.vue

@@ -64,6 +64,12 @@
       >
         Nimbus 确认框 / n-nimbus-confirm-card
       </router-link>
+      <br>
+      <router-link
+        to="/n-pagination"
+      >
+        分页 / n-pagination
+      </router-link>
     </div>
   </div>
 </template>

demo/index.js

@@ -21,6 +21,7 @@ import Modal from '../packages/common/Modal'
 import Message from '../packages/common/Message'
 import Tooltip from '../packages/common/Tooltip'
 import Notification from '../packages/common/Notification'
+import Pagination from '../packages/common/Pagination'
 
 import ServiceCard from 'packages/nimbus/ServiceCard'
 import HomeLayout from 'packages/nimbus/HomeLayout'
@@ -45,6 +46,7 @@ import messageDemo from './components/messageDemo'
 import tooltipDemo from './components/tooltipDemo'
 import notificationDemo from './components/notificationDemo'
 import nimbusConfirmCardDemo from './components/nimbusConfirmCardDemo'
+import paginationDemo from './components/paginationDemo'
 import demo from './demo'
 
 Vue.use(VueRouter)
@@ -73,6 +75,7 @@ Message.install(Vue)
 Tooltip.install(Vue)
 Notification.install(Vue)
 NimbusConfirmCard.install(Vue)
+Pagination.install(Vue)
 
 const routes = [
   { path: '/', component: demo },
@@ -91,7 +94,8 @@ const routes = [
   { path: '/n-message', component: messageDemo },
   { path: '/n-tooltip', component: tooltipDemo },
   { path: '/n-notification', component: notificationDemo },
-  { path: '/n-nimbus-confirm-card', component: nimbusConfirmCardDemo }
+  { path: '/n-nimbus-confirm-card', component: nimbusConfirmCardDemo },
+  { path: '/n-pagination', component: paginationDemo }
 ]
 
 const router = new VueRouter({

packages/common/Notification/src/main.js

@@ -36,7 +36,7 @@ const defaultNotification = {
   actionCallback: () => {}
 }
 
-function registerMessageEl (container, vm, option) {
+function mountMessageEl (container, vm, option) {
   const el = vm.$el
   el.classList.add('is-going-to-emerge')
   container.appendChild(el)
@@ -68,7 +68,7 @@ const NMessage = {
         }
       }
     })).$mount()
-    registerMessageEl(notificationContainer, notificationCell, option)
+    mountMessageEl(notificationContainer, notificationCell, option)
   }
 }
 

packages/common/Pagination/index.js

@@ -0,0 +1,7 @@
+import Pagination from './src/main.vue'
+
+Pagination.install = function (Vue) {
+  Vue.component(Pagination.name, Pagination)
+}
+
+export default Pagination

packages/common/Pagination/src/main.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="n-pagination">
+    <div>prev</div>
+    <div class="n-pagination__item" />
+    <div>next</div>
+  </div>
+</template>
+
+<script>
+import { pagesToShow } from './utils'
+
+export default {
+  name: 'NPagination',
+  model: {
+    prop: 'page',
+    event: 'changePage'
+  },
+  props: {
+    page: {
+      type: Number,
+      required: true
+    },
+    totalPage: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    pageItems () {
+      return pagesToShow(this.page, this.totalPage)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.n-pagination {
+  display: flex;
+  .n-pagination__item {
+
+  }
+}
+</style>

packages/common/Pagination/src/utils.js

@@ -0,0 +1,40 @@
+function pagesToShow (page, totalPage) {
+  if (totalPage === 1) return [1]
+  const firstPage = 1
+  const lastPage = totalPage
+  let middleStart = page
+  let middleEnd = page
+  if (firstPage === page) {
+    middleEnd += 4
+  } else if (firstPage + 1 === page) {
+    middleEnd += 3
+  } else {
+    middleEnd += 2
+  }
+  if (lastPage === page) {
+    middleStart -= 4
+  } else if (lastPage - 1 === page) {
+    middleStart -= 3
+  } else {
+    middleStart -= 2
+  }
+  let leftSplit = false
+  let rightSplit = false
+  if (middleStart > firstPage + 1) leftSplit = true
+  if (middleEnd < lastPage - 1) rightSplit = true
+  const items = []
+  items.push(firstPage)
+  if (leftSplit) {
+    items.push(-1)
+  }
+  for (let i = Math.max(middleStart, firstPage + 1); i <= middleEnd && i < lastPage; ++i) {
+    items.push(i)
+  }
+  if (rightSplit) {
+    items.push(-1)
+  }
+  items.push(lastPage)
+  return items
+}
+
+export { pagesToShow }

src/Amazing.js

@@ -1,3 +0,0 @@
-import Amazing from './Amazing.vue'
-
-export default Amazing

src/Amazing.vue

@@ -1,24 +0,0 @@
-<template>
-  <div>{{ title }}</div>
-</template>
-
-<script>
-export default {
-  name: 'Amazing',
-  props: {
-    title: {
-      type: String,
-      default: 'Amazing'
-    }
-  },
-  methods: {
-    hello () {
-      console.log('amazing')
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>

test/unit/index.js

@@ -1,3 +1,7 @@
+// require all coverage files
+// const packagesContext = require.context('../../packages', true, /\.js$/)
+// packagesContext.keys().forEach(packagesContext)
+
 // require all test files (files that ends with .spec.js)
 const testsContext = require.context('./specs', true, /\.spec.js$/)
 testsContext.keys().forEach(testsContext)

test/unit/specs/amazing.spec.js

@@ -1,12 +0,0 @@
-import Amazing from 'main/Amazing.js'
-import { mount } from '@vue/test-utils'
-
-describe('amazing', function () {
-  it('should amazing', function () {
-    const wrapper = mount(Amazing)
-    wrapper.setProps({
-      title: 'not amazing'
-    })
-    expect(wrapper.element.textContent).to.equal('not amazing')
-  })
-})

test/unit/specs/packages/common/Pagination/util.spec.js

@@ -0,0 +1,59 @@
+import { pagesToShow } from 'packages/common/Pagination/src/utils'
+
+describe('#Pagination Utils', function () {
+  describe('#pagesToShow', function () {
+    it('should not add splitor when less than 6 total pages', function () {
+      expect(pagesToShow(1, 1)).to.deep.equal([1])
+      expect(pagesToShow(1, 2)).to.deep.equal([1, 2])
+      expect(pagesToShow(2, 2)).to.deep.equal([1, 2])
+      expect(pagesToShow(1, 3)).to.deep.equal([1, 2, 3])
+      expect(pagesToShow(2, 3)).to.deep.equal([1, 2, 3])
+      expect(pagesToShow(3, 3)).to.deep.equal([1, 2, 3])
+      expect(pagesToShow(1, 4)).to.deep.equal([1, 2, 3, 4])
+      expect(pagesToShow(2, 4)).to.deep.equal([1, 2, 3, 4])
+      expect(pagesToShow(3, 4)).to.deep.equal([1, 2, 3, 4])
+      expect(pagesToShow(4, 4)).to.deep.equal([1, 2, 3, 4])
+      expect(pagesToShow(1, 5)).to.deep.equal([1, 2, 3, 4, 5])
+      expect(pagesToShow(2, 5)).to.deep.equal([1, 2, 3, 4, 5])
+      expect(pagesToShow(3, 5)).to.deep.equal([1, 2, 3, 4, 5])
+      expect(pagesToShow(4, 5)).to.deep.equal([1, 2, 3, 4, 5])
+      expect(pagesToShow(5, 5)).to.deep.equal([1, 2, 3, 4, 5])
+      expect(pagesToShow(1, 6)).to.deep.equal([1, 2, 3, 4, 5, 6])
+      expect(pagesToShow(2, 6)).to.deep.equal([1, 2, 3, 4, 5, 6])
+      expect(pagesToShow(3, 6)).to.deep.equal([1, 2, 3, 4, 5, 6])
+      expect(pagesToShow(4, 6)).to.deep.equal([1, 2, 3, 4, 5, 6])
+      expect(pagesToShow(5, 6)).to.deep.equal([1, 2, 3, 4, 5, 6])
+      expect(pagesToShow(6, 6)).to.deep.equal([1, 2, 3, 4, 5, 6])
+    })
+    it('should work when totalPage is 7', function () {
+      expect(pagesToShow(1, 7)).to.deep.equal([1, 2, 3, 4, 5, -1, 7])
+      expect(pagesToShow(2, 7)).to.deep.equal([1, 2, 3, 4, 5, -1, 7])
+      expect(pagesToShow(3, 7)).to.deep.equal([1, 2, 3, 4, 5, -1, 7])
+      expect(pagesToShow(4, 7)).to.deep.equal([1, 2, 3, 4, 5, 6, 7])
+      expect(pagesToShow(5, 7)).to.deep.equal([1, -1, 3, 4, 5, 6, 7])
+      expect(pagesToShow(6, 7)).to.deep.equal([1, -1, 3, 4, 5, 6, 7])
+      expect(pagesToShow(7, 7)).to.deep.equal([1, -1, 3, 4, 5, 6, 7])
+    })
+    it('should work when totalPage is 8', function () {
+      expect(pagesToShow(1, 8)).to.deep.equal([1, 2, 3, 4, 5, -1, 8])
+      expect(pagesToShow(2, 8)).to.deep.equal([1, 2, 3, 4, 5, -1, 8])
+      expect(pagesToShow(3, 8)).to.deep.equal([1, 2, 3, 4, 5, -1, 8])
+      expect(pagesToShow(4, 8)).to.deep.equal([1, 2, 3, 4, 5, 6, -1, 8])
+      expect(pagesToShow(5, 8)).to.deep.equal([1, -1, 3, 4, 5, 6, 7, 8])
+      expect(pagesToShow(6, 8)).to.deep.equal([1, -1, 4, 5, 6, 7, 8])
+      expect(pagesToShow(7, 8)).to.deep.equal([1, -1, 4, 5, 6, 7, 8])
+      expect(pagesToShow(8, 8)).to.deep.equal([1, -1, 4, 5, 6, 7, 8])
+    })
+    it('should work when totalPage is 9', function () {
+      expect(pagesToShow(1, 9)).to.deep.equal([1, 2, 3, 4, 5, -1, 9])
+      expect(pagesToShow(2, 9)).to.deep.equal([1, 2, 3, 4, 5, -1, 9])
+      expect(pagesToShow(3, 9)).to.deep.equal([1, 2, 3, 4, 5, -1, 9])
+      expect(pagesToShow(4, 9)).to.deep.equal([1, 2, 3, 4, 5, 6, -1, 9])
+      expect(pagesToShow(5, 9)).to.deep.equal([1, -1, 3, 4, 5, 6, 7, -1, 9])
+      expect(pagesToShow(6, 9)).to.deep.equal([1, -1, 4, 5, 6, 7, 8, 9])
+      expect(pagesToShow(7, 9)).to.deep.equal([1, -1, 5, 6, 7, 8, 9])
+      expect(pagesToShow(8, 9)).to.deep.equal([1, -1, 5, 6, 7, 8, 9])
+      expect(pagesToShow(9, 9)).to.deep.equal([1, -1, 5, 6, 7, 8, 9])
+    })
+  })
+})