Vitral 0.2
Dados

OrganizationChart

Uma árvore desenhada como gráfico, com nós que se recolhem e abrem, podem ser selecionados e aceitam um template por tipo de nó.

Testado com WAI-ARIA

Importação

main.ts
import { OrganizationChart } from '@vitral/vue';

Selecionável e recolhível

  • ALAna LimaCEO
    • BCBruno CostaCTO
      • Web
      • Mobile
    • CDCarla DiasCFO
      • Finance
    • Operations
Selected: none
<script setup lang="ts">import { Avatar, OrganizationChart, type OrganizationChartNode } from '@vitral/vue';import { ref } from 'vue'; const chart: OrganizationChartNode = {    key: 'ceo',    type: 'person',    data: { name: 'Ana Lima', title: 'CEO', initials: 'AL' },    children: [        {            key: 'cto',            type: 'person',            data: { name: 'Bruno Costa', title: 'CTO', initials: 'BC' },            children: [                { key: 'web', label: 'Web' },                { key: 'mobile', label: 'Mobile' }            ]        },        {            key: 'cfo',            type: 'person',            data: { name: 'Carla Dias', title: 'CFO', initials: 'CD' },            children: [{ key: 'finance', label: 'Finance' }]        },        { key: 'ops', label: 'Operations', collapsible: false }    ]}; const selection = ref<Record<string, boolean>>({});</script> <template>    <OrganizationChart v-model:selection-keys="selection" :value="chart" selection-mode="single" collapsible aria-label="Company">        <template #person="{ node }">            <div style="display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 7rem">                <Avatar :label="(node.data as { initials: string }).initials" shape="circle" />                <strong>{{ (node.data as { name: string }).name }}</strong>                <small style="color: var(--vt-text-muted-color)">{{ (node.data as { title: string }).title }}</small>            </div>        </template>    </OrganizationChart>    <small style="color: var(--vt-text-muted-color)">Selected: {{ Object.keys(selection).join(', ') || 'none' }}</small></template>

API

Lido de packages/vue/src/components/OrganizationChart/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
valueOrganizationChartNodeO topo do organograma.
selectionMode'single' | 'multiple'—
collapsiblebooleanOs nós podem ser recolhidos.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
node-selectnode: OrganizationChartNode—
node-unselectnode: OrganizationChartNode—
node-expandnode: OrganizationChartNode—
node-collapsenode: OrganizationChartNode—

Slots

NomeProps do slotDescrição
default(props: { node: OrganizationChartNode })O conteúdo de um nó; um slot com o nome do `type` de um nó tem prioridade.