{"_id":"@970design/focal-point-image","name":"@970design/focal-point-image","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@970design/focal-point-image","version":"1.0.0","description":"A Vue image component that resolves and applies a WordPress-managed focal point (object-position) for responsive, art-directed cropping. Companion to the nsz-focal-point WordPress plugin.","keywords":["vue","image","focal-point","wordpress","headless","astro"],"author":{"name":"970Design"},"license":"ISC","type":"module","homepage":"https://github.com/970Design/vue-focal-point-image#readme","repository":{"type":"git","url":"git+https://github.com/970Design/vue-focal-point-image.git"},"main":"./dist/focal-point-image.umd.js","module":"./dist/focal-point-image.es.js","exports":{".":{"import":"./dist/focal-point-image.es.js","require":"./dist/focal-point-image.umd.js"}},"publishConfig":{"access":"public"},"peerDependencies":{"vue":"^3.5.0"},"scripts":{"build":"vite build"},"devDependencies":{"@vitejs/plugin-vue":"^6.0.6","vite":"^8.0.9"},"_id":"@970design/focal-point-image@1.0.0","gitHead":"53962fbc5e80cc6a51e02ae3eaa0eb83fcd91ad2","bugs":{"url":"https://github.com/970Design/vue-focal-point-image/issues"},"_nodeVersion":"24.9.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-/sQqwZGtlJVJr2z2g2ASUGC4gYvBhEP2+RzSFkqcGiP5loGuYrlCjsj7LtxVQTDFhj6qrLS76PXmWKc/PnNHKg==","shasum":"05561d755c6b1bb27333fa1bb997060876ea2dd9","tarball":"https://registry.npmjs.org/@970design/focal-point-image/-/focal-point-image-1.0.0.tgz","fileCount":5,"unpackedSize":8324,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDKXTPLwJ0JylusJS71psCHt/O/DjP/Mq09TtaEt7NVbAIgPxgbMRlFBtdvPl7yuMILDqRKhBJVd3TwIGgl0t5WQcA="}]},"_npmUser":{"name":"970designuser","email":"webmaster@970design.com"},"directories":{},"maintainers":[{"name":"dividemysky","email":"tj.dividemysky@gmail.com"},{"name":"gweatherson","email":"gweatherson@gmail.com"},{"name":"970designuser","email":"webmaster@970design.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/focal-point-image_1.0.0_1787851914882_0.5642608864743068"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-27T17:31:54.636Z","1.0.0":"2026-08-27T17:31:55.028Z","modified":"2026-08-27T17:31:55.347Z"},"maintainers":[{"name":"dividemysky","email":"tj.dividemysky@gmail.com"},{"name":"gweatherson","email":"gweatherson@gmail.com"},{"name":"970designuser","email":"webmaster@970design.com"}],"description":"A Vue image component that resolves and applies a WordPress-managed focal point (object-position) for responsive, art-directed cropping. Companion to the nsz-focal-point WordPress plugin.","homepage":"https://github.com/970Design/vue-focal-point-image#readme","keywords":["vue","image","focal-point","wordpress","headless","astro"],"repository":{"type":"git","url":"git+https://github.com/970Design/vue-focal-point-image.git"},"author":{"name":"970Design"},"bugs":{"url":"https://github.com/970Design/vue-focal-point-image/issues"},"license":"ISC","readme":"# Focal Point Image\n\nA [Vue](https://vuejs.org/) 3 image component that resolves and applies a\nWordPress-managed focal point (`object-position`) for responsive,\nart-directed image cropping. Works in any environment where Vue is\nsupported, including [Astro.js](https://astro.build/).\n\nCompanion npm package to the\n[`nsz-focal-point`](https://github.com/970Design/nsz-focal-point) WordPress\nplugin, which lets editors pick a focal point per image in the media\nlibrary and exposes it on REST API responses as `image.focal_point`.\n\n## Setup Guide\n\n- Install and activate the [970 Design Focal Point](https://github.com/970Design/nsz-focal-point) plugin on your headless WordPress site.\n- Install this package in your front-end project:\n    - `npm install @970design/focal-point-image`\n- Import and use the `Image` component, passing an image object shaped like a core WP/REST or ACF image field (must include `sizes`, `width`, `height`, `alt`, and optionally `focal_point`).\n\nThis package ships its Vue SFC source directly (no build step) and is\nresolved through your app's own Vite/Astro pipeline, so it's currently\ndistributed as a local `file:` dependency rather than published to npm.\n\n## Example Usage (with Astro.js)\n\n```vue\n<script setup>\nimport Image from '@970design/focal-point-image';\n</script>\n\n<template>\n  <Image :image=\"fields.image\" sizes=\"(min-width: 800px) 800px, 100vw\" />\n</template>\n```\n\n## Props\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| `image` | object | Yes | Image object with `sizes`, `width`, `height`, `alt`, and optionally `focal_point` (as provided by the nsz-focal-point plugin). |\n| `loading` | string | No | Native `loading` attribute. Defaults to `lazy`. |\n| `classes` | string | No | CSS classes applied to the rendered `<img>`. |\n| `sizes` | string | No | Explicit `sizes` attribute. If omitted, calculated from `coverHeight` or defaults to `100vw`. |\n| `focalPoint` | string | No | Explicit `\"X% Y%\"` override. Falls back to `image.focal_point`, then `\"50% 50%\"`. |\n| `coverHeight` | object | No | `{ default, lg, max }` rendered CSS heights (px or rem) for `object-fit: cover` containers, used to calculate an accurate `sizes` attribute. |\n","readmeFilename":"README.md","_rev":"1-13ae92a168182d8016969500a86d5306"}