Começando

A AlpopUI é a biblioteca de componentes Vue 3 compartilhada entre os projetos front-end da Alpop.

Instalação

yarn add @alpop/ui

Uso como plugin

Registra todos os componentes globalmente:

import { createApp } from "vue"
import AlpopUI from "@alpop/ui"
import "@alpop/ui/styles"
import App from "./App.vue"

const app = createApp(App)

app.use(AlpopUI)
app.mount("#app")

Importação individual

Os componentes também podem ser importados isoladamente (com tree-shaking):

import { AlpopButton, AlpopDataTable } from "@alpop/ui"
import "@alpop/ui/styles"

Componentes que dependem de plugins (como AlpopModal, que usa vue-universal-modal) exigem que a AlpopUI seja instalada como plugin (app.use(AlpopUI)).

Tamanho de fonte raiz (rem)

Os estilos dos componentes usam unidades rem assumindo uma fonte raiz de 62,5% (ou seja, 1.5rem = 15px), igual aos projetos da Alpop. Defina isso na aplicação que consome a biblioteca:

html {
  font-size: 62.5%;
}

Traduções (i18n)

Os componentes não dependem de nenhuma biblioteca de i18n. Cada texto padrão já vem em português (Brasil) embutido como fallback, então a biblioteca funciona sem qualquer configuração de tradução.

Para sobrescrever os textos, a aplicação consumidora fornece uma função tradutora via a chave de injeção ALPOP_TRANSLATOR:

import AlpopUI, { ALPOP_TRANSLATOR } from "@alpop/ui"

const app = createApp(App)
app.use(AlpopUI)

// Conecte o tradutor do app (ex.: vue-i18n) à biblioteca.
app.provide(ALPOP_TRANSLATOR, (key) => i18n.global.t(key))

A resolução de texto segue a ordem "prop explícita → tradução → fallback":

1. Uma prop de label passada explicitamente sempre vence.
2. Senão, a função tradutora é chamada com a chave do componente. Se devolver undefined/null ou ecoar a própria chave de volta (chave não encontrada), passa-se ao próximo passo.
3. Por fim, usa-se o fallback em pt-BR embutido no componente.

Apenas os componentes com textos próprios usam o tradutor (ex.: data-table, confirmation-modal, select-field, campos de arquivo). Os demais recebem todos os textos via props.

A lista completa de chaves e seus fallbacks está em Chaves de tradução.

Cores e tema

A AlpopUI vem com a marca Alpop por padrão, mas expõe um conjunto de tokens CSS (--alpop-*) que o app consumidor pode sobrescrever no próprio :root para re-tematizar os componentes em tempo de execução, sem rebuild. A lista completa de tokens e como sobrescrevê-los está em Estilos e customização.