{"_id":"@arcon.mobi/nuxt-croppie","name":"@arcon.mobi/nuxt-croppie","dist-tags":{"latest":"4.0.0"},"versions":{"4.0.0":{"name":"@arcon.mobi/nuxt-croppie","version":"4.0.0","description":"A headless Vue 3 image cropper with transform-safe geometry","type":"module","main":"./dist/croppie.cjs","module":"./dist/croppie.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/croppie.mjs","require":"./dist/croppie.cjs"},"./core":{"types":"./dist/croppie.d.ts","import":"./dist/croppie-core.mjs","require":"./dist/croppie-core.cjs"},"./croppie.css":"./dist/style.css","./dist/croppie.css":"./dist/style.css"},"types":"./dist/index.d.ts","peerDependencies":{"vue":">=3.4.0"},"devDependencies":{"@vitejs/plugin-vue":"^5.2.4","@types/node":"^25.0.3","typescript":"^5.9.3","vite":"^5.4.21","vite-plugin-dts":"^4.5.4","vue":"^3.5.40"},"scripts":{"test":"npm run build && node --test test/*.test.mjs","build":"vite build"},"repository":{"type":"git","url":"git+https://github.com/Foliotek/Croppie.git"},"keywords":["crop","cropper","image","cropping","typescript","es-modules","modern","vanilla-js"],"authors":["Dustin Smith <thedustinsmith@gmail.com>","Ethan Calvert <calvert1591@gmail.com>"],"license":"MIT","bugs":{"url":"https://github.com/Foliotek/Croppie/issues"},"homepage":"http://foliotek.github.io/Croppie","gitHead":"9567a45a52ecfea2bb5f822c7fd16996ba275e82","_id":"@arcon.mobi/nuxt-croppie@4.0.0","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-buwxxHh/k6KEBQNY/jvdgcvc/Vg6FUG4htCCN3JZbV77W5hrEBw6yhBhWMqjK2mDODUhuRX5D9XF1mv2yNOhvw==","shasum":"d0129f2f06db5647659eb83250e104f33a79d41a","tarball":"https://registry.npmjs.org/@arcon.mobi/nuxt-croppie/-/nuxt-croppie-4.0.0.tgz","fileCount":17,"unpackedSize":74162,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBzouQn5JJdrLr5vrAKo+sZSQAr9fV8kKb0etCF8PjUkAiAv5ZdZpntNAha5Qvd3ueZqM5hRPRVHplxhT9RjlUH8og=="}]},"_npmUser":{"name":"aj-abad","email":"ajabad.dev@gmail.com"},"directories":{},"maintainers":[{"name":"aj-abad","email":"ajabad.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nuxt-croppie_4.0.0_1787525743906_0.7581955667967402"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-23T22:55:43.682Z","4.0.0":"2026-08-23T22:55:44.042Z","modified":"2026-08-23T22:55:44.299Z"},"maintainers":[{"name":"aj-abad","email":"ajabad.dev@gmail.com"}],"description":"A headless Vue 3 image cropper with transform-safe geometry","homepage":"http://foliotek.github.io/Croppie","keywords":["crop","cropper","image","cropping","typescript","es-modules","modern","vanilla-js"],"repository":{"type":"git","url":"git+https://github.com/Foliotek/Croppie.git"},"bugs":{"url":"https://github.com/Foliotek/Croppie/issues"},"license":"MIT","readme":"# Croppie\n\nA headless Vue 3 image cropper. Croppie owns image geometry and output; the consuming app owns the dialog, buttons, slider, and every other piece of presentation.\n\n## Install\n\n```sh\nnpm install croppie-constrained\n```\n\nImport the component and its structural stylesheet.\n\n```vue\n<script setup lang=\"ts\">\nimport { shallowRef, useTemplateRef } from \"vue\";\nimport Croppie from \"croppie-constrained\";\nimport \"croppie-constrained/croppie.css\";\n\nconst source = shallowRef<string | null>(null);\nconst cropper = useTemplateRef<InstanceType<typeof Croppie>>(\"cropper\");\n\nasync function save() {\n  const blob = await cropper.value?.result({\n    type: \"blob\",\n    size: \"viewport\",\n    format: \"png\",\n  });\n}\n</script>\n\n<template>\n  <Croppie\n    ref=\"cropper\"\n    v-slot=\"{ ready, normalizedZoom, setNormalizedZoom }\"\n    :src=\"source\"\n    :options=\"{\n      viewport: { width: 280, height: 280, type: 'square' },\n      enforceBoundary: true,\n      maxZoom: 2,\n    }\"\n  >\n    <input\n      type=\"range\"\n      min=\"0\"\n      max=\"1\"\n      step=\"0.0001\"\n      :disabled=\"!ready\"\n      :value=\"normalizedZoom\"\n      @input=\"\n        setNormalizedZoom(Number(($event.target as HTMLInputElement).value))\n      \"\n    />\n  </Croppie>\n</template>\n```\n\nThe default slot receives `ready`, the current crop `data`, actual and normalized zoom values, zoom limits, and setters. The component exposes `get`, `result`, `refresh`, `rotate`, `setZoom`, and `setNormalizedZoom` for imperative actions that do not fit props/events.\n\nEvents:\n\n- `ready` after the current `src` has loaded and its first crop is stable.\n- `update` whenever the crop changes.\n- `error` when an image cannot be loaded.\n\n`CroppieCore` remains available as a named export for migrations from the old imperative API. New integrations should use the Vue component.\n\n## Transform-safe mounting\n\nCrop geometry uses layout coordinates rather than transformed viewport snapshots. A cropper can mount and bind once while an ancestor dialog is scaling or translating; it does not need a delayed second `bind()` after the opening animation.\n\n## Development\n\n```sh\nnpm install\nnpm test\n```\n","readmeFilename":"README.md","_rev":"1-bb91a78c05ffe4300a95d35197b2f250"}