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

Refactor #3924 - For ColumnGroup & Row

pull/3949/head
Tuğçe Küçükoğlu 2023-05-10 14:39:25 +03:00
parent 05cb0588da
commit a52acf2a32
9 changed files with 159 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
api-generator/components/columngroup.js
View File

@ -1,7 +1,23 @@
const ColumnGroupProps = [
{
name: 'type',
type: 'string',
default: 'null',
description: 'Defines the type of the group.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
module.exports = {
columngroup: {
name: 'ColumnGroup',
description: 'Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns',
'doc-url': 'datatable'
'doc-url': 'datatable',
props: ColumnGroupProps
}
};

18
api-generator/components/row.js
View File

@ -1,7 +1,23 @@
const RowProps = [
{
name: 'type',
type: 'string',
default: 'null',
description: 'Defines the type of the group.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];
module.exports = {
row: {
name: 'Row',
description: 'DataTable can be grouped by defining a Row component with nested columns',
'doc-url': 'datatable'
'doc-url': 'datatable',
props: RowProps
}
};

34
components/lib/columngroup/ColumnGroup.d.ts vendored
View File

@ -5,8 +5,37 @@
* [Live Demo](https://www.primevue.org/datatable/)
* @module columngroup
*/
import { DataTablePassThroughOptions } from '../datatable';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type ColumnGroupPassThroughOptionType = ColumnGroupPassThroughAttributes | ((options: ColumnGroupPassThroughMethodOptions) => ColumnGroupPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ColumnGroupPassThroughMethodOptions {
props: ColumnGroupProps;
parent: DataTablePassThroughOptions;
}
/**
* Custom passthrough(pt) options.
* @see {@link ColumnGroupProps.pt}
*/
export interface ColumnGroupPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: ColumnGroupPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface ColumnGroupPassThroughAttributes {
[key: string]: any;
}
/**
* Defines valid properties in ColumnGroup component.
*/
@ -15,6 +44,11 @@ export interface ColumnGroupProps {
* Type of column group
*/
type?: 'header' | 'footer' | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {ColumnGroupPassThroughOptions}
*/
pt?: ColumnGroupPassThroughOptions;
}
/**

3
components/lib/columngroup/ColumnGroup.vue
View File

@ -1,6 +1,9 @@
<script>
import BaseComponent from 'primevue/basecomponent';
export default {
name: 'ColumnGroup',
extends: BaseComponent,
props: {
type: {
type: String,

4
components/lib/config/PrimeVue.d.ts vendored
View File

@ -16,6 +16,7 @@ import { CheckboxPassThroughOptions } from '../checkbox';
import { ChipPassThroughOptions } from '../chip';
import { ChipsPassThroughOptions } from '../chips';
import { ColorPickerPassThroughOptions } from '../colorpicker';
import { ColumnGroupPassThroughOptions } from '../columngroup';
import { ConfirmDialogPassThroughOptions } from '../confirmdialog';
import { ConfirmPopupPassThroughOptions } from '../confirmpopup';
import { ContextMenuPassThroughOptions } from '../contextmenu';
@ -56,6 +57,7 @@ import { PickListPassThroughOptions } from '../picklist';
import { ProgressBarPassThroughOptions } from '../progressbar';
import { ProgressSpinnerPassThroughOptions } from '../progressspinner';
import { RadioButtonPassThroughOptions } from '../radiobutton';
import { RowPassThroughOptions } from '../row';
import { ScrollPanelPassThroughOptions } from '../scrollpanel';
import { ScrollTopPassThroughOptions } from '../scrolltop';
import { SelectButtonPassThroughOptions } from '../selectbutton';
@ -112,6 +114,7 @@ interface PrimeVuePTOptions {
chip?: ChipPassThroughOptions;
chips?: ChipsPassThroughOptions;
colorpicker?: ColorPickerPassThroughOptions;
columngroup?: ColumnGroupPassThroughOptions;
confirmdialog?: ConfirmDialogPassThroughOptions;
confirmpopup?: ConfirmPopupPassThroughOptions;
contextmenu?: ContextMenuPassThroughOptions;
@ -153,6 +156,7 @@ interface PrimeVuePTOptions {
progressbar?: ProgressBarPassThroughOptions;
progressspinner?: ProgressSpinnerPassThroughOptions;
radiobutton?: RadioButtonPassThroughOptions;
row?: RowPassThroughOptions;
scrollpanel?: ScrollPanelPassThroughOptions;
scrolltop?: ScrollTopPassThroughOptions;
sidebar?: SidebarPassThroughOptions;

28
components/lib/datatable/TableFooter.vue
View File

@ -1,12 +1,12 @@
<template>
<tfoot v-if="hasFooter" class="p-datatable-tfoot" role="rowgroup" v-bind="ptm('tfoot')">
<tfoot v-if="hasFooter" class="p-datatable-tfoot" role="rowgroup" v-bind="{ ...ptm('tfoot'), ...getColumnGroupPTOptions('root') }">
<tr v-if="!columnGroup" role="row" v-bind="ptm('footerRow')">
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
<DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt" />
</template>
</tr>
<template v-else>
<tr v-for="(row, i) of getFooterRows()" :key="i" role="row" v-bind="ptm('footerRow')">
<tr v-for="(row, i) of getFooterRows()" :key="i" role="row" v-bind="getRowPTOptions(row, 'root')">
<template v-for="(col, j) of getFooterColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
<DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt" />
</template>
@ -37,6 +37,30 @@ export default {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
},
getColumnGroupPTOptions(key) {
return this.ptmo(this.getColumnGroupProps(), key, {
props: this.getColumnGroupProps(),
parent: {
props: this.$props,
state: this.$data
}
});
},
getColumnGroupProps() {
return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
},
getRowPTOptions(row, key) {
return this.ptmo(this.getRowProp(row), key, {
props: row.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
getRowProp(row) {
return row.props && row.props.pt ? row.props.pt : undefined; //@todo
},
getFooterRows() {
let rows = [];

28
components/lib/datatable/TableHeader.vue
View File

@ -1,5 +1,5 @@
<template>
<thead class="p-datatable-thead" role="rowgroup" v-bind="ptm('thead')">
<thead class="p-datatable-thead" role="rowgroup" v-bind="{ ...ptm('thead'), ...getColumnGroupPTOptions('root') }">
<template v-if="!columnGroup">
<tr role="row" v-bind="ptm('headerRow')">
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
@ -91,7 +91,7 @@
</tr>
</template>
<template v-else>
<tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="ptm('headerRow')">
<tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="getRowPTOptions(row, 'root')">
<template v-for="(col, j) of getHeaderColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
<DTHeaderCell
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field')) && typeof col.children !== 'string'"
@ -232,6 +232,30 @@ export default {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
},
getColumnGroupPTOptions(key) {
return this.ptmo(this.getColumnGroupProps(), key, {
props: this.getColumnGroupProps(),
parent: {
props: this.$props,
state: this.$data
}
});
},
getColumnGroupProps() {
return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
},
getRowPTOptions(row, key) {
return this.ptmo(this.getRowProp(row), key, {
props: row.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
getRowProp(row) {
return row.props && row.props.pt ? row.props.pt : undefined; //@todo
},
getColumnPTOptions(column, key) {
return this.ptmo(this.getColumnProp(column), key, {
props: column.props,

29
components/lib/row/Row.d.ts vendored
View File

@ -5,8 +5,37 @@
*
* @module row
*/
import { ColumnGroupPassThroughOptions } from '../columngroup';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type RowPassThroughOptionType = RowPassThroughAttributes | ((options: RowPassThroughMethodOptions) => RowPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface RowPassThroughMethodOptions {
props: RowProps;
parent: ColumnGroupPassThroughOptions;
}
/**
* Custom passthrough(pt) options.
* @see {@link RowProps.pt}
*/
export interface RowPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: RowPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface RowPassThroughAttributes {
[key: string]: any;
}
/**
* Defines valid properties in Row component.
*/

3
components/lib/row/Row.vue
View File

@ -1,6 +1,9 @@
<script>
import BaseComponent from 'primevue/basecomponent';
export default {
name: 'Row',
extends: BaseComponent,
render() {
return null;
}