{"_id":"@alikmanukian/vue-image","_rev":"4-7fcdd6d624339adf99787148602bf26d","name":"@alikmanukian/vue-image","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@alikmanukian/vue-image","version":"1.0.0","keywords":["vue","vue3","image","lazy-loading","placeholder","component"],"author":"","license":"MIT","_id":"@alikmanukian/vue-image@1.0.0","maintainers":[{"name":"alikmanukian","email":"alikmanukian@gmail.com"}],"dist":{"shasum":"bf9aea08963533dc241a43d8566f213c2c8497f0","tarball":"https://registry.npmjs.org/@alikmanukian/vue-image/-/vue-image-1.0.0.tgz","fileCount":11,"integrity":"sha512-LvmOcmufBxWOW/nSXEE8FSRYXGXH3SMJTl2PnA/SrCkeEqx7FKyOzPsckKUH8HhnleCgfedqXrEwckP5piheAg==","signatures":[{"sig":"MEUCIFuhE2LEPF9ceoKMu3IyOnOoDjcHbBjlqBTSvteW8CzBAiEA39mA79MItxGrGSFQ7/QdMEPr+h8UAJhlG7Lp3yMpD+Y=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":88715},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"vite","test":"vitest","build":"vite build","test:ui":"vitest --ui","typecheck":"vue-tsc --noEmit","test:coverage":"vitest --coverage"},"_npmUser":{"name":"alikmanukian","email":"alikmanukian@gmail.com"},"_npmVersion":"10.8.2","description":"Vue Image component with lazy loading and placeholder support","directories":{},"_nodeVersion":"20.18.0","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^2.5.2"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.8","vite":"^6.3.6","jsdom":"^25.0.1","vitest":"^3.2.4","vue-tsc":"^2.1.6","@vitest/ui":"^3.2.4","typescript":"^5.6.2","@vue/test-utils":"^2.4.6","vite-plugin-dts":"^4.2.3","@vitejs/plugin-vue":"^5.1.4","@vitest/coverage-v8":"^3.2.4"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-image_1.0.0_1757863483817_0.3246935492570717","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@alikmanukian/vue-image","version":"1.0.1","keywords":["vue","vue3","image","lazy-loading","placeholder","component"],"author":"","license":"MIT","_id":"@alikmanukian/vue-image@1.0.1","maintainers":[{"name":"alikmanukian","email":"alikmanukian@gmail.com"}],"dist":{"shasum":"bcd4f71ea96256ec9cd530eb7d99d8700f376c96","tarball":"https://registry.npmjs.org/@alikmanukian/vue-image/-/vue-image-1.0.1.tgz","fileCount":15,"integrity":"sha512-R+bXUeIURe7lneid88+DbBEBqx+/5dpp1Yb26OTi1TiMT4nxSiCrgAfWaUKL+ZNAuVl+J+4mpcwC0yWQjz2WCw==","signatures":[{"sig":"MEUCIBFHwhvWRRG1w93RvDwztxpou3gPdoCDmgGeoT9fp7RWAiEA5pUNgovuhnPY1XeAvsD9+9931G0yG51RzUW24k/pn6I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89368},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"vite","test":"vitest","build":"vite build","test:ui":"vitest --ui","typecheck":"vue-tsc --noEmit","test:coverage":"vitest --coverage"},"_npmUser":{"name":"alikmanukian","email":"alikmanukian@gmail.com"},"_npmVersion":"10.8.2","description":"Vue Image component with lazy loading and placeholder support","directories":{},"_nodeVersion":"20.18.0","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^2.5.2"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.8","vite":"^6.3.6","jsdom":"^25.0.1","vitest":"^3.2.4","vue-tsc":"^2.1.6","@vitest/ui":"^3.2.4","typescript":"^5.6.2","@vue/test-utils":"^2.4.6","vite-plugin-dts":"^4.2.3","@vitejs/plugin-vue":"^5.1.4","@vitest/coverage-v8":"^3.2.4"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-image_1.0.1_1757864353106_0.8626295234291916","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@alikmanukian/vue-image","version":"1.0.2","keywords":["vue","vue3","image","lazy-loading","placeholder","component"],"author":"","license":"MIT","_id":"@alikmanukian/vue-image@1.0.2","maintainers":[{"name":"alikmanukian","email":"alikmanukian@gmail.com"}],"dist":{"shasum":"16b0f6afa8a0276562fc9faf756dc9f307c8d5e3","tarball":"https://registry.npmjs.org/@alikmanukian/vue-image/-/vue-image-1.0.2.tgz","fileCount":15,"integrity":"sha512-rph6IDBIaG8PQqBGm6DhlVhhV1xIJhnipFMTMpQiNpAmr0lMMqClTNDaf+tIY7SNISHviC4+hwX/hFm1R63VMA==","signatures":[{"sig":"MEQCICTtTVXqe0wCxmF8y1eq+hpmXR5h14I2O0jVlc3AU5siAiA51V5qTMfKKETbt/Y0Tiq0l3Y5LMty2XqpiVZEBMKbjw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89368},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","scripts":{"dev":"vite","test":"vitest","build":"vite build","test:ui":"vitest --ui","typecheck":"vue-tsc --noEmit","test:coverage":"vitest --coverage"},"_npmUser":{"name":"alikmanukian","email":"alikmanukian@gmail.com"},"_npmVersion":"10.8.2","description":"Vue Image component with lazy loading and placeholder support","directories":{},"_nodeVersion":"20.18.0","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^2.5.2"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.8","vite":"^6.3.6","jsdom":"^25.0.1","vitest":"^3.2.4","vue-tsc":"^2.1.6","@vitest/ui":"^3.2.4","typescript":"^5.6.2","@vue/test-utils":"^2.4.6","vite-plugin-dts":"^4.2.3","@vitejs/plugin-vue":"^5.1.4","@vitest/coverage-v8":"^3.2.4"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-image_1.0.2_1757864376316_0.040252050546224716","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@alikmanukian/vue-image","version":"1.0.3","description":"Vue Image component with lazy loading and placeholder support","main":"dist/index.cjs","module":"dist/index.es.js","types":"dist/index.d.ts","scripts":{"build":"vite build","dev":"vite","test":"vitest","test:coverage":"vitest --coverage","test:ui":"vitest --ui","typecheck":"vue-tsc --noEmit"},"keywords":["vue","vue3","image","lazy-loading","placeholder","component"],"author":"","license":"MIT","type":"module","peerDependencies":{"vue":"^3.0.0"},"dependencies":{"clsx":"^2.1.1","tailwind-merge":"^2.5.2"},"devDependencies":{"@vitejs/plugin-vue":"^5.1.4","@vitest/coverage-v8":"^3.2.4","@vitest/ui":"^3.2.4","@vue/test-utils":"^2.4.6","jsdom":"^25.0.1","typescript":"^5.6.2","vite":"^6.3.6","vite-plugin-dts":"^4.2.3","vitest":"^3.2.4","vue":"^3.5.8","vue-tsc":"^2.1.6"},"_id":"@alikmanukian/vue-image@1.0.3","gitHead":"0863d700f84293fe580b14fa74f063d5cb4aabed","_nodeVersion":"20.18.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-QqyWR8Y+YI5TeGSnAIu89ansS1bDwKHgoANls3XJ8x0ovbkBDMBhGjCE/D6ooHZ9usZ0VWwuOT9AxQeEm3ZOzA==","shasum":"303af18d3db9ac9ebc9e62367ae820e5920dc0e1","tarball":"https://registry.npmjs.org/@alikmanukian/vue-image/-/vue-image-1.0.3.tgz","fileCount":16,"unpackedSize":90437,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEYxSDJwM+FC/y02ei7fEO+uaIaRerAliqbIo+KmvE5TAiBPCi9oKtEQBM90lK7Q+54ofQJ8yj3R43EEnwATDH9AkA=="}]},"_npmUser":{"name":"alikmanukian","email":"alikmanukian@gmail.com"},"directories":{},"maintainers":[{"name":"alikmanukian","email":"alikmanukian@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-image_1.0.3_1757864681486_0.8744643352555628"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-14T15:24:43.684Z","modified":"2025-09-14T15:44:41.839Z","1.0.0":"2025-09-14T15:24:43.990Z","1.0.1":"2025-09-14T15:39:13.307Z","1.0.2":"2025-09-14T15:39:36.534Z","1.0.3":"2025-09-14T15:44:41.669Z"},"license":"MIT","keywords":["vue","vue3","image","lazy-loading","placeholder","component"],"description":"Vue Image component with lazy loading and placeholder support","maintainers":[{"name":"alikmanukian","email":"alikmanukian@gmail.com"}],"readme":"# Vue Image\n\nA Vue 3 image component with lazy loading, placeholder support, and smooth transitions.\n\n## Features\n\n- 🖼️ **Placeholder Support**: Display a placeholder image while the main image loads\n- 🚀 **Lazy Loading**: Built-in lazy loading with native `loading` attribute\n- ⚡ **Priority Control**: Set fetch priority for performance optimization\n- 🎨 **Custom Styling**: Apply custom CSS classes with clsx and tailwind-merge\n- 🔄 **Smooth Transitions**: Fade transition between placeholder and main image\n- 📦 **TypeScript Support**: Full TypeScript support with proper type definitions\n\n## Installation\n\n```bash\nnpm install @alikmanukian/vue-image\n```\n\n## Usage\n\n### Basic Usage\n\n```vue\n<template>\n  <Image src=\"/path/to/image.jpg\" />\n</template>\n\n<script setup>\nimport { Image } from '@alikmanukian/vue-image'\n</script>\n```\n\n### With Placeholder\n\n```vue\n<template>\n  <Image\n    src=\"/path/to/high-res-image.jpg\"\n    placeholder=\"/path/to/low-res-placeholder.jpg\"\n  />\n</template>\n\n<script setup>\nimport { Image } from '@alikmanukian/vue-image'\n</script>\n```\n\n### With Lazy Loading\n\n```vue\n<template>\n  <Image\n    src=\"/path/to/image.jpg\"\n    lazy\n    priority=\"low\"\n  />\n</template>\n\n<script setup>\nimport { Image } from '@alikmanukian/vue-image'\n</script>\n```\n\n### Custom Styling\n\n```vue\n<template>\n  <Image\n    src=\"/path/to/image.jpg\"\n    :image-class=\"['rounded-lg', 'shadow-md', customClass]\"\n  />\n</template>\n\n<script setup>\nimport { Image } from '@alikmanukian/vue-image'\n\nconst customClass = 'hover:scale-105'\n</script>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `src` | `string` | **required** | Source URL of the main image |\n| `placeholder` | `string` | `undefined` | Source URL of the placeholder image |\n| `lazy` | `boolean` | `false` | Enable lazy loading |\n| `priority` | `'high' \\| 'low' \\| 'auto'` | `'auto'` | Fetch priority for performance |\n| `imageClass` | `string \\| string[]` | `undefined` | Additional CSS classes to apply |\n\n## Development\n\n### Setup\n\n```bash\n# Clone the repository\ngit clone <repository-url>\ncd vue-image\n\n# Install dependencies\nnpm install\n```\n\n### Available Scripts\n\n```bash\n# Build the package\nnpm run build\n\n# Run tests\nnpm run test\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Type checking\nnpm run typecheck\n\n# Development mode\nnpm run dev\n```\n\n### Testing\n\nThe package includes comprehensive tests using Vitest and Vue Test Utils:\n\n```bash\n# Run all tests\nnpm run test\n\n# Run tests with coverage report\nnpm run test:coverage\n\n# Run tests in watch mode\nnpm run test -- --watch\n```\n\n## Publishing\n\nTo publish this package to npm:\n\n### Prerequisites\n\n1. **Build the package:**\n   ```bash\n   npm run build\n   ```\n\n2. **Run tests and type checking:**\n   ```bash\n   npm run test\n   npm run typecheck\n   ```\n\n### Publishing Steps\n\n1. **Login to npm** (if not already logged in):\n   ```bash\n   npm login\n   ```\n\n2. **Publish the package:**\n   ```bash\n   npm publish --access public\n   ```\n\n   Note: The `--access public` flag is required for scoped packages (@alikmanukian/vue-image).\n\n3. **Verify publication:**\n   ```bash\n   npm view @alikmanukian/vue-image\n   ```\n\n### Version Management\n\n- **Patch release** (bug fixes): `npm version patch && npm publish --access public`\n- **Minor release** (new features): `npm version minor && npm publish --access public`\n- **Major release** (breaking changes): `npm version major && npm publish --access public`\n\n### What Gets Published\n\nOnly these files are included in the published package:\n- `dist/` - Built component files\n- `README.md` - Documentation\n- `package.json` - Package metadata\n\nDevelopment files (`src/`, `tests/`, config files) are excluded.\n\n## License\n\nMIT\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n","readmeFilename":"README.md"}