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

implementado tema azul

Browse source
This commit is contained in:
Luiz Silva 2026-09-24 07:24:33 -03:00
parent b4394aacd8
commit 8a6a499b60
13 changed files with 2830 additions and 2362 deletions
Download patch file Download diff file Expand all files Collapse all files

46
README.md
View file

@ -37,6 +37,52 @@ Certifique-se de que seu projeto esteja configurado com Vuetify 3.
---
## 🎨 Temas da Aplicação (`definirTemaAplicacao`)
O `eli-vue` suporta temas institucionais prontos para os produtos do ecossistema:
- **`"verde"`** (padrão): Módulos **e-licencie** (paleta institucional Verde Floresta `#688C00`).
- **`"azul"`**: Módulos **Betha Meio Ambiente** (paleta Azul Betha `#007BFF` / `#0069D9`).
### Uso no `main.ts`
```typescript
import { createApp } from "vue"
import EliVue, { definirTemaAplicacao, obterCoresVuetifyTema } from "eli-vue"
import { createVuetify } from "vuetify"
import App from "./App.vue"
// 1. Define o tema visual do Design System (tokens CSS no :root)
definirTemaAplicacao("azul") // ou "verde"
// 2. (Opcional) Configurar cores correspondentes no Vuetify 3
const vuetify = createVuetify({
theme: {
defaultTheme: "azul",
themes: {
azul: {
dark: false,
colors: {
...obterCoresVuetifyTema("azul"),
},
},
verde: {
dark: false,
colors: {
...obterCoresVuetifyTema("verde"),
},
},
},
},
})
const app = createApp(App)
app.use(vuetify)
app.use(EliVue)
app.mount("#app")
```
---
## 📦 Referência de Componentes
### 1. EliTabela (Tabela de Dados)

4727
dist/eli-vue.es.js vendored
View file

File diff suppressed because one or more lines are too long

70
dist/eli-vue.umd.js vendored
View file

File diff suppressed because one or more lines are too long

1
dist/types/index.d.ts vendored
View file

@ -10,6 +10,7 @@ export { iniciarFiltroDelta } from "p-comuns";
export * from "./componentes/EliEntrada";
export * from "./componentes/EliTabela";
export * from "./componentes/FeedbackWidget";
export * from "./temas";
export * from "./tipos";
export { EliBadge, EliBotao, EliCartao, EliFeedbackWidget, EliOlaMundo };
declare const EliVue: Plugin;

19
dist/types/temas/constantes.d.ts vendored Normal file
View file

@ -0,0 +1,19 @@
import type { CoresVuetifyTemaEli, TipoTemaAplicacao, TokensTemaEli } from "./tipos";
/**
* Tokens do Tema Verde — Institucional e-licencie (Verde floresta #688C00)
*/
export declare const TOKENS_TEMA_VERDE: TokensTemaEli;
/**
* Tokens do Tema Azul — Betha Meio Ambiente (Azul Betha #007BFF / #0069D9)
*/
export declare const TOKENS_TEMA_AZUL: TokensTemaEli;
/**
* Cores para o tema do Vuetify 3 — Verde (e-licencie)
*/
export declare const CORES_VUETIFY_VERDE: CoresVuetifyTemaEli;
/**
* Cores para o tema do Vuetify 3 — Azul (Betha Meio Ambiente)
*/
export declare const CORES_VUETIFY_AZUL: CoresVuetifyTemaEli;
export declare const MAPA_TOKENS_TEMAS: Record<TipoTemaAplicacao, TokensTemaEli>;
export declare const MAPA_CORES_VUETIFY_TEMAS: Record<TipoTemaAplicacao, CoresVuetifyTemaEli>;

27
dist/types/temas/index.d.ts vendored Normal file
View file

@ -0,0 +1,27 @@
import type { CoresVuetifyTemaEli, OpcoesDefinirTema, TipoTemaAplicacao, TokensTemaEli } from "./tipos";
export * from "./constantes";
export * from "./tipos";
/**
* Retorna os tokens CSS para o tema solicitado.
*
* @param tema 'verde' para e-licencie ou 'azul' para Betha Meio Ambiente.
*/
export declare function obterTokensTema(tema: TipoTemaAplicacao): TokensTemaEli;
/**
* Retorna a paleta de cores para o Vuetify 3 correspondente ao tema solicitado.
*
* @param tema 'verde' para e-licencie ou 'azul' para Betha Meio Ambiente.
*/
export declare function obterCoresVuetifyTema(tema: TipoTemaAplicacao): CoresVuetifyTemaEli;
/**
* Define o tema visual da aplicação (Design Tokens CSS e opcionalmente Vuetify).
*
* @param tema 'verde' para e-licencie ou 'azul' para Betha Meio Ambiente.
* @param opcoes Opções como elemento raiz ou instância Vuetify para comutação dinâmica.
*
* @example
* // No main.ts da sua aplicação:
* import { definirTemaAplicacao } from "eli-vue"
* definirTemaAplicacao("azul")
*/
export declare function definirTemaAplicacao(tema: TipoTemaAplicacao, opcoes?: OpcoesDefinirTema): void;

48
dist/types/temas/tipos.d.ts vendored Normal file
View file

@ -0,0 +1,48 @@
/**
* Tipos do sistema de temas da biblioteca eli-vue.
*/
export type TipoTemaAplicacao = "verde" | "azul";
export interface TokensTemaEli {
"--cor-eli-primaria-bg": string;
"--cor-eli-primaria-zebra": string;
"--cor-eli-primaria-suave": string;
"--cor-eli-primaria-header": string;
"--cor-eli-primaria-clara": string;
"--cor-eli-primaria-media": string;
"--cor-eli-primaria-acao": string;
"--cor-eli-primaria": string;
"--cor-eli-primaria-escura": string;
"--cor-eli-primaria-texto": string;
"--cor-eli-fundo-suave"?: string;
"--cor-eli-fundo"?: string;
"--cor-eli-borda"?: string;
"--cor-eli-borda-forte"?: string;
"--cor-eli-neutro"?: string;
"--cor-eli-neutro-escuro"?: string;
"--cor-eli-superficie"?: string;
}
export interface CoresVuetifyTemaEli {
primary: string;
"primary-dark": string;
"primary-light": string;
[chave: string]: string;
}
export interface OpcoesDefinirTema {
/**
* Elemento HTML onde as variáveis CSS serão aplicadas.
* Padrão: document.documentElement (:root).
*/
elemento?: HTMLElement;
/**
* Instância do Vuetify para alternar o tema do Vuetify dinamicamente se configurado.
*/
vuetify?: {
theme?: {
global?: {
name: {
value: string;
};
};
};
};
}

2
src/index.ts
View file

@ -22,6 +22,8 @@ export * from "./componentes/EliEntrada"
// Exportar tudo (componentes + types + helpers) de Tabela e Entrada
export * from "./componentes/EliTabela"
export * from "./componentes/FeedbackWidget"
// Exportar sistema de temas
export * from "./temas"
// Exportar tipos compartilhados (ex: CartaoStatus)
export * from "./tipos"
export { EliBadge, EliBotao, EliCartao, EliFeedbackWidget, EliOlaMundo }

31
src/playground/App.vue
View file

@ -6,7 +6,23 @@
<!-- Seção de Componentes -->
<div style="flex: 1; min-width: 0; overflow-y: auto;">
<v-container class="py-6">
<h1 class="text-h5 mb-4">Playground — eli-vue</h1>
<div class="d-flex align-center justify-space-between mb-4">
<h1 class="text-h5">Playground — eli-vue</h1>
<v-btn-toggle
v-model="temaAtual"
mandatory
density="compact"
color="primary"
@update:model-value="alternarTema"
>
<v-btn value="verde" prepend-icon="mdi-leaf" size="small">
Verde (e-licencie)
</v-btn>
<v-btn value="azul" prepend-icon="mdi-water" size="small">
Azul (Betha)
</v-btn>
</v-btn-toggle>
</div>
<v-tabs v-model="aba" color="primary" density="comfortable">
<v-tab value="botao">Botão</v-tab>
@ -76,7 +92,9 @@
<script lang="ts">
import { defineComponent, provide, ref } from "vue"
import { useTheme } from "vuetify"
import { EliFeedbackWidget } from "../componentes/FeedbackWidget"
import { definirTemaAplicacao, type TipoTemaAplicacao } from "../temas"
import BotaoPlayground from "./botao.playground.vue"
import CartaoPlayground from "./cartao.playground.vue"
import DataHoraPlayground from "./data_hora.playground.vue"
@ -147,9 +165,20 @@ export default defineComponent({
const consoleApi: PlaygroundConsole = { adicionarLog, logMensagem }
provide(PLAYGROUND_CONSOLE_KEY, consoleApi)
const theme = useTheme()
const temaAtual = ref<TipoTemaAplicacao>("verde")
function alternarTema(novoTema: TipoTemaAplicacao) {
temaAtual.value = novoTema
definirTemaAplicacao(novoTema, { vuetify: { theme } })
logMensagem(`🎨 Tema alterado para: ${novoTema}`)
}
return {
logsConsole,
aba: ref<AbaPlayground>("botao"),
temaAtual,
alternarTema,
}
},
mounted() {

24
src/playground/main.ts
View file

@ -155,13 +155,33 @@ const themeDefault = {
},
}
import { CORES_VUETIFY_AZUL, CORES_VUETIFY_VERDE } from "../temas"
const temaVerde = {
...themeDefault,
colors: {
...themeDefault.colors,
...CORES_VUETIFY_VERDE,
},
}
const temaAzul = {
...themeDefault,
colors: {
...themeDefault.colors,
...CORES_VUETIFY_AZUL,
},
}
const vuetify = createVuetify({
components,
directives,
theme: {
defaultTheme: "themeDefault",
defaultTheme: "verde",
themes: {
themeDefault,
verde: temaVerde,
azul: temaAzul,
themeDefault: temaVerde,
},
},
})

81
src/temas/constantes.ts Normal file
View file

@ -0,0 +1,81 @@
import type { CoresVuetifyTemaEli, TipoTemaAplicacao, TokensTemaEli } from "./tipos"
/**
* Tokens do Tema Verde — Institucional e-licencie (Verde floresta #688C00)
*/
export const TOKENS_TEMA_VERDE: TokensTemaEli = {
// Escala primária
"--cor-eli-primaria-bg": "#EEF3D0",
"--cor-eli-primaria-zebra": "#F6F9E8",
"--cor-eli-primaria-suave": "#BFC99C",
"--cor-eli-primaria-header": "#ADCC44",
"--cor-eli-primaria-clara": "#D4E290",
"--cor-eli-primaria-media": "#ADCC44",
"--cor-eli-primaria-acao": "#8AAF00",
"--cor-eli-primaria": "#688C00",
"--cor-eli-primaria-escura": "#4A6500",
"--cor-eli-primaria-texto": "#2E3F00",
// Escala neutra
"--cor-eli-fundo-suave": "#F8F9F5",
"--cor-eli-fundo": "#F2F3EE",
"--cor-eli-borda": "#D5D8CC",
"--cor-eli-borda-forte": "#B5BAA8",
"--cor-eli-neutro": "#5E6553",
"--cor-eli-neutro-escuro": "#3E4436",
"--cor-eli-superficie": "#FFFFFF",
}
/**
* Tokens do Tema Azul — Betha Meio Ambiente (Azul Betha #007BFF / #0069D9)
*/
export const TOKENS_TEMA_AZUL: TokensTemaEli = {
// Escala primária
"--cor-eli-primaria-bg": "#EBF3FC",
"--cor-eli-primaria-zebra": "#F4F8FD",
"--cor-eli-primaria-suave": "#D0E3F9",
"--cor-eli-primaria-header": "#9BC5F6",
"--cor-eli-primaria-clara": "#66A8F4",
"--cor-eli-primaria-media": "#338BF2",
"--cor-eli-primaria-acao": "#0069D9",
"--cor-eli-primaria": "#007BFF",
"--cor-eli-primaria-escura": "#0056B3",
"--cor-eli-primaria-texto": "#0A2E5C",
// Escala neutra
"--cor-eli-fundo-suave": "#F7F9FC",
"--cor-eli-fundo": "#F0F4F8",
"--cor-eli-borda": "#D0D7DE",
"--cor-eli-borda-forte": "#A8B6C5",
"--cor-eli-neutro": "#4B5563",
"--cor-eli-neutro-escuro": "#1E293B",
"--cor-eli-superficie": "#FFFFFF",
}
/**
* Cores para o tema do Vuetify 3 — Verde (e-licencie)
*/
export const CORES_VUETIFY_VERDE: CoresVuetifyTemaEli = {
primary: "#688C00",
"primary-dark": "#4A6500",
"primary-light": "#EEF3D0",
}
/**
* Cores para o tema do Vuetify 3 — Azul (Betha Meio Ambiente)
*/
export const CORES_VUETIFY_AZUL: CoresVuetifyTemaEli = {
primary: "#007BFF",
"primary-dark": "#0056B3",
"primary-light": "#EBF3FC",
}
export const MAPA_TOKENS_TEMAS: Record<TipoTemaAplicacao, TokensTemaEli> = {
verde: TOKENS_TEMA_VERDE,
azul: TOKENS_TEMA_AZUL,
}
export const MAPA_CORES_VUETIFY_TEMAS: Record<TipoTemaAplicacao, CoresVuetifyTemaEli> = {
verde: CORES_VUETIFY_VERDE,
azul: CORES_VUETIFY_AZUL,
}

60
src/temas/index.ts Normal file
View file

@ -0,0 +1,60 @@
import { MAPA_CORES_VUETIFY_TEMAS, MAPA_TOKENS_TEMAS } from "./constantes"
import type {
CoresVuetifyTemaEli,
OpcoesDefinirTema,
TipoTemaAplicacao,
TokensTemaEli,
} from "./tipos"
export * from "./constantes"
export * from "./tipos"
/**
* Retorna os tokens CSS para o tema solicitado.
*
* @param tema 'verde' para e-licencie ou 'azul' para Betha Meio Ambiente.
*/
export function obterTokensTema(tema: TipoTemaAplicacao): TokensTemaEli {
return MAPA_TOKENS_TEMAS[tema] ?? MAPA_TOKENS_TEMAS.verde
}
/**
* Retorna a paleta de cores para o Vuetify 3 correspondente ao tema solicitado.
*
* @param tema 'verde' para e-licencie ou 'azul' para Betha Meio Ambiente.
*/
export function obterCoresVuetifyTema(tema: TipoTemaAplicacao): CoresVuetifyTemaEli {
return MAPA_CORES_VUETIFY_TEMAS[tema] ?? MAPA_CORES_VUETIFY_TEMAS.verde
}
/**
* Define o tema visual da aplicação (Design Tokens CSS e opcionalmente Vuetify).
*
* @param tema 'verde' para e-licencie ou 'azul' para Betha Meio Ambiente.
* @param opcoes Opções como elemento raiz ou instância Vuetify para comutação dinâmica.
*
* @example
* // No main.ts da sua aplicação:
* import { definirTemaAplicacao } from "eli-vue"
* definirTemaAplicacao("azul")
*/
export function definirTemaAplicacao(tema: TipoTemaAplicacao, opcoes?: OpcoesDefinirTema): void {
if (typeof document === "undefined") {
return
}
const elemento = opcoes?.elemento ?? document.documentElement
const tokens = obterTokensTema(tema)
for (const [propriedade, valor] of Object.entries(tokens)) {
if (valor) {
elemento.style.setProperty(propriedade, valor)
}
}
elemento.setAttribute("data-eli-tema", tema)
if (opcoes?.vuetify?.theme?.global) {
opcoes.vuetify.theme.global.name.value = tema
}
}

56
src/temas/tipos.ts Normal file
View file

@ -0,0 +1,56 @@
/**
* Tipos do sistema de temas da biblioteca eli-vue.
*/
export type TipoTemaAplicacao = "verde" | "azul"
export interface TokensTemaEli {
// Escala primária
"--cor-eli-primaria-bg": string
"--cor-eli-primaria-zebra": string
"--cor-eli-primaria-suave": string
"--cor-eli-primaria-header": string
"--cor-eli-primaria-clara": string
"--cor-eli-primaria-media": string
"--cor-eli-primaria-acao": string
"--cor-eli-primaria": string
"--cor-eli-primaria-escura": string
"--cor-eli-primaria-texto": string
// Escala neutra e superfícies
"--cor-eli-fundo-suave"?: string
"--cor-eli-fundo"?: string
"--cor-eli-borda"?: string
"--cor-eli-borda-forte"?: string
"--cor-eli-neutro"?: string
"--cor-eli-neutro-escuro"?: string
"--cor-eli-superficie"?: string
}
export interface CoresVuetifyTemaEli {
primary: string
"primary-dark": string
"primary-light": string
[chave: string]: string
}
export interface OpcoesDefinirTema {
/**
* Elemento HTML onde as variáveis CSS serão aplicadas.
* Padrão: document.documentElement (:root).
*/
elemento?: HTMLElement
/**
* Instância do Vuetify para alternar o tema do Vuetify dinamicamente se configurado.
*/
vuetify?: {
theme?: {
global?: {
name: {
value: string
}
}
}
}
}