{"id":20170200,"url":"https://github.com/marcodpt/vue-limit","last_synced_at":"2025-04-10T02:26:20.576Z","repository":{"id":57396410,"uuid":"147572578","full_name":"marcodpt/vue-limit","owner":"marcodpt","description":"Vue simple array pagination, fully customizable","archived":false,"fork":false,"pushed_at":"2018-09-13T18:53:10.000Z","size":479,"stargazers_count":2,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T16:05:07.443Z","etag":null,"topics":["component","limit","pager","pagination","paginator","vue"],"latest_commit_sha":null,"homepage":"https://marcodpt.github.io/vue-limit/","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/marcodpt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-05T19:57:47.000Z","updated_at":"2018-09-17T15:06:21.000Z","dependencies_parsed_at":"2022-09-10T20:51:10.320Z","dependency_job_id":null,"html_url":"https://github.com/marcodpt/vue-limit","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fvue-limit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fvue-limit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fvue-limit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fvue-limit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcodpt","download_url":"https://codeload.github.com/marcodpt/vue-limit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248143700,"owners_count":21054825,"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":["component","limit","pager","pagination","paginator","vue"],"created_at":"2024-11-14T01:17:39.946Z","updated_at":"2025-04-10T02:26:20.547Z","avatar_url":"https://github.com/marcodpt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-limit\nVue simple array pagination, fully customizable  \n[Live Demo](http://marcodpt.github.io/vue-limit)\n\n## Install\n```\nnpm install --save vue-limit\n```\n\n## Usage\n```javascript\n  import Vue from '../node_modules/vue/dist/vue.js'\n  import limit from './index.vue'\n\n  new Vue({\n    components: {\n      'vue-limit': limit\n    },\n    data: {\n      model: {\n        page: 1,\n        time: 0,\n        rows: 3,\n        label: 'Page (${page} / ${pages})',\n        firstLabel: 'First',\n        previousLabel: 'Previous',\n        nextLabel: 'Next',\n        lastLabel: 'Last'\n      },\n      input: [\n        'item 1',\n        'item 2',\n        'item 3',\n        'item 4',\n        'item 5',\n        'item 6',\n        'item 7',\n        'item 8',\n        'item 9',\n        'item 10'\n      ],\n      output: []\n    }\n  }).$mount('#app')\n```\n\n```html\n  \u003cdiv style=\"margin:20px\"\u003e\n    \u003cvue-limit v-bind=\"model\" :model=\"model\" :input=\"input\" :output=\"output\" /\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"margin:20px\"\u003e\n    \u003cul\u003e\n      \u003cli v-for=\"out in output\"\u003e{{out}}\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\n```\n\n### Props\n - model \n   - type: Object\n   - required: true\n   - description: Object model\n - id\n   - type: String\n   - default: page\n   - description: variable id inside object\n - rows\n   - type: Number\n   - default: 10\n   - description: max number of elements of **input** array per page\n - input\n   - type: Array\n   - default: []\n   - description: Input data, component don't touch in this array, **read only**\n - output\n   - type: Array\n   - default: []\n   - description: You should pass an empty array inside your data scope, this array will be stored result of pagination, observe that in case of objects exact the same object from input will be passed\n - label\n   - type: String\n   - default: Page (**${page}** / **${pages}**)\n   - description: String that will be used on select, **page** and **pages** are the only available variables\n - time\n   - type: Number\n   - default: 0\n   - description: 0 does nothing, greater than 0 means time in second to go automatically to next page\n - firstLabel\n   - type: String\n   - default: First\n   - description: First button label\n - previousLabel\n   - type: String\n   - default: Previous\n   - description: Previous button label\n - nextLabel\n   - type: String\n   - default: Next\n   - description: Next button label\n - lastLabel\n   - type: String\n   - default: Last\n   - description: Last button label\n - buttonClass\n   - type: String, Array, Object\n   - default: ''\n   - description: CSS class aplied to all the buttons, for example with bootstrap3 use **btn btn-default**\n - buttonStyle\n   - type: String, Array, Object\n   - default: ''\n   - description: CSS inline style for all buttons\n - selectClass\n   - type: String, Array, Object\n   - default: ''\n   - description: CSS class aplied to select, for example with bootstrap3 use **form-control**\n - selectStyle\n   - type: String, Array, Object\n   - default: ''\n   - description: CSS inline style to select, for example with bootstrap3 use **width:auto;display:inline**\n\n### Slots\n - slots inside the buttons, for use icons instead of labels: \n   - first\n   - previous\n   - next\n   - last\n - slot for substitute the select input, use this slot if you want a simple **label** or something like **input=range**\n   - select\n     - scope\n       - id: id passed in the props\n       - model: model passed in the props\n       - label: current label, the same passed in the props but with variable substitution\n       - options: **array** with **{id, label}** that generate select\n\n    As you can see you can be use any framework you like with very good results  \n    And you can be very creative for substitute the select for other thing\n\n## Contribute\nWe need help! Our goals are:\n - Support an easy and quick api interface for array pagination\n - Add tests\n - More usage examples and better home page\n - Add support to most browsers\n\nWhat is outside of the scope of this project:\n - Use any kind of css framework or any layout decision\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcodpt%2Fvue-limit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcodpt%2Fvue-limit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcodpt%2Fvue-limit/lists"}