lepikhinb/momentum-paginator

Momentum Paginator

Momentum Paginator is a framework-agnostic headless wrapper around Laravel Pagination meta data. It supports all basic pagination, Laravel Resources and third-party solutions, such as laravel-data.

The package helps you build reusable pagination components with a simple API.

Installation

You can install the package via npm or yarn:

npm i momentum-paginator
# or
yarn add momentum-paginator

Usage

Import the package, and init the paginator by passing paginated data you receive from backend.

import { usePaginator } from "momentum-paginator";

const paginator = usePaginator(users);
// or
const { from, to, total, previous, next, pages } = usePaginator(users);

Basic example

<template>
  <a v-for="page in items" :href="page.url">{{ page.label }}</a>
</template>

Advanced example (Vue 3)

<script lang="ts" setup>
import { usePaginator } from "momentum-paginator";

const props = defineProps<{ users: Paginator<UserResource> }>();

const { from, to, total, previous, next, pages } = usePaginator(props.users);
</script>

<template>
  <div>
    <component
      :is="previous.isActive ? 'a' : 'span'"
      :href="previous.url"
      :class="{
        'text-gray-400 hover:text-gray-500': previous.isActive,
        'cursor-not-allowed text-gray-300': !previous.isActive,
      }"
    >
      &laquo;
    </component>

    <component
      v-for="page in pages"
      :is="page.isActive ? 'a' : 'span'"
      :href="page.url"
      :class="{
        'text-blue-600': page.isCurrent,
        'text-blue-400': page.isActive,
        'hover:text-blue-500': !page.isCurrent && page.isActive,
      }"
    >
      {{ page.label }}
    </component>

    <component
      :is="next.isActive ? 'a' : 'span'"
      :href="next.url"
      :class="{
        'text-gray-400 hover:text-gray-500': next.isActive,
        'cursor-not-allowed text-gray-300': !next.isActive,
      }"
    >
      &raquo;
    </component>
  </div>
</template>

Types

Properties

name	type	description
items	Page[]	All page items, including previous and next
pages	Page[]	Reduced list of pages, excluding previous and next
previous	Page	Previous page
next	Page	Next page
first	Page	First page
last	Page	Last page
total	number	Total amount of results available
from	number	Starting number of the current results
to	number	Ending number of the current results

Page instance

name	type	description
url	string	URL of the page
label	string	Text label of the item (page number, separator, previous and next page markers)
isActive	boolean	Indicates if the page is available for navigation
isCurrent	boolean	Indicates if the page is the current one.
isSeparator	boolean	Indicates if the item is a separator

Advanced Inertia

Take your Inertia.js skills to the next level with my book Advanced Inertia. Learn advanced concepts and make apps with Laravel and Inertia.js a breeze to build and maintain.

Momentum

Momentum is a set of packages designed to improve your experience building Inertia-powered apps.

• Modal — Build dynamic modal dialogs for Inertia apps
• Preflight — Realtime backend-driven validation for Inertia apps
• Paginator — Headless wrapper around Laravel Pagination
• Trail — Frontend package to use Laravel routes with Inertia
• Lock — Frontend package to use Laravel permissions with Inertia
• Layout — Persistent layouts for Vue 3 apps
• Vite Plugin Watch — Vite plugin to run shell commands on file changes

Credits

• Boris Lepikhin
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

momentum-paginator's Issues

Vue 2

is there any reason to use this on vue 3? it's possible to make a PR to work on vue 2 ?

Paginator cannot be imported nor is it declare globally

I'm following your ebook on how to use typescript with inertia and vue.

I'm at a step where I would like to add a type to a paginated collection like so:

defineProps<{
    users: Paginator<App.Data.UserData> // Paginator here is undefined
}>()

The problem I am having is that the Paginator cannot be imported so my IDE is complaining that it isn't defined.

If I add the import then the paginator is defined but then I have an eslint issue screaming at me for an unused import

import { usePaginator } from "momentum-paginator";

I have no use of the Paginator in that Vue file because the pagination part is extracted into another component.

What would be the best approach here?

The last url is wrong

I'm here trying to use the last, but it seems like last === next.

Discussion: Is this meant to be a Vue.js Composable or helper?

The way I see it, Vue.js composables will hook into components and/or other composables using Vue.js objects.

This package seems to use the naming convention of a composable, yet is not in fact a composable as it doesn't do any of the above mentioned things. I would like to contribute to update the package to be a composable if this is a wish of @lepikhinb.