vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 01:12:37 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3983 - For TreeTable

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-06-05 10:34:19 +03:00
parent 78ca522d92
commit 9bb203993a
6 changed files with 489 additions and 425 deletions
Download patch file Download diff file Expand all files Collapse all files

27
components/lib/treetable/HeaderCell.vue
View file

@ -1,21 +1,25 @@
<template>
<th
:style="[containerStyle]"
:class="containerClass"
:style="[containerStyle]"
@click="onClick"
@keydown="onKeyDown"
:tabindex="columnProp('sortable') ? '0' : null"
:aria-sort="ariaSort"
role="columnheader"
v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }"
:data-p-sortable-column="columnProp('sortable')"
:data-p-resizable-column="resizableColumns"
:data-p-highlight="isColumnSorted()"
:data-p-frozen-column="columnProp('frozen')"
>
<span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" class="p-column-title" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="getColumnPTOptions('sort')">
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" class="p-sortable-column-icon" />
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" />
</span>
<span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="getColumnPTOptions('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPTOptions('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
</th>
</template>
@ -125,7 +129,7 @@ export default {
this.$emit('column-click', { originalEvent: event, column: this.column });
},
onKeyDown(event) {
if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
this.$emit('column-click', { originalEvent: event, column: this.column });
event.preventDefault();
@ -157,16 +161,7 @@ export default {
},
computed: {
containerClass() {
return [
this.columnProp('headerClass'),
this.columnProp('class'),
{
'p-sortable-column': this.columnProp('sortable'),
'p-resizable-column': this.resizableColumns,
'p-highlight': this.isColumnSorted(),
'p-frozen-column': this.columnProp('frozen')
}
];
return [this.columnProp('headerClass'), this.columnProp('class'), this.cx('headerCell')];
},
containerStyle() {
let headerStyle = this.columnProp('headerStyle');