feat(ui): Plugin add search (wip)

packages/@vue/cli-ui/package.json

@@ -39,6 +39,7 @@
     "vue": "^2.5.13",
     "vue-apollo": "^3.0.0-beta.5",
     "vue-cli-plugin-apollo": "^0.4.1",
+    "vue-instantsearch": "^1.5.1",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.13",
     "xterm": "^3.2.0"

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

@@ -0,0 +1,67 @@
+<template>
+  <div class="instant-search-input">
+    <VueInput
+      icon-left="search"
+      v-model="query"
+      class="big"
+      placeholder="Search a plugin"
+    >
+      <template slot="right">
+        <VueButton
+          class="icon-button flat"
+          icon-left="clear"
+          @click="clear()"
+        />
+      </template>
+    </VueInput>
+  </div>
+</template>
+
+<script>
+import { Component } from 'vue-instantsearch'
+
+export default {
+  mixins: [
+    Component
+  ],
+
+  computed: {
+    query: {
+      get() {
+        return this.searchStore.query
+      },
+      set (value) {
+        this.searchStore.stop()
+        this.searchStore.query = value
+        this.$emit('query', value)
+        // We here ensure we give the time to listeners to alter the store's state
+        // without triggering in between ghost queries.
+        this.$nextTick(() => {
+          this.searchStore.start()
+          this.searchStore.refresh()
+        })
+      }
+    }
+  },
+
+  methods: {
+    clear () {
+      this.searchStore.stop()
+      if (this.searchStore.query.length > 0) {
+        this.searchStore.query = ''
+      }
+      if (this.searchStore.activeRefinements.length > 0) {
+        this.searchStore.clearRefinements()
+      }
+      this.searchStore.start()
+      this.searchStore.refresh()
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.instant-search-input
+  .vue-input
+    width 100%
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+  <div
+    v-show="totalResults > 0"
+    class="instant-search-pagination"
+  >
+    <div class="content">
+      <VueButton
+        class="icon-button"
+        icon-left="first_page"
+        :disabled="page === 1"
+        @click="goToFirstPage()"
+      />
+
+      <VueButton
+        class="icon-button"
+        icon-left="chevron_left"
+        :disabled="page === 1"
+        @click="goToPreviousPage()"
+      />
+
+      <VueButton
+        v-for="item in pages"
+        :key="item"
+        class="icon-button"
+        :class="{
+          primary: page === item
+        }"
+        :label="item.toString()"
+        @click="goToPage(item)"
+      />
+
+      <VueButton
+        class="icon-button"
+        icon-left="chevron_right"
+        :disabled="page >= totalPages"
+        @click="goToNextPage()"
+      />
+
+      <VueButton
+        class="icon-button"
+        icon-left="last_page"
+        :disabled="page >= totalPages"
+        @click="goToLastPage()"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Pagination } from 'vue-instantsearch'
+
+export default {
+  extends: Pagination
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.instant-search-pagination
+  .content
+    h-box()
+    box-center()
+
+    > .vue-button
+      space-between-x(6px)
+</style>

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

@@ -0,0 +1,103 @@
+<template>
+  <div
+    class="item-logo"
+    :class="{
+      selected,
+      loaded
+    }"
+  >
+    <div class="wrapper">
+      <VueIcon
+        v-if="selected"
+        icon="done"
+      />
+      <img
+        v-else-if="image"
+        class="image"
+        :src="image"
+        :key="image"
+        @load="loaded = true"
+      >
+      <VueIcon
+        v-else
+        :icon="icon"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    image: {
+      type: String,
+      default: null
+    },
+
+    icon: {
+      type: String,
+      default: 'widgets'
+    },
+
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      loaded: false
+    }
+  },
+
+  watch: {
+    image (value) {
+      this.loaded = false
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import "~@/style/imports"
+
+.item-logo
+  margin-right $padding-item
+  .wrapper
+    h-box()
+    box-center()
+    width 42px
+    height @width
+    background rgba(black, .03)
+    border-radius 50%
+    overflow hidden
+    .image
+      width 100%
+      height @width
+      transform scale(0)
+    .vue-icon
+      width 24px
+      height @width
+      >>> svg
+        fill rgba($color-text-light, .3)
+
+  &.loaded
+    .image
+      animation zoom .1s
+      transform none
+
+  &.selected
+    .wrapper
+      background $vue-color-primary
+      animation zoom .1s
+      .vue-icon
+        >>> svg
+          fill $vue-color-light
+
+@keyframes zoom
+  0%
+    transform scale(0)
+  100%
+    transform scale(1)
+</style>

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

@@ -5,7 +5,11 @@
       selected
     }"
   >
-    <div class="name">{{ name }}</div>
+    <div class="name">
+      <slot name="name">
+        {{ name }}
+      </slot>
+    </div>
     <div v-if="description || link || showDescription" class="description">
       <slot name="description">
         {{ description }}
@@ -14,8 +18,10 @@
         v-if="link"
         :href="link"
         target="_blank"
+        class="more-info"
         @click.stop="() => {}"
       >
+        <VueIcon icon="open_in_new" class="medium top"/>
         More info
       </a>
     </div>
@@ -37,7 +43,7 @@ export default {
 
     name: {
       type: String,
-      required: true
+      default: null
     },
 
     selected: {
@@ -68,6 +74,22 @@ export default {
       svg
         fill @color
 
+    .more-info
+      color $vue-color-primary
+      padding 0 4px 0 2px
+      border-radius $br
+      .vue-icon
+        >>> svg
+          fill @color
+      &:hover
+        color $vue-color-light
+        background $vue-color-primary
+        .vue-icon
+          >>> svg
+            fill @color
+      &:active
+        background darken($vue-color-primary, 10%)
+
   &.selected
     .name
       color $vue-color-primary

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

@@ -19,7 +19,7 @@
       />
       <VueButton
         class="icon-button"
-        icon-left="arrow_downward"
+        icon-left="subdirectory_arrow_left"
         v-tooltip="'Scroll to bottom'"
         @click="scrollToBottom()"
       />