https://github.com/asika32764/vue-pagination
A very simple pagination without any style that supports developers to custom for every project. - https://about.asika.tw/vue-pagination/
https://github.com/asika32764/vue-pagination
pagination pagination-components pagination-library vue vue3 vuejs
Last synced: 6 months ago
JSON representation
A very simple pagination without any style that supports developers to custom for every project. - https://about.asika.tw/vue-pagination/
- Host: GitHub
- URL: https://github.com/asika32764/vue-pagination
- Owner: asika32764
- License: mit
- Created: 2024-10-13T17:27:20.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-10-14T13:16:43.000Z (7 months ago)
- Last Synced: 2024-11-14T15:48:37.207Z (6 months ago)
- Topics: pagination, pagination-components, pagination-library, vue, vue3, vuejs
- Language: Vue
- Homepage: https://www.npmjs.com/package/@asika32764/vue-pagination
- Size: 278 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Pagination
[](https://www.npmjs.com/package/@asika32764/vue-pagination)
[](LICENSE)
A very simple pagination without any style that supports developers to custom for every project. [DEMO](https://about.asika.tw/vue-pagination/)
* [Vue Pagination](#vue-pagination)
* [Installation](#installation)
* [Getting Started](#getting-started)
* [Create A Simple Pagination](#create-a-simple-pagination)
* [Parameters](#parameters)
* [Max Items](#max-items)
* [Page Route and LinkTag](#page-route-and-linktag)
* [Page Click](#page-click)
* [Custom Slots](#custom-slots)
* [Page Icons and Numbers](#page-icons-and-numbers)
* [Page Items](#page-items)
* [Custom UI by Composable](#custom-ui-by-composable)
* [Interfaces](#interfaces)
* [Props](#props)
* [Events](#events)
* [Slots](#slots)
* [Contribution](#contribution)
## Installation
```shell
npm i @asika32764/vue-pagination --save
# OR
yarn add @asika32764/vue-pagination
```
## Getting Started
Use bundler and Vue SFC:
```vue
import VuePagination from '@asika32764/vue-pagination';
```
Include JS file.
```html
const app = Vue.createApp();
app.component('vue-pagination', VuePagination);
```
ES Module
```html
import VuePagination from 'path/to/package/dist/vue-pagination.umd.js';
import { createApp } from 'path/to/vue.umd.js';
const app = createApp();
app.component('vue-pagination', VuePagination);
```
### Create A Simple Pagination
```vue
import VuePagination from '@asika32764/vue-pagination';
const items = ref([]);
const total = ref(0);
const perPage = ref(15);
const currentPage = ref(1);
const res = axios.get('item/list', { params: { limit: perPage.value, page: currentPage } });
items.value = res.data.items;
total.value = res.data.totalRows;
```
You will see a pagination with empty style.
This is an example for Bootstrap style:
```vue
```
You could add your own class or style to this pagination components for every UI framework.
## Parameters
### Max Items
Configure max items shows on pagination, default is `5`:
```vue
```
The example that we limit it only 3 items one time:
### Page Route and LinkTag
Simply add route parameter to create link for every page items:
```vue
import type { PageItem } from '@asika32764/vue-pagination';
function createLink(item: PageItem) {
return `blog/articles?page=${item.page}`;
}
```
The return value can be a string for `` or any types. You can customize the link tag by:
```vue
```
The accepted `link-tag` value includes:
- `a` => Page item will be `` link and route will be `href` attribute.
- `button` => Page item will be `` and without route, you must use `@page-click` to handle click event.
- `router-link`, `NuxtLink` or any other component => The route will be `to="...."` props.
This is an example for VueRouter, you must install [vue-router](https://router.vuejs.org/) first to use the
`router-link` component.
```vue
import type { PageItem } from '@asika32764/vue-pagination';
function createLink(item: PageItem) {
return { query: { page: item.page } };
}
```
You can provide `true` to `route` prop that component will auto use `{ query: { page: item.page } }` as route:
```vue
```
### Page Click
If you want to do something on page clicked, use `@page-click` event:
```vue
import type { PageItem } from '@asika32764/vue-pagination';
function onPageClick(event: MouseEvent, item: PageItem) {
currentPage.value = item.page;
}
```
## Custom Slots
### Page Icons and Numbers
```vue
import { faBackward, faBackwardStep, faForward, faForwardStep } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
{{ item.page }}
```
### Page Items
If you need to build your own pagination items, use `page-item` slot to implement it.
```vue
import { PageType } from '@asika32764/vue-pagination';
import { faBackward, faBackwardStep, faForward, faForwardStep } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
{{ item.page }}
```
The `PageItem` and `PageType` interfaces:
```ts
interface PageItem {
type: PageType;
page: number;
active: boolean;
disabled: boolean;
}
```
```ts
enum PageType {
FIRST = 'first',
PREVIOUS = 'previous',
LOWER = 'lower',
CURRENT = 'current',
HIGHER = 'higher',
NEXT = 'next',
LAST = 'last',
}
```
## Custom UI by Composable
Vue-Pagination provides a `usePagination()` composable that you can implement your custom pagination UI.
```vue
import { usePagination, PageType } from '@asika32764/vue-pagination';
const {
total,
perPage,
currentPage,
maxItems,
pages,
pagesCount,
} = usePagination({ total: 150, perPage: 10, currentPage: 1 });
```
You can send empty options and configure options later, every ref variables can be changed and pagination will auto re-compile.
```ts
const {
total,
perPage,
currentPage,
maxItems,
pages,
pagesCount,
} = usePagination();
total.value = 150;
perPage.value = 10;
```
If you are building a pagination wrapper, you can send `MaybeRefOrGetter` as options, Vue-Pagination will auto listen it.
```ts
const props = defineProps<{
total: number;
perPage: number;
maxItems?: number;
}>();
const currentPage = defineModel({ default: 1 });
const { pages } = usePagination({
total: () => props.total, // Getter function
perPage: () => props.perPage,
currentPage, // ref
maxItems: () => props.maxItems
});
// Pages will auto refresh after any options changed.
for (var page of pages.value) {
// ...
}
```
## Interfaces
### Props
| Prop | Type | Description |
|------------------|----------------------------------------|---------------------------------|
| `total` | `number` | The total rows number. |
| `per-page` | `number` | The number per-page. |
| `max-items` | `?number` | The max items shows once time. |
| `link-tag` | `any` | The link tag name or component. |
| `route` | `((page: PageItem) => any) or boolean` | The route link logic. |
| `item-class` | `any` | The page item class. |
| `link-class` | `any` | The page link class. |
| `active-class` | `any` | The current page class. |
| `disabled-class` | `any` | The disabled class. |
### Events
| Event | Interface | Description |
|---------------------|-----------------------------------|--------------------------------------------------------|
| `page-click` | `(e: MouseEvent, item: PageItem)` | The page clicked event. |
| `pages-updated` | `([currentPage, total, perPage])` | When `currentPage`, `total`, `perPage` any one changed |
| `update:modelValue` | `(page: number)` | When `currentPage` changed |
### Slots
| Slot | Values | Description |
|-----------------|-------------------------------|------------------------------------------|
| `first-icon` | `{ item: PageItem, to: any }` | The item text for first link. |
| `previous-icon` | `{ item: PageItem, to: any }` | The item text for previous link. |
| `next-icon` | `{ item: PageItem, to: any }` | The item text for next link. |
| `last-icon` | `{ item: PageItem, to: any }` | The item text for last link. |
| `page` | `{ item: PageItem, to: any }` | The item text for every page links. |
| `page-item` | `{ item: PageItem, to: any }` | The page item HTML for every page items. |
## Contribution
Run:
```shell
yarn install
yarn dev
```
The vite server will raise a doc site on `http://localhost:5173`
The doc site entry file is located at: `src/docs/main.ts`.
You can add your code at this file to test your changes, remeber don't commit your test code to git.
After developed, run this command to build dist files.
```shell
yarn build:prod
```