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

Refactor #3965 - Update BaseComponent & DataTable

pull/4041/head
Tuğçe Küçükoğlu 2023-06-08 14:26:48 +03:00
parent 57b6f2c63a
commit 6c39522495
11 changed files with 78 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/basecomponent/BaseComponent.vue
View File

@ -79,9 +79,6 @@ export default {
cx(key = '', params = {}) {
return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params }) : undefined;
},
cxo(key = '', params = {}) {
return this.cx(key, params);
},
sx(key = '', when = true, params = {}) {
if (when) {
const self = this._getOptionValue(this.$css.inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
@ -91,9 +88,6 @@ export default {
}
return undefined;
},
sxo(key = '', when = true, params = {}) {
return this.sx(key, when, params);
}
},
computed: {

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

@ -15,7 +15,7 @@
:data-p-cell-editing="d_editing"
:data-p-frozen-column="columnProp('frozen')"
>
<span v-if="responsiveLayout === 'stack'" :class="cxo('columnTitle')" v-bind="getColumnPT('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"
@ -45,30 +45,30 @@
/>
</template>
<template v-else-if="columnProp('rowReorder')">
<component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cxo('rowReorderIcon')" />
<i v-else-if="columnProp('rowReorderIcon')" :class="[cxo('rowReorderIcon'), columnProp('rowReorderIcon')]" />
<BarsIcon v-else :class="cxo('rowReorderIcon')" data-pc-section="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="cxo('rowToggler')" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="getColumnPT('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="[cxo('rowTogglerIcon'), expandedRowIcon]" />
<ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" :class="cxo('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
<span v-else-if="!isRowExpanded && collapsedRowIcon" :class="[cxo('rowTogglerIcon'), collapsedRowIcon]" />
<ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" :class="cxo('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
<span v-if="isRowExpanded && expandedRowIcon" :class="[cx('rowTogglerIcon'), expandedRowIcon]" />
<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="getColumnPT('rowTogglerIcon')" />
</template>
</button>
</template>
<template v-else-if="editMode === 'row' && columnProp('rowEditor')">
<button v-if="!d_editing" v-ripple :class="cxo('rowEditorInitButton')" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPT('rowEditorInitButton')">
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="cxo('rowEditorInitIcon')" v-bind="getColumnPT('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="cxo('rowEditorSaveButton')" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPT('rowEditorSaveButton')">
<component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="cxo('rowEditorSaveIcon')" v-bind="getColumnPT('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="cxo('rowEditorCancelButton')" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPT('rowEditorCancelButton')">
<component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="cxo('rowEditorCancelIcon')" v-bind="getColumnPT('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>
@ -91,6 +91,7 @@ import RowRadioButton from './RowRadioButton.vue';
export default {
name: 'BodyCell',
hostName: 'DataTable',
extends: BaseComponent,
emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'row-toggle', 'radio-change', 'checkbox-change', 'editing-meta-change'],
props: {
@ -464,7 +465,7 @@ export default {
return this.columnProp('field');
},
containerClass() {
return [this.columnProp('bodyClass'), this.columnProp('class'), this.cxo('bodyCell')];
return [this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')];
},
containerStyle() {
let bodyStyle = this.columnProp('bodyStyle');

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

@ -1,6 +1,6 @@
<template>
<div :class="cxo('columnFilter')" v-bind="getColumnPT('columnFilter')">
<div v-if="display === 'row'" :class="cxo('filterInput')" v-bind="{ ...filterInputProps, ...getColumnPT('filterInput') }">
<div :class="cx('columnFilter')" v-bind="getColumnPT('columnFilter')">
<div v-if="display === 'row'" :class="cx('filterInput')" v-bind="{ ...filterInputProps, ...getColumnPT('filterInput') }">
<component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
</div>
<button
@ -11,14 +11,14 @@
aria-haspopup="true"
:aria-expanded="overlayVisible"
:aria-controls="overlayId"
:class="cxo('filterMenuButton')"
:class="cx('filterMenuButton')"
@click="toggleMenu($event)"
@keydown="onToggleButtonKeyDown($event)"
v-bind="getColumnPT('filterMenuButton')"
>
<component :is="filterIconTemplate || 'FilterIcon'" />
</button>
<button v-if="showClearButton && display === 'row'" :class="cxo('headerFilterClearButton')" type="button" @click="clearFilter()" v-bind="getColumnPT('headerFilterClearButton')">
<button v-if="showClearButton && display === 'row'" :class="cx('headerFilterClearButton')" type="button" @click="clearFilter()" v-bind="getColumnPT('headerFilterClearButton')">
<component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPT('filterClearIcon')" />
</button>
<Portal>
@ -30,7 +30,7 @@
v-focustrap="{ autoFocus: true }"
:aria-modal="overlayVisible"
role="dialog"
:class="[cxo('filterOverlay'), filterMenuClass]"
:class="[cx('filterOverlay'), filterMenuClass]"
@keydown.escape="hide"
@click="onContentClick"
@mousedown="onContentMouseDown"
@ -38,11 +38,11 @@
>
<component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
<template v-if="display === 'row'">
<ul :class="cxo('filterRowItems')" v-bind="getColumnPT('filterRowItems')">
<ul :class="cx('filterRowItems')" v-bind="getColumnPT('filterRowItems')">
<li
v-for="(matchMode, i) of matchModes"
:key="matchMode.label"
:class="cxo('filterRowItem', { matchMode })"
:class="cx('filterRowItem', { matchMode })"
@click="onRowMatchModeChange(matchMode.value)"
@keydown="onRowMatchModeKeyDown($event)"
@keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
@ -51,19 +51,19 @@
>
{{ matchMode.label }}
</li>
<li :class="cxo('filterSeparator')" v-bind="getColumnPT('filterSeparator')"></li>
<li :class="cxo('filterRowItem')" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPT('filterRowItem')">
<li :class="cx('filterSeparator')" v-bind="getColumnPT('filterSeparator')"></li>
<li :class="cx('filterRowItem')" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPT('filterRowItem')">
{{ noFilterLabel }}
</li>
</ul>
</template>
<template v-else>
<div v-if="isShowOperator" :class="cxo('filterOperator')" v-bind="getColumnPT('filterOperator')">
<div v-if="isShowOperator" :class="cx('filterOperator')" v-bind="getColumnPT('filterOperator')">
<CFDropdown
:options="operatorOptions"
:modelValue="operator"
:aria-label="filterOperatorAriaLabel"
:class="cxo('filterOperatorDropdown')"
:class="cx('filterOperatorDropdown')"
optionLabel="label"
optionValue="value"
@update:modelValue="onOperatorChange($event)"
@ -72,13 +72,13 @@
data-pc-section="filteroperatordropdown"
></CFDropdown>
</div>
<div :class="cxo('filterConstraints')" v-bind="getColumnPT('filterConstraints')">
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cxo('filterConstraint')" v-bind="getColumnPT('filterConstraint')">
<div :class="cx('filterConstraints')" v-bind="getColumnPT('filterConstraints')">
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterConstraint')" v-bind="getColumnPT('filterConstraint')">
<CFDropdown
v-if="isShowMatchModes"
:options="matchModes"
:modelValue="fieldConstraint.matchMode"
:class="cxo('filterMatchModeDropdown')"
:class="cx('filterMatchModeDropdown')"
optionLabel="label"
optionValue="value"
:aria-label="filterConstraintAriaLabel"
@ -92,7 +92,7 @@
<CFButton
v-if="showRemoveIcon"
type="button"
:class="cxo('filterRemoveButton')"
:class="cx('filterRemoveButton')"
@click="removeConstraint(i)"
:label="removeRuleButtonLabel"
:unstyled="unstyled"
@ -106,12 +106,12 @@
</div>
</div>
</div>
<div v-if="isShowAddConstraint" :class="cxo('filterAddRule')" v-bind="getColumnPT('filterAddRule')">
<div v-if="isShowAddConstraint" :class="cx('filterAddRule')" v-bind="getColumnPT('filterAddRule')">
<CFButton
type="button"
:label="addRuleButtonLabel"
iconPos="left"
:class="cxo('filterAddRuleButton')"
:class="cx('filterAddRuleButton')"
@click="addConstraint()"
:unstyled="unstyled"
:pt="getColumnPT('filterAddRuleButton')"
@ -122,11 +122,11 @@
</template>
</CFButton>
</div>
<div :class="cxo('filterButtonbar')" v-bind="getColumnPT('filterButtonbar')">
<div :class="cx('filterButtonbar')" v-bind="getColumnPT('filterButtonbar')">
<CFButton
v-if="!filterClearTemplate && showClearButton"
type="button"
:class="cxo('filterClearButton')"
:class="cx('filterClearButton')"
:label="clearButtonLabel"
@click="clearFilter"
:unstyled="unstyled"
@ -138,7 +138,7 @@
<CFButton
v-if="!filterApplyTemplate"
type="button"
:class="cxo('filterApplyButton')"
:class="cx('filterApplyButton')"
:label="applyButtonLabel"
@click="applyFilter()"
:unstyled="unstyled"
@ -172,6 +172,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUti
export default {
name: 'ColumnFilter',
hostName: 'DataTable',
extends: BaseComponent,
emits: ['filter-change', 'filter-apply', 'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
props: {

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

@ -11,6 +11,7 @@ import { DomHandler, ObjectUtils } from 'primevue/utils';
export default {
name: 'FooterCell',
hostName: 'DataTable',
extends: BaseComponent,
props: {
column: {
@ -86,7 +87,7 @@ export default {
},
computed: {
containerClass() {
return [this.columnProp('footerClass'), this.columnProp('class'), this.cxo('footerCell')];
return [this.columnProp('footerClass'), this.columnProp('class'), this.cx('footerCell')];
},
containerStyle() {
let bodyStyle = this.columnProp('footerStyle');

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

@ -22,14 +22,14 @@
:data-p-frozen-column="columnProp('frozen')"
:data-p-reorderable-column="reorderableColumns"
>
<span v-if="resizableColumns && !columnProp('frozen')" :class="cxo('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
<div :class="cxo('headerContent')" v-bind="getColumnPT('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="cxo('headerTitle')" v-bind="getColumnPT('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="getColumnPT('sort')">
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" data-pc-section="sorticon" :class="cxo('sortIcon')" />
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" data-pc-section="sorticon" :class="cx('sortIcon')" />
</span>
<span v-if="isMultiSorted()" :class="cxo('sortBadge')" v-bind="getColumnPT('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"
@ -92,6 +92,7 @@ import HeaderCheckbox from './HeaderCheckbox.vue';
export default {
name: 'HeaderCell',
hostName: 'DataTable',
extends: BaseComponent,
emits: [
'column-click',
@ -302,7 +303,7 @@ export default {
},
computed: {
containerClass() {
return [this.cxo('headerCell'), this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'), this.columnProp('class')];
return [this.cx('headerCell'), this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'), this.columnProp('class')];
},
containerStyle() {
let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle') : this.columnProp('headerStyle');

11
components/lib/datatable/HeaderCheckbox.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="cxo('headerCheckboxWrapper')" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPT('headerCheckboxWrapper')">
<div :class="cxo('hiddenHeaderInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
<div :class="cx('headerCheckboxWrapper')" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPT('headerCheckboxWrapper')">
<div :class="cx('hiddenHeaderInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
<input
ref="input"
type="checkbox"
@ -13,9 +13,9 @@
v-bind="getColumnPT('hiddenHeaderInput')"
/>
</div>
<div ref="box" :class="cxo('headerCheckbox')" v-bind="getColumnPT('headerCheckbox')">
<component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" :class="cxo('headerCheckboxIcon')" />
<CheckIcon v-else-if="!headerCheckboxIconTemplate && !!checked" :class="cxo('headerCheckboxIcon')" v-bind="getColumnPT('headerCheckboxIcon')" />
<div ref="box" :class="cx('headerCheckbox')" v-bind="getColumnPT('headerCheckbox')">
<component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" :class="cx('headerCheckboxIcon')" />
<CheckIcon v-else-if="!headerCheckboxIconTemplate && !!checked" :class="cx('headerCheckboxIcon')" v-bind="getColumnPT('headerCheckboxIcon')" />
</div>
</div>
</template>
@ -27,6 +27,7 @@ import { DomHandler } from 'primevue/utils';
export default {
name: 'HeaderCheckbox',
hostName: 'DataTable',
extends: BaseComponent,
emits: ['change'],
props: {

11
components/lib/datatable/RowCheckbox.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="cxo('checkboxWrapper')" @click="onClick" v-bind="getColumnPT('checkboxWrapper')">
<div :class="cxo('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<div :class="cx('checkboxWrapper')" @click="onClick" v-bind="getColumnPT('checkboxWrapper')">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input
ref="input"
type="checkbox"
@ -14,9 +14,9 @@
v-bind="getColumnPT('hiddenInput')"
/>
</div>
<div ref="box" :class="cxo('checkbox')" v-bind="getColumnPT('checkbox')">
<component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" :class="cxo('checkboxIcon')" />
<CheckIcon v-else-if="!rowCheckboxIconTemplate && !!checked" :class="cxo('checkboxIcon')" v-bind="getColumnPT('checkboxIcon')" />
<div ref="box" :class="cx('checkbox')" v-bind="getColumnPT('checkbox')">
<component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" :class="cx('checkboxIcon')" />
<CheckIcon v-else-if="!rowCheckboxIconTemplate && !!checked" :class="cx('checkboxIcon')" v-bind="getColumnPT('checkboxIcon')" />
</div>
</div>
</template>
@ -28,6 +28,7 @@ import { DomHandler } from 'primevue/utils';
export default {
name: 'RowCheckbox',
hostName: 'DataTable',
extends: BaseComponent,
emits: ['change'],
props: {

9
components/lib/datatable/RowRadioButton.vue
View File

@ -1,10 +1,10 @@
<template>
<div :class="cxo('radiobuttonWrapper')" @click="onClick" v-bind="getColumnPT('radiobuttonWrapper')">
<div :class="cxo('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<div :class="cx('radiobuttonWrapper')" @click="onClick" v-bind="getColumnPT('radiobuttonWrapper')">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" v-bind="getColumnPT('hiddenInput')" />
</div>
<div ref="box" :class="cxo('radiobutton')" v-bind="getColumnPT('radiobutton')">
<div :class="cxo('radiobuttonIcon')" v-bind="getColumnPT('radiobuttonIcon')"></div>
<div ref="box" :class="cx('radiobutton')" v-bind="getColumnPT('radiobutton')">
<div :class="cx('radiobuttonIcon')" v-bind="getColumnPT('radiobuttonIcon')"></div>
</div>
</div>
</template>
@ -15,6 +15,7 @@ import { DomHandler } from 'primevue/utils';
export default {
name: 'RowRadioButton',
hostName: 'DataTable',
extends: BaseComponent,
inheritAttrs: false,
emits: ['change'],

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

@ -1,23 +1,23 @@
<template>
<tbody :ref="bodyRef" :class="cxo('tbody')" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody')">
<tbody :ref="bodyRef" :class="cx('tbody')" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody')">
<template v-if="!empty">
<template v-for="(rowData, index) of value">
<tr
v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(index))"
:key="getRowKey(rowData, getRowIndex(index)) + '_subheader'"
:class="cxo('rowGroupHeader')"
:class="cx('rowGroupHeader')"
:style="rowGroupHeaderStyle"
role="row"
v-bind="ptm('rowGroupHeader')"
>
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
<button v-if="expandableRowGroups" :class="cxo('rowGroupToggler')" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="getColumnPT('rowGroupToggler')">
<button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="getColumnPT('rowGroupToggler')">
<component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" />
<template v-else>
<span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="[cxo('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" :class="cxo('rowGroupTogglerIcon')" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="[cxo('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" :class="cxo('rowGroupTogglerIcon')" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="getColumnPT('rowGroupTogglerIcon')" />
<ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="getColumnPT('rowGroupTogglerIcon')" />
</template>
</button>
<component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
@ -87,7 +87,7 @@
v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)"
:key="getRowKey(rowData, getRowIndex(index)) + '_expansion'"
:id="expandedRowId + '_' + index + '_expansion'"
:class="cxo('rowExpansion')"
:class="cx('rowExpansion')"
role="row"
v-bind="ptm('rowExpansion')"
>
@ -98,7 +98,7 @@
<tr
v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))"
:key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'"
:class="cxo('rowGroupFooter')"
:class="cx('rowGroupFooter')"
role="row"
v-bind="ptm('rowGroupFooter')"
>
@ -108,7 +108,7 @@
</tr>
</template>
</template>
<tr v-else :class="cxo('emptyMessage')" role="row" v-bind="ptm('emptyMessage')">
<tr v-else :class="cx('emptyMessage')" role="row" v-bind="ptm('emptyMessage')">
<td :colspan="columnsLength" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
<component v-if="templates.empty" :is="templates.empty" />
</td>
@ -354,7 +354,7 @@ export default {
}
}
return [this.cxo('row', { rowData }), rowStyleClass];
return [this.cx('row', { rowData }), rowStyleClass];
},
shouldRenderRowGroupFooter(value, rowData, i) {
if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {

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

@ -1,5 +1,5 @@
<template>
<tfoot v-if="hasFooter" :class="cxo('tfoot')" :style="sx('tfoot')" role="rowgroup" v-bind="columnGroup ? { ...ptm('tfoot'), ...getColumnGroupPT('root') } : ptm('tfoot')" data-pc-section="tfoot">
<tfoot v-if="hasFooter" :class="cx('tfoot')" :style="sx('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" />
@ -22,6 +22,7 @@ import FooterCell from './FooterCell.vue';
export default {
name: 'TableFooter',
hostName: 'DataTable',
extends: BaseComponent,
props: {
columnGroup: {

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

@ -1,5 +1,5 @@
<template>
<thead :class="cxo('thead')" :style="sxo('thead')" role="rowgroup" v-bind="columnGroup ? { ...ptm('thead'), ...getColumnGroupPT('root') } : ptm('thead')" data-pc-section="thead">
<thead :class="cx('thead')" :style="sx('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">