v-page 2.0.9 → 2.0.10

package/src/Page.js

@@ -1,214 +0,0 @@
-import './page.sass'
-import languages from './language'
-
-const FIRST = 1
-
-export default {
-  name: 'v-page',
-  props: {
-    value: {
-      type: Number,
-      default: 0
-    },
-    totalRow: {
-      type: Number,
-      default: 0
-    },
-    /**
-     * page size list
-     * false: close page size menu bar
-     * array: custom page sizes menu
-     */
-    pageSizeMenu: {
-      type: [Boolean, Array],
-      default: function () {
-        return [10, 20, 50, 100]
-      }
-    },
-    language: {
-      type: String,
-      default: 'cn'
-    },
-    /**
-     * pagination alignment direction
-     * 'left'
-     * 'center'
-     * 'right'(default)
-     */
-    align: {
-      type: String,
-      default: 'right'
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    border: {
-      type: Boolean,
-      default: true
-    },
-    info: {
-      type: Boolean,
-      default: true
-    },
-    pageNumber: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * first page button
-     */
-    first: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * last page button
-     */
-    last: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data () {
-    return {
-      pageSize: this.pageSizeMenu === false ? 10 : this.pageSizeMenu[0],
-      lastPageSize: -1,
-      current: 0,
-      pageNumberSize: 5,
-      i18n: languages[this.language] || languages.cn
-    }
-  },
-  computed: {
-    totalPage () {
-      return Math.ceil(this.totalRow / this.pageSize)
-    },
-    pageNumbers () {
-      const { current, pageNumberSize, totalPage } = this
-      const half = Math.floor(pageNumberSize / 2)
-      const start = current - half
-      return Array.apply(null, { length: pageNumberSize })
-        .map((val, index) => start + index)
-        .filter(val => val > 0 && val <= totalPage)
-    },
-    pageInfo () {
-      return this.i18n.pageInfo
-        .replace('#pageNumber#', this.current)
-        .replace('#totalPage#', this.totalPage)
-        .replace('#totalRow#', this.totalRow)
-    },
-    classes () {
-      return {
-        'v-pagination--no-border': !this.border,
-        'v-pagination--right': this.align === 'right',
-        'v-pagination--center': this.align === 'center',
-        'v-pagination--disabled': this.disabled
-      }
-    },
-    isFirst () {
-      return this.current === FIRST
-    },
-    isLast () {
-      return this.current === this.totalPage
-    }
-  },
-  watch: {
-    value (val) {
-      if (typeof val === 'number' && val > 0) this.goPage(val, false)
-    }
-  },
-  render (h) {
-    const items = []
-    // page length list
-    if (Array.isArray(this.pageSizeMenu) && this.pageSizeMenu.length) {
-      items.push(h('li', { class: 'v-pagination__list' }, [h('a', [
-        h('span', this.i18n.pageLength),
-        h('select', {
-          attrs: { disabled: this.disabled },
-          on: {
-            change: e => {
-              if (e.srcElement && e.srcElement.value) {
-                this.pageSize = Number(e.srcElement.value)
-              }
-              this.goPage()
-            }
-          }
-        }, this.pageSizeMenu.map(val => {
-          return h('option', { attrs: { value: val } }, val)
-        }))
-      ])]))
-    }
-    // page info
-    if (this.info) {
-      items.push(h('li', { class: 'v-pagination__info' }, [h('a', this.pageInfo)]))
-    }
-    /**
-     * page number generator
-     * @param classes
-     * @param num
-     * @param text
-     * @return VNode
-     */
-    const genItem = (classes, num, text) => {
-      return h('li', { class: classes }, [
-        h('a', {
-          attrs: { href: 'javascript:void(0)' },
-          on: { click: () => this.goPage(num) }
-        }, text)
-      ])
-    }
-    // first
-    if (this.first) {
-      items.push(genItem({ disabled: this.isFirst }, FIRST, this.i18n.first))
-    }
-    // previous
-    items.push(genItem({ disabled: this.isFirst }, this.current - 1, this.i18n.previous))
-    // page numbers
-    if (this.pageNumber) {
-      items.push(...this.pageNumbers.map(val => genItem({
-        active: val === this.current
-      }, val, val)))
-    }
-    // next
-    items.push(genItem({ disabled: this.isLast }, this.current + 1, this.i18n.next))
-    // last
-    if (this.last) {
-      items.push(genItem({ disabled: this.isLast }, this.totalPage, this.i18n.last))
-    }
-    return h('div', {
-      class: {
-        'v-pagination': true,
-        ...this.classes
-      }
-    }, [h('ul', items)])
-  },
-  methods: {
-    goPage (pNum = FIRST, respond = true) {
-      if (this.disabled) return
-      if (typeof pNum !== 'number') return
-      let num = pNum < FIRST ? FIRST : pNum
-      if (pNum > this.totalPage && this.totalPage > 0) num = this.totalPage
-
-      // exit when duplicate operation
-      if (num === this.current && this.pageSize === this.lastPageSize) return
-
-      this.current = num
-      // update v-model value
-      if (respond) this.$emit('input', this.current)
-      this.lastPageSize = this.pageSize
-      this.change()
-    },
-    reload () {
-      this.change()
-    },
-    change () {
-      this.$emit('page-change', {
-        pageNumber: this.current,
-        pageSize: Number(this.pageSize)
-      })
-    }
-  },
-  mounted () {
-    this.goPage(this.value ? this.value : FIRST)
-  }
-}

package/src/index.js

@@ -1,32 +0,0 @@
-import Page from './Page'
-
-const Plugin = {
-  install (Vue, options = {}) {
-    if (Object.keys(options).length) {
-      const props = Page.props
-      const {
-        language,
-        align,
-        info,
-        border,
-        pageNumber,
-        first,
-        last,
-        pageSizeMenu
-      } = options
-
-      if (language) props.language.default = language
-      if (align) props.align.default = align
-      if (typeof info === 'boolean') props.info.default = info
-      if (typeof border === 'boolean') props.border.default = border
-      if (typeof pageNumber === 'boolean') props.pageNumber.default = pageNumber
-      if (typeof first === 'boolean') props.first.default = first
-      if (typeof last === 'boolean') props.last.default = last
-      if (typeof pageSizeMenu !== 'undefined') props.pageSizeMenu.default = pageSizeMenu
-    }
-    Vue.component(Page.name, Page)
-  }
-}
-
-export { Page }
-export default Plugin

package/src/language.js

@@ -1,34 +0,0 @@
-export default {
-  cn: {
-    pageLength: '每页记录数 ',
-    pageInfo: '当前显示第 #pageNumber# / #totalPage# 页（共#totalRow#条记录）',
-    first: '首页',
-    previous: '«',
-    next: '»',
-    last: '尾页'
-  },
-  en: {
-    pageLength: 'Page length ',
-    pageInfo: 'Current #pageNumber# / #totalPage# （total #totalRow# records）',
-    first: 'First',
-    previous: '«',
-    next: '»',
-    last: 'Last'
-  },
-  de: {
-    pageLength: 'Seitenlänge ',
-    pageInfo: 'Aktuell #pageNumber# / #totalPage# （gesamt #totalRow# Aufzeichnungen）',
-    first: 'Zuerst',
-    previous: '«',
-    next: '»',
-    last: 'Letzte'
-  },
-  jp: {
-    pageLength: 'ページごとの記録数',
-    pageInfo: '現在の第 #pageNumber# / #totalPage# ページ（全部で #totalRow# 条の記録）',
-    first: 'トップページ',
-    previous: '«',
-    next: '»',
-    last: '尾のページ'
-  }
-}

package/src/page.sass

@@ -1,116 +0,0 @@
-$borderRadius: 2px
-
-@mixin disabled
-  color: #999
-  cursor: default
-  &:hover
-    color: #999
-    background-color: white
-    box-shadow: none
-    z-index: auto
-
-@mixin vendor-prefix($name, $value)
-  @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '')
-    #{$vendor}#{$name}: #{$value}
-
-
-div.v-pagination
-  margin: 0
-  display: block
-
-  &.v-pagination--right
-    text-align: right
-  &.v-pagination--center
-    text-align: center
-  &.v-pagination--disabled
-    li
-      a
-        @include disabled
-      &.active a
-        background-color: #f6f6f6
-
-  & > ul
-    display: inline-block
-    list-style: none
-    margin: 0
-    padding: 0
-    @include vendor-prefix('box-shadow', 0 1px 2px rgba(0, 0, 0, 0.05))
-
-    & > li
-      text-align: center
-      margin: 0
-      display: inline
-
-      & > a
-        margin: 0 0 0 -1px
-        position: relative
-        border: 1px solid #DEE2E6
-        padding: 6px 12px
-        line-height: 1.43
-        box-shadow: none
-        background-color: white
-        font-size: 14px
-        display: inline-block
-        text-decoration: none
-        color: #333
-        @include vendor-prefix('transition', all .5s cubic-bezier(.175, .885, .32, 1))
-
-        &:hover
-          z-index: 2
-          @include vendor-prefix('box-shadow', 0 0 8px rgba(0, 0, 0, 0.2))
-
-      &.disabled > a,
-      &.v-pagination__list > a,
-      &.v-pagination__info > a
-        @include disabled
-
-      &.active > a
-        cursor: default
-        color: #999
-        background-color: #eee
-        &:hover
-          box-shadow: none
-          z-index: auto
-
-      &:first-child > a
-        border-left-width: 1px
-        @include vendor-prefix('border-bottom-left-radius', $borderRadius)
-        @include vendor-prefix('border-top-left-radius', $borderRadius)
-
-      &:last-child > a
-        @include vendor-prefix('border-top-right-radius', $borderRadius)
-        @include vendor-prefix('border-bottom-right-radius', $borderRadius)
-
-      &.v-pagination__list
-        select
-          margin-left: 5px
-          width: auto !important
-          font-size: 12px
-          padding: 0
-          border: 1px solid #ccc
-          color: #333
-          outline: 0
-          &:hover
-            @include vendor-prefix('box-shadow', 0 0 2px rgba(0, 0, 0, 0.2))
-
-          &[disabled]
-            color: #999
-
-  &.v-pagination--no-border
-    & > ul
-      box-shadow: none
-
-      & > li
-        &:not(.active):not(.disabled):not(.v-pagination__info):not(.v-pagination__list) a:hover
-          box-shadow: none
-          z-index: auto
-          background-color: #ddd
-
-        &.active a
-          background-color: #f6f6f6
-          color: #aaa
-
-        & > a
-          border: 0
-          &:hover
-            z-index: auto

package/tests/unit/setup.js

@@ -1,8 +0,0 @@
-require('jsdom-global')();
-/**
- * this line code is to fix 'TypeError: Super expression must either be null or a function' issues
- * @link https://github.com/vuejs/vue-test-utils/issues/936
- */
-window.Date = Date;
-
-//global.expect = require('chai').expect;

package/tests/unit/v-page.spec.js

@@ -1,49 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import page from '@/Page'
-
-const expect = require('chai').expect
-
-describe('v-page', function () {
-  describe('page-numbers', function () {
-    it('the page numbers should be [2,3,4,5,6] in page 4', function () {
-      const env = {
-        totalPage: 10,
-        pageNumberSize: 5,
-        current: 4
-      }
-      const values = page.computed.pageNumbers.call(env)
-      expect(values.sort().join('')).to.equal([2, 3, 4, 5, 6].sort().join(''))
-    })
-  })
-
-  describe('dom operation test, click page number 5 item', () => {
-    const wapper = shallowMount(page, {
-      propsData: {
-        value: 3,
-        totalRow: 100
-      }
-    })
-
-    it('after click, the page 5 <li> item class name should be "active"', () => {
-      wapper.findAll('a').at(8).trigger('click')
-      // console.log(wapper.html());
-      // expect(wapper.props('totalRow')).to.equal(100);
-      // expect(wapper.is('div')).equal(true);
-      expect(wapper.findAll('li').at(6).classes('active')).to.equal(true)
-    })
-    it('the current page data should be 5', () => {
-      expect(wapper.vm.current).to.equal(5)
-    })
-    it('the page numbers should be [3,4,5,6,7]', () => {
-      expect(wapper.vm.pageNumbers.sort().join('')).to.equal([3, 4, 5, 6, 7].sort().join(''))
-    })
-    it('the current page should be 1 when change page size in list', () => {
-      // 设置下拉列表选择第三个项目（每页50条）
-      wapper.find('select').findAll('option').at(2).setSelected()
-      expect(wapper.vm.current).to.equal(1)
-    })
-    it('after page size change, the total pages should be 2', () => {
-      expect(wapper.vm.totalPage).to.equal(2)
-    })
-  })
-})

package/webpack.config.js

@@ -1,118 +0,0 @@
-var path = require('path')
-var webpack = require('webpack')
-var isCoverage = process.env.NODE_ENV === 'coverage';
-module.exports = {
-  entry: './src/index.js',
-  output: {
-    path: path.resolve(__dirname, './dist'),
-    publicPath: '/dist/',
-    filename: 'v-page.js',
-    library: 'vPage',
-    libraryTarget: 'umd',
-    umdNamedDefine: true
-  },
-  module: {
-    rules: [
-      isCoverage ? {
-          test: /\.(js|ts)/,
-          include: path.resolve('src'), // instrument only testing sources with Istanbul, after ts-loader runs
-          loader: 'istanbul-instrumenter-loader'
-      } : {},
-      {
-        test: /\.css$/,
-        use: [
-          'vue-style-loader',
-          'css-loader'
-        ],
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          'vue-style-loader',
-          'css-loader',
-          'sass-loader'
-        ],
-      },
-      {
-        test: /\.sass$/,
-        use: [
-          'vue-style-loader',
-          'css-loader',
-          'sass-loader?indentedSyntax'
-        ],
-      },
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          loaders: {
-            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
-            // the "scss" and "sass" values for the lang attribute to the right configs here.
-            // other preprocessors should work out of the box, no loader config like this necessary.
-            'scss': [
-              'vue-style-loader',
-              'css-loader',
-              'sass-loader'
-            ],
-            'sass': [
-              'vue-style-loader',
-              'css-loader',
-              'sass-loader?indentedSyntax'
-            ]
-          }
-          // other vue-loader options go here
-        }
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.(png|jpg|gif|svg)$/,
-        loader: 'file-loader',
-        options: {
-          name: '[name].[ext]?[hash]'
-        }
-      }
-    ]
-  },
-  resolve: {
-    alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      '@': path.resolve(__dirname, 'src/'),
-      '@test': path.resolve(__dirname, 'tests/')
-    },
-    extensions: ['*', '.js', '.vue', '.json']
-  },
-  devServer: {
-    historyApiFallback: true,
-    noInfo: true,
-    overlay: true
-  },
-  performance: {
-    hints: false
-  },
-  devtool: isCoverage?'inline-cheap-module-source-map':'#eval-source-map'
-}
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports.devtool = '#source-map'
-  // http://vue-loader.vuejs.org/en/workflow/production.html
-  module.exports.plugins = (module.exports.plugins || []).concat([
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      compress: {
-        warnings: false
-      }
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
-  ])
-}