Refactor #3965 - Reimplementation DataTable for VirtualScroller
Tuğçe Küçükoğlu
parent
0a1b7e3b15
commit
b85be19225
|
|
@ -76,6 +76,9 @@ 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.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 = {}) {
|
||||
if (when) {
|
||||
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 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;
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
:data-p-cell-editing="d_editing"
|
||||
: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-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="cx('rowReorderIcon')" />
|
||||
<i v-else-if="columnProp('rowReorderIcon')" :class="[cx('rowReorderIcon'), columnProp('rowReorderIcon')]" />
|
||||
<BarsIcon v-else :class="cx('rowReorderIcon')" data-pc-section="rowreordericon" />
|
||||
<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" />
|
||||
</template>
|
||||
<template v-else-if="columnProp('expander')">
|
||||
<button v-ripple :class="cx('rowToggler')" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="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" />
|
||||
<template v-else>
|
||||
<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')" />
|
||||
<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')" />
|
||||
</template>
|
||||
</button>
|
||||
</template>
|
||||
<template v-else-if="editMode === 'row' && columnProp('rowEditor')">
|
||||
<button v-if="!d_editing" v-ripple :class="cx('rowEditorInitButton')" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPT('rowEditorInitButton')">
|
||||
<component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="cx('rowEditorInitIcon')" v-bind="getColumnPT('rowEditorInitIcon')" />
|
||||
<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>
|
||||
<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 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>
|
||||
<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 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>
|
||||
</template>
|
||||
<template v-else>{{ resolveFieldData() }}</template>
|
||||
|
|
@ -464,7 +464,7 @@ export default {
|
|||
return this.columnProp('field');
|
||||
},
|
||||
containerClass() {
|
||||
return [this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')];
|
||||
return [this.columnProp('bodyClass'), this.columnProp('class'), this.cxo('bodyCell')];
|
||||
},
|
||||
containerStyle() {
|
||||
let bodyStyle = this.columnProp('bodyStyle');
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :class="cx('columnFilter')" v-bind="getColumnPT('columnFilter')">
|
||||
<div v-if="display === 'row'" :class="cx('filterInput')" v-bind="{ ...filterInputProps, ...getColumnPT('filterInput') }">
|
||||
<div :class="cxo('columnFilter')" v-bind="getColumnPT('columnFilter')">
|
||||
<div v-if="display === 'row'" :class="cxo('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="cx('filterMenuButton')"
|
||||
:class="cxo('filterMenuButton')"
|
||||
@click="toggleMenu($event)"
|
||||
@keydown="onToggleButtonKeyDown($event)"
|
||||
v-bind="getColumnPT('filterMenuButton')"
|
||||
>
|
||||
<component :is="filterIconTemplate || 'FilterIcon'" />
|
||||
</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')" />
|
||||
</button>
|
||||
<Portal>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
v-focustrap="{ autoFocus: true }"
|
||||
:aria-modal="overlayVisible"
|
||||
role="dialog"
|
||||
:class="[cx('filterOverlay'), filterMenuClass]"
|
||||
:class="[cxo('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="cx('filterRowItems')" v-bind="getColumnPT('filterRowItems')">
|
||||
<ul :class="cxo('filterRowItems')" v-bind="getColumnPT('filterRowItems')">
|
||||
<li
|
||||
v-for="(matchMode, i) of matchModes"
|
||||
:key="matchMode.label"
|
||||
:class="cx('filterRowItem', { matchMode })"
|
||||
:class="cxo('filterRowItem', { matchMode })"
|
||||
@click="onRowMatchModeChange(matchMode.value)"
|
||||
@keydown="onRowMatchModeKeyDown($event)"
|
||||
@keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
|
||||
|
|
@ -51,19 +51,19 @@
|
|||
>
|
||||
{{ matchMode.label }}
|
||||
</li>
|
||||
<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')">
|
||||
<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')">
|
||||
{{ noFilterLabel }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<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
|
||||
:options="operatorOptions"
|
||||
:modelValue="operator"
|
||||
:aria-label="filterOperatorAriaLabel"
|
||||
:class="cx('filterOperatorDropdown')"
|
||||
:class="cxo('filterOperatorDropdown')"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
@update:modelValue="onOperatorChange($event)"
|
||||
|
|
@ -72,13 +72,13 @@
|
|||
data-pc-section="filteroperatordropdown"
|
||||
></CFDropdown>
|
||||
</div>
|
||||
<div :class="cx('filterConstraints')" v-bind="getColumnPT('filterConstraints')">
|
||||
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterConstraint')" v-bind="getColumnPT('filterConstraint')">
|
||||
<div :class="cxo('filterConstraints')" v-bind="getColumnPT('filterConstraints')">
|
||||
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cxo('filterConstraint')" v-bind="getColumnPT('filterConstraint')">
|
||||
<CFDropdown
|
||||
v-if="isShowMatchModes"
|
||||
:options="matchModes"
|
||||
:modelValue="fieldConstraint.matchMode"
|
||||
:class="cx('filterMatchModeDropdown')"
|
||||
:class="cxo('filterMatchModeDropdown')"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:aria-label="filterConstraintAriaLabel"
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
<CFButton
|
||||
v-if="showRemoveIcon"
|
||||
type="button"
|
||||
:class="cx('filterRemoveButton')"
|
||||
:class="cxo('filterRemoveButton')"
|
||||
@click="removeConstraint(i)"
|
||||
:label="removeRuleButtonLabel"
|
||||
:unstyled="unstyled"
|
||||
|
|
@ -106,12 +106,12 @@
|
|||
</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
|
||||
type="button"
|
||||
:label="addRuleButtonLabel"
|
||||
iconPos="left"
|
||||
:class="cx('filterAddRuleButton')"
|
||||
:class="cxo('filterAddRuleButton')"
|
||||
@click="addConstraint()"
|
||||
:unstyled="unstyled"
|
||||
:pt="getColumnPT('filterAddRuleButton')"
|
||||
|
|
@ -122,11 +122,11 @@
|
|||
</template>
|
||||
</CFButton>
|
||||
</div>
|
||||
<div :class="cx('filterButtonbar')" v-bind="getColumnPT('filterButtonbar')">
|
||||
<div :class="cxo('filterButtonbar')" v-bind="getColumnPT('filterButtonbar')">
|
||||
<CFButton
|
||||
v-if="!filterClearTemplate && showClearButton"
|
||||
type="button"
|
||||
:class="cx('filterClearButton')"
|
||||
:class="cxo('filterClearButton')"
|
||||
:label="clearButtonLabel"
|
||||
@click="clearFilter"
|
||||
:unstyled="unstyled"
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
<CFButton
|
||||
v-if="!filterApplyTemplate"
|
||||
type="button"
|
||||
:class="cx('filterApplyButton')"
|
||||
:class="cxo('filterApplyButton')"
|
||||
:label="applyButtonLabel"
|
||||
@click="applyFilter()"
|
||||
:unstyled="unstyled"
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [this.columnProp('footerClass'), this.columnProp('class'), this.cx('footerCell')];
|
||||
return [this.columnProp('footerClass'), this.columnProp('class'), this.cxo('footerCell')];
|
||||
},
|
||||
containerStyle() {
|
||||
let bodyStyle = this.columnProp('footerStyle');
|
||||
|
|
|
|||
|
|
@ -22,14 +22,14 @@
|
|||
:data-p-frozen-column="columnProp('frozen')"
|
||||
:data-p-reorderable-column="reorderableColumns"
|
||||
>
|
||||
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
|
||||
<div :class="cx('headerContent')" v-bind="getColumnPT('headerContent')">
|
||||
<span v-if="resizableColumns && !columnProp('frozen')" :class="cxo('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
|
||||
<div :class="cxo('headerContent')" v-bind="getColumnPT('headerContent')">
|
||||
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
|
||||
<span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="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')">
|
||||
<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 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
|
||||
v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
|
||||
:checked="allRowsSelected"
|
||||
|
|
@ -302,7 +302,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
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() {
|
||||
let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle') : this.columnProp('headerStyle');
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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">
|
||||
<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">
|
||||
<input
|
||||
ref="input"
|
||||
type="checkbox"
|
||||
|
|
@ -13,9 +13,9 @@
|
|||
v-bind="getColumnPT('hiddenHeaderInput')"
|
||||
/>
|
||||
</div>
|
||||
<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 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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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">
|
||||
<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">
|
||||
<input
|
||||
ref="input"
|
||||
type="checkbox"
|
||||
|
|
@ -14,9 +14,9 @@
|
|||
v-bind="getColumnPT('hiddenInput')"
|
||||
/>
|
||||
</div>
|
||||
<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 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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<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">
|
||||
<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">
|
||||
<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="cx('radiobutton')" v-bind="getColumnPT('radiobutton')">
|
||||
<div :class="cx('radiobuttonIcon')" v-bind="getColumnPT('radiobuttonIcon')"></div>
|
||||
<div ref="box" :class="cxo('radiobutton')" v-bind="getColumnPT('radiobutton')">
|
||||
<div :class="cxo('radiobuttonIcon')" v-bind="getColumnPT('radiobuttonIcon')"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<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-for="(rowData, index) of value">
|
||||
<tr
|
||||
v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(index))"
|
||||
:key="getRowKey(rowData, getRowIndex(index)) + '_subheader'"
|
||||
:class="cx('rowGroupHeader')"
|
||||
:class="cxo('rowGroupHeader')"
|
||||
:style="rowGroupHeaderStyle"
|
||||
role="row"
|
||||
v-bind="ptm('rowGroupHeader')"
|
||||
>
|
||||
<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)" />
|
||||
<template v-else>
|
||||
<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')" />
|
||||
<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')" />
|
||||
</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="cx('rowExpansion')"
|
||||
:class="cxo('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="cx('rowGroupFooter')"
|
||||
:class="cxo('rowGroupFooter')"
|
||||
role="row"
|
||||
v-bind="ptm('rowGroupFooter')"
|
||||
>
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
</tr>
|
||||
</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') }">
|
||||
<component v-if="templates.empty" :is="templates.empty" />
|
||||
</td>
|
||||
|
|
@ -353,7 +353,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
return [this.cx('row', { rowData }), rowStyleClass];
|
||||
return [this.cxo('row', { rowData }), rowStyleClass];
|
||||
},
|
||||
shouldRenderRowGroupFooter(value, rowData, i) {
|
||||
if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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')">
|
||||
<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" />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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">
|
||||
<tr role="row" v-bind="ptm('headerRow')">
|
||||
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
|
||||
|
|
|
|||
Loading…
Reference in New Issue