Vitral 0.2
Personalização

Locale

Tudo o que um componente diz vem de um único objeto, e números e datas também são lidos com ele.

Um componente nunca guarda uma string. Tudo o que ele diz (“Limpar”, “Nenhum resultado”, os nomes dos meses, o resumo da paginação, o nome do botão de fechar) vem do locale da configuração, e a configuração é reativa, então mudá-la muda a página.

Definindo um

main.ts
import { Vitral, ptBR } from '@vitral/vue';

createApp(App).use(Vitral, { locale: ptBR });

en e ptBR vêm prontos. e abra um DatePicker ou um DataGrid.

Em tempo de execução

Bar.vue
const { locale, setLocale } = useLocale();

setLocale(ptBR);           // every component follows, reactively

Um locale só seu

Um locale é um objeto simples, então um terceiro é só um literal: espalhe en e escreva as diferenças.

fr.ts
import { en } from '@vitral/vue';

const frFR = {
    ...en,
    firstDayOfWeek: 1,
    dayNames: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
    clear: 'Effacer',
    emptyMessage: 'Aucun résultat'
};

Mais do que strings

  • Números são formatados e lidos conforme o locale: um InputNumber em pt-BR lê “1.234,56” como 1234.56.
  • Datas usam os nomes de dias e meses do locale, o seu primeiro dia da semana e o seu formato de data, nos dois sentidos.
  • Filtros ignoram acentos e maiúsculas, então “São” encontra “sao” e “Sao” encontra “São”.
  • Mensagens com placeholders passam por formatMessage, como em '{first} to {last} of {total}'.