vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Use IconField and InputIcon for filter inputs

pull/5701/head
tugcekucukoglu 2024-05-07 18:47:11 +03:00
parent a547ed4681
commit 1e3fcfca59
16 changed files with 52 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/lib/listbox/Listbox.vue
View File

@ -15,7 +15,7 @@
<slot name="header" :value="modelValue" :options="visibleOptions"></slot>
</div>
<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
v-model="filterValue"
type="text"
@ -34,11 +34,13 @@
@keydown="onFilterKeyDown"
: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>
@ -128,7 +130,9 @@
<script>
import { FilterService } from 'primevue/api';
import IconField from 'primevue/iconfield';
import SearchIcon from 'primevue/icons/search';
import InputIcon from 'primevue/inputicon';
import InputText from 'primevue/inputtext';
import Ripple from 'primevue/ripple';
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
@ -748,6 +752,8 @@ export default {
components: {
InputText,
VirtualScroller,
InputIcon,
IconField,
SearchIcon
}
};

14
components/lib/listbox/style/ListboxStyle.js
View File

@ -32,18 +32,6 @@ const theme = ({ dt }) => `
padding: ${dt('listbox.header.padding')};
}
.p-listbox-filter-container {
position: relative;
}
.p-listbox-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
right: 0.75rem;
color: ${dt('listbox.filter.icon.color')};
}
.p-listbox-filter {
width: 100%;
padding-right: 1.75rem;
@ -117,9 +105,7 @@ const classes = {
}
],
header: 'p-listbox-header',
filterContainer: 'p-listbox-filter-container',
pcFilter: 'p-listbox-filter',
filterIcon: 'p-listbox-filter-icon',
listContainer: 'p-listbox-list-container',
list: 'p-listbox-list',
optionGroup: 'p-listbox-option-group',

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',

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',

3
components/lib/themes/aura/listbox/index.js
View File

@ -41,8 +41,5 @@ export default {
color: '{list.option.group.color}',
fontWeight: '{list.option.group.font.weight}',
padding: '{list.option.group.padding}'
},
filterIcon: {
color: '{form.field.icon.color}'
}
};

3
components/lib/themes/aura/multiselect/index.js
View File

@ -33,8 +33,5 @@ export default {
optionGroup: {
background: '{list.option.group.background}',
color: '{list.option.group.color}'
},
filterIcon: {
color: '{form.field.icon.color}'
}
};

3
components/lib/themes/aura/select/index.js
View File

@ -34,9 +34,6 @@ export default {
background: '{list.option.group.background}',
color: '{list.option.group.color}'
},
filterIcon: {
color: '{form.field.icon.color}'
},
checkmark: {
color: '{list.option.color}'
}

3
components/lib/themes/aura/tree/index.js
View File

@ -17,8 +17,5 @@ export default {
highlightHoverBackground: '{content.background}',
color: '{text.muted.color}',
hoverColor: '{text.hover.muted.color}'
},
filterIcon: {
color: '{surface.400}'
}
};

3
components/lib/themes/lara/listbox/index.js
View File

@ -41,8 +41,5 @@ export default {
color: '{list.option.group.color}',
fontWeight: '{list.option.group.font.weight}',
padding: '{list.option.group.padding}'
},
filterIcon: {
color: '{form.field.icon.color}'
}
};

3
components/lib/themes/lara/multiselect/index.js
View File

@ -33,8 +33,5 @@ export default {
optionGroup: {
background: '{list.option.group.background}',
color: '{list.option.group.color}'
},
filterIcon: {
color: '{form.field.icon.color}'
}
};

3
components/lib/themes/lara/select/index.js
View File

@ -34,9 +34,6 @@ export default {
background: '{list.option.group.background}',
color: '{list.option.group.color}'
},
filterIcon: {
color: '{form.field.icon.color}'
},
checkmark: {
color: '{list.option.color}'
}

3
components/lib/themes/lara/tree/index.js
View File

@ -17,8 +17,5 @@ export default {
highlightHoverBackground: '{content.background}',
color: '{text.muted.color}',
hoverColor: '{text.hover.muted.color}'
},
filterIcon: {
color: '{surface.400}'
}
};

20
components/lib/tree/Tree.vue
View File

@ -8,13 +8,15 @@
</slot>
</div>
</template>
<div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
<InputText v-model="filterValue" autocomplete="off" :class="cx('pcFilterInput')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('pcFilterInput')" />
<!--TODO: searchicon deprecated since v4.0-->
<slot :name="$slots.filtericon ? 'filtericon' : 'searchicon'" :class="cx('filterIcon')">
<SearchIcon :class="cx('filterIcon')" v-bind="ptm('filterIcon')" />
</slot>
</div>
<IconField v-if="filter" :unstyled="unstyled" v-bind="ptm('pcFilterContainer')">
<InputText v-model="filterValue" autocomplete="off" :class="cx('pcFilterInput')" :placeholder="filterPlaceholder" :unstyled="unstyled" @keydown="onFilterKeydown" v-bind="ptm('pcFilterInput')" />
<InputIcon :unstyled="unstyled" v-bind="ptm('pcFilterIconContainer')">
<!--TODO: searchicon deprecated since v4.0-->
<slot :name="$slots.filtericon ? 'filtericon' : 'searchicon'" :class="cx('filterIcon')">
<SearchIcon :class="cx('filterIcon')" v-bind="ptm('filterIcon')" />
</slot>
</InputIcon>
</IconField>
<div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
<ul :class="cx('rootChildren')" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('rootChildren')">
<TreeNode
@ -40,8 +42,10 @@
</template>
<script>
import IconField from 'primevue/iconfield';
import SearchIcon from 'primevue/icons/search';
import SpinnerIcon from 'primevue/icons/spinner';
import InputIcon from 'primevue/inputicon';
import InputText from 'primevue/inputtext';
import { ObjectUtils } from 'primevue/utils';
import BaseTree from './BaseTree.vue';
@ -244,6 +248,8 @@ export default {
components: {
TreeNode,
InputText,
InputIcon,
IconField,
SearchIcon,
SpinnerIcon
}

17
components/lib/tree/style/TreeStyle.js
View File

@ -133,21 +133,6 @@ const theme = ({ dt }) => `
padding-right: 1.75rem;
}
.p-tree-filter-container {
position: relative;
display: block;
width: 100%;
margin-bottom: 0.5rem;
}
.p-tree-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
right: 0.75rem;
color: ${dt('tree.filter.icon.color')};
}
.p-tree-loading {
position: relative;
min-height: 4rem;
@ -190,9 +175,7 @@ const classes = {
],
mask: 'p-tree-mask p-component-overlay',
loadingIcon: 'p-tree-loading-icon',
filterContainer: 'p-tree-filter-container',
pcFilterInput: 'p-tree-filter-input',
filterIcon: 'p-tree-filter-icon',
wrapper: 'p-tree-root', //TODO: discuss
rootChildren: 'p-tree-root-children',
node: ({ instance }) => ['p-tree-node', { 'p-tree-node-leaf': instance.leaf }],