organization-chart-vue3
Version:
A lightweight, interactive organization chart component for Vue 3 with collapsible nodes, TypeScript types, custom slots, and selection events
90 lines (89 loc) • 3.75 kB
TypeScript
import { type PropType, type Slot } from "vue";
import type { OrganizationChartMemberSlotProps, OrganizationChartMember, OrganizationChartNode, OrganizationChartSelectPayload, OrganizationChartTogglePayload, OrganizationChartTitleSlotProps } from "../types";
declare const _default: typeof __VLS_export;
export default _default;
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
node: {
type: PropType<OrganizationChartNode>;
required: true;
};
depth: {
type: NumberConstructor;
required: true;
};
path: {
type: PropType<string[]>;
required: true;
};
expandedState: {
type: PropType<Record<string, boolean>>;
required: true;
};
nodeTitleSlot: {
type: PropType<Slot<OrganizationChartTitleSlotProps> | undefined>;
default: undefined;
};
memberSlot: {
type: PropType<Slot<OrganizationChartMemberSlotProps> | undefined>;
default: undefined;
};
}>, {
childColspan: import("vue").ComputedRef<number>;
getKeyForChild: (child: OrganizationChartNode, index: number) => string;
getKeyForMember: (member: OrganizationChartMember, index: number) => string;
getPathForChild: (child: OrganizationChartNode, index: number) => string[];
handleMemberClick: (member: OrganizationChartMember, index: number) => void;
handleNodeClick: () => void;
hasChildren: import("vue").ComputedRef<boolean>;
hasMembers: import("vue").ComputedRef<boolean>;
isExpanded: import("vue").ComputedRef<boolean>;
toggleNode: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
toggle: (_payload: OrganizationChartTogglePayload) => true;
"click-node": (_payload: OrganizationChartNode | OrganizationChartMember) => true;
select: (_payload: OrganizationChartSelectPayload) => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
node: {
type: PropType<OrganizationChartNode>;
required: true;
};
depth: {
type: NumberConstructor;
required: true;
};
path: {
type: PropType<string[]>;
required: true;
};
expandedState: {
type: PropType<Record<string, boolean>>;
required: true;
};
nodeTitleSlot: {
type: PropType<Slot<OrganizationChartTitleSlotProps> | undefined>;
default: undefined;
};
memberSlot: {
type: PropType<Slot<OrganizationChartMemberSlotProps> | undefined>;
default: undefined;
};
}>> & Readonly<{
onToggle?: ((_payload: OrganizationChartTogglePayload) => any) | undefined;
"onClick-node"?: ((_payload: OrganizationChartMember | OrganizationChartNode) => any) | undefined;
onSelect?: ((_payload: OrganizationChartSelectPayload) => any) | undefined;
}>, {
nodeTitleSlot: Slot<OrganizationChartTitleSlotProps> | undefined;
memberSlot: Slot<OrganizationChartMemberSlotProps> | undefined;
}, {}, {
RenderSlotContent: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
render: {
type: PropType<() => import("vue").VNodeChild>;
required: true;
};
}>, () => import("vue").VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
render: {
type: PropType<() => import("vue").VNodeChild>;
required: true;
};
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;