Added: Preview Lightbox

app/src/common/Modal.vue

@@ -0,0 +1,56 @@
+<template lang="pug">
+  .modal.fade.in.background-darken(ref='modal', style="display:block", tabindex='-1', role='dialog', @click.self='close()', @keyup.esc='close()')
+    .modal-dialog.modal-lg(role='document')
+      .modal-content
+        .modal-header(v-if='hasHeader')
+          button.close(type='button', data-dismiss='modal', aria-label='Close', @click='close()')
+            span(aria-hidden='true') &times;
+          h4.modal-title
+            slot(name='header')  Modal
+        .modal-body
+          slot(name='body')  Body
+        .modal-footer(v-if='hasFooter')
+          slot(name='footer')
+</template>
+
+<script>
+  export default {
+    props: {
+      hasHeader: {
+        type: Boolean,
+        default: false
+      },
+      hasFooter: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    data() {
+      return {
+      }
+    },
+
+    mounted() {
+      this.$nextTick(function() {
+        this.$refs.modal.focus();
+      });
+    },
+
+    methods: {
+      close() {
+        this.$emit('close');
+      }
+    }
+  }
+</script>
+
+<style>
+  .background-darken {
+    background: rgba(0, 0, 0, 0.3);
+  }
+  .modal.in {
+    overflow-x: auto;
+    overflow-y: scroll;
+  }
+</style>