{"_id":"@codewithmannan/star-rating-vue","_rev":"2-946b5409e9f11f226a95b1c90b997f5a","name":"@codewithmannan/star-rating-vue","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@codewithmannan/star-rating-vue","version":"1.0.0","keywords":["vue","vue3","star-rating","rating-component","vue-component"],"author":{"name":"Abdul Mannan","email":"chamaankhan011@gmail.com"},"license":"MIT","_id":"@codewithmannan/star-rating-vue@1.0.0","maintainers":[{"name":"codewithmannan","email":"chamaankhan011@gmail.com"}],"dist":{"shasum":"6c800a4dab2f0dcba3745565441730e84cf9c697","tarball":"https://registry.npmjs.org/@codewithmannan/star-rating-vue/-/star-rating-vue-1.0.0.tgz","fileCount":5,"integrity":"sha512-ykR28OlL5jy9ibS3T2kFd9kk3XjJwYPstqD9T0GNDvD8PPBNNV5hFiW6bnbxBb04PhDNcjWIAG+Vxn4MmLiHTw==","signatures":[{"sig":"MEQCIHu8QOqr0mEu9Q17ZmHGzShjnc4UBvvJO/LGWxTYHdnMAiAreaV0DNgRujN764rJAEoIQjgCFopmVC2NYLC8hqoHdg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8655},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","scripts":{"build":"vite build"},"_npmUser":{"name":"codewithmannan","email":"chamaankhan011@gmail.com"},"_npmVersion":"10.9.2","description":"A lightweight, dependency-free Vue 3 star rating component with fractional support.","directories":{},"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/star-rating-vue_1.0.0_1761573742845_0.73281226182858","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@codewithmannan/star-rating-vue","version":"1.0.1","description":"A lightweight, dependency-free Vue 3 star rating component with fractional support.","main":"dist/index.js","module":"dist/index.es.js","types":"dist/index.d.ts","scripts":{"build":"vite build"},"keywords":["vue","vue3","star-rating","rating-component","vue-component"],"author":{"name":"Abdul Mannan","email":"chamaankhan011@gmail.com"},"license":"MIT","peerDependencies":{"vue":"^3.2.0"},"devDependencies":{"vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0","vue":"^3.4.0"},"_id":"@codewithmannan/star-rating-vue@1.0.1","_nodeVersion":"22.17.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-XiuvY0RTUcQWCFWPXKLCHuJlFnMVBpF2kI3e9DJM6iMs00XHa2EZxKmsxdwn5nwPF26DHekEFKX5MJfCULa0Vg==","shasum":"93db20c5e0dce6c33edaad5ca20c577ac92c12b5","tarball":"https://registry.npmjs.org/@codewithmannan/star-rating-vue/-/star-rating-vue-1.0.1.tgz","fileCount":5,"unpackedSize":12412,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEIGDaZHQM+6Rv/8/zYFtIKlm9ACw34O9+sKoAa/vr8BAiEA8AQb3IovI+AYdPaDVhksoXxhq6WVvfKsao1x0WazmwE="}]},"_npmUser":{"name":"codewithmannan","email":"chamaankhan011@gmail.com"},"directories":{},"maintainers":[{"name":"codewithmannan","email":"chamaankhan011@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/star-rating-vue_1.0.1_1761652444897_0.5868327799832826"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-27T14:02:22.780Z","modified":"2025-10-28T11:54:05.267Z","1.0.0":"2025-10-27T14:02:23.034Z","1.0.1":"2025-10-28T11:54:05.099Z"},"author":{"name":"Abdul Mannan","email":"chamaankhan011@gmail.com"},"license":"MIT","keywords":["vue","vue3","star-rating","rating-component","vue-component"],"description":"A lightweight, dependency-free Vue 3 star rating component with fractional support.","maintainers":[{"name":"codewithmannan","email":"chamaankhan011@gmail.com"}],"readme":"# Star Rating Vue\r\n\r\nA high-precision star rating component for Vue 3 with fractional star support using canvas-based area calculation. Features accessibility support, customizable colors and sizes, and precise fractional ratings.\r\n\r\n![Star Rating Vue](https://img.shields.io/npm/v/@codewithmannan/star-rating-vue) ![Vue 3](https://img.shields.io/badge/Vue-3-green) ![License](https://img.shields.io/npm/l/@codewithmannan/star-rating-vue)\r\n\r\n## Features\r\n\r\n- 🎯 **Precise Fractional Ratings** - Canvas-based area calculation for accurate fractional star display\r\n- ♿ **Accessible** - ARIA labels and proper semantic markup\r\n- 🎨 **Customizable** - Size, color, and number of stars\r\n- ⚡ **Performance Optimized** - Built-in caching for same-size components\r\n- 📱 **Responsive** - Works on all screen sizes\r\n- 🎪 **Vue 3 Ready** - Compatible with Composition API and Options API\r\n- 🖨️ **SSR Compatible** - Safe for server-side rendering with fallbacks\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @codewithmannan/star-rating-vue\r\n```\r\n\r\n## Usage\r\n\r\n### Basic Usage\r\n\r\n```vue\r\n<template>\r\n  <StarRating :rating=\"3.5\" />\r\n</template>\r\n\r\n<script setup>\r\nimport StarRating from \"@codewithmannan/star-rating-vue\";\r\n</script>\r\n```\r\n\r\n### Advanced Usage with Props\r\n\r\n```vue\r\n<template>\r\n  <div>\r\n    <StarRating\r\n      :rating=\"4.7\"\r\n      :max=\"5\"\r\n      size=\"32px\"\r\n      color=\"#FFD055\"\r\n      :samplingMultiplier=\"10\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup>\r\nimport StarRating from \"@codewithmannan/star-rating-vue\";\r\n</script>\r\n```\r\n\r\n### Integration in Recipe App Example\r\n\r\n```vue\r\n<template>\r\n  <div class=\"recipe-container\">\r\n    <div class=\"recipe-header\">\r\n      <h1>{{ recipe.name }}</h1>\r\n\r\n      <div class=\"food-rating\">\r\n        <div class=\"stars\">\r\n          <StarRating :rating=\"recipe?.stats?.rating || 0\" />\r\n        </div>\r\n        <div class=\"rating-text\">\r\n          {{\r\n            `${recipe?.stats?.rating || 0}/5 (${\r\n              recipe?.stats?.reviews || 0\r\n            } reviews)`\r\n          }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup>\r\nimport { ref, onMounted } from \"vue\";\r\nimport StarRating from \"@codewithmannan/star-rating-vue\";\r\n\r\nconst recipe = ref({});\r\n\r\nonMounted(async () => {\r\n  // Load your recipe data\r\n  recipe.value = {\r\n    name: \"Delicious Pasta\",\r\n    stats: {\r\n      rating: 4.5,\r\n      reviews: 24,\r\n    },\r\n  };\r\n});\r\n</script>\r\n```\r\n\r\n## Props\r\n\r\n| Prop                 | Type   | Default      | Description                                          |\r\n| -------------------- | ------ | ------------ | ---------------------------------------------------- |\r\n| `rating`             | Number | **Required** | Current rating value (e.g., 3.5, 4.0)                |\r\n| `max`                | Number | `5`          | Maximum number of stars                              |\r\n| `size`               | String | `\"24px\"`     | Size of stars in pixels (e.g., \"24px\", \"32px\")       |\r\n| `color`              | String | `\"#FFD055\"`  | Color for filled stars                               |\r\n| `samplingMultiplier` | Number | `10`         | Precision multiplier for fractional star calculation |\r\n\r\n## Handling Loading States\r\n\r\nSince ratings might be undefined during data loading, use the nullish coalescing operator:\r\n\r\n```vue\r\n<StarRating :rating=\"recipe?.stats?.rating || 0\" />\r\n```\r\n\r\n## How It Works\r\n\r\nThe component uses an innovative canvas-based approach for precise fractional star rendering:\r\n\r\n1. **Precise Area Calculation**: Rasterizes the star shape using offscreen canvas\r\n2. **Cumulative Distribution**: Builds a CDF (Cumulative Distribution Function) for the star shape\r\n3. **Smart Clipping**: Uses SVG clip paths based on the precise area calculation\r\n4. **Performance Caching**: Caches calculations per size to avoid recomputation\r\n\r\nThis ensures that fractional stars (like 4.3) display the exact correct filled area, not just linear approximations.\r\n\r\n## Browser Support\r\n\r\n- Chrome 60+\r\n- Firefox 55+\r\n- Safari 12+\r\n- Edge 79+\r\n\r\n## Accessibility\r\n\r\nThe component includes:\r\n\r\n- ARIA labels for screen readers\r\n- Semantic HTML structure\r\n- Proper role attributes\r\n- Keyboard navigation support\r\n\r\n## License\r\n\r\nMIT License - feel free to use in your projects.\r\n\r\n## Contributing\r\n\r\nContributions are welcome! Please feel free to submit a Pull Request.\r\n\r\n## Support\r\n\r\nIf you have any issues or questions, please open an issue on the GitHub repository.\r\n\r\n---\r\n\r\n**Note**: Make sure to handle potential `undefined` values for ratings during data loading to avoid console warnings.\r\n","readmeFilename":"README.md"}