feat(ui): v-focus directive

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>