{"_id":"@cardinal-platform/vue-pagination-tw","name":"@cardinal-platform/vue-pagination-tw","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.2":{"name":"@cardinal-platform/vue-pagination-tw","version":"0.1.2","description":"Simple Vue Pagination component that can be used in any project with range & ui customization.","main":"dist/vue-pagination-tw.ssr.js","browser":"dist/vue-pagination-tw.esm.js","module":"dist/vue-pagination-tw.esm.js","unpkg":"dist/vue-pagination-tw.min.js","types":"dist/types/src/entry.esm.d.ts","exports":{".":{"import":"./dist/vue-pagination-tw.esm.js","require":"./dist/vue-pagination-tw.ssr.js"},"./styles":"./dist/index.css"},"sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts","style":"npx tailwindcss -i ./src/assets/styles/tailwind.css -o ./src/assets/styles/index.css --minify"},"devDependencies":{"@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@babel/preset-typescript":"^7.14.5","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.13","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"^4.5.13","@vue/compiler-sfc":"^3.2.26","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.4.5","rimraf":"^3.0.2","rollup":"^2.52.8","rollup-plugin-copy":"^3.4.0","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"0.31.1","rollup-plugin-vue":"^6.0.0","tailwindcss":"^3.0.7","ttypescript":"^1.5.12","typescript":"^4.0.3","vue":"^3.2.26"},"peerDependencies":{"vue":"^3.0.5"},"engines":{"node":">=12"},"keywords":["Pagination","Paging","Vue","Tailwind","CSS"],"repository":{"type":"git","url":"git+https://github.com/Cardinal-Platform/vue-pagination-tw.git"},"author":{"name":"Anbuselvan Rocky"},"license":"MIT","bugs":{"url":"https://github.com/anburocky3/vue-pagination-tw/issues"},"homepage":"https://github.com/anburocky3/vue-pagination-tw#readme","gitHead":"d8607ea6bca57c31e78c910415b7b454114b31d5","_id":"@cardinal-platform/vue-pagination-tw@0.1.2","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-jkUdVT3g3VIq7jFoQmcyu6hEC5HhUbpdUhcS4eeYLHeR0mKFgcU/jA8eWSF3Vq1s0+SqOs6iP6unaJ6qYFzsZA==","shasum":"9e974196239f8950593f30e075a5e01bb082bb86","tarball":"https://registry.npmjs.org/@cardinal-platform/vue-pagination-tw/-/vue-pagination-tw-0.1.2.tgz","fileCount":10,"unpackedSize":51137,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHhKPm26NzFjWEXHBHWsVfL+Yix6AFCfogLhzUUgB3dGAiEAnnuADpY0LZM2/2gu8ay9furGkQuQT430jU9Q9FitPGY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLwf3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1kg/8CyBxFc3lIIq6x39bSt/1K9D5r0kqyLjyAjSrFTGHHLk9lt+A\r\n2b0HWmoAOG965rNZNPneSleKcYIu7YjtoomLyIWsFR7MHYjadIqXMQHsr99r\r\nintDPH+opoYxJ0jWBWAJklUtglPX7WrPDFRaY1WWkLs9b9FXCclEPeB4ZEpJ\r\nvdxG9c9+PnN4gkj97zRiqzzTIXvisuoCSOfeNM9rxUJURx1xTuFB+XkaOF7A\r\nn1gus1L8zCSNda5w1eErywF1lE/IZb4PdQDzE4hd7huC5uiw+Ab/ffVebtcL\r\n+WxUs7+J4VG+erPegGpGVjwCQ2qotsQrgpmR5LO85xvPKFcfXc/8452d59/f\r\npJXCjeCM5XuuE/hSrlzHrrLsy4rhVWzAYwFxV44w9kelYyymx1X8WdTWIe6d\r\nXIQ07sS4FGkzj4v+JKmHCpLd+6HY+RIF1QFL21CNM6QsTLueqIqT8ZPSN0s6\r\nP1t3Ny6scoqJCfP6c7rKQC5P6lOSY2YsrkCYbHN6HGWT6yXcB6gUlHFsAzWs\r\nPr5wZGD3lkQfEtaf0GJ2UDylpyvfxH76LC3Cc7r3LFaEi50ty+m8hz+7LvnC\r\nxsgnzRItfAX9QFYVjonqcxwO7SmnYRMGp7VBMG8/fa0s4aVhKdv1U/HPrat0\r\ngAf55kLv8hFeJIrXkkoN8iiUG06PqDNvCb8=\r\n=P8m+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"e99p1ant","email":"i@github.red"},"directories":{},"maintainers":[{"name":"e99p1ant","email":"i@github.red"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-pagination-tw_0.1.2_1680803830841_0.8505759750613813"},"_hasShrinkwrap":false}},"time":{"created":"2023-04-06T17:57:10.796Z","0.1.2":"2023-04-06T17:57:11.069Z","modified":"2023-04-06T17:57:11.233Z"},"maintainers":[{"name":"e99p1ant","email":"i@github.red"}],"description":"Simple Vue Pagination component that can be used in any project with range & ui customization.","homepage":"https://github.com/anburocky3/vue-pagination-tw#readme","keywords":["Pagination","Paging","Vue","Tailwind","CSS"],"repository":{"type":"git","url":"git+https://github.com/Cardinal-Platform/vue-pagination-tw.git"},"author":{"name":"Anbuselvan Rocky"},"bugs":{"url":"https://github.com/anburocky3/vue-pagination-tw/issues"},"license":"MIT","readme":"# Vue Tailwind Pagination\n\n<a href=\"LICENSE\">\n  <img src=\"https://img.shields.io/badge/license-MIT-brightgreen.svg\" alt=\"Software License\" />\n</a>\n<a href=\"https://github.com/anburocky3/vue-pagination-tw/issues\">\n  <img src=\"https://img.shields.io/github/issues/anburocky3/vue-pagination-tw.svg\" alt=\"Issues\" />\n</a>\n<a href=\"https://npmjs.org/package/vue-pagination-tw\">\n  <img src=\"https://img.shields.io/npm/v/vue-pagination-tw.svg?style=flat-squar\" alt=\"NPM\" />\n</a>\n<a href=\"https://www.npmjs.com/package/vue-pagination-tw\">\n  <img src=\"https://img.shields.io/npm/dw/vue-pagination-tw\" alt=\"Downloads\" />\n</a>\n\n[![NPM](https://nodei.co/npm/vue-pagination-tw.png)](https://nodei.co/npm/vue-pagination-tw/)\n\nSimple Vue Pagination component that can be used in any project with range &amp; ui customization.\n\n## Screenshots\n\n![Screenshot Demo](./screenshots/vue-pagination-tw-demo.gif)\n\n[Online demo](https://stackblitz.com/edit/vue-y2ufn1) (Feel free to create your own.)\n\n## Installation\n\n### NPM\n\nInstall the npm package.\n\n```js\n$ npm install vue-pagination-tw --save\n```\n\nor yarn package\n\n```js\n$ yarn add -D vue-pagination-tw\n```\n\n### To Look good, Add the CSS files after initializing:\n\n```js\nimport \"vue-pagination-tw/styles\"; // tailwind basic styles\n```\n\nRegister the component.\n\n- ES5\n\n```js\nvar VuePaginationTw = require(\"vue-pagination-tw\");\nVue.component(\"VuePaginationTw\", VuePaginationTw);\n```\n\n- ES6\n\n```js\nimport VuePaginationTw from \"vue-pagination-tw\";\nVue.component(\"VuePaginationTw\", VuePaginationTw);\n```\n\n### CDN\n\nInclude the source file.\n\n```html\n<!-- use the latest release -->\n<script src=\"https://unpkg.com/vue-pagination-tw@latest\"></script>\n<!-- or use the specify version -->\n<script src=\"https://unpkg.com/vue-pagination-tw@0.9.0\"></script>\n```\n\nRegister the component.\n\n```js\nVue.component(\"VuePaginationTw\", VuePaginationTw);\n```\n\n## Usage\n\n### In Vue Template\n\n**Basic Usage**\n\n```html\n<VuePaginationTw\n  :total-items=\"20\"\n  :current-page=\"1\"\n  :per-page=\"6\"\n  @page-changed=\"functionName\"\n  :go-button=\"false\"\n  styled=\"centered\"\n/>\n```\n\n_Note_: In vue template, camelCase and kebab-case are both supported. For example, you can either use prop `total-items` or `totalItems`. They are leading to the same result.\n\nSo this is also avaliable\n\n```html\n<VuePaginationTw\n  :totalItems=\"20\"\n  :currentPage=\"1\"\n  :perPage=\"6\"\n  @pageChanged=\"functionName\"\n  :goButton=\"false\"\n  styled=\"centered\"\n/>\n```\n\nIf you want to specify custom `Active Border color & text color`, you can do it like this:\n\n```html\n<VuePaginationTw\n  :totalItems=\"20\"\n  :currentPage=\"1\"\n  :perPage=\"6\"\n  @pageChanged=\"functionName\"\n  :goButton=\"false\"\n  styled=\"centered\"\n  borderActiveColor=\"border-red-500\"\n  borderTextActiveColor=\"text-red-500\"\n/>\n```\n\n#### roadmaps\n\n- [ ] Make different versions of paginations (xs, md, lg, xlg)\n- [ ] Change Pagination ui templates directly from initialization.\n- [ ] Support for make different ui styles by default.\n\n#### Authors:\n\n- Anbuselvan Rocky ([Facebook](https://fb.me/anburocky3))\n\n#### License: [MIT](./LICENSE.md)\n","readmeFilename":"README.md"}