# Vue Pagination

Vue Pagination is a simple and flexible **Vue 3 pagination component** written in **TypeScript**.
It focuses only on pagination UI and events, not data fetching or state management.

You control the logic.
The component only handles rendering and user interaction.

---

## Why this component

Many pagination components try to do too much.

This one:

* does one job
* stays predictable
* stays small
* stays reusable

If you already manage pagination logic in your app, this component fits well.

---

## Features

* Vue 3 (Composition API)
* Fully typed with TypeScript
* Small bundle size
* Slot-based customization
* No CSS or UI framework
* Works with REST or GraphQL APIs
* ESM and CommonJS support

---

## Installation

```bash
npm install vue-pagination
```

Peer dependency:

* Vue version 3.3 or higher

---

## Basic usage

### Import the component

```ts
import Pagination from "vue-pagination"
```

---

### Pagination state example

```ts
import { ref } from "vue"

const pagination = ref({
  page: 0,
  rowsPerPage: 10,
  total: 100,
  totalPage: 10
})
```

---

### Use in template

```vue
<Pagination
  :pagination="pagination"
  @page-change="onPageChange"
  @row-change="onRowChange"
/>
```

---

### Handle events

```ts
const onPageChange = (page: number) => {
  pagination.value.page = page
  // fetch data here
}

const onRowChange = (rows: number) => {
  pagination.value.rowsPerPage = rows
  pagination.value.page = 0
  // refetch data here
}
```

---

## How it works

* The component does not fetch data
* The component does not modify state
* It only:

  * displays pagination UI
  * emits events when the user interacts

This keeps the component easy to test and easy to reuse.

---

## Slots and customization

All UI parts are customizable using slots.
If a slot is not provided, a default UI is rendered.

---

### Info slot

```vue
<template #info="{ pagination }">
  <span>
    Page {{ pagination.page + 1 }} of {{ pagination.totalPage }}
  </span>
</template>
```

---

### Rows per page slot

```vue
<template #rows="{ onChange }">
  <select @change="onChange">
    <option :value="5">5</option>
    <option :value="10">10</option>
    <option :value="25">25</option>
  </select>
</template>
```

---

### Button slots

Available slots:

* `first`
* `prev`
* `next`
* `last`

Example:

```vue
<template #next="{ go, disabled }">
  <button :disabled="disabled" @click="go">
    Next page
  </button>
</template>
```

Each button slot receives:

* `go()` function to trigger page change
* `disabled` boolean

---

## Events

| Event name  | Payload | Description                        |
| ----------- | ------- | ---------------------------------- |
| page-change | number  | Emitted when page changes          |
| row-change  | number  | Emitted when rows per page changes |

---

## Types

Pagination state interface:

```ts
export interface PaginationState {
  page: number
  rowsPerPage: number
  total: number
  totalPage: number
}
```

TypeScript users get full IntelliSense support.

---

## Visibility behavior

The pagination UI is automatically hidden when:

```
totalPage <= 1
```

If there is only one page, pagination controls are not shown.

---

## Styling

This package does not include CSS.

You are free to style it using:

* plain CSS
* CSS modules
* Tailwind
* any other approach

Example:

```css
.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
}
```

---

## When to use this component

Good fit if:

* you want control over pagination logic
* you do not want a UI framework
* you prefer simple, explicit APIs

Not a good fit if:

* you want a ready-made design system
* you want pagination to fetch data automatically

---

## License

MIT license.

---

## Final note

This component is intentionally simple.
It focuses on correctness and flexibility rather than appearance.

If you find issues or want improvements, contributions are welcome.