feat: update search, refine docs

components/OneMenu.vue

@@ -6,29 +6,30 @@
     :expanded.sync="expanded"
   >
     <template #before>
-      <h2>VEUI</h2>
-      <section class="desc">
-        <a href="https://github.com/ecomfe/veui">
-          <img
-            alt="VEUI on GitHub"
-            src="https://badgen.net/badge/-/GitHub?icon=github&label"
-            width="69.2"
-            height="20"
+      <header>
+        <h2>VEUI</h2>
+        <section class="desc">
+          <a href="https://github.com/ecomfe/veui">
+            <img
+              alt="VEUI on GitHub"
+              src="https://badgen.net/badge/-/GitHub?icon=github&label"
+              height="20"
+            >
+          </a>
+          <nuxt-link
+            :class="{
+              'locale-swith': true,
+              disabled: altLocale.disabled,
+            }"
+            :to="altLocale.disabled ? '' : altLocale.to"
           >
-        </a>
-        <nuxt-link
-          :class="{
-            'locale-swith': true,
-            disabled: altLocale.disabled,
-          }"
-          :to="altLocale.disabled ? '' : altLocale.to"
-        >
-          {{ altLocale.label }}
-        </nuxt-link>
-      </section>
-      <section class="filter">
-        <one-search/>
-      </section>
+            {{ altLocale.label }}
+          </nuxt-link>
+        </section>
+        <section class="search">
+          <one-search/>
+        </section>
+      </header>
     </template>
     <template #item-label="{ label, sub }">
       {{ label }}<small>{{ sub }}</small>
@@ -93,7 +94,7 @@ export default {
     normalizeItem ({ title, children, slug, link, disabled }, base = '') {
       const fullSlug = `${base}/${slug}`
       const localePath = this.getLocalePath(fullSlug)
-      const to = (link !== false && fullSlug) ? localePath : null
+      const to = (link !== false && fullSlug && !disabled) ? localePath : null
       const [main, sub] = this.getTitleDetail(title)
 
       return {
@@ -137,10 +138,13 @@ export default {
     border-radius 6px
     font inherit
 
+  header
+    padding 32px 20px 20px
+
   h2
     display flex
     align-items center
-    margin 30px 0 0 20px
+    margin 0 0 16px
     font-size 20px
     font-weight 500
 
@@ -150,8 +154,7 @@ export default {
     & + .desc
       display flex
       align-items center
-      margin-top 15px
-      margin-left 20px
+      margin-bottom 20px
 
       img
         display block
@@ -175,27 +178,13 @@ export default {
     &:hover
       border-color #999
 
-  .filter
-    margin 20px 0 20px 20px
-    height 36px
-
   .search
-    display block
-    width 180px
-    height 32px
-    padding 0 7px
-    border 1px solid #dbdbdb
-    border-radius 4px
-    outline none
-    font-size 13px
-    transition all 0.2s
-
-    &.focus-visible
-      border-color #999
-      box-shadow 0 0 0 2px rgba(0, 0, 0, 0.15)
+    margin-top 16px
+    margin-right 12px
+    flex-shrink 0
 
 .toggle
-  margin-right 15px
+  margin-right 16px
   font-size 13px
   vertical-align middle
 

components/OneSearch.vue

@@ -1,8 +1,21 @@
 <template>
-<div id="docsearch"/>
+<div class="one-search">
+  <veui-search-box
+    v-model="query"
+    class="input"
+    :placeholder="searchPlaceholder"
+    @input="handleInput"
+  />
+  <div
+    ref="docsearch"
+    class="docsearch"
+  />
+</div>
 </template>
 
 <script>
+import { SearchBox } from 'veui'
+import { createElement } from 'preact'
 import i18n from '../common/i18n'
 
 function isSpecialClick (event) {
@@ -16,7 +29,20 @@ function isSpecialClick (event) {
 }
 export default {
   name: 'one-search',
+  components: {
+    'veui-search-box': SearchBox
+  },
   mixins: [i18n],
+  data () {
+    return {
+      query: ''
+    }
+  },
+  computed: {
+    searchPlaceholder () {
+      return this.locale === 'zh-Hans' ? '⌘ K | 搜索…' : '⌘ K | Search...'
+    }
+  },
   watch: {
     locale (val) {
       this.update(val)
@@ -39,7 +65,7 @@ export default {
         docsearch({
           apiKey: '21cdc123c620ec4bb81259c32e90c08f',
           indexName: 'veui',
-          container: '#docsearch',
+          container: this.$refs.docsearch,
           searchParameters: {
             facetFilters: [`lang:${locale}`]
           },
@@ -64,12 +90,9 @@ export default {
             })
           },
           hitComponent: ({ hit, children }) => {
-            return {
-              type: 'a',
-              ref: undefined,
-              constructor: undefined,
-              key: undefined,
-              props: {
+            return createElement(
+              'a',
+              {
                 href: hit.url,
                 onClick: event => {
                   if (isSpecialClick(event)) {
@@ -93,15 +116,41 @@ export default {
                 },
                 children
               }
-            }
+            )
           }
         })
       })
     },
     update (locale) {
-      this.$el.innerHTML = '<div id="docsearch"></div>'
+      this.$refs.docsearch.innerHTML = ''
       this.initialize(locale)
+    },
+    handleInput (value) {
+      if (!value) {
+        return
+      }
+
+      this.teleportQuery(value)
+    },
+    teleportQuery (value) {
+      this.query = ''
+      const docsearchButton = this.$refs.docsearch.querySelector('.DocSearch')
+      docsearchButton.click()
+
+      setTimeout(() => {
+        const docsearchInput = document.getElementById('docsearch-input')
+        docsearchInput.value = value
+        docsearchInput.dispatchEvent(new Event('input'))
+      })
     }
   }
 }
 </script>
+
+<style lang="stylus" scoped>
+.input
+  width auto
+
+.docsearch
+  display none
+</style>