vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 17:32:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #5592 - For TreeTable

Browse source
This commit is contained in:
tugcekucukoglu 2024-05-02 13:27:11 +03:00
parent c2d1c57edf
commit 4f3ca3f2a2
6 changed files with 31 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

8
components/lib/treetable/BodyCell.vue
View file

@ -1,14 +1,14 @@
<template> <template>
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }" :data-p-frozen-column="columnProp('frozen')"> <td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }" :data-p-frozen-column="columnProp('frozen')">
<button v-if="columnProp('expander')" v-ripple type="button" :class="cx('rowToggler')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPT('rowToggler')" data-pc-group-section="rowactionbutton"> <button v-if="columnProp('expander')" v-ripple type="button" :class="cx('rowToggleButton')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPT('rowToggleButton')" data-pc-group-section="rowactionbutton">
<template v-if="node.loading && loadingMode === 'icon'"> <template v-if="node.loading && loadingMode === 'icon'">
<component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" :class="cx('nodetogglericon')" /> <component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" :class="cx('nodetogglericon')" />
<SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodetogglericon')" /> <SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodetogglericon')" />
</template> </template>
<template v-else> <template v-else>
<component v-if="column.children && column.children.rowtogglericon" :is="column.children && column.children.rowtogglericon" :node="node" :expanded="expanded" :class="cx('rowTogglerIcon')" /> <component v-if="column.children && column.children.rowtogglericon" :is="column.children && column.children.rowtogglericon" :node="node" :expanded="expanded" :class="cx('rowToggleIcon')" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" /> <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('rowToggleIcon')" v-bind="getColumnPT('rowToggleIcon')" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" /> <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('rowToggleIcon')" v-bind="getColumnPT('rowToggleIcon')" />
</template> </template>
</button> </button>
<Checkbox <Checkbox

2
components/lib/treetable/HeaderCell.vue
View file

@ -15,7 +15,7 @@
> >
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('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="getColumnPT('headerTitle')">{{ columnProp('header') }}</span> <span v-if="columnProp('header')" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ 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')" v-bind="getColumnPT('sortIcon')" /> <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sortIcon')" />
</span> </span>

10
components/lib/treetable/TreeTable.d.ts vendored
View file

@ -219,11 +219,11 @@ export interface TreeTablePassThroughOptions {
/** /**
* Used to pass attributes to the loading wrapper's DOM element. * Used to pass attributes to the loading wrapper's DOM element.
*/ */
loadingWrapper?: TreeTablePassThroughOptionType; loading?: TreeTablePassThroughOptionType;
/** /**
* Used to pass attributes to the loading overlay's DOM element. * Used to pass attributes to the mask's DOM element.
*/ */
loadingOverlay?: TreeTablePassThroughOptionType; mask?: TreeTablePassThroughOptionType;
/** /**
* Used to pass attributes to the loading icon's DOM element. * Used to pass attributes to the loading icon's DOM element.
*/ */
@ -238,9 +238,9 @@ export interface TreeTablePassThroughOptions {
*/ */
paginator?: PaginatorPassThroughOptionType<TreeTableSharedPassThroughMethodOptions>; paginator?: PaginatorPassThroughOptionType<TreeTableSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the wrapper's DOM element. * Used to pass attributes to the table container's DOM element.
*/ */
wrapper?: TreeTablePassThroughOptionType; tableContainer?: TreeTablePassThroughOptionType;
/** /**
* Used to pass attributes to the table's DOM element. * Used to pass attributes to the table's DOM element.
*/ */

10
components/lib/treetable/TreeTable.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div :class="cx('root')" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptmi('root')"> <div :class="cx('root')" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptmi('root')">
<slot></slot> <slot></slot>
<div v-if="loading && loadingMode === 'mask'" :class="cx('loadingWrapper')" v-bind="ptm('loadingWrapper')"> <div v-if="loading && loadingMode === 'mask'" :class="cx('loading')" v-bind="ptm('loading')">
<div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')"> <div :class="cx('mask')" v-bind="ptm('mask')">
<slot name="loadingicon" :class="cx('loadingIcon')"> <slot name="loadingicon" :class="cx('loadingIcon')">
<component :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="[cx('loadingIcon'), loadingIcon]" v-bind="ptm('loadingIcon')" /> <component :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="[cx('loadingIcon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
</slot> </slot>
@ -51,7 +51,7 @@
<slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot> <slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
</template> </template>
</TTPaginator> </TTPaginator>
<div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')"> <div :class="cx('tableContainer')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('tableContainer')">
<table ref="table" role="table" v-bind="{ ...tableProps, ...ptm('table') }"> <table ref="table" role="table" v-bind="{ ...tableProps, ...ptm('table') }">
<thead :class="cx('thead')" role="rowgroup" v-bind="ptm('thead')"> <thead :class="cx('thead')" role="rowgroup" v-bind="ptm('thead')">
<tr role="row" v-bind="ptm('headerRow')"> <tr role="row" v-bind="ptm('headerRow')">
@ -163,7 +163,7 @@
<div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')"> <div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
<div ref="resizeHelper" :class="cx('resizeHelper')" style="display: none" v-bind="ptm('resizeHelper')"></div> <div ref="resizeHelper" :class="cx('columnResizeHelper')" style="display: none" v-bind="ptm('columnResizeHelper')"></div>
</div> </div>
</template> </template>
@ -393,7 +393,7 @@ export default {
if ( if (
DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'columntitle' ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' || DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' ||
DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' || DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' ||

11
components/lib/treetable/TreeTableRow.vue
View file

@ -141,7 +141,12 @@ export default {
this.$emit('node-toggle', this.node); this.$emit('node-toggle', this.node);
}, },
onClick(event) { onClick(event) {
if (DomHandler.isClickable(event.target) || DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowtoggler' || DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowtogglericon' || event.target.tagName === 'path') { if (
DomHandler.isClickable(event.target) ||
DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowtogglebutton' ||
DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowtoggleicon' ||
event.target.tagName === 'path'
) {
return; return;
} }
@ -219,7 +224,7 @@ export default {
}, },
onArrowRightKey(event) { onArrowRightKey(event) {
const ishiddenIcon = DomHandler.findSingle(event.currentTarget, 'button').style.visibility === 'hidden'; const ishiddenIcon = DomHandler.findSingle(event.currentTarget, 'button').style.visibility === 'hidden';
const togglerElement = DomHandler.findSingle(this.$refs.node, '[data-pc-section="rowtoggler"]'); const togglerElement = DomHandler.findSingle(this.$refs.node, '[data-pc-section="rowtogglebutton"]');
if (ishiddenIcon) return; if (ishiddenIcon) return;
@ -238,7 +243,7 @@ export default {
const currentTarget = event.currentTarget; const currentTarget = event.currentTarget;
const ishiddenIcon = DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden'; const ishiddenIcon = DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden';
const togglerElement = DomHandler.findSingle(currentTarget, '[data-pc-section="rowtoggler"]'); const togglerElement = DomHandler.findSingle(currentTarget, '[data-pc-section="rowtogglebutton"]');
if (this.expanded && !ishiddenIcon) { if (this.expanded && !ishiddenIcon) {
togglerElement.click(); togglerElement.click();

17
components/lib/treetable/style/TreeTableStyle.js
View file

@ -459,12 +459,12 @@ const classes = {
'p-treetable-lg': props.size === 'large' 'p-treetable-lg': props.size === 'large'
} }
], ],
loadingWrapper: 'p-treetable-loading', //TODO: required? loading: 'p-treetable-loading', //TODO: required?
loadingOverlay: 'p-treetable-mask p-component-overlay', mask: 'p-treetable-mask p-component-overlay',
loadingIcon: 'p-treetable-loading-icon', loadingIcon: 'p-treetable-loading-icon',
header: 'p-treetable-header', header: 'p-treetable-header',
paginator: ({ position }) => 'p-treetable-paginator-' + position, paginator: ({ position }) => 'p-treetable-paginator-' + position,
wrapper: 'p-treetable-table-container', tableContainer: 'p-treetable-table-container',
thead: 'p-treetable-thead', thead: 'p-treetable-thead',
headerCell: ({ instance, props }) => [ headerCell: ({ instance, props }) => [
{ {
@ -475,7 +475,7 @@ const classes = {
} }
], ],
columnResizer: 'p-treetable-column-resizer', columnResizer: 'p-treetable-column-resizer',
headerTitle: 'p-treetable-column-title', columnTitle: 'p-treetable-column-title',
sortIcon: 'p-treetable-sort-icon', sortIcon: 'p-treetable-sort-icon',
sortBadge: 'p-treetable-sort-badge', sortBadge: 'p-treetable-sort-badge',
tbody: 'p-treetable-tbody', tbody: 'p-treetable-tbody',
@ -489,9 +489,9 @@ const classes = {
'p-treetable-frozen-column': instance.columnProp('frozen') 'p-treetable-frozen-column': instance.columnProp('frozen')
} }
], ],
rowToggler: 'p-treetable-row-toggle-button', rowToggleButton: 'p-treetable-row-toggle-button',
rowTogglerIcon: 'p-treetable-row-toggle-icon', rowToggleIcon: 'p-treetable-row-toggle-icon',
rowCheckbox: ({ instance }) => 'p-treetable-row-checkbox', rowCheckbox: 'p-treetable-row-checkbox',
emptyMessage: 'p-treetable-empty-message', emptyMessage: 'p-treetable-empty-message',
tfoot: 'p-treetable-tfoot', tfoot: 'p-treetable-tfoot',
footerCell: ({ instance }) => [ footerCell: ({ instance }) => [
@ -499,9 +499,8 @@ const classes = {
'p-treetable-frozen-column': instance.columnProp('frozen') 'p-treetable-frozen-column': instance.columnProp('frozen')
} }
], ],
//treetable
footer: 'p-treetable-footer', footer: 'p-treetable-footer',
resizeHelper: 'p-treetable-column-resize-indicator' columnResizeHelper: 'p-treetable-column-resize-indicator'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({