Pagination

Description

Pagination provides classic and simple pagination controls, plus Enso-aware wrappers that inject translation automatically.

Installation

Install the package:

yarn add @enso-ui/pagination

The components can be used inside or outside the Enso ecosystem.

Features

• exports Pagination, EnsoPagination, SimplePagination, and EnsoSimplePagination
• supports full page-number navigation and lightweight previous/next navigation
• exposes slot payloads for record info customization
• injects i18n automatically in the Enso wrappers

Usage

<script setup>
import { Pagination } from '@enso-ui/pagination/bulma';
</script>

<Pagination
    :length="length"
    :page="page"
    :page-size="pageSize"
    @page-changed="page = $event" />

API

Bulma exports

Import: @enso-ui/pagination/bulma

Pagination

Props:

• i18n: Function = value => value
• length: number
• loading: boolean = false
• page: number
• pageSize: number

Emits:

• page-changed

Slots:

• info receives { from, page, pageSize, to, total, totalPages }

SimplePagination

Props:

• i18n: Function = value => value
• length: number | null = null
• loading: boolean = false
• page: number
• pageSize: number

Emits:

• page-changed

Slots:

• info receives { from, page, pageSize, to, total, totalPages }

Enso wrappers

• EnsoPagination wraps Pagination and injects i18n
• EnsoSimplePagination wraps SimplePagination and injects i18n

Depends On

• vue as the component runtime.

Contributions

are welcome. Pull requests are great, but issues are good too.

Thank you to all the people who already contributed to Enso!

License

MIT