feat(inputs): add better autofocus (filebrowser#26)

fix issue filebrowser#25

src/components/prompts/Download.vue

@@ -7,11 +7,11 @@
     <div class="card-content">
       <p>{{ $t('prompts.downloadMessage') }}</p>
 
-      <button class="block cancel" @click="download('zip')" autofocus>zip</button>
-      <button class="block cancel" @click="download('tar')" autofocus>tar</button>
-      <button class="block cancel" @click="download('targz')" autofocus>tar.gz</button>
-      <button class="block cancel" @click="download('tarbz2')" autofocus>tar.bz2</button>
-      <button class="block cancel" @click="download('tarxz')" autofocus>tar.xz</button>
+      <button class="block cancel" @click="download('zip')" v-focus>zip</button>
+      <button class="block cancel" @click="download('tar')" v-focus>tar</button>
+      <button class="block cancel" @click="download('targz')" v-focus>tar.gz</button>
+      <button class="block cancel" @click="download('tarbz2')" v-focus>tar.bz2</button>
+      <button class="block cancel" @click="download('tarxz')" v-focus>tar.xz</button>
     </div>
   </div>
 </template>

src/components/prompts/NewArchetype.vue

@@ -6,7 +6,7 @@
 
     <div class="card-content">
       <p>{{ $t('prompts.newArchetype') }}</p>
-      <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
+      <input v-focus type="text" @keyup.enter="submit" v-model.trim="name">
       <input type="text" @keyup.enter="submit" v-model.trim="archetype">
     </div>
 

src/components/prompts/NewDir.vue

@@ -6,7 +6,7 @@
 
     <div class="card-content">
       <p>{{ $t('prompts.newDirMessage') }}</p>
-      <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
+      <input type="text" @keyup.enter="submit" v-model.trim="name" v-focus >
     </div>
 
     <div class="card-action">

src/components/prompts/NewFile.vue

@@ -6,7 +6,7 @@
 
     <div class="card-content">
       <p>{{ $t('prompts.newFileMessage') }}</p>
-      <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
+      <input v-focus type="text" @keyup.enter="submit" v-model.trim="name">
     </div>
 
     <div class="card-action">

src/components/prompts/Rename.vue

@@ -6,7 +6,7 @@
 
     <div class="card-content">
       <p>{{ $t('prompts.renameMessage') }} <code>{{ oldName() }}</code>:</p>
-      <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
+      <input v-focus type="text" @keyup.enter="submit" v-model.trim="name">
     </div>
 
     <div class="card-action">

src/components/prompts/Schedule.vue

@@ -6,7 +6,7 @@
 
     <div class="card-content">
       <p>{{ $t('prompts.scheduleMessage') }}</p>
-      <input autofocus type="datetime-local" v-model="date">
+      <input v-focus type="datetime-local" v-model="date">
     </div>
 
     <div class="card-action">

src/components/prompts/Share.vue

@@ -28,7 +28,7 @@
         </li>
 
         <li>
-          <input autofocus
+          <input v-focus
             type="number"
             max="2147483647"
             min="0"

src/main.js

@@ -43,6 +43,12 @@ Vue.prototype.$showError = function (error) {
   n.show()
 }
 
+Vue.directive('focus', {
+  inserted: function (el) {
+    el.focus()
+  }
+})
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/views/settings/User.vue

@@ -78,7 +78,7 @@
       <div class="card-action">
         <button class="cancel flat"
           @click="closeHovers"
-          autofocus
+          v-focus
           :aria-label="$t('buttons.cancel')"
           :title="$t('buttons.cancel')">
           {{ $t('buttons.cancel') }}