Skip to content

A pagination component for Vue3 + TailwindCSS. This component is published as an npm package

License

Notifications You must be signed in to change notification settings

freinet12/vue3-paginate

Repository files navigation

Vue3 Paginate is a very simple Pagination component for Vue 3 and TailwindCSS.

alt text

⚙️ Installation

Make sure you have Vue 3 and TailwindCSS v2 or v3 installed in your project.

Install the component by running the command below:

npm i -S @brutforce/vue3-paginate

Register the components locally

  import { Paginate, NavButton } from '@brutforce/vue3-paginate'

Example

<template>
    <Paginate
      class="bg-white rounded-lg"
      :perPage="1"
      :totalPages="25"
      :currentPage="1"
      :maxPages="3"
      @input="paginate"
    >
      <template #first>
        <NavButton 
          :text="'First'"
          :page="'first'"
          :class="'rounded-l-md px-2 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 hover:bg-gray-100'"
        />
      </template>
      <template #prev>
        <NavButton 
          :text="'Prev'"
          :page="'prev'"
          :class="'px-1 sm:px-2 py-2 flex focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 hover:bg-gray-100'"
        >
          <span class="text-indigo-600 my-auto relative top-0.2">
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
            </span>
            <span class="my-auto">
              Prev
            </span>
        </NavButton>
      </template>
      
      <template #next>
        <NavButton 
          :text="'Next'"
          :page="'next'"
          :class="'px-2 py-2 inline-flex focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 hover:bg-gray-100'"
        >
          <span class="my-auto">
            Next
          </span>
          <span class="text-indigo-600 my-auto relative top-0.2">
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
              </svg>
          </span>
        </NavButton>
      </template>
      <template #last>
        <NavButton 
          :text="'Last'"
          :page="'last'"
          :class="'rounded-r-md px-2 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 hover:bg-gray-100 dark-hover:bg-gray-900'"
        />
      </template>
    </Paginate>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { Paginate, NavButton } from '@brutforce/vue3-paginate'

  export default defineComponent({
    name: 'App',
    components: {
      Paginate,
      NavButton
    },

    methods: {
      paginate(page: number): void{
        console.log(page)
      }
    }
  });
</script>

<style scoped>
</style>

Components

Paginate

The Paginate component is the main component whic handles all of the pagination logic

Props

Here is a list of all the props for the Paginate component.

Name Type Required Description
maxPages Number false The maximum number of pages to display at once.
Default: 3
perPage Number false The number of items displayed per page.
Default: 5
totalPages Number false The total number of pages to paginate.
Default: 10
currentPage Number false The current page.
Default: 1
showFirstLast Boolean false Specifies is the 'First' and 'Last' buttons should be displayed.
Default: true
wrapperClasses String false A string of Tailwind classes for styling the component's main wrapper element.
Default: 'shadow-md border-1 rounded-lg'
dotClasses String false A string of Tailwind classes for styling the dots ("...") before and after the allowed maxPages range.
Default: px-3 py-auto cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400'
activePageClasses String false A string of Tailwind classes for styling the active page button.
Default: 'bg-indigo-500 hover:bg-indigo-600 text-white'
pageClasses String false A string of Tailwind classes for styling the page number buttons.
Default: 'px-2 sm:px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 hover:bg-gray-100'

Named Slots

The following slots are used for the navigation buttons (First, Previous, Next, Last). The slots allow you to add a fully customized NavButton component. See the example above. first, prev, next, last

Events

The Paginate component emits the following event(s).

Name Description
input This input event is fired every time a button on the paginator is clicked. The current page is sent with the event. Simply provide a method to catch the input event. See the example above.

NavButton

The NavButton component is used to navigate through the pages by clicking 'First', 'Prev', 'Next', and 'Last'

Props

Here is a list of props for the NavButton component.

Name Type Required Description
text String false The text that should be displayed on the button. Alternatively, you can supply your own html instead using slots. See the 'Prev' and 'Next' NavButtons in the exmple above.
page String or Number true The page name/number to be displayed. ie first, prev, next, last
isFirst Boolean false Used to determine if the 'First' button should be disabled.
Default: false . This is calculated internally by default
isPrev Boolean false Used to determine if the 'Prev' button should be disabled.
Default: false . This is calculated internally by default
isNext Boolean false Used to determin if the 'Next' button should be disabled.
Default: false . This is calculated internally by default
isLast Boolean false Used to determin if the 'Last' button should be disabled.
Default: false . This is calculated internally by default

About

A pagination component for Vue3 + TailwindCSS. This component is published as an npm package

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published