feat(ui): projects: search input

Author: Guillaume Chau

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

@@ -7,10 +7,18 @@
       <template slot-scope="{ result: { data, loading } }">
         <template v-if="data">
           <div v-if="data.projects.length">
+            <div class="toolbar">
+              <VueInput
+                v-model="search"
+                icon-left="search"
+                class="round"
+              />
+            </div>
+
             <ListFilter
               v-for="favorite of [true, false]"
               :key="favorite"
-              :list="data.projects"
+              :list="filterProjects(data.projects)"
               :filter="item => !!item.favorite === favorite"
             >
               <template slot-scope="{ list }">
@@ -59,13 +67,21 @@
 </template>
 
 <script>
+import { generateSearchRegex } from '../util/search'
+
 import PROJECTS from '../graphql/projects.gql'
 import PROJECT_CURRENT from '../graphql/projectCurrent.gql'
 import PROJECT_OPEN from '../graphql/projectOpen.gql'
 import PROJECT_REMOVE from '../graphql/projectRemove.gql'
 import PROJECT_SET_FAVORITE from '../graphql/projectSetFavorite.gql'
 
 export default {
+  data () {
+    return {
+      search: ''
+    }
+  },
+
   apollo: {
     projectCurrent: PROJECT_CURRENT
   },
@@ -113,6 +129,16 @@ export default {
 
     compareProjects (a, b) {
       return a.name.localeCompare(b.name)
+    },
+
+    filterProjects (projects) {
+      const reg = generateSearchRegex(this.search)
+      if (reg) {
+        return projects.filter(
+          p => reg.test(p.path)
+        )
+      }
+      return projects
     }
   }
 }
@@ -126,4 +152,9 @@ export default {
   overflow-y auto
   position relative
   min-height 400px
+
+.toolbar
+  h-box()
+  box-center()
+  margin-bottom $padding-item
 </style>

packages/@vue/cli-ui/src/util/search.js

@@ -0,0 +1,3 @@
+export function generateSearchRegex (text) {
+  return text && new RegExp(text.trim().replace(/\s+/g, '.{0,5}'), 'i')
+}

packages/@vue/cli-ui/src/views/ProjectConfigurations.vue

@@ -41,6 +41,7 @@
 
 <script>
 import RestoreRoute from '../mixins/RestoreRoute'
+import { generateSearchRegex } from '../util/search'
 
 import CONFIGS from '../graphql/configurations.gql'
 
@@ -78,7 +79,7 @@ export default {
     generateItems (configurations) {
       if (!configurations) return []
 
-      const reg = this.search && new RegExp(this.search, 'i')
+      const reg = generateSearchRegex(this.search)
       return configurations.filter(
         item => !reg || item.name.match(reg) || item.description.match(reg)
       ).map(