vue-gallery - npm Package Compare versions

Comparing version 0.0.2 to 1.0.0

package.json

 {
   "name": "vue-gallery",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.",
@@ -5,0 +5,0 @@ "main": "dist/js/vue-gallery.js",

README.md

@@ -35,1 +35,95 @@ <p align="center">
 ```
+## Development Setup
+
+``` bash
+# install dependencies
+npm install
+
+# build dist files
+npm run build
+```
+
+## Usage
+
+### VueJS single file (ECMAScript 2015)
+```html
+<template>
+  <div>
+    <gallery :images="images" :index="index" @close="index = null"></photoSwipe>
+    <button type="button" @click="index = 0"></button>
+  </div>
+</template>
+
+<script>
+  import Gallery from 'vue-gallery';
+  
+  export default {
+    data() {
+      return {
+        images: [
+          'https://dummyimage.com/800/ffffff/000000',
+          'https://dummyimage.com/1600/ffffff/000000',
+          'https://dummyimage.com/1280/000000/ffffff',
+          'https://dummyimage.com/400/000000/ffffff',
+        ],
+        index: null, // index image
+      };
+    },
+    
+    components: {
+      Gallery
+    },
+  }
+</script> 
+```
+
+### Browser (ES5)
+```html
+<script type="text/javascript" src="blueimp-gallery.min.js"></script>
+<script type="text/javascript" src="vue.js"></script>
+<script type="text/javascript" src="vue-gallery.js"></script>
+
+<div id="app">
+  <gallery :images="images" :index="index" @close="index = null"></photoSwipe>
+  <button type="button" @click="index = 0"></button>
+</div>
+
+<script type="text/javascript">
+  new Vue({
+    el: '#app',
+    data: function() {
+      return {
+        images: [
+          'https://dummyimage.com/800/ffffff/000000',
+          'https://dummyimage.com/1600/ffffff/000000',
+          'https://dummyimage.com/1280/000000/ffffff',
+          'https://dummyimage.com/400/000000/ffffff',
+        ],
+        index: null, // index image
+      };
+    },
+    
+    components: {
+      'gallery': VueGallery
+    },
+  });
+</script>
+```
+
+## Props
+
+| Props               | Type      | Default                                         | Description  |
+| --------------------|:----------| ------------------------------------------------|--------------|
+| images              | Array     | []                                              | Urls list  |
+| index               | Number    | null                                            | Opened image index  |
+| options             | Object    |                                                 | [blueimp-gallery](https://github.com/blueimp/Gallery) options |
+
+
+
+## Events
+| Name         | Params                   | Description  |
+| -------------|:-------------------------|--------------|
+| close        |                          | Close        |
+
+## License
+MIT © [Igor Ognichenko](https://github.com/RobinCK)

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

128747

increased by2.05%

Number of package files

14

increased by7.69%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

129

increased by268.57%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes