{"_id":"@elisiondesign/vue-sole-lightbox","_rev":"1-feeb11d06c62d83e61576624600369f9","name":"@elisiondesign/vue-sole-lightbox","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@elisiondesign/vue-sole-lightbox","version":"0.1.1","description":"A minimalstic single-image lightbox made for Vue.js","author":{"name":"elision.design","email":"info@elision.design"},"repository":{"type":"git","url":"git+https://github.com/elisiondesign/vue-sole-lightbox.git"},"bugs":{"url":"https://github.com/elisiondesign/vue-sole-lightbox/issues"},"keywords":["Vue","Lightbox"],"license":"MIT","scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","build:npm":"vue-cli-service build --target lib --name SoleLightbox src/SoleLightbox.vue"},"main":"dist/SoleLightbox.umd.js","unpkg":"dist/SoleLightbox.umd.min.js","dependencies":{"core-js":"^2.6.5","vue":"^2.6.10"},"devDependencies":{"@vue/cli-plugin-babel":"^3.8.0","@vue/cli-plugin-eslint":"^3.8.0","@vue/cli-service":"^3.8.0","@vue/eslint-config-standard":"^4.0.0","babel-eslint":"^10.0.1","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","node-sass":"^4.9.0","sass-loader":"^7.1.0","vue-template-compiler":"^2.6.10"},"gitHead":"5d0867b082b21f3fa3d8f1a9e98dc0b2d6e99fe1","homepage":"https://github.com/elisiondesign/vue-sole-lightbox#readme","_id":"@elisiondesign/vue-sole-lightbox@0.1.1","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-VE6r9e7YbbYPHaFEVzS0tAqGf7cWg6VfHE4VmXoxp6tnN9pWZ6+7b69NLoH/o55qBta9tknArriz+JiXxXC/HA==","shasum":"24e234c832d321ef9f2e0035f7b39b9d4b4122e9","tarball":"https://registry.npmjs.org/@elisiondesign/vue-sole-lightbox/-/vue-sole-lightbox-0.1.1.tgz","fileCount":10,"unpackedSize":91809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9lsRCRA9TVsSAnZWagAAkUEP/13V62KFmxgoDwjvXB7F\nNbxVar0e4wrA3eWa+DljT81Hhm1+eYM5LGXNhcq3HunYtCtiwJSBDDdQ9LCz\ncBiLrQ1k/mMK8viAhRDuCENT4/y5SF45y2+fc/8jSv8Nwkj8jEZ26q/imT0P\n5XFLhF21cYHBvw+a4U5MJ2x3hH7BcN90KES1/INMT2UXhRDJipY6/DXE09bE\nngfXAMICL16OST7UcC/7bFFF6uBJs+m5z3j7C005HyJHhih4bxg4GDjKfPuh\neljzee2hIOtlNxt5cPHXDqZ9HJHhhe4SMIyTm3ORf8GzwNeopJ0f60Z71nIe\nymyZNQzE3eTLlkAeB4S3j6IR0lSqRLkqPwj3PgKNTorhz+uflZkj2aSa8FfU\nX+Cr5mJSu41cGQwmOSTVriI0LQadPWIq6LcnBkI7FiBVR9dJHYMxMWjBagSJ\nQNZ4TtEfHMTvoa8MpknpX2H7PK7R8emAayljxG1WTBli8WFFhKNH0e7OryS0\nsvMZNvGBokf1dPsfsBckNG/wPQVaoIeeXmRW5g+xZbW5ROQG2HnX+yvm9m8n\nnvkpEWPlu6AeOhIUfyTgPkv2Ol+7FbFDteCHdhdRr9klLogsHu2/OSGOTZ9Z\nHDlOli/mMWFjFcIjBc3cxY8YSCjDhEJhwuwCrB9wknsnwFJSc1kBYSWG3I5k\nbSsI\r\n=Cmlw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtjhgRmINKByrt9PzOwT0kG3BimNJJIrYxOXFPsp4Z2gIgWVbaIyfOj5eqWjlbp0lIwayFM5wZfOYZhGsQtIizPCU="}]},"maintainers":[{"name":"xcharvat","email":"dan@elision.design"},{"name":"xbilek18","email":"honza@elision.design"}],"_npmUser":{"name":"xcharvat","email":"dan@elision.design"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-sole-lightbox_0.1.1_1559649041246_0.4915193591531284"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-04T11:50:41.158Z","0.1.1":"2019-06-04T11:50:41.353Z","modified":"2022-04-05T07:12:12.203Z"},"maintainers":[{"name":"xcharvat","email":"dan@elision.design"},{"name":"xbilek18","email":"honza@elision.design"}],"description":"A minimalstic single-image lightbox made for Vue.js","homepage":"https://github.com/elisiondesign/vue-sole-lightbox#readme","keywords":["Vue","Lightbox"],"repository":{"type":"git","url":"git+https://github.com/elisiondesign/vue-sole-lightbox.git"},"author":{"name":"elision.design","email":"info@elision.design"},"bugs":{"url":"https://github.com/elisiondesign/vue-sole-lightbox/issues"},"license":"MIT","readme":"# vue-sole-lightbox\nThis a simple and minimalistic zero-dependency Vue.js lightbox. The only aim is to fill the screen with a single image while dimming the surroundings. That's it.\n\nIf you seek a lightbox component with navigation and customizable controls, this component is not a good choice.\nOn the other hand, if you only need to highlight a single image at any given time (after a click event for example), than this might be the way to go.\n\nYou can find a demo on [codepen](https://codepen.io/sindael/pen/Ybgvre).\n\n## Getting started\n```\nnpm install vue-sole-lighbox\n```\n\n## Usage\nYou can include the component anywhere within the template. Just make sure that the `ref` attribute is present.\n\n```vue\n<template>\n    <div>\n    // Some code\n\n    <sole-lightbox ref=\"lightbox\"/>\n    </div>\n</template>\n\n<script>\nimport SoleLightbox from 'vue-sole-lightbox'\n\nexport default {\n  components: {\n    // ...\n    SoleLightbox,\n  },\n\n  // ...\n}\n</script>\n```\n\n## Example\n```vue\n<template>\n  <div id=\"app\">\n    <h1>Type img's url to show in lightbox component</h1>\n    <input v-model=\"imgUrl\" type=\"text\" size=\"100\"/> <br/>\n    <button @click=\"openLightbox\">\n      Click me\n    </button>\n    <sole-lightbox ref=\"lightbox\"/>\n  </div>\n</template>\n\n<script>\nimport SoleLightbox from './SoleLightbox.vue'\n\nexport default {\n  name: 'app',\n  components: {\n    SoleLightbox\n  },\n  data () {\n    return {\n      imgUrl: 'https://images.unsplash.com/photo-1559538619-79636b249e31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80'\n    }\n  },\n  methods: {\n    openLightbox () {\n      this.$refs.lightbox.show(this.imgUrl)\n    }\n  }\n}\n</script>\n```\n\n## Available props:\n\n| Prop           | Type              | Value                                                           |\n| -------------- | ----------------- | --------------------------------------------------------------- |\n| prefix         | string            | **(Optional)** prefix image path (e.g. '/images/')              |\n\n## Available methods through $refs:\n| Method        | Arguments                                  | Description                                   |\n| ------------- | ---------------------------------------------- | ----------------------------------------- |\n| show          | img - path to image<br>altText - image caption | Displays Lightbox with given image        |\n| hide          | _none_                                         | Hides Lightbox                            |","readmeFilename":"README.md"}