fix(ui): folder explorer: better performance + auto scroll to top

Author: Guillaume Chau

packages/@vue/cli-ui/src/components/FolderExplorer.vue

@@ -88,13 +88,13 @@
       />
     </div>
 
-    <div class="folders">
+    <div ref="folders" class="folders">
       <template v-if="folderCurrent.children">
         <FolderExplorerItem
           v-for="folder of folderCurrent.children"
           :key="folder.name"
           :folder="folder"
-          @click.native="openFolder(folder.path)"
+          @select="openFolder(folder.path)"
         />
       </template>
     </div>
@@ -123,7 +123,11 @@ export default {
   apollo: {
     folderCurrent: {
       query: FOLDER_CURRENT,
-      fetchPolicy: 'network-only'
+      fetchPolicy: 'network-only',
+      async result () {
+        await this.$nextTick()
+        this.$refs.folders.scrollTop = 0
+      }
     },
 
     foldersFavorite: FOLDERS_FAVORITE

packages/@vue/cli-ui/src/components/FolderExplorerItem.vue

@@ -1,10 +1,13 @@
-<template>
-  <div class="folder-explorer-item">
-    <VueIcon :icon="folder.isPackage ? 'folder' : 'folder_open'" class="folder-icon big"/>
+<template functional>
+  <div
+    class="folder-explorer-item"
+    @click="listeners.select()"
+  >
+    <VueIcon :icon="props.folder.isPackage ? 'folder' : 'folder_open'" class="folder-icon big"/>
     <div class="folder-name">
-      {{ folder.name }}
+      {{ props.folder.name }}
       <img
-        v-if="folder.isVueProject"
+        v-if="props.folder.isVueProject"
         class="vue-ui-project-icon"
         src="~@/assets/logo.png"
       >