Merge pull request #1 from DCzajkowski/vue-cli-build-changes

Vue cli build changes

Author: rangermeier

dist/.gitkeep

@@ -2,12 +2,27 @@
   "name": "vue-pure-lightbox",
   "version": "2.1.9",
   "description": "Very lightweight, JavaScript-only, lightbox plugin for Vue.js",
-  "main": "dist/vue-pure-lightbox.common.js",
+  "main": "dist/VuePureLightbox.common.js",
   "scripts": {
     "prepare": "npm run build",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --target lib --name VuePureLightbox src/Components/Lightbox.vue"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DCzajkowski/vue-pure-lightbox.git"
+  },
+  "keywords": [
+    "vue",
+    "vue.js",
+    "lightbox"
+  ],
+  "author": "Dariusz Czajkowski",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/DCzajkowski/vue-pure-lightbox/issues"
+  },
+  "homepage": "https://github.com/DCzajkowski/vue-pure-lightbox#readme",
   "files": [
     "dist/*",
     "src/*",

package.json

@@ -1,46 +1,49 @@
 <template>
-<Lightbox
+  <Lightbox
     class="lb-demo"
     :thumbnail="thumbnail"
     :images="images"
->
+  >
     <LightboxDefaultLoader slot="loader" />
     <div slot="content" slot-scope="{ url }">
-        <iframe
-            v-if="url.includes('youtube') || url.includes('youtu.be')"
-            :src="url"
-            frameborder="0"
-            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-            style="width: 100%; height: 90vh;"
-        />
-        <img v-else :src="url">
+      <iframe
+        v-if="url.includes('youtube') || url.includes('youtu.be')"
+        :src="url"
+        frameborder="0"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+        style="width: 100%; height: 90vh;"
+      />
+      <img v-else :src="url">
     </div>
-</Lightbox>
+  </Lightbox>
 </template>
 
 <script>
-import Lightbox, { LightboxDefaultLoader } from './Components/Lightbox.vue'
+  import Lightbox, { LightboxDefaultLoader } from './Components/Lightbox.vue'
 
-export default {
-    components: { Lightbox, LightboxDefaultLoader, },
+  export default {
+    components: {
+      Lightbox,
+      LightboxDefaultLoader,
+    },
     data() {
-        return {
-            thumbnail: "http://placekitten.com/g/100/100",
-            images: [
-                "http://placekitten.com/g/200/300",
-                "http://placekitten.com/g/600/400",
-                "https://bit.ly/2r8tNLH",
-                "https://www.youtube.com/watch?v=Z4j5rJQMdOU",
-            ]
-        }
+      return {
+        thumbnail: "http://placekitten.com/g/100/100",
+        images: [
+          "http://placekitten.com/g/200/300",
+          "http://placekitten.com/g/600/400",
+          "https://bit.ly/2r8tNLH",
+          "https://www.youtube.com/watch?v=Z4j5rJQMdOU",
+        ]
+      }
     }
-}
+  }
 </script>
 
-<style>
-.lb-demo {
+<style scoped>
+  .lb-demo {
     height: 100px;
     width: 100px;
-}
-</style>
+  }
+</style>

src/App.vue

@@ -46,7 +46,6 @@
 
 <script>
   import Vue from 'vue'
-
   import LightboxDefaultLoader from './LightboxDefaultLoader.vue'
   export { LightboxDefaultLoader }
 
@@ -67,7 +66,9 @@
         default: false,
       },
     },
-    components: { LightboxDefaultLoader, },
+    components: {
+      LightboxDefaultLoader,
+    },
     data() {
       return {
         visible: this.value,

src/Components/Lightbox.vue

@@ -1,8 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 
-
 new Vue({
   el: '#app',
   render: (h) => h(App),
-})
+})