implementado google fontes

dist/eli-vue.es.js

@@ -48,7 +48,7 @@ function ra(e, a, u, i, c, m) {
     size: e.size,
     disabled: e.disabled,
     loading: e.loading
-  }, e.$attrs, { class: "text-none pt-1" }), {
+  }, e.$attrs, { class: "eli-botao text-none pt-1" }), {
     default: z(() => [
       ie(e.$slots, "default")
     ]),
@@ -113,7 +113,8 @@ function la(e, a, u, i, c, m) {
     "offset-y": e.offsetY,
     dot: e.dot,
     content: e.badge,
-    style: e.badgeStyle
+    style: e.badgeStyle,
+    class: "eli-badge"
   }), {
     default: z(() => [
       ie(e.$slots, "default", {}, void 0, !0)
@@ -121,7 +122,7 @@ function la(e, a, u, i, c, m) {
     _: 3
   }, 16, ["color", "location", "offset-x", "offset-y", "dot", "content", "style"])) : ie(e.$slots, "default", { key: 1 }, void 0, !0);
 }
-const Ce = /* @__PURE__ */ j(na, [["render", la], ["__scopeId", "data-v-de2fbf2f"]]);
+const Ce = /* @__PURE__ */ j(na, [["render", la], ["__scopeId", "data-v-371c8db4"]]);
 function ia(e) {
   return e.replace(/\D+/g, "");
 }
@@ -1325,7 +1326,7 @@ function Ra(e, a, u, i, c, m) {
     ])
   ]);
 }
-const Wa = /* @__PURE__ */ j(Ha, [["render", Ra], ["__scopeId", "data-v-0fd1ad15"]]), Ja = N({
+const Wa = /* @__PURE__ */ j(Ha, [["render", Ra], ["__scopeId", "data-v-f7b534c8"]]), Ja = N({
   name: "EliTabelaCabecalho",
   components: { EliTabelaCaixaDeBusca: Wa },
   props: {

dist/types/index.d.ts

@@ -1,4 +1,5 @@
 import type { Plugin } from "vue";
+import "./styles/eli-vue-fonts.css";
 import { EliOlaMundo } from "./componentes/ola_mundo";
 import { EliBotao } from "./componentes/botao";
 import { EliBadge } from "./componentes/indicador";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eli-vue",
-  "version": "0.1.41",
+  "version": "0.1.45",
   "private": false,
   "main": "./dist/eli-vue.umd.js",
   "module": "./dist/eli-vue.es.js",

src/componentes/botao/EliBotao.vue

@@ -1,12 +1,12 @@
 <template>
-    <v-btn
+  <v-btn
     :color="color"
     :variant="variant"
     :size="size"
     :disabled="disabled"
     :loading="loading"
     v-bind="$attrs"
-    class="text-none pt-1"
+    class="eli-botao text-none pt-1"
   >
     <slot />
   </v-btn>

src/componentes/indicador/EliBadge.vue

@@ -9,6 +9,7 @@
     :dot="dot"
     :content="badge"
     :style="badgeStyle"
+    class="eli-badge"
   >
     <slot />
   </v-badge>

src/index.ts

@@ -1,4 +1,5 @@
 import type { App, Plugin } from "vue";
+import "./styles/eli-vue-fonts.css";
 import { EliOlaMundo } from "./componentes/ola_mundo";
 import { EliBotao } from "./componentes/botao";
 import { EliBadge } from "./componentes/indicador";

src/playground/App.vue

@@ -2,6 +2,8 @@
   <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>
@@ -77,11 +79,34 @@ export default defineComponent({
   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);

src/playground/main.ts

@@ -8,6 +8,10 @@ import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
 
+// Estilos globais da lib (font-face + variáveis de fonte)
+// Importamos DEPOIS do Vuetify para garantir que `--v-font-family` seja sobrescrito.
+import "../styles/eli-vue-fonts.css";
+
 const themeDefault = {
   dark: false,
   colors: {
@@ -161,4 +165,17 @@ const vuetify = createVuetify({
   },
 });
 
-createApp(App).use(vuetify).mount("#app");
+const app = createApp(App);
+
+// Debug rápido: confirma fonte efetiva no playground (ver no DevTools console)
+// Observação: isso é só para o playground, não afeta o build da lib.
+if (import.meta.env.DEV) {
+  // eslint-disable-next-line no-console
+  console.log("[eli-vue] --v-font-family:", getComputedStyle(document.documentElement).getPropertyValue("--v-font-family"));
+  // eslint-disable-next-line no-console
+  console.log("[eli-vue] --eli-font-family:", getComputedStyle(document.documentElement).getPropertyValue("--eli-font-family"));
+  // eslint-disable-next-line no-console
+  console.log("[eli-vue] body font-family:", getComputedStyle(document.body).fontFamily);
+}
+
+app.use(vuetify).mount("#app");

src/styles/eli-vue-fonts.css

@@ -0,0 +1,74 @@
+/*
+ * Fonte padrão global da biblioteca: Google Sans
+ *
+ * Observação:
+ * - As fontes são servidas a partir do MinIO (paiol.idz.one)
+ * - Mantemos variável (normal/italic) para cobrir múltiplos pesos/estilos
+ */
+
+@font-face {
+  font-family: "Google Sans";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("https://paiol.idz.one/estaticos/GoogleSans/GoogleSans-VariableFont_GRAD,opsz,wght.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Google Sans";
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("https://paiol.idz.one/estaticos/GoogleSans/GoogleSans-Italic-VariableFont_GRAD,opsz,wght.ttf")
+    format("truetype");
+}
+
+/*
+ * Default global
+ * - Inclui fallbacks para sistemas comuns.
+ * - Forçamos herança em elementos de formulário, pois alguns frameworks
+ *   aplicam font-family própria.
+ */
+:root {
+  --eli-font-family: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    "Noto Sans", "Liberation Sans", sans-serif;
+
+  /*
+   * Vuetify v3 usa `--v-font-family` como fonte base (aplicada em `.v-application`).
+   * Ao mapear para a fonte da lib, garantimos que componentes Vuetify renderizados
+   * na aplicação usem Google Sans quando o CSS da lib for carregado.
+   */
+  --v-font-family: var(--eli-font-family);
+}
+
+html,
+body {
+  font-family: var(--eli-font-family);
+}
+
+/*
+ * Component-scope fallback:
+ *
+ * Em aplicações consumidoras, é comum existir um `body { font-family: ... }`
+ * carregado DEPOIS do CSS da lib, o que sobrescreve a fonte global acima.
+ *
+ * Para garantir que os componentes da biblioteca usem a fonte padrão,
+ * aplicamos o font-family também em qualquer elemento com classe
+ * namespaced `eli-` (ex.: `.eli-tabela`, `.eli-botao`, etc.).
+ */
+:where([class^="eli-"], [class*=" eli-"]) {
+  font-family: var(--eli-font-family);
+  /*
+   * Vuetify v3 usa `--v-font-family` (aplicado em `.v-application`) como fonte
+   * padrão. Ao definir aqui, garantimos que qualquer componente Vuetify
+   * renderizado dentro de um wrapper `eli-*` use Google Sans.
+   */
+  --v-font-family: var(--eli-font-family);
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+}