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

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 }],