Resizable

Painéis redimensionáveis com handle de arraste.

Uso

<script setup lang="ts">
import { Resizable } from '@halfbyte/maka'

const panels = [
  { id: 'sidebar',  defaultSize: 25, minSize: 15, maxSize: 40 },
  { id: 'content',  defaultSize: 75 },
]
</script>

<template>
  <Resizable :panels="panels" style="height: 400px">
    <template #sidebar>
      <div style="padding: 16px">Barra lateral</div>
    </template>
    <template #content>
      <div style="padding: 16px">Conteúdo principal</div>
    </template>
  </Resizable>
</template>

Vertical

<Resizable
  :panels="[{ id: 'top', defaultSize: 50 }, { id: 'bottom', defaultSize: 50 }]"
  orientation="vertical"
  style="height: 400px"
>
  <template #top><div style="padding:16px">Topo</div></template>
  <template #bottom><div style="padding:16px">Base</div></template>
</Resizable>

Props

Prop	Tipo	Padrão
panels	ResizablePanel[]	obrigatório
orientation	"horizontal" | "vertical"	"horizontal"

ResizablePanel

Campo	Tipo	Descrição
id	string	Identificador único do painel
defaultSize	number	Tamanho inicial em % (0–100)
minSize	number	Tamanho mínimo em % (opcional)
maxSize	number	Tamanho máximo em % (opcional)

Slots

Slot	Descrição
{panel.id}	Conteúdo do painel com o id fornecido

Events

Evento	Payload	Descrição
resize	Record<string, number>	Emitido ao soltar o handle com os tamanhos