fix(footer): add custom props to show footer when images == 1

README.md

@@ -205,6 +205,12 @@ How to use:
       <td>Next</td>
       <td>Text for the next thumb image button</td>
     </tr>
+    <tr>
+      <td>showFooterCount</td>
+      <td>Boolean</td>
+      <td>true</td>
+      <td>Show footer count</td>
+    </tr>
   </tbody>
 </table>
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-image-lightbox",
   "description": "A Vue.js package to display an image gallery lightbox",
-  "version": "7.1.3",
+  "version": "7.2.0",
   "author": "Nguyen P. Thien Dzung <dzungnguyenvn@outlook.com>",
   "license": "MIT",
   "main": "dist/vue-image-lightbox.min.js",
@@ -50,14 +50,14 @@
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "rimraf": "^3.0.2",
     "style-loader": "^1.0.0",
-    "terser-webpack-plugin": "^2.3.5",
+    "terser-webpack-plugin": "^4.2.2",
     "url-loader": "^4.0.0",
     "vue": "^2.6.10",
     "vue-loader": "^15.9.1",
     "vue-template-compiler": "^2.6.10",
-    "webpack": "4.43.0",
+    "webpack": "4.44.2",
     "webpack-cli": "3.3.11",
-    "webpack-dev-server": "3.10.3"
+    "webpack-dev-server": "3.11.0"
   },
   "vetur": {
     "tags": "dist/vetur/tags.json",

src/components/LightBox.vue

@@ -7,7 +7,7 @@
       @beforeLeave="disableImageTransition"
     >
       <div
-        v-if="media && media.length > 0"
+        v-if="media"
         v-show="lightBoxOn"
         ref="container"
         class="vue-lb-container"
@@ -75,8 +75,8 @@
             <div class="vue-lb-footer">
               <div class="vue-lb-footer-info" />
               <div
-                v-if="media.length > 1"
                 class="vue-lb-footer-count"
+                v-show="showFooterCount"
               >
                 <slot
                   name="footer"
@@ -219,6 +219,11 @@ export default {
       default: true,
     },
 
+    showFooterCount: {
+      type: Boolean,
+      default: true,
+    },
+
     // Mode
     autoPlay: {
       type: Boolean,