vue-pagination-2/compiled/template.js

Vue.js 2 pagination component

'use strict';

module.exports = function (props) {

    return function (h) {

        var theme = this.theme;
        var prevChunk = '';
        var nextChunk = '';
        var firstPage = '';
        var lastPage = '';
        var items = this.pages.map(function (page) {

            return h(
                'li',
                { 'class': 'VuePagination__pagination-item ' + theme.item + ' ' + this.activeClass(page),
                    on: {
                        'click': this.setPage.bind(this, page)
                    }
                },
                [h(
                    'a',
                    { 'class': theme.link + ' ' + this.activeClass(page),
                        attrs: { role: 'button' }
                    },
                    [this.formatNumber(page)]
                )]
            );
        }.bind(this));

        if (this.opts.edgeNavigation && this.totalChunks > 1) {
            firstPage = h(
                'li',
                { 'class': 'VuePagination__pagination-item ' + theme.item + ' ' + (this.page === 1 ? theme.disabled : '') + ' VuePagination__pagination-item-first-page',
                    on: {
                        'click': this.setPage.bind(this, 1)
                    }
                },
                [h(
                    'a',
                    { 'class': theme.link,
                        attrs: { disabled: this.page === 1 }
                    },
                    [this.opts.texts.first]
                )]
            );

            lastPage = h(
                'li',
                { 'class': 'VuePagination__pagination-item ' + theme.item + ' ' + (this.page === this.totalPages ? theme.disabled : '') + ' VuePagination__pagination-item-last-page',
                    on: {
                        'click': this.setPage.bind(this, this.totalPages)
                    }
                },
                [h(
                    'a',
                    { 'class': theme.link,
                        attrs: { disabled: this.page === this.totalPages }
                    },
                    [this.opts.texts.last]
                )]
            );
        }

        if (this.opts.chunksNavigation === 'fixed') {

            prevChunk = h(
                'li',
                { 'class': 'VuePagination__pagination-item ' + theme.item + ' ' + theme.prev + ' VuePagination__pagination-item-prev-chunk ' + this.allowedChunkClass(-1),
                    on: {
                        'click': this.setChunk.bind(this, -1)
                    }
                },
                [h(
                    'a',
                    { 'class': theme.link,
                        attrs: { disabled: !!this.allowedChunkClass(-1) }
                    },
                    [this.opts.texts.prevChunk]
                )]
            );

            nextChunk = h(
                'li',
                { 'class': 'VuePagination__pagination-item ' + theme.item + ' ' + theme.next + ' VuePagination__pagination-item-next-chunk ' + this.allowedChunkClass(1),
                    on: {
                        'click': this.setChunk.bind(this, 1)
                    }
                },
                [h(
                    'a',
                    { 'class': theme.link,
                        attrs: { disabled: !!this.allowedChunkClass(1) }
                    },
                    [this.opts.texts.nextChunk]
                )]
            );
        }

        return h(
            'div',
            { 'class': 'VuePagination ' + theme.wrapper },
            [h(
                'nav',
                { 'class': '' + theme.nav },
                [h(
                    'ul',
                    {
                        directives: [{
                            name: 'show',
                            value: this.totalPages > 1
                        }],

                        'class': theme.list + ' VuePagination__pagination' },
                    [firstPage, prevChunk, h(
                        'li',
                        { 'class': 'VuePagination__pagination-item ' + theme.item + ' ' + theme.prev + ' VuePagination__pagination-item-prev-page ' + this.allowedPageClass(this.page - 1),
                            on: {
                                'click': this.prev.bind(this)
                            }
                        },
                        [h(
                            'a',
                            { 'class': theme.link,
                                attrs: { disabled: !!this.allowedPageClass(this.page - 1)
                                }
                            },
                            [this.opts.texts.prevPage]
                        )]
                    ), items, h(
                        'li',
                        { 'class': 'VuePagination__pagination-item ' + theme.item + ' ' + theme.next + ' VuePagination__pagination-item-next-page ' + this.allowedPageClass(this.page + 1),
                            on: {
                                'click': this.next.bind(this)
                            }
                        },
                        [h(
                            'a',
                            { 'class': theme.link,
                                attrs: { disabled: !!this.allowedPageClass(this.page + 1)
                                }
                            },
                            [this.opts.texts.nextPage]
                        )]
                    ), nextChunk, lastPage]
                ), h(
                    'p',
                    {
                        directives: [{
                            name: 'show',
                            value: parseInt(this.records)
                        }],

                        'class': 'VuePagination__count ' + theme.count },
                    [this.count]
                )]
            )]
        );
    }.bind(props);
};