{"id":16403650,"url":"https://github.com/coderdiaz/vue-tiny-pagination","last_synced_at":"2025-03-21T02:33:30.509Z","repository":{"id":107873160,"uuid":"121055477","full_name":"coderdiaz/vue-tiny-pagination","owner":"coderdiaz","description":"A Vue component for create a tiny pagination with Flexbox","archived":false,"fork":false,"pushed_at":"2020-03-08T04:49:30.000Z","size":991,"stargazers_count":19,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-15T07:04:25.488Z","etag":null,"topics":["es6","paginate","pagination","tiny-pagination","vue","vue-component","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coderdiaz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-02-10T21:23:22.000Z","updated_at":"2025-01-03T13:10:12.000Z","dependencies_parsed_at":"2023-03-13T14:30:05.032Z","dependency_job_id":null,"html_url":"https://github.com/coderdiaz/vue-tiny-pagination","commit_stats":{"total_commits":132,"total_committers":4,"mean_commits":33.0,"dds":"0.33333333333333337","last_synced_commit":"674014083a6cfe531ba7105eddcd1a336f5ff200"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Fvue-tiny-pagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Fvue-tiny-pagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Fvue-tiny-pagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Fvue-tiny-pagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coderdiaz","download_url":"https://codeload.github.com/coderdiaz/vue-tiny-pagination/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244102847,"owners_count":20398386,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","paginate","pagination","tiny-pagination","vue","vue-component","vuejs"],"created_at":"2024-10-11T05:49:57.422Z","updated_at":"2025-03-21T02:33:30.154Z","avatar_url":"https://github.com/coderdiaz.png","language":"JavaScript","funding_links":[],"categories":["UI实用程序","Components \u0026 Libraries","UI Utilities","UI Utilities [🔝](#readme)"],"sub_categories":["分页","UI Utilities","Pagination"],"readme":"# [Tiny Pagination](https://github.com/coderdiaz/vue-tiny-pagination) \u0026middot; [![NPMVERSION](https://img.shields.io/npm/v/vue-tiny-pagination.svg)](http://npmjs.com/package/vue-tiny-pagination) [![GITHUBSTARS](https://img.shields.io/github/stars/coderdiaz/vue-tiny-pagination.svg)](https://github.com/coderdiaz/vue-tiny-pagination/stargazers) [![BUILD](https://travis-ci.org/coderdiaz/vue-tiny-pagination.svg?branch=master)](https://travis-ci.org/coderdiaz/vue-tiny-pagination) [![DOWNLOADS](https://img.shields.io/npm/dt/vue-tiny-pagination.svg)](https://npmjs.com/package/vue-tiny-pagination)\nA Vue component for create a tiny paginate with Flexbox\n\n## Install/Usage\n\u003c!-- Replace the docs for usage the plugin --\u003e\n```sh\n# Install with npm\n$ npm i -S vue-tiny-pagination\n\n# or yarn\n$ yarn add vue-tiny-pagination\n```\n\n```html\n\u003cdiv id=\"app\"\u003e\n  \u003ctiny-pagination\n    :total=\"currentTotal\"\n    @tiny:change-page=\"changePage\" /\u003e\n\u003c/div\u003e\n```\n\nYou can use **Local Registration**:\n```js\nimport { TinyPagination } from 'vue-tiny-pagination';\nnew Vue({\n  el: '#app',\n  data() {\n    return {\n      currentTotal: 100,\n      currentPage: 1,\n    };\n  },\n  methods: {\n    changePage (pagination) {\n      this.currentPage = pagination.page;\n    },\n  },\n  components: {\n    TinyPagination,\n  },\n});\n```\n\nor **Global Registration**:\n```js\nimport TinyPagination from 'vue-tiny-pagination';\nVue.use(TinyPagination);\n\n// or with a custom component name\nimport { TinyPagination } from 'vue-tiny-pagination';\nVue.component('custom-name', TinyPagination);\n```\n\n### Usage in browser\n\u003c!-- Write an example for use the plugin in browser from CDN --\u003e\nIn browser you can use Unpkg, Jsdelivr, CDN.js, etc.\n```sh\n# Unpkg\nhttps://unpkg.com/vue-tiny-pagination@latest/dist/vue-tiny-pagination.js\n\n# JSDelivr\nhttps://cdn.jsdelivr.net/npm/vue-tiny-pagination@latest/dist/vue-tiny-pagination.min.js\n```\n\n## Documentation\n\u003c!-- Add all documentation about the plugin: props, events, etc --\u003e\n### Props\n|Name|Description|Type|Default|Required|\n|---|---|---|---|---|\n|total|A number of total items|Number|-|true|\n|page|Prop to set a default page|Number|1|false|\n|lang|Default language to show (Available: en, es)|String|en|false|\n|customClass|Prop to set a custom class.|String|\"\"|false|\n|limits|Prop to set a default limits to page sizes.|Array|[10, 15, 20,50,100]|false|\n|showLimit|Prop to disable the limit selector|Boolean|true|false|\n\n### Events\n|Event|Description|\n|---|---|\n|tiny:change-page|Get the current page from pagination `payload: { page: 1 }`|\n|tiny:change-limit|Get the current limit from pagination `payload: { limit: 1 }`|\n\n## Community\nAll feedback and suggestions are welcome!\n\n## License\nThis is a open-source software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/vue-tiny-pagination/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderdiaz%2Fvue-tiny-pagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoderdiaz%2Fvue-tiny-pagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderdiaz%2Fvue-tiny-pagination/lists"}