s.probst/OpenXE
1
0
Fork 0
mirror of https://github.com/OpenXE-org/OpenXE.git synced 2024-11-14 20:17:14 +01:00
Code Issues Projects Releases Wiki Activity

Vue Autocomplete: Show search icon to make autocomplete more obvious

Browse Source
This commit is contained in:
Andreas Palm 2024-04-12 12:51:07 +02:00
parent 761b316bdc
commit a18038c326
3 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
resources/css/primevue/autocomplete.css
View File

@ -91,4 +91,18 @@
color: #212529; color: #212529;
background: #ffffff; background: #ffffff;
font-weight: 600; font-weight: 600;
}
input[type=text].p-autocomplete-dd-input {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.p-autocomplete-dd .p-autocomplete-dropdown {
border-top-left-radius: 0;
border-bottom-left-radius: 0px;
margin: 0;
padding: 3px;
}
.p-autocomplete-dd .p-autocomplete-dropdown svg {
width: 14px;
height: 14px;
} }

2
resources/css/vue.css
View File

@ -32,6 +32,6 @@
padding-top: 5px; padding-top: 5px;
} }
.grid input { .grid input[type=text] {
width: 100%; width: 100%;
} }

8
resources/vue/AutoComplete.vue
View File

@ -8,6 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import {ref} from "vue"; import {ref} from "vue";
import AutoComplete from "primevue/autocomplete"; import AutoComplete from "primevue/autocomplete";
import axios from "axios"; import axios from "axios";
import SearchIcon from "primevue/icons/search";
const props = defineProps({ const props = defineProps({
ajaxFilter: String, ajaxFilter: String,
@ -40,5 +41,10 @@ async function search(event) {
@complete="search" @complete="search"
dataKey="id" dataKey="id"
:forceSelection="forceSelection" :forceSelection="forceSelection"
/> dropdown
>
<template #dropdownicon>
<SearchIcon />
</template>
</AutoComplete>
</template> </template>