Vazio

Uma área sem conteúdo diz o que vai aparecer ali e qual é o próximo passo.

Quando usar

• Uma lista ou tabela sem nenhum registro ainda: "Nenhuma medição lançada".
• Uma busca ou um filtro sem resultado.
• Uma página que não existe (404), com o caminho de volta.

Não é erro: se a API falhou, use o padrão Erro.

Componentes

• BaseEmptyState: ícone, título, texto e o slot action para o próximo passo.
• BaseDataTable: empty-title, empty-text, empty-icon e o slot #empty-action mostram o estado vazio no lugar da tabela.
• BaseButton no slot da ação: o primeiro passo ("Lançar medição") ou a saída ("Limpar busca").

Texto

• Título: o que vai aparecer ali. "Nenhuma medição lançada", "Nenhuma obra cadastrada".
• Texto: quando aparece ou o que fazer. "As medições aparecem aqui assim que o apoio lançar a primeira."
• Depois de uma busca: diga o que não foi achado e ofereça "Limpar busca".
• O botão começa pelo verbo e diz o que cria: "Lançar medição", e não "Novo".

Faça e não faça

Faça	Não faça
"Nenhuma medição lançada", com o botão "Lançar medição" para quem pode lançar.	Uma tabela só com o cabeçalho e nenhuma linha.
Diferenciar a lista vazia da busca sem resultado.	Dizer "Nenhuma obra cadastrada" quando a busca é que não achou nada.
Esconder o botão de criar de quem não tem permissão para criar.	Mostrar um botão que leva a "Sem permissão".

Código

<script setup lang="ts">
import { BaseButton, BaseDataTable } from '@lab-inovacao-tjes/design-system'

const props = defineProps<{ rows: Measurement[]; query: string; canCreate: boolean }>()
const emit = defineEmits<{ create: []; clearSearch: [] }>()
</script>

<template>
  <BaseDataTable
    :columns="columns"
    :rows="props.rows"
    row-key="id"
    label="Medições"
    empty-icon="rulers"
    :empty-title="props.query ? `Nenhuma medição com “${props.query}”` : 'Nenhuma medição lançada'"
    :empty-text="props.query ? 'Confira o número ou limpe a busca.' : 'As medições aparecem aqui assim que o apoio lançar a primeira.'"
  >
    <template #empty-action>
      <BaseButton v-if="props.query" kind="secondary" @click="emit('clearSearch')">Limpar busca</BaseButton>
      <BaseButton v-else-if="props.canCreate" icon="plus-lg" @click="emit('create')">Lançar medição</BaseButton>
    </template>
  </BaseDataTable>
</template>

Na tela de referência

• P19, lista de obras: WorkListFeature.vue separa "Nenhuma obra cadastrada" de "Nenhuma obra combina com a busca".
• P19, planilhas e equipe do contrato: SheetsPanel.vue e TeamPanel.vue.
• P19, página não encontrada: NotFoundPage.vue, com o BaseEmptyState.
• P20: em construção.