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

Fixed sort column styling on Table and TreeTable

pull/5756/head
Cagatay Civici 2024-05-13 18:54:30 +03:00
parent 1b2aaa9736
commit 00b90f8d7d
7 changed files with 102 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/datatable/HeaderCell.vue
View File

@ -29,7 +29,7 @@
<span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" />
</span>
<Badge v-if="isMultiSorted()" :class="cx('pcSortBadge')" v-bind="getColumnPT('pcSortBadge')" :value="getBadgeValue()" />
<Badge v-if="isMultiSorted()" :class="cx('pcSortBadge')" v-bind="getColumnPT('pcSortBadge')" :value="getBadgeValue()" size="small" />
<DTHeaderCheckbox
v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
:checked="allRowsSelected"

101
components/lib/datatable/style/DataTableStyle.js
View File

@ -10,58 +10,6 @@ const theme = ({ dt }) => `
width: 100%;
}
.p-datatable-sortable-column {
cursor: pointer;
user-select: none;
outline-color: transparent;
}
.p-datatable-column-title,
.p-datatable-sort-icon,
.p-datatable-sort-badge {
vertical-align: middle;
}
.p-datatable-sort-icon {
color: ${dt('datatable.sort.icon.color')};
transition: color ${dt('transition.duration')};
}
.p-datatable-sort-badge.p-badge {
display: inline-flex;
align-items: center;
height: 1rem;
min-width: 1rem;
line-height: 1rem;
}
.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
background: ${dt('datatable.header.cell.hover.background')};
color: ${dt('datatable.header.cell.hover.color')};
}
.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon {
color: ${dt('datatable.sort.icon.hover.color')};
}
.p-datatable-column-sorted {
background: ${dt('datatable.header.cell.selected.background')};
color: ${dt('datatable.header.cell.selected.color')};
}
.p-datatable-column-sorted .p-datatable-sort-icon {
color: ${dt('datatable.header.cell.selected.color')};
}
.p-datatable-sortable-column:focus-visible {
box-shadow: ${dt('datatable.header.cell.focus.ring.shadow')};
outline: ${dt('datatable.header.cell.focus.ring.width')} ${dt('datatable.header.cell.focus.ring.style')} ${dt('datatable.header.cell.focus.ring.color')};
outline-offset: ${dt('datatable.header.cell.focus.ring.offset')};
}
.p-datatable-hoverable .p-datatable-selectable-row {
cursor: pointer;
}
.p-datatable-scrollable > .p-datatable-table-container {
position: relative;
@ -341,7 +289,7 @@ const theme = ({ dt }) => `
font-weight: ${dt('datatable.footer.font.weight')};
}
.p-datatable-thead > tr > th {
.p-datatable-header-cell {
text-align: ${dt('datatable.header.cell.text.align')};
padding: ${dt('datatable.header.cell.padding')};
background: ${dt('datatable.header.cell.background')};
@ -404,6 +352,51 @@ const theme = ({ dt }) => `
background: ${dt('datatable.footer.cell.background')};
}
.p-datatable-sortable-column {
cursor: pointer;
user-select: none;
outline-color: transparent;
}
.p-datatable-column-title,
.p-datatable-sort-icon,
.p-datatable-sort-badge {
vertical-align: middle;
}
.p-datatable-sort-icon {
color: ${dt('datatable.sort.icon.color')};
transition: color ${dt('transition.duration')};
}
.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
background: ${dt('datatable.header.cell.hover.background')};
color: ${dt('datatable.header.cell.hover.color')};
}
.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon {
color: ${dt('datatable.sort.icon.hover.color')};
}
.p-datatable-column-sorted {
background: ${dt('datatable.header.cell.selected.background')};
color: ${dt('datatable.header.cell.selected.color')};
}
.p-datatable-column-sorted .p-datatable-sort-icon {
color: ${dt('datatable.header.cell.selected.color')};
}
.p-datatable-sortable-column:focus-visible {
box-shadow: ${dt('datatable.header.cell.focus.ring.shadow')};
outline: ${dt('datatable.header.cell.focus.ring.width')} ${dt('datatable.header.cell.focus.ring.style')} ${dt('datatable.header.cell.focus.ring.color')};
outline-offset: ${dt('datatable.header.cell.focus.ring.offset')};
}
.p-datatable-hoverable .p-datatable-selectable-row {
cursor: pointer;
}
.p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
box-shadow: inset 0 2px 0 0 ${dt('datatable.drop.point.color')};
}
@ -606,11 +599,13 @@ const classes = {
headerCell: ({ instance, props, column }) =>
column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== instance.columnProp(column, 'field'))
? [
'p-datatable-header-cell',
{
'p-datatable-frozen-column': instance.columnProp(column, 'frozen')
}
]
: [
'p-datatable-header-cell',
{
'p-datatable-sortable-column': instance.columnProp('sortable'),
'p-datatable-resizable-column': instance.resizableColumns,

2
components/lib/themes/aura/datatable/index.js
View File

@ -18,7 +18,7 @@ export default {
gap: '0.5rem',
padding: '0.75rem 1rem',
fontWeight: '600',
align: 'left',
textAlign: 'left',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',

2
components/lib/themes/lara/datatable/index.js
View File

@ -13,7 +13,7 @@ export default {
gap: '0.5rem',
padding: '0.75rem 1rem',
fontWeight: '700',
align: 'left',
textAlign: 'left',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',

2
components/lib/themes/nora/datatable/index.js
View File

@ -18,7 +18,7 @@ export default {
gap: '0.5rem',
padding: '0.75rem 1rem',
fontWeight: '600',
align: 'left',
textAlign: 'left',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',

2
components/lib/treetable/HeaderCell.vue
View File

@ -20,7 +20,7 @@
<span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sortIcon')" />
</span>
<Badge v-if="isMultiSorted()" :class="cx('pcSortBadge')" v-bind="getColumnPT('pcSortBadge')" :value="getMultiSortMetaIndex() + 1" />
<Badge v-if="isMultiSorted()" :class="cx('pcSortBadge')" v-bind="getColumnPT('pcSortBadge')" :value="getMultiSortMetaIndex() + 1" size="small" />
</div>
</th>
</template>

104
components/lib/treetable/style/TreeTableStyle.js
View File

@ -10,59 +10,6 @@ const theme = ({ dt }) => `
width: 100%;
}
.p-treetable-sortable-column {
cursor: pointer;
user-select: none;
outline-color: transparent;
}
.p-treetable-column-title,
.p-treetable-sort-icon,
.p-treetable-sort-badge {
vertical-align: middle;
}
.p-treetable-sort-icon {
color: ${dt('treetable.sort.icon.color')};
transition: color ${dt('transition.duration')};
}
.p-treetable-sort-badge.p-badge {
display: inline-flex;
align-items: center;
height: 1rem;
min-width: 1rem;
line-height: 1rem;
}
.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover {
background: ${dt('treetable.header.cell.hover.background')};
color: ${dt('treetable.header.cell.hover.color')};
}
.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon {
color: ${dt('treetable.sort.icon.hover.color')};
}
.p-treetable-column-sorted {
background: ${dt('treetable.header.cell.selected.background')};
color: ${dt('treetable.header.cell.selected.color')};
}
.p-treetable-column-sorted .p-treetable-sort-icon {
color: ${dt('treetable.header.cell.selected.color')};
}
.p-treetable-sortable-column:focus-visible {
box-shadow: ${dt('treetable.header.cell.focus.ring.shadow')};
outline: ${dt('treetable.header.cell.focus.ring.width')} ${dt('treetable.header.cell.focus.ring.style')} ${dt('treetable.header.cell.focus.ring.color')};
outline-offset: ${dt('treetable.header.cell.focus.ring.offset')};
}
.p-treetable-hoverable .p-treetable-selectable-row {
cursor: pointer;
}
.p-treetable-scrollable > .p-treetable-table-container {
position: relative;
}
@ -200,7 +147,7 @@ const theme = ({ dt }) => `
font-weight: ${dt('treetable.footer.font.weight')};
}
.p-treetable-thead > tr > th {
.p-treetable-header-cell {
text-align: ${dt('treetable.header.cell.text.align')};
padding: ${dt('treetable.header.cell.padding')};
background: ${dt('treetable.header.cell.background')};
@ -263,6 +210,52 @@ const theme = ({ dt }) => `
background: ${dt('treetable.footer.cell.background')};
}
.p-treetable-sortable-column {
cursor: pointer;
user-select: none;
outline-color: transparent;
}
.p-treetable-column-title,
.p-treetable-sort-icon,
.p-treetable-sort-badge {
vertical-align: middle;
}
.p-treetable-sort-icon {
color: ${dt('treetable.sort.icon.color')};
transition: color ${dt('transition.duration')};
}
.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover {
background: ${dt('treetable.header.cell.hover.background')};
color: ${dt('treetable.header.cell.hover.color')};
}
.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon {
color: ${dt('treetable.sort.icon.hover.color')};
}
.p-treetable-column-sorted {
background: ${dt('treetable.header.cell.selected.background')};
color: ${dt('treetable.header.cell.selected.color')};
}
.p-treetable-column-sorted .p-treetable-sort-icon {
color: ${dt('treetable.header.cell.selected.color')};
}
.p-treetable-sortable-column:focus-visible {
box-shadow: ${dt('treetable.header.cell.focus.ring.shadow')};
outline: ${dt('treetable.header.cell.focus.ring.width')} ${dt('treetable.header.cell.focus.ring.style')} ${dt('treetable.header.cell.focus.ring.color')};
outline-offset: ${dt('treetable.header.cell.focus.ring.offset')};
}
.p-treetable-hoverable .p-treetable-selectable-row {
cursor: pointer;
}
.p-treetable-loading-icon {
font-size: ${dt('treetable.loading.icon.size')};
width: ${dt('treetable.loading.icon.size')};
@ -452,10 +445,11 @@ const classes = {
],
thead: 'p-treetable-thead',
headerCell: ({ instance, props, context }) => [
'p-treetable-header-cell',
{
'p-treetable-sortable-column': instance.columnProp('sortable'),
'p-treetable-resizable-column': props.resizableColumns,
'p-treetable-column-sorted': context?.sorted,
'p-treetable-column-sorted': instance.isColumnSorted(),
'p-treetable-frozen-column': instance.columnProp('frozen')
}
],