{"_id":"@abhicodecraft/vue-paginate","_rev":"2-be0b6791ec91ac1cb604dc3d6c9be56a","name":"@abhicodecraft/vue-paginate","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@abhicodecraft/vue-paginate","version":"1.0.0","keywords":["vue","pagination","component"],"author":{"name":"Abhi Jith"},"license":"MIT","_id":"@abhicodecraft/vue-paginate@1.0.0","maintainers":[{"name":"abhicodecraft","email":"abhicodecraft@gmail.com"}],"dist":{"shasum":"a89144a9c8f5ed00a986fbea7d9c0f3c8f69cc7b","tarball":"https://registry.npmjs.org/@abhicodecraft/vue-paginate/-/vue-paginate-1.0.0.tgz","fileCount":3,"integrity":"sha512-FJdwCoG06a9L/akJytKnOZ8cQJH0+8dlM85ZxXCIvwP007yoLSWDuY8Ym1GpA9DYyDwH0Iw3ZRfK+IcZmwRlIw==","signatures":[{"sig":"MEYCIQDBCmImH8/+sQwlODYqOJONHlViwBKBZjjq3/dah8QsiQIhALAFGhlKuCmOyLyXuYzXNIA7YcwI4/mRhPnooHF8vFbv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3932},"main":"index.js","module":"index.js","scripts":{"build":"vite build"},"_npmUser":{"name":"abhicodecraft","email":"abhicodecraft@gmail.com"},"_npmVersion":"10.8.2","description":"A simple Vue 3 pagination component","directories":{},"_nodeVersion":"20.17.0","dependencies":{"vue":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.10","@vitejs/plugin-vue":"^5.1.4"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-paginate_1.0.0_1730210934455_0.18811848822669175","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@abhicodecraft/vue-paginate","version":"1.0.1","keywords":["vue","pagination","component","abhicodecraft"],"author":{"name":"Abhi Jith"},"license":"MIT","_id":"@abhicodecraft/vue-paginate@1.0.1","maintainers":[{"name":"abhicodecraft","email":"abhicodecraft@gmail.com"}],"homepage":"https://github.com/abhi-codecraft/vue-paginate#readme","bugs":{"url":"https://github.com/abhi-codecraft/vue-paginate/issues"},"dist":{"shasum":"a825fa3192532bab36a75dc953ef2451a5c45ec3","tarball":"https://registry.npmjs.org/@abhicodecraft/vue-paginate/-/vue-paginate-1.0.1.tgz","fileCount":4,"integrity":"sha512-/vlp0Wwpx9WtW2x9VTPOUNnDCEboYdNxOb+luX4vj5L63JFpyJHom+OyUmXBdFDH2IUETFB6w7HCC2ALcTUhxw==","signatures":[{"sig":"MEUCIB2HovfuKjKX21+GCEM7QOn+Jd/VlslFBJHbrTC8tLWzAiEA/6PQ9MqWRC8chURuwyAaPaUifegjwuaeV9+9tZYlasI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8471},"main":"index.js","module":"index.js","gitHead":"145ef66763ccac250bab8cc15c2d603f9a7b3cc0","scripts":{"build":"vite build"},"_npmUser":{"name":"abhicodecraft","email":"abhicodecraft@gmail.com"},"repository":{"url":"git+https://github.com/abhi-codecraft/vue-paginate.git","type":"git"},"_npmVersion":"10.8.2","description":"A simple Vue 3 pagination component","directories":{},"_nodeVersion":"20.17.0","dependencies":{"vue":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.10","@vitejs/plugin-vue":"^5.1.4"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-paginate_1.0.1_1730224998435_0.6032794015854321","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@abhicodecraft/vue-paginate","version":"1.0.2","description":"A simple Vue 3 pagination component","main":"index.js","module":"index.js","repository":{"type":"git","url":"git+https://github.com/abhi-codecraft/vue-paginate.git"},"scripts":{"build":"vite build"},"dependencies":{"vue":"^3.0.0"},"peerDependencies":{"vue":"^3.0.0"},"publishConfig":{"access":"public"},"keywords":["vue","pagination","component","abhicodecraft"],"author":{"name":"Abhi Jith"},"license":"MIT","devDependencies":{"@vitejs/plugin-vue":"^5.1.4","vite":"^5.4.10"},"_id":"@abhicodecraft/vue-paginate@1.0.2","gitHead":"7583871d2c8fd6f1a5f0b14d8cb572be841285d7","bugs":{"url":"https://github.com/abhi-codecraft/vue-paginate/issues"},"homepage":"https://github.com/abhi-codecraft/vue-paginate#readme","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-5fpIE9bKjcR4mvIFcyIlAZSfrb6qWVVesNmtI+I6gDWuZuF7f9gqXWSb+vWv3Jgkvm1D75L97YMFF/NiYjh6GA==","shasum":"6ff10dcd29e082b2fd05055258853883383a683b","tarball":"https://registry.npmjs.org/@abhicodecraft/vue-paginate/-/vue-paginate-1.0.2.tgz","fileCount":4,"unpackedSize":8471,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTO0ryBWo2Zqblzl4zhJCkc3yzW/dKiCxmjFSTp7Id1QIgN3ZJUoaEa6ZTAn8egiWtVNAf6b/OrdoQQemkVDjVRrQ="}]},"_npmUser":{"name":"abhicodecraft","email":"abhicodecraft@gmail.com"},"directories":{},"maintainers":[{"name":"abhicodecraft","email":"abhicodecraft@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-paginate_1.0.2_1730225256914_0.6896011755003724"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-29T14:08:54.355Z","modified":"2024-10-29T18:07:37.259Z","1.0.0":"2024-10-29T14:08:54.609Z","1.0.1":"2024-10-29T18:03:18.619Z","1.0.2":"2024-10-29T18:07:37.086Z"},"bugs":{"url":"https://github.com/abhi-codecraft/vue-paginate/issues"},"author":{"name":"Abhi Jith"},"license":"MIT","homepage":"https://github.com/abhi-codecraft/vue-paginate#readme","keywords":["vue","pagination","component","abhicodecraft"],"repository":{"type":"git","url":"git+https://github.com/abhi-codecraft/vue-paginate.git"},"description":"A simple Vue 3 pagination component","maintainers":[{"name":"abhicodecraft","email":"abhicodecraft@gmail.com"}],"readme":"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.\n\n---\n\n# vue-paginate\n\nA 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.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Basic Setup](#basic-setup)\n  - [Props](#props)\n  - [Events](#events)\n- [Styling](#styling)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Installation\n\nYou can install the package via npm. Use the following command:\n\n```bash\nnpm install @abhicodecraft/vue-paginate\n```\n\nOr with Yarn:\n\n```bash\nyarn add @abhicodecraft/vue-paginate\n```\n\n## Usage\n\n### Basic Setup\n\nImport the component and use it within your Vue components. Below is a basic setup with example props to control pagination.\n\n```vue\n<script setup>\nimport Pagination from '@abhicodecraft/vue-paginate';\nimport { ref } from 'vue';\n\n// Initialize reactive properties for pagination\nconst pagination = ref({\n  totalItems: 100,    // Total items to paginate\n  itemsPerPage: 10,   // Items per page\n  currentPage: 1      // Current active page\n});\n\n// Define the page change handler function\nconst handlePageChange = (page) => {\n  pagination.value.currentPage = page;\n  \n  // Call a function to load data based on the new page\n  loadDataForPage(page);\n};\n\n// Define a sample data loading function\nconst loadDataForPage = (page) => {\n  // Your data-fetching logic here, e.g., API call\n  console.log(`Loading data for page ${page}...`);\n};\n</script>\n\n<template>\n  <div>\n    <!-- Other content -->\n\n    <Pagination\n      :totalItems=\"pagination.totalItems\"\n      :itemsPerPage=\"pagination.itemsPerPage\"\n      :currentPage=\"pagination.currentPage\"\n      @page-changed=\"handlePageChange\"\n    />\n\n    <!-- Other content -->\n  </div>\n</template>\n```\n\n### Props\n\n| Prop         | Type    | Required | Default | Description                                       |\n|--------------|---------|----------|---------|---------------------------------------------------|\n| totalItems   | Number  | Yes      | -       | The total number of items to paginate.            |\n| itemsPerPage | Number  | Yes      | -       | The number of items displayed per page.           |\n| currentPage  | Number  | Yes      | 1       | The current active page.                          |\n| visiblePages | Number  | No       | 5       | The maximum number of visible page numbers.       |\n\n### Events\n\n| Event        | Description                                      |\n|--------------|--------------------------------------------------|\n| page-changed | Emitted when the page is changed by the user.    |\n\nExample of using the `page-changed` event:\n\n```html\n<Pagination\n  :totalItems=\"pagination.totalItems\"\n  :itemsPerPage=\"pagination.itemsPerPage\"\n  :currentPage=\"pagination.currentPage\"\n  @page-changed=\"handlePageChange\"\n/>\n```\n\n### Customization\n\nYou 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.\n\n## Styling\n\nBasic 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:\n\n```css\n.pagination {\n  display: flex;\n  justify-content: center;\n  padding: 10px;\n}\n\n.page-item {\n  margin: 0 5px;\n}\n\n.page-item.active .page-link {\n  background-color: #007bff;\n  color: white;\n}\n\n.page-item.disabled .page-link {\n  opacity: 0.5;\n  pointer-events: none;\n}\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a pull request or file an issue if you encounter any bugs or have feature requests.\n\nTo set up the project locally for development:\n\n1. Clone the repository.\n2. Install dependencies with `npm install`.\n3. Run `npm run dev` to start the development server.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more details.\n\n--- \n\nThis content is ready for your GitHub repository, making it easy for users to install, set up, and use your pagination component.\n","readmeFilename":"README.md"}