Adding search url support

package.json

@@ -10,26 +10,26 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.1",
     "bulma": "^0.9.1",
-    "core-js": "^3.6.4",
+    "core-js": "^3.8.1",
-    "js-yaml": "^3.14.0",
+    "js-yaml": "^3.14.1",
     "lodash.merge": "^4.6.2",
-    "register-service-worker": "^1.7.1",
+    "register-service-worker": "^1.7.2",
     "vue": "^2.6.12"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.8",
+    "@vue/cli-plugin-babel": "~4.5.9",
-    "@vue/cli-plugin-eslint": "~4.5.8",
+    "@vue/cli-plugin-eslint": "~4.5.9",
-    "@vue/cli-plugin-pwa": "~4.5.8",
+    "@vue/cli-plugin-pwa": "~4.5.9",
-    "@vue/cli-service": "~4.5.8",
+    "@vue/cli-service": "~4.5.9",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.11.0",
+    "eslint": "^7.15.0",
-    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-prettier": "^3.2.0",
-    "eslint-plugin-vue": "^7.1.0",
+    "eslint-plugin-vue": "^7.2.0",
-    "prettier": "^2.1.2",
+    "prettier": "^2.2.1",
     "raw-loader": "^4.0.2",
-    "sass": "^1.27.0",
+    "sass": "^1.30.0",
-    "sass-loader": "^10.0.4",
+    "sass-loader": "^10.1.0",
     "vue-template-compiler": "^2.6.12"
   }
 }

src/components/SearchInput.vue

@@ -5,7 +5,7 @@
       type="text"
       ref="search"
       :value="value"
-      @input="$emit('input', $event.target.value.toLowerCase())"
+      @input="search($event.target.value)"
       @keyup.enter.exact="$emit('search-open')"
       @keyup.alt.enter="$emit('search-open', '_blank')"
     />
@@ -20,18 +20,48 @@ export default {
     this._keyListener = function (event) {
       if (event.key === "/") {
         event.preventDefault();
-        this.$emit("search-focus");
+        this.focus();
-        this.$nextTick(() => {
-          this.$refs.search.focus();
-        });
       }
       if (event.key === "Escape") {
-        this.$refs.search.value = "";
+        this.cancel();
-        this.$refs.search.blur();
-        this.$emit("search-cancel");
       }
     };
     document.addEventListener("keydown", this._keyListener.bind(this));
+
+    // fill seach from get parameter.
+    const search = new URLSearchParams(window.location.search).get("search");
+    if (search) {
+      this.$refs.search.value = search;
+      this.search(search);
+      this.focus();
+    }
+  },
+  methods: {
+    focus: function () {
+      this.$emit("search-focus");
+      this.$nextTick(() => {
+        this.$refs.search.focus();
+      });
+    },
+    setSearchURL: function (value) {
+      const url = new URL(window.location);
+      if (value === "") {
+        url.searchParams.delete("search");
+      } else {
+        url.searchParams.set("search", value);
+      }
+      window.history.replaceState("search", null, url);
+    },
+    cancel: function () {
+      this.setSearchURL("");
+      this.$refs.search.value = "";
+      this.$refs.search.blur();
+      this.$emit("search-cancel");
+    },
+    search: function (value) {
+      this.setSearchURL(value);
+      this.$emit("input", value.toLowerCase());
+    },
   },
   beforeDestroy() {
     document.removeEventListener("keydown", this._keyListener);

src/components/services/AdGuardHome.vue

@@ -11,7 +11,7 @@
             </div>
             <div v-if="item.icon" class="media-left">
               <figure class="image is-48x48">
-                <i style="font-size: 35px;" :class="['fa-fw', item.icon]"></i>
+                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
               </figure>
             </div>
             <div class="media-content">

src/components/services/Generic.vue

@@ -2,7 +2,8 @@
 export default {};
 </script>
 
-<style></style> */
+<style></style>
+*/
 
 <script>
 export default {};
@@ -27,7 +28,7 @@ export default {};
             </div>
             <div v-if="item.icon" class="media-left">
               <figure class="image is-48x48">
-                <i style="font-size: 35px;" :class="['fa-fw', item.icon]"></i>
+                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
               </figure>
             </div>
             <div class="media-content">