teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat(ui): add clear button to search input field (#1989)

Browse source 
Co-authored-by: patak <matias.capeletto@gmail.com>
This commit is contained in:
manuq 2023-04-24 12:05:26 -03:00 committed by GitHub
parent 450908ecb2
commit ac4188274c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
components/search/SearchWidget.vue
View file

@ -64,7 +64,7 @@ function activate() {
<template> <template>
<div ref="el" relative group> <div ref="el" relative group>
<div bg-base border="~ base" h10 px-4 rounded-3 flex="~ row" items-center relative focus-within:box-shadow-outline gap-3> <div bg-base border="~ base" h10 ps-4 pe-1 rounded-3 flex="~ row" items-center relative focus-within:box-shadow-outline>
<div i-ri:search-2-line pointer-events-none text-secondary mt="1px" class="rtl-flip" /> <div i-ri:search-2-line pointer-events-none text-secondary mt="1px" class="rtl-flip" />
<input <input
ref="input" ref="input"
@ -74,7 +74,8 @@ function activate() {
w-full w-full
bg-transparent bg-transparent
outline="focus:none" outline="focus:none"
pe-4 ps-3
pe-1
ml-1 ml-1
:placeholder="isHydrated ? t('nav.search') : ''" :placeholder="isHydrated ? t('nav.search') : ''"
pb="1px" pb="1px"
@ -83,6 +84,9 @@ function activate() {
@keydown.up.prevent="shift(-1)" @keydown.up.prevent="shift(-1)"
@keypress.enter="activate" @keypress.enter="activate"
> >
<button v-if="query.length" btn-action-icon text-secondary @click="query = ''; input?.focus()">
<span aria-hidden="true" class="i-ri:close-line" />
</button>
</div> </div>
<!-- Results --> <!-- Results -->
<div left-0 top-11 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none> <div left-0 top-11 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>