Fixed :draggable not working on the touchscreen, demo improvements

demo/src/App.vue

@@ -3,6 +3,7 @@
   <demo-error-modal/>
   <demo-login-modal/>
   <demo-conditional-modal/>
+  <demo-focus-modal/>
 
   <modal name="example-modal"
          transition="nice-modal-fade"
@@ -39,12 +40,22 @@
     <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>
     <br>
-    <button class="green" @click="$modal.show('error-modal')">Demo: Error handling</button>
-    <button class="green" @click="$modal.show('demo-login')">Demo: Login</button>
-    <button :class="canBeShown ? 'green' : 'red'" @click="conditionalShow">
+    <button class="green"
+            @click="$modal.show('error-modal')">
+      Demo: Error handling
+    </button>
+    <button class="green"
+            @click="$modal.show('demo-login')">
+      Demo: Login
+    </button>
+    <button class="green"
+            @click="$modal.show('input-focus-modal')">
+      Demo: Focus Input
+    </button>
+    <button :class="canBeShown ? 'green' : 'red'"
+            @click="conditionalShow">
       Can <b v-if="!canBeShown">NOT</b> be shown
     </button>
   </div>
@@ -57,6 +68,7 @@
 import ModesTable           from './components/ModesTable.vue'
 import PropsTable           from './components/PropsTable.vue'
 import DemoErrorModal       from './components/DemoErrorModal.vue'
+import DemoFocusModal       from './components/InputFocusModal.vue'
 import DemoLoginModal       from './components/DemoLoginModal.vue'
 import DemoConditionalModal from './components/ConditionalModal.vue'
 
@@ -66,6 +78,7 @@ export default {
     ModesTable,
     PropsTable,
     DemoErrorModal,
+    DemoFocusModal,
     DemoLoginModal,
     DemoConditionalModal
   },

demo/src/components/ConditionalModal.vue

@@ -1,6 +1,7 @@
 <template>
   <modal name="conditional-modal"
          :height="200"
+         :adaptive="true"
          @before-open="beforeOpen">
     <div style="padding:30px; text-align: center">
       Hello!

demo/src/components/InputFocusModal.vue

@@ -0,0 +1,30 @@
+<template>
+  <modal name="input-focus-modal"
+         :height="150"
+         :adaptive="true"
+         @opened="opened">
+    <div style="padding: 30px; text-align: center">
+      <input class="huge-font" type="text" placeholder="email" ref="email">
+    </div>
+  </modal>
+</template>
+<script>
+export default {
+  name: 'InputFocusModal',
+  methods: {
+    opened (event) {
+      console.log(this.$refs.email)
+    //  this.$refs.email.focus();
+    }
+  }
+}
+</script>
+<style>
+  input.huge-font {
+    font-size: 70px;
+    font-weight: 100;
+    text-align: center;
+    min-width: auto;
+    width: 100%;
+  }
+</style>

demo/src/components/ModesTable.vue

@@ -19,9 +19,9 @@
       </td>
     </tr>
     <tr>
-      <td><b>Mixed</b></td>
+      <td><b>Draggable</b></td>
       <td>
-        Is resizable, but if the size of the screen is changed - modal will try to adapt to the page size
+        Allows to drag modal on the screen
       </td>
     </tr>
   </table>