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

build

Browse source
This commit is contained in:
Luiz Silva 2026-02-15 15:17:08 -03:00
parent 8a5596e860
commit 57325f6744
100 changed files with 16153 additions and 4623 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/playground/App.vue
View file

@ -27,14 +27,14 @@
</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 EntradasPlayground from "./entradas.playground.vue";
import DataHoraPlayground from "./data_hora.playground.vue";
import TabelaPlayground from "./tabela.playground.vue";
import OlaMundoPlayground from "./ola_mundo.playground.vue";
import { defineComponent } from "vue"
import BotaoPlayground from "./botao.playground.vue"
import CartaoPlayground from "./cartao.playground.vue"
import DataHoraPlayground from "./data_hora.playground.vue"
import EntradasPlayground from "./entradas.playground.vue"
import IndicadorPlayground from "./indicador.playground.vue"
import OlaMundoPlayground from "./ola_mundo.playground.vue"
import TabelaPlayground from "./tabela.playground.vue"
type AbaPlayground =
| "botao"
@ -43,7 +43,7 @@ type AbaPlayground =
| "entradas"
| "data_hora"
| "tabela"
| "ola_mundo";
| "ola_mundo"
const mapaHashParaAba: Record<string, AbaPlayground> = {
botao: "botao",
@ -53,7 +53,7 @@ const mapaHashParaAba: Record<string, AbaPlayground> = {
"data-hora": "data_hora",
tabela: "tabela",
demo: "ola_mundo",
};
}
const mapaAbaParaHash: Record<AbaPlayground, string> = {
botao: "botao",
@ -63,7 +63,7 @@ const mapaAbaParaHash: Record<AbaPlayground, string> = {
data_hora: "data-hora",
tabela: "tabela",
ola_mundo: "demo",
};
}
export default defineComponent({
name: "App",
@ -85,61 +85,67 @@ export default defineComponent({
body: "",
},
googleSansCheck: "(checando...)" as string,
};
}
},
mounted() {
this.sincronizarAbaComHash();
window.addEventListener("hashchange", this.sincronizarAbaComHash);
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;
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"'));
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;
this.fontVars.body = getComputedStyle(document.body).fontFamily
})
.catch(() => {
this.googleSansCheck = "erro";
});
this.googleSansCheck = "erro"
})
},
beforeUnmount() {
window.removeEventListener("hashchange", this.sincronizarAbaComHash);
window.removeEventListener("hashchange", this.sincronizarAbaComHash)
},
watch: {
aba() {
this.sincronizarHashComAba();
this.sincronizarHashComAba()
},
},
methods: {
normalizarHash() {
const valor = window.location.hash.replace(/^#\/?/, "").trim();
return valor;
const valor = window.location.hash.replace(/^#\/?/, "").trim()
return valor
},
sincronizarAbaComHash() {
const hash = this.normalizarHash();
const hash = this.normalizarHash()
const aba = mapaHashParaAba[hash] ?? "botao";
const aba = mapaHashParaAba[hash] ?? "botao"
if (this.aba !== aba) {
this.aba = aba;
this.aba = aba
}
// Se a URL estiver vazia/fora do padrão, normalizamos.
this.sincronizarHashComAba();
this.sincronizarHashComAba()
},
sincronizarHashComAba() {
const destino = `#/${mapaAbaParaHash[this.aba]}`;
const destino = `#/${mapaAbaParaHash[this.aba]}`
if (window.location.hash !== destino) {
window.location.hash = destino;
window.location.hash = destino
}
},
},
});
})
</script>