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

Refactor #3983 - For DataTable

pull/4016/head
Tuğçe Küçükoğlu 2023-06-02 14:10:18 +03:00
parent e0194b3af4
commit 9c2d39313f
10 changed files with 152 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,9 +23,8 @@ export declare type ColumnPassThroughOptionType = ColumnPassThroughAttributes |
*/
export interface ColumnPassThroughMethodOptions {
props: ColumnProps;
state: ColumnState;
context: ColumnContext;
parent: DataTablePassThroughOptions;
context: ColumnContext;
}
/**
@ -348,27 +347,6 @@ export interface ColumnState {
rowGroupHeaderStyleObject: object;
}
/**
* Defines current options in Column component.
*/
export interface ColumnContext {
/**
* Current checked state of row as a boolean.
* @defaultValue false
*/
checked: boolean;
/**
* Current focused state of row as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current disabled state of row as a boolean.
* @defaultValue false
*/
disabled: boolean;
}
/**
* Defines valid properties in Column component.
*/
@ -579,6 +557,31 @@ export interface ColumnProps {
unstyled?: boolean;
}
/**
* Defines current options in Column component.
*/
export interface ColumnContext {
/**
* Current index of the column.
*/
index: number;
/**
* Current checked state of row as a boolean.
* @defaultValue false
*/
checked: boolean;
/**
* Current focused state of row as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current disabled state of row as a boolean.
* @defaultValue false
*/
disabled: boolean;
}
/**
* Defines valid slots in Column component.
*/

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

@ -16,6 +16,7 @@ export declare type ColumnGroupPassThroughOptionType = ColumnGroupPassThroughAtt
export interface ColumnGroupPassThroughMethodOptions {
props: ColumnGroupProps;
parent: DataTablePassThroughOptions;
context: ColumnGroupContext;
}
/**
@ -56,6 +57,16 @@ export interface ColumnGroupProps {
unstyled?: boolean;
}
/**
* Defines current options in ColumnGroup component.
*/
export interface ColumnGroupContext {
/**
* Current type of the column group.
*/
type: string;
}
/**
* Defines valid slots in ColumnGroup component.
*/

43
components/lib/datatable/BodyCell.vue
View File

@ -1,5 +1,5 @@
<template>
<td v-if="loading" :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
<td v-if="loading" :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
<component :is="column.children.loading" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :loadingOptions="loadingOptions" />
</td>
<td
@ -9,13 +9,13 @@
@click="onClick"
@keydown="onKeyDown"
role="cell"
v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }"
v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }"
:data-p-selection-column="columnProp('selectionMode') != null"
:data-p-editable-column="isEditable()"
:data-p-cell-editing="d_editing"
:data-p-frozen-column="columnProp('frozen')"
>
<span v-if="responsiveLayout === 'stack'" :class="cx('columnTitle')" v-bind="getColumnPTOptions(column, 'columnTitle')">{{ columnProp('header') }}</span>
<span v-if="responsiveLayout === 'stack'" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ columnProp('header') }}</span>
<component v-if="column.children && column.children.body && !d_editing" :is="column.children.body" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorInitCallback="editorInitCallback" />
<component
v-else-if="column.children && column.children.editor && d_editing"
@ -48,25 +48,25 @@
<BarsIcon v-else :class="cx('rowReorderIcon')" data-pc-section="rowreordericon" />
</template>
<template v-else-if="columnProp('expander')">
<button v-ripple :class="cx('rowToggler')" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="getColumnPTOptions(column, 'rowToggler')">
<button v-ripple :class="cx('rowToggler')" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="getColumnPT('rowToggler')">
<component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
<template v-else>
<span v-if="isRowExpanded && expandedRowIcon" :class="[cx('rowTogglerIcon'), expandedRowIcon]" />
<ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
<ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
<span v-else-if="!isRowExpanded && collapsedRowIcon" :class="[cx('rowTogglerIcon'), collapsedRowIcon]" />
<ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
<ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
</template>
</button>
</template>
<template v-else-if="editMode === 'row' && columnProp('rowEditor')">
<button v-if="!d_editing" v-ripple :class="cx('rowEditorInitButton')" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPTOptions(column, 'rowEditorInitButton')">
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="cx('rowEditorInitIcon')" v-bind="getColumnPTOptions(column, 'rowEditorInitIcon')" />
<button v-if="!d_editing" v-ripple :class="cx('rowEditorInitButton')" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPT('rowEditorInitButton')">
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="cx('rowEditorInitIcon')" v-bind="getColumnPT('rowEditorInitIcon')" />
</button>
<button v-if="d_editing" v-ripple :class="cx('rowEditorSaveButton')" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPTOptions(column, 'rowEditorSaveButton')">
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="cx('rowEditorSaveIcon')" v-bind="getColumnPTOptions(column, 'rowEditorSaveIcon')" />
<button v-if="d_editing" v-ripple :class="cx('rowEditorSaveButton')" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPT('rowEditorSaveButton')">
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="cx('rowEditorSaveIcon')" v-bind="getColumnPT('rowEditorSaveIcon')" />
</button>
<button v-if="d_editing" v-ripple :class="cx('rowEditorCancelButton')" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPTOptions(column, 'rowEditorCancelButton')">
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="cx('rowEditorCancelIcon')" v-bind="getColumnPTOptions(column, 'rowEditorCancelIcon')" />
<button v-if="d_editing" v-ripple :class="cx('rowEditorCancelButton')" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPT('rowEditorCancelButton')">
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="cx('rowEditorCancelIcon')" v-bind="getColumnPT('rowEditorCancelIcon')" />
</button>
</template>
<template v-else>{{ resolveFieldData() }}</template>
@ -202,17 +202,22 @@ export default {
columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPTOptions(column, key) {
return this.ptmo(this.getColumnProp(column), key, {
props: column.props,
getColumnPT(key) {
const columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
getColumnProp(column) {
return column.props && column.props.pt ? column.props.pt : undefined; //@todo
context: {
index: this.index
}
};
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
},
resolveFieldData() {
return ObjectUtils.resolveFieldData(this.rowData, this.field);

4
components/lib/datatable/DataTable.d.ts vendored
View File

@ -596,9 +596,9 @@ export interface DataTablePassThroughOptions {
*/
rowgroupHeader?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the row's DOM element.
* Uses to pass attributes to the body row's DOM element.
*/
row?: DataTablePassThroughOptionType;
bodyRow?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the row expansion's DOM element.
*/

17
components/lib/datatable/FooterCell.vue
View File

@ -1,5 +1,5 @@
<template>
<td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('footerCell') }">
<td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }">
<component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
{{ columnProp('footer') }}
</td>
@ -16,6 +16,10 @@ export default {
column: {
type: Object,
default: null
},
index: {
type: Number,
default: null
}
},
data() {
@ -37,14 +41,19 @@ export default {
columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
getColumnPT(key) {
const columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index: this.index
}
});
};
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;

27
components/lib/datatable/HeaderCell.vue
View File

@ -14,7 +14,7 @@
@dragover="onDragOver"
@dragleave="onDragLeave"
@drop="onDrop"
v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }"
v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }"
:data-p-sortable-column="columnProp('sortable')"
:data-p-resizable-column="resizableColumns"
:data-p-highlight="isColumnSorted()"
@ -22,14 +22,14 @@
:data-p-frozen-column="columnProp('frozen')"
:data-p-reorderable-column="reorderableColumns"
>
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
<div :class="cx('headerContent')" v-bind="getColumnPTOptions('headerContent')">
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
<div :class="cx('headerContent')" v-bind="getColumnPT('headerContent')">
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="getColumnPTOptions('sort')">
<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" :class="cx('sortIcon')" />
</span>
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPTOptions('sortBadge')">{{ getBadgeValue() }}</span>
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getBadgeValue() }}</span>
<DTHeaderCheckbox
v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
:checked="allRowsSelected"
@ -115,6 +115,10 @@ export default {
type: Object,
default: null
},
index: {
type: Number,
default: null
},
resizableColumns: {
type: Boolean,
default: false
@ -199,14 +203,19 @@ export default {
columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
getColumnPT(key) {
const columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index: this.index
}
});
};
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:

2
components/lib/datatable/TableBody.vue
View File

@ -42,7 +42,7 @@
@dragleave="onRowDragLeave($event)"
@dragend="onRowDragEnd($event)"
@drop="onRowDrop($event)"
v-bind="ptm('row')"
v-bind="ptm('bodyRow')"
:data-p-selectable-row="selectionMode ? true : false"
:data-p-highlight="selection && isSelected(rowData)"
:data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu(rowData)"

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

@ -1,14 +1,14 @@
<template>
<tfoot v-if="hasFooter" :class="cx('tfoot')" role="rowgroup" v-bind="columnGroup ? { ...ptm('tfoot'), ...getColumnGroupPTOptions('root') } : ptm('tfoot')" data-pc-section="tfoot">
<tfoot v-if="hasFooter" :class="cx('tfoot')" role="rowgroup" v-bind="columnGroup ? { ...ptm('tfoot'), ...getColumnGroupPT('root') } : ptm('tfoot')" data-pc-section="tfoot">
<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="getRowPTOptions(row, 'root')">
<tr v-for="(row, i) of getFooterRows()" :key="i" role="row" v-bind="{ ...ptm('footerRow'), ...getRowPT(row, 'root', i) }">
<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" />
<DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :index="i" :pt="pt" />
</template>
</tr>
</template>
@ -37,26 +37,36 @@ export default {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
},
getColumnGroupPTOptions(key) {
return this.ptmo(this.getColumnGroupProps(), key, {
getColumnGroupPT(key) {
const columnGroupMetaData = {
props: this.getColumnGroupProps(),
parent: {
props: this.$props,
state: this.$data
},
context: {
type: 'header'
}
});
};
return { ...this.ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ...this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData) };
},
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, {
getRowPT(row, key, index) {
const rowMetaData = {
props: row.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index
}
});
};
return { ...this.ptm(`row.${key}`, { row: rowMetaData }), ...this.ptmo(this.getRowProp(row), key, rowMetaData) };
},
getRowProp(row) {
return row.props && row.props.pt ? row.props.pt : undefined; //@todo

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

@ -1,11 +1,12 @@
<template>
<thead :class="cx('thead')" role="rowgroup" v-bind="columnGroup ? { ...ptm('thead'), ...getColumnGroupPTOptions('root') } : ptm('thead')" data-pc-section="thead">
<thead :class="cx('thead')" role="rowgroup" v-bind="columnGroup ? { ...ptm('thead'), ...getColumnGroupPT('root') } : ptm('thead')" data-pc-section="thead">
<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">
<DTHeaderCell
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
:column="col"
:index="i"
@column-click="$emit('column-click', $event)"
@column-mousedown="$emit('column-mousedown', $event)"
@column-dragstart="$emit('column-dragstart', $event)"
@ -46,7 +47,7 @@
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
:style="getFilterColumnHeaderStyle(col)"
:class="getFilterColumnHeaderClass(col)"
v-bind="{ ...getColumnPTOptions(col, 'root'), ...getColumnPTOptions(col, 'headerCell') }"
v-bind="{ ...getColumnPT(col, 'root', i), ...getColumnPT(col, 'headerCell', i) }"
>
<DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :column="col" :pt="pt" />
<DTColumnFilter
@ -91,7 +92,7 @@
</tr>
</template>
<template v-else>
<tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="{ ...ptm('headerRow'), ...getRowPTOptions(row, 'root') }">
<tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="{ ...ptm('headerRow'), ...getRowPT(row, 'root', i) }">
<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,38 +233,53 @@ export default {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
},
getColumnGroupPTOptions(key) {
return this.ptmo(this.getColumnGroupProps(), key, {
getColumnGroupPT(key) {
const columnGroupMetaData = {
props: this.getColumnGroupProps(),
parent: {
props: this.$props,
state: this.$data
},
context: {
type: 'header'
}
});
};
return { ...this.ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ...this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData) };
},
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, {
getRowPT(row, key, index) {
const rowMetaData = {
props: row.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index
}
});
};
return { ...this.ptm(`row.${key}`, { row: rowMetaData }), ...this.ptmo(this.getRowProp(row), key, rowMetaData) };
},
getRowProp(row) {
return row.props && row.props.pt ? row.props.pt : undefined; //@todo
},
getColumnPTOptions(column, key) {
return this.ptmo(this.getColumnProp(column), key, {
getColumnPT(column, key, index) {
const columnMetaData = {
props: column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index
}
});
};
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(column), key, columnMetaData) };
},
getColumnProp(column) {
return column.props && column.props.pt ? column.props.pt : undefined; //@todo

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

@ -16,6 +16,7 @@ export declare type RowPassThroughOptionType = RowPassThroughAttributes | ((opti
export interface RowPassThroughMethodOptions {
props: RowProps;
parent: ColumnGroupPassThroughOptions;
context: RowContext;
}
/**
@ -47,6 +48,16 @@ export interface RowProps {
unstyled?: boolean;
}
/**
* Defines current options in Row component.
*/
export interface RowContext {
/**
* Current index of the row.
*/
index: number;
}
/**
* Defines valid slots in Row component.
*/