public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(search): round and clearable searchbar

Browse Source
This commit is contained in:
Corentin Thomasset 2022-04-11 22:47:11 +02:00
parent d55329f3ab
commit b112f5f226
No known key found for this signature in database
GPG Key ID: DBD997E935996158
1 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/SearchBar.vue
View File

@ -33,17 +33,15 @@ function onSelect(path: string) {
<template>
<div>
<n-auto-complete
placeholder="Search a tool..."
:options="options"
v-model:value="queryString"
:input-props="{ autocomplete: 'disabled' }"
:on-select="onSelect"
>
<template #prefix>
<n-icon>
<search-round />
</n-icon>
<n-auto-complete :options="options" v-model:value="queryString" :input-props="{ autocomplete: 'disabled' }"
:on-select="onSelect">
<template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
<n-input round clearable placeholder="Search a tool..." :value="slotValue" @input="handleInput"
@focus="handleFocus" @blur="handleBlur">
<template #prefix>
<n-icon :component="SearchRound" />
</template>
</n-input>
</template>
</n-auto-complete>
</div>