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

Fixed #4886 - Tree / TreeTable: new loadingMode property

pull/4899/head
tugcekucukoglu 2023-11-28 11:46:39 +03:00
parent 098c7a5128
commit b2ad40adcc
10 changed files with 61 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/tree/BaseTree.vue
View File

@ -34,6 +34,10 @@ export default {
type: String,
default: undefined
},
loadingMode: {
type: String,
default: 'mask'
},
filter: {
type: Boolean,
default: false

5
components/lib/tree/Tree.d.ts vendored
View File

@ -232,6 +232,11 @@ export interface TreeProps {
* @deprecated since v3.27.0. Use 'loadingicon' slot.
*/
loadingIcon?: string | undefined;
/**
* Loading mode display.
* @defaultValue mask
*/
loadingMode?: 'mask' | 'icon' | undefined;
/**
* When specified, displays an input field to filter the items.
* @defaultValue false

3
components/lib/tree/Tree.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="tree">
<template v-if="loading">
<template v-if="loading && loadingMode === 'mask'">
<div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
<slot name="loadingicon" :class="cx('loadingIcon')">
<i v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
@ -29,6 +29,7 @@
:selectionMode="selectionMode"
:selectionKeys="selectionKeys"
@checkbox-change="onCheckboxChange"
:loadingMode="loadingMode"
:pt="pt"
:unstyled="unstyled"
></TreeNode>

25
components/lib/tree/TreeNode.vue
View File

@ -16,9 +16,15 @@
>
<div :class="cx('content')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('content')" :data-p-highlight="checkboxMode ? checked : selected" :data-p-selectable="selectable">
<button v-ripple type="button" :class="cx('toggler')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('toggler')">
<component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('togglerIcon')" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
<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="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('togglerIcon')" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
</template>
</button>
<div v-if="checkboxMode" :class="cx('checkboxContainer')" aria-hidden="true" v-bind="getPTOptions('checkboxContainer')">
<div :class="cx('checkbox')" role="checkbox" v-bind="getPTOptions('checkbox')" :data-p-checked="checked" :data-p-partialchecked="partialChecked">
@ -57,6 +63,7 @@ import CheckIcon from 'primevue/icons/check';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import MinusIcon from 'primevue/icons/minus';
import SpinnerIcon from 'primevue/icons/spinner';
import Ripple from 'primevue/ripple';
import { DomHandler } from 'primevue/utils';
@ -74,6 +81,10 @@ export default {
type: null,
default: null
},
loadingMode: {
type: String,
default: 'mask'
},
selectionKeys: {
type: null,
default: null
@ -90,10 +101,7 @@ export default {
type: Number,
default: null
},
index: {
type: Number,
default: null
}
index: null
},
nodeTouched: false,
toggleClicked: false,
@ -435,7 +443,8 @@ export default {
ChevronDownIcon: ChevronDownIcon,
ChevronRightIcon: ChevronRightIcon,
CheckIcon: CheckIcon,
MinusIcon: MinusIcon
MinusIcon: MinusIcon,
SpinnerIcon: SpinnerIcon
},
directives: {
ripple: Ripple

1
components/lib/tree/style/TreeStyle.js
View File

@ -113,6 +113,7 @@ const classes = {
],
toggler: 'p-tree-toggler p-link',
togglerIcon: 'p-tree-toggler-icon',
nodeTogglerIcon: 'p-tree-node-toggler-icon',
checkboxContainer: 'p-checkbox p-component',
checkbox: ({ instance }) => [
'p-checkbox-box',

4
components/lib/treetable/BaseTreeTable.vue
View File

@ -78,6 +78,10 @@ export default {
type: String,
default: undefined
},
loadingMode: {
type: String,
default: 'mask'
},
rowHover: {
type: Boolean,
default: false

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

@ -1,9 +1,15 @@
<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">
<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')" />
<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')" />
</template>
</button>
<div v-if="checkboxSelectionMode && columnProp('expander')" :class="cx('checkboxWrapper')" @click="toggleCheckbox" v-bind="getColumnCheckboxPT('checkboxWrapper')">
<div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
@ -28,6 +34,7 @@ import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import MinusIcon from 'primevue/icons/minus';
import Ripple from 'primevue/ripple';
import SpinnerIcon from 'primevue/icons/spinner';
import { DomHandler, ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
@ -80,6 +87,10 @@ export default {
index: {
type: Number,
default: null
},
loadingMode: {
type: String,
default: 'mask'
}
},
data() {
@ -208,7 +219,8 @@ export default {
ChevronRightIcon: ChevronRightIcon,
ChevronDownIcon: ChevronDownIcon,
CheckIcon: CheckIcon,
MinusIcon: MinusIcon
MinusIcon: MinusIcon,
SpinnerIcon: SpinnerIcon
},
directives: {
ripple: Ripple

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

@ -474,6 +474,11 @@ export interface TreeTableProps {
* @deprecated since v3.27.0. Use 'loadingicon' slot.
*/
loadingIcon?: string | undefined;
/**
* Loading mode display.
* @defaultValue mask
*/
loadingMode?: 'mask' | 'icon' | undefined;
/**
* When enabled, background of the rows change on hover.
* @defaultValue false

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

@ -1,6 +1,6 @@
<template>
<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 v-if="loading && loadingMode === 'mask'" :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')" />
@ -94,6 +94,7 @@
:ariaSetSize="dataToRender.length"
:ariaPosInset="index + 1"
:tabindex="setTabindex(node, index)"
:loadingMode="loadingMode"
:templates="$slots"
@node-toggle="onNodeToggle"
@node-click="onNodeClick"

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

@ -33,6 +33,7 @@
@node-toggle="$emit('node-toggle', $event)"
@checkbox-toggle="toggleCheckbox"
:index="i"
:loadingMode="loadingMode"
:pt="pt"
></TTBodyCell>
</template>
@ -115,6 +116,10 @@ export default {
type: Number,
default: null
},
loadingMode: {
type: String,
default: 'mask'
},
templates: {
type: Object,
default: null