Refactor #3983 - For TreeTable
Tuğçe Küçükoğlu
parent
78ca522d92
commit
9bb203993a
|
|
@ -0,0 +1,435 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-treetable {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-treetable table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.p-treetable .p-sortable-column {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-treetable-responsive-scroll > .p-treetable-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.p-treetable-responsive-scroll > .p-treetable-wrapper > table,
|
||||
.p-treetable-auto-layout > .p-treetable-wrapper > table {
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
.p-treetable-hoverable-rows .p-treetable-tbody > tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-treetable-toggler {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-treetable-toggler + .p-checkbox {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-treetable-toggler + .p-checkbox + span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Resizable */
|
||||
.p-treetable-resizable > .p-treetable-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.p-treetable-resizable .p-treetable-thead > tr > th,
|
||||
.p-treetable-resizable .p-treetable-tfoot > tr > td,
|
||||
.p-treetable-resizable .p-treetable-tbody > tr > td {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {
|
||||
background-clip: padding-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-treetable .p-column-resizer {
|
||||
display: block;
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
width: 0.5rem;
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
cursor: col-resize;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.p-treetable .p-column-resizer-helper {
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-treetable .p-treetable-loading-overlay {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Scrollable */
|
||||
.p-treetable-scrollable .p-treetable-wrapper {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-treetable-table {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-treetable-thead,
|
||||
.p-treetable-scrollable .p-treetable-tbody,
|
||||
.p-treetable-scrollable .p-treetable-tfoot {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-treetable-thead > tr,
|
||||
.p-treetable-scrollable .p-treetable-tbody > tr,
|
||||
.p-treetable-scrollable .p-treetable-tfoot > tr {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-treetable-thead > tr > th,
|
||||
.p-treetable-scrollable .p-treetable-tbody > tr > td,
|
||||
.p-treetable-scrollable .p-treetable-tfoot > tr > td {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-treetable-thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-treetable-tfoot {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-frozen-column {
|
||||
position: sticky;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable th.p-frozen-column {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable-both .p-treetable-thead > tr > th,
|
||||
.p-treetable-scrollable-both .p-treetable-tbody > tr > td,
|
||||
.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
|
||||
.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
|
||||
.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-treetable-flex-scrollable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.p-treetable-flex-scrollable .p-treetable-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ props }) => [
|
||||
'p-treetable p-component',
|
||||
{
|
||||
'p-treetable-hoverable-rows': props.rowHover || props.rowSelectionMode,
|
||||
'p-treetable-auto-layout': props.autoLayout,
|
||||
'p-treetable-resizable': props.resizableColumns,
|
||||
'p-treetable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
|
||||
'p-treetable-gridlines': props.showGridlines,
|
||||
'p-treetable-scrollable': props.scrollable,
|
||||
'p-treetable-scrollable-vertical': props.scrollable && props.scrollDirection === 'vertical',
|
||||
'p-treetable-scrollable-horizontal': props.scrollable && props.scrollDirection === 'horizontal',
|
||||
'p-treetable-scrollable-both': props.scrollable && props.scrollDirection === 'both',
|
||||
'p-treetable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
|
||||
'p-treetable-responsive-scroll': props.responsiveLayout === 'scroll'
|
||||
}
|
||||
],
|
||||
loadingWrapper: 'p-treetable-loading',
|
||||
loadingOverlay: 'p-treetable-loading-overlay p-component-overlay',
|
||||
loadingIcon: 'p-treetable-loading-icon',
|
||||
header: 'p-treetable-header',
|
||||
paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
|
||||
wrapper: 'p-treetable-wrapper',
|
||||
thead: 'p-treetable-thead',
|
||||
//headercell
|
||||
headerCell: ({ instance, props, column }) =>
|
||||
column && instance.hasColumnFilter()
|
||||
? [
|
||||
'p-filter-column',
|
||||
{
|
||||
'p-frozen-column': instance.columnProp(column, 'frozen')
|
||||
}
|
||||
]
|
||||
: [
|
||||
{
|
||||
'p-sortable-column': instance.columnProp('sortable'),
|
||||
'p-resizable-column': props.resizableColumns,
|
||||
'p-highlight': instance.isColumnSorted(),
|
||||
'p-frozen-column': instance.columnProp('frozen')
|
||||
}
|
||||
],
|
||||
columnResizer: 'p-column-resizer',
|
||||
headerTitle: 'p-column-title',
|
||||
sortIcon: 'p-sortable-column-icon',
|
||||
sortBadge: 'p-sortable-column-badge',
|
||||
tbody: 'p-treetable-tbody',
|
||||
//ttrow
|
||||
row: ({ instance }) => [
|
||||
{
|
||||
'p-highlight': instance.selected
|
||||
}
|
||||
],
|
||||
//bodycell
|
||||
bodyCell: ({ instance }) => [
|
||||
{
|
||||
'p-frozen-column': instance.columnProp('frozen')
|
||||
}
|
||||
],
|
||||
rowToggler: 'p-treetable-toggler p-link',
|
||||
rowTogglerIcon: 'p-tree-toggler-icon',
|
||||
checkboxWrapper: ({ instance }) => [
|
||||
'p-checkbox p-treetable-checkbox p-component',
|
||||
{
|
||||
'p-checkbox-focused': instance.checkboxFocused
|
||||
}
|
||||
],
|
||||
hiddenInputWrapper: 'p-hidden-accessible',
|
||||
checkbox: ({ instance }) => [
|
||||
'p-checkbox-box',
|
||||
{
|
||||
'p-highlight': instance.checked,
|
||||
'p-focus': instance.checkboxFocused,
|
||||
'p-indeterminate': instance.partialChecked
|
||||
}
|
||||
],
|
||||
checkboxicon: 'p-checkbox-icon',
|
||||
//treetable
|
||||
emptyMessage: 'p-treetable-emptymessage',
|
||||
tfoot: 'p-treetable-tfoot',
|
||||
//footercell
|
||||
footerCell: ({ instance }) => [
|
||||
{
|
||||
'p-frozen-column': instance.columnProp('frozen')
|
||||
}
|
||||
],
|
||||
//treetable
|
||||
footer: 'p-treetable-footer',
|
||||
resizeHelper: 'p-column-resizer-helper p-highlight'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { id: 'primevue_treetable_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseTreeTable',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
value: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
expandedKeys: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
selectionKeys: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
selectionMode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
metaKeySelection: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
rows: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
first: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
totalRecords: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
paginator: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
paginatorPosition: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
alwaysShowPaginator: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
paginatorTemplate: {
|
||||
type: String,
|
||||
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
|
||||
},
|
||||
pageLinkSize: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
rowsPerPageOptions: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
currentPageReportTemplate: {
|
||||
type: String,
|
||||
default: '({currentPage} of {totalPages})'
|
||||
},
|
||||
lazy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadingIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
rowHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autoLayout: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
sortField: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
sortOrder: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
defaultSortOrder: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
multiSortMeta: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
sortMode: {
|
||||
type: String,
|
||||
default: 'single'
|
||||
},
|
||||
removableSort: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
filterMode: {
|
||||
type: String,
|
||||
default: 'lenient'
|
||||
},
|
||||
filterLocale: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
resizableColumns: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
columnResizeMode: {
|
||||
type: String,
|
||||
default: 'fit'
|
||||
},
|
||||
indentation: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
showGridlines: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
scrollDirection: {
|
||||
type: String,
|
||||
default: 'vertical'
|
||||
},
|
||||
scrollHeight: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
responsiveLayout: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
tableProps: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
|
||||
<button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPTOptions('rowToggler')">
|
||||
<component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
|
||||
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" v-bind="getColumnPTOptions('rowTogglerIcon')" />
|
||||
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" v-bind="getColumnPTOptions('rowTogglerIcon')" />
|
||||
<button v-if="columnProp('expander')" v-ripple type="button" :class="cx('rowToggler')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPTOptions('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')" />
|
||||
</button>
|
||||
<div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox" v-bind="getColumnPTOptions('checkboxWrapper')">
|
||||
<div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenInputWrapper')">
|
||||
<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>
|
||||
<div ref="checkboxEl" :class="checkboxClass" v-bind="getColumnCheckboxPTOptions('checkbox')">
|
||||
<component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
|
||||
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" v-bind="getColumnCheckboxPTOptions('checkboxIcon')" />
|
||||
<div ref="checkboxEl" :class="cx('checkbox')" v-bind="getColumnCheckboxPTOptions('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')" />
|
||||
</div>
|
||||
</div>
|
||||
<component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
|
||||
|
|
@ -165,13 +165,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [
|
||||
this.columnProp('bodyClass'),
|
||||
this.columnProp('class'),
|
||||
{
|
||||
'p-frozen-column': this.columnProp('frozen')
|
||||
}
|
||||
];
|
||||
return [this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')];
|
||||
},
|
||||
containerStyle() {
|
||||
let bodyStyle = this.columnProp('bodyStyle');
|
||||
|
|
@ -187,9 +181,6 @@ export default {
|
|||
},
|
||||
checkboxSelectionMode() {
|
||||
return this.selectionMode === 'checkbox';
|
||||
},
|
||||
checkboxClass() {
|
||||
return ['p-checkbox-box', { 'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked }];
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -77,13 +77,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [
|
||||
this.columnProp('footerClass'),
|
||||
this.columnProp('class'),
|
||||
{
|
||||
'p-frozen-column': this.columnProp('frozen')
|
||||
}
|
||||
];
|
||||
return [this.columnProp('footerClass'), this.columnProp('class'), this.cx('footerCell')];
|
||||
},
|
||||
containerStyle() {
|
||||
let bodyStyle = this.columnProp('footerStyle');
|
||||
|
|
|
|||
|
|
@ -1,21 +1,25 @@
|
|||
<template>
|
||||
<th
|
||||
:style="[containerStyle]"
|
||||
:class="containerClass"
|
||||
:style="[containerStyle]"
|
||||
@click="onClick"
|
||||
@keydown="onKeyDown"
|
||||
:tabindex="columnProp('sortable') ? '0' : null"
|
||||
:aria-sort="ariaSort"
|
||||
role="columnheader"
|
||||
v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('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="p-column-resizer" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
|
||||
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
|
||||
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
|
||||
<span v-if="columnProp('header')" class="p-column-title" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
|
||||
<span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
|
||||
<span v-if="columnProp('sortable')" v-bind="getColumnPTOptions('sort')">
|
||||
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" class="p-sortable-column-icon" />
|
||||
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" />
|
||||
</span>
|
||||
<span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="getColumnPTOptions('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
|
||||
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPTOptions('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
|
||||
</th>
|
||||
</template>
|
||||
|
||||
|
|
@ -125,7 +129,7 @@ export default {
|
|||
this.$emit('column-click', { originalEvent: event, column: this.column });
|
||||
},
|
||||
onKeyDown(event) {
|
||||
if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
|
||||
if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
|
||||
this.$emit('column-click', { originalEvent: event, column: this.column });
|
||||
|
||||
event.preventDefault();
|
||||
|
|
@ -157,16 +161,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [
|
||||
this.columnProp('headerClass'),
|
||||
this.columnProp('class'),
|
||||
{
|
||||
'p-sortable-column': this.columnProp('sortable'),
|
||||
'p-resizable-column': this.resizableColumns,
|
||||
'p-highlight': this.isColumnSorted(),
|
||||
'p-frozen-column': this.columnProp('frozen')
|
||||
}
|
||||
];
|
||||
return [this.columnProp('headerClass'), this.columnProp('class'), this.cx('headerCell')];
|
||||
},
|
||||
containerStyle() {
|
||||
let headerStyle = this.columnProp('headerStyle');
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div :class="containerClass" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptm('root')">
|
||||
<div v-if="loading" class="p-treetable-loading" v-bind="ptm('loadingWrapper')">
|
||||
<div class="p-treetable-loading-overlay p-component-overlay" v-bind="ptm('loadingOverlay')">
|
||||
<slot name="loadingicon">
|
||||
<component :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-treetable-loading-icon', loadingIcon]" v-bind="ptm('loadingIcon')" />
|
||||
<div :class="cx('root')" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptm('root')" data-pc-name="treetable">
|
||||
<div v-if="loading" :class="cx('loadingWrapper')" v-bind="ptm('loadingWrapper')">
|
||||
<div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
|
||||
<slot name="loadingicon" :class="cx('loadingIcon')">
|
||||
<component :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="[cx('loadingIcon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$slots.header" class="p-treetable-header" v-bind="ptm('header')">
|
||||
<div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<TTPaginator
|
||||
|
|
@ -19,10 +19,11 @@
|
|||
:template="paginatorTemplate"
|
||||
:rowsPerPageOptions="rowsPerPageOptions"
|
||||
:currentPageReportTemplate="currentPageReportTemplate"
|
||||
class="p-paginator-top"
|
||||
:class="cx('paginator')"
|
||||
@page="onPage($event)"
|
||||
:alwaysShow="alwaysShowPaginator"
|
||||
:pt="ptm('paginator')"
|
||||
data-pc-section="paginator"
|
||||
>
|
||||
<template v-if="$slots.paginatorstart" #start>
|
||||
<slot name="paginatorstart"></slot>
|
||||
|
|
@ -43,9 +44,9 @@
|
|||
<slot name="paginatorlastpagelinkicon"></slot>
|
||||
</template>
|
||||
</TTPaginator>
|
||||
<div class="p-treetable-wrapper" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
|
||||
<div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
|
||||
<table ref="table" role="table" v-bind="{ ...tableProps, ...ptm('table') }">
|
||||
<thead class="p-treetable-thead" role="rowgroup" v-bind="ptm('thead')">
|
||||
<thead :class="cx('thead')" role="rowgroup" v-bind="ptm('thead')">
|
||||
<tr role="row" v-bind="ptm('headerRow')">
|
||||
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
|
||||
<TTHeaderCell
|
||||
|
|
@ -70,7 +71,7 @@
|
|||
</template>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="p-treetable-tbody" role="rowgroup" v-bind="ptm('tbody')">
|
||||
<tbody :class="cx('tbody')" role="rowgroup" v-bind="ptm('tbody')">
|
||||
<template v-if="!empty">
|
||||
<TTRow
|
||||
v-for="(node, index) of dataToRender"
|
||||
|
|
@ -92,13 +93,13 @@
|
|||
:pt="pt"
|
||||
></TTRow>
|
||||
</template>
|
||||
<tr v-else class="p-treetable-emptymessage" v-bind="ptm('emptyMessage')">
|
||||
<tr v-else :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
|
||||
<td :colspan="columns.length" v-bind="ptm('bodyCell')">
|
||||
<slot name="empty"></slot>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot v-if="hasFooter" class="p-treetable-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')">
|
||||
<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>
|
||||
|
|
@ -116,10 +117,11 @@
|
|||
:template="paginatorTemplate"
|
||||
:rowsPerPageOptions="rowsPerPageOptions"
|
||||
:currentPageReportTemplate="currentPageReportTemplate"
|
||||
class="p-paginator-bottom"
|
||||
:class="cx('paginator')"
|
||||
@page="onPage($event)"
|
||||
:alwaysShow="alwaysShowPaginator"
|
||||
:pt="pt"
|
||||
data-pc-section="paginator"
|
||||
>
|
||||
<template v-if="$slots.paginatorstart" #start>
|
||||
<slot name="paginatorstart"></slot>
|
||||
|
|
@ -140,26 +142,26 @@
|
|||
<slot name="paginatorlastpagelinkicon"></slot>
|
||||
</template>
|
||||
</TTPaginator>
|
||||
<div v-if="$slots.footer" class="p-treetable-footer" v-bind="ptm('footer')">
|
||||
<div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
<div ref="resizeHelper" class="p-column-resizer-helper p-highlight" style="display: none" v-bind="ptm('resizeHelper')"></div>
|
||||
<div ref="resizeHelper" :class="cx('resizeHelper')" style="display: none" v-bind="ptm('resizeHelper')"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FilterService } from 'primevue/api';
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import SpinnerIcon from 'primevue/icons/spinner';
|
||||
import Paginator from 'primevue/paginator';
|
||||
import { DomHandler, ObjectUtils } from 'primevue/utils';
|
||||
import BaseTreeTable from './BaseTreeTable.vue';
|
||||
import FooterCell from './FooterCell.vue';
|
||||
import HeaderCell from './HeaderCell.vue';
|
||||
import TreeTableRow from './TreeTableRow.vue';
|
||||
|
||||
export default {
|
||||
name: 'TreeTable',
|
||||
extends: BaseComponent,
|
||||
extends: BaseTreeTable,
|
||||
emits: [
|
||||
'node-expand',
|
||||
'node-collapse',
|
||||
|
|
@ -177,160 +179,6 @@ export default {
|
|||
'filter',
|
||||
'column-resize-end'
|
||||
],
|
||||
props: {
|
||||
value: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
expandedKeys: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
selectionKeys: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
selectionMode: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
metaKeySelection: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
rows: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
first: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
totalRecords: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
paginator: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
paginatorPosition: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
alwaysShowPaginator: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
paginatorTemplate: {
|
||||
type: String,
|
||||
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
|
||||
},
|
||||
pageLinkSize: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
rowsPerPageOptions: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
currentPageReportTemplate: {
|
||||
type: String,
|
||||
default: '({currentPage} of {totalPages})'
|
||||
},
|
||||
lazy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadingIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
rowHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autoLayout: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
sortField: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
sortOrder: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
defaultSortOrder: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
multiSortMeta: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
sortMode: {
|
||||
type: String,
|
||||
default: 'single'
|
||||
},
|
||||
removableSort: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
filterMode: {
|
||||
type: String,
|
||||
default: 'lenient'
|
||||
},
|
||||
filterLocale: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
resizableColumns: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
columnResizeMode: {
|
||||
type: String,
|
||||
default: 'fit'
|
||||
},
|
||||
indentation: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
showGridlines: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
scrollDirection: {
|
||||
type: String,
|
||||
default: 'vertical'
|
||||
},
|
||||
scrollHeight: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
responsiveLayout: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
tableProps: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
documentColumnResizeListener: null,
|
||||
documentColumnResizeEndListener: null,
|
||||
lastResizeHelperX: null,
|
||||
|
|
@ -491,13 +339,7 @@ export default {
|
|||
this.$emit('update:first', this.d_first);
|
||||
},
|
||||
getFilterColumnHeaderClass(column) {
|
||||
return [
|
||||
'p-filter-column',
|
||||
this.columnProp(column, 'filterHeaderClass'),
|
||||
{
|
||||
'p-frozen-column': this.columnProp(column, 'frozen')
|
||||
}
|
||||
];
|
||||
return [this.cx('headerCell', { column }), this.columnProp(column, 'filterHeaderClass')];
|
||||
},
|
||||
onColumnHeaderClick(e) {
|
||||
let event = e.originalEvent;
|
||||
|
|
@ -508,10 +350,10 @@ export default {
|
|||
const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
|
||||
|
||||
if (
|
||||
DomHandler.hasClass(targetNode, 'p-sortable-column') ||
|
||||
DomHandler.hasClass(targetNode, 'p-column-title') ||
|
||||
DomHandler.hasClass(targetNode, 'p-sortable-column-icon') ||
|
||||
DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')
|
||||
DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true ||
|
||||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headerTitle' ||
|
||||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sortIcon' ||
|
||||
DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sortIcon'
|
||||
) {
|
||||
DomHandler.clearSelection();
|
||||
|
||||
|
|
@ -855,7 +697,7 @@ export default {
|
|||
}
|
||||
},
|
||||
onColumnKeyDown(event, col) {
|
||||
if (event.code === 'Enter' && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
|
||||
if (event.code === 'Enter' && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
|
||||
this.onColumnHeaderClick(event, col);
|
||||
}
|
||||
},
|
||||
|
|
@ -899,24 +741,6 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [
|
||||
'p-treetable p-component',
|
||||
{
|
||||
'p-treetable-hoverable-rows': this.rowHover || this.rowSelectionMode,
|
||||
'p-treetable-auto-layout': this.autoLayout,
|
||||
'p-treetable-resizable': this.resizableColumns,
|
||||
'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
|
||||
'p-treetable-gridlines': this.showGridlines,
|
||||
'p-treetable-scrollable': this.scrollable,
|
||||
'p-treetable-scrollable-vertical': this.scrollable && this.scrollDirection === 'vertical',
|
||||
'p-treetable-scrollable-horizontal': this.scrollable && this.scrollDirection === 'horizontal',
|
||||
'p-treetable-scrollable-both': this.scrollable && this.scrollDirection === 'both',
|
||||
'p-treetable-flex-scrollable': this.scrollable && this.scrollHeight === 'flex',
|
||||
'p-treetable-responsive-scroll': this.responsiveLayout === 'scroll'
|
||||
}
|
||||
];
|
||||
},
|
||||
columns() {
|
||||
let cols = [];
|
||||
let children = this.$slots.default();
|
||||
|
|
@ -1015,174 +839,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-treetable {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-treetable table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.p-treetable .p-sortable-column {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-treetable-responsive-scroll > .p-treetable-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.p-treetable-responsive-scroll > .p-treetable-wrapper > table,
|
||||
.p-treetable-auto-layout > .p-treetable-wrapper > table {
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
.p-treetable-hoverable-rows .p-treetable-tbody > tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-treetable-toggler {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-treetable-toggler + .p-checkbox {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-treetable-toggler + .p-checkbox + span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Resizable */
|
||||
.p-treetable-resizable > .p-treetable-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.p-treetable-resizable .p-treetable-thead > tr > th,
|
||||
.p-treetable-resizable .p-treetable-tfoot > tr > td,
|
||||
.p-treetable-resizable .p-treetable-tbody > tr > td {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {
|
||||
background-clip: padding-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-treetable .p-column-resizer {
|
||||
display: block;
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
width: 0.5rem;
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
cursor: col-resize;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.p-treetable .p-column-resizer-helper {
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-treetable .p-treetable-loading-overlay {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Scrollable */
|
||||
.p-treetable-scrollable .p-treetable-wrapper {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-treetable-table {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-treetable-thead,
|
||||
.p-treetable-scrollable .p-treetable-tbody,
|
||||
.p-treetable-scrollable .p-treetable-tfoot {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-treetable-thead > tr,
|
||||
.p-treetable-scrollable .p-treetable-tbody > tr,
|
||||
.p-treetable-scrollable .p-treetable-tfoot > tr {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-treetable-thead > tr > th,
|
||||
.p-treetable-scrollable .p-treetable-tbody > tr > td,
|
||||
.p-treetable-scrollable .p-treetable-tfoot > tr > td {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-treetable-thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-treetable-tfoot {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable .p-frozen-column {
|
||||
position: sticky;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable th.p-frozen-column {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable-both .p-treetable-thead > tr > th,
|
||||
.p-treetable-scrollable-both .p-treetable-tbody > tr > td,
|
||||
.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
|
||||
.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
|
||||
.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-treetable-flex-scrollable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.p-treetable-flex-scrollable .p-treetable-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
@keydown="onKeyDown"
|
||||
@touchend="onTouchEnd"
|
||||
v-bind="ptm('row')"
|
||||
:data-p-highlight="selected"
|
||||
>
|
||||
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
|
||||
<TTBodyCell
|
||||
|
|
@ -126,7 +127,7 @@ export default {
|
|||
this.$emit('node-toggle', this.node);
|
||||
},
|
||||
onClick(event) {
|
||||
if (DomHandler.isClickable(event.target) || DomHandler.hasClass(event.target, 'p-treetable-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-treetable-toggler')) {
|
||||
if (DomHandler.isClickable(event.target) || DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowtoggler' || DomHandler.getAttribute(event.target.parentElement, 'data-pc-section') === 'rowtoggler') {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -197,7 +198,7 @@ export default {
|
|||
},
|
||||
onArrowRightKey(event) {
|
||||
const ishiddenIcon = DomHandler.findSingle(event.currentTarget, 'button').style.visibility === 'hidden';
|
||||
const togglerElement = DomHandler.findSingle(this.$refs.node, '.p-treetable-toggler');
|
||||
const togglerElement = DomHandler.findSingle(this.$refs.node, '[data-pc-section="rowtoggler"]');
|
||||
|
||||
if (ishiddenIcon) return;
|
||||
|
||||
|
|
@ -216,7 +217,7 @@ export default {
|
|||
|
||||
const currentTarget = event.currentTarget;
|
||||
const ishiddenIcon = DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden';
|
||||
const togglerElement = DomHandler.findSingle(currentTarget, '.p-treetable-toggler');
|
||||
const togglerElement = DomHandler.findSingle(currentTarget, '[data-pc-section="rowtoggler"]');
|
||||
|
||||
if (this.expanded && !ishiddenIcon) {
|
||||
togglerElement.click();
|
||||
|
|
@ -263,14 +264,14 @@ export default {
|
|||
},
|
||||
onTabKey() {
|
||||
const rows = [...DomHandler.find(this.$refs.node.parentElement, 'tr')];
|
||||
const hasSelectedRow = rows.some((row) => DomHandler.hasClass(row, 'p-highlight') || row.getAttribute('aria-checked') === 'true');
|
||||
const hasSelectedRow = rows.some((row) => DomHandler.getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-checked') === 'true');
|
||||
|
||||
rows.forEach((row) => {
|
||||
row.tabIndex = -1;
|
||||
});
|
||||
|
||||
if (hasSelectedRow) {
|
||||
const selectedNodes = rows.filter((node) => DomHandler.hasClass(node, 'p-highlight') || node.getAttribute('aria-checked') === 'true');
|
||||
const selectedNodes = rows.filter((node) => DomHandler.getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true');
|
||||
|
||||
selectedNodes[0].tabIndex = 0;
|
||||
|
||||
|
|
@ -391,12 +392,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [
|
||||
this.node.styleClass,
|
||||
{
|
||||
'p-highlight': this.selected
|
||||
}
|
||||
];
|
||||
return [this.node.styleClass, this.cx('root')];
|
||||
},
|
||||
expanded() {
|
||||
return this.expandedKeys && this.expandedKeys[this.node.key] === true;
|
||||
|
|
|
|||
Loading…
Reference in New Issue