Merge pull request #29 from NickKaramoff/feature/new-events

README.md

@@ -5,7 +5,7 @@
 A slick, yet tiny lightbox gallery for Vue.js
 
 - **Slick.** No excessive design. Pictures, thumbnails, controls.
-- **Tiny.** Dependency-free. Less than 3 KB minified and gzipped.
+- **Tiny.** Dependency-free. 3 KB minified and gzipped.
 - **Adaptive.** Works on computers. Works on tablets. Works on phones.
 
 ## Demo
@@ -109,6 +109,47 @@ Instead of `v-model` you can use the `index` prop and `change` event:
 />
 ```
 
+### Events
+
+| Event name    | Payload                                  | Description                                                                                |
+|---------------|------------------------------------------|--------------------------------------------------------------------------------------------|
+| `change`      | index of the image changed to            | Is emitted on any image change (thumbnail navigation, prev/next, close)                    |
+| `prev`/`next` | index of the image changed to            | Is emitted specifically when the user clicks "Prev"/"Next" or presses Left/Right arrow key |
+| `close`       | index of the image Tinybox was closed at | Is emitted specifically when the user clicks "Close" or presses the Esc key                |
+
+Events can come in handy for business logic cases:
+
+```html
+<Tinybox
+    :images="images"
+    v-model="index"
+    @change="onChange"
+    @prev="onPrevious"
+    @next="onNext"
+    @close="onClose"
+/>
+```
+
+```js
+export default {
+    // ...
+    methods: {
+        onChange(index) {
+            console.log("User navigated to the photo: ", index);
+        },
+        onPrevious(index) {
+            console.log("User clicked 'previous' to switch to: ", index);
+        },
+        onNext(index) {
+            console.log("User clicked 'previous' to switch to: ", index);
+        },
+        onClose(index) {
+            console.log("User closed TinyBox on this photo: ", index);
+        }
+    },
+}
+```
+
 ## Browser support
 
 | ![Chrome][chrome] | ![Firefox][firefox] | ![Safari][safari] | ![MS Edge][edge] | ![Internet Explorer][ie] |

docs/index.html

@@ -57,7 +57,7 @@ <h2>
 
     <p>
       While being not as customizable as some other
-      lightboxes, Tinybox is very slick and lightweight (less than 3&nbsp;KB minzipped). Tinybox is
+      lightboxes, Tinybox is very slick and lightweight (3&nbsp;KB minzipped). Tinybox is
       great on mobile devices too: it supports swipe gestures and changes its size responsively.
     </p>
     <aside>

package.json

@@ -73,12 +73,12 @@
   "size-limit": [
     {
       "path": "dist/tinybox.umd.js",
-      "limit": "3 KB",
+      "limit": "3333 B",
       "webpack": false
     },
     {
       "path": "dist/tinybox.esm.js",
-      "limit": "3 KB"
+      "limit": "3333 B"
     }
   ],
   "engines": {