Vue3 (#1594)

* WIP vue3

* WIP vue3

* WIP vue3

* Migrates to vitejs

* Fixes js tests and removes not needed modules

* Fixes unmount

* Updates to use css instead for space

* Fixes tests and rebases one more time

* Uses orgua

* Fixes migrations bugs with oruga and fixes scroll

* Fixes v-deep

* Fixes icons to prod

* Fixes icons to prod

* Adds favicon back

* Transitions some to composition api

* Updates another component to comp api

* Cleans defineProps

* Updates log messages

* Moves more to compose api

* Cleans up styles and rewrites event source

* Tries to fix DOMPurify

* Removes postcss

* WIP typescript

* Improves importing

* Converts all to ts

* Converts main to ts

* Makes changes for tsconfig

* Moves more to ts

* Adds typing to store

* More typing

* Updates to ts

* Updates the rest to ts

* Fixes computes

* Fixes unmount

* Adds cypress with custom base fixed

* Fixes jest tests

* Fixes golang tests

* Adds gitignore for cypress

* Removes int in favor of e2e with cypress

* Tries to fix int tests again

* Adds title

* Updates e2e tests

* Uses vue for isMobile

* Removes app spec

* Cleans up docker

* Adds drop down for settings

* Fixes bug with restart

* Fixes scroll up bug

* Adds tests for light mode

assets/components/FuzzySearchModal.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="panel">
-    <b-autocomplete
+    <o-autocomplete
       ref="autocomplete"
       v-model="query"
-      placeholder="Search containers using ⌘ + k, ⌃k"
+      placeholder="Search containers using ⌘ + k or ctrl + k"
       field="name"
       open-on-focus
       keep-first
@@ -11,11 +11,11 @@
       :data="results"
       @select="selected"
     >
-      <template slot-scope="props">
+      <template v-slot="props">
         <div class="media">
           <div class="media-left">
             <span class="icon is-small" :class="props.option.state">
-              <container-icon />
+              <octicon-container-24 />
             </span>
           </div>
           <div class="media-content">
@@ -23,23 +23,19 @@
           </div>
           <div class="media-right">
             <span class="icon is-small column-icon" @click.stop.prevent="addColumn(props.option)" title="Pin as column">
-              <columns-icon />
+              <cil-columns />
             </span>
           </div>
         </div>
       </template>
-    </b-autocomplete>
+    </o-autocomplete>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapState, mapActions } from "vuex";
 import fuzzysort from "fuzzysort";
 
-import PastTime from "./PastTime";
-import ContainerIcon from "~icons/octicon/container-24";
-import ColumnsIcon from "~icons/cil/columns";
-
 export default {
   props: {
     maxResults: {
@@ -53,11 +49,7 @@ export default {
     };
   },
   name: "FuzzySearchModal",
-  components: {
-    PastTime,
-    ContainerIcon,
-    ColumnsIcon,
-  },
+
   mounted() {
     this.$nextTick(() => this.$refs.autocomplete.focus());
   },
@@ -110,6 +102,7 @@ export default {
 <style lang="scss" scoped>
 .panel {
   min-height: 400px;
+  width: 580px;
 }
 
 .running {
@@ -126,7 +119,7 @@ export default {
   }
 }
 
-::v-deep a.dropdown-item {
+:deep(a.dropdown-item) {
   padding-right: 1em;
   .media-right {
     visibility: hidden;