mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 08:52:34 +00:00
Refactor #3965 - For DataTable & Column & ColumnGroup & Row
This commit is contained in:
Tuğçe Küçükoğlu
parent
ea9062ae3a
commit
2669fd5925
16 changed files with 1127 additions and 920 deletions
|
|
@ -2,8 +2,20 @@
|
|||
<td v-if="loading" :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
|
||||
<component :is="column.children.loading" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :loadingOptions="loadingOptions" />
|
||||
</td>
|
||||
<td v-else :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
|
||||
<span v-if="responsiveLayout === 'stack'" class="p-column-title" v-bind="getColumnPTOptions(column, 'columnTitle')">{{ columnProp('header') }}</span>
|
||||
<td
|
||||
v-else
|
||||
:style="containerStyle"
|
||||
:class="containerClass"
|
||||
@click="onClick"
|
||||
@keydown="onKeyDown"
|
||||
role="cell"
|
||||
v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, '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>
|
||||
<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"
|
||||
|
|
@ -31,28 +43,30 @@
|
|||
/>
|
||||
</template>
|
||||
<template v-else-if="columnProp('rowReorder')">
|
||||
<component :is="column.children && column.children.rowreordericon ? column.children.rowreordericon : columnProp('rowReorderIcon') ? 'i' : 'BarsIcon'" :class="['p-datatable-reorderablerow-handle', columnProp('rowReorderIcon')]" />
|
||||
<component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cx('rowReorderIcon')" />
|
||||
<i v-else-if="columnProp('rowReorderIcon')" :class="[cx('rowReorderIcon'), columnProp('rowReorderIcon')]" />
|
||||
<BarsIcon v-else :class="cx('rowReorderIcon')" data-pc-section="rowreordericon" />
|
||||
</template>
|
||||
<template v-else-if="columnProp('expander')">
|
||||
<button v-ripple class="p-row-toggler p-link" 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="getColumnPTOptions(column, 'rowToggler')">
|
||||
<component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
|
||||
<template v-else>
|
||||
<span v-if="isRowExpanded && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
|
||||
<ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
|
||||
<span v-else-if="!isRowExpanded && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
|
||||
<ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
|
||||
<span v-if="isRowExpanded && expandedRowIcon" :class="[cx('rowTogglerIcon'), expandedRowIcon]" />
|
||||
<ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPTOptions(column, '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')" />
|
||||
</template>
|
||||
</button>
|
||||
</template>
|
||||
<template v-else-if="editMode === 'row' && columnProp('rowEditor')">
|
||||
<button v-if="!d_editing" v-ripple class="p-row-editor-init p-link" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPTOptions(column, 'rowEditorInitButton')">
|
||||
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" class="p-row-editor-init-icon" v-bind="getColumnPTOptions(column, 'rowEditorInitIcon')" />
|
||||
<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>
|
||||
<button v-if="d_editing" v-ripple class="p-row-editor-save p-link" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPTOptions(column, 'rowEditorEditButton')">
|
||||
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" class="p-row-editor-save-icon" v-bind="getColumnPTOptions(column, 'rowEditorEditIcon')" />
|
||||
<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>
|
||||
<button v-if="d_editing" v-ripple class="p-row-editor-cancel p-link" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPTOptions(column, 'rowEditorCancelButton')">
|
||||
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" class="p-row-editor-cancel-icon" v-bind="getColumnPTOptions(column, 'rowEditorCancelIcon')" />
|
||||
<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>
|
||||
</template>
|
||||
<template v-else>{{ resolveFieldData() }}</template>
|
||||
|
|
@ -331,7 +345,7 @@ export default {
|
|||
if (element) {
|
||||
let cell = element;
|
||||
|
||||
while (cell && !DomHandler.hasClass(cell, 'p-cell-editing')) {
|
||||
while (cell && !DomHandler.getAttribute(cell, 'data-p-cell-editing')) {
|
||||
cell = cell.parentElement;
|
||||
}
|
||||
|
||||
|
|
@ -352,7 +366,7 @@ export default {
|
|||
}
|
||||
|
||||
if (prevCell) {
|
||||
if (DomHandler.hasClass(prevCell, 'p-editable-column')) return prevCell;
|
||||
if (DomHandler.getAttribute(prevCell, 'data-p-editable-column')) return prevCell;
|
||||
else return this.findPreviousEditableColumn(prevCell);
|
||||
} else {
|
||||
return null;
|
||||
|
|
@ -370,7 +384,7 @@ export default {
|
|||
}
|
||||
|
||||
if (nextCell) {
|
||||
if (DomHandler.hasClass(nextCell, 'p-editable-column')) return nextCell;
|
||||
if (DomHandler.getAttribute(nextCell, 'data-p-editable-column')) return nextCell;
|
||||
else return this.findNextEditableColumn(nextCell);
|
||||
} else {
|
||||
return null;
|
||||
|
|
@ -443,16 +457,7 @@ export default {
|
|||
return this.columnProp('field');
|
||||
},
|
||||
containerClass() {
|
||||
return [
|
||||
this.columnProp('bodyClass'),
|
||||
this.columnProp('class'),
|
||||
{
|
||||
'p-selection-column': this.columnProp('selectionMode') != null,
|
||||
'p-editable-column': this.isEditable(),
|
||||
'p-cell-editing': this.d_editing,
|
||||
'p-frozen-column': this.columnProp('frozen')
|
||||
}
|
||||
];
|
||||
return [this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')];
|
||||
},
|
||||
containerStyle() {
|
||||
let bodyStyle = this.columnProp('bodyStyle');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue