Add comments to the code and overtake some additional code from the Alpha

components/SearchInput.vue

@@ -15,10 +15,19 @@
           class="input"
           name="search"
           type="text"
-          placeholder="Search..."
+          :placeholder="$t('search.placeholder')"
           @keyup.exact="onInput"
           @keyup.enter="onEnter"
         >
+        <!-- span class="icon is-small is-left">
+          <hc-icon icon="search"></hc-icon>
+        </span -->
+        <!-- ds-icon
+          class="icon"
+          size="xx-small"
+          name="angle-down"
+          align="right"
+        / -->
       </div>
     </div>
   </div>
@@ -38,6 +47,7 @@ export default {
       type: String,
       default: ''
     },
+    // #: Delay after typing before calling a search query.
     delay: {
       type: Number,
       default: 700
@@ -50,7 +60,9 @@ export default {
   data() {
     return {
       searchValue: '',
+      // #: Returned ID value of the timer given by "setTimeout()".
       searchProcess: null,
+      // #!: Seems to be unused (unquestioned).
       searching: false
     }
   },
@@ -70,6 +82,7 @@ export default {
     this.updateValue()
   },
   methods: {
+    // #: Sets "searchValue" same as "value" if they are different or sets "searchValue" to empty string if "value is undef".
     updateValue() {
       if (!this.value) {
         this.searchValue = ''
@@ -78,6 +91,7 @@ export default {
       }
     },
     onInput() {
+      // #: Prevent "setTimeout()" to call parameter function after "delay".
       clearTimeout(this.searchProcess)
       this.searching = true
       // skip on less then three letters
@@ -88,25 +102,30 @@ export default {
       if (this.searchValue === this.value) {
         return
       }
+      // #: Calls function in first parameter after a delay of "this.delay" milliseconds.
       this.searchProcess = setTimeout(() => {
         this.searching = false
-        this.$emit('search', this.searchValue.toString())
+        //-- avoid querying for dev -- this.$emit('search', this.searchValue.toString())
       }, this.delay)
     },
     onEnter() {
+      // #: Prevent "setTimeout()" to call parameter function after "delay".
       clearTimeout(this.searchProcess)
+      // #: "Vue.nextTick()": Defer the callback to be executed after the next DOM update cycle.
       this.$nextTick(() => {
+        // #: Prevent "setTimeout()" to call parameter function after "delay".
         clearTimeout(this.searchProcess)
       })
       this.searching = false
-      this.$emit('search', this.searchValue.toString())
+      //-- avoid querying for dev -- this.$emit('search', this.searchValue.toString())
     },
     clear() {
+      // #: Prevent "setTimeout()" to call parameter function after "delay".
       clearTimeout(this.searchProcess)
       this.searching = false
       this.searchValue = ''
       if (this.value !== this.searchValue) {
-        this.$emit('search', '')
+        //-- avoid querying for dev -- this.$emit('search', '')
       }
     }
   }

layouts/default.vue

@@ -11,7 +11,19 @@
           </a>
         </div>
         <div class="main-navigation-center hc-navbar-search">
-          <search-input />
+          <!-- avoid querying for dev --  search-input
+            id="nav-search"
+            class="is-hidden-mobile"
+            :value="searchQuery"
+            :style="{ height: '100%' }"
+            @search="onSearch"
+          / -->
+          <search-input
+            id="nav-search"
+            class="is-hidden-mobile"
+            :style="{ height: '100%' }"
+            @search="onSearch"
+          />
         </div>
         <div class="main-navigation-right">
           <no-ssr>
@@ -120,12 +132,18 @@ export default {
     SearchInput
   },
   mixins: [seo],
+  data() {
+    return {
+      mobileSearchVisible: false
+    }
+  },
   computed: {
     ...mapGetters({
       user: 'auth/user',
       isLoggedIn: 'auth/isLoggedIn',
       isModerator: 'auth/isModerator',
       isAdmin: 'auth/isAdmin'
+      //-- avoid querying for dev -- searchQuery: 'search/query'
     }),
     routes() {
       if (!this.user.slug) {
@@ -167,7 +185,22 @@ export default {
         return this.$route.path === url
       }
       return this.$route.path.indexOf(url) === 0
+    },
+    // #: Is executet at listener of DOM event "search" is triggered. Set by tag "search-input" above by '@search="onSearch"' is short of 'v-on:search="onSearch"'.
+    onSearch(value) {
+      //-- avoid querying for dev -- this.$store.commit('search/query', value)
     }
+    // #: Used for "hc-dropdown" in Aplpha for mobile mode.
+    // opened() {
+    //   // setTimeout(() => {
+    //   this.mobileSearchVisible = true
+    //   // }, 25)
+    // },
+    // closed() {
+    //   // setTimeout(() => {
+    //   this.mobileSearchVisible = false
+    //   // }, 100)
+    // }
   }
 }
 </script>

locales/de.json

@@ -25,6 +25,9 @@
     "shouted": "Empfohlen",
     "commented": "Kommentiert"
   },
+  "search": {
+    "placeholder": "Suchen …"
+  },
   "settings": {
     "name": "Einstellungen",
     "data": {

locales/en.json

@@ -25,6 +25,9 @@
     "shouted": "Shouted",
     "commented": "Commented"
   },
+  "search": {
+    "placeholder": "Search …"
+  },
   "settings": {
     "name": "Settings",
     "data": {
@@ -168,8 +171,5 @@
     "name": "Name",
     "loadMore": "load more",
     "loading": "loading"
-  },
-  "search": {
-    "placeholder": "Search..."
   }
 }