{"id":20016959,"url":"https://github.com/sinanmtl/vue-rate","last_synced_at":"2025-04-05T08:06:45.436Z","repository":{"id":95159567,"uuid":"90373678","full_name":"SinanMtl/vue-rate","owner":"SinanMtl","description":"Rate component for Vue","archived":false,"fork":false,"pushed_at":"2022-05-16T11:13:24.000Z","size":1244,"stargazers_count":223,"open_issues_count":2,"forks_count":26,"subscribers_count":5,"default_branch":"next","last_synced_at":"2025-03-29T07:07:42.787Z","etag":null,"topics":["component","javascript","vue","vue-components","vuejs"],"latest_commit_sha":null,"homepage":"https://sinanmtl.github.io/vue-rate/","language":"Vue","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/SinanMtl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2017-05-05T12:31:42.000Z","updated_at":"2024-11-23T19:39:15.000Z","dependencies_parsed_at":"2024-01-02T23:34:39.743Z","dependency_job_id":"dbef8336-9874-41c6-8493-aff482d3edba","html_url":"https://github.com/SinanMtl/vue-rate","commit_stats":{"total_commits":65,"total_committers":7,"mean_commits":9.285714285714286,"dds":"0.15384615384615385","last_synced_commit":"f0581458099daec3e92cff84b2c5a7ddb98f7a60"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SinanMtl%2Fvue-rate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SinanMtl%2Fvue-rate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SinanMtl%2Fvue-rate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SinanMtl%2Fvue-rate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SinanMtl","download_url":"https://codeload.github.com/SinanMtl/vue-rate/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305934,"owners_count":20917208,"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","javascript","vue","vue-components","vuejs"],"created_at":"2024-11-13T08:13:52.271Z","updated_at":"2025-04-05T08:06:45.418Z","avatar_url":"https://github.com/SinanMtl.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Rate\n\n[![npm version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js\u0026r=r\u0026type=6e\u0026v=3.0.0\u0026x2=0)](https://www.npmjs.com/package/vue-rate/v/3.0.0)\n[![npm](https://img.shields.io/npm/dt/vue-rate.svg)](https://www.npmjs.com/package/vue-rate/v/3.0.0)\n\n\u003e Rate component for Vue - [Demo](https://sinanmtl.github.io/vue-rate/).\n\u003e Note: This version for Vue 3. If you want to use for Vue 2.x,  please [see](https://github.com/SinanMtl/vue-rate/tree/master).\n\n## Installation and usage\n\nOnce, install rate component for your project\n\n```bash\nnpm install vue-rate@next --save\n// or yarn add vue-rate@next\n```\n\nImport Vue Rate into your app\n\n```javascript\nimport { createApp } from 'vue'\nimport rate from 'vue-rate'\nimport 'vue-rate/dist/vue-rate.css'\n\ncreateApp(App)\n  .use(rate)\n  .mount('#app')\n```\n\nUse HTML template\n\n```html\n\u003crate :length=\"5\" /\u003e\n```\n\n## Options from props\n\n- `length {number}`: Star size\n\n```html\n\u003crate :length=\"5\" /\u003e\n```\n\n- `value {number}`: Default value\n\n```html\n\u003crate :length=\"5\" :value=\"2\" /\u003e\n```\n\n- `showcount {boolean}`: Shows rate number when mouseover the star.\n\n```html\n\u003crate :length=\"5\" :value=\"2\" :showcount=\"true\" /\u003e\n```\n\n- `ratedesc {object}`: Rate star description array. \n\n```html\n\u003crate :length=\"5\" :value=\"2\" :ratedesc=\"['Very bad', 'bad', 'Normal', 'Good', 'Very good']\" /\u003e\n```\n\n- `disabled {boolean}`: Disable rate.\n\n```html\n\u003crate :length=\"5\" :value=\"2\" :disabled=\"true\" /\u003e\n```\n\n- `readonly {boolean}`: Read-only rate.\n\n```html\n\u003crate :length=\"5\" :value=\"2\" :readonly=\"true\" /\u003e\n```\n\n- `iconref {string}`: ID of symbol icon\n\nInsert symbol icon into your codebase\n```html\n\u003csymbol id=\"icon-heart\" class=\"icon\" viewBox=\"0 0 32 32\"\u003e\n  \u003cpath d=\"M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z\"\u003e\u003c/path\u003e\n\u003c/symbol\u003e\n````\n\nThen add Rate component. `iconref` must be symbol's id\n```html\n\u003crate :length=\"5\" iconref=\"icon-heart\" /\u003e\n```\n\n- `slot`: Custom icon via slot\n\nYou can directly use custom icon via default slot\n```html\n\u003crate :length=\"5\" :value=\"3\" :ratedesc=\"desc\" class=\"viaSlot\"\u003e\n  \u003csvg class=\"icon\" width=\"20\" height=\"19\" viewBox=\"0 0 20 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n    \u003cpath\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M12.034 7.074H19.416L13.445 11.448L15.726 18.524L9.75201 14.151L3.77901 18.524L6.06101 11.448L0.0880127 7.075H7.47001L9.75201 0.002V0L12.034 7.075V7.074Z\"\n      fill=\"currentColor\"/\u003e\n  \u003c/svg\u003e\n\u003c/rate\u003e\n```\n\nAdd some flavour\n```css\n.RateCustom.viaSlot .icon {\n  width: 25px;\n  height: 25px;\n}\n.Rate.viaSlot .Rate__star.filled{color: #813d1a;}\n.Rate.viaSlot .Rate__star.hover{color: #E67136;}\n```\n\n- `v-model`\n\n```javascript\nexport default {\n  data: {\n    return () { myRate: 0 }\n  }\n}\n```\n\nor `setup()` in Option API\n```javascript\nimport { ref } from 'vue';\n\nexport default {\n  setup () {\n    const myRate = ref(0);\n    return { myRate }\n  }\n}\n```\n\nor Composition API with `\u003cscript setup\u003e`\n```javascript\n\u003cscript setup\u003e\n  import { ref } from 'vue';\n  const myRate = ref(0);\n\u003cscript\u003e\n```\n\nAnd bind to component\n```html\n\u003crate :length=\"5\" v-model=\"myRate\" /\u003e\n```\n\n## Events\n\n```javascript\n\u003cscript setup\u003e\nfunction onBeforeRate (rate) {\n  alert(rate)\n}\n\nfunction onAfterRate (rate) {\n  alert(rate)\n}\n\u003c/script\u003e\n```\n\n```html\n\u003crate :length=\"5\" :value=\"2\" @before-rate=\"onBeforeRate\" @after-rate=\"onAftereRate\" /\u003e\n```\n\n## Development\n1. Fork the project\n2. Install all dependencies\n3. Make your changes on `src/Rate.vue`\n4. Build the package\n```bash\nnpm run build\n# or yarn build\n```\n5. Commit and create PR\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinanmtl%2Fvue-rate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsinanmtl%2Fvue-rate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinanmtl%2Fvue-rate/lists"}