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

Refactor #3965 - Reimplementation DataTable for VirtualScroller

pull/4041/head
Tuğçe Küçükoğlu 2023-06-07 16:50:56 +03:00
parent 0a1b7e3b15
commit b85be19225
11 changed files with 83 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -76,6 +76,9 @@ export default {
cx(key = '', params = {}) { 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; 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.isUnstyled ? this._getOptionValue(this.$parentInstance.$parentInstance.$css.classes, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params }) : undefined;
},
sx(key = '', when = true, params = {}) { sx(key = '', when = true, params = {}) {
if (when) { if (when) {
const self = this._getOptionValue(this.$css.inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params }); const self = this._getOptionValue(this.$css.inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
@ -84,6 +87,16 @@ export default {
return [base, self]; return [base, self];
} }
return undefined;
},
sxo(key = '', when = true, params = {}) {
if (when) {
const self = this._getOptionValue(this.$parentInstance.$parentInstance.$css.inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
const base = this._getOptionValue(inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
return [base, self];
}
return undefined; return undefined;
} }
}, },

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

@ -15,7 +15,7 @@
: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="getColumnPT('columnTitle')">{{ columnProp('header') }}</span> <span v-if="responsiveLayout === 'stack'" :class="cxo('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"
@ -45,30 +45,30 @@
/> />
</template> </template>
<template v-else-if="columnProp('rowReorder')"> <template v-else-if="columnProp('rowReorder')">
<component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cx('rowReorderIcon')" /> <component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cxo('rowReorderIcon')" />
<i v-else-if="columnProp('rowReorderIcon')" :class="[cx('rowReorderIcon'), columnProp('rowReorderIcon')]" /> <i v-else-if="columnProp('rowReorderIcon')" :class="[cxo('rowReorderIcon'), columnProp('rowReorderIcon')]" />
<BarsIcon v-else :class="cx('rowReorderIcon')" data-pc-section="rowreordericon" /> <BarsIcon v-else :class="cxo('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="getColumnPT('rowToggler')"> <button v-ripple :class="cxo('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="[cxo('rowTogglerIcon'), expandedRowIcon]" />
<ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" /> <ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" :class="cxo('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
<span v-else-if="!isRowExpanded && collapsedRowIcon" :class="[cx('rowTogglerIcon'), collapsedRowIcon]" /> <span v-else-if="!isRowExpanded && collapsedRowIcon" :class="[cxo('rowTogglerIcon'), collapsedRowIcon]" />
<ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" /> <ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" :class="cxo('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="getColumnPT('rowEditorInitButton')"> <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="cx('rowEditorInitIcon')" v-bind="getColumnPT('rowEditorInitIcon')" /> <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="cxo('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="getColumnPT('rowEditorSaveButton')"> <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="cx('rowEditorSaveIcon')" v-bind="getColumnPT('rowEditorSaveIcon')" /> <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="cxo('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="getColumnPT('rowEditorCancelButton')"> <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="cx('rowEditorCancelIcon')" v-bind="getColumnPT('rowEditorCancelIcon')" /> <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="cxo('rowEditorCancelIcon')" v-bind="getColumnPT('rowEditorCancelIcon')" />
</button> </button>
</template> </template>
<template v-else>{{ resolveFieldData() }}</template> <template v-else>{{ resolveFieldData() }}</template>
@ -464,7 +464,7 @@ export default {
return this.columnProp('field'); return this.columnProp('field');
}, },
containerClass() { containerClass() {
return [this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')]; return [this.columnProp('bodyClass'), this.columnProp('class'), this.cxo('bodyCell')];
}, },
containerStyle() { containerStyle() {
let bodyStyle = this.columnProp('bodyStyle'); let bodyStyle = this.columnProp('bodyStyle');

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

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

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

@ -86,7 +86,7 @@ export default {
}, },
computed: { computed: {
containerClass() { containerClass() {
return [this.columnProp('footerClass'), this.columnProp('class'), this.cx('footerCell')]; return [this.columnProp('footerClass'), this.columnProp('class'), this.cxo('footerCell')];
}, },
containerStyle() { containerStyle() {
let bodyStyle = this.columnProp('footerStyle'); let bodyStyle = this.columnProp('footerStyle');

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

@ -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="getColumnPT('columnResizer')"></span> <span v-if="resizableColumns && !columnProp('frozen')" :class="cxo('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
<div :class="cx('headerContent')" v-bind="getColumnPT('headerContent')"> <div :class="cxo('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="getColumnPT('headerTitle')">{{ columnProp('header') }}</span> <span v-if="columnProp('header')" :class="cxo('headerTitle')" v-bind="getColumnPT('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="getColumnPT('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="cxo('sortIcon')" />
</span> </span>
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getBadgeValue() }}</span> <span v-if="isMultiSorted()" :class="cxo('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"
@ -302,7 +302,7 @@ export default {
}, },
computed: { computed: {
containerClass() { containerClass() {
return [this.cx('headerCell'), this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'), this.columnProp('class')]; return [this.cxo('headerCell'), this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'), this.columnProp('class')];
}, },
containerStyle() { containerStyle() {
let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle') : this.columnProp('headerStyle'); let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle') : this.columnProp('headerStyle');

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

@ -1,6 +1,6 @@
<template> <template>
<div :class="cx('headerCheckboxWrapper')" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPT('headerCheckboxWrapper')"> <div :class="cxo('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"> <div :class="cxo('hiddenHeaderInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
<input <input
ref="input" ref="input"
type="checkbox" type="checkbox"
@ -13,9 +13,9 @@
v-bind="getColumnPT('hiddenHeaderInput')" v-bind="getColumnPT('hiddenHeaderInput')"
/> />
</div> </div>
<div ref="box" :class="cx('headerCheckbox')" v-bind="getColumnPT('headerCheckbox')"> <div ref="box" :class="cxo('headerCheckbox')" v-bind="getColumnPT('headerCheckbox')">
<component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" :class="cx('headerCheckboxIcon')" /> <component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" :class="cxo('headerCheckboxIcon')" />
<CheckIcon v-else-if="!headerCheckboxIconTemplate && !!checked" :class="cx('headerCheckboxIcon')" v-bind="getColumnPT('headerCheckboxIcon')" /> <CheckIcon v-else-if="!headerCheckboxIconTemplate && !!checked" :class="cxo('headerCheckboxIcon')" v-bind="getColumnPT('headerCheckboxIcon')" />
</div> </div>
</div> </div>
</template> </template>

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

@ -1,6 +1,6 @@
<template> <template>
<div :class="cx('checkboxWrapper')" @click="onClick" v-bind="getColumnPT('checkboxWrapper')"> <div :class="cxo('checkboxWrapper')" @click="onClick" v-bind="getColumnPT('checkboxWrapper')">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true"> <div :class="cxo('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input <input
ref="input" ref="input"
type="checkbox" type="checkbox"
@ -14,9 +14,9 @@
v-bind="getColumnPT('hiddenInput')" v-bind="getColumnPT('hiddenInput')"
/> />
</div> </div>
<div ref="box" :class="cx('checkbox')" v-bind="getColumnPT('checkbox')"> <div ref="box" :class="cxo('checkbox')" v-bind="getColumnPT('checkbox')">
<component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" :class="cx('checkboxIcon')" /> <component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" :class="cxo('checkboxIcon')" />
<CheckIcon v-else-if="!rowCheckboxIconTemplate && !!checked" :class="cx('checkboxIcon')" v-bind="getColumnPT('checkboxIcon')" /> <CheckIcon v-else-if="!rowCheckboxIconTemplate && !!checked" :class="cxo('checkboxIcon')" v-bind="getColumnPT('checkboxIcon')" />
</div> </div>
</div> </div>
</template> </template>

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

@ -1,10 +1,10 @@
<template> <template>
<div :class="cx('radiobuttonWrapper')" @click="onClick" v-bind="getColumnPT('radiobuttonWrapper')"> <div :class="cxo('radiobuttonWrapper')" @click="onClick" v-bind="getColumnPT('radiobuttonWrapper')">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true"> <div :class="cxo('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')" /> <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>
<div ref="box" :class="cx('radiobutton')" v-bind="getColumnPT('radiobutton')"> <div ref="box" :class="cxo('radiobutton')" v-bind="getColumnPT('radiobutton')">
<div :class="cx('radiobuttonIcon')" v-bind="getColumnPT('radiobuttonIcon')"></div> <div :class="cxo('radiobuttonIcon')" v-bind="getColumnPT('radiobuttonIcon')"></div>
</div> </div>
</div> </div>
</template> </template>

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

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

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

@ -1,5 +1,5 @@
<template> <template>
<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"> <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">
<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" />

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

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