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

Refactor #3924 - For OrganizationChart

pull/3946/head
Tuğçe Küçükoğlu 2023-05-10 11:07:14 +03:00
parent 15131bf13b
commit 413fb026d6
5 changed files with 188 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/organizationchart.js
View File

@ -28,6 +28,12 @@ const OrganizationChartProps = [
type: 'object',
default: 'null',
description: 'A map instance of key-value pairs to represented the collapsed nodes.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

2
components/lib/config/PrimeVue.d.ts vendored
View File

@ -46,6 +46,7 @@ import { MenubarPassThroughOptions } from '../menubar';
import { MessagePassThroughOptions } from '../message';
import { MultiSelectPassThroughOptions } from '../multiselect';
import { OrderListPassThroughOptions } from '../orderlist';
import { OrganizationChartPassThroughOptions } from '../organizationchart';
import { OverlayPanelPassThroughOptions } from '../overlaypanel';
import { PaginatorPassThroughOptions } from '../paginator';
import { PanelPassThroughOptions } from '../panel';
@ -142,6 +143,7 @@ interface PrimeVuePTOptions {
message?: MessagePassThroughOptions;
multiselect?: MultiSelectPassThroughOptions;
orderlist?: OrderListPassThroughOptions;
organizationchart?: OrganizationChartPassThroughOptions;
overlaypanel?: OverlayPanelPassThroughOptions;
paginator?: PaginatorPassThroughOptions;
panel?: PanelPassThroughOptions;

129
components/lib/organizationchart/OrganizationChart.d.ts vendored
View File

@ -10,6 +10,17 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type OrganizationChartPassThroughOptionType = OrganizationChartPassThroughAttributes | ((options: OrganizationChartPassThroughMethodOptions) => OrganizationChartPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface OrganizationChartPassThroughMethodOptions {
props: OrganizationChartProps;
state: OrganizationChartState;
context: OrganizationChartContext;
}
/**
* Defines valid properties in OrganizationChartNode.
*/
@ -64,6 +75,119 @@ export interface OrganizationChartCollapsedKeys {
[key: string]: any;
}
/**
* Custom passthrough(pt) options.
* @see {@link OrganizationChartProps.pt}
*/
export interface OrganizationChartPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: OrganizationChartPassThroughOptionType;
/**
* Uses to pass attributes to the table's DOM element.
*/
table?: OrganizationChartPassThroughOptionType;
/**
* Uses to pass attributes to the body's DOM element.
*/
body?: OrganizationChartPassThroughOptionType;
/**
* Uses to pass attributes to the row' DOM element.
*/
row?: OrganizationChartPassThroughOptionType;
/**
* Uses to pass attributes to the cell's DOM element.
*/
cell?: OrganizationChartPassThroughOptionType;
/**
* Uses to pass attributes to the node's DOM element.
*/
node?: OrganizationChartPassThroughOptionType;
/**
* Uses to pass attributes to the nodeToggler's DOM element.
*/
nodeToggler?: OrganizationChartPassThroughOptionType;
/**
* Uses to pass attributes to the nodeTogglerIcon's DOM element.
*/
nodeTogglerIcon?: OrganizationChartPassThroughOptionType;
/**
* Uses to pass attributes to the lines's DOM element.
*/
lines?: OrganizationChartPassThroughOptionType;
/**
* Uses to pass attributes to the lineCell's DOM element.
*/
lineCell?: OrganizationChartPassThroughOptionType;
/**
* Uses to pass attributes to the lineDown's DOM element.
*/
lineDown?: OrganizationChartPassThroughOptionType;
/**
* Uses to pass attributes to the nodes's DOM element.
*/
nodes?: OrganizationChartPassThroughOptionType;
/**
* Uses to pass attributes to the nodeCell's DOM element.
*/
nodeCell?: OrganizationChartPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface OrganizationChartPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in OrganizationChart component.
*/
export interface OrganizationChartState {
/**
* Current collapsed keys' state.
* @defaultValue false
*/
d_collapsedKeys: OrganizationChartCollapsedKeys;
}
/**
* Defines current options in OrganizationChart component.
*/
export interface OrganizationChartContext {
/**
* Current focus expanded of the node as a boolean.
* @defaultValue false
*/
expanded: boolean;
/**
* Current selectable state of the node as a boolean.
* @defaultValue false
*/
selectable: boolean;
/**
* Current selection state of the node as a boolean.
* @defaultValue false
*/
selected: boolean;
/**
* Current toggleable state of the node as a boolean.
* @defaultValue false
*/
toggleable: boolean;
/**
* Current active state of the node as a boolean.
* @defaultValue false
*/
active: boolean;
/**
* Current being top line state of the node as a boolean.
* @defaultValue false
*/
lineTop: boolean;
}
/**
* Defines valid properties in OrganizationChart component.
*/
@ -89,6 +213,11 @@ export interface OrganizationChartProps {
* @defaultValue false
*/
collapsible?: boolean;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {OrganizationChartPassThroughOptions}
*/
pt?: OrganizationChartPassThroughOptions;
}
/**

16
components/lib/organizationchart/OrganizationChart.vue
View File

@ -1,14 +1,26 @@
<template>
<div class="p-organizationchart p-component">
<OrganizationChartNode :node="value" :templates="$slots" @node-toggle="onNodeToggle" :collapsedKeys="d_collapsedKeys" :collapsible="collapsible" @node-click="onNodeClick" :selectionMode="selectionMode" :selectionKeys="selectionKeys" />
<div class="p-organizationchart p-component" v-bind="ptm('root')">
<OrganizationChartNode
:node="value"
:templates="$slots"
@node-toggle="onNodeToggle"
:collapsedKeys="d_collapsedKeys"
:collapsible="collapsible"
@node-click="onNodeClick"
:selectionMode="selectionMode"
:selectionKeys="selectionKeys"
:pt="pt"
/>
</div>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import OrganizationChartNode from './OrganizationChartNode.vue';
export default {
name: 'OrganizationChart',
extends: BaseComponent,
emits: ['node-unselect', 'node-select', 'update:selectionKeys', 'node-expand', 'node-collapse', 'update:collapsedKeys'],
props: {
value: {

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

@ -1,37 +1,37 @@
<template>
<table class="p-organizationchart-table">
<tbody>
<tr v-if="node">
<td :colspan="colspan">
<div :class="nodeContentClass" @click="onNodeClick">
<table class="p-organizationchart-table" v-bind="ptm('table')">
<tbody v-bind="ptm('body')">
<tr v-if="node" v-bind="ptm('row')">
<td :colspan="colspan" v-bind="ptm('cell')">
<div :class="nodeContentClass" @click="onNodeClick" v-bind="getPTOptions('node')">
<component :is="templates[node.type] || templates['default']" :node="node" />
<a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown">
<a v-if="toggleable" tabindex="0" class="p-node-toggler" @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-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" class="p-node-toggler-icon" />
<component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" class="p-node-toggler-icon" v-bind="getPTOptions('nodeTogglerIcon')" />
</a>
</div>
</td>
</tr>
<tr :style="childStyle" class="p-organizationchart-lines">
<tr :style="childStyle" class="p-organizationchart-lines" v-bind="ptm('lines')">
<td :colspan="colspan">
<div class="p-organizationchart-line-down"></div>
<div class="p-organizationchart-line-down" v-bind="ptm('lineDown')"></div>
</td>
</tr>
<tr :style="childStyle" class="p-organizationchart-lines">
<tr :style="childStyle" class="p-organizationchart-lines" v-bind="ptm('lines')">
<template v-if="node.children && node.children.length === 1">
<td :colspan="colspan">
<div class="p-organizationchart-line-down"></div>
<td :colspan="colspan" v-bind="ptm('lineCell')">
<div class="p-organizationchart-line-down" v-bind="ptm('lineDown')"></div>
</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>
<td class="p-organizationchart-line-left" :class="{ 'p-organizationchart-line-top': !(i === 0) }" v-bind="getNodeOptions(!(i === 0), 'lineLeft')">&nbsp;</td>
<td class="p-organizationchart-line-right" :class="{ 'p-organizationchart-line-top': !(i === node.children.length - 1) }" v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')">&nbsp;</td>
</template>
</template>
</tr>
<tr :style="childStyle" class="p-organizationchart-nodes">
<td v-for="child of node.children" :key="child.key" colspan="2">
<tr :style="childStyle" class="p-organizationchart-nodes" v-bind="ptm('nodes')">
<td v-for="child of node.children" :key="child.key" colspan="2" v-bind="ptm('nodeCell')">
<OrganizationChartNode
:node="child"
:templates="templates"
@ -41,6 +41,7 @@
:selectionMode="selectionMode"
:selectionKeys="selectionKeys"
@node-click="onChildNodeClick"
:pt="pt"
/>
</td>
</tr>
@ -49,12 +50,14 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronUpIcon from 'primevue/icons/chevronup';
import { DomHandler } from 'primevue/utils';
export default {
name: 'OrganizationChartNode',
extends: BaseComponent,
emits: ['node-click', 'node-toggle'],
props: {
node: {
@ -83,6 +86,24 @@ export default {
}
},
methods: {
getPTOptions(key) {
return this.ptm(key, {
context: {
expanded: this.expanded,
selectable: this.selectable,
selected: this.selected,
toggleable: this.toggleable,
active: this.selected
}
});
},
getNodeOptions(lineTop, key) {
return this.ptm(key, {
context: {
lineTop
}
});
},
onNodeClick(event) {
if (DomHandler.hasClass(event.target, 'p-node-toggler') || DomHandler.hasClass(event.target, 'p-node-toggler-icon')) {
return;