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

Refactor #3965 - Refactor on OrganizationChart

pull/4101/head^2
Tuğçe Küçükoğlu 2023-07-06 13:54:33 +03:00
parent a4529e5be0
commit b1eb42aca5
2 changed files with 6 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/organizationchart/BaseOrganizationChart.vue
View File

@ -60,14 +60,14 @@ const styles = `
const classes = { const classes = {
root: 'p-organizationchart p-component', root: 'p-organizationchart p-component',
table: 'p-organizationchart-table', table: 'p-organizationchart-table',
node: ({ props, instance }) => ['p-organizationchart-node-content', props.node.styleClass, { 'p-organizationchart-selectable-node': instance.selectable, 'p-highlight': instance.selected }], node: ({ instance }) => ['p-organizationchart-node-content', { 'p-organizationchart-selectable-node': instance.selectable, 'p-highlight': instance.selected }],
nodeToggler: 'p-node-toggler', nodeToggler: 'p-node-toggler',
nodeTogglerIcon: 'p-node-toggler-icon', nodeTogglerIcon: 'p-node-toggler-icon',
lines: 'p-organizationchart-lines', lines: 'p-organizationchart-lines',
lineDown: 'p-organizationchart-line-down', lineDown: 'p-organizationchart-line-down',
lines: 'p-organizationchart-lines', lines: 'p-organizationchart-lines',
lineLeft: ({ i }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(i === 0) }], lineLeft: ({ index }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(index === 0) }],
lineRight: ({ props, i }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(i === props.node.children.length - 1) }], lineRight: ({ props, index }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(index === props.node.children.length - 1) }],
nodes: 'p-organizationchart-nodes' nodes: 'p-organizationchart-nodes'
}; };

24
components/lib/organizationchart/OrganizationChartNode.vue
View File

@ -3,7 +3,7 @@
<tbody v-bind="ptm('body')"> <tbody v-bind="ptm('body')">
<tr v-if="node" v-bind="ptm('row')"> <tr v-if="node" v-bind="ptm('row')">
<td :colspan="colspan" v-bind="ptm('cell')"> <td :colspan="colspan" v-bind="ptm('cell')">
<div :class="cx('node')" @click="onNodeClick" v-bind="getPTOptions('node')"> <div :class="[cx('node'), node.styleClass]" @click="onNodeClick" v-bind="getPTOptions('node')">
<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="cx('nodeToggler')" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggler')"> <a v-if="toggleable" tabindex="0" :class="cx('nodeToggler')" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggler')">
<component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" /> <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" />
@ -25,26 +25,8 @@
</template> </template>
<template v-if="node.children && node.children.length > 1"> <template v-if="node.children && node.children.length > 1">
<template v-for="(child, i) of node.children" :key="child.key"> <template v-for="(child, i) of node.children" :key="child.key">
<td <td :class="cx('lineLeft', { index: i })" v-bind="getNodeOptions(!(i === 0), 'lineLeft')">&nbsp;</td>
:class=" <td :class="cx('lineRight', { index: i })" v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')">&nbsp;</td>
cx('lineLeft', {
i
})
"
v-bind="getNodeOptions(!(i === 0), 'lineLeft')"
>
&nbsp;
</td>
<td
:class="
cx('lineRight', {
i
})
"
v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')"
>
&nbsp;
</td>
</template> </template>
</template> </template>
</tr> </tr>