{"_id":"@baseline-banner/vue","_rev":"3-a8573e7992277a3791c16442197e8c37","name":"@baseline-banner/vue","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@baseline-banner/vue","version":"1.0.0","keywords":["vue","baseline","web-features","compatibility","browser-support","component"],"author":{"name":"Sandeep Ramgolam"},"license":"MIT","_id":"@baseline-banner/vue@1.0.0","maintainers":[{"name":"sandeepramgolam","email":"sandeep@ramgolam.com"}],"dist":{"shasum":"fa753eed6ce76a1e14d8f1d414e0b77cb80c3e0a","tarball":"https://registry.npmjs.org/@baseline-banner/vue/-/vue-1.0.0.tgz","fileCount":10,"integrity":"sha512-4rB8/GvhPbpcCl7iCKJGApfgKzN7R73xDnc4rVNDS83I3PK0KPpKV0GtjaQycon7zXpQWX4YD/SdJkgp/82lNQ==","signatures":[{"sig":"MEQCIAdGSZT2RzxTlf8q+/7sS1cBUnJhwcuGHPJvjCy/+9fiAiAIy0uBcnFrAXy3LQbSBrs7UDJKbKlK9r6kotvGomKOoA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12420},"main":"./dist/index.cjs","type":"module","_from":"file:baseline-banner-vue-1.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./style.css":"./dist/index.css","./dist/index.css":"./dist/index.css"},"scripts":{"dev":"vite build --watch","test":"vitest","build":"vite build && vue-tsc --emitDeclarationOnly --outDir dist","type-check":"vue-tsc --noEmit"},"_npmUser":{"name":"sandeepramgolam","email":"sandeep@ramgolam.com"},"_resolved":"/private/var/folders/lq/nrccl4q51kjfd99p2_h0bbyw0000gn/T/16323ffb109c37e72e587b14d9ffc761/baseline-banner-vue-1.0.0.tgz","_integrity":"sha512-4rB8/GvhPbpcCl7iCKJGApfgKzN7R73xDnc4rVNDS83I3PK0KPpKV0GtjaQycon7zXpQWX4YD/SdJkgp/82lNQ==","_npmVersion":"10.9.2","description":"Vue component for checking web feature baseline compatibility","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@baseline-banner/core":"1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","vite":"^6.0.0","vitest":"^2.1.0","vue-tsc":"^2.1.10","typescript":"^5.6.3","@types/node":"^22.3.0","vite-plugin-dts":"^4.3.0","@vitejs/plugin-vue":"^5.2.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_1.0.0_1757152510306_0.3063493942149276","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@baseline-banner/vue","version":"1.1.0","keywords":["vue","baseline","web-features","compatibility","browser-support","component"],"author":{"name":"Sandeep Ramgolam"},"license":"MIT","_id":"@baseline-banner/vue@1.1.0","maintainers":[{"name":"sandeepramgolam","email":"sandeep@ramgolam.com"}],"dist":{"shasum":"7a3487bae2301e799e18863cb248d2c7adebe1e4","tarball":"https://registry.npmjs.org/@baseline-banner/vue/-/vue-1.1.0.tgz","fileCount":26,"integrity":"sha512-NBw4PfmoArmlmUxtPC0hCdC7apkoPuN7o2b+dvyuYeIlVLrgPm+NHJVXtjtZaTLbaVlCCjsc86OAHmT0Wgzq4g==","signatures":[{"sig":"MEUCIQDelF9CikpIpGFSKgGHfhuTv4JiSDqIKZ5I16WIXENKAgIgSL4/i7SYruSEqNlqrD4r6H7ari/7RV93Hwv+HGwJwEM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":229594},"main":"./dist/index.cjs","type":"module","_from":"file:baseline-banner-vue-1.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./style.css":"./dist/index.css","./dist/index.css":"./dist/index.css"},"scripts":{"dev":"vite build --watch","test":"vitest","build":"vite build && vue-tsc --project tsconfig.build.json","type-check":"vue-tsc --noEmit"},"_npmUser":{"name":"sandeepramgolam","email":"sandeep@ramgolam.com"},"_resolved":"/private/var/folders/lq/nrccl4q51kjfd99p2_h0bbyw0000gn/T/f59595dc6019884ab8799a4205729213/baseline-banner-vue-1.1.0.tgz","_integrity":"sha512-NBw4PfmoArmlmUxtPC0hCdC7apkoPuN7o2b+dvyuYeIlVLrgPm+NHJVXtjtZaTLbaVlCCjsc86OAHmT0Wgzq4g==","_npmVersion":"10.9.2","description":"Vue component for checking web feature baseline compatibility","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@baseline-banner/core":"1.0.1","@baseline-banner/styles":"1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","vite":"^6.0.0","vitest":"^2.1.0","vue-tsc":"^2.1.10","typescript":"^5.6.3","@types/node":"^22.3.0","vite-plugin-dts":"^4.3.0","@vitejs/plugin-vue":"^5.2.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_1.1.0_1764344331785_0.5454260732900571","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@baseline-banner/vue","version":"1.1.1","type":"module","description":"Vue component for checking web feature baseline compatibility","keywords":["vue","baseline","web-features","compatibility","browser-support","component"],"author":{"name":"Sandeep Ramgolam"},"license":"MIT","publishConfig":{"access":"public"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./dist/index.css":"./dist/index.css","./style.css":"./dist/index.css"},"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","dependencies":{"@baseline-banner/core":"1.0.2","@baseline-banner/styles":"1.0.0"},"devDependencies":{"@types/node":"^22.3.0","@vitejs/plugin-vue":"^5.2.0","typescript":"^5.6.3","vite":"^6.0.0","vite-plugin-dts":"^4.3.0","vitest":"^2.1.0","vue":"^3.5.13","vue-tsc":"^2.1.10"},"peerDependencies":{"vue":"^3.0.0"},"scripts":{"build":"vite build && vue-tsc --project tsconfig.build.json","dev":"vite build --watch","type-check":"vue-tsc --noEmit","test":"vitest"},"_id":"@baseline-banner/vue@1.1.1","_integrity":"sha512-lc4DvovCS74/jXQYr2/j6cDI5UpFKj8YDyT3fgtYIijUTaMWo8OgNyhrFe8N0s11gZGRk/+jnLlRqnPNYFdhMQ==","_resolved":"/private/var/folders/lq/nrccl4q51kjfd99p2_h0bbyw0000gn/T/5320df62e0e9c5c0f651f8abbd74f208/baseline-banner-vue-1.1.1.tgz","_from":"file:baseline-banner-vue-1.1.1.tgz","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-lc4DvovCS74/jXQYr2/j6cDI5UpFKj8YDyT3fgtYIijUTaMWo8OgNyhrFe8N0s11gZGRk/+jnLlRqnPNYFdhMQ==","shasum":"542edd43ac1b9aacd82b2206294a0c75aa6eb512","tarball":"https://registry.npmjs.org/@baseline-banner/vue/-/vue-1.1.1.tgz","fileCount":26,"unpackedSize":229594,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIC3fo++U6eJvnY/qbLLbNkRJrbIGR2kBFa7/8G6sBNo0AiBmzP2GeZMJLEctFC6Ajqmk5VIwL6ubcmdzwC0gVdB37Q=="}]},"_npmUser":{"name":"sandeepramgolam","email":"sandeep@ramgolam.com"},"directories":{},"maintainers":[{"name":"sandeepramgolam","email":"sandeep@ramgolam.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_1.1.1_1765616597790_0.9756715648436936"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-06T09:55:10.243Z","modified":"2025-12-13T09:03:18.183Z","1.0.0":"2025-09-06T09:55:10.510Z","1.1.0":"2025-11-28T15:38:51.977Z","1.1.1":"2025-12-13T09:03:17.953Z"},"author":{"name":"Sandeep Ramgolam"},"license":"MIT","keywords":["vue","baseline","web-features","compatibility","browser-support","component"],"description":"Vue component for checking web feature baseline compatibility","maintainers":[{"name":"sandeepramgolam","email":"sandeep@ramgolam.com"}],"readme":"# @baseline-banner/vue\n\nVue 3 components for displaying web feature baseline compatibility with multiple theme options.\n\n## Installation\n\n```bash\nnpm install @baseline-banner/vue\n# or\npnpm add @baseline-banner/vue\n# or\nyarn add @baseline-banner/vue\n```\n\n## Available Components\n\nThis package provides multiple themed components:\n\n| Component | Description |\n|-----------|-------------|\n| `BaselineChecker` | Basic component (deprecated, use themed variants) |\n| `BaselineBanner` | Default theme - clean, minimal design |\n| `BaselineBannerMDN` | MDN-inspired theme with detailed browser support |\n| `BaselineBannerWebDev` | web.dev-inspired theme with modern styling |\n\n## Usage\n\n### Default Theme\n\n```vue\n<template>\n  <BaselineBanner feature-name=\"flexbox\" />\n</template>\n\n<script setup>\nimport { BaselineBanner } from '@baseline-banner/vue'\n</script>\n```\n\n### MDN Theme\n\nThe MDN theme provides a detailed view with browser support information:\n\n```vue\n<template>\n  <BaselineBannerMDN feature-name=\"container-queries\" />\n</template>\n\n<script setup>\nimport { BaselineBannerMDN } from '@baseline-banner/vue'\n</script>\n```\n\n### web.dev Theme\n\nThe web.dev theme provides a modern, compact design:\n\n```vue\n<template>\n  <BaselineBannerWebDev feature-name=\"nesting\" />\n</template>\n\n<script setup>\nimport { BaselineBannerWebDev } from '@baseline-banner/vue'\n</script>\n```\n\n### Global Plugin Registration\n\nRegister all components globally:\n\n```typescript\n// main.ts\nimport { createApp } from 'vue'\nimport BaselineBannerVue from '@baseline-banner/vue'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(BaselineBannerVue)\napp.mount('#app')\n```\n\nThen use anywhere in your app:\n\n```vue\n<template>\n  <BaselineBanner feature-name=\"grid\" />\n  <BaselineBannerMDN feature-name=\"flexbox\" />\n  <BaselineBannerWebDev feature-name=\"popover\" />\n</template>\n```\n\n## Component Props\n\nAll banner components accept the same props:\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| `feature-name` | `WebFeatureId` | Yes | Web feature ID with full TypeScript intellisense |\n\n## Sub-Components\n\nFor advanced customization, you can import individual sub-components:\n\n### MDN Theme Sub-Components\n\n```vue\n<script setup>\nimport { \n  BaselineBadgeMDN,\n  BaselineYearMDN,\n  BrowserStatusMDN \n} from '@baseline-banner/vue'\n</script>\n```\n\n### web.dev Theme Sub-Components\n\n```vue\n<script setup>\nimport { BaselineBadgeWebDev } from '@baseline-banner/vue'\n</script>\n```\n\n## TypeScript Support\n\nFull TypeScript support with exported types:\n\n```typescript\nimport type { \n  WebFeatureId, \n  BaselineStatus, \n  WebPlatformFeature \n} from '@baseline-banner/vue'\n```\n\n## Features\n\n- ✅ **Multiple Themes** - MDN, web.dev, and default themes included\n- ✅ **Full TypeScript Support** - Autocomplete for 1080+ web features\n- 🎨 **Styled by Default** - Clean, accessible designs\n- ⚡ **Loading States** - Built-in loading and error handling\n- 📱 **Responsive** - Works on all screen sizes\n- 🎯 **Real-time Data** - Always up-to-date baseline information\n\n## Popular Feature Examples\n\n```vue\n<template>\n  <!-- CSS Features -->\n  <BaselineBanner feature-name=\"flexbox\" />\n  <BaselineBannerMDN feature-name=\"grid\" />\n  <BaselineBannerWebDev feature-name=\"container-queries\" />\n  \n  <!-- Modern CSS -->\n  <BaselineBanner feature-name=\"nesting\" />\n  <BaselineBannerMDN feature-name=\"has\" />\n  \n  <!-- Web APIs -->\n  <BaselineBannerWebDev feature-name=\"popover\" />\n  <BaselineBanner feature-name=\"dialog\" />\n  <BaselineBannerMDN feature-name=\"view-transitions\" />\n</template>\n```\n\n## Requirements\n\n- Vue 3.0+\n- Modern browser with fetch API support\n\n## License\n\nMIT\n","readmeFilename":"README.md"}