Atualização floresta
This commit is contained in:
parent
0886fd5c3e
commit
2d4d8f8929
103 changed files with 19266 additions and 14160 deletions
|
|
@ -1,33 +1,78 @@
|
|||
<template>
|
||||
<v-container class="py-6">
|
||||
<h1 class="text-h5 mb-4">Playground — eli-vue</h1>
|
||||
<div style="display: flex; flex-direction: row; min-height: 100vh;">
|
||||
<!-- 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>
|
||||
|
||||
<v-tabs v-model="aba" color="primary" density="comfortable">
|
||||
<v-tab value="botao">Botão</v-tab>
|
||||
<v-tab value="indicador">Indicador</v-tab>
|
||||
<v-tab value="cartao">Cartão</v-tab>
|
||||
<v-tab value="entradas">Entradas</v-tab>
|
||||
<v-tab value="data_hora">Data e hora</v-tab>
|
||||
<v-tab value="tabela">Tabela</v-tab>
|
||||
<v-tab value="ola_mundo">Demo</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-divider class="my-4" />
|
||||
|
||||
<v-tabs v-model="aba" color="primary" density="comfortable">
|
||||
<v-tab value="botao">Botão</v-tab>
|
||||
<v-tab value="indicador">Indicador</v-tab>
|
||||
<v-tab value="cartao">Cartão</v-tab>
|
||||
<v-tab value="entradas">Entradas</v-tab>
|
||||
<v-tab value="data_hora">Data e hora</v-tab>
|
||||
<v-tab value="tabela">Tabela</v-tab>
|
||||
<v-tab value="ola_mundo">Demo</v-tab>
|
||||
</v-tabs>
|
||||
<BotaoPlayground v-if="aba === 'botao'" />
|
||||
<IndicadorPlayground v-else-if="aba === 'indicador'" />
|
||||
<CartaoPlayground v-else-if="aba === 'cartao'" />
|
||||
<EntradasPlayground v-else-if="aba === 'entradas'" />
|
||||
<DataHoraPlayground v-else-if="aba === 'data_hora'" />
|
||||
<TabelaPlayground v-else-if="aba === 'tabela'" />
|
||||
<OlaMundoPlayground v-else />
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
<v-divider class="my-4" />
|
||||
<!-- Console Global do Playground -->
|
||||
<div
|
||||
class="playground-console"
|
||||
style="width: 400px; flex-shrink: 0; background: #121212; color: #a3e635; padding: 24px 20px; border-left: 1px solid #333; display: flex; flex-direction: column; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px;"
|
||||
>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; padding-bottom: 12px; margin-bottom: 16px;">
|
||||
<span style="font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; display: flex; align-items: center; gap: 8px;">
|
||||
Console
|
||||
<div style="width: 6px; height: 6px; border-radius: 50%; background-color: #22c55e; box-shadow: 0 0 8px #22c55e;"></div>
|
||||
</span>
|
||||
<button
|
||||
@click="logsConsole = []"
|
||||
style="font-size: 10px; cursor: pointer; color: #ef4444; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 4px; padding: 2px 8px; font-family: inherit;"
|
||||
>LIMPAR</button>
|
||||
</div>
|
||||
|
||||
<BotaoPlayground v-if="aba === 'botao'" />
|
||||
<IndicadorPlayground v-else-if="aba === 'indicador'" />
|
||||
<CartaoPlayground v-else-if="aba === 'cartao'" />
|
||||
<EntradasPlayground v-else-if="aba === 'entradas'" />
|
||||
<DataHoraPlayground v-else-if="aba === 'data_hora'" />
|
||||
<TabelaPlayground v-else-if="aba === 'tabela'" />
|
||||
<OlaMundoPlayground v-else />
|
||||
</v-container>
|
||||
<div style="flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;" class="playground-console-scroll">
|
||||
<div v-if="logsConsole.length === 0" style="color: #52525b; font-size: 11px;">Nenhum log registrado ainda...</div>
|
||||
<pre
|
||||
v-for="(log, i) in logsConsole"
|
||||
:key="i"
|
||||
style="font-size: 11px; white-space: pre-wrap; word-break: break-all; color: #a1a1aa; border-left: 2px solid #52525b; padding-left: 8px; margin: 0;"
|
||||
>{{ log }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.playground-console-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.playground-console-scroll::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.playground-console-scroll::-webkit-scrollbar-thumb {
|
||||
background: #3f3f46;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.playground-console-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: #52525b;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue"
|
||||
import { defineComponent, provide, ref } from "vue"
|
||||
import BotaoPlayground from "./botao.playground.vue"
|
||||
import CartaoPlayground from "./cartao.playground.vue"
|
||||
import DataHoraPlayground from "./data_hora.playground.vue"
|
||||
|
|
@ -65,6 +110,15 @@ const mapaAbaParaHash: Record<AbaPlayground, string> = {
|
|||
ola_mundo: "demo",
|
||||
}
|
||||
|
||||
/** Chave de injeção para o console do playground */
|
||||
export const PLAYGROUND_CONSOLE_KEY = "playgroundConsole"
|
||||
|
||||
/** Tipagem do console injetado */
|
||||
export interface PlaygroundConsole {
|
||||
adicionarLog: (acao: string, req: unknown, res: unknown) => void
|
||||
logMensagem: (mensagem: string) => void
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "App",
|
||||
components: {
|
||||
|
|
@ -76,43 +130,34 @@ export default defineComponent({
|
|||
TabelaPlayground,
|
||||
OlaMundoPlayground,
|
||||
},
|
||||
data() {
|
||||
setup() {
|
||||
const logsConsole = ref<string[]>([])
|
||||
|
||||
/** Adiciona um log estruturado ao console global do playground */
|
||||
function adicionarLog(acao: string, req: unknown, res: unknown) {
|
||||
const time = new Date().toLocaleTimeString()
|
||||
logsConsole.value.unshift(
|
||||
`[${time}] 🌐 ${acao}\nReq: ${JSON.stringify(req, null, 2)}\nRes: ${JSON.stringify(res, null, 2)}`,
|
||||
)
|
||||
}
|
||||
|
||||
/** Adiciona uma mensagem simples ao console */
|
||||
function logMensagem(mensagem: string) {
|
||||
const time = new Date().toLocaleTimeString()
|
||||
logsConsole.value.unshift(`[${time}] ${mensagem}`)
|
||||
}
|
||||
|
||||
const consoleApi: PlaygroundConsole = { adicionarLog, logMensagem }
|
||||
provide(PLAYGROUND_CONSOLE_KEY, consoleApi)
|
||||
|
||||
return {
|
||||
aba: "botao" as AbaPlayground,
|
||||
fontVars: {
|
||||
eli: "",
|
||||
v: "",
|
||||
body: "",
|
||||
},
|
||||
googleSansCheck: "(checando...)" as string,
|
||||
logsConsole,
|
||||
aba: ref<AbaPlayground>("botao"),
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.sincronizarAbaComHash()
|
||||
window.addEventListener("hashchange", this.sincronizarAbaComHash)
|
||||
|
||||
// Coleta variáveis de fonte e confirma carregamento via FontFaceSet.
|
||||
this.fontVars.eli = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--eli-font-family")
|
||||
.trim()
|
||||
this.fontVars.v = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--v-font-family")
|
||||
.trim()
|
||||
this.fontVars.body = getComputedStyle(document.body).fontFamily
|
||||
|
||||
// Espera fonts carregarem e então checa se o navegador considera Google Sans disponível
|
||||
// (isso não garante 100% que TODOS pesos/estilos foram baixados, mas confirma que a face existe/foi carregada)
|
||||
document.fonts.ready
|
||||
.then(() => {
|
||||
this.googleSansCheck = String(
|
||||
document.fonts.check('12px "Google Sans"'),
|
||||
)
|
||||
// atualiza body depois do load, pois pode mudar após o font-face carregar
|
||||
this.fontVars.body = getComputedStyle(document.body).fontFamily
|
||||
})
|
||||
.catch(() => {
|
||||
this.googleSansCheck = "erro"
|
||||
})
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener("hashchange", this.sincronizarAbaComHash)
|
||||
|
|
@ -129,19 +174,14 @@ export default defineComponent({
|
|||
},
|
||||
sincronizarAbaComHash() {
|
||||
const hash = this.normalizarHash()
|
||||
|
||||
const aba = mapaHashParaAba[hash] ?? "botao"
|
||||
|
||||
if (this.aba !== aba) {
|
||||
this.aba = aba
|
||||
}
|
||||
|
||||
// Se a URL estiver vazia/fora do padrão, normalizamos.
|
||||
this.sincronizarHashComAba()
|
||||
},
|
||||
sincronizarHashComAba() {
|
||||
const destino = `#/${mapaAbaParaHash[this.aba]}`
|
||||
|
||||
if (window.location.hash !== destino) {
|
||||
window.location.hash = destino
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue