Vitral 0.2
Personalização

Pass-through

Alcance qualquer elemento de qualquer componente: atributos, classes ou uma função do estado daquela parte.

Todo elemento que um componente renderiza leva uma chamada: v-bind="part('name', state)". É essa chamada que junta as classes do tema, o pass-through de quem usa e o estado da parte, então qualquer coisa que o componente desenha pode ser alcançada sem fork, sem wrapper e sem seletor :deep().

Três formas

Example.vue
<!-- attributes on a part -->
<Select :pt="{ overlay: { style: 'min-width: 20rem' } }" />

<!-- a bare string is taken as a class -->
<Button :pt="{ root: 'rounded-full shadow-lg' }" />

<!-- a function of the part's context -->
<Select
    :pt="{
        option: ({ state }) => ({ class: state.selected ? 'font-semibold' : '' })
    }"
/>

O atalho em string existe para CSS utilitário: { root: 'px-4 py-2 rounded bg-violet-600' } é tudo o que quem usa Tailwind precisa escrever. A forma de função recebe { props, state, part }, em que state é o que o componente passou para aquele elemento, como { selected, focused } para uma opção.

Soma, não substitui

As classes são concatenadas, os estilos mesclados e os listeners encadeados, então uma classe de pass-through fica ao lado da classe do tema em vez de apagá-la. Para começar do zero, veja o modo sem estilo.

Ao vivo

Select.vue
<Select
    v-model="city"
    :options="cities"
    option-label="name"
    option-value="code"
    placeholder="Where"
    :pt="{
        root: { style: 'min-width: 14rem' },
        label: { style: 'letter-spacing: 0.04em; text-transform: uppercase' },
        dropdown: { style: 'color: var(--vt-primary-color)' }
    }"
/>

Globalmente

O mesmo objeto, com o nome do componente como chave, vale para todas as instâncias. É o gancho para um atributo de analytics ou uma regra da casa.

main.ts
createApp(App).use(Vitral, {
    pt: {
        button: { root: { 'data-analytics': 'button' } },
        select: { overlay: 'shadow-xl' }
    }
});

Quais partes existem

As partes de um componente são as chaves do seu mapa de classes em @vitral/styles: root e, depois, o que mais ele desenhar, como label, dropdown, overlay, option. Elas também são os seus nomes de classe CSS, sem o prefixo vt-, então o inspetor do DOM é a referência.