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/multiselect/MultiSelect.vue
View file

@ -86,7 +86,7 @@
<component v-else-if="slotProps.checked" :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]" v-bind="getHeaderCheckboxPTOptions('pcHeaderCheckbox.icon')" />
</template>
</Checkbox>
<div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
<IconField :class="cx('pcFilterContainer')" :unstyled="unstyled" :pt="ptm('pcFilterContainer')">
<InputText
ref="filterInput"
:value="filterValue"
@ -107,10 +107,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 v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
{{ filterResultMessageText }}
</span>
@ -206,11 +209,13 @@
import { FilterService } from 'primevue/api';
import Checkbox from 'primevue/checkbox';
import Chip from 'primevue/chip';
import IconField from 'primevue/iconfield';
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';
@ -1109,6 +1114,8 @@ export default {
VirtualScroller,
Portal,
Chip,
IconField,
InputIcon,
TimesIcon,
SearchIcon,
ChevronDownIcon,

16
components/lib/multiselect/style/MultiSelectStyle.js
View file

@ -112,16 +112,11 @@ const theme = ({ dt }) => `
}
.p-multiselect-filter-container {
position: relative;
flex: 1 1 auto;
}
.p-multiselect-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
right: 0.75rem;
color: ${dt('multiselect.filter.icon.color')};
.p-multiselect-list-container {
overflow: auto;
}
.p-multiselect-filter-container .p-inputtext {
@ -129,10 +124,6 @@ const theme = ({ dt }) => `
padding-right: 1.75rem;
}
.p-multiselect-list-container {
overflow: auto;
}
.p-multiselect-list {
margin: 0;
padding: 0;
@ -242,9 +233,8 @@ const classes = {
}
],
header: 'p-multiselect-header',
filterContainer: 'p-multiselect-filter-container',
pcFilterContainer: 'p-multiselect-filter-container',
pcFilter: 'p-multiselect-filter',
filterIcon: 'p-multiselect-filter-icon',
listContainer: 'p-multiselect-list-container',
list: 'p-multiselect-list',
optionGroup: 'p-multiselect-option-group',