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

Fixed #913 - Refactor chain operator

pull/938/head
Cagatay Civici 2021-02-02 16:21:10 +03:00
parent 5d46fb63c0
commit bfb5e58e0d
10 changed files with 143 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/accordion/Accordion.vue
View File

@ -5,8 +5,8 @@
<a role="tab" class="p-accordion-header-link" @click="onTabClick($event, tab, i)" @keydown="onTabKeydown($event, tab, i)" :tabindex="isTabDisabled(tab) ? null : '0'" <a role="tab" class="p-accordion-header-link" @click="onTabClick($event, tab, i)" @keydown="onTabKeydown($event, tab, i)" :tabindex="isTabDisabled(tab) ? null : '0'"
:aria-expanded="isTabActive(i)" :id="getTabAriaId(i) + '_header'" :aria-controls="getTabAriaId(i) + '_content'"> :aria-expanded="isTabActive(i)" :id="getTabAriaId(i) + '_header'" :aria-controls="getTabAriaId(i) + '_content'">
<span :class="getHeaderIcon(i)"></span> <span :class="getHeaderIcon(i)"></span>
<span class="p-accordion-header-text" v-if="tab.props?.header">{{tab.props?.header}}</span> <span class="p-accordion-header-text" v-if="tab.props && tab.props.header">{{tab.props.header}}</span>
<component :is="tab.children.header" v-if="tab.children?.header"></component> <component :is="tab.children.header" v-if="tab.children && tab.children.header"></component>
</a> </a>
</div> </div>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
@ -81,10 +81,10 @@ export default {
return index === this.d_activeIndex; return index === this.d_activeIndex;
}, },
getKey(tab, i) { getKey(tab, i) {
return tab.props?.header ? tab.props.header : i; return (tab.props && tab.props.header) ? tab.props.header : i;
}, },
isTabDisabled(tab) { isTabDisabled(tab) {
return tab.props?.disabled; return tab.props && tab.props.disabled;
}, },
getTabClass(i) { getTabClass(i) {
return ['p-accordion-tab', {'p-accordion-tab-active': this.isTabActive(i)}]; return ['p-accordion-tab', {'p-accordion-tab-active': this.isTabActive(i)}];

37
src/components/datatable/BodyCell.vue
View File

@ -1,20 +1,20 @@
<template> <template>
<td :style="column.props?.bodyStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown"> <td :style="columnProp('bodyStyle')" :class="containerClass" @click="onClick" @keydown="onKeyDown">
<component :is="column.children.body" :data="rowData" :column="column" :index="index" v-if="column.children && column.children.body && !d_editing" /> <component :is="column.children.body" :data="rowData" :column="column" :index="index" v-if="column.children && column.children.body && !d_editing" />
<component :is="column.children.editor" :data="rowData" :column="column" :index="index" v-else-if="column.children && column.children.editor && d_editing" /> <component :is="column.children.editor" :data="rowData" :column="column" :index="index" v-else-if="column.children && column.children.editor && d_editing" />
<template v-else-if="column.props?.selectionMode"> <template v-else-if="columnProp('selectionMode')">
<DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="column.props?.selectionMode === 'single'" /> <DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="column.props.selectionMode === 'single'" />
<DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="column.props?.selectionMode ==='multiple'" /> <DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="column.props.selectionMode ==='multiple'" />
</template> </template>
<template v-else-if="column.props?.rowReorder"> <template v-else-if="columnProp('rowReorder')">
<i :class="['p-datatable-reorderablerow-handle', (column.props?.rowReorderIcon || 'pi pi-bars')]"></i> <i :class="['p-datatable-reorderablerow-handle', (columnProp('rowReorderIcon') || 'pi pi-bars')]"></i>
</template> </template>
<template v-else-if="column.props?.expander"> <template v-else-if="columnProp('expander')">
<button class="p-row-toggler p-link" @click="toggleRow" type="button" v-ripple> <button class="p-row-toggler p-link" @click="toggleRow" type="button" v-ripple>
<span :class="rowTogglerIcon"></span> <span :class="rowTogglerIcon"></span>
</button> </button>
</template> </template>
<template v-else-if="editMode === 'row' && column.props?.rowEditor"> <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
<button class="p-row-editor-init p-link" v-if="!d_editing" @click="onRowEditInit" type="button" v-ripple> <button class="p-row-editor-init p-link" v-if="!d_editing" @click="onRowEditInit" type="button" v-ripple>
<span class="p-row-editor-init-icon pi pi-fw pi-pencil"></span> <span class="p-row-editor-init-icon pi pi-fw pi-pencil"></span>
</button> </button>
@ -92,8 +92,11 @@ export default {
} }
}, },
methods: { methods: {
columnProp(prop) {
return this.column.props ? this.column.props[prop] : null;
},
resolveFieldData() { resolveFieldData() {
return ObjectUtils.resolveFieldData(this.rowData, this.column.props?.field); return ObjectUtils.resolveFieldData(this.rowData, this.columnProp('field'));
}, },
toggleRow(event) { toggleRow(event) {
this.$emit('row-toggle', { this.$emit('row-toggle', {
@ -143,7 +146,7 @@ export default {
if (!this.d_editing) { if (!this.d_editing) {
this.d_editing = true; this.d_editing = true;
this.bindDocumentEditListener(); this.bindDocumentEditListener();
this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index}); this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
} }
} }
}, },
@ -151,7 +154,7 @@ export default {
let completeEvent = { let completeEvent = {
originalEvent: event, originalEvent: event,
data: this.rowData, data: this.rowData,
field: this.column.props?.field, field: this.columnProp('field'),
index: this.index, index: this.index,
type: type, type: type,
defaultPrevented: false, defaultPrevented: false,
@ -175,7 +178,7 @@ export default {
case 27: case 27:
this.switchCellToViewMode(); this.switchCellToViewMode();
this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index}); this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
break; break;
case 9: case 9:
@ -264,19 +267,19 @@ export default {
return (DomHandler.find(this.$el, '.p-invalid').length === 0); return (DomHandler.find(this.$el, '.p-invalid').length === 0);
}, },
onRowEditInit(event) { onRowEditInit(event) {
this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index}); this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
}, },
onRowEditSave(event) { onRowEditSave(event) {
this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index}); this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
}, },
onRowEditCancel(event) { onRowEditCancel(event) {
this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index}); this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
} }
}, },
computed: { computed: {
containerClass() { containerClass() {
return [this.column.props?.bodyClass, { return [this.columnProp('bodyClass'), {
'p-selection-column': this.column.props?.selectionMode != null, 'p-selection-column': this.columnProp('selectionMode') != null,
'p-editable-column': this.isEditable(), 'p-editable-column': this.isEditable(),
'p-cell-editing': this.d_editing 'p-cell-editing': this.d_editing
}]; }];

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

@ -438,7 +438,7 @@ export default {
mounted() { mounted() {
if (this.reorderableColumns) { if (this.reorderableColumns) {
let columnOrder = []; let columnOrder = [];
this.columns.forEach(col => columnOrder.push(col.props?.columnKey||col.props?.field)); this.columns.forEach(col => columnOrder.push(this.columnProp(col, 'columnKey')||this.columnProp(col, 'field')));
this.d_columnOrder = columnOrder; this.d_columnOrder = columnOrder;
} }
}, },
@ -456,6 +456,9 @@ export default {
} }
}, },
methods: { methods: {
columnProp(col, prop) {
return col.props ? col.props[prop] : null;
},
onPage(event) { onPage(event) {
this.d_first = event.first; this.d_first = event.first;
this.d_rows = event.rows; this.d_rows = event.rows;
@ -472,9 +475,9 @@ export default {
const event = e.originalEvent; const event = e.originalEvent;
const column = e.column; const column = e.column;
if (column.props?.sortable) { if (this.columnProp(column, 'sortable')) {
const targetNode = event.target; const targetNode = event.target;
const columnField = column.props?.sortField || column.props?.field; const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title') if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
|| DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) { || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
@ -591,13 +594,13 @@ export default {
for(let j = 0; j < this.columns.length; j++) { for(let j = 0; j < this.columns.length; j++) {
let col = this.columns[j]; let col = this.columns[j];
let columnField = col.props?.filterField || col.props?.field; let columnField = this.columnProp(col, 'filterField') || this.columnProp(col, 'field');
//local //local
if (Object.prototype.hasOwnProperty.call(this.filters, columnField)) { if (Object.prototype.hasOwnProperty.call(this.filters, columnField)) {
let filterValue = this.filters[columnField]; let filterValue = this.filters[columnField];
let dataFieldValue = ObjectUtils.resolveFieldData(data[i], columnField); let dataFieldValue = ObjectUtils.resolveFieldData(data[i], columnField);
let filterConstraint = col.props?.filterMatchMode === 'custom' ? col.props?.filterFunction : FilterUtils[col.props?.filterMatchMode||'startsWith']; let filterConstraint = this.columnProp(col, 'filterMatchMode') === 'custom' ? (col.props && col.props.filterFunction) : FilterUtils[this.columnProp(col, 'filterMatchMode')||'startsWith'];
if (!filterConstraint(dataFieldValue, filterValue, this.filterLocale)) { if (!filterConstraint(dataFieldValue, filterValue, this.filterLocale)) {
localMatch = false; localMatch = false;
} }
@ -607,7 +610,7 @@ export default {
} }
} }
if (!col.props?.excludeGlobalFilter && this.hasGlobalFilter() && !globalMatch) { if (!this.columnProp(col, 'excludeGlobalFilter') && this.hasGlobalFilter() && !globalMatch) {
globalMatch = FilterUtils.contains(ObjectUtils.resolveFieldData(data[i], columnField), this.filters['global'], this.filterLocale); globalMatch = FilterUtils.contains(ObjectUtils.resolveFieldData(data[i], columnField), this.filters['global'], this.filterLocale);
} }
} }
@ -943,13 +946,13 @@ export default {
for (let i = 0; i < this.columns.length; i++) { for (let i = 0; i < this.columns.length; i++) {
let column = this.columns[i]; let column = this.columns[i];
if (column.props?.exportable !== false && column.props?.field) { if (this.columnProp(column, 'exportable') !== false && this.columnProp(column, 'field')) {
if (headerInitiated) if (headerInitiated)
csv += this.csvSeparator; csv += this.csvSeparator;
else else
headerInitiated = true; headerInitiated = true;
csv += '"' + (column.props?.header || column.props?.field) + '"'; csv += '"' + (this.columnProp(column, 'header') || this.columnProp(column, 'field')) + '"';
} }
} }
@ -960,19 +963,19 @@ export default {
let rowInitiated = false; let rowInitiated = false;
for (let i = 0; i < this.columns.length; i++) { for (let i = 0; i < this.columns.length; i++) {
let column = this.columns[i]; let column = this.columns[i];
if (column.props?.exportable !== false && column.props?.field) { if (this.columnProp(column, 'exportable') !== false && this.columnProp(column, 'field')) {
if (rowInitiated) if (rowInitiated)
csv += this.csvSeparator; csv += this.csvSeparator;
else else
rowInitiated = true; rowInitiated = true;
let cellData = ObjectUtils.resolveFieldData(record, column.props?.field); let cellData = ObjectUtils.resolveFieldData(record, this.columnProp(column, 'field'));
if (cellData != null) { if (cellData != null) {
if (this.exportFunction) { if (this.exportFunction) {
cellData = this.exportFunction({ cellData = this.exportFunction({
data: cellData, data: cellData,
field: column.props?.field field: this.columnProp(column, 'field')
}); });
} }
else else
@ -1140,7 +1143,7 @@ export default {
const event = e.originalEvent; const event = e.originalEvent;
const column = e.column; const column = e.column;
if (this.reorderableColumns && column.props?.reorderableColumn !== false) { if (this.reorderableColumns && this.columnProp(column, 'reorderableColumn') !== false) {
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer')) if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer'))
event.currentTarget.draggable = false; event.currentTarget.draggable = false;
else else
@ -1253,7 +1256,7 @@ export default {
if (columns && columns.length) { if (columns && columns.length) {
for (let i = 0; i < columns.length; i++) { for (let i = 0; i < columns.length; i++) {
let column = columns[i]; let column = columns[i];
if (column.props?.columnKey === key || column.props?.field === key) { if (this.columnProp(column, 'columnKey') === key || this.columnProp(column, 'field') === key) {
return column; return column;
} }
} }
@ -1700,7 +1703,7 @@ export default {
let frozenColumns = []; let frozenColumns = [];
for(let col of this.columns) { for(let col of this.columns) {
if(col.props?.frozen) { if(this.columnProp(col, 'frozen')) {
frozenColumns = frozenColumns||[]; frozenColumns = frozenColumns||[];
frozenColumns.push(col); frozenColumns.push(col);
} }
@ -1712,7 +1715,7 @@ export default {
let scrollableColumns = []; let scrollableColumns = [];
for(let col of this.columns) { for(let col of this.columns) {
if(!col.props?.frozen) { if(!this.columnProp(col, 'frozen')) {
scrollableColumns = scrollableColumns||[]; scrollableColumns = scrollableColumns||[];
scrollableColumns.push(col); scrollableColumns.push(col);
} }
@ -1727,7 +1730,7 @@ export default {
const children = this.getChildren(); const children = this.getChildren();
if (children) { if (children) {
for (let child of children) { for (let child of children) {
if (child.type.name === 'columngroup' && child.props?.type === 'header') { if (child.type.name === 'columngroup' && this.columnProp(child, 'type') === 'header') {
return child; return child;
} }
} }
@ -1739,7 +1742,7 @@ export default {
const children = this.getChildren(); const children = this.getChildren();
if (children) { if (children) {
for (let child of children) { for (let child of children) {
if (child.type.name === 'columngroup' && child.props?.type === 'frozenheader') { if (child.type.name === 'columngroup' && this.columnProp(child, 'type') === 'frozenheader') {
return child; return child;
} }
} }
@ -1751,7 +1754,7 @@ export default {
const children = this.getChildren(); const children = this.getChildren();
if (children) { if (children) {
for (let child of children) { for (let child of children) {
if (child.type.name === 'columngroup' && child.props?.type === 'footer') { if (child.type.name === 'columngroup' && this.columnProp(child, 'type') === 'footer') {
return child; return child;
} }
} }
@ -1763,7 +1766,7 @@ export default {
const children = this.getChildren(); const children = this.getChildren();
if (children) { if (children) {
for (let child of children) { for (let child of children) {
if (child.type.name === 'columngroup' && child.props?.type === 'frozenfooter') { if (child.type.name === 'columngroup' && this.columnProp(child, 'type') === 'frozenfooter') {
return child; return child;
} }
} }

13
src/components/datatable/ScrollableView.vue
View File

@ -5,7 +5,7 @@
<table class="p-datatable-scrollable-header-table"> <table class="p-datatable-scrollable-header-table">
<colgroup> <colgroup>
<template v-for="(col,i) of columns"> <template v-for="(col,i) of columns">
<col v-if="shouldRenderCol(col)" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.headerStyle" /> <col v-if="shouldRenderCol(col)" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i" :style="columnProp(col,'headerStyle')" />
</template> </template>
</colgroup> </colgroup>
<slot name="header" :columns="columns" :columnGroup="headerColumnGroup"></slot> <slot name="header" :columns="columns" :columnGroup="headerColumnGroup"></slot>
@ -17,14 +17,14 @@
<table ref="scrollTable" :class="bodyTableClass" :style="bodyTableStyle"> <table ref="scrollTable" :class="bodyTableClass" :style="bodyTableStyle">
<colgroup> <colgroup>
<template v-for="(col,i) of columns"> <template v-for="(col,i) of columns">
<col v-if="shouldRenderCol(col)" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.bodyStyle || col.props?.headerStyle" /> <col v-if="shouldRenderCol(col)" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i" :style="columnProp(col,'bodyStyle') || columnProp(col,'headerStyle')" />
</template> </template>
</colgroup> </colgroup>
<slot name="body" :columns="columns"></slot> <slot name="body" :columns="columns"></slot>
</table> </table>
<table ref="loadingTable" :style="{top:'0', display: 'none'}" class="p-datatable-scrollable-body-table p-datatable-loading-virtual-table p-datatable-virtual-table" v-if="virtualScroll"> <table ref="loadingTable" :style="{top:'0', display: 'none'}" class="p-datatable-scrollable-body-table p-datatable-loading-virtual-table p-datatable-virtual-table" v-if="virtualScroll">
<colgroup> <colgroup>
<col v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.bodyStyle || col.props?.headerStyle" /> <col v-for="(col,i) of columns" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i" :style="columnProp(col,'bodyStyle') || columnProp(col,'headerStyle')" />
</colgroup> </colgroup>
<DTTableLoadingBody :columns="columns" :rows="rows" /> <DTTableLoadingBody :columns="columns" :rows="rows" />
</table> </table>
@ -35,7 +35,7 @@
<table class="p-datatable-scrollable-footer-table"> <table class="p-datatable-scrollable-footer-table">
<colgroup> <colgroup>
<template v-for="(col,i) of columns"> <template v-for="(col,i) of columns">
<col v-if="shouldRenderCol(col)" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.footerStyle || col.props?.headerStyle" /> <col v-if="shouldRenderCol(col)" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i" :style="columnProp(col,'footerStyle') || columnProp(col,'headerStyle')" />
</template> </template>
</colgroup> </colgroup>
<slot name="footer" :columns="columns" :columnGroup="footerColumnGroup"></slot> <slot name="footer" :columns="columns" :columnGroup="footerColumnGroup"></slot>
@ -126,6 +126,9 @@ export default {
} }
}, },
methods: { methods: {
columnProp(col, prop) {
return col.props ? col.props[prop] : null;
},
onHeaderScroll() { onHeaderScroll() {
this.$refs.scrollHeader.scrollLeft = 0; this.$refs.scrollHeader.scrollLeft = 0;
}, },
@ -184,7 +187,7 @@ export default {
}, },
shouldRenderCol(column) { shouldRenderCol(column) {
if (this.rowGroupMode && this.rowGroupMode === 'subheader') { if (this.rowGroupMode && this.rowGroupMode === 'subheader') {
return this.groupRowsBy !== column.props?.field; return this.groupRowsBy !== this.columnProp(column, 'field');
} }
return true; return true;

23
src/components/datatable/TableBody.vue
View File

@ -15,8 +15,8 @@
@click="onRowClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode || contextMenu ? '0' : null" @click="onRowClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode || contextMenu ? '0' : null"
@mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)"> @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
<template v-for="(col,i) of columns"> <template v-for="(col,i) of columns">
<DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :key="col.props?.columnKey||col.props?.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)" <DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
:rowTogglerIcon="col.props?.expander ? rowTogglerIcon(rowData): null" :rowTogglerIcon="columnProp(col,'expanded') ? rowTogglerIcon(rowData): null"
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null" :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null"
:editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)" :editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)"
@radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)" @row-toggle="onRowToggle($event)" @radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)" @row-toggle="onRowToggle($event)"
@ -151,6 +151,9 @@ export default {
} }
}, },
methods: { methods: {
columnProp(col, prop) {
return col.props ? col.props[prop] : null;
},
shouldRenderRowGroupHeader(value, rowData, i) { shouldRenderRowGroupHeader(value, rowData, i) {
let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy); let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
let prevRowData = value[i - 1]; let prevRowData = value[i - 1];
@ -212,14 +215,14 @@ export default {
shouldRenderBodyCell(value, column, i) { shouldRenderBodyCell(value, column, i) {
if (this.rowGroupMode) { if (this.rowGroupMode) {
if (this.rowGroupMode === 'subheader') { if (this.rowGroupMode === 'subheader') {
return this.groupRowsBy !== column.props?.field; return this.groupRowsBy !== this.columnProp(column, 'field');
} }
else if (this.rowGroupMode === 'rowspan') { else if (this.rowGroupMode === 'rowspan') {
if (this.isGrouped(column)) { if (this.isGrouped(column)) {
let prevRowData = value[i - 1]; let prevRowData = value[i - 1];
if (prevRowData) { if (prevRowData) {
let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], column.props?.field); let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], this.columnProp(column, 'field'));
let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, column.props?.field); let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.columnProp(column, 'field'));
return currentRowFieldData !== previousRowFieldData; return currentRowFieldData !== previousRowFieldData;
} }
else { else {
@ -237,7 +240,7 @@ export default {
}, },
calculateRowGroupSize(value, column, index) { calculateRowGroupSize(value, column, index) {
if (this.isGrouped(column)) { if (this.isGrouped(column)) {
let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], column.props?.field); let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], this.columnProp(column, 'field'));
let nextRowFieldData = currentRowFieldData; let nextRowFieldData = currentRowFieldData;
let groupRowSpan = 0; let groupRowSpan = 0;
@ -245,7 +248,7 @@ export default {
groupRowSpan++; groupRowSpan++;
let nextRowData = value[++index]; let nextRowData = value[++index];
if (nextRowData) { if (nextRowData) {
nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, column.props?.field); nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.columnProp(column, 'field'));
} }
else { else {
break; break;
@ -267,11 +270,11 @@ export default {
return ['p-row-toggler-icon pi', icon]; return ['p-row-toggler-icon pi', icon];
}, },
isGrouped(column) { isGrouped(column) {
if (this.groupRowsBy) { if (this.groupRowsBy && this.columnProp(column, 'field')) {
if (Array.isArray(this.groupRowsBy)) if (Array.isArray(this.groupRowsBy))
return this.groupRowsBy.indexOf(column.props?.field) > -1; return this.groupRowsBy.indexOf(column.props.field) > -1;
else else
return this.groupRowsBy === column.props?.field; return this.groupRowsBy === column.props.field;
} }
else { else {
return false; return false;

19
src/components/datatable/TableFooter.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<tfoot class="p-datatable-tfoot" v-if="hasFooter"> <tfoot class="p-datatable-tfoot" v-if="hasFooter">
<tr v-if="!columnGroup"> <tr v-if="!columnGroup">
<td v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.footerStyle" :class="col.props?.footerClass" <td v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'footerStyle')" :class="columnProp(col, 'footerClass')"
:colspan="col.props?.colspan" :rowspan="col.props?.rowspan"> :colspan="columnProp(col, 'colspan')" :rowspan="columnProp(col, 'rowspan')">
<component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer"/> <component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer"/>
{{col.props?.footer}} {{columnProp(col, 'footer')}}
</td> </td>
</tr> </tr>
<template v-else> <template v-else>
<tr v-for="(row,i) of columnGroup.children.default()" :key="i"> <tr v-for="(row,i) of columnGroup.children.default()" :key="i">
<td v-for="(col,i) of row.children.default()" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.footerStyle" :class="col.props?.footerClass" <td v-for="(col,i) of row.children.default()" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'footerStyle')" :class="columnProp(col, 'footerClass')"
:colspan="col.props?.colspan" :rowspan="col.props?.rowspan"> :colspan="columnProp(col, 'colspan')" :rowspan="columnProp(col, 'rowspan')">
<component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer"/> <component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer"/>
{{col.props?.footer}} {{columnProp(col, 'footer')}}
</td> </td>
</tr> </tr>
</template> </template>
@ -31,6 +31,11 @@ export default {
default: null default: null
}, },
}, },
methods: {
columnProp(col, prop) {
return col.props ? col.props[prop] : null;
}
},
computed: { computed: {
hasFooter() { hasFooter() {
let hasFooter = false; let hasFooter = false;
@ -40,7 +45,7 @@ export default {
} }
else if (this.columns) { else if (this.columns) {
for (let col of this.columns) { for (let col of this.columns) {
if (col.props?.footer || (col.children && col.children.footer)) { if (this.columnProp(col, 'footer') || (col.children && col.children.footer)) {
hasFooter = true; hasFooter = true;
break; break;
} }

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

@ -3,41 +3,41 @@
<template v-if="!columnGroup"> <template v-if="!columnGroup">
<tr> <tr>
<template v-for="(col,i) of columns"> <template v-for="(col,i) of columns">
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.props?.field)" :tabindex="col.props?.sortable ? '0' : null" @keydown="onColumnKeyDown($event, col)" <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :tabindex="columnProp(col, 'sortable') ? '0' : null" @keydown="onColumnKeyDown($event, col)"
:key="col.props?.columnKey||col.props?.field||i" :style="col.props?.headerStyle" :class="getColumnHeaderClass(col)" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'headerStyle')" :class="getColumnHeaderClass(col)"
@click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)" @click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
@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="col.props?.colspan" :rowspan="col.props?.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>
<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="col.props?.header">{{col.props?.header}}</span> <span class="p-column-title" v-if="columnProp(col, 'header')">{{columnProp(col, 'header')}}</span>
<span v-if="col.props?.sortable" :class="getSortableColumnIcon(col)"></span> <span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
<span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span> <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props?.selectionMode ==='multiple' && !hasColumnFilter()" /> <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple' && !hasColumnFilter()" />
</th> </th>
</template> </template>
</tr> </tr>
<tr v-if="hasColumnFilter()"> <tr v-if="hasColumnFilter()">
<template v-for="(col,i) of columns"> <template v-for="(col,i) of columns">
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.props?.field)" :key="col.props?.columnKey||col.props?.field||i" <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i"
:class="getFilterColumnHeaderClass(col)" :style="col.props?.filterHeaderStyle"> :class="getFilterColumnHeaderClass(col)" :style="columnProp(col, 'filterHeaderStyle')">
<component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/> <component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/>
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props?.selectionMode ==='multiple'" /> <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode')==='multiple'" />
</th> </th>
</template> </template>
</tr> </tr>
</template> </template>
<template v-else> <template v-else>
<tr v-for="(row,i) of columnGroup.children.default()" :key="i"> <tr v-for="(row,i) of columnGroup.children.default()" :key="i">
<th v-for="(col,i) of row.children.default()" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.headerStyle" :class="getColumnHeaderClass(col)" :tabindex="col.props?.sortable ? '0' : null" <th v-for="(col,i) of row.children.default()" :key="columnProp(col, 'columnKeuy')||columnProp(col, 'field')||i" :style="columnProp(col, 'headerStyle')" :class="getColumnHeaderClass(col)" :tabindex="columnProp(col, 'sortable') ? '0' : null"
@click="onColumnHeaderClick($event, col)" @keydown="onColumnKeyDown($event, col)" @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)" @click="onColumnHeaderClick($event, col)" @keydown="onColumnKeyDown($event, col)" @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
:colspan="col.props?.colspan" :rowspan="col.props?.rowspan" :aria-sort="getAriaSort(col)"> :colspan="columnProp(col, 'colspan')" :rowspan="columnProp(col, 'rowspan')" :aria-sort="getAriaSort(col)">
<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="col.props?.header">{{col.props?.header}}</span> <span class="p-column-title" v-if="columnProp(col, 'header')">{{columnProp(col, 'header')}}</span>
<span v-if="col.props?.sortable" :class="getSortableColumnIcon(col)"></span> <span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
<span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span> <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
<component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/> <component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/>
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props?.selectionMode ==='multiple'" /> <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple'" />
</th> </th>
</tr> </tr>
</template> </template>
@ -98,28 +98,31 @@ export default {
} }
}, },
methods: { methods: {
columnProp(col, prop) {
return col.props ? col.props[prop] : null;
},
isMultiSorted(column) { isMultiSorted(column) {
return column.props?.sortable && this.getMultiSortMetaIndex(column) > -1 return this.columnProp(column, 'sortable') && this.getMultiSortMetaIndex(column) > -1
}, },
isColumnSorted(column) { isColumnSorted(column) {
return this.sortMode === 'single' ? (this.sortField && (this.sortField === column.props?.field || this.sortField === column.props?.sortField)) : this.isMultiSorted(column); return this.sortMode === 'single' ? (this.sortField && (this.sortField === this.columnProp(column, 'field') || this.sortField === this.columnProp(column, 'sortField'))) : this.isMultiSorted(column);
}, },
getColumnHeaderClass(column) { getColumnHeaderClass(column) {
return [column.props?.headerClass, return [this.columnProp(column, 'headerClass'),
{'p-sortable-column': column.props?.sortable}, {'p-sortable-column': this.columnProp(column, 'sortable')},
{'p-resizable-column': this.resizableColumns}, {'p-resizable-column': this.resizableColumns},
{'p-highlight': this.isColumnSorted(column)} {'p-highlight': this.isColumnSorted(column)}
]; ];
}, },
getFilterColumnHeaderClass(column) { getFilterColumnHeaderClass(column) {
return ['p-filter-column', column.props?.filterHeaderClass]; return ['p-filter-column', this.columnProp(column, 'filterHeaderClass')];
}, },
getSortableColumnIcon(column) { getSortableColumnIcon(column) {
let sorted = false; let sorted = false;
let sortOrder = null; let sortOrder = null;
if (this.sortMode === 'single') { if (this.sortMode === 'single') {
sorted = this.sortField && (this.sortField === column.props?.field || this.sortField === column.props?.sortField); sorted = this.sortField && (this.sortField === this.columnProp(column, 'field') || this.sortField === this.columnProp(column, 'sortField'));
sortOrder = sorted ? this.sortOrder: 0; sortOrder = sorted ? this.sortOrder: 0;
} }
else if (this.sortMode === 'multiple') { else if (this.sortMode === 'multiple') {
@ -143,7 +146,7 @@ export default {
for (let i = 0; i < this.multiSortMeta.length; i++) { for (let i = 0; i < this.multiSortMeta.length; i++) {
let meta = this.multiSortMeta[i]; let meta = this.multiSortMeta[i];
if (meta.field === column.props?.field || meta.field === column.props?.sortField) { if (meta.field === this.columnProp(column, 'field') || meta.field === this.columnProp(column, 'sortField')) {
index = i; index = i;
break; break;
} }
@ -181,7 +184,7 @@ export default {
} }
}, },
getAriaSort(column) { getAriaSort(column) {
if (column.props?.sortable) { if (this.columnProp(column, 'sortable')) {
const sortIcon = this.getSortableColumnIcon(column); const sortIcon = this.getSortableColumnIcon(column);
if (sortIcon[1]['pi-sort-amount-down']) if (sortIcon[1]['pi-sort-amount-down'])
return 'descending'; return 'descending';

8
src/components/tabview/TabView.vue
View File

@ -3,8 +3,8 @@
<ul ref="nav" class="p-tabview-nav" role="tablist"> <ul ref="nav" class="p-tabview-nav" role="tablist">
<li role="presentation" v-for="(tab, i) of tabs" :key="getKey(tab,i)" :class="[{'p-highlight': (d_activeIndex === i), 'p-disabled': isTabDisabled(tab)}]"> <li role="presentation" v-for="(tab, i) of tabs" :key="getKey(tab,i)" :class="[{'p-highlight': (d_activeIndex === i), 'p-disabled': isTabDisabled(tab)}]">
<a role="tab" class="p-tabview-nav-link" @click="onTabClick($event, i)" @keydown="onTabKeydown($event, i)" :tabindex="isTabDisabled(tab) ? null : '0'" :aria-selected="d_activeIndex === i" v-ripple> <a role="tab" class="p-tabview-nav-link" @click="onTabClick($event, i)" @keydown="onTabKeydown($event, i)" :tabindex="isTabDisabled(tab) ? null : '0'" :aria-selected="d_activeIndex === i" v-ripple>
<span class="p-tabview-title" v-if="tab.props?.header">{{tab.props?.header}}</span> <span class="p-tabview-title" v-if="tab.props && tab.props.header">{{tab.props.header}}</span>
<component :is="tab.children.header" v-if="tab.children?.header"></component> <component :is="tab.children.header" v-if="tab.children && tab.children.header"></component>
</a> </a>
</li> </li>
<li ref="inkbar" class="p-tabview-ink-bar"></li> <li ref="inkbar" class="p-tabview-ink-bar"></li>
@ -68,10 +68,10 @@ export default {
this.$refs.inkbar.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px'; this.$refs.inkbar.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
}, },
getKey(tab, i) { getKey(tab, i) {
return tab.props?.header ? tab.props.header : i; return (tab.props && tab.props.header) ? tab.props.header : i;
}, },
isTabDisabled(tab) { isTabDisabled(tab) {
return tab.props?.disabled; return (tab.props && tab.props.disabled);
}, },
isTabPanel(child) { isTabPanel(child) {
return child.type.name === 'tabpanel' return child.type.name === 'tabpanel'

53
src/components/treetable/TreeTable.vue
View File

@ -21,26 +21,26 @@
<table ref="table"> <table ref="table">
<thead class="p-treetable-thead"> <thead class="p-treetable-thead">
<tr> <tr>
<th v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)" <th v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'headerStyle')" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
:tabindex="col.props?.sortable ? '0' : null" :aria-sort="getAriaSort(col)" @keydown="onColumnKeyDown($event, col)"> :tabindex="columnProp(col, 'sortable') ? '0' : null" :aria-sort="getAriaSort(col)" @keydown="onColumnKeyDown($event, col)">
<span class="p-column-resizer" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span> <span class="p-column-resizer" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span>
<component :is="col.children?.header" :column="col" /> <component :is="col.children?.header" :column="col" />
<span class="p-column-title" v-if="col.props?.header">{{col.props?.header}}</span> <span class="p-column-title" v-if="columnProp(col, 'header')">{{columnProp(col, 'header')}}</span>
<span v-if="col.props?.sortable" :class="getSortableColumnIcon(col)"></span> <span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
<span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span> <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
</th> </th>
</tr> </tr>
<tr v-if="hasColumnFilter()"> <tr v-if="hasColumnFilter()">
<th v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :class="getFilterColumnHeaderClass(col)" :style="col.props?.filterHeaderStyle"> <th v-for="(col,i) of columns" :key="columnProp(col, 'columnKeuy')||columnProp(col, 'field')||i" :class="getFilterColumnHeaderClass(col)" :style="columnProp(col, 'filterHeaderStyle')">
<component :is="col.children?.filter" :column="col" v-if="col.children?.filter"/> <component :is="col.children?.filter" :column="col" v-if="col.children?.filter"/>
</th> </th>
</tr> </tr>
</thead> </thead>
<tfoot class="p-treetable-tfoot" v-if="hasFooter"> <tfoot class="p-treetable-tfoot" v-if="hasFooter">
<tr> <tr>
<td v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.footerStyle" :class="col.props?.footerClass"> <td v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'footerStyle')" :class="columnProp(col, 'footerClass')">
<component :is="col.children?.footer" :column="col" /> <component :is="col.children?.footer" :column="col" />
{{col.props?.footer}} {{columnProp(col, 'footer')}}
</td> </td>
</tr> </tr>
</tfoot> </tfoot>
@ -249,6 +249,9 @@ export default {
} }
}, },
methods: { methods: {
columnProp(col, prop) {
return col.props ? col.props[prop] : null;
},
onNodeToggle(node) { onNodeToggle(node) {
const key = node.key; const key = node.key;
@ -368,31 +371,31 @@ export default {
this.$emit('update:first', this.d_first); this.$emit('update:first', this.d_first);
}, },
isMultiSorted(column) { isMultiSorted(column) {
return column.props?.sortable && this.getMultiSortMetaIndex(column) > -1 return this.columnProp(column, 'sortable') && this.getMultiSortMetaIndex(column) > -1
}, },
isColumnSorted(column) { isColumnSorted(column) {
if (column.props?.sortable) { if (this.columnProp(column, 'sortable')) {
return this.sortMode === 'single' ? (this.d_sortField === (column.props?.field || column.props?.sortField)) : this.getMultiSortMetaIndex(column) > -1; return this.sortMode === 'single' ? (this.d_sortField === (this.columnProp(column, 'field') || this.columnProp(column, 'sortField'))) : this.getMultiSortMetaIndex(column) > -1;
} }
return false; return false;
}, },
getColumnHeaderClass(column) { getColumnHeaderClass(column) {
return [column.props?.headerClass, return [this.columnProp(column, 'headerClass'),
{'p-sortable-column': column.props?.sortable}, {'p-sortable-column': this.columnProp(column, 'sortable')},
{'p-resizable-column': this.resizableColumns}, {'p-resizable-column': this.resizableColumns},
{'p-highlight': this.isColumnSorted(column)} {'p-highlight': this.isColumnSorted(column)}
]; ];
}, },
getFilterColumnHeaderClass(column) { getFilterColumnHeaderClass(column) {
return ['p-filter-column', column.props?.filterHeaderClass]; return ['p-filter-column', this.columnProp(column, 'filterHeaderClass')];
}, },
getSortableColumnIcon(column) { getSortableColumnIcon(column) {
let sorted = false; let sorted = false;
let sortOrder = null; let sortOrder = null;
if (this.sortMode === 'single') { if (this.sortMode === 'single') {
sorted = this.d_sortField === (column.props?.field || column.props?.sortField); sorted = this.d_sortField === (this.columnProp(column, 'field')|| this.columnProp(column, 'sortField'));
sortOrder = sorted ? this.d_sortOrder: 0; sortOrder = sorted ? this.d_sortOrder: 0;
} }
else if (this.sortMode === 'multiple') { else if (this.sortMode === 'multiple') {
@ -416,7 +419,7 @@ export default {
for (let i = 0; i < this.d_multiSortMeta.length; i++) { for (let i = 0; i < this.d_multiSortMeta.length; i++) {
let meta = this.d_multiSortMeta[i]; let meta = this.d_multiSortMeta[i];
if (meta.field === (column.props?.field || column.props?.sortField)) { if (meta.field === (this.columnProp(column, 'field')|| this.columnProp(column, 'sortField'))) {
index = i; index = i;
break; break;
} }
@ -425,9 +428,9 @@ export default {
return index; return index;
}, },
onColumnHeaderClick(event, column) { onColumnHeaderClick(event, column) {
if (column.props?.sortable) { if (this.columnProp(column, 'sortable')) {
const targetNode = event.target; const targetNode = event.target;
const columnField = column.props?.sortField || column.props?.field; const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title') if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
|| DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) { || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
@ -555,12 +558,12 @@ export default {
for (let j = 0; j < this.columns.length; j++) { for (let j = 0; j < this.columns.length; j++) {
let col = this.columns[j]; let col = this.columns[j];
let filterField = col.props?.field; let filterField = this.columnProp(column, 'field');
//local //local
if (Object.prototype.hasOwnProperty.call(this.filters, col.props?.field)) { if (Object.prototype.hasOwnProperty.call(this.filters, this.columnProp(column, 'field'))) {
let filterMatchMode = col.props?.filterMatchMode || 'startsWith'; let filterMatchMode = this.columnProp(column, 'filterMatchMode') || 'startsWith';
let filterValue = this.filters[col.props?.field]; let filterValue = this.filters[this.columnProp(column, 'field')];
let filterConstraint = FilterUtils[filterMatchMode]; let filterConstraint = FilterUtils[filterMatchMode];
let paramsWithoutNode = {filterField, filterValue, filterConstraint, strict}; let paramsWithoutNode = {filterField, filterValue, filterConstraint, strict};
@ -649,8 +652,8 @@ export default {
if (this.hasFilters()) { if (this.hasFilters()) {
filterMatchModes = {}; filterMatchModes = {};
this.columns.forEach(col => { this.columns.forEach(col => {
if (col.props?.field) { if (this.columnProp(column, 'field')) {
filterMatchModes[col.props?.field] = col.props?.filterMatchMode; filterMatchModes[col.props.field] = this.columnProp(column, 'filterMatchMode');
} }
}); });
} }
@ -754,7 +757,7 @@ export default {
} }
}, },
getAriaSort(column) { getAriaSort(column) {
if (column.props?.sortable) { if (this.columnProp(column, 'sortable')) {
const sortIcon = this.getSortableColumnIcon(column); const sortIcon = this.getSortableColumnIcon(column);
if (sortIcon[1]['pi-sort-amount-down']) if (sortIcon[1]['pi-sort-amount-down'])
return 'descending'; return 'descending';
@ -855,7 +858,7 @@ export default {
let hasFooter = false; let hasFooter = false;
for (let col of this.columns) { for (let col of this.columns) {
if (col.props?.footer || col.children?.footer) { if (this.columnProp(column, 'footer')|| col.children?.footer) {
hasFooter = true; hasFooter = true;
break; break;
} }

11
src/components/treetable/TreeTableRow.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0"> <tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0">
<td v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.bodyStyle" :class="col.props?.bodyClass"> <td v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'bodyStyle')" :class="columnProp(col, 'bodyClass')">
<button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="col.props?.expander" :style="togglerStyle" tabindex="-1" v-ripple> <button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="columnProp(col, 'expander')" :style="togglerStyle" tabindex="-1" v-ripple>
<i :class="togglerIcon"></i> <i :class="togglerIcon"></i>
</button> </button>
<div class="p-checkbox p-treetable-checkbox p-component" @click="toggleCheckbox" v-if="checkboxSelectionMode && col.props?.expander" role="checkbox" :aria-checked="checked"> <div class="p-checkbox p-treetable-checkbox p-component" @click="toggleCheckbox" v-if="checkboxSelectionMode && columnProp(col, 'expander')" role="checkbox" :aria-checked="checked">
<div class="p-hidden-accessible"> <div class="p-hidden-accessible">
<input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" /> <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" />
</div> </div>
@ -13,7 +13,7 @@
</div> </div>
</div> </div>
<component :is="col.children?.body" :node="node" :column="col" v-if="col.children?.body" /> <component :is="col.children?.body" :node="node" :column="col" v-if="col.children?.body" />
<template v-else><span>{{resolveFieldData(node.data, col.props?.field)}}</span></template> <template v-else><span>{{resolveFieldData(node.data, columnProp(col, 'field'))}}</span></template>
</td> </td>
</tr> </tr>
<template v-if="expanded && node.children && node.children.length"> <template v-if="expanded && node.children && node.children.length">
@ -72,6 +72,9 @@ export default {
}, },
nodeTouched: false, nodeTouched: false,
methods: { methods: {
columnProp(col, prop) {
return col.props ? col.props[prop] : null;
},
resolveFieldData(rowData, field) { resolveFieldData(rowData, field) {
return ObjectUtils.resolveFieldData(rowData, field); return ObjectUtils.resolveFieldData(rowData, field);
}, },