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

Refactor #3924 - For Tree

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-05-07 22:21:37 +03:00
parent 6a4226a4e0
commit e10c1cf988
5 changed files with 158 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

21
components/lib/tree/Tree.vue
View file

@ -1,21 +1,21 @@
<template>
<div :class="containerClass">
<div :class="containerClass" v-bind="ptm('root')">
<template v-if="loading">
<div class="p-tree-loading-overlay p-component-overlay">
<div class="p-tree-loading-overlay p-component-overlay" v-bind="ptm('loadingOverlay')">
<slot name="loadingicon">
<i v-if="loadingIcon" :class="['p-tree-loading-icon pi-spin', loadingIcon]" />
<SpinnerIcon v-else spin class="p-tree-loading-icon" />
<i v-if="loadingIcon" :class="['p-tree-loading-icon pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else spin class="p-tree-loading-icon" v-bind="ptm('loadingIcon')" />
</slot>
</div>
</template>
<div v-if="filter" class="p-tree-filter-container">
<input v-model="filterValue" type="text" autocomplete="off" class="p-tree-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" />
<div v-if="filter" class="p-tree-filter-container" v-bind="ptm('filterContainer')">
<input v-model="filterValue" type="text" autocomplete="off" class="p-tree-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('input')" />
<slot name="searchicon">
<SearchIcon class="p-tree-filter-icon" />
<SearchIcon class="p-tree-filter-icon" v-bind="ptm('searchIcon')" />
</slot>
</div>
<div class="p-tree-wrapper" :style="{ maxHeight: scrollHeight }">
<ul class="p-tree-container" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel">
<div class="p-tree-wrapper" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
<ul class="p-tree-container" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('container')">
<TreeNode
v-for="(node, index) of valueToRender"
:key="node.key"
@ -29,6 +29,7 @@
:selectionMode="selectionMode"
:selectionKeys="selectionKeys"
@checkbox-change="onCheckboxChange"
:pt="pt"
></TreeNode>
</ul>
</div>
@ -36,6 +37,7 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import SearchIcon from 'primevue/icons/search';
import SpinnerIcon from 'primevue/icons/spinner';
import { ObjectUtils } from 'primevue/utils';
@ -43,6 +45,7 @@ import TreeNode from './TreeNode.vue';
export default {
name: 'Tree',
extends: BaseComponent,
emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect'],
props: {
value: {