Fixed and improved search and updated styleguide

components/SearchInput.vue

@@ -32,6 +32,7 @@
           :options="results"
           :auto-reset-search="!searchValue"
           :placeholder="$t('search.placeholder')"
+          :loading="pending"
           @enter="onEnter"
           @focus.capture.native="onFocus"
           @blur.capture.native="onBlur"
@@ -163,16 +164,13 @@ export default {
     },
     onFocus(e) {
       clearTimeout(this.searchProcess)
-      //this.$nextTick(() => {
-      //  this.searchValue = this.lastSearchTerm
-      //})
       this.isOpen = true
     },
     onBlur(e) {
       this.searchValue = this.lastSearchTerm
-      this.$nextTick(() => {
-        this.searchValue = this.lastSearchTerm
-      })
+      // this.$nextTick(() => {
+      //   this.searchValue = this.lastSearchTerm
+      // })
       this.isOpen = false
       clearTimeout(this.searchProcess)
     },
@@ -269,22 +267,12 @@ export default {
 
   .ds-select {
     z-index: $z-index-dropdown + 1;
-    transition: border-bottom 0;
-    background-color: $background-color-soft;
-
-    border-color: darken($background-color-soft, 10%);
-  }
-
-  .ds-select-is-open {
-    .ds-select {
-      border-bottom: 0;
-    }
   }
 
   .ds-select-option-hover {
     .ds-text-size-small,
     .ds-text-size-small-x {
-      color: rgba(#fff, 0.8);
+      color: $text-color-soft;
     }
   }
 

layouts/default.vue

@@ -182,9 +182,11 @@ export default {
       quickSearch: 'search/quickSearch'
     }),
     goToPost(item) {
-      this.$router.push({
-        name: 'post-slug',
-        params: { slug: item.slug }
+      this.$nextTick(() => {
+        this.$router.push({
+          name: 'post-slug',
+          params: { slug: item.slug }
+        })
       })
     },
     matcher(url, route) {

package.json

@@ -36,7 +36,7 @@
     }
   },
   "dependencies": {
-    "@human-connection/styleguide": "~0.5.5",
+    "@human-connection/styleguide": "0.5.10",
     "@nuxtjs/apollo": "4.0.0-rc4",
     "@nuxtjs/axios": "~5.4.1",
     "@nuxtjs/dotenv": "~1.3.0",
@@ -55,11 +55,11 @@
     "nuxt": "~2.4.5",
     "nuxt-env": "~0.1.0",
     "portal-vue": "~1.5.1",
-    "v-tooltip": "~2.0.0-rc.33",
-    "vue-count-to": "~1.0.13",
     "string-hash": "^1.1.3",
     "tiptap": "^1.13.0",
     "tiptap-extensions": "^1.13.0",
+    "v-tooltip": "~2.0.0-rc.33",
+    "vue-count-to": "~1.0.13",
     "vue-izitoast": "1.1.2",
     "vue-sweetalert-icons": "~3.2.0",
     "vuex-i18n": "~1.11.0"

pages/settings/index.vue

@@ -19,6 +19,7 @@
         :options="cities"
         :label="$t('settings.data.labelCity')"
         :placeholder="$t('settings.data.labelCity')"
+        :loading="loading"
         @input.native="handleCityInput"
       />
       <!-- eslint-enable vue/use-v-on-exact -->
@@ -88,6 +89,7 @@ export default {
       axiosSource: null,
       cities: [],
       sending: false,
+      loading: false,
       formData: {}
     }
   },
@@ -179,6 +181,7 @@ export default {
         return
       }
 
+      this.loading = true
       this.axiosSource = CancelToken.source()
 
       const place = encodeURIComponent(value)
@@ -194,6 +197,9 @@ export default {
         .then(res => {
           this.cities = this.processCityResults(res)
         })
+        .finally(() => {
+          this.loading = false
+        })
     }
   }
 }

store/search.js

@@ -12,6 +12,7 @@ export const state = () => {
 export const mutations = {
   SET_QUICK_RESULTS(state, results) {
     state.quickResults = results || []
+    state.quickPending = false
   },
   SET_QUICK_PENDING(state, pending) {
     state.quickPending = pending
@@ -68,10 +69,11 @@ export const actions = {
       })
       .then(res => {
         commit('SET_QUICK_RESULTS', res.data.findPosts || [])
-        commit('SET_QUICK_PENDING', false)
       })
       .catch(() => {
         commit('SET_QUICK_RESULTS', [])
+      })
+      .finally(() => {
         commit('SET_QUICK_PENDING', false)
       })
     return getters.quickResults

yarn.lock

@@ -885,10 +885,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@human-connection/styleguide@~0.5.5":
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/@human-connection/styleguide/-/styleguide-0.5.5.tgz#17866c78f34ea12c6eb0831e22f4b655a4f222bf"
-  integrity sha512-QwD8Y2ds1tQbqTpA7sm0J1RUrB7071clcZmKaKHV9BMTrGR4IJhoYWIjOjNWakkM3u9bNm4SY9S/RTKupMuX2A==
+"@human-connection/styleguide@0.5.10":
+  version "0.5.10"
+  resolved "https://registry.yarnpkg.com/@human-connection/styleguide/-/styleguide-0.5.10.tgz#31ad345a2ff79e4e3a005e38d8ebc100dcc47aa2"
+  integrity sha512-JP65q373ut/qlRA39xWnadO1nsdTY0GSFgV6Q/KNaL4OHMkglKB5KRPgpYenvs+M8+pl9MHREt0XtonLvZAjsQ==
 
 "@nuxt/babel-preset-app@2.4.5":
   version "2.4.5"