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

Refactor #5592 - For TreeTable

pull/5677/head
tugcekucukoglu 2024-05-02 13:27:11 +03:00
parent c2d1c57edf
commit 4f3ca3f2a2
6 changed files with 31 additions and 27 deletions
Show Stats 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>
<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'">
<component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" :class="cx('nodetogglericon')" />
<SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodetogglericon')" />
</template>
<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-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')" />
<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('rowToggleIcon')" v-bind="getColumnPT('rowToggleIcon')" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('rowToggleIcon')" v-bind="getColumnPT('rowToggleIcon')" />
</template>
</button>
<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>
<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')">
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sortIcon')" />
</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.
*/
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.
*/
@ -238,9 +238,9 @@ export interface TreeTablePassThroughOptions {
*/
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.
*/

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

@ -1,8 +1,8 @@
<template>
<div :class="cx('root')" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptmi('root')">
<slot></slot>
<div v-if="loading && loadingMode === 'mask'" :class="cx('loadingWrapper')" v-bind="ptm('loadingWrapper')">
<div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
<div v-if="loading && loadingMode === 'mask'" :class="cx('loading')" v-bind="ptm('loading')">
<div :class="cx('mask')" v-bind="ptm('mask')">
<slot name="loadingicon" :class="cx('loadingIcon')">
<component :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="[cx('loadingIcon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
</slot>
@ -51,7 +51,7 @@
<slot name="paginatorrowsperpagedropdownicon" :class="slotProps.class"></slot>
</template>
</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') }">
<thead :class="cx('thead')" role="rowgroup" v-bind="ptm('thead')">
<tr role="row" v-bind="ptm('headerRow')">
@ -163,7 +163,7 @@
<div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
<slot name="footer"></slot>
</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>
</template>
@ -393,7 +393,7 @@ export default {
if (
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.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);
},
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;
}
@ -219,7 +224,7 @@ export default {
},
onArrowRightKey(event) {
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;
@ -238,7 +243,7 @@ export default {
const currentTarget = event.currentTarget;
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) {
togglerElement.click();

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

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