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

Refactor #3983 - For TreeTable

pull/4030/head
Tuğçe Küçükoğlu 2023-06-05 11:36:46 +03:00
parent a5ec0a6b9f
commit 5b450d2ecc
6 changed files with 65 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
components/lib/treetable/BodyCell.vue
View File

@ -1,22 +1,22 @@
<template>
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
<button v-if="columnProp('expander')" v-ripple type="button" :class="cx('rowToggler')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPTOptions('rowToggler')">
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
<button v-if="columnProp('expander')" v-ripple type="button" :class="cx('rowToggler')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPT('rowToggler')">
<component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('rowTogglerIcon')" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPTOptions('rowTogglerIcon')" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPTOptions('rowTogglerIcon')" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
</button>
<div v-if="checkboxSelectionMode && columnProp('expander')" :class="cx('checkboxWrapper')" @click="toggleCheckbox" v-bind="getColumnPTOptions('checkboxWrapper')">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPTOptions('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" v-bind="getColumnPTOptions('hiddenInput')" />
<div v-if="checkboxSelectionMode && columnProp('expander')" :class="cx('checkboxWrapper')" @click="toggleCheckbox" v-bind="getColumnPT('checkboxWrapper')">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" v-bind="getColumnPT('hiddenInput')" />
</div>
<div ref="checkboxEl" :class="cx('checkbox')" v-bind="getColumnCheckboxPTOptions('checkbox')">
<div ref="checkboxEl" :class="cx('checkbox')" v-bind="getColumnCheckboxPT('checkbox')">
<component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" :class="cx('checkboxicon')" />
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="cx('checkboxicon')" v-bind="getColumnCheckboxPTOptions('checkboxIcon')" />
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="cx('checkboxicon')" v-bind="getColumnCheckboxPT('checkboxIcon')" />
</div>
</div>
<component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
<template v-else>
<span v-bind="getColumnPTOptions('cellContent')">{{ resolveFieldData(node.data, columnProp('field')) }}</span>
<span v-bind="getColumnPT('cellContent')">{{ resolveFieldData(node.data, columnProp('field')) }}</span>
</template>
</td>
</template>
@ -74,6 +74,10 @@ export default {
templates: {
type: Object,
default: null
},
index: {
type: Number,
default: null
}
},
data() {
@ -99,16 +103,24 @@ export default {
columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
getColumnPT(key) {
const columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index: this.index
}
});
};
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
},
getColumnCheckboxPTOptions(key) {
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo
},
getColumnCheckboxPT(key) {
return this.ptmo(this.getColumnProp(), key, {
props: this.column.props,
parent: {
@ -122,9 +134,6 @@ export default {
}
});
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo
},
updateStickyPosition() {
if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen');

17
components/lib/treetable/FooterCell.vue
View File

@ -1,5 +1,5 @@
<template>
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('footerCell') }">
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }">
<component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
{{ columnProp('footer') }}
</td>
@ -16,6 +16,10 @@ export default {
column: {
type: Object,
default: null
},
index: {
type: Number,
default: null
}
},
data() {
@ -37,14 +41,19 @@ export default {
columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
getColumnPT(key) {
const columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index: this.index
}
});
};
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;

25
components/lib/treetable/HeaderCell.vue
View File

@ -7,19 +7,19 @@
:tabindex="columnProp('sortable') ? '0' : null"
:aria-sort="ariaSort"
role="columnheader"
v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }"
v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }"
:data-p-sortable-column="columnProp('sortable')"
:data-p-resizable-column="resizableColumns"
:data-p-highlight="isColumnSorted()"
:data-p-frozen-column="columnProp('frozen')"
>
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="getColumnPTOptions('sort')">
<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" :class="cx('sortIcon')" />
</span>
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPTOptions('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
</th>
</template>
@ -58,6 +58,10 @@ export default {
sortMode: {
type: String,
default: 'single'
},
index: {
type: Number,
default: null
}
},
data() {
@ -79,14 +83,19 @@ export default {
columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
getColumnPT(key) {
const columnMetaData = {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index: this.index
}
});
};
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:

5
components/lib/treetable/TreeTable.d.ts vendored
View File

@ -8,6 +8,7 @@
*
*/
import { VNode } from 'vue';
import { ColumnPassThroughOptionType } from '../column';
import { PaginatorPassThroughOptionType } from '../paginator';
import { TreeNode } from '../tree';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
@ -282,6 +283,10 @@ export interface TreeTablePassThroughOptions {
* Uses to pass attributes to the hidden input's DOM element.
*/
hiddenInput?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the Column helper components.
*/
column?: ColumnPassThroughOptionType;
}
/**

5
components/lib/treetable/TreeTable.vue
View File

@ -60,6 +60,7 @@
:sortMode="sortMode"
@column-click="onColumnHeaderClick"
@column-resizestart="onColumnResizeStart"
:index="i"
:pt="pt"
></TTHeaderCell>
</template>
@ -67,7 +68,7 @@
<tr v-if="hasColumnFilter()" v-bind="ptm('headerRow')">
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
<th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'), columnProp(col, 'filterHeaderStyle')]" v-bind="ptm('headerCell')">
<component v-if="col.children && col.children.filter" :is="col.children.filter" :column="col" />
<component v-if="col.children && col.children.filter" :is="col.children.filter" :column="col" :index="i" />
</th>
</template>
</tr>
@ -103,7 +104,7 @@
<tfoot v-if="hasFooter" :class="cx('tfoot')" role="rowgroup" v-bind="ptm('tfoot')">
<tr role="row" v-bind="ptm('footerRow')">
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
<TTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt"></TTFooterCell>
<TTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :index="i" :pt="pt"></TTFooterCell>
</template>
</tr>
</tfoot>

1
components/lib/treetable/TreeTableRow.vue
View File

@ -32,6 +32,7 @@
:templates="templates"
@node-toggle="$emit('node-toggle', $event)"
@checkbox-toggle="toggleCheckbox"
:index="i"
:pt="pt"
></TTBodyCell>
</template>