vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Use IconField and InputIcon for filter inputs

Browse source
This commit is contained in:
tugcekucukoglu 2024-05-07 18:47:11 +03:00
parent a547ed4681
commit 1e3fcfca59
16 changed files with 52 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

17
components/lib/select/Select.vue
View file

@ -76,7 +76,7 @@
></span>
<slot name="header" :value="modelValue" :options="visibleOptions"></slot>
<div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
<div :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
<IconField :unstyled="unstyled" v-bind="ptm('pcFilterContainer')">
<InputText
ref="filterInput"
type="text"
@ -97,10 +97,13 @@
@input="onFilterChange"
:pt="ptm('pcFilter')"
/>
<slot name="filtericon" :class="cx('filterIcon')">
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
</slot>
</div>
<InputIcon :unstyled="unstyled" v-bind="ptm('pcFilterIconContainer')">
<slot name="filtericon">
<span v-if="filterIcon" :class="filterIcon" v-bind="ptm('filterIcon')" />
<SearchIcon v-else v-bind="ptm('filterIcon')" />
</slot>
</InputIcon>
</IconField>
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
{{ filterResultMessageText }}
</span>
@ -189,12 +192,14 @@
<script>
import { FilterService } from 'primevue/api';
import IconField from 'primevue/iconfield';
import BlankIcon from 'primevue/icons/blank';
import CheckIcon from 'primevue/icons/check';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import SearchIcon from 'primevue/icons/search';
import SpinnerIcon from 'primevue/icons/spinner';
import TimesIcon from 'primevue/icons/times';
import InputIcon from 'primevue/inputicon';
import InputText from 'primevue/inputtext';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
@ -992,6 +997,8 @@ export default {
InputText,
VirtualScroller,
Portal,
InputIcon,
IconField,
TimesIcon,
ChevronDownIcon,
SpinnerIcon,

14
components/lib/select/style/SelectStyle.js
View file

@ -121,18 +121,6 @@ input.p-select-label {
margin-right: -1.75rem;
}
.p-select-filter-container {
position: relative;
}
.p-select-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
right: 0.75rem;
color: ${dt('select.filter.icon.color')};
}
.p-select-list-container {
overflow: auto;
}
@ -245,9 +233,7 @@ const classes = {
}
],
header: 'p-select-header',
filterContainer: 'p-select-filter-container',
pcFilter: 'p-select-filter',
filterIcon: 'p-select-filter-icon',
listContainer: 'p-select-list-container',
list: 'p-select-list',
optionGroup: 'p-select-option-group',