publico/vue-componentes
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

melhorias de css

Browse source
This commit is contained in:
Luiz Silva 2026-02-15 11:08:22 -03:00
parent e9b0a51801
commit 8a5596e860
8 changed files with 27 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

24
IA.md
View file

@ -51,7 +51,8 @@ import { createVuetify } from "vuetify";
// eli-vue
import EliVue from "eli-vue";
import "eli-vue/dist/eli-vue.css";
// eli-vue
import EliVue from "eli-vue";
const vuetify = createVuetify({});
@ -61,8 +62,8 @@ createApp(App)
.mount("#app");
```
> **IMPORTANTE**: O import do CSS (`import "eli-vue/dist/eli-vue.css";`) é **obrigatório**.
> O pacote utiliza **namespacing estático (BEM)** e não estilos scoped, portanto o arquivo CSS contém toda a estilização necessária.
> **Nota**: O CSS é **injetado automaticamente** no bundle JavaScript. Não é necessário importar arquivos `.css` manualmente.
### 2) Importação direta (quando não quiser plugin)
@ -78,9 +79,6 @@ import {
EliEntradaParagrafo,
EliEntradaSelecao,
} from "eli-vue";
// OBRIGATÓRIO: Importar o CSS global
import "eli-vue/dist/eli-vue.css";
```
---
@ -534,17 +532,12 @@ Provável causa: componente não foi registrado.
### 2) Estilos não aplicam ou componentes "quebrados"
**Causa provável**: O CSS do pacote não foi importado.
**Causa provável**: O CSS não foi injetado corretamente pelo JavaScript.
O `eli-vue` removeu o uso de `<style scoped>` para evitar problemas de hidratação e compatibilidade entre builds.
Todo o estilo reside em arquivos CSS estáticos que precisam ser carregados.
O `eli-vue` injeta o CSS automaticamente via JS. Verifique se o bundle está sendo carregado corretamente e se não há bloqueios de Content Security Policy (CSP) para injeção de estilos `<style>`.
**Solução**:
Adicione no seu `main.ts` ou componente raiz:
Anteriormente era necessário importar o CSS manualmente, mas **isso não é mais necessário**.
```ts
import "eli-vue/dist/eli-vue.css";
```
### 3) Erro de tipo em `celulaTabela`
@ -564,8 +557,7 @@ Quando for integrar `eli-vue` num projeto existente:
1) Verifique se **Vue 3**, **Vuetify 3** e **lucide-vue-next** estão instalados.
2) Prefira usar o **plugin** do `eli-vue` (simplifica registro global).
3) Garanta o import do CSS do pacote (`eli-vue/dist/eli-vue.css`).
4) Use `celulaTabela` para construir colunas de tabelas de forma tipada.
3) Use `celulaTabela` para construir colunas de tabelas de forma tipada.
5) Ao definir tabelas, use `tipoEliTabelaConsulta<T>` para garantir que colunas e filtros batam com o tipo de dados.
---