Rename the prop

Author: DCzajkowski

README.md

@@ -117,13 +117,13 @@ import styles from 'vue-pure-lightbox/dist/VuePureLightbox.css'
 
 ### Available props:
 
-| Prop           | Type              | Value                                           |
-| -------------- | ----------------- | ----------------------------------------------- |
-| thumbnail      | string            | Path to a file being your thumbnail             |
-| images         | string[] or array | Array of paths to files visible in the lightbox |
-| alternate-text | string            | **(Optional)** alt="" text for your image       |
-| value          | boolean           | **(Optional)** reactive visibility prop         |
-| openAt         | integer           | **(Optional)** index of image to show on open   |
+| Prop           | Type              | Value                                                           |
+| -------------- | ----------------- | --------------------------------------------------------------- |
+| thumbnail      | string            | Path to a file being your thumbnail                             |
+| images         | string[] or array | Array of paths to files visible in the lightbox                 |
+| alternate-text | string            | **(Optional)** alt="" text for your image                       |
+| value          | boolean           | **(Optional)** reactive visibility prop                         |
+| open-at-index  | integer           | **(Optional)** index of an image to show when opening the modal |
 
 ### Available slots:
 | Slot          | Description                                    | Default                              |

src/App.vue

@@ -3,7 +3,7 @@
     class="lb-demo"
     :thumbnail="thumbnail"
     :images="images"
-    :openAt="1"
+    :openAtIndex="1"
   >
     <LightboxDefaultLoader slot="loader" />
     <div slot="content" slot-scope="{ url }">

src/Components/Lightbox.vue

@@ -57,7 +57,7 @@
       images: {
         type: Array,
       },
-      openAt: {
+      openAtIndex: {
         type: Number,
         default: 0,
       },
@@ -76,7 +76,7 @@
     data() {
       return {
         visible: this.value,
-        index: this.openAt,
+        index: this.openAtIndex,
         displayImage: true,
       }
     },
@@ -99,11 +99,11 @@
     methods: {
       show() {
         this.visible = true
-        this.index = this.openAt
+        this.index = this.openAtIndex
       },
       hide() {
         this.visible = false
-        this.index = this.openAt
+        this.index = this.openAtIndex
       },
       previous() {
         if (this.hasPrevious) {