From e1a0c4c4139e8999c778060a88f6026d2f1eb17a Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Sun, 17 Jun 2018 14:45:22 +0200
Subject: [PATCH] feat(ui): v-focus directive

---
 .../cli-ui/src/components/FileDiffView.vue    | 11 +----
 .../cli-ui/src/components/FolderExplorer.vue  |  2 +
 packages/@vue/cli-ui/src/main.js              | 45 ++-----------------
 packages/@vue/cli-ui/src/plugins.js           | 44 ++++++++++++++++++
 packages/@vue/cli-ui/src/util/focus.js        |  9 ++++
 .../@vue/cli-ui/src/views/ProjectCreate.vue   |  1 +
 6 files changed, 61 insertions(+), 51 deletions(-)
 create mode 100644 packages/@vue/cli-ui/src/plugins.js
 create mode 100644 packages/@vue/cli-ui/src/util/focus.js

diff --git a/packages/@vue/cli-ui/src/components/FileDiffView.vue b/packages/@vue/cli-ui/src/components/FileDiffView.vue
index 3aa2a53f81..0294ccf7f8 100644
--- a/packages/@vue/cli-ui/src/components/FileDiffView.vue
+++ b/packages/@vue/cli-ui/src/components/FileDiffView.vue
@@ -41,7 +41,7 @@
           icon-left="vertical_align_bottom"
           :label="$t('components.file-diff-view.actions.commit')"
           class="big primary"
-          @click="openCommitModal()"
+          @click="showCommitModal = true"
         />
         <VueButton
           :label="$t('components.file-diff-view.actions.skip')"
@@ -84,9 +84,9 @@
           :subtitle="$t('components.file-diff-view.modals.commit.subtitle')"
         >
           <VueInput
-            ref="commitMessageInput"
             v-model="commitMessage"
             icon-left="local_offer"
+            v-focus
             @keyup.enter="commitMessage && commit()"
           />
         </VueFormField>
@@ -197,13 +197,6 @@ export default {
       this.$apollo.queries.fileDiffs.refetch()
     },
 
-    openCommitModal () {
-      this.showCommitModal = true
-      requestAnimationFrame(() => {
-        this.$refs.commitMessageInput.focus()
-      })
-    },
-
     async commit () {
       this.showCommitModal = false
       this.loading++
diff --git a/packages/@vue/cli-ui/src/components/FolderExplorer.vue b/packages/@vue/cli-ui/src/components/FolderExplorer.vue
index c20f6dc789..6428e50dd6 100644
--- a/packages/@vue/cli-ui/src/components/FolderExplorer.vue
+++ b/packages/@vue/cli-ui/src/components/FolderExplorer.vue
@@ -20,6 +20,7 @@
           v-model="editedPath"
           :placeholder="$t('components.folder-explorer.toolbar.placeholder')"
           icon-right="edit"
+          v-focus
           @keyup.esc="editingPath = false"
           @keyup.enter="submitPathEdit()"
         />
@@ -162,6 +163,7 @@
           <VueInput
             v-model="newFolderName"
             icon-left="folder"
+            v-focus
             @keyup.enter="createFolder()"
           />
         </VueFormField>
diff --git a/packages/@vue/cli-ui/src/main.js b/packages/@vue/cli-ui/src/main.js
index 5122312054..64bf48f92c 100644
--- a/packages/@vue/cli-ui/src/main.js
+++ b/packages/@vue/cli-ui/src/main.js
@@ -1,55 +1,16 @@
+import './plugins'
+import './register-components'
+
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import i18n from './i18n'
 import { apolloProvider } from './vue-apollo'
-import VueUi from '@vue/ui'
-import InstantSearch from 'vue-instantsearch'
-import VueMeta from 'vue-meta'
-import PortalVue from 'portal-vue'
-import * as Filters from './filters'
-import './register-components'
 import ClientAddonApi from './util/ClientAddonApi'
-import Responsive from './util/responsive'
-import SharedData from './util/shared-data'
-import PluginAction from './util/plugin-action'
 import gql from 'graphql-tag'
-import ClientState from './mixins/ClientState'
-import SetSize from './util/set-size'
 
 window.gql = gql
 
-Vue.use(InstantSearch)
-Vue.use(VueMeta)
-Vue.use(Responsive, {
-  computed: {
-    mobile () {
-      return this.width <= 768
-    },
-    tablet () {
-      return this.width <= 900
-    },
-    desktop () {
-      return !this.tablet
-    },
-    wide () {
-      return this.width >= 1300
-    }
-  }
-})
-Vue.use(VueUi)
-Vue.use(PortalVue)
-Vue.use(SharedData)
-Vue.use(PluginAction)
-
-for (const key in Filters) {
-  Vue.filter(key, Filters[key])
-}
-
-Vue.mixin(ClientState)
-
-Vue.directive('set-size', SetSize)
-
 Vue.config.productionTip = false
 
 // For client addons
diff --git a/packages/@vue/cli-ui/src/plugins.js b/packages/@vue/cli-ui/src/plugins.js
new file mode 100644
index 0000000000..b4978614b2
--- /dev/null
+++ b/packages/@vue/cli-ui/src/plugins.js
@@ -0,0 +1,44 @@
+import Vue from 'vue'
+import VueUi from '@vue/ui'
+import InstantSearch from 'vue-instantsearch'
+import VueMeta from 'vue-meta'
+import PortalVue from 'portal-vue'
+import * as Filters from './filters'
+import Responsive from './util/responsive'
+import SharedData from './util/shared-data'
+import PluginAction from './util/plugin-action'
+import ClientState from './mixins/ClientState'
+import SetSize from './util/set-size'
+import Focus from './util/focus'
+
+Vue.use(InstantSearch)
+Vue.use(VueMeta)
+Vue.use(Responsive, {
+  computed: {
+    mobile () {
+      return this.width <= 768
+    },
+    tablet () {
+      return this.width <= 900
+    },
+    desktop () {
+      return !this.tablet
+    },
+    wide () {
+      return this.width >= 1300
+    }
+  }
+})
+Vue.use(VueUi)
+Vue.use(PortalVue)
+Vue.use(SharedData)
+Vue.use(PluginAction)
+
+for (const key in Filters) {
+  Vue.filter(key, Filters[key])
+}
+
+Vue.mixin(ClientState)
+
+Vue.directive('set-size', SetSize)
+Vue.directive('focus', Focus)
diff --git a/packages/@vue/cli-ui/src/util/focus.js b/packages/@vue/cli-ui/src/util/focus.js
new file mode 100644
index 0000000000..af568824e1
--- /dev/null
+++ b/packages/@vue/cli-ui/src/util/focus.js
@@ -0,0 +1,9 @@
+export default {
+  bind (el) {
+    requestAnimationFrame(() => {
+      const input = el.querySelector('input')
+      if (input) el = input
+      el.focus()
+    })
+  }
+}
diff --git a/packages/@vue/cli-ui/src/views/ProjectCreate.vue b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
index 53e4ff033e..1b8ff9b181 100644
--- a/packages/@vue/cli-ui/src/views/ProjectCreate.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectCreate.vue
@@ -380,6 +380,7 @@
           <VueInput
             v-model="formData.save"
             icon-left="local_offer"
+            v-focus
           />
         </VueFormField>
       </div>