Pagination API Reference

Props

Prop	Type	Default	Description
modelValue	Number	1	Current page number (v-model)
totalPages	Number	-	Total number of pages (required)
totalVisible	Number	7	Maximum number of page buttons to show
showFirstLast	Boolean	true	Show first and last page buttons
showPrevNext	Boolean	true	Show previous and next page buttons
disabled	Boolean	false	Disable all pagination controls
size	String	'default'	Size variant. Options: 'small', 'default', 'large'
rounded	Boolean/String	false	Apply rounded styling to buttons
color	String	'primary'	Color theme. Options: 'primary', 'secondary', 'success', 'error', 'warning', 'info'

Events

Event	Payload	Description
update:modelValue	Number	Emitted when current page changes
first	Number	Emitted when first page button is clicked (page 1)
prev	Number	Emitted when previous page button is clicked
next	Number	Emitted when next page button is clicked
last	Number	Emitted when last page button is clicked

Slots

Slot	Props	Description
first	{ icon, onClick, disabled, ariaLabel, ariaDisabled }	Custom first page button
prev	{ icon, onClick, disabled, ariaLabel, ariaDisabled }	Custom previous page button
next	{ icon, onClick, disabled, ariaLabel, ariaDisabled }	Custom next page button
last	{ icon, onClick, disabled, ariaLabel, ariaDisabled }	Custom last page button
item	{ isActive, page, props }	Custom page number button

Slot Props

Navigation Button Slots (first, prev, next, last)

• icon: Default SVG icon component
• onClick: Function to handle button click
• disabled: Boolean indicating if button is disabled
• ariaLabel: Accessibility label for the button
• ariaDisabled: Boolean for aria-disabled attribute

Item Slot

• isActive: Boolean indicating if this page is currently active
• page: Page number
• props: Object containing button props (class, aria-label, aria-current, onClick, disabled)

Computed Properties

Property	Type	Description
isFirstDisabled	Boolean	Whether first page button is disabled
isPrevDisabled	Boolean	Whether previous page button is disabled
isNextDisabled	Boolean	Whether next page button is disabled
isLastDisabled	Boolean	Whether last page button is disabled
visiblePageNumbers	Array	Array of page numbers and ellipsis to display

Example Usage

<template>
  <OPagination
    v-model="currentPage"
    :total-pages="totalPages"
    :total-visible="5"
    size="large"
    color="success"
    @first="handleFirst"
    @prev="handlePrev"
    @next="handleNext"
    @last="handleLast"
  >
    <template #item="{ isActive, page, props }">
      <button
        v-bind="props"
        :class="{ 'custom-active': isActive }"
      >
        {{ page }}
      </button>
    </template>
  </OPagination>
</template>

<script setup>
import { ref } from 'vue'

const currentPage = ref(1)
const totalPages = ref(20)

const handleFirst = (page) => {
  console.log('First page clicked:', page)
}

const handlePrev = (page) => {
  console.log('Previous page clicked:', page)
}

const handleNext = (page) => {
  console.log('Next page clicked:', page)
}

const handleLast = (page) => {
  console.log('Last page clicked:', page)
}
</script>