v-page 2.0.6 → 2.0.10

package/src/Page.vue

@@ -1,185 +0,0 @@
-<template>
-    <div class="v-pagination" :class="classes">
-        <ul>
-            <!-- page length list -->
-            <li class="v-pagination__list" v-if="pageSizeMenu">
-                <a>{{i18n.pageLength}}
-                    <select @change="switchLength" v-model="pageSize" :disabled="disabled">
-                        <option :key="index" v-for="(len,index) in pageSizeMenu">{{len}}</option>
-                    </select>
-                </a>
-            </li>
-            <!-- page info -->
-            <li class="v-pagination__info" v-if="info">
-                <a v-text="pageInfo"></a>
-            </li>
-
-            <li :class="{disabled:currentPage === 1||disabled} " v-if="first">
-                <a href="javascript:void(0);" @click="switchPage('first')" v-text="i18n.first"></a>
-            </li>
-            <li :class="{disabled:currentPage === 1||disabled}">
-                <a href="javascript:void(0);" @click="switchPage('previous')" v-text="i18n.previous"></a>
-            </li>
-
-            <!-- page numbers -->
-            <template v-if="pageNumber">
-            <li :class="{active:(num === currentPage),disabled:disabled&&num !== currentPage}"
-                v-for="(num,index) in pageNumbers" :key="index">
-                <a href="javascript:void(0);" @click="switchPage(num)" v-text="num"></a>
-            </li>
-            </template>
-
-            <li :class="{disabled:currentPage === totalPage||disabled}">
-                <a href="javascript:void(0);" @click="switchPage('next')" v-text="i18n.next"></a>
-            </li>
-            <li :class="{disabled:currentPage === totalPage||disabled}" v-if="last">
-                <a href="javascript:void(0);" @click="switchPage('last')" v-text="i18n.last"></a>
-            </li>
-        </ul>
-    </div>
-</template>
-
-<script>
-    import languages from './language';
-    import './page.scss';
-
-    const FIRST = 1;
-
-    export default {
-        name: "v-page",
-        props: {
-            totalRow: {
-                type: Number,
-                default: 0
-            },
-            pageSizeMenu: {
-                type: [Boolean, Array],
-                default: function () {
-                    return [10, 20, 50, 100];
-                }
-            },
-            language: {
-                type: String,
-                default: 'cn'
-            },
-            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: {
-                type: Boolean,
-                default: true
-            },
-            last: {
-                type: Boolean,
-                default: true
-            }
-        },
-        data() {
-            return {
-                pageSize: this.pageSizeMenu === false ? 10 : this.pageSizeMenu[0],
-                totalPage: 0,
-                currentPage: 0,
-                pageNumberSize: 5,
-                i18n: languages[this.language] || languages['cn']
-            };
-        },
-        computed: {
-            pageNumbers() {
-                let start = 1, end, nums = [], 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;
-                }
-
-                for (let i = start; i <= end; i++) {
-                    nums.push(i);
-                }
-                return nums;
-            },
-            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'
-                };
-            }
-        },
-        watch: {
-            totalRow() {
-                this.calcTotalPage();
-            }
-        },
-        methods: {
-            goPage(pNum) {
-                if(typeof pNum !== 'number') return;
-                let num = FIRST;
-                if(pNum > num) num = pNum;
-                if(pNum > this.totalPage && this.totalPage > 0) num = this.totalPage;
-
-                if(num === this.currentPage) return;
-                this.currentPage = num;
-                this.change();
-                this.calcTotalPage();
-            },
-            reload(){
-                this.change();
-            },
-            change(){
-                this.$emit('page-change', {
-                    pageNumber: this.currentPage,
-                    pageSize: Number(this.pageSize)
-                });
-            },
-            calcTotalPage() {
-                this.totalPage = Math.ceil(this.totalRow / 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));
-            },
-            switchLength() {
-                this.goPage(FIRST);
-            }
-        },
-        mounted() {
-            this.goPage(FIRST);
-        }
-    }
-</script>

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,125 +0,0 @@
-$borderRadius: 2px;
-div.v-pagination {
-    margin: 0;
-    display: block;
-
-    &.v-pagination--right { text-align: right; }
-    &.v-pagination--center { text-align: center; }
-
-    & > ul {
-        display: inline-block;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        -webkit-border-radius: 0;
-        -moz-border-radius: 0;
-        border-radius: 0;
-        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-        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.4;
-                -webkit-box-shadow: none;
-                -moz-box-shadow: none;
-                box-shadow: none;
-                background-color: white;
-                font-size: 14px;
-                display: inline-block;
-                float: left;
-                text-decoration: none;
-                color: #333;
-                -webkit-transition: all .5s cubic-bezier(.175, .885, .32, 1);
-                transition: all .5s cubic-bezier(.175, .885, .32, 1);
-
-                &:hover {
-                    z-index: 2;
-                    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
-                    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
-                    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
-                }
-            }
-
-            &.disabled > a,
-            &.v-pagination__list > a,
-            &.v-pagination__info > a {
-                color: #999;cursor: default;
-                &:hover { color: #999;background-color: white;box-shadow: none; }
-            }
-
-            &.active > a,
-            &.active > span {
-                cursor: default;color: #999;background-color: #eee;
-                &:hover { box-shadow: none; }
-            }
-
-            &:first-child > a,
-            &:first-child > span {
-                border-left-width: 1px;
-                border-bottom-left-radius: $borderRadius;
-                border-top-left-radius: $borderRadius;
-                -webkit-border-bottom-left-radius: $borderRadius;
-                -webkit-border-top-left-radius: $borderRadius;
-                -moz-border-radius-bottomleft: $borderRadius;
-                -moz-border-radius-topleft: $borderRadius;
-            }
-
-            &:last-child > a,
-            &:last-child > span {
-                border-top-right-radius: $borderRadius;
-                border-bottom-right-radius: $borderRadius;
-                -webkit-border-bottom-right-radius: $borderRadius;
-                -webkit-border-top-right-radius: $borderRadius;
-                -moz-border-radius-bottomright: $borderRadius;
-                -moz-border-radius-topright: $borderRadius;
-            }
-
-            &.v-pagination__list {
-                select {
-                    margin-left: 5px;
-                    width: auto !important;
-                    font-size: 12px;
-                    padding: 0;
-                    display: inline-block;
-                    border: 1px solid #ccc;
-                    color: #333;
-                    outline: 0;
-
-                    &:hover {
-                        -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-                        -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-                        box-shadow: 0 0 3px 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: #f5f5f5;color: #aaa; }
-
-                & > a {
-                    border: 0;
-                    &:hover { z-index: auto; }
-                }
-            }
-        }
-    }
-}

package/webpack.config.js

@@ -1,113 +0,0 @@
-var path = require('path')
-var webpack = require('webpack')
-
-module.exports = {
-  //entry: './src/main.js',
-  entry: './src/index.js',
-  output: {
-    path: path.resolve(__dirname, './dist'),
-    publicPath: '/dist/',
-    //filename: 'build.js'
-	filename: 'v-page.js',
-	library: 'vPage',
-	libraryTarget: 'umd',
-	umdNamedDefine: true
-  },
-  module: {
-    rules: [
-      {
-        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'
-    },
-    extensions: ['*', '.js', '.vue', '.json']
-  },
-  devServer: {
-    historyApiFallback: true,
-    noInfo: true,
-    overlay: true
-  },
-  performance: {
-    hints: false
-  },
-  devtool: '#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
-    })
-  ])
-}