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

UI cosmetics to filter demo and better alignment

pull/973/head
Cagatay Civici 2021-02-06 15:21:39 +03:00
parent a981d5504b
commit cc11c9d460
4 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/datatable/ColumnFilter.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<div :class="containerClass"> <div :class="containerClass">
<component v-if="display === 'row'" :is="filterElement" :field="field" /> <div class="p-fluid p-column-filter-element" v-if="display === 'row'" >
<component :is="filterElement" :field="field" />
</div>
<button ref="icon" v-if="showMenuButton" type="button" class="p-column-filter-menu-button p-link" aria-haspopup="true" :aria-expanded="overlayVisible" <button ref="icon" v-if="showMenuButton" type="button" class="p-column-filter-menu-button p-link" aria-haspopup="true" :aria-expanded="overlayVisible"
:class="{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}" :class="{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}"
@click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button> @click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
@ -370,7 +372,7 @@ export default {
computed: { computed: {
containerClass() { containerClass() {
return [ return [
'p-column-filter', { 'p-column-filter p-fluid', {
'p-column-filter-row': this.display === 'row', 'p-column-filter-row': this.display === 'row',
'p-column-filter-menu': this.display === 'menu' 'p-column-filter-menu': this.display === 'menu'
} }

8
src/components/datatable/DataTable.vue
View File

@ -2033,6 +2033,11 @@ export default {
border: 1px solid transparent; border: 1px solid transparent;
} }
.p-column-header-content {
display: flex;
align-items: center;
}
.p-datatable .p-column-resizer-helper { .p-datatable .p-column-resizer-helper {
width: 1px; width: 1px;
position: absolute; position: absolute;
@ -2084,9 +2089,10 @@ export default {
.p-column-filter-menu { .p-column-filter-menu {
display: inline-flex; display: inline-flex;
margin-left: auto;
} }
.p-column-filter-row p-columnfilterformelement { .p-column-filter-row .p-column-filter-element {
flex: 1 1 auto; flex: 1 1 auto;
width: 1%; width: 1%;
} }

2
src/components/datatable/TableHeader.vue
View File

@ -9,6 +9,7 @@
@dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)" @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
:colspan="columnProp(col, 'colspan')" :rowspan="columnProp(col, 'rowspan')" :aria-sort="getAriaSort(col)"> :colspan="columnProp(col, 'colspan')" :rowspan="columnProp(col, 'rowspan')" :aria-sort="getAriaSort(col)">
<span class="p-column-resizer" @mousedown="onColumnResizeStart($event)" v-if="resizableColumns"></span> <span class="p-column-resizer" @mousedown="onColumnResizeStart($event)" v-if="resizableColumns"></span>
<div class="p-column-header-content">
<component :is="col.children.header" :column="col" v-if="col.children && col.children.header"/> <component :is="col.children.header" :column="col" v-if="col.children && col.children.header"/>
<span class="p-column-title" v-if="columnProp(col, 'header')">{{columnProp(col, 'header')}}</span> <span class="p-column-title" v-if="columnProp(col, 'header')">{{columnProp(col, 'header')}}</span>
<span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span> <span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
@ -19,6 +20,7 @@
:filters="filters" @filtermeta-change="$emit('filtermeta-change', $event)" :filters="filters" @filtermeta-change="$emit('filtermeta-change', $event)"
:showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')" :showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
:showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" /> :showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" />
</div>
</th> </th>
</template> </template>
</tr> </tr>

2
src/views/datatable/DataTableFilterDemo.vue
View File

@ -108,7 +108,7 @@
</div> </div>
</template> </template>
</Column> </Column>
<Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 8rem" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false"> <Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 8rem" bodyClass="p-text-center" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
<template #body="slotProps"> <template #body="slotProps">
<span class="p-column-title">Verified</span> <span class="p-column-title">Verified</span>
<i class="pi" :class="{'true-icon pi-check-circle': slotProps.data.verified, 'false-icon pi-times-circle': !slotProps.data.verified}"></i> <i class="pi" :class="{'true-icon pi-check-circle': slotProps.data.verified, 'false-icon pi-times-circle': !slotProps.data.verified}"></i>