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

Refactor #4149 - Column & TreeTable

pull/4153/head
Tuğçe Küçükoğlu 2023-07-17 12:23:09 +03:00
parent b06f90d883
commit ee637daf39
7 changed files with 70 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/lib/column/Column.d.ts vendored
View File

@ -594,6 +594,21 @@ export interface ColumnContext {
* @defaultValue false
*/
disabled: boolean;
/**
* Current sort state of the column as a boolean.
* @defaultValue false
*/
sorted: boolean;
/**
* Current frozen state of the column as a boolean.
* @defaultValue false
*/
frozen: boolean;
/**
* Current resizable state of the column as a boolean.
* @defaultValue false
*/
resizable: boolean;
}
/**

5
components/lib/treetable/BodyCell.vue
View File

@ -113,7 +113,10 @@ export default {
state: this.$data
},
context: {
index: this.index
index: this.index,
selectable: this.$parentInstance.rowHover || this.$parentInstance.rowSelectionMode,
selected: this.$parent.selected,
frozen: this.columnProp('frozen')
}
};

3
components/lib/treetable/FooterCell.vue
View File

@ -51,7 +51,8 @@ export default {
state: this.$data
},
context: {
index: this.index
index: this.index,
frozen: this.columnProp('frozen')
}
};

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

@ -17,7 +17,7 @@
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPT('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" data-pc-section="sorticon" :class="cx('sortIcon')" />
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" data-pc-section="sorticon" :class="cx('sortIcon')" v-bind="getColumnPT('sortIcon')" />
</span>
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
</th>
@ -93,7 +93,10 @@ export default {
state: this.$data
},
context: {
index: this.index
index: this.index,
sorted: this.isColumnSorted(),
frozen: this.columnProp('frozen'),
resizable: this.resizableColumns
}
};

34
components/lib/treetable/TreeTable.d.ts vendored
View File

@ -23,6 +23,7 @@ export interface TreeTablePassThroughMethodOptions {
instance: any;
props: TreeTableProps;
state: TreeTableState;
context: TreeTableContext;
}
/**
@ -213,14 +214,6 @@ export interface TreeTablePassThroughOptions {
* Uses to pass attributes to the header row's DOM element.
*/
headerRow?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the header filter row's DOM element.
*/
headerFilterRow?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the header filter cell's DOM element.
*/
headerFilterCell?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the tbody's DOM element.
*/
@ -330,6 +323,31 @@ export interface TreeTableState {
d_editing: boolean;
}
/**
* Defines current options in TreeTable component.
*/
export interface TreeTableContext {
/**
* Current index state of the item.
*/
index: number;
/**
* Current frozen state of the row as a boolean.
* @defaultValue false
*/
frozen: boolean;
/**
* Current selectable state of the row as a boolean.
* @defaultValue false
*/
selectable: boolean;
/**
* Current selected state of the row as a boolean.
* @defaultValue false
*/
selected: boolean;
}
/**
* Defines valid properties in TreeTable component.
*/

11
components/lib/treetable/TreeTable.vue
View File

@ -65,9 +65,9 @@
></TTHeaderCell>
</template>
</tr>
<tr v-if="hasColumnFilter()" v-bind="ptm('headerFilterRow')">
<tr v-if="hasColumnFilter()" v-bind="ptm('headerRow')">
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
<th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'), columnProp(col, 'filterHeaderStyle')]" v-bind="ptm('headerFilterCell')">
<th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'), columnProp(col, 'filterHeaderStyle')]" v-bind="ptm('headerCell', ptHeaderCellOptions(col))">
<component v-if="col.children && col.children.filter" :is="col.children.filter" :column="col" :index="i" />
</th>
</template>
@ -231,6 +231,13 @@ export default {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
},
ptHeaderCellOptions(column) {
return {
context: {
frozen: this.columnProp(column, 'frozen')
}
};
},
onNodeToggle(node) {
const key = node.key;

10
components/lib/treetable/TreeTableRow.vue
View File

@ -14,7 +14,7 @@
@click="onClick"
@keydown="onKeyDown"
@touchend="onTouchEnd"
v-bind="ptm('row')"
v-bind="ptm('row', ptmOptions)"
:data-p-highlight="selected"
>
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
@ -413,6 +413,14 @@ export default {
},
getAriaSelected() {
return this.selectionMode === 'single' || this.selectionMode === 'multiple' ? this.selected : null;
},
ptmOptions() {
return {
context: {
selectable: this.$parentInstance.rowHover || this.$parentInstance.rowSelectionMode,
selected: this.selected
}
};
}
},
components: {