Added an ability to define a preview (#34)

Author: DCzajkowski

README.md

@@ -126,13 +126,15 @@ import styles from 'vue-pure-lightbox/dist/VuePureLightbox.css'
 | open-at-index  | integer           | **(Optional)** index of an image to show when opening the modal |
 
 ### Available slots:
+
 | Slot          | Description                                          | Default                                   |
 | ------------- | ---------------------------------------------------- | ----------------------------------------- |
 | content       | DOM to be used in place of an image in the lightbox  | <img> tag with src set to path      |
 | loader        | DOM to be used when there is an image loading        | LightboxDefaultLoader                     |
 | icon-close    | Icon to be used as a close button                    | × (×)                     |
 | icon-previous | Icon to be used as the "next" arrow button           | ![](https://i.imgur.com/HcdxJmd.png)(svg) |
 | icon-next     | Icon to be used as the "previous" arrow button       | ![](https://i.imgur.com/oErSVk3.png)(svg) |
+| preview       | DOM to be used in place of the default thumbnail     | Clickable link with a thumbnail           |
 
 ## Contents
 This package consists of just one `.vue` file. It is meant to be as small and simple as possible.

src/App.vue

@@ -17,6 +17,9 @@
       />
       <img v-else :src="url">
     </div>
+    <button slot="preview" slot-scope="{ show }" @click="show">
+      Open
+    </button>
   </Lightbox>
 </template>
 

src/Components/Lightbox.vue

@@ -1,8 +1,10 @@
 <template>
   <div>
-    <a :href="images[0]" target="_blank" @click.prevent="show" class="lightbox__thumbnail">
-      <img :src="thumbnail" :alt="alternateText">
-    </a>
+    <slot name="preview" :show="show">
+      <a v-if="thumbnail" :href="images[0]" target="_blank" @click.prevent="show" class="lightbox__thumbnail">
+        <img :src="thumbnail" :alt="alternateText">
+      </a>
+    </slot>
     <div class="lightbox" v-if="visible" @click="hide">
       <div class="lightbox__close" @click="hide">
         <slot name="icon-close">&times;</slot>
@@ -53,6 +55,7 @@
     props: {
       thumbnail: {
         type: String,
+        default: null,
       },
       images: {
         type: Array,