primevue
Version:
PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh
380 lines (363 loc) • 11 kB
TypeScript
/**
*
* OrganizationChart visualizes hierarchical organization data.
*
* [Live Demo](https://primevue.dev/organizationchart)
*
* @module organizationchart
*
*/
import type { DefineComponent, DesignToken, EmitFn, HintedString, PassThrough } from '@primevue/core';
import type { ComponentHooks } from '@primevue/core/basecomponent';
import type { PassThroughOptions } from 'primevue/passthrough';
import { Component, VNode } from 'vue';
export declare type OrganizationChartPassThroughOptionType = OrganizationChartPassThroughAttributes | ((options: OrganizationChartPassThroughMethodOptions) => OrganizationChartPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface OrganizationChartPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: OrganizationChartProps;
/**
* Defines current inline state.
*/
state: OrganizationChartState;
/**
* Defines current options.
*/
context: OrganizationChartContext;
/**
* Defines valid attributes.
*/
attrs: any;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Defines valid properties in OrganizationChartNode.
*/
export interface OrganizationChartNode {
/**
* Unique identifier of the node. Must be unique across the whole tree; selection and expansion state are keyed by this value.
*/
key: any;
/**
* Label of the node, rendered inside `.p-organizationchart-node-content` when no `default` slot is provided.
*/
label?: string;
/**
* Style class of the node content.
*/
styleClass?: string;
/**
* Inline style of the node content.
*/
style?: any;
/**
* Data represented by the node.
*/
data?: any;
/**
* Whether node is selectable when selection is enabled.
* @defaultValue true
*/
selectable?: boolean;
/**
* Children nodes array.
*/
children?: OrganizationChartNode[];
/**
* Optional keys
*/
[key: string]: any;
}
export interface OrganizationChartSelectionKeys {
/**
* Single and multiple selection use boolean values. Checkbox selection uses a checked and partialChecked state object.
*/
[key: string]: boolean | { checked: boolean; partialChecked: boolean };
}
export interface OrganizationChartCollapsedKeys {
/**
* Optional keys
*/
[key: string]: any;
}
/**
* Custom passthrough(pt) options.
* @see {@link OrganizationChartProps.pt}
*/
export interface OrganizationChartPassThroughOptions {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: OrganizationChartPassThroughOptionType;
/**
* Used to pass attributes to the subtree `ul`'s DOM element (appears on both the root subtree and every nested subtree).
*/
subtree?: OrganizationChartPassThroughOptionType;
/**
* Used to pass attributes to the tree `li`'s DOM element.
*/
tree?: OrganizationChartPassThroughOptionType;
/**
* Used to pass attributes to the node's DOM element.
*/
node?: OrganizationChartPassThroughOptionType;
/**
* Used to pass attributes to the node content's DOM element.
*/
content?: OrganizationChartPassThroughOptionType;
/**
* Used to pass attributes to the Checkbox component in checkbox selection mode.
*/
pcCheckbox?: OrganizationChartPassThroughOptionType;
/**
* Used to pass attributes to the fallback node label's DOM element.
*/
label?: OrganizationChartPassThroughOptionType;
/**
* Used to pass attributes to the node toggle button's DOM element.
*/
toggle?: OrganizationChartPassThroughOptionType;
/**
* Used to pass attributes to the fallback node toggle indicator's DOM element.
*/
toggleIndicator?: OrganizationChartPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* 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.
*/
d_collapsedKeys: OrganizationChartCollapsedKeys;
/**
* Current selection keys' state.
*/
d_selectionKeys: OrganizationChartSelectionKeys;
}
/**
* Defines current options in OrganizationChart component.
*/
export interface OrganizationChartContext {
/**
* Current expanded state 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 partial selection state of the node as a boolean.
* @defaultValue false
*/
partialSelected: boolean;
/**
* Current collapsed state of the node as a boolean.
* @defaultValue false
*/
collapsed: boolean;
}
/**
* Defines valid properties in OrganizationChart component.
*/
export interface OrganizationChartProps {
/**
* Value of the component. Accepts a single root node or an array of root nodes.
*/
value?: OrganizationChartNode | OrganizationChartNode[];
/**
* A map of keys to control the selection state.
*/
selectionKeys?: OrganizationChartSelectionKeys;
/**
* Type of the selection. When unset, selection is disabled and nodes are not focusable.
*/
selectionMode?: HintedString<'single' | 'multiple' | 'checkbox'> | undefined;
/**
* Whether nodes with children render an expand/collapse toggle.
* @defaultValue false
*/
collapsible?: boolean;
/**
* A map of keys to represent the collapsed state in controlled mode. A key with `true` is collapsed; absent keys are expanded.
*/
collapsedKeys?: OrganizationChartCollapsedKeys;
/**
* Whether the nodes are selectable when a selection mode is set. Individual nodes can still opt out via `node.selectable = false`.
* @defaultValue true
*/
selectable?: boolean;
/**
* Horizontal and vertical spacing between nodes, in pixels. A single number applies to both axes.
* @defaultValue [40, 56]
*/
gap?: number | number[];
/**
* It generates scoped CSS variables using design tokens for the component.
*/
dt?: DesignToken<any>;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {OrganizationChartPassThroughOptions}
*/
pt?: PassThrough<OrganizationChartPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* Defines valid slots in OrganizationChart component.
*/
export interface OrganizationChartSlots {
/**
* Content rendered inside `.p-organizationchart-node-content`. Falls back to `node.label`.
*/
default(scope: {
/**
* Current node
*/
node: any;
/**
* Resolved node icon.
*/
icon: string | Component | undefined;
/**
* Whether the node is currently selected.
*/
selected: boolean;
/**
* Whether the node is partially selected in checkbox mode.
*/
partialSelected: boolean;
/**
* Toggles the current node's selection state.
*/
toggleSelection: () => void;
/**
* Class of the node label element (`.p-organizationchart-node-label`).
*/
labelClass: string;
}): VNode[];
/**
* Custom toggler icon template rendered inside the collapse button.
*/
toggleicon(scope: {
/**
* Current collapsed state of the node
*/
collapsed: boolean;
}): VNode[];
/**
* Custom icon template for the built-in checkbox, rendered in checkbox selection mode.
*/
checkboxicon(scope: {
/**
* Whether the node is currently selected (checkbox checked).
*/
checked: boolean;
/**
* Whether the node is partially selected (checkbox indeterminate).
*/
partialChecked: boolean;
/**
* Style class of the icon.
*/
class: string;
}): VNode[];
}
/**
* Defines valid emits in OrganizationChart component.
*/
export interface OrganizationChartEmitsOptions {
/**
* Emitted when the selection changes.
* @param {OrganizationChartSelectionKeys} value - New selection keys.
*/
'update:selectionKeys'(value: OrganizationChartSelectionKeys): void;
/**
* Emitted when the collapsed keys change.
* @param {OrganizationChartCollapsedKeys} value - New collapsed keys.
*/
'update:collapsedKeys'(value: OrganizationChartCollapsedKeys): void;
/**
* Callback to invoke when a node is selected.
* @param {OrganizationChartNode} node - Node instance.
*/
'node-select'(node: OrganizationChartNode): void;
/**
* Callback to invoke when a node is unselected.
* @param {OrganizationChartNode} node - Node instance.
*/
'node-unselect'(node: OrganizationChartNode): void;
/**
* Callback to invoke when a node is expanded.
* @param {OrganizationChartNode} node - Node instance.
*/
'node-expand'(node: OrganizationChartNode): void;
/**
* Callback to invoke when a node is collapsed.
* @param {OrganizationChartNode} node - Node instance.
*/
'node-collapse'(node: OrganizationChartNode): void;
}
export declare type OrganizationChartEmits = EmitFn<OrganizationChartEmitsOptions>;
/**
* **PrimeVue - OrganizationChart**
*
* _OrganizationChart visualizes hierarchical organization data._
*
* [Live Demo](https://www.primevue.dev/organizationchart/)
* --- ---
* 
*
* @group Component
*
*/
declare const OrganizationChart: DefineComponent<OrganizationChartProps, OrganizationChartSlots, OrganizationChartEmits>;
declare module 'vue' {
export interface GlobalComponents {
OrganizationChart: DefineComponent<OrganizationChartProps, OrganizationChartSlots, OrganizationChartEmits>;
}
}
export default OrganizationChart;