mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Fixed #4646 - Add custom wrapper support for helper components
This commit is contained in:
mertsincan
parent
7618f8ba7a
commit
f16bd6ab2e
14 changed files with 196 additions and 157 deletions
|
|
@ -283,7 +283,7 @@ import ArrowDownIcon from 'primevue/icons/arrowdown';
|
|||
import ArrowUpIcon from 'primevue/icons/arrowup';
|
||||
import SpinnerIcon from 'primevue/icons/spinner';
|
||||
import Paginator from 'primevue/paginator';
|
||||
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
|
||||
import { DomHandler, HelperSet, ObjectUtils, UniqueComponentId } from 'primevue/utils';
|
||||
import VirtualScroller from 'primevue/virtualscroller';
|
||||
import BaseDataTable from './BaseDataTable.vue';
|
||||
import TableBody from './TableBody.vue';
|
||||
|
|
@ -333,6 +333,12 @@ export default {
|
|||
'row-edit-save',
|
||||
'row-edit-cancel'
|
||||
],
|
||||
provide() {
|
||||
return {
|
||||
$columns: this.d_columns,
|
||||
$columnGroups: this.d_columnGroups
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
d_first: this.first,
|
||||
|
|
@ -346,7 +352,9 @@ export default {
|
|||
d_columnOrder: null,
|
||||
d_editingRowKeys: null,
|
||||
d_editingMeta: {},
|
||||
d_filters: this.cloneFilters(this.filters)
|
||||
d_filters: this.cloneFilters(this.filters),
|
||||
d_columns: new HelperSet({ type: 'Column' }),
|
||||
d_columnGroups: new HelperSet({ type: 'ColumnGroup' })
|
||||
};
|
||||
},
|
||||
rowTouched: false,
|
||||
|
|
@ -430,6 +438,9 @@ export default {
|
|||
this.unbindColumnResizeEvents();
|
||||
this.destroyStyleElement();
|
||||
this.destroyResponsiveStyle();
|
||||
|
||||
this.d_columns.clear();
|
||||
this.d_columnGroups.clear();
|
||||
},
|
||||
updated() {
|
||||
if (this.isStateful()) {
|
||||
|
|
@ -1852,9 +1863,6 @@ export default {
|
|||
hasGlobalFilter() {
|
||||
return this.filters && Object.prototype.hasOwnProperty.call(this.filters, 'global');
|
||||
},
|
||||
getChildren() {
|
||||
return this.$slots.default ? this.$slots.default() : null;
|
||||
},
|
||||
onFilterChange(filters) {
|
||||
this.d_filters = filters;
|
||||
},
|
||||
|
|
@ -1952,23 +1960,6 @@ export default {
|
|||
this.styleElement = null;
|
||||
}
|
||||
},
|
||||
recursiveGetChildren(children, results) {
|
||||
if (!results) {
|
||||
results = [];
|
||||
}
|
||||
|
||||
if (children && children.length) {
|
||||
children.forEach((child) => {
|
||||
if (child.children instanceof Array) {
|
||||
results.concat(this.recursiveGetChildren(child.children, results));
|
||||
} else if (child.type.name == 'Column') {
|
||||
results.push(child);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return results;
|
||||
},
|
||||
dataToRender(data) {
|
||||
const _data = data || this.processedData;
|
||||
|
||||
|
|
@ -1989,13 +1980,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
columns() {
|
||||
let children = this.getChildren();
|
||||
|
||||
if (!children) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cols = this.recursiveGetChildren(children, []);
|
||||
const cols = this.d_columns.get(this);
|
||||
|
||||
if (this.reorderableColumns && this.d_columnOrder) {
|
||||
let orderedColumns = [];
|
||||
|
|
@ -2013,31 +1998,14 @@ export default {
|
|||
|
||||
return cols;
|
||||
},
|
||||
columnGroups() {
|
||||
return this.d_columnGroups.get(this);
|
||||
},
|
||||
headerColumnGroup() {
|
||||
const children = this.getChildren();
|
||||
|
||||
if (children) {
|
||||
for (let child of children) {
|
||||
if (child.type.name === 'ColumnGroup' && this.columnProp(child, 'type') === 'header') {
|
||||
return child;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
return this.columnGroups?.find((group) => this.columnProp(group, 'type') === 'header');
|
||||
},
|
||||
footerColumnGroup() {
|
||||
const children = this.getChildren();
|
||||
|
||||
if (children) {
|
||||
for (let child of children) {
|
||||
if (child.type.name === 'ColumnGroup' && this.columnProp(child, 'type') === 'footer') {
|
||||
return child;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
return this.columnGroups?.find((group) => this.columnProp(group, 'type') === 'footer');
|
||||
},
|
||||
hasFilters() {
|
||||
return this.filters && Object.keys(this.filters).length > 0 && this.filters.constructor === Object;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
import { HelperSet, ObjectUtils } from 'primevue/utils';
|
||||
import { mergeProps } from 'vue';
|
||||
import FooterCell from './FooterCell.vue';
|
||||
|
||||
|
|
@ -35,6 +35,22 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
$rows: this.d_footerRows,
|
||||
$columns: this.d_footerColumns
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
d_footerRows: new HelperSet({ type: 'Row' }),
|
||||
d_footerColumns: new HelperSet({ type: 'Column' })
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.d_footerRows.clear();
|
||||
this.d_footerColumns.clear();
|
||||
},
|
||||
methods: {
|
||||
columnProp(col, prop) {
|
||||
return ObjectUtils.getVNodeProp(col, prop);
|
||||
|
|
@ -77,33 +93,10 @@ export default {
|
|||
return row.props && row.props.pt ? row.props.pt : undefined; //@todo
|
||||
},
|
||||
getFooterRows() {
|
||||
let rows = [];
|
||||
|
||||
let columnGroup = this.columnGroup;
|
||||
|
||||
if (columnGroup.children && columnGroup.children.default) {
|
||||
for (let child of columnGroup.children.default()) {
|
||||
if (child.type.name === 'Row') {
|
||||
rows.push(child);
|
||||
} else if (child.children && child.children instanceof Array) {
|
||||
rows = child.children;
|
||||
}
|
||||
}
|
||||
|
||||
return rows;
|
||||
}
|
||||
return this.d_footerRows?.get(this.columnGroup, this.columnGroup.children);
|
||||
},
|
||||
getFooterColumns(row) {
|
||||
let cols = [];
|
||||
|
||||
if (row.children && row.children.default) {
|
||||
row.children.default().forEach((child) => {
|
||||
if (child.children && child.children instanceof Array) cols = [...cols, ...child.children];
|
||||
else if (child.type.name === 'Column') cols.push(child);
|
||||
});
|
||||
|
||||
return cols;
|
||||
}
|
||||
return this.d_footerColumns?.get(row, row.children);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@
|
|||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
import { HelperSet, ObjectUtils } from 'primevue/utils';
|
||||
import { mergeProps } from 'vue';
|
||||
import ColumnFilter from './ColumnFilter.vue';
|
||||
import HeaderCell from './HeaderCell.vue';
|
||||
|
|
@ -226,6 +226,22 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
$rows: this.d_headerRows,
|
||||
$columns: this.d_headerColumns
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
d_headerRows: new HelperSet({ type: 'Row' }),
|
||||
d_headerColumns: new HelperSet({ type: 'Column' })
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.d_headerRows.clear();
|
||||
this.d_headerColumns.clear();
|
||||
},
|
||||
methods: {
|
||||
columnProp(col, prop) {
|
||||
return ObjectUtils.getVNodeProp(col, prop);
|
||||
|
|
@ -292,33 +308,10 @@ export default {
|
|||
return [this.columnProp(column, 'filterHeaderStyle'), this.columnProp(column, 'style')];
|
||||
},
|
||||
getHeaderRows() {
|
||||
let rows = [];
|
||||
|
||||
let columnGroup = this.columnGroup;
|
||||
|
||||
if (columnGroup.children && columnGroup.children.default) {
|
||||
for (let child of columnGroup.children.default()) {
|
||||
if (child.type.name === 'Row') {
|
||||
rows.push(child);
|
||||
} else if (child.children && child.children instanceof Array) {
|
||||
rows = child.children;
|
||||
}
|
||||
}
|
||||
|
||||
return rows;
|
||||
}
|
||||
return this.d_headerRows?.get(this.columnGroup, this.columnGroup.children);
|
||||
},
|
||||
getHeaderColumns(row) {
|
||||
let cols = [];
|
||||
|
||||
if (row.children && row.children.default) {
|
||||
row.children.default().forEach((child) => {
|
||||
if (child.children && child.children instanceof Array) cols = [...cols, ...child.children];
|
||||
else if (child.type.name === 'Column') cols.push(child);
|
||||
});
|
||||
|
||||
return cols;
|
||||
}
|
||||
return this.d_headerColumns?.get(row, row.children);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue