vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 08:52:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Components added. Build issues fixed

Browse source
This commit is contained in:
Bahadir Sofuoglu 2022-09-14 14:26:01 +03:00
parent 5b66ed1093
commit 18c3721848
344 changed files with 12446 additions and 8758 deletions
Download patch file Download diff file Expand all files Collapse all files

32
components/organizationchart/OrganizationChartNode.vue
View file

@ -4,9 +4,9 @@
<tr v-if="node">
<td :colspan="colspan">
<div :class="nodeContentClass" @click="onNodeClick">
<component :is="templates[node.type]||templates['default']" :node="node" />
<component :is="templates[node.type] || templates['default']" :node="node" />
<a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown.enter="toggleNode">
<i class="p-node-toggler-icon pi" :class="{'pi-chevron-down': expanded, 'pi-chevron-up': !expanded}"></i>
<i class="p-node-toggler-icon pi" :class="{ 'pi-chevron-down': expanded, 'pi-chevron-up': !expanded }"></i>
</a>
</div>
</td>
@ -23,16 +23,24 @@
</td>
</template>
<template v-if="node.children && node.children.length > 1">
<template v-for="(child,i) of node.children" :key="child.key">
<td class="p-organizationchart-line-left" :class="{'p-organizationchart-line-top': !(i === 0)}">&nbsp;</td>
<td class="p-organizationchart-line-right" :class="{'p-organizationchart-line-top': !(i === (node.children.length - 1))}">&nbsp;</td>
<template v-for="(child, i) of node.children" :key="child.key">
<td class="p-organizationchart-line-left" :class="{ 'p-organizationchart-line-top': !(i === 0) }">&nbsp;</td>
<td class="p-organizationchart-line-right" :class="{ 'p-organizationchart-line-top': !(i === node.children.length - 1) }">&nbsp;</td>
</template>
</template>
</tr>
<tr :style="childStyle" class="p-organizationchart-nodes">
<td v-for="child of node.children" :key="child.key" colspan="2">
<OrganizationChartNode :node="child" :templates="templates" :collapsedKeys="collapsedKeys" @node-toggle="onChildNodeToggle" :collapsible="collapsible"
:selectionMode="selectionMode" :selectionKeys="selectionKeys" @node-click="onChildNodeClick" />
<OrganizationChartNode
:node="child"
:templates="templates"
:collapsedKeys="collapsedKeys"
@node-toggle="onChildNodeToggle"
:collapsible="collapsible"
:selectionMode="selectionMode"
:selectionKeys="selectionKeys"
@node-click="onChildNodeClick"
/>
</td>
</tr>
</tbody>
@ -40,7 +48,7 @@
</template>
<script>
import {DomHandler} from 'primevue/utils';
import { DomHandler } from 'primevue/utils';
export default {
name: 'OrganizationChartNode',
@ -93,18 +101,18 @@ export default {
},
computed: {
nodeContentClass() {
return ['p-organizationchart-node-content', this.node.styleClass, {'p-organizationchart-selectable-node': this.selectable, 'p-highlight': this.selected}];
return ['p-organizationchart-node-content', this.node.styleClass, { 'p-organizationchart-selectable-node': this.selectable, 'p-highlight': this.selected }];
},
leaf() {
return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
},
colspan() {
return (this.node.children && this.node.children.length) ? this.node.children.length * 2: null;
return this.node.children && this.node.children.length ? this.node.children.length * 2 : null;
},
childStyle() {
return {
visibility: !this.leaf && this.expanded ? 'inherit' : 'hidden'
}
};
},
expanded() {
return this.collapsedKeys[this.node.key] === undefined;
@ -119,5 +127,5 @@ export default {
return this.collapsible && this.node.collapsible !== false && !this.leaf;
}
}
}
};
</script>