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> <template>
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }"> <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="getColumnPTOptions('rowToggler')"> <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-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-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="getColumnPTOptions('rowTogglerIcon')" /> <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
</button> </button>
<div v-if="checkboxSelectionMode && columnProp('expander')" :class="cx('checkboxWrapper')" @click="toggleCheckbox" v-bind="getColumnPTOptions('checkboxWrapper')"> <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="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 type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" v-bind="getColumnPTOptions('hiddenInput')" /> <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" v-bind="getColumnPT('hiddenInput')" />
</div> </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-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>
</div> </div>
<component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" /> <component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
<template v-else> <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> </template>
</td> </td>
</template> </template>
@ -74,6 +74,10 @@ export default {
templates: { templates: {
type: Object, type: Object,
default: null default: null
},
index: {
type: Number,
default: null
} }
}, },
data() { data() {
@ -99,16 +103,24 @@ export default {
columnProp(prop) { columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop); return ObjectUtils.getVNodeProp(this.column, prop);
}, },
getColumnPTOptions(key) { getColumnPT(key) {
return this.ptmo(this.getColumnProp(), key, { const columnMetaData = {
props: this.column.props, props: this.column.props,
parent: { parent: {
props: this.$props, props: this.$props,
state: this.$data 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, { return this.ptmo(this.getColumnProp(), key, {
props: this.column.props, props: this.column.props,
parent: { parent: {
@ -122,9 +134,6 @@ export default {
} }
}); });
}, },
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo
},
updateStickyPosition() { updateStickyPosition() {
if (this.columnProp('frozen')) { if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen'); let align = this.columnProp('alignFrozen');

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

@ -1,5 +1,5 @@
<template> <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" /> <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
{{ columnProp('footer') }} {{ columnProp('footer') }}
</td> </td>
@ -16,6 +16,10 @@ export default {
column: { column: {
type: Object, type: Object,
default: null default: null
},
index: {
type: Number,
default: null
} }
}, },
data() { data() {
@ -37,14 +41,19 @@ export default {
columnProp(prop) { columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop); return ObjectUtils.getVNodeProp(this.column, prop);
}, },
getColumnPTOptions(key) { getColumnPT(key) {
return this.ptmo(this.getColumnProp(), key, { const columnMetaData = {
props: this.column.props, props: this.column.props,
parent: { parent: {
props: this.$props, props: this.$props,
state: this.$data state: this.$data
},
context: {
index: this.index
} }
}); };
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
}, },
getColumnProp() { getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; 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" :tabindex="columnProp('sortable') ? '0' : null"
:aria-sort="ariaSort" :aria-sort="ariaSort"
role="columnheader" role="columnheader"
v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }" v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }"
:data-p-sortable-column="columnProp('sortable')" :data-p-sortable-column="columnProp('sortable')"
:data-p-resizable-column="resizableColumns" :data-p-resizable-column="resizableColumns"
:data-p-highlight="isColumnSorted()" :data-p-highlight="isColumnSorted()"
:data-p-frozen-column="columnProp('frozen')" :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" /> <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('header')" :class="cx('headerTitle')" v-bind="getColumnPT('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="getColumnPTOptions('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="cx('sortIcon')" />
</span> </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> </th>
</template> </template>
@ -58,6 +58,10 @@ export default {
sortMode: { sortMode: {
type: String, type: String,
default: 'single' default: 'single'
},
index: {
type: Number,
default: null
} }
}, },
data() { data() {
@ -79,14 +83,19 @@ export default {
columnProp(prop) { columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop); return ObjectUtils.getVNodeProp(this.column, prop);
}, },
getColumnPTOptions(key) { getColumnPT(key) {
return this.ptmo(this.getColumnProp(), key, { const columnMetaData = {
props: this.column.props, props: this.column.props,
parent: { parent: {
props: this.$props, props: this.$props,
state: this.$data state: this.$data
},
context: {
index: this.index
} }
}); };
return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
}, },
getColumnProp() { getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo: 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 { VNode } from 'vue';
import { ColumnPassThroughOptionType } from '../column';
import { PaginatorPassThroughOptionType } from '../paginator'; import { PaginatorPassThroughOptionType } from '../paginator';
import { TreeNode } from '../tree'; import { TreeNode } from '../tree';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
@ -282,6 +283,10 @@ export interface TreeTablePassThroughOptions {
* Uses to pass attributes to the hidden input's DOM element. * Uses to pass attributes to the hidden input's DOM element.
*/ */
hiddenInput?: TreeTablePassThroughOptionType; 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" :sortMode="sortMode"
@column-click="onColumnHeaderClick" @column-click="onColumnHeaderClick"
@column-resizestart="onColumnResizeStart" @column-resizestart="onColumnResizeStart"
:index="i"
:pt="pt" :pt="pt"
></TTHeaderCell> ></TTHeaderCell>
</template> </template>
@ -67,7 +68,7 @@
<tr v-if="hasColumnFilter()" v-bind="ptm('headerRow')"> <tr v-if="hasColumnFilter()" 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">
<th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'), columnProp(col, 'filterHeaderStyle')]" v-bind="ptm('headerCell')"> <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> </th>
</template> </template>
</tr> </tr>
@ -103,7 +104,7 @@
<tfoot v-if="hasFooter" :class="cx('tfoot')" role="rowgroup" v-bind="ptm('tfoot')"> <tfoot v-if="hasFooter" :class="cx('tfoot')" role="rowgroup" v-bind="ptm('tfoot')">
<tr role="row" v-bind="ptm('footerRow')"> <tr 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">
<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> </template>
</tr> </tr>
</tfoot> </tfoot>

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

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