33 <ca-search class =" search__input" v-model =" searchInput" ca-search >
44 <ca-data-table class =" search__result"
55 <tbody >
6- <tr v-for =' (resultItem, index) in searchResult' :key =' index' th >
7- {{resultItem.name}}
8- </th ></tr >
6+ <tr v-for =' (resultItem, index) in searchResult' :key =' index'
7+ <th >
8+ <router-link :to =" '/component/'+resultItem.name" router-link >
9+ </th >
10+ <th >
11+ {{resultItem.content}}
12+ </th >
13+ </tr >
914 </tbody >
1015 </ca-data-table >
1116 </div >
@@ -19,7 +24,7 @@ export default {
1924 name: ' search'
2025data : ()=> ({
2126 searchInput: ' '
22- searchResult: [' Nothing matches ' , ],
27+ searchResult: [],
2328 fuse: null ,
2429 options: {
2530 matchAllTokens: true ,
@@ -44,14 +49,21 @@ export default {
4449 },
4550mounted () {
4651// add focus event API to ca-search
47- this .elementInput = document .querySelector (' .search__input'
48- this .elementResult = document .querySelector (' .search__result'
49- this .elementInput .addEventListener (' focus' this .toggleResult ,true )
50- this .elementInput .addEventListener (' blur' this .toggleResult ,true )
52+ if (typeof window !== ' undefined'
53+ this .elementInput = document .querySelector (' .search__input'
54+ this .elementResult = document .querySelector (' .search__result'
55+ this .elementInput .addEventListener (' focus' this .toggleResult ,true )
56+ this .elementInput .addEventListener (' blur' this .toggleResult ,true )
57+ }
5158 },
5259 methods: {
5360toggleResult () {
54- this .elementResult .style .visibility = this .elementResult .style .visibility === ' visible' ? ' hidden' : ' visible'
61+ // TODO: fix this ugly way
62+ if (typeof window !== ' undefined'
63+ setTimeout (()=> {
64+ this .elementResult .style .visibility = this .elementResult .style .visibility === ' visible' ? ' hidden' : ' visible'
65+ },1000 )
66+ }
5567 },
5668 },
5769}