# v-simple-paginate

> A simple pagination component for Vue.js

Latest version **2.0.0** (published 2021-05-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-simple-paginate
pnpm add v-simple-paginate
yarn add v-simple-paginate
bun add v-simple-paginate
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2021-05-18 |
| First published | 2020-10-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Dmytro Rybachek |
| Maintainers | dmytro_rybachek |
| Keywords | vue, v-simple-pagination, vue-paginate, vue-pagination, paginate, pagination, vue.js |

## Links

- npm: https://www.npmjs.com/package/v-simple-paginate
- Repository: https://github.com/Darker-than-Black/v-simple-pagination
- Issues: https://github.com/Darker-than-Black/v-simple-pagination/issues
- npm.io page: https://npm.io/package/v-simple-paginate

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Recent versions

- 2.0.0 (latest) — 2021-05-18
- 1.0.5 — 2020-10-16
- 1.0.0 — 2020-10-16
- 0.1.6 — 2020-10-16
- 0.1.5 — 2020-10-16
- 0.1.4 — 2020-10-16
- 0.1.3 — 2020-10-16
- 0.1.2 — 2020-10-16
- 0.1.1 — 2020-10-16
- 0.1.0 — 2020-10-16

## README

# v-simple-paginate
[![NPM](https://nodei.co/npm/v-simple-paginate.png)](https://nodei.co/npm/v-simple-paginate/)

[![npm version](https://badge.fury.io/js/v-simple-paginate.svg)](https://badge.fury.io/js/v-simple-paginate)
[![Build Status](https://travis-ci.com/Darker-than-Black/v-simple-pagination.svg?branch=main)](https://travis-ci.com/Darker-than-Black/v-simple-pagination)

##### Vue.js (v2.x +) component for make pagination without default styles. This allows you to style the component as you wish.

### [Demo](https://darker-than-black.github.io/v-simple-pagination/demo/)

## Installation

#### NPM
```js
$ npm i v-simple-paginate
```

#### YARN
```js
$ yarn add v-simple-paginate
```

#### CDN

```html
<!-- use the latest release -->
<script src="https://unpkg.com/v-simple-paginate@latest"></script>
<!-- or use the specify version -->
<script src="https://unpkg.com/v-simple-paginate@2.0.0"></script>
```

## Register the component

#### Global
- ES5
```js
var Vue = require('vue');
var Paginate = require('v-simple-paginate');
Vue.component('paginate', Paginate);
```

- ES6+
```js
import Vue from 'vue';
import Paginate from 'v-simple-paginate';
Vue.component('paginate', Paginate);
```

#### Local

```js
import Paginate from 'v-simple-paginate';

export default {
    components: { Paginate }
}
```

## Usage

**Basic Usage**

```html
<paginate
  :value="currentPage"
  :per-page="perPage"
  :total="total"
  @input="callback()"
/>
```

*Note*: In vue template, camelCase and kebab-case are both supported. For example, you can either use prop `page-count` or `pageCount`. They are leading to the same result.

So this is also available

```html
<paginate
  v-model="currentPage"
  :perPage="perPage"
  :total="total"
/>
```

**Example**
```html
<template>
  <paginate
    :value="currentPage"
    :per-page="perPage"
    :total="total"
    @input="callback"
  />
</template>

<script>
export default {
  data: () => ({
    total: 500,
    perPage: 10,
    currentPage: 1,
  }),

  methods: {
    callback (pageNumber) => {
      console.log(pageNumber);
      ...
      this.currentPage = pageNumber;
    }
  }
}
</script>

<style lang="css">
.active {
    background-color: red;
}

.hide {
    display: none;
}
</style>
```

## Props

| Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | Type | Required | Description |
| ----------------- | :--- | :--- | :--- |
| `value` | `Number` | **true** | Current page. |
| `perPage` | `Number` | **true** | Number of items per page. |
| `total` | `Number` | **true** | Total items. |
| `pageRange` | `Number` | false | The range of visible elements around the active page. **Default: 2** |
| `showPrevNext` | `Boolean` | false | Will the *previous* and *next* buttons be visible. **Default: true** |
| `activeClass` | `String` | false | CSS class name for active page element. **Default: 'active'** |
| `btnHideClass` | `String` | false | CSS class name for active page element. **Default: 'active'** |
| `classes` | `Object` | false | An object with CSS classes to customization the component. |

##### **About props `classes`**

| Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| Description |
| ----------------- | :--- |
| `wrapperClass` | CSS class name for wrapper the component. |
| `itemClass` | CSS class name for all items (buttons and break view). |
| `btnClass` | CSS class name for buttons class. |
| `breakViewClass` | CSS class name for break view.  |
| `prevNextClass` | CSS class name for *previous* and *next* buttons. |

Default:
```js
{
  wrapperClass: 'v-simple-pagination',
  itemClass: '',
  btnClass: '',
  breakViewClass: '',
  prevNextClass: '',
}
```

## Slots

| Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | Description |
| --- | --- |
| `prevContent` | Previous button |
| `nextContent` | Next button |
| `breakViewContent` | Break view indicator |

**Example**
```html
<paginate
  :value="currentPage"
  :perPage="perPage"
  :total="total"
  @input="callback"
>
  <template v-slot:prevPage>PREV</template>

  <template v-slot:nextPage>NEXT</template>

  <template v-slot:breakView>...</template>
</paginate>
```

## Emit

**Emit:** `input` is a callback with the param `page number` to update the current page.

## License

[MIT](https://github.com/Darker-than-Black/v-simple-pagination/blob/main/LICENSE)

---
_Source: https://npm.io/package/v-simple-paginate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._