feat(ui): v-focus directive

Author: Guillaume Chau

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++

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>

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

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)

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()
+    })
+  }
+}

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>