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 { export interface ColumnPassThroughMethodOptions {
props: ColumnProps; props: ColumnProps;
state: ColumnState;
context: ColumnContext;
parent: DataTablePassThroughOptions; parent: DataTablePassThroughOptions;
context: ColumnContext;
} }
/** /**
@ -348,27 +347,6 @@ export interface ColumnState {
rowGroupHeaderStyleObject: object; 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. * Defines valid properties in Column component.
*/ */
@ -579,6 +557,31 @@ export interface ColumnProps {
unstyled?: boolean; 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. * 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 { export interface ColumnGroupPassThroughMethodOptions {
props: ColumnGroupProps; props: ColumnGroupProps;
parent: DataTablePassThroughOptions; parent: DataTablePassThroughOptions;
context: ColumnGroupContext;
} }
/** /**
@ -56,6 +57,16 @@ export interface ColumnGroupProps {
unstyled?: boolean; 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. * Defines valid slots in ColumnGroup component.
*/ */

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

@ -1,5 +1,5 @@
<template> <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" /> <component :is="column.children.loading" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :loadingOptions="loadingOptions" />
</td> </td>
<td <td
@ -9,13 +9,13 @@
@click="onClick" @click="onClick"
@keydown="onKeyDown" @keydown="onKeyDown"
role="cell" 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-selection-column="columnProp('selectionMode') != null"
:data-p-editable-column="isEditable()" :data-p-editable-column="isEditable()"
:data-p-cell-editing="d_editing" :data-p-cell-editing="d_editing"
:data-p-frozen-column="columnProp('frozen')" :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-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 <component
v-else-if="column.children && column.children.editor && d_editing" v-else-if="column.children && column.children.editor && d_editing"
@ -48,25 +48,25 @@
<BarsIcon v-else :class="cx('rowReorderIcon')" data-pc-section="rowreordericon" /> <BarsIcon v-else :class="cx('rowReorderIcon')" data-pc-section="rowreordericon" />
</template> </template>
<template v-else-if="columnProp('expander')"> <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" /> <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
<template v-else> <template v-else>
<span v-if="isRowExpanded && expandedRowIcon" :class="[cx('rowTogglerIcon'), expandedRowIcon]" /> <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]" /> <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> </template>
</button> </button>
</template> </template>
<template v-else-if="editMode === 'row' && columnProp('rowEditor')"> <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')"> <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="getColumnPTOptions(column, 'rowEditorInitIcon')" /> <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="cx('rowEditorInitIcon')" v-bind="getColumnPT('rowEditorInitIcon')" />
</button> </button>
<button v-if="d_editing" v-ripple :class="cx('rowEditorSaveButton')" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPTOptions(column, 'rowEditorSaveButton')"> <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="getColumnPTOptions(column, 'rowEditorSaveIcon')" /> <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="cx('rowEditorSaveIcon')" v-bind="getColumnPT('rowEditorSaveIcon')" />
</button> </button>
<button v-if="d_editing" v-ripple :class="cx('rowEditorCancelButton')" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPTOptions(column, 'rowEditorCancelButton')"> <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="getColumnPTOptions(column, 'rowEditorCancelIcon')" /> <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="cx('rowEditorCancelIcon')" v-bind="getColumnPT('rowEditorCancelIcon')" />
</button> </button>
</template> </template>
<template v-else>{{ resolveFieldData() }}</template> <template v-else>{{ resolveFieldData() }}</template>
@ -202,17 +202,22 @@ export default {
columnProp(prop) { columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop); return ObjectUtils.getVNodeProp(this.column, prop);
}, },
getColumnPTOptions(column, key) { getColumnPT(key) {
return this.ptmo(this.getColumnProp(column), key, { const columnMetaData = {
props: column.props, props: this.column.props,
parent: { parent: {
props: this.$props, props: this.$props,
state: this.$data state: this.$data
},
context: {
index: this.index
} }
}); };
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
}, },
getColumnProp(column) { getColumnProp() {
return column.props && column.props.pt ? column.props.pt : undefined; //@todo return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
}, },
resolveFieldData() { resolveFieldData() {
return ObjectUtils.resolveFieldData(this.rowData, this.field); 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; 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. * Uses to pass attributes to the row expansion's DOM element.
*/ */

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

@ -1,5 +1,5 @@
<template> <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" /> <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
{{ columnProp('footer') }} {{ columnProp('footer') }}
</td> </td>
@ -16,6 +16,10 @@ export default {
column: { column: {
type: Object, type: Object,
default: null default: null
},
index: {
type: Number,
default: null
} }
}, },
data() { data() {
@ -37,14 +41,19 @@ export default {
columnProp(prop) { columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop); return ObjectUtils.getVNodeProp(this.column, prop);
}, },
getColumnPTOptions(key) { getColumnPT(key) {
return this.ptmo(this.getColumnProp(), key, { const columnMetaData = {
props: this.column.props, props: this.column.props,
parent: { parent: {
props: this.$props, props: this.$props,
state: this.$data state: this.$data
},
context: {
index: this.index
} }
}); };
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
}, },
getColumnProp() { getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; 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" @dragover="onDragOver"
@dragleave="onDragLeave" @dragleave="onDragLeave"
@drop="onDrop" @drop="onDrop"
v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }" v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }"
:data-p-sortable-column="columnProp('sortable')" :data-p-sortable-column="columnProp('sortable')"
:data-p-resizable-column="resizableColumns" :data-p-resizable-column="resizableColumns"
:data-p-highlight="isColumnSorted()" :data-p-highlight="isColumnSorted()"
@ -22,14 +22,14 @@
:data-p-frozen-column="columnProp('frozen')" :data-p-frozen-column="columnProp('frozen')"
:data-p-reorderable-column="reorderableColumns" :data-p-reorderable-column="reorderableColumns"
> >
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span> <span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
<div :class="cx('headerContent')" v-bind="getColumnPTOptions('headerContent')"> <div :class="cx('headerContent')" v-bind="getColumnPT('headerContent')">
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" /> <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('header')" :class="cx('headerTitle')" v-bind="getColumnPT('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="getColumnPTOptions('sort')"> <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')" /> <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" />
</span> </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 <DTHeaderCheckbox
v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'" v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
:checked="allRowsSelected" :checked="allRowsSelected"
@ -115,6 +115,10 @@ export default {
type: Object, type: Object,
default: null default: null
}, },
index: {
type: Number,
default: null
},
resizableColumns: { resizableColumns: {
type: Boolean, type: Boolean,
default: false default: false
@ -199,14 +203,19 @@ export default {
columnProp(prop) { columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop); return ObjectUtils.getVNodeProp(this.column, prop);
}, },
getColumnPTOptions(key) { getColumnPT(key) {
return this.ptmo(this.getColumnProp(), key, { const columnMetaData = {
props: this.column.props, props: this.column.props,
parent: { parent: {
props: this.$props, props: this.$props,
state: this.$data state: this.$data
},
context: {
index: this.index
} }
}); };
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
}, },
getColumnProp() { getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo: 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)" @dragleave="onRowDragLeave($event)"
@dragend="onRowDragEnd($event)" @dragend="onRowDragEnd($event)"
@drop="onRowDrop($event)" @drop="onRowDrop($event)"
v-bind="ptm('row')" v-bind="ptm('bodyRow')"
:data-p-selectable-row="selectionMode ? true : false" :data-p-selectable-row="selectionMode ? true : false"
:data-p-highlight="selection && isSelected(rowData)" :data-p-highlight="selection && isSelected(rowData)"
:data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu(rowData)" :data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu(rowData)"

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

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

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

@ -1,11 +1,12 @@
<template> <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"> <template v-if="!columnGroup">
<tr role="row" v-bind="ptm('headerRow')"> <tr role="row" v-bind="ptm('headerRow')">
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i"> <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
<DTHeaderCell <DTHeaderCell
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))" v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
:column="col" :column="col"
:index="i"
@column-click="$emit('column-click', $event)" @column-click="$emit('column-click', $event)"
@column-mousedown="$emit('column-mousedown', $event)" @column-mousedown="$emit('column-mousedown', $event)"
@column-dragstart="$emit('column-dragstart', $event)" @column-dragstart="$emit('column-dragstart', $event)"
@ -46,7 +47,7 @@
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))" v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
:style="getFilterColumnHeaderStyle(col)" :style="getFilterColumnHeaderStyle(col)"
:class="getFilterColumnHeaderClass(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" /> <DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :column="col" :pt="pt" />
<DTColumnFilter <DTColumnFilter
@ -91,7 +92,7 @@
</tr> </tr>
</template> </template>
<template v-else> <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"> <template v-for="(col, j) of getHeaderColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
<DTHeaderCell <DTHeaderCell
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field')) && typeof col.children !== 'string'" v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field')) && typeof col.children !== 'string'"
@ -232,38 +233,53 @@ export default {
columnProp(col, prop) { columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop); return ObjectUtils.getVNodeProp(col, prop);
}, },
getColumnGroupPTOptions(key) { getColumnGroupPT(key) {
return this.ptmo(this.getColumnGroupProps(), key, { const columnGroupMetaData = {
props: this.getColumnGroupProps(), props: this.getColumnGroupProps(),
parent: { parent: {
props: this.$props, props: this.$props,
state: this.$data state: this.$data
},
context: {
type: 'header'
} }
}); };
return { ...this.ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ...this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData) };
}, },
getColumnGroupProps() { getColumnGroupProps() {
return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
}, },
getRowPTOptions(row, key) { getRowPT(row, key, index) {
return this.ptmo(this.getRowProp(row), key, { const rowMetaData = {
props: row.props, props: row.props,
parent: { parent: {
props: this.$props, props: this.$props,
state: this.$data state: this.$data
},
context: {
index
} }
}); };
return { ...this.ptm(`row.${key}`, { row: rowMetaData }), ...this.ptmo(this.getRowProp(row), key, rowMetaData) };
}, },
getRowProp(row) { getRowProp(row) {
return row.props && row.props.pt ? row.props.pt : undefined; //@todo return row.props && row.props.pt ? row.props.pt : undefined; //@todo
}, },
getColumnPTOptions(column, key) { getColumnPT(column, key, index) {
return this.ptmo(this.getColumnProp(column), key, { const columnMetaData = {
props: column.props, props: column.props,
parent: { parent: {
props: this.$props, props: this.$props,
state: this.$data state: this.$data
},
context: {
index
} }
}); };
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(column), key, columnMetaData) };
}, },
getColumnProp(column) { getColumnProp(column) {
return column.props && column.props.pt ? column.props.pt : undefined; //@todo 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 { export interface RowPassThroughMethodOptions {
props: RowProps; props: RowProps;
parent: ColumnGroupPassThroughOptions; parent: ColumnGroupPassThroughOptions;
context: RowContext;
} }
/** /**
@ -47,6 +48,16 @@ export interface RowProps {
unstyled?: boolean; unstyled?: boolean;
} }
/**
* Defines current options in Row component.
*/
export interface RowContext {
/**
* Current index of the row.
*/
index: number;
}
/** /**
* Defines valid slots in Row component. * Defines valid slots in Row component.
*/ */