mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-10 17:32:36 +00:00
Refactor #5592 - For OrgChart, Paginator, Picklist, Timeline
This commit is contained in:
tugcekucukoglu
parent
abef162a11
commit
3596026387
17 changed files with 105 additions and 97 deletions
|
|
@ -132,29 +132,37 @@ export interface OrganizationChartPassThroughOptions {
|
|||
*/
|
||||
node?: OrganizationChartPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the nodeToggler's DOM element.
|
||||
* Used to pass attributes to the node toggle button's DOM element.
|
||||
*/
|
||||
nodeToggler?: OrganizationChartPassThroughOptionType;
|
||||
nodeToggleButton?: OrganizationChartPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the nodeTogglerIcon's DOM element.
|
||||
* Used to pass attributes to the node toggle button icon's DOM element.
|
||||
*/
|
||||
nodeTogglerIcon?: OrganizationChartPassThroughOptionType;
|
||||
nodeToggleButtonIcon?: OrganizationChartPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the lines's DOM element.
|
||||
* Used to pass attributes to the connectors's DOM element.
|
||||
*/
|
||||
lines?: OrganizationChartPassThroughOptionType;
|
||||
connectors?: OrganizationChartPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the lineCell's DOM element.
|
||||
*/
|
||||
lineCell?: OrganizationChartPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the lineDown's DOM element.
|
||||
* Used to pass attributes to the connector down's DOM element.
|
||||
*/
|
||||
lineDown?: OrganizationChartPassThroughOptionType;
|
||||
connectorDown?: OrganizationChartPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the nodes's DOM element.
|
||||
* Used to pass attributes to the connector left's DOM element.
|
||||
*/
|
||||
nodes?: OrganizationChartPassThroughOptionType;
|
||||
connectorLeft?: OrganizationChartPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the connector right's DOM element.
|
||||
*/
|
||||
connectorRight?: OrganizationChartPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the node children's DOM element.
|
||||
*/
|
||||
nodeChildren?: OrganizationChartPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the nodeCell's DOM element.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -5,32 +5,32 @@
|
|||
<td :colspan="colspan" v-bind="ptm('cell')">
|
||||
<div :class="[cx('node'), node.styleClass]" @click="onNodeClick" v-bind="getPTOptions('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')">
|
||||
<component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" />
|
||||
<component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeTogglerIcon')" v-bind="getPTOptions('nodeTogglerIcon')" />
|
||||
<a v-if="toggleable" tabindex="0" :class="cx('nodeToggleButton')" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggleButton')">
|
||||
<component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
|
||||
<component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr :style="childStyle" :class="cx('lines')" v-bind="ptm('lines')">
|
||||
<tr :style="childStyle" :class="cx('connectors')" v-bind="ptm('connectors')">
|
||||
<td :colspan="colspan" v-bind="ptm('lineCell')">
|
||||
<div :class="cx('lineDown')" v-bind="ptm('lineDown')"></div>
|
||||
<div :class="cx('connectorDown')" v-bind="ptm('connectorDown')"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr :style="childStyle" :class="cx('lines')" v-bind="ptm('lines')">
|
||||
<tr :style="childStyle" :class="cx('connectors')" v-bind="ptm('connectors')">
|
||||
<template v-if="node.children && node.children.length === 1">
|
||||
<td :colspan="colspan" v-bind="ptm('lineCell')">
|
||||
<div :class="cx('lineDown')" v-bind="ptm('lineDown')"></div>
|
||||
<div :class="cx('connectorDown')" v-bind="ptm('connectorDown')"></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="cx('lineLeft', { index: i })" v-bind="getNodeOptions(!(i === 0), 'lineLeft')"> </td>
|
||||
<td :class="cx('lineRight', { index: i })" v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')"> </td>
|
||||
<td :class="cx('connectorLeft', { index: i })" v-bind="getNodeOptions(!(i === 0), 'connectorLeft')"> </td>
|
||||
<td :class="cx('connectorRight', { index: i })" v-bind="getNodeOptions(!(i === node.children.length - 1), 'connectorRight')"> </td>
|
||||
</template>
|
||||
</template>
|
||||
</tr>
|
||||
<tr :style="childStyle" :class="cx('nodes')" v-bind="ptm('nodes')">
|
||||
<tr :style="childStyle" :class="cx('nodeChildren')" v-bind="ptm('nodeChildren')">
|
||||
<td v-for="child of node.children" :key="child.key" colspan="2" v-bind="ptm('nodeCell')">
|
||||
<OrganizationChartNode
|
||||
:node="child"
|
||||
|
|
@ -107,7 +107,7 @@ export default {
|
|||
});
|
||||
},
|
||||
onNodeClick(event) {
|
||||
if (DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetoggler') || DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglericon')) {
|
||||
if (DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglebutton') || DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglebuttonicon')) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -114,13 +114,13 @@ const classes = {
|
|||
root: 'p-organizationchart p-component',
|
||||
table: 'p-organizationchart-table',
|
||||
node: ({ instance }) => ['p-organizationchart-node', { 'p-organizationchart-node-selectable': instance.selectable, 'p-highlight': instance.selected }],
|
||||
nodeToggler: 'p-organizationchart-node-toggle-button',
|
||||
nodeTogglerIcon: 'p-organizationchart-node-toggle-button-icon',
|
||||
lines: 'p-organizationchart-connectors',
|
||||
lineDown: 'p-organizationchart-connector-down',
|
||||
lineLeft: ({ index }) => ['p-organizationchart-connector-left', { 'p-organizationchart-connector-top': !(index === 0) }],
|
||||
lineRight: ({ props, index }) => ['p-organizationchart-connector-right', { 'p-organizationchart-connector-top': !(index === props.node.children.length - 1) }],
|
||||
nodes: 'p-organizationchart-node-children'
|
||||
nodeToggleButton: 'p-organizationchart-node-toggle-button',
|
||||
nodeToggleButtonIcon: 'p-organizationchart-node-toggle-button-icon',
|
||||
connectors: 'p-organizationchart-connectors',
|
||||
connectorDown: 'p-organizationchart-connector-down',
|
||||
connectorLeft: ({ index }) => ['p-organizationchart-connector-left', { 'p-organizationchart-connector-top': !(index === 0) }],
|
||||
connectorRight: ({ props, index }) => ['p-organizationchart-connector-right', { 'p-organizationchart-connector-top': !(index === props.node.children.length - 1) }],
|
||||
nodeChildren: 'p-organizationchart-node-children'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue