{"_id":"@crosskpixel/vue-zoomer","_rev":"1-e5208af10611283e93f63d591d1e6488","name":"@crosskpixel/vue-zoomer","dist-tags":{"latest":"0.3.6"},"versions":{"0.3.6":{"name":"@crosskpixel/vue-zoomer","version":"0.3.6","description":"Zoom the image or other thing with mouse or touch","main":"dist/vue-zoomer.min.js","module":"dist/vue-zoomer.esm.js","scripts":{"dev-basic":"parcel demo/basic/index.html --port 5100","dev-gallery":"parcel demo/gallery/index.html --port 5100","clean":"rm -rf .cache && rm -rf dist","build-basic":"parcel build demo/basic/index.html --public-url . --out-dir dist/demo --out-file basic.html","build-gallery":"parcel build demo/gallery/index.html --public-url . --out-dir dist/demo --out-file gallery.html","build-lib":"rollup -c","build":"npm run clean && npm run build-basic && npm run build-gallery && npm run build-lib"},"keywords":["zoom","zoomer","image","vue"],"repository":{"type":"git","url":"git+ssh://git@github.com/crosskpixel/vue-zoomer.git"},"author":{"name":"Jarvis Niu","email":"jarvisniu@gmail.com"},"license":"MIT","devDependencies":{"@vue/component-compiler-utils":"^2.6.0","lodash.debounce":"^4.0.8","lodash.throttle":"^4.1.1","parcel-bundler":"^1.11.0","rollup":"^1.20.2","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-stylus-css-modules":"^1.5.0","rollup-plugin-terser":"^5.1.1","rollup-plugin-vue":"^5.0.1","stylus":"^0.54.5","vue":"^2.6.7","vue-hot-reload-api":"^2.3.3","vue-template-compiler":"^2.6.7"},"bugs":{"url":"https://github.com/jarvisniu/vue-zoomer/issues"},"homepage":"https://github.com/jarvisniu/vue-zoomer#readme","dependencies":{},"gitHead":"baeb9fe69930e018dc3bbbab4a0b6172977f8d12","_id":"@crosskpixel/vue-zoomer@0.3.6","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-5I72e95RjhmPKvpB5mlVFAM9I5KbvtYF+tsWxm/W9n2l2se1P+nehepLhEosaXtCfSC28KpZJ6K9UwcHRjstZw==","shasum":"73911a1774a9c1ff309a149d3976ae625c19781a","tarball":"https://registry.npmjs.org/@crosskpixel/vue-zoomer/-/vue-zoomer-0.3.6.tgz","fileCount":18,"unpackedSize":2451689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezph0CRA9TVsSAnZWagAA6IwP/2m/9RL0DD1nSIOzS5Pg\nehOeII2ogSHcvgykV4MiOa07G58ITGKNhRFWrIYLKTEZJELwArAu64FX7tV3\nND9xazT3p5wfMS8ipvEbKNrg+mg7s5huJBUtgfhqF7Zvdr+yN+eNR6zARDgY\nITpJHTu3PVedJps1ae2HAej6FZJa0LruhtnjhUJcdo23CaPCE0N4oZEByJs9\nHuaLZCAOgHtsLsx4bz/Pmy95BNm8H/6osVwPbfBrEtWm34yke49u+K1lNnya\nTjxxijgBGopa88HXJSIgqsTXGUcoqDmMyjNpLOwtheyKyTEoU6DVyiq880CQ\nyFKHoutgAwBJi7u5i5BT5swqRyvVYu+3LrDaP1yMSQOy865Ce1YpIUMs1Hpq\nAVxQoGamOe4OpPRDkSWJJuTWa/62p4uh8v1KS0FPTutQcM8O/aMb/a1i/28R\n5/GMvSU0jIKGp2Fb/3v+Tko6hmCGPUBeyoUTOh2fxERERdDJRjZQ+YaIxjIO\nz/4a66gma2Hwc8iSEJZUjL/v7J//FXrZGsSANcjb3n3ylsLF4FiZlCvbdMOM\n2rWgtE/9588XmucVJCm1v+7YAZelqcJVfHt3hs6Vy8P3HWE+C6+tQcXQbXRJ\nAqteouIgo44nPxzLVfXCSIqi2UZtZKkwL84yA6ro210yUgtndKgu+7pyppKw\nQsBl\r\n=CPsI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGX3FnY1eNEkUht6U/LGLzq/GVLdt8FKQPgDSUiH7nYrAiEAldF5O1lj11TH578tVj5cMn5FcKfvcOZWLo4EC0vMB1I="}]},"maintainers":[{"name":"crosskpixel","email":"igorpraxedeslinux@gmail.com"}],"_npmUser":{"name":"crosskpixel","email":"igorpraxedeslinux@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-zoomer_0.3.6_1590597747891_0.588004268416235"},"_hasShrinkwrap":false}},"time":{"created":"2020-05-27T16:42:27.859Z","0.3.6":"2020-05-27T16:42:28.032Z","modified":"2022-04-05T01:52:44.399Z"},"maintainers":[{"name":"crosskpixel","email":"igorpraxedeslinux@gmail.com"}],"description":"Zoom the image or other thing with mouse or touch","homepage":"https://github.com/jarvisniu/vue-zoomer#readme","keywords":["zoom","zoomer","image","vue"],"repository":{"type":"git","url":"git+ssh://git@github.com/crosskpixel/vue-zoomer.git"},"author":{"name":"Jarvis Niu","email":"jarvisniu@gmail.com"},"bugs":{"url":"https://github.com/jarvisniu/vue-zoomer/issues"},"license":"MIT","readme":"# vue-zoomer\r\n\r\n> Zoom the image or other thing with mouse or touch\r\n\r\n## Demo\r\n\r\n- [Single Image](https://unpkg.com/vue-zoomer/dist/demo/basic.html)\r\n- [Gallery](https://unpkg.com/vue-zoomer/dist/demo/gallery.html)\r\n\r\n## Usage\r\n\r\nInstall:\r\n\r\n```bash\r\nnpm install vue-zoomer\r\n```\r\n\r\nImport:\r\n\r\n```js\r\nimport Vue from 'vue'\r\nimport VueZoomer from 'vue-zoomer'\r\n\r\nVue.use(VueZoomer)\r\n```\r\n\r\nSingle usage:\r\n\r\n```html\r\n<v-zoomer style=\"width: 500px; height: 500px; border: solid 1px silver;\">\r\n  <img\r\n    src=\"./assets/landscape-1.jpg\"\r\n    style=\"object-fit: contain; width: 100%; height: 100%;\"\r\n  >\r\n</v-zoomer>\r\n```\r\n\r\nGallery usage:\r\n\r\n```html\r\n<v-zoomer-gallery\r\n  style=\"width: 100vw; height: 100vh;\"\r\n  :list=\"['a.jpg', 'b.jpg', 'c.jpg']\"\r\n  v-model=\"selIndex\"\r\n></v-zoomer-gallery>\r\n```\r\n\r\n## API\r\n\r\n### &lt;v-zoomer&gt; Props\r\n\r\n- `maxScale: number` - Maximum scale limit, default is 5;\r\n- `minScale: number` - Minimum scale limit, default is 1;\r\n- `zoomed: out boolean` - Whether zoomed in (scale equals to 1). `out` means the prop is a child to parent one-way binding. So there must have a `.sync` modifier.\r\n- `pivot: 'cursor' | 'image-center'` - The pivot when zoom the content, default is `cursor`, can set to be `image-center`;\r\n- `limitTranslation: boolean` - Whether to limit the content into the container, default is `true`;\r\n- `doubleClickToZoom: boolean` - Whether to zoom in/out the content by double click, default is `true`;\r\n\r\n### &lt;v-zoomer&gt; Methods\r\n\r\n- `reset()` - Reset the scale and translate to the initial state.\r\n- `zoomIn(scale=2)` - Zoom in.\r\n- `zoomOut(scale=0.5)` - Zoom out.\r\n\r\n### &lt;v-zoomer-gallery&gt; Props\r\n\r\n- `list: Array<string> required` - Displaying image urls;\r\n- `v-model(value): number required` - Index of current showing image;\r\n- `pivot: 'cursor' | 'image-center'` - The pivot when zoom the image, default is `cursor`, can set to be `image-center`;\r\n- `limitTranslation: boolean` - Whether to limit the image into the container, default is `true`;\r\n- `doubleClickToZoom: boolean` - Whether to zoom in/out the image by double click, default is `true`;\r\n\r\n### &lt;v-zoomer-gallery&gt; Methods\r\n\r\n- `reset()` - Reset the scale and translate to the initial state.\r\n- `zoomIn(scale=2)` - Zoom in.\r\n- `zoomOut(scale=0.5)` - Zoom out.\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}