v-page 2.0.8 → 2.1.0

package/package.json

@@ -1,47 +1,75 @@
-{
-  "name": "v-page",
-  "description": "A simple pagination bar, based on Vue2.x",
-  "version": "2.0.8",
-  "author": "TerryZ <terry5@foxmail.com>",
-  "main": "dist/v-page.js",
-  "license": "MIT",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/TerryZ/v-page.git"
-  },
-  "keywords": [
-    "front-end",
-    "web",
-    "vue",
-    "vuejs",
-    "page",
-    "pagination"
-  ],
-  "dependencies": {
-    "vue": "^2.6.10"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ],
-  "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-stage-3": "^6.24.1",
-    "cross-env": "^5.0.5",
-    "css-loader": "^0.28.7",
-    "file-loader": "^1.1.4",
-    "node-sass": "^4.12.0",
-    "sass-loader": "^6.0.7",
-    "vue-loader": "^13.0.5",
-    "vue-template-compiler": "^2.6.10",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^3.1.14"
-  }
-}
+{
+  "name": "v-page",
+  "description": "A simple pagination bar, based on Vue2",
+  "version": "2.1.0",
+  "author": "TerryZ <terry5@foxmail.com>",
+  "main": "dist/v-page.js",
+  "files": [
+    "/dist",
+    "/types"
+  ],
+  "typings": "types/index.d.ts",
+  "license": "MIT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "test:unit": "mocha-webpack --webpack-config webpack.config.js --require tests/unit/setup.js tests/unit/**/*.spec.js",
+    "cover": "cross-env NODE_ENV=coverage nyc --reporter=lcov --reporter=text npm run test:unit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TerryZ/v-page.git"
+  },
+  "keywords": [
+    "front-end",
+    "web",
+    "vue",
+    "vuejs",
+    "page",
+    "pagination"
+  ],
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ],
+  "devDependencies": {
+    "@vue/test-utils": "^1.2.2",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-runtime": "^6.26.0",
+    "chai": "^4.3.4",
+    "codecov": "^3.5.0",
+    "cross-env": "^5.0.5",
+    "css-loader": "^0.28.11",
+    "file-loader": "^1.1.11",
+    "istanbul-instrumenter-loader": "^3.0.1",
+    "jsdom": "^15.1.1",
+    "jsdom-global": "^3.0.2",
+    "mocha": "^6.1.4",
+    "mocha-webpack": "^1.1.0",
+    "nyc": "^14.1.1",
+    "sass": "^1.43.4",
+    "sass-loader": "^7.3.1",
+    "typescript": "^4.3.5",
+    "vue": "^2.6.14",
+    "vue-loader": "^13.7.3",
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^3.1.14",
+    "webpack-node-externals": "^1.7.2"
+  },
+  "nyc": {
+    "include": [
+      "src/Page.js"
+    ],
+    "instrument": false,
+    "sourceMap": false
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,69 @@
+export module 'v-page' {
+  import Vue from 'vue'
+
+  /**
+   * Pagination plugin for Vue
+   */
+  declare class Page extends Vue {
+    /**
+     * the number of current page
+     */
+    value: number
+    /**
+     * the number of total record
+     */
+    totalRow: number
+    /**
+     * v-page language
+     * `cn` by default
+     */
+    language?: string = 'cn'
+    /**
+     * page size list
+     */
+    pageSizeMenu?: boolean|number[] = [10, 20, 50, 100]
+    /**
+     * alignment direction
+     */
+    align?: string = 'right'
+    /**
+     * disabled the pagination
+     */
+    disabled?: boolean = false
+    /**
+     * whether to display the border
+     */
+    border?: boolean = true
+    /**
+     * whether to display page info bar
+     */
+    info?: boolean = true
+    /**
+     * whether to display page number buttons
+     */
+    pageNumber?: boolean = true
+    /**
+     * whether to display first page button
+     */
+    first?: boolean = true
+    /**
+     * whether to display last page button
+     */
+    last?: boolean = true
+    /**
+     * whether add `All` item in page length list
+     */
+    displayAll?: boolean = false
+
+    $emit(eventName: 'input'): this
+    /**
+     * page change event
+     * @param eventName
+     */
+    $emit(eventName: 'page-change'): this
+  }
+
+  export { Page }
+
+  export default Page
+}

package/.babelrc

@@ -1,6 +0,0 @@
-{
-  "presets": [
-    ["env", { "modules": false }],
-    "stage-3"
-  ]
-}

package/.editorconfig

@@ -1,9 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true

package/src/Page.js

@@ -1,232 +0,0 @@
-import './page.scss';
-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,
-			currentPage: 0,
-			pageNumberSize: 5,
-			i18n: languages[this.language] || languages['cn']
-		};
-	},
-	computed: {
-		totalPage(){
-			return Math.ceil(this.totalRow / this.pageSize);
-		},
-		pageNumbers() {
-			let start = 1, end, half = Math.floor(this.pageNumberSize / 2);
-			if (this.totalPage < this.pageNumberSize) end = this.totalPage;
-			else if (this.currentPage <= half) end = this.pageNumberSize;
-			else if (this.currentPage >= (this.totalPage - half)) {
-				start = this.totalPage - this.pageNumberSize + 1;
-				end = this.totalPage;
-			} else {
-				start = this.currentPage - half;
-				end = start + this.pageNumberSize - 1;
-			}
-
-			return Array.apply(null, {length:end-start+1}).map((val,index)=>start+index);
-		},
-		pageInfo() {
-			return this.i18n.pageInfo.replace('#pageNumber#', this.currentPage)
-				.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.currentPage === FIRST;
-		},
-		isLast(){
-			return this.currentPage === 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.switchPage(num)}
-				}, text)
-			]);
-		};
-		//first
-		if(this.first){
-			items.push(genItem({disabled:this.isFirst}, 'first', this.i18n.first));
-		}
-		//previous
-		items.push(genItem({disabled:this.isFirst}, 'previous', this.i18n.previous));
-		//page numbers
-		if(this.pageNumber){
-			this.pageNumbers.forEach(val => {
-				items.push(genItem({active:val === this.currentPage}, val, val));
-			});
-		}
-		//next
-		items.push(genItem({disabled:this.isLast}, 'next', this.i18n.next));
-		//last
-		if(this.last){
-			items.push(genItem({disabled:this.isLast}, 'last', this.i18n.last));
-		}
-		return h('div',{
-			class:{
-				'v-pagination': true,
-				...this.classes
-			}
-		},[h('ul', items)]);
-	},
-	methods: {
-		goPage(pNum = FIRST, respond = true) {
-			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.currentPage && this.pageSize === this.lastPageSize) return;
-
-			this.currentPage = num;
-			// update v-model value
-			if(respond) this.$emit('input', this.currentPage);
-			this.lastPageSize = this.pageSize;
-			this.change();
-		},
-		reload(){
-			this.change();
-		},
-		change(){
-			this.$emit('page-change', {
-				pageNumber: this.currentPage,
-				pageSize: Number(this.pageSize)
-			});
-		},
-		position(target){
-			if (typeof target === 'string') {
-				switch (target) {
-					case 'first': return FIRST;
-					case 'previous': return this.currentPage - 1;
-					case 'next': return this.currentPage + 1;
-					case 'last': return this.totalPage;
-				}
-			} else if (typeof target === 'number') return target;
-		},
-		switchPage(target) {
-			if (this.disabled) return;
-			this.goPage(this.position(target));
-		}
-	},
-	mounted() {
-		this.goPage(this.value ? this.value : FIRST);
-	}
-}

package/src/index.js

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

package/src/language.js

@@ -1,28 +0,0 @@
-const languages = {
-    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'
-    },
-    jp: {
-        pageLength: 'ページごとの記録数',
-        pageInfo: '現在の第 #pageNumber# / #totalPage# ページ（全部で #totalRow# 条の記録）',
-        first: 'トップページ',
-        previous: '«',
-        next: '»',
-        last: '尾のページ'
-    }
-};
-
-export default languages;

package/src/page.scss

@@ -1,112 +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; }
-                }
-            }
-        }
-    }
-}