145 lines
4.1 KiB
Vue
145 lines
4.1 KiB
Vue
<template>
|
|
<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="campo">Campo</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" />
|
|
|
|
<BotaoPlayground v-if="aba === 'botao'" />
|
|
<IndicadorPlayground v-else-if="aba === 'indicador'" />
|
|
<CartaoPlayground v-else-if="aba === 'cartao'" />
|
|
<CampoPlayground v-else-if="aba === 'campo'" />
|
|
<DataHoraPlayground v-else-if="aba === 'data_hora'" />
|
|
<TabelaPlayground v-else-if="aba === 'tabela'" />
|
|
<OlaMundoPlayground v-else />
|
|
</v-container>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import BotaoPlayground from "./botao.playground.vue";
|
|
import IndicadorPlayground from "./indicador.playground.vue";
|
|
import CartaoPlayground from "./cartao.playground.vue";
|
|
import CampoPlayground from "./campo.playground.vue";
|
|
import DataHoraPlayground from "./data_hora.playground.vue";
|
|
import TabelaPlayground from "./tabela.playground.vue";
|
|
import OlaMundoPlayground from "./ola_mundo.playground.vue";
|
|
|
|
type AbaPlayground =
|
|
| "botao"
|
|
| "indicador"
|
|
| "cartao"
|
|
| "campo"
|
|
| "data_hora"
|
|
| "tabela"
|
|
| "ola_mundo";
|
|
|
|
const mapaHashParaAba: Record<string, AbaPlayground> = {
|
|
botao: "botao",
|
|
indicador: "indicador",
|
|
cartao: "cartao",
|
|
campo: "campo",
|
|
"data-hora": "data_hora",
|
|
tabela: "tabela",
|
|
demo: "ola_mundo",
|
|
};
|
|
|
|
const mapaAbaParaHash: Record<AbaPlayground, string> = {
|
|
botao: "botao",
|
|
indicador: "indicador",
|
|
cartao: "cartao",
|
|
campo: "campo",
|
|
data_hora: "data-hora",
|
|
tabela: "tabela",
|
|
ola_mundo: "demo",
|
|
};
|
|
|
|
export default defineComponent({
|
|
name: "App",
|
|
components: {
|
|
BotaoPlayground,
|
|
IndicadorPlayground,
|
|
CartaoPlayground,
|
|
CampoPlayground,
|
|
DataHoraPlayground,
|
|
TabelaPlayground,
|
|
OlaMundoPlayground,
|
|
},
|
|
data() {
|
|
return {
|
|
aba: "botao" as AbaPlayground,
|
|
fontVars: {
|
|
eli: "",
|
|
v: "",
|
|
body: "",
|
|
},
|
|
googleSansCheck: "(checando...)" as string,
|
|
};
|
|
},
|
|
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);
|
|
},
|
|
watch: {
|
|
aba() {
|
|
this.sincronizarHashComAba();
|
|
},
|
|
},
|
|
methods: {
|
|
normalizarHash() {
|
|
const valor = window.location.hash.replace(/^#\/?/, "").trim();
|
|
return valor;
|
|
},
|
|
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;
|
|
}
|
|
},
|
|
},
|
|
});
|
|
</script>
|