mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Refactor #3965 - Refactor on DataTable Column index context
This commit is contained in:
parent
6cbe5735b8
commit
9cb888b6a0
6 changed files with 66 additions and 55 deletions
|
@ -30,7 +30,7 @@
|
||||||
/>
|
/>
|
||||||
<component v-else-if="column.children && column.children.body && !column.children.editor && d_editing" :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" />
|
<component v-else-if="column.children && column.children.body && !column.children.editor && d_editing" :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" />
|
||||||
<template v-else-if="columnProp('selectionMode')">
|
<template v-else-if="columnProp('selectionMode')">
|
||||||
<DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :name="name" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" :column="column" :unstyled="unstyled" :pt="pt" />
|
<DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :name="name" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" :column="column" :index="index" :unstyled="unstyled" :pt="pt" />
|
||||||
<DTCheckbox
|
<DTCheckbox
|
||||||
v-else-if="columnProp('selectionMode') === 'multiple'"
|
v-else-if="columnProp('selectionMode') === 'multiple'"
|
||||||
:value="rowData"
|
:value="rowData"
|
||||||
|
@ -39,6 +39,7 @@
|
||||||
:aria-selected="selected ? true : undefined"
|
:aria-selected="selected ? true : undefined"
|
||||||
@change="toggleRowWithCheckbox($event, rowIndex)"
|
@change="toggleRowWithCheckbox($event, rowIndex)"
|
||||||
:column="column"
|
:column="column"
|
||||||
|
:index="index"
|
||||||
:unstyled="unstyled"
|
:unstyled="unstyled"
|
||||||
:pt="pt"
|
:pt="pt"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="cx('columnFilter')" v-bind="getColumnPTOptions('columnFilter')">
|
<div :class="cx('columnFilter')" v-bind="getColumnPT('columnFilter')">
|
||||||
<div v-if="display === 'row'" :class="cx('filterInput')" v-bind="{ ...filterInputProps, ...getColumnPTOptions('filterInput') }">
|
<div v-if="display === 'row'" :class="cx('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
|
||||||
|
@ -14,12 +14,12 @@
|
||||||
:class="cx('filterMenuButton')"
|
:class="cx('filterMenuButton')"
|
||||||
@click="toggleMenu($event)"
|
@click="toggleMenu($event)"
|
||||||
@keydown="onToggleButtonKeyDown($event)"
|
@keydown="onToggleButtonKeyDown($event)"
|
||||||
v-bind="getColumnPTOptions('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="getColumnPTOptions('headerFilterClearButton')">
|
<button v-if="showClearButton && display === 'row'" :class="cx('headerFilterClearButton')" type="button" @click="clearFilter()" v-bind="getColumnPT('headerFilterClearButton')">
|
||||||
<component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPTOptions('filterClearIcon')" />
|
<component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPT('filterClearIcon')" />
|
||||||
</button>
|
</button>
|
||||||
<Portal>
|
<Portal>
|
||||||
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
|
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
|
||||||
|
@ -34,11 +34,11 @@
|
||||||
@keydown.escape="hide"
|
@keydown.escape="hide"
|
||||||
@click="onContentClick"
|
@click="onContentClick"
|
||||||
@mousedown="onContentMouseDown"
|
@mousedown="onContentMouseDown"
|
||||||
v-bind="getColumnPTOptions('filterOverlay')"
|
v-bind="getColumnPT('filterOverlay')"
|
||||||
>
|
>
|
||||||
<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="getColumnPTOptions('filterRowItems')">
|
<ul :class="cx('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"
|
||||||
|
@ -47,18 +47,18 @@
|
||||||
@keydown="onRowMatchModeKeyDown($event)"
|
@keydown="onRowMatchModeKeyDown($event)"
|
||||||
@keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
|
@keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
|
||||||
:tabindex="i === 0 ? '0' : null"
|
:tabindex="i === 0 ? '0' : null"
|
||||||
v-bind="getColumnPTOptions('filterRowItem')"
|
v-bind="getColumnPT('filterRowItem')"
|
||||||
>
|
>
|
||||||
{{ matchMode.label }}
|
{{ matchMode.label }}
|
||||||
</li>
|
</li>
|
||||||
<li :class="cx('filterSeparator')" v-bind="getColumnPTOptions('filterSeparator')"></li>
|
<li :class="cx('filterSeparator')" v-bind="getColumnPT('filterSeparator')"></li>
|
||||||
<li :class="cx('filterRowItem')" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPTOptions('filterRowItem')">
|
<li :class="cx('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="getColumnPTOptions('filterOperator')">
|
<div v-if="isShowOperator" :class="cx('filterOperator')" v-bind="getColumnPT('filterOperator')">
|
||||||
<CFDropdown
|
<CFDropdown
|
||||||
:options="operatorOptions"
|
:options="operatorOptions"
|
||||||
:modelValue="operator"
|
:modelValue="operator"
|
||||||
|
@ -68,12 +68,12 @@
|
||||||
optionValue="value"
|
optionValue="value"
|
||||||
@update:modelValue="onOperatorChange($event)"
|
@update:modelValue="onOperatorChange($event)"
|
||||||
:unstyled="unstyled"
|
:unstyled="unstyled"
|
||||||
:pt="getColumnPTOptions('filterOperatorDropdown')"
|
:pt="getColumnPT('filterOperatorDropdown')"
|
||||||
data-pc-section="filteroperatordropdown"
|
data-pc-section="filteroperatordropdown"
|
||||||
></CFDropdown>
|
></CFDropdown>
|
||||||
</div>
|
</div>
|
||||||
<div :class="cx('filterConstraints')" v-bind="getColumnPTOptions('filterConstraints')">
|
<div :class="cx('filterConstraints')" v-bind="getColumnPT('filterConstraints')">
|
||||||
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterConstraint')" v-bind="getColumnPTOptions('filterConstraint')">
|
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterConstraint')" v-bind="getColumnPT('filterConstraint')">
|
||||||
<CFDropdown
|
<CFDropdown
|
||||||
v-if="isShowMatchModes"
|
v-if="isShowMatchModes"
|
||||||
:options="matchModes"
|
:options="matchModes"
|
||||||
|
@ -84,11 +84,11 @@
|
||||||
:aria-label="filterConstraintAriaLabel"
|
:aria-label="filterConstraintAriaLabel"
|
||||||
@update:modelValue="onMenuMatchModeChange($event, i)"
|
@update:modelValue="onMenuMatchModeChange($event, i)"
|
||||||
:unstyled="unstyled"
|
:unstyled="unstyled"
|
||||||
:pt="getColumnPTOptions('filterMatchModeDropdown')"
|
:pt="getColumnPT('filterMatchModeDropdown')"
|
||||||
data-pc-section="filtermatchmodedropdown"
|
data-pc-section="filtermatchmodedropdown"
|
||||||
></CFDropdown>
|
></CFDropdown>
|
||||||
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
|
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
|
||||||
<div v-bind="getColumnPTOptions('filterRemove')">
|
<div v-bind="getColumnPT('filterRemove')">
|
||||||
<CFButton
|
<CFButton
|
||||||
v-if="showRemoveIcon"
|
v-if="showRemoveIcon"
|
||||||
type="button"
|
type="button"
|
||||||
|
@ -96,17 +96,17 @@
|
||||||
@click="removeConstraint(i)"
|
@click="removeConstraint(i)"
|
||||||
:label="removeRuleButtonLabel"
|
:label="removeRuleButtonLabel"
|
||||||
:unstyled="unstyled"
|
:unstyled="unstyled"
|
||||||
:pt="getColumnPTOptions('filterRemoveButton')"
|
:pt="getColumnPT('filterRemoveButton')"
|
||||||
data-pc-section="filterremovebutton"
|
data-pc-section="filterremovebutton"
|
||||||
>
|
>
|
||||||
<template #icon="iconProps">
|
<template #icon="iconProps">
|
||||||
<component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterRemoveButton')['icon']" />
|
<component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveButton')['icon']" />
|
||||||
</template>
|
</template>
|
||||||
</CFButton>
|
</CFButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isShowAddConstraint" :class="cx('filterAddRule')" v-bind="getColumnPTOptions('filterAddRule')">
|
<div v-if="isShowAddConstraint" :class="cx('filterAddRule')" v-bind="getColumnPT('filterAddRule')">
|
||||||
<CFButton
|
<CFButton
|
||||||
type="button"
|
type="button"
|
||||||
:label="addRuleButtonLabel"
|
:label="addRuleButtonLabel"
|
||||||
|
@ -114,15 +114,15 @@
|
||||||
:class="cx('filterAddRuleButton')"
|
:class="cx('filterAddRuleButton')"
|
||||||
@click="addConstraint()"
|
@click="addConstraint()"
|
||||||
:unstyled="unstyled"
|
:unstyled="unstyled"
|
||||||
:pt="getColumnPTOptions('filterAddRuleButton')"
|
:pt="getColumnPT('filterAddRuleButton')"
|
||||||
data-pc-section="filteraddrulebutton"
|
data-pc-section="filteraddrulebutton"
|
||||||
>
|
>
|
||||||
<template #icon="iconProps">
|
<template #icon="iconProps">
|
||||||
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterAddRuleButton')['icon']" />
|
<component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddRuleButton')['icon']" />
|
||||||
</template>
|
</template>
|
||||||
</CFButton>
|
</CFButton>
|
||||||
</div>
|
</div>
|
||||||
<div :class="cx('filterButtonbar')" v-bind="getColumnPTOptions('filterButtonbar')">
|
<div :class="cx('filterButtonbar')" v-bind="getColumnPT('filterButtonbar')">
|
||||||
<CFButton
|
<CFButton
|
||||||
v-if="!filterClearTemplate && showClearButton"
|
v-if="!filterClearTemplate && showClearButton"
|
||||||
type="button"
|
type="button"
|
||||||
|
@ -130,7 +130,7 @@
|
||||||
:label="clearButtonLabel"
|
:label="clearButtonLabel"
|
||||||
@click="clearFilter"
|
@click="clearFilter"
|
||||||
:unstyled="unstyled"
|
:unstyled="unstyled"
|
||||||
:pt="getColumnPTOptions('filterClearButton')"
|
:pt="getColumnPT('filterClearButton')"
|
||||||
data-pc-section="filterclearbutton"
|
data-pc-section="filterclearbutton"
|
||||||
></CFButton>
|
></CFButton>
|
||||||
<component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
|
<component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
|
||||||
|
@ -142,7 +142,7 @@
|
||||||
:label="applyButtonLabel"
|
:label="applyButtonLabel"
|
||||||
@click="applyFilter()"
|
@click="applyFilter()"
|
||||||
:unstyled="unstyled"
|
:unstyled="unstyled"
|
||||||
:pt="getColumnPTOptions('filterApplyButton')"
|
:pt="getColumnPT('filterApplyButton')"
|
||||||
data-pc-section="filterapplybutton"
|
data-pc-section="filterapplybutton"
|
||||||
></CFButton>
|
></CFButton>
|
||||||
<component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
|
<component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
|
||||||
|
@ -315,7 +315,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getColumnPTOptions(key) {
|
getColumnPT(key) {
|
||||||
return this.ptmo(this.getColumnProp(), key, {
|
return this.ptmo(this.getColumnProp(), key, {
|
||||||
props: this.column.props,
|
props: this.column.props,
|
||||||
parent: {
|
parent: {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="cx('headerCheckboxWrapper')" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPTOptions('headerCheckboxWrapper')">
|
<div :class="cx('headerCheckboxWrapper')" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPT('headerCheckboxWrapper')">
|
||||||
<div :class="cx('hiddenHeaderInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPTOptions('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
|
<div :class="cx('hiddenHeaderInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
|
||||||
<input
|
<input
|
||||||
ref="input"
|
ref="input"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
|
@ -10,12 +10,12 @@
|
||||||
:aria-label="headerCheckboxAriaLabel"
|
:aria-label="headerCheckboxAriaLabel"
|
||||||
@focus="onFocus($event)"
|
@focus="onFocus($event)"
|
||||||
@blur="onBlur($event)"
|
@blur="onBlur($event)"
|
||||||
v-bind="getColumnPTOptions('hiddenHeaderInput')"
|
v-bind="getColumnPT('hiddenHeaderInput')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div ref="box" :class="cx('headerCheckbox')" v-bind="getColumnPTOptions('headerCheckbox')">
|
<div ref="box" :class="cx('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="cx('headerCheckboxIcon')" />
|
||||||
<CheckIcon v-else-if="!headerCheckboxIconTemplate && !!checked" :class="cx('headerCheckboxIcon')" v-bind="getColumnPTOptions('headerCheckboxIcon')" />
|
<CheckIcon v-else-if="!headerCheckboxIconTemplate && !!checked" :class="cx('headerCheckboxIcon')" v-bind="getColumnPT('headerCheckboxIcon')" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -44,7 +44,7 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getColumnPTOptions(key) {
|
getColumnPT(key) {
|
||||||
return this.ptmo(this.getColumnProp(), key, {
|
return this.ptmo(this.getColumnProp(), key, {
|
||||||
props: this.column.props,
|
props: this.column.props,
|
||||||
parent: {
|
parent: {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="cx('checkboxWrapper')" @click="onClick" v-bind="getColumnPTOptions('checkboxWrapper')">
|
<div :class="cx('checkboxWrapper')" @click="onClick" v-bind="getColumnPT('checkboxWrapper')">
|
||||||
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPTOptions('hiddenInputWrapper')" :data-p-hidden-accessible="true">
|
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
|
||||||
<input
|
<input
|
||||||
ref="input"
|
ref="input"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
|
@ -11,12 +11,12 @@
|
||||||
@focus="onFocus($event)"
|
@focus="onFocus($event)"
|
||||||
@blur="onBlur($event)"
|
@blur="onBlur($event)"
|
||||||
@keydown="onKeydown"
|
@keydown="onKeydown"
|
||||||
v-bind="getColumnPTOptions('hiddenInput')"
|
v-bind="getColumnPT('hiddenInput')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div ref="box" :class="cx('checkbox')" v-bind="getColumnPTOptions('checkbox')">
|
<div ref="box" :class="cx('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="cx('checkboxIcon')" />
|
||||||
<CheckIcon v-else-if="!rowCheckboxIconTemplate && !!checked" :class="cx('checkboxIcon')" v-bind="getColumnPTOptions('checkboxIcon')" />
|
<CheckIcon v-else-if="!rowCheckboxIconTemplate && !!checked" :class="cx('checkboxIcon')" v-bind="getColumnPT('checkboxIcon')" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -37,6 +37,10 @@ export default {
|
||||||
rowCheckboxIconTemplate: {
|
rowCheckboxIconTemplate: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: null
|
default: null
|
||||||
|
},
|
||||||
|
index: {
|
||||||
|
type: Number,
|
||||||
|
default: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
@ -45,7 +49,7 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getColumnPTOptions(key) {
|
getColumnPT(key) {
|
||||||
return this.ptmo(this.getColumnProp(), key, {
|
return this.ptmo(this.getColumnProp(), key, {
|
||||||
props: this.column.props,
|
props: this.column.props,
|
||||||
parent: {
|
parent: {
|
||||||
|
@ -53,6 +57,7 @@ export default {
|
||||||
state: this.$data
|
state: this.$data
|
||||||
},
|
},
|
||||||
context: {
|
context: {
|
||||||
|
index: this.index,
|
||||||
checked: this.checked,
|
checked: this.checked,
|
||||||
focused: this.focused,
|
focused: this.focused,
|
||||||
disabled: this.$attrs.disabled
|
disabled: this.$attrs.disabled
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="cx('radiobuttonWrapper')" @click="onClick" v-bind="getColumnPTOptions('radiobuttonWrapper')">
|
<div :class="cx('radiobuttonWrapper')" @click="onClick" v-bind="getColumnPT('radiobuttonWrapper')">
|
||||||
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPTOptions('hiddenInputWrapper')" :data-p-hidden-accessible="true">
|
<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="getColumnPTOptions('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="getColumnPTOptions('radiobutton')">
|
<div ref="box" :class="cx('radiobutton')" v-bind="getColumnPT('radiobutton')">
|
||||||
<div :class="cx('radiobuttonIcon')" v-bind="getColumnPTOptions('radiobuttonIcon')"></div>
|
<div :class="cx('radiobuttonIcon')" v-bind="getColumnPT('radiobuttonIcon')"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -22,7 +22,11 @@ export default {
|
||||||
value: null,
|
value: null,
|
||||||
checked: null,
|
checked: null,
|
||||||
name: null,
|
name: null,
|
||||||
column: null
|
column: null,
|
||||||
|
index: {
|
||||||
|
type: Number,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -30,7 +34,7 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getColumnPTOptions(key) {
|
getColumnPT(key) {
|
||||||
return this.ptmo(this.getColumnProp(), key, {
|
return this.ptmo(this.getColumnProp(), key, {
|
||||||
props: this.column.props,
|
props: this.column.props,
|
||||||
parent: {
|
parent: {
|
||||||
|
@ -38,6 +42,7 @@ export default {
|
||||||
state: this.$data
|
state: this.$data
|
||||||
},
|
},
|
||||||
context: {
|
context: {
|
||||||
|
index: this.index,
|
||||||
checked: this.checked,
|
checked: this.checked,
|
||||||
focused: this.focused,
|
focused: this.focused,
|
||||||
disabled: this.$attrs.disabled
|
disabled: this.$attrs.disabled
|
||||||
|
|
|
@ -10,14 +10,14 @@
|
||||||
role="row"
|
role="row"
|
||||||
v-bind="ptm('rowgroupHeader')"
|
v-bind="ptm('rowgroupHeader')"
|
||||||
>
|
>
|
||||||
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('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="getColumnPTOptions('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)" />
|
<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="getColumnPTOptions('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="getColumnPTOptions('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="getColumnPTOptions('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="getColumnPTOptions('rowGroupTogglerIcon')" />
|
<ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" :class="cx('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)" />
|
||||||
|
@ -91,7 +91,7 @@
|
||||||
role="row"
|
role="row"
|
||||||
v-bind="ptm('rowExpansion')"
|
v-bind="ptm('rowExpansion')"
|
||||||
>
|
>
|
||||||
<td :colspan="columnsLength" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
|
<td :colspan="columnsLength" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
|
||||||
<component :is="templates['expansion']" :data="rowData" :index="getRowIndex(index)" />
|
<component :is="templates['expansion']" :data="rowData" :index="getRowIndex(index)" />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -102,14 +102,14 @@
|
||||||
role="row"
|
role="row"
|
||||||
v-bind="ptm('rowgroupFooter')"
|
v-bind="ptm('rowgroupFooter')"
|
||||||
>
|
>
|
||||||
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
|
<td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
|
||||||
<component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
|
<component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<tr v-else :class="cx('emptyMessage')" role="row" v-bind="ptm('emptyMessage')">
|
<tr v-else :class="cx('emptyMessage')" role="row" v-bind="ptm('emptyMessage')">
|
||||||
<td :colspan="columnsLength" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('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>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -305,7 +305,7 @@ export default {
|
||||||
columnProp(col, prop) {
|
columnProp(col, prop) {
|
||||||
return ObjectUtils.getVNodeProp(col, prop);
|
return ObjectUtils.getVNodeProp(col, prop);
|
||||||
},
|
},
|
||||||
getColumnPTOptions(column, key) {
|
getColumnPT(column, key) {
|
||||||
return this.ptmo(this.getColumnProp(column), key, {
|
return this.ptmo(this.getColumnProp(column), key, {
|
||||||
props: column.props,
|
props: column.props,
|
||||||
parent: {
|
parent: {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue