1. default-pagination-vue

default-pagination-vue

default-pagination-vue

Installation

Install the package

$ npm install default-pagination-vue

Register the component globally in the main.js

 import DefaultPagination from 'default-pagination-vue';

const app = createApp(App);
app.component('default-pagination', DefaultPagination);

or inside a component

 import DefaultPagination from 'default-pagination-vue';
export default {
  components: {
    DefaultPagination
  }
};

Simple example

 <default-pagination
  v-model="current"
  :total-pages="20"
  :max-squares="10"
  no-first-last-icon
  not-inherit-font
  @page-click="handleClick"
/>
     handleClick({ newPage, totalPages, blurState, cancelChange, done }){}

Props (every Boolean prop is false by default)

Name                                        Type Description
total-pages Number 1 by default
v-model Number Will set/get the current page. 1 by default
max-squares Number Number of squares (all pages including the '...' buttons). 7 by default
no-first-last-icon Boolean Removes the icon from 'first' and 'last' button
no-first-last-text Boolean Removes the text from 'first' and 'last' button
no-first-last Boolean Removes 'first' and 'last' button
text-first String Text for the 'first' button 'First' by default
text-last String Text for the 'last' button 'Last' by default
no-prev-next Boolean Removes 'previous' and 'next' button
mode-simple Boolean pagination without any '...'
mode-default Boolean pagination with '...' before and after the pages when it is necessary
mode-fancy Boolean pagination with '...' after at the first square and the first page always visible (same for the last), when it is necessary
primary-color String CSS color (text color mainly) #4c4c4c by default
secondary-color String CSS color (background page buttons mainly) white by default
shadow-color String CSS color #565656 by default
disabled-color String CSS color (text color of controller buttons when there is no previous or next page) #808080ad by default
colored-controllers Boolean Controllers (first/prev/next/last) with the same color of font (primary-color) when they are enable
not-inherit-font Boolean Will not inherit the font-family from your project, but the same as the examples 'Commissioner' font-family

'page-click' event

Name                                        Type Description
newPage Number Current page
totalPages Number Total pages
cancelChange Function In case an error happens during the http request for example, it will return to the previous page, recommended use inside '.catch'
blurState Function use it whenever you use 'cancelChange' in your code, it will blur the component and prevent the user click, the 'cancelChange' or 'done' can deblur the component
done Function will release the component, you can call inside the '.then' for example

Example

     handleClick({ newPage, totalPages, blurState, cancelChange, done }) {
      console.log(newPage, totalPages, blurState, cancelChange, done);
      blurState();
      setTimeout(() => cancelChange(), 500);
    }
     handleClick({ blurState, cancelChange, done }) {
      blurState();
      yourRequest().then(()=>{
        //your code here
        done();
      })
      .catch(err => {
        cancelChange();
        alert(err);
      });
    }

Slots (replace content)

Name                                        Description
first Content inside 'first button'
last Content inside 'last button'
previous Content inside 'previous button'
next Content inside 'next button'

Example

 <default-pagination v-model="current" :total-pages="10">
  <template #first> First one page </template>
  <template #last> Last one page <my-component /> </template>
  <template #previous> <my-own-icon /> </template>
</default-pagination>