From d3d48dec52d8c5860c75041aebf73b5dd6491bcc Mon Sep 17 00:00:00 2001
From: euvl <yev.vlasenko@gmail.com>
Date: Wed, 19 Apr 2017 10:31:45 +0100
Subject: [PATCH] Added new demo, sorted out default class names

---
 demo/src/App.vue                         | 47 +++++---------
 demo/src/components/DemoErrorModal.vue   | 82 ++++++++++++++++++++++++
 demo/src/components/ModesTable.vue       | 33 ++++++++++
 demo/src/{ => components}/PropsTable.vue |  0
 src/Modal.vue                            | 10 +--
 5 files changed, 136 insertions(+), 36 deletions(-)
 create mode 100644 demo/src/components/DemoErrorModal.vue
 create mode 100644 demo/src/components/ModesTable.vue
 rename demo/src/{ => components}/PropsTable.vue (100%)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index 25d08b8..0671ac1 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -1,5 +1,6 @@
 <template>
 <div id="app">
+  <demo-error-modal/>
   <modal name="example-modal"
          transition="nice-modal-fade"
          :min-width="200"
@@ -29,39 +30,15 @@
     Vue.use(vmodal)
   </pre>
 
-  <table>
-    <tr>
-      <td style="width: 20%">Modes:</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td><b>Simple</b></td>
-      <td>Yet another boring modal :)</td>
-    </tr>
-    <tr>
-      <td><b>Adaptive</b></td>
-      <td>Tries to adjust to the page size</td>
-    </tr>
-    <tr>
-      <td><b>Resizable</b></td>
-      <td>
-        Has a small arrow on the bottom-right corner (customizable) that you can drag to change the size of the modal
-      </td>
-    </tr>
-    <tr>
-      <td><b>Mixed</b></td>
-      <td>
-        Is resizable, but if the size of the screen is changed - modal will return to its initial size as well as it will try to adapt to the page size
-      </td>
-    </tr>
-  </table>
+  <modes-table />
 
-  <div style="margin-top: 20px; margin-bottom: 20px;">
+  <div style="margin-top: 20px; margin-bottom: 15px;">
     <button @click="show(false, false, false)">Simple</button>
     <button @click="show(true, false, false)">Resizable</button>
     <button @click="show(false, true, false)">Adaptive</button>
     <button @click="show(true, true, false)">Mixed</button>
     <button @click="show(false, false, true)">Draggable</button>
+    <button @click="showErrorModal">Demo: Error handling</button>
   </div>
 
   <props-table />
@@ -69,12 +46,17 @@
 </template>
 
 <script>
-import PropsTable from './PropsTable.vue'
-//<props-table/>
+import ModesTable     from './components/ModesTable.vue'
+import PropsTable     from './components/PropsTable.vue'
+import DemoErrorModal from './components/DemoErrorModal.vue'
 
 export default {
   name: 'app',
-  components: {PropsTable},
+  components: {
+    ModesTable,
+    PropsTable,
+    DemoErrorModal
+  },
   data() {
     return {
       resizable: false,
@@ -87,7 +69,6 @@ export default {
       this.resizable = resizable
       this.adaptive = adaptive
       this.draggable = draggable
-
       /*
         $nextTick is required because the data model with new
         "resizable, adaptive, draggable" values is not updated yet.. eh
@@ -95,6 +76,10 @@ export default {
       this.$nextTick(() => {
         this.$modal.show('example-modal')
       })
+    },
+
+    showErrorModal () {
+      this.$modal.show('error-modal')
     }
   }
 }
diff --git a/demo/src/components/DemoErrorModal.vue b/demo/src/components/DemoErrorModal.vue
new file mode 100644
index 0000000..c3317a5
--- /dev/null
+++ b/demo/src/components/DemoErrorModal.vue
@@ -0,0 +1,82 @@
+<template>
+  <modal name="error-modal"
+         :classes="['v--modal', 'error-modal', hasBugs && 'has-bugs']"
+         :pivot-y="0.2"
+         :width="400"
+         :height="300"
+         @before-close="beforeClose">
+    <div class="error-modal-content">
+      <div class="bugs-label">bugs: {{bugCount}}</div>
+      <button @click="createBug">Create a bug</button>
+      <button @click="fixBug">Fix a bug</button>
+
+      <div style="padding: 10px;">
+        You will be able to close the window only if you have fixed all the bugs :)
+      </div>
+      <sub :style="{opacity: hasBugs ? 1 : 0}">{{bugCount}} bugs to fix</sub>
+    </div>
+  </modal>
+</template>
+<script>
+export default {
+  name: 'DemoErrorModal',
+  data () {
+    return {
+      bugCount: 0,
+      message: '',
+      hasBugs: false
+    }
+  },
+  methods: {
+    createBug () {
+      this.bugCount++
+    },
+
+    fixBug () {
+      this.bugCount = Math.max(this.bugCount - 1, 0)
+      this.hasBugs = false
+    },
+
+    beforeClose (event) {
+      if (this.bugCount > 0) {
+        this.hasBugs = true
+        /*
+        Stopping close event execution
+        */
+        event.stop()
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.modal.error-modal {
+  transition: box-shadow 1s;
+
+  &.has-bugs {
+    box-shadow: 0 24px 80px -2px rgba(255, 0, 0, .6) !important;
+  }
+}
+
+.error-modal-content {
+  padding: 10px;
+  text-align: center;
+
+  .bugs-label {
+    text-transform: uppercase;
+    font-size: 60px;
+    font-weight: 300;
+    letter-spacing: 2px;
+    padding: 40px;
+  }
+
+  button {
+    width: 180px;
+  }
+
+  sub {
+    color: #EC625F;
+    transition: opacity 0.25s;
+  }
+}
+</style>
diff --git a/demo/src/components/ModesTable.vue b/demo/src/components/ModesTable.vue
new file mode 100644
index 0000000..853eaa2
--- /dev/null
+++ b/demo/src/components/ModesTable.vue
@@ -0,0 +1,33 @@
+<template>
+  <table>
+    <tr>
+      <td style="width: 20%">Modes:</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><b>Simple</b></td>
+      <td>Yet another boring modal :)</td>
+    </tr>
+    <tr>
+      <td><b>Adaptive</b></td>
+      <td>Tries to adjust to the page size</td>
+    </tr>
+    <tr>
+      <td><b>Resizable</b></td>
+      <td>
+        Has a small arrow on the bottom-right corner (customizable) that you can drag to change the size of the modal
+      </td>
+    </tr>
+    <tr>
+      <td><b>Mixed</b></td>
+      <td>
+        Is resizable, but if the size of the screen is changed - modal will return to its initial size as well as it will try to adapt to the page size
+      </td>
+    </tr>
+  </table>
+</template>
+<script>
+export default {
+  name: 'ModesTable'
+}
+</script>
diff --git a/demo/src/PropsTable.vue b/demo/src/components/PropsTable.vue
similarity index 100%
rename from demo/src/PropsTable.vue
rename to demo/src/components/PropsTable.vue
diff --git a/src/Modal.vue b/src/Modal.vue
index 23fab3c..dbba2ea 100644
--- a/src/Modal.vue
+++ b/src/Modal.vue
@@ -2,7 +2,7 @@
   <transition name="overlay-fade">
     <div v-if="visibility.overlay"
          ref="overlay"
-         class="v-j-modal-overlay"
+         class="v--modal-overlay"
          :data-modal="name"
          @mousedown.stop="toggle(false)">
       <transition :name="transition">
@@ -55,7 +55,7 @@
       },
       classes: {
         type: [String, Array],
-        default: 'v-j-modal',
+        default: 'v--modal',
       },
       minWidth: {
         type: Number,
@@ -286,7 +286,7 @@
   };
 </script>
 <style lang="scss" scoped>
-  .v-j-modal-overlay {
+  .v--modal-overlay {
     position: fixed;
     left: 0;
     top: 0;
@@ -322,7 +322,7 @@
     transform: translateY(-20px);
   }
 
-  .v-j-modal {
+  .v--modal {
     background: white;
     text-align: left;
     border-radius: 3px;
@@ -331,7 +331,7 @@
 
     //background: yellow !important;
 
-    &.v-j-modal-fullscreen {
+    &.v--modal-fullscreen {
       width: 100vw;
       height: 100vh;
       margin: 0;