Vue pagination component
Branch: develop
Clone or download
Latest commit e1ab3cf Jan 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public add tailwind library in public/index Nov 27, 2018
src only one range change per input action Jan 18, 2019
tests one page emit unnecessary Jan 15, 2019
.browserslistrc move browserlist to seperate file Nov 27, 2018
.eslintignore run lint Jan 14, 2019
.eslintrc.js run lint Jan 14, 2019
.gitignore First version of the pagination tool Jul 11, 2018
CHANGELOG.md forgot to change the readme and changelog Jan 14, 2019
CONTRIBUTING.md Moved the Changelog and Contributing info to a separate file Aug 14, 2018
LICENSE Add license and readme Jul 11, 2018
README.md
babel.config.js
jest.config.js run lint Jan 14, 2019
package-lock.json 2.1.4 Jan 18, 2019
package.json 2.1.4 Jan 18, 2019
postcss.config.js run lint Jan 14, 2019
tailwind.config.js run lint Jan 14, 2019

README.md

vue-ads-pagination

Vue ads pagination is a vue js pagination component. On the left side you find some information about the shown items. On the right side you can select a specific, the first, last, next or previous page.

All the components can be overriden by your own components, or you can add your own styles to the default components.

Demo

I've written a demo in JSFiddle

Installation

You can install the package via npm or yarn.

NPM

npm install vue-ads-pagination --save

YARN

yarn add vue-ads-pagination

Usage

You can add the vue-ads-pagination component by using the following code in your project.

<template>
    <div id="app">
        <vue-ads-pagination
            :total-items="200"
            :max-visible-pages="5"
            :page="page"
            :loading="loading"
            @page-change="pageChange"
            @range-change="rangeChange"
        >
            <template slot-scope="props">
                <div class="vue-ads-pr-2 vue-ads-leading-loose">
                    Items {{ props.start }} tot {{ props.end }} van de {{ props.total }}
                </div>
            </template>
            <template
                slot="buttons"
                slot-scope="props"
            >
                <vue-ads-page-button
                    v-for="(button, key) in props.buttons"
                    :key="key"
                    v-bind="button"
                    @page-change="page = button.page"
                />
            </template>
        </vue-ads-pagination>
    </div>
</template>

<script>
import '../node_modules/@fortawesome/fontawesome-free/css/all.css';
import '../node_modules/vue-ads-pagination/dist/vue-ads-pagination.css';

import VueAdsPagination, { VueAdsPageButton } from 'vue-ads-pagination';

export default {
    name: 'App',
    
    components: {
        VueAdsPagination,
        VueAdsPageButton,
    },

    data () {
        return {
            loading: false,
            page: 5,
        };
    },

    methods: {
        pageChange (page) {
            this.page = page;
            console.log(page);
        },
        
        rangeChange (start, end) {
            console.log(start, end);
        },
    },
};
</script>

Components

VueAdsPagination

Properties
  • page: (type: number, default: 0) A zero-based number to set the page. Be aware you need to update the page property by the result of the page-change action!
  • items-per-page: (type: number, default: 10) The maximum amount of items on one page.
  • max-visible-pages: (type: number, default: 5) The maximum number of pages to be visible if their are too many pages.
  • total-items: (type: number, required) The total amount of items.
  • loading: (type: boolean, default: false) Indicates if the current page is loading.
Events
  • page-change: Emitted on creation, to know the initial state, and if another page is clicked. It contains the following parameters:

    • page: (type: number) The zero-based current page.
  • range-change: Emitted on creation, to know the initial state, and if another page is clicked or the total items change and you're on the last page. It contains the following parameters:

    • start: (type: number) A zero-based number to identify the first item.
    • end: (type: number) A zero-based number to identify the last item.
Templates
Default

You can add a default template to use a custom pagination detail box. The scope contains 3 variables:

  • start: (type: number) The included start item.
  • end: (type: number) The included end item.
  • total: (type: number) The total number of visible items.
<template slot-scope="props">
    {{ props.start }} - {{ props.end }} : Total {{ props.total }}
</template>
Buttons

If you want to use your own buttons, control their behaviour our style them in a different way. You can create your own button component and loop over it in this slot or use the predefined VueAdsPageButton. This is a scoped slot that contains an array of buttons.

  • buttons: (type: Array) A list of all buttons currently used. One button is an object that contains the following attributes:
    • page: (type: number||string) This is the zero based page or the string '...'. Note that the value of this attribute for the next and previous icons is calculated by the current page. If the current page is 2, the previous page will be 1 and the next page is 3.
    • active: (type: boolean) Is the current page active?
    • disabled: (type: boolean) Is the current button disabled?
    • html: (type: string) This string is shown in the button. So you can use icons for the previous and next button.
    • title: (type: string) If you want to add a title to the button, you can fill this attribute.
    • loading: (type: boolean) Indicates if the button has to show a loading icon.
<template
    slot="buttons"
    slot-scope="props"
>
    <vue-ads-page-button
        v-for="(button, key) in props.buttons"
        :key="key"
        v-bind="button"
        @page-change="page = button.page"
    />
</template>

VueAdsPageButton

This is the default button. If you want to add extra classes. Add the template above and add the class attribute.

Properties
  • page: (type: number||string, default: 0) A zero-based number that represents the page or '...'.
  • active: (type: boolean, default: false) Is the current button active?
  • disabled: (type: boolean, default: false) Is the current button disabled?
  • html: (type: string, required) This string is shown in the button.
  • title: (type: string, default: '') If you want to add a title to the button, you can fill this attribute.
  • loading: (type: boolean, default: false) Indicates if the button has to show a loading icon.
  • disable-styling: (type: boolean, default: false) Remove all styling classes.
Events
  • page-change: Emitted when the button is clicked.

Testing

We use the jest framework for testing this pagination component. Run the following command to test it:

npm run test:unit

Changelog

Read the CHANGELOG file to check what has changed.

Issues

If you have any issues (bugs, features, ...) on the current project, add them here.

Contributing

Do you like to contribute to this project? Please, read the CONTRIBUTING file.

Social

  • Follow me on alt text

Donate

Want to make a donation? That would be highly appreciated!

Make a donation via PayPal.