@abhicodecraft/vue-paginate

Here's the updated README.md content with your handlePageChange event customized to a more generic form, so it's suitable for a broader audience. This version allows users to adapt the component for their specific data-fetching needs while keeping it understandable.

---

vue-paginate

A customizable and responsive pagination component for Vue 3, designed to provide a seamless pagination experience. Easily integrate it into your Vue projects to manage large data sets with a clean and interactive pagination interface.

Table of Contents

• Installation
• Usage
  • Basic Setup
  • Props
  • Events
• Styling
• Contributing
• License

Installation

You can install the package via npm. Use the following command:

npm install @abhicodecraft/vue-paginate

Or with Yarn:

yarn add @abhicodecraft/vue-paginate

Usage

Basic Setup

Import the component and use it within your Vue components. Below is a basic setup with example props to control pagination.

<script setup>
import Pagination from '@abhicodecraft/vue-paginate';
import { ref } from 'vue';

// Initialize reactive properties for pagination
const pagination = ref({
  totalItems: 100,    // Total items to paginate
  itemsPerPage: 10,   // Items per page
  currentPage: 1      // Current active page
});

// Define the page change handler function
const handlePageChange = (page) => {
  pagination.value.currentPage = page;
  
  // Call a function to load data based on the new page
  loadDataForPage(page);
};

// Define a sample data loading function
const loadDataForPage = (page) => {
  // Your data-fetching logic here, e.g., API call
  console.log(`Loading data for page ${page}...`);
};
</script>

<template>
  <div>
    <!-- Other content -->

    <Pagination
      :totalItems="pagination.totalItems"
      :itemsPerPage="pagination.itemsPerPage"
      :currentPage="pagination.currentPage"
      @page-changed="handlePageChange"
    />

    <!-- Other content -->
  </div>
</template>

Props

Prop	Type	Required	Default	Description
totalItems	Number	Yes	-	The total number of items to paginate.
itemsPerPage	Number	Yes	-	The number of items displayed per page.
currentPage	Number	Yes	1	The current active page.
visiblePages	Number	No	5	The maximum number of visible page numbers.

Events

Event	Description
page-changed	Emitted when the page is changed by the user.

Example of using the page-changed event:

<Pagination
  :totalItems="pagination.totalItems"
  :itemsPerPage="pagination.itemsPerPage"
  :currentPage="pagination.currentPage"
  @page-changed="handlePageChange"
/>

Customization

You can use CSS to style the pagination buttons as needed. The component uses the pagination and page-item classes, so you can customize it with CSS.

Styling

Basic styling for the component is provided, but you may need to adjust it to suit your project. Here’s an example of CSS you could use to customize the component’s appearance:

.pagination {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.page-item {
  margin: 0 5px;
}

.page-item.active .page-link {
  background-color: #007bff;
  color: white;
}

.page-item.disabled .page-link {
  opacity: 0.5;
  pointer-events: none;
}

Contributing

Contributions are welcome! Please feel free to submit a pull request or file an issue if you encounter any bugs or have feature requests.

To set up the project locally for development:

1. Clone the repository.
2. Install dependencies with npm install.
3. Run npm run dev to start the development server.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

---

This content is ready for your GitHub repository, making it easy for users to install, set up, and use your pagination component.