@devix-tecnologia/timeline-vue 1.1.0 → 1.1.1

package/README.md

@@ -1,11 +1,14 @@
-![TimelineDevix](docs/timeline_topo.png)
+![TimelineDevix](https://github.com/devix-tecnologia/timeline-vue/blob/044648477f0b124c6968d4e84de6781d7633b984/docs/timeline_topo.png)
+
+
 
 # Timeline de Eventos DEVIX
 
 Este é um projeto implementando uma linha do tempo de eventos utilizando Vue 3 e Typescript. Utiliza o Storybook para o desenvolvimento dos componentes seguindo o Design Atômico. 
 
-
-![TimelineDevixExemplo](docs/timeline01.gif)
+<div align="center">
+<img src="https://github.com/devix-tecnologia/timeline-vue/blob/91c3b94c6167ca02364507d58dc59bb804b3b51f/docs/timeline01.gif" width="300px"/>
+</div>
 
 
 ## 🛠 Como usar
@@ -24,7 +27,7 @@ yarn add @devix-tecnologia/timeline-vue
 //exemplo.vue
 
 <template>
-  <Timeline :dadosTimeLine="ListaEventos" />
+  <Timeline :perfilTimeline="perfilTimeline" :eventosTimeline="listaEventos" />  
 </template>
 
 <script lang="ts">
@@ -33,7 +36,13 @@ import { Timeline } from "@devix-tecnologia/timeline-vue";
 
 export default defineComponent({
   setup() {
-    const ListaEventos = [
+
+  const perfilTimeline = {
+      nome: "Maria do Socorro",
+      imagem: "https://this-person-does-not-exist.com/img/avatar-gen11071f8e0802a35d66684ee9376722b2.jpg",
+      icone: "person",
+    };
+    const listaEventos = [
       {
         id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f2",
         data: new Date("2023-04-26T18:10Z"),
@@ -70,7 +79,7 @@ export default defineComponent({
         aoCLicar: () => alert("Olá, mundo!"),
       },
     ];
-    return { ListaEventos };
+    return {perfilTimeline, listaEventos };
   },
 });
 </script>
@@ -124,7 +133,8 @@ A Timeline da DEVIX ordena e lista Eventos de forma crescente de acordo com a da
 Cada Evento mostra a hora prevista, hora em que o evento foi realizado, título, subtítulo, ícone de categoria, ícone de status, indicação de criticidade e campo para informação em destaque.
 
 
-![TimelineDevixExemplo](docs/evento.png)
+![TimelineDevixExemploEvento](https://github.com/devix-tecnologia/timeline-vue/blob/044648477f0b124c6968d4e84de6781d7633b984/docs/evento.png)
+
 
 ## 🚀  Contribuindo
 ---

package/dist/style.css

@@ -1 +1 @@
-.areaCategoria[data-v-01127706]{display:table-cell;align-items:center;width:3rem;padding:2.8rem 1.4rem}.bg-escuro[data-v-01127706],.iconeCategoria[data-v-01127706]{background:var(--cor-secundaria);border-radius:50%;width:3rem;height:3rem;display:flex;flex-direction:row;justify-content:center;align-items:center;color:var(--cor-terciaria);border:3px solid var(--cor-secundaria)}.iconeCategoria span[data-v-01127706]{font-size:2rem}.iconeCategoria.bg-claro[data-v-01127706],.realizado .iconeCategoria[data-v-01127706],.cancelado .iconeCategoria[data-v-01127706],.adiado .iconeCategoria[data-v-01127706]{opacity:.3}.iconeCategoria.borda-alerta[data-v-01127706],.criticidade-media .iconeCategoria[data-v-01127706]{border-color:var(--cor-alerta)}.iconeCategoria.borda-importante[data-v-01127706],.criticidade-alta .iconeCategoria[data-v-01127706]{border-color:var(--cor-importante)}.iconeCategoria.borda-sucesso[data-v-01127706]{border-color:var(--cor-sucesso)}.bg-claro.iconeCategoria.borda-importante[data-v-01127706],.adiado.criticidade-alta .iconeCategoria[data-v-01127706],.cancelado.criticidade-alta .iconeCategoria[data-v-01127706],.realizado.criticidade-alta .iconeCategoria[data-v-01127706]{border-color:var(--cor-importante)}.iconeStatus[data-v-22a8820e]{font-size:1.8rem;line-height:1rem;color:var(--cor-secundaria);width:1.6rem;display:table-cell;padding:3.7rem 1.4rem 2.4rem;vertical-align:top}.realizado.iconeStatus[data-v-22a8820e]{color:var(--cor-sucesso)}.realizado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:""}.cancelado.iconeStatus[data-v-22a8820e]{color:var(--cor-importante)}.cancelado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:""}.adiado.iconeStatus[data-v-22a8820e]{color:var(--cor-apoio)}.adiado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:""}.planejado.iconeStatus[data-v-22a8820e]{opacity:0}.planejado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:""}.atrasado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:"";color:var(--cor-alerta)}.descricaoEvento .subtitulo[data-v-f5319628]{line-height:1.4rem;margin:0;color:var(--cor-texto)}.bg-selecionado .descricaoEvento .subtitulo[data-v-f5319628]{color:var(--cor-texto-selecao)}.descricaoEvento .titulo[data-v-fce23b0e]{line-height:1.4rem;margin:0;color:var(--cor-texto)}.bg-selecionado .descricaoEvento .titulo[data-v-fce23b0e]{color:var(--cor-texto-selecao)}.descricaoEvento[data-v-bb6e1ced]{display:table-cell;vertical-align:top;padding:2.4rem;padding-left:0}.realizado .descricaoEvento[data-v-bb6e1ced],.cancelado .descricaoEvento[data-v-bb6e1ced],.adiado .descricaoEvento[data-v-bb6e1ced]{opacity:.4}.descricaoEvento .titulo[data-v-bb6e1ced]{line-height:1.8rem;margin:0}@media only screen and (max-width: 400px){.descricaoEvento[data-v-bb6e1ced]{max-width:15rem}}.hora[data-v-071a9ea4]{color:var(--cor-texto)}.bg-selecionado .hora[data-v-071a9ea4]{color:var(--cor-texto-selecao)}.hora-padrao[data-v-071a9ea4],.horaRealizada[data-v-071a9ea4]{font-weight:500;font-size:1.4rem}.hora-riscada[data-v-071a9ea4],.horaPlanejada[data-v-071a9ea4]{text-decoration:line-through;font-size:1rem}.realizado .horaEvento[data-v-04f44efd],.cancelado .horaEvento[data-v-04f44efd],.adiado .horaEvento[data-v-04f44efd]{opacity:.4}.areaHora[data-v-04f44efd]{width:4.5rem;display:table-cell;vertical-align:top;text-align:right;padding:2.4rem 0}.horaEvento[data-v-04f44efd]{line-height:1.4rem;text-align:right;display:flex;flex-direction:column}.horaRealizada[data-v-04f44efd]{font-weight:500}.horaPlanejada[data-v-04f44efd]{text-decoration:line-through}.realizado .destaqueEvento[data-v-b0b0beb7],.cancelado .destaqueEvento[data-v-b0b0beb7],.adiado .destaqueEvento[data-v-b0b0beb7]{opacity:.4}.destaqueEvento[data-v-b0b0beb7]{display:table-cell;text-align:right;width:15%;line-height:1em;color:var(--cor-texto);padding:2.4rem 1.4rem;vertical-align:middle}.bg-selecionado .destaqueEvento[data-v-b0b0beb7]{color:var(--cor-texto-selecao)}.eventoTimeline[data-v-1d1f6a39]{position:relative;width:100%;border-radius:1rem}.clicavel[data-v-1d1f6a39]{cursor:pointer}.eventoTimeline[data-v-1d1f6a39]:hover{background:#f9f9f9}.atual[data-v-1d1f6a39],.atual[data-v-1d1f6a39]:hover{background:var(--cor-selecao)}.eventoTimeline[data-v-1d1f6a39]:before{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;top:0;height:2.5rem;left:11.9rem}.eventoTimeline[data-v-1d1f6a39]:after{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;top:6.1rem;bottom:0;left:11.9rem}.eventoTimeline.atrasado[data-v-1d1f6a39]:before{background:var(--cor-alerta)}.eventoTimeline.atrasado[data-v-1d1f6a39]:after{background:var(--cor-alerta)}.boxData[data-v-5e2b8273]{line-height:3.5rem;border-radius:.5rem;background:var(--cor-primaria);color:var(--cor-secundaria);margin:0;width:3.5rem;height:3.5rem;text-align:center}.padrao[data-v-5e2b8273]{background:var(--cor-primaria);color:var(--cor-secundaria)}.escuro[data-v-5e2b8273]{background:var(--cor-secundaria);color:var(--cor-primaria)}.claro[data-v-5e2b8273]{background:var(--cor-terciaria);color:var(--cor-secundaria);box-shadow:0 0 10px #0000001c}.separadorPeriodo[data-v-de9ead2d]{display:table-row;width:100%;position:relative;background:#fff}.areaData[data-v-de9ead2d]{display:table-cell;padding:2.8rem 1.4rem 2.8rem 10.1rem;position:relative}.areaData[data-v-de9ead2d]:before{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;height:2.5rem;top:0;left:11.9rem}.areaData[data-v-de9ead2d]:after{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;height:2.5rem;bottom:0;left:11.9rem}.separadorPeriodo .titulo[data-v-de9ead2d]{text-transform:uppercase;padding-bottom:3.45rem;color:var(--cor-texto)}.separadorPeriodo .titulo.claro[data-v-de9ead2d]{color:var(--cor-apoio)}.avatar[data-v-a913d26b]{background:var(--cor-secundaria);color:var(--cor-apoio);width:6rem;height:6rem;border-radius:50%;display:flex;flex-direction:row;justify-content:center;align-items:center;aspect-ratio:1 / 1}.avatar img[data-v-a913d26b]{aspect-ratio:1 / 1;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%}.avatar span[data-v-a913d26b]{font-size:3rem}.perfilTimeline[data-v-804ffe54]{background:var(--cor-primaria);padding:1.4rem;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1.4rem;z-index:999;width:100%;min-height:8rem;transition:all .3s}.nome[data-v-804ffe54]{color:var(--cor-secundaria)}.fixed[data-v-804ffe54]{position:fixed;top:0;left:0;transition:all .3s}.areaEvento[data-v-c833bd5f]{display:table-row;min-height:8rem;position:relative!important;width:100%}.timeline[data-v-c833bd5f]{display:table;width:100%;position:relative}*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*:focus{outline:none}:root{--fonte: "Work Sans", sans-serif;font-size:62.5%;--cor-primaria: #00e01d;--cor-secundaria: #1b2f39;--cor-terciaria: #ebf1f2;--cor-fundo: #fff;--cor-selecao: #ccf9d2;--cor-texto-selecao: #1b2f39;--cor-texto: #1b2f39;--cor-apoio: #57676f;--cor-linha: #e9eaeb;--cor-importante: #bb0202;--cor-alerta: #f0cc0d;--cor-sucesso: #00a816}:root .tema-escuro{--fonte: "Work Sans", sans-serif;font-size:62.5%;--cor-primaria: #00e01d;--cor-secundaria: #ebf1f2;--cor-terciaria: #1b2f39;--cor-fundo: #1b2f39;--cor-selecao: #ccf9d2;--cor-texto-selecao: #1b2f39;--cor-texto: #f9f9f9;--cor-apoio: #57676f;--cor-linha: #e9eaeb;--cor-importante: #bb0202;--cor-alerta: #f0cc0d;--cor-sucesso: #00a816}body{font-family:var(--fonte);font-size:1.6rem;font-weight:300}h1{font-size:2.4rem;font-weight:600}h2{font-size:1.8rem;font-weight:600}h3{font-size:1.4rem;font-weight:600;margin:0;padding:0;line-height:1em}h4{font-size:1.2rem;font-weight:300}.texto-pequeno{font-size:1rem}.texto-medio{font-size:1.2rem}.texto-grande{font-size:1.4rem}
+.areaCategoria[data-v-01127706]{display:table-cell;align-items:center;width:3rem;padding:2.8rem 1.4rem}.bg-escuro[data-v-01127706],.iconeCategoria[data-v-01127706]{background:var(--cor-secundaria);border-radius:50%;width:3rem;height:3rem;display:flex;flex-direction:row;justify-content:center;align-items:center;color:var(--cor-terciaria);border:3px solid var(--cor-secundaria)}.iconeCategoria span[data-v-01127706]{font-size:2rem}.iconeCategoria.bg-claro[data-v-01127706],.realizado .iconeCategoria[data-v-01127706],.cancelado .iconeCategoria[data-v-01127706],.adiado .iconeCategoria[data-v-01127706]{opacity:.3}.iconeCategoria.borda-alerta[data-v-01127706],.criticidade-media .iconeCategoria[data-v-01127706]{border-color:var(--cor-alerta)}.iconeCategoria.borda-importante[data-v-01127706],.criticidade-alta .iconeCategoria[data-v-01127706]{border-color:var(--cor-importante)}.iconeCategoria.borda-sucesso[data-v-01127706]{border-color:var(--cor-sucesso)}.bg-claro.iconeCategoria.borda-importante[data-v-01127706],.adiado.criticidade-alta .iconeCategoria[data-v-01127706],.cancelado.criticidade-alta .iconeCategoria[data-v-01127706],.realizado.criticidade-alta .iconeCategoria[data-v-01127706]{border-color:var(--cor-importante)}.iconeStatus[data-v-22a8820e]{font-size:1.8rem;line-height:1rem;color:var(--cor-secundaria);width:1.6rem;display:table-cell;padding:3.7rem 1.4rem 2.4rem;vertical-align:top}.realizado.iconeStatus[data-v-22a8820e]{color:var(--cor-sucesso)}.realizado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:""}.cancelado.iconeStatus[data-v-22a8820e]{color:var(--cor-importante)}.cancelado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:""}.adiado.iconeStatus[data-v-22a8820e]{color:var(--cor-apoio)}.adiado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:""}.planejado.iconeStatus[data-v-22a8820e]{opacity:0}.planejado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:""}.atrasado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:"";color:var(--cor-alerta)}.descricaoEvento .subtitulo[data-v-f5319628]{line-height:1.4rem;margin:0;color:var(--cor-texto)}.bg-selecionado .descricaoEvento .subtitulo[data-v-f5319628]{color:var(--cor-texto-selecao)}.descricaoEvento .titulo[data-v-fce23b0e]{line-height:1.4rem;margin:0;color:var(--cor-texto)}.bg-selecionado .descricaoEvento .titulo[data-v-fce23b0e]{color:var(--cor-texto-selecao)}.descricaoEvento[data-v-bb6e1ced]{display:table-cell;vertical-align:top;padding:2.4rem;padding-left:0}.realizado .descricaoEvento[data-v-bb6e1ced],.cancelado .descricaoEvento[data-v-bb6e1ced],.adiado .descricaoEvento[data-v-bb6e1ced]{opacity:.4}.descricaoEvento .titulo[data-v-bb6e1ced]{line-height:1.8rem;margin:0}@media only screen and (max-width: 400px){.descricaoEvento[data-v-bb6e1ced]{max-width:15rem}}.hora[data-v-071a9ea4]{color:var(--cor-texto)}.bg-selecionado .hora[data-v-071a9ea4]{color:var(--cor-texto-selecao)}.hora-padrao[data-v-071a9ea4],.horaRealizada[data-v-071a9ea4]{font-weight:500;font-size:1.4rem}.hora-riscada[data-v-071a9ea4],.horaPlanejada[data-v-071a9ea4]{text-decoration:line-through;font-size:1rem}.realizado .horaEvento[data-v-04f44efd],.cancelado .horaEvento[data-v-04f44efd],.adiado .horaEvento[data-v-04f44efd]{opacity:.4}.areaHora[data-v-04f44efd]{width:4.5rem;display:table-cell;vertical-align:top;text-align:right;padding:2.4rem 0}.horaEvento[data-v-04f44efd]{line-height:1.4rem;text-align:right;display:flex;flex-direction:column}.horaRealizada[data-v-04f44efd]{font-weight:500}.horaPlanejada[data-v-04f44efd]{text-decoration:line-through}.realizado .destaqueEvento[data-v-b0b0beb7],.cancelado .destaqueEvento[data-v-b0b0beb7],.adiado .destaqueEvento[data-v-b0b0beb7]{opacity:.4}.destaqueEvento[data-v-b0b0beb7]{display:table-cell;text-align:right;width:15%;line-height:1em;color:var(--cor-texto);padding:2.4rem 1.4rem;vertical-align:middle}.bg-selecionado .destaqueEvento[data-v-b0b0beb7]{color:var(--cor-texto-selecao)}.eventoTimeline[data-v-1d1f6a39]{position:relative;width:100%;border-radius:1rem}.clicavel[data-v-1d1f6a39]{cursor:pointer}.eventoTimeline[data-v-1d1f6a39]:hover{background:#f9f9f9}.atual[data-v-1d1f6a39],.atual[data-v-1d1f6a39]:hover{background:var(--cor-selecao)}.eventoTimeline[data-v-1d1f6a39]:before{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;top:0;height:2.5rem;left:11.9rem}.eventoTimeline[data-v-1d1f6a39]:after{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;top:6.1rem;bottom:0;left:11.9rem}.eventoTimeline.atrasado[data-v-1d1f6a39]:before{background:var(--cor-alerta)}.eventoTimeline.atrasado[data-v-1d1f6a39]:after{background:var(--cor-alerta)}.boxData[data-v-5e2b8273]{line-height:3.5rem;border-radius:.5rem;background:var(--cor-primaria);color:var(--cor-secundaria);margin:0;width:3.5rem;height:3.5rem;text-align:center}.padrao[data-v-5e2b8273]{background:var(--cor-primaria);color:var(--cor-secundaria)}.escuro[data-v-5e2b8273]{background:var(--cor-secundaria);color:var(--cor-primaria)}.claro[data-v-5e2b8273]{background:var(--cor-terciaria);color:var(--cor-secundaria);box-shadow:0 0 10px #0000001c}.separadorPeriodo[data-v-de9ead2d]{display:table-row;width:100%;position:relative;background:#fff}.areaData[data-v-de9ead2d]{display:table-cell;padding:2.8rem 1.4rem 2.8rem 10.1rem;position:relative}.areaData[data-v-de9ead2d]:before{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;height:2.5rem;top:0;left:11.9rem}.areaData[data-v-de9ead2d]:after{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;height:2.5rem;bottom:0;left:11.9rem}.separadorPeriodo .titulo[data-v-de9ead2d]{text-transform:uppercase;padding-bottom:3.45rem;color:var(--cor-texto)}.separadorPeriodo .titulo.claro[data-v-de9ead2d]{color:var(--cor-apoio)}.avatar[data-v-a913d26b]{background:var(--cor-secundaria);color:var(--cor-apoio);width:6rem;height:6rem;border-radius:50%;display:flex;flex-direction:row;justify-content:center;align-items:center;aspect-ratio:1 / 1}.avatar img[data-v-a913d26b]{aspect-ratio:1 / 1;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%}.avatar span[data-v-a913d26b]{font-size:3rem}.perfilTimeline[data-v-9f148523]{background:var(--cor-primaria);padding:1.4rem;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1.4rem;z-index:999;width:100%;min-height:8rem;transition:all .3s}.nome[data-v-9f148523]{color:var(--cor-secundaria)}.fixed[data-v-9f148523]{position:fixed;top:0;left:0;transition:all .3s}.areaEvento[data-v-4245f5f5]{display:table-row;min-height:8rem;position:relative!important;width:100%}.timeline[data-v-4245f5f5]{display:table;width:100%;position:relative}.marginTop[data-v-4245f5f5]{margin-top:8rem}*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*:focus{outline:none}:root{--fonte: "Work Sans", sans-serif;font-size:62.5%;--cor-primaria: #00e01d;--cor-secundaria: #1b2f39;--cor-terciaria: #ebf1f2;--cor-fundo: #fff;--cor-selecao: #ccf9d2;--cor-texto-selecao: #1b2f39;--cor-texto: #1b2f39;--cor-apoio: #57676f;--cor-linha: #e9eaeb;--cor-importante: #bb0202;--cor-alerta: #f0cc0d;--cor-sucesso: #00a816}:root .tema-escuro{--fonte: "Work Sans", sans-serif;font-size:62.5%;--cor-primaria: #00e01d;--cor-secundaria: #ebf1f2;--cor-terciaria: #1b2f39;--cor-fundo: #1b2f39;--cor-selecao: #ccf9d2;--cor-texto-selecao: #1b2f39;--cor-texto: #f9f9f9;--cor-apoio: #57676f;--cor-linha: #e9eaeb;--cor-importante: #bb0202;--cor-alerta: #f0cc0d;--cor-sucesso: #00a816}body{font-family:var(--fonte);font-size:1.6rem;font-weight:300}h1{font-size:2.4rem;font-weight:600}h2{font-size:1.8rem;font-weight:600}h3{font-size:1.4rem;font-weight:600;margin:0;padding:0;line-height:1em}h4{font-size:1.2rem;font-weight:300}.texto-pequeno{font-size:1rem}.texto-medio{font-size:1.2rem}.texto-grande{font-size:1.4rem}

package/dist/timeline-vue.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as d, reactive as C, computed as y, openBlock as n, createElementBlock as c, createElementVNode as T, normalizeClass as q, normalizeStyle as A, toDisplayString as v, resolveComponent as p, createVNode as g, ref as I, createBlock as b, createCommentVNode as P, onMounted as M, onUnmounted as O, Fragment as w, renderList as B } from "vue";
-const F = d({
+import { defineComponent as d, reactive as C, computed as y, openBlock as a, createElementBlock as i, createElementVNode as T, normalizeClass as q, normalizeStyle as z, toDisplayString as v, resolveComponent as p, createVNode as g, ref as j, createBlock as b, createCommentVNode as E, Fragment as B, renderList as H } from "vue";
+const M = d({
   name: "categoria",
   props: {
     iconeCategoria: {
@@ -38,23 +38,23 @@ const F = d({
   }
 });
 const _ = (e, t) => {
-  const a = e.__vccOpts || e;
-  for (const [r, i] of t)
-    a[r] = i;
-  return a;
-}, H = { class: "areaCategoria" }, L = ["alt"], N = { class: "material-symbols-outlined" };
-function R(e, t, a, r, i, u) {
-  return n(), c("div", H, [
+  const r = e.__vccOpts || e;
+  for (const [s, l] of t)
+    r[s] = l;
+  return r;
+}, O = { class: "areaCategoria" }, N = ["alt"], L = { class: "material-symbols-outlined" };
+function R(e, t, r, s, l, u) {
+  return a(), i("div", O, [
     T("div", {
       class: q(["iconeCategoria", e.classes]),
-      style: A(e.style),
+      style: z(e.style),
       alt: e.categoria
     }, [
-      T("span", N, v(e.iconeCategoria), 1)
-    ], 14, L)
+      T("span", L, v(e.iconeCategoria), 1)
+    ], 14, N)
   ]);
 }
-const V = /* @__PURE__ */ _(F, [["render", R], ["__scopeId", "data-v-01127706"]]), Y = d({
+const F = /* @__PURE__ */ _(M, [["render", R], ["__scopeId", "data-v-01127706"]]), w = d({
   name: "status",
   props: {
     status: {
@@ -71,12 +71,12 @@ const V = /* @__PURE__ */ _(F, [["render", R], ["__scopeId", "data-v-01127706"]]
     };
   }
 });
-function J(e, t, a, r, i, u) {
-  return n(), c("div", {
+function V(e, t, r, s, l, u) {
+  return a(), i("div", {
     class: q([e.classes, "iconeStatus"])
   }, null, 2);
 }
-const U = /* @__PURE__ */ _(Y, [["render", J], ["__scopeId", "data-v-22a8820e"]]), G = d({
+const J = /* @__PURE__ */ _(w, [["render", V], ["__scopeId", "data-v-22a8820e"]]), Y = d({
   props: {
     subtitulo: {
       required: !0,
@@ -88,11 +88,11 @@ const U = /* @__PURE__ */ _(Y, [["render", J], ["__scopeId", "data-v-22a8820e"]]
     return {};
   }
 });
-const K = { class: "subtitulo" };
-function Q(e, t, a, r, i, u) {
-  return n(), c("h4", K, v(e.subtitulo), 1);
+const G = { class: "subtitulo" };
+function K(e, t, r, s, l, u) {
+  return a(), i("h4", G, v(e.subtitulo), 1);
 }
-const W = /* @__PURE__ */ _(G, [["render", Q], ["__scopeId", "data-v-f5319628"]]), X = d({
+const Q = /* @__PURE__ */ _(Y, [["render", K], ["__scopeId", "data-v-f5319628"]]), U = d({
   props: {
     titulo: {
       required: !0,
@@ -104,11 +104,11 @@ const W = /* @__PURE__ */ _(G, [["render", Q], ["__scopeId", "data-v-f5319628"]]
     return {};
   }
 });
-const Z = { class: "titulo" };
-function x(e, t, a, r, i, u) {
-  return n(), c("h3", Z, v(e.titulo), 1);
+const W = { class: "titulo" };
+function X(e, t, r, s, l, u) {
+  return a(), i("h3", W, v(e.titulo), 1);
 }
-const ee = /* @__PURE__ */ _(X, [["render", x], ["__scopeId", "data-v-fce23b0e"]]), te = d({
+const Z = /* @__PURE__ */ _(U, [["render", X], ["__scopeId", "data-v-fce23b0e"]]), x = d({
   props: {
     titulo: {
       required: !0,
@@ -119,29 +119,29 @@ const ee = /* @__PURE__ */ _(X, [["render", x], ["__scopeId", "data-v-fce23b0e"]
       type: String
     }
   },
-  components: { TituloEvento: ee, SubtituloEvento: W },
+  components: { TituloEvento: Z, SubtituloEvento: Q },
   setup() {
     return {};
   }
 });
-const oe = {
+const ee = {
   key: 0,
   class: "descricaoEvento"
-}, ae = {
+}, te = {
   key: 1,
   class: "descricaoEvento",
   style: { "padding-top": "3.3rem" }
 };
-function ne(e, t, a, r, i, u) {
-  const l = p("TituloEvento"), S = p("SubtituloEvento");
-  return e.subtitulo ? (n(), c("div", oe, [
-    g(l, { titulo: e.titulo }, null, 8, ["titulo"]),
+function oe(e, t, r, s, l, u) {
+  const c = p("TituloEvento"), S = p("SubtituloEvento");
+  return e.subtitulo ? (a(), i("div", ee, [
+    g(c, { titulo: e.titulo }, null, 8, ["titulo"]),
     g(S, { subtitulo: e.subtitulo }, null, 8, ["subtitulo"])
-  ])) : (n(), c("div", ae, [
-    g(l, { titulo: e.titulo }, null, 8, ["titulo"])
+  ])) : (a(), i("div", te, [
+    g(c, { titulo: e.titulo }, null, 8, ["titulo"])
   ]));
 }
-const re = /* @__PURE__ */ _(te, [["render", ne], ["__scopeId", "data-v-bb6e1ced"]]), se = d({
+const ae = /* @__PURE__ */ _(x, [["render", oe], ["__scopeId", "data-v-bb6e1ced"]]), re = d({
   name: "hora",
   props: {
     hora: {
@@ -154,7 +154,7 @@ const re = /* @__PURE__ */ _(te, [["render", ne], ["__scopeId", "data-v-bb6e1ced
   },
   components: {},
   setup(e) {
-    const t = I(e.aparencia);
+    const t = j(e.aparencia);
     return {
       classes: y(() => ({
         [`hora-${t || ""}`]: !0
@@ -162,12 +162,12 @@ const re = /* @__PURE__ */ _(te, [["render", ne], ["__scopeId", "data-v-bb6e1ced
     };
   }
 });
-function ie(e, t, a, r, i, u) {
-  return n(), c("div", {
+function ne(e, t, r, s, l, u) {
+  return a(), i("div", {
     class: q(["hora", e.classes])
   }, v(e.hora.getHours()) + ":" + v(e.hora.getMinutes().toString().padStart(2, "0")), 3);
 }
-const le = /* @__PURE__ */ _(se, [["render", ie], ["__scopeId", "data-v-071a9ea4"]]), ce = d({
+const se = /* @__PURE__ */ _(re, [["render", ne], ["__scopeId", "data-v-071a9ea4"]]), ie = d({
   props: {
     horaPrevista: {
       type: Date,
@@ -181,27 +181,27 @@ const le = /* @__PURE__ */ _(se, [["render", ie], ["__scopeId", "data-v-071a9ea4
     //   type: String,
     // },
   },
-  components: { Hora: le },
+  components: { Hora: se },
   setup() {
     return {};
   }
 });
-const ue = { class: "areaHora" }, de = { class: "horaEvento" };
-function _e(e, t, a, r, i, u) {
-  const l = p("Hora");
-  return n(), c("div", ue, [
-    T("div", de, [
-      e.horaRealizada ? (n(), b(l, {
+const le = { class: "areaHora" }, ce = { class: "horaEvento" };
+function ue(e, t, r, s, l, u) {
+  const c = p("Hora");
+  return a(), i("div", le, [
+    T("div", ce, [
+      e.horaRealizada ? (a(), b(c, {
         key: 0,
         class: "horaRealizada texto-grande",
         hora: e.horaRealizada,
         style: { "padding-top": "0.3rem" }
-      }, null, 8, ["hora"])) : P("", !0),
-      e.horaRealizada ? (n(), b(l, {
+      }, null, 8, ["hora"])) : E("", !0),
+      e.horaRealizada ? (a(), b(c, {
         key: 1,
         class: "horaPlanejada texto-pequeno",
         hora: e.horaPrevista
-      }, null, 8, ["hora"])) : (n(), b(l, {
+      }, null, 8, ["hora"])) : (a(), b(c, {
         key: 2,
         class: "horaRealizada texto-grande",
         hora: e.horaPrevista,
@@ -210,7 +210,7 @@ function _e(e, t, a, r, i, u) {
     ])
   ]);
 }
-const pe = /* @__PURE__ */ _(ce, [["render", _e], ["__scopeId", "data-v-04f44efd"]]), me = d({
+const de = /* @__PURE__ */ _(ie, [["render", ue], ["__scopeId", "data-v-04f44efd"]]), _e = d({
   name: "destaque",
   props: {
     destaque: {
@@ -222,11 +222,11 @@ const pe = /* @__PURE__ */ _(ce, [["render", _e], ["__scopeId", "data-v-04f44efd
     return {};
   }
 });
-const ve = { class: "destaqueEvento texto-pequeno" };
-function fe(e, t, a, r, i, u) {
-  return n(), c("div", ve, v(e.destaque), 1);
+const pe = { class: "destaqueEvento texto-pequeno" };
+function me(e, t, r, s, l, u) {
+  return a(), i("div", pe, v(e.destaque), 1);
 }
-const ge = /* @__PURE__ */ _(me, [["render", fe], ["__scopeId", "data-v-b0b0beb7"]]), ye = d({
+const ve = /* @__PURE__ */ _(_e, [["render", me], ["__scopeId", "data-v-b0b0beb7"]]), fe = d({
   props: {
     status: {
       required: !0,
@@ -270,11 +270,11 @@ const ge = /* @__PURE__ */ _(me, [["render", fe], ["__scopeId", "data-v-b0b0beb7
     }
   },
   components: {
-    IconeStatus: U,
-    IconeCategoria: V,
-    HoraEvento: pe,
-    DescricaoEvento: re,
-    Destaque: ge
+    IconeStatus: J,
+    IconeCategoria: F,
+    HoraEvento: de,
+    DescricaoEvento: ae,
+    Destaque: ve
   },
   setup(e) {
     return {
@@ -288,19 +288,19 @@ const ge = /* @__PURE__ */ _(me, [["render", fe], ["__scopeId", "data-v-b0b0beb7
     };
   }
 });
-const $e = ["onclick"];
-function he(e, t, a, r, i, u) {
-  const l = p("IconeStatus"), S = p("HoraEvento"), E = p("IconeCategoria"), o = p("DescricaoEvento"), s = p("Destaque");
-  return n(), c("article", {
+const ge = ["onclick"];
+function ye(e, t, r, s, l, u) {
+  const c = p("IconeStatus"), S = p("HoraEvento"), P = p("IconeCategoria"), o = p("DescricaoEvento"), n = p("Destaque");
+  return a(), i("article", {
     class: q(["eventoTimeline", [e.status, "criticidade-" + e.criticidade, e.eventoSelecionado, e.clicavel]]),
     onclick: e.aoCLicar
   }, [
-    g(l, { status: e.status }, null, 8, ["status"]),
+    g(c, { status: e.status }, null, 8, ["status"]),
     g(S, {
       horaPrevista: e.previsto,
       horaRealizada: e.realizado
     }, null, 8, ["horaPrevista", "horaRealizada"]),
-    g(E, {
+    g(P, {
       iconeCategoria: e.categoria.icone,
       categoria: e.categoria.nome
     }, null, 8, ["iconeCategoria", "categoria"]),
@@ -308,10 +308,10 @@ function he(e, t, a, r, i, u) {
       titulo: e.titulo,
       subtitulo: e.subtitulo
     }, null, 8, ["titulo", "subtitulo"]),
-    g(s, { destaque: e.destaque }, null, 8, ["destaque"])
-  ], 10, $e);
+    g(n, { destaque: e.destaque }, null, 8, ["destaque"])
+  ], 10, ge);
 }
-const be = /* @__PURE__ */ _(ye, [["render", he], ["__scopeId", "data-v-1d1f6a39"]]), Se = d({
+const $e = /* @__PURE__ */ _(fe, [["render", ye], ["__scopeId", "data-v-1d1f6a39"]]), he = d({
   name: "BoxData",
   props: {
     dataNumero: {
@@ -331,12 +331,12 @@ const be = /* @__PURE__ */ _(ye, [["render", he], ["__scopeId", "data-v-1d1f6a39
     };
   }
 });
-function Te(e, t, a, r, i, u) {
-  return n(), c("h3", {
+function be(e, t, r, s, l, u) {
+  return a(), i("h3", {
     class: q(["boxData padrao", e.classes])
   }, v(e.dataNumero), 3);
 }
-const qe = /* @__PURE__ */ _(Se, [["render", Te], ["__scopeId", "data-v-5e2b8273"]]), Ee = d({
+const Se = /* @__PURE__ */ _(he, [["render", be], ["__scopeId", "data-v-5e2b8273"]]), Te = d({
   name: "SeparadorPeriodo",
   props: {
     dataSeparador: {
@@ -347,18 +347,18 @@ const qe = /* @__PURE__ */ _(Se, [["render", Te], ["__scopeId", "data-v-5e2b8273
       type: String
     }
   },
-  components: { BoxData: qe },
+  components: { BoxData: Se },
   setup(e) {
     const t = new Array(12);
-    return t[0] = "Janeiro", t[1] = "Fevereiro", t[2] = "Março", t[3] = "Abril", t[4] = "Maio", t[5] = "Junho", t[6] = "Julho", t[7] = "Agosto", t[8] = "Setembro", t[9] = "Outubro", t[10] = "Novembro", t[11] = "Dezembro", { mesCorrente: (r) => t[r] };
+    return t[0] = "Janeiro", t[1] = "Fevereiro", t[2] = "Março", t[3] = "Abril", t[4] = "Maio", t[5] = "Junho", t[6] = "Julho", t[7] = "Agosto", t[8] = "Setembro", t[9] = "Outubro", t[10] = "Novembro", t[11] = "Dezembro", { mesCorrente: (s) => t[s] };
   }
 });
-const Pe = { class: "separadorPeriodo" }, Ce = { class: "areaData" };
-function ke(e, t, a, r, i, u) {
-  const l = p("BoxData");
-  return n(), c("div", Pe, [
-    T("div", Ce, [
-      g(l, {
+const qe = { class: "separadorPeriodo" }, Pe = { class: "areaData" };
+function Ee(e, t, r, s, l, u) {
+  const c = p("BoxData");
+  return a(), i("div", qe, [
+    T("div", Pe, [
+      g(c, {
         dataNumero: e.dataSeparador.getDate(),
         aparencia: e.aparencia
       }, null, 8, ["dataNumero", "aparencia"])
@@ -368,7 +368,7 @@ function ke(e, t, a, r, i, u) {
     }, v(e.mesCorrente(e.dataSeparador.getMonth())) + " de " + v(e.dataSeparador.getFullYear()), 3)
   ]);
 }
-const De = /* @__PURE__ */ _(Ee, [["render", ke], ["__scopeId", "data-v-de9ead2d"]]), Ie = d({
+const Ce = /* @__PURE__ */ _(Te, [["render", Ee], ["__scopeId", "data-v-de9ead2d"]]), ke = d({
   props: {
     imagem: {
       type: String
@@ -381,20 +381,20 @@ const De = /* @__PURE__ */ _(Ee, [["render", ke], ["__scopeId", "data-v-de9ead2d
     return {};
   }
 });
-const ze = { class: "avatar" }, Ae = ["src"], je = {
+const De = { class: "avatar" }, Ie = ["src"], ze = {
   key: 1,
   class: "material-symbols-outlined"
 };
-function Me(e, t, a, r, i, u) {
-  return n(), c("div", ze, [
-    e.imagem ? (n(), c("img", {
+function Ae(e, t, r, s, l, u) {
+  return a(), i("div", De, [
+    e.imagem ? (a(), i("img", {
       key: 0,
       src: e.imagem
-    }, null, 8, Ae)) : e.icone ? (n(), c("span", je, v(e.icone), 1)) : P("", !0)
+    }, null, 8, Ie)) : e.icone ? (a(), i("span", ze, v(e.icone), 1)) : E("", !0)
   ]);
 }
-const Oe = /* @__PURE__ */ _(Ie, [["render", Me], ["__scopeId", "data-v-a913d26b"]]), we = d({
-  components: { AvatarTimeline: Oe },
+const je = /* @__PURE__ */ _(ke, [["render", Ae], ["__scopeId", "data-v-a913d26b"]]), Be = d({
+  components: { AvatarTimeline: je },
   props: {
     imagemPerfil: {
       type: String
@@ -411,44 +411,32 @@ const Oe = /* @__PURE__ */ _(Ie, [["render", Me], ["__scopeId", "data-v-a913d26b
     }
   },
   setup(e) {
-    e = C(e);
-    const t = y(() => ({
-      backgroundColor: e.backgroundColor
-    })), a = I(null), r = I(!1), i = () => {
-      if (a.value) {
-        const u = window.pageYOffset || document.documentElement.scrollTop, l = a.value.offsetTop;
-        r.value = u > l;
-      }
-    };
-    return M(() => {
-      window.addEventListener("scroll", i);
-    }), O(() => {
-      window.removeEventListener("scroll", i);
-    }), {
-      style: t,
-      isFixed: r
+    return e = C(e), {
+      style: y(() => ({
+        backgroundColor: e.backgroundColor
+      }))
     };
   }
 });
-const Be = { class: "nome" };
-function Fe(e, t, a, r, i, u) {
-  const l = p("AvatarTimeline");
-  return n(), c("section", {
-    class: q(["perfilTimeline", { fixed: e.isFixed }]),
+const He = { class: "nome" };
+function Me(e, t, r, s, l, u) {
+  const c = p("AvatarTimeline");
+  return a(), i("section", {
+    class: "perfilTimeline fixed",
     ref: "elementoFixo",
-    style: A(e.style)
+    style: z(e.style)
   }, [
-    e.imagemPerfil ? (n(), b(l, {
+    e.imagemPerfil ? (a(), b(c, {
       key: 0,
       imagem: e.imagemPerfil
-    }, null, 8, ["imagem"])) : e.iconePerfil ? (n(), b(l, {
+    }, null, 8, ["imagem"])) : e.iconePerfil ? (a(), b(c, {
       key: 1,
       icone: e.iconePerfil
-    }, null, 8, ["icone"])) : P("", !0),
-    T("h2", Be, v(e.nomePerfil), 1)
-  ], 6);
+    }, null, 8, ["icone"])) : E("", !0),
+    T("h2", He, v(e.nomePerfil), 1)
+  ], 4);
 }
-const He = /* @__PURE__ */ _(we, [["render", Fe], ["__scopeId", "data-v-804ffe54"]]), Le = d({
+const Oe = /* @__PURE__ */ _(Be, [["render", Me], ["__scopeId", "data-v-9f148523"]]), Ne = d({
   props: {
     perfilTimeline: {
       required: !0,
@@ -460,36 +448,36 @@ const He = /* @__PURE__ */ _(we, [["render", Fe], ["__scopeId", "data-v-804ffe54
     }
   },
   components: {
-    PerfilTimeline: He,
-    SeparadorPeriodo: De,
-    EventoTimeline: be
+    PerfilTimeline: Oe,
+    SeparadorPeriodo: Ce,
+    EventoTimeline: $e
   },
   setup(e) {
     const t = C(
       e.eventosTimeline
     );
-    let a = C(t);
-    function r() {
-      a = t;
-      const o = l(a);
-      a.map((s) => (o[0].id === s.id ? (s.atual = !0, s.scroll = !0, E()) : (s.atual = !1, s.scroll = !1), {
-        evento: s
+    let r = C(t);
+    function s() {
+      r = t;
+      const o = c(r);
+      r.map((n) => (o[0].id === n.id ? (n.atual = !0, n.scroll = !0, P()) : (n.atual = !1, n.scroll = !1), {
+        evento: n
       }));
     }
-    const i = () => {
-      setInterval(r, 6e4);
-    }, u = (o, s) => {
-      const m = o.getDay() === s.getDay(), $ = o.getMonth() === s.getMonth(), f = o.getFullYear() === s.getFullYear();
+    const l = () => {
+      setInterval(s, 6e4);
+    }, u = (o, n) => {
+      const m = o.getDay() === n.getDay(), $ = o.getMonth() === n.getMonth(), f = o.getFullYear() === n.getFullYear();
       return m && $ && f;
-    }, l = (o) => {
+    }, c = (o) => {
       if (o) {
-        const s = Date.now();
+        const n = Date.now();
         let m = null, $ = [];
         for (const f of o) {
           const h = f.data.getTime();
           if (f.status === "planejado" || f.status === "atrasado") {
-            const k = Math.abs(s - f.data.getTime());
-            if (m === null || k < m && h <= s)
+            const k = Math.abs(n - f.data.getTime());
+            if (m === null || k < m && h <= n)
               m = k, $.length = 0;
             else if (k > m)
               continue;
@@ -500,64 +488,66 @@ const He = /* @__PURE__ */ _(we, [["render", Fe], ["__scopeId", "data-v-804ffe54
       } else
         return [];
     }, S = y(() => {
-      i();
-      const o = a.sort(
-        (s, m) => s.data.getTime() - m.data.getTime()
+      l();
+      const o = r.sort(
+        (n, m) => n.data.getTime() - m.data.getTime()
       );
       if (o) {
-        let s = [], m = null, $ = 0, f;
+        let n = [], m = null, $ = 0, f;
         for (const h of o) {
           const k = /* @__PURE__ */ new Date(), D = h.data;
           f = h.status;
-          const j = h.tolerancia * 60 * 1e3;
-          f === "planejado" && D.getTime() + j < k.getTime() && (h.status = "atrasado"), (!m || !u(m, D)) && (m = D, s.push({
+          const A = h.tolerancia * 60 * 1e3;
+          f === "planejado" && D.getTime() + A < k.getTime() && (h.status = "atrasado"), (!m || !u(m, D)) && (m = D, n.push({
             tipo: "dia",
             valor: h.data,
             key: ++$
-          })), s.push({
+          })), n.push({
             tipo: "evento",
             valor: h,
             key: ++$
           });
         }
-        return s;
+        return n;
       } else
         return [];
-    }), E = () => {
+    }), P = () => {
       const o = document.querySelector(".atual");
       o == null || o.scrollIntoView({
         behavior: "smooth",
         block: "center"
       });
     };
-    return r(), {
+    return s(), {
       eventosPorTipo: S,
-      scrollParaItemAtual: E
+      scrollParaItemAtual: P
     };
   },
   mounted() {
     this.scrollParaItemAtual();
   }
 });
-const Ne = { class: "areaTimeline" }, Re = { class: "timeline" };
-function Ve(e, t, a, r, i, u) {
-  const l = p("PerfilTimeline"), S = p("SeparadorPeriodo"), E = p("EventoTimeline");
-  return n(), c("div", Ne, [
-    e.perfilTimeline !== null ? (n(), b(l, {
+const Le = { class: "areaTimeline" };
+function Re(e, t, r, s, l, u) {
+  const c = p("PerfilTimeline"), S = p("SeparadorPeriodo"), P = p("EventoTimeline");
+  return a(), i("div", Le, [
+    e.perfilTimeline !== null ? (a(), b(c, {
       key: 0,
       nomePerfil: e.perfilTimeline.nome,
       imagemPerfil: e.perfilTimeline.imagem,
       iconePerfil: e.perfilTimeline.icone
-    }, null, 8, ["nomePerfil", "imagemPerfil", "iconePerfil"])) : P("", !0),
-    T("section", Re, [
-      (n(!0), c(w, null, B(e.eventosPorTipo, (o) => (n(), c("div", {
+    }, null, 8, ["nomePerfil", "imagemPerfil", "iconePerfil"])) : E("", !0),
+    T("section", {
+      class: q(["timeline", { marginTop: e.perfilTimeline !== null }])
+    }, [
+      (a(!0), i(B, null, H(e.eventosPorTipo, (o) => (a(), i("div", {
         key: o.key
       }, [
-        o.tipo === "dia" ? (n(), b(S, {
+        o.tipo === "dia" ? (a(), b(S, {
           key: 0,
           dataSeparador: o.valor
-        }, null, 8, ["dataSeparador"])) : P("", !0),
-        o.tipo === "evento" ? (n(), b(E, {
+        }, null, 8, ["dataSeparador"])) : E("", !0),
+        o.tipo === "evento" ? (a(), b(P, {
           key: 1,
           status: o.valor.status,
           criticidade: o.valor.criticidade,
@@ -569,26 +559,26 @@ function Ve(e, t, a, r, i, u) {
           destaque: o.valor.destaque,
           ehAtual: o.valor.atual,
           aoCLicar: o.valor.aoCLicar
-        }, null, 8, ["status", "criticidade", "previsto", "realizado", "categoria", "titulo", "subtitulo", "destaque", "ehAtual", "aoCLicar"])) : P("", !0)
+        }, null, 8, ["status", "criticidade", "previsto", "realizado", "categoria", "titulo", "subtitulo", "destaque", "ehAtual", "aoCLicar"])) : E("", !0)
       ]))), 128))
-    ])
+    ], 2)
   ]);
 }
-const Ye = /* @__PURE__ */ _(Le, [["render", Ve], ["__scopeId", "data-v-c833bd5f"]]), Je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Fe = /* @__PURE__ */ _(Ne, [["render", Re], ["__scopeId", "data-v-4245f5f5"]]), we = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
-}, Symbol.toStringTag, { value: "Module" })), z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Symbol.toStringTag, { value: "Module" })), I = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Timeline: Ye,
-  Tipos: Je
+  Timeline: Fe,
+  Tipos: we
 }, Symbol.toStringTag, { value: "Module" }));
-const Ge = {
+const Je = {
   install(e, ...t) {
-    for (const a in z)
-      e.component(a, z[a]);
+    for (const r in I)
+      e.component(r, I[r]);
   }
 };
 export {
-  Ye as Timeline,
-  Je as Tipos,
-  Ge as default
+  Fe as Timeline,
+  we as Tipos,
+  Je as default
 };

package/dist/types/components/timeline/moleculas/PerfilTimeline.vue.d.ts

@@ -16,7 +16,6 @@ declare const _default: import("vue").DefineComponent<{
     style: import("vue").ComputedRef<{
         backgroundColor: string;
     }>;
-    isFixed: import("vue").Ref<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     imagemPerfil: {
         type: StringConstructor;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@devix-tecnologia/timeline-vue",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.1.1",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",

package/src/components/timeline/moleculas/PerfilTimeline.vue

@@ -1,11 +1,5 @@
 <template>
-  <section
-    class="perfilTimeline"
-    ref="elementoFixo"
-    :style="style"
-    :class="{ fixed: isFixed }"
-  >
-    <!-- :class="{ fixed: isFixed }" -->
+  <section class="perfilTimeline fixed" ref="elementoFixo" :style="style">
     <AvatarTimeline v-if="imagemPerfil" :imagem="imagemPerfil" />
     <AvatarTimeline v-else-if="iconePerfil" :icone="iconePerfil" />
     <h2 class="nome">{{ nomePerfil }}</h2>
@@ -46,29 +40,9 @@ export default defineComponent({
     const style = computed(() => ({
       backgroundColor: props.backgroundColor,
     }));
-    // fixando o box no topo da página
-    const elementoFixo = ref<HTMLElement | null>(null);
-    const isFixed = ref(false);
-
-    const handleScroll = () => {
-      if (elementoFixo.value) {
-        const scrollTop =
-          window.pageYOffset || document.documentElement.scrollTop;
-        const offset = elementoFixo.value.offsetTop;
-        isFixed.value = scrollTop > offset;
-      }
-    };
-
-    onMounted(() => {
-      window.addEventListener("scroll", handleScroll);
-    });
-    onUnmounted(() => {
-      window.removeEventListener("scroll", handleScroll);
-    });
 
     return {
       style,
-      isFixed,
     };
   },
 });

package/src/components/timeline/organismos/Timeline.vue

@@ -6,7 +6,8 @@
       :imagemPerfil="perfilTimeline.imagem"
       :iconePerfil="perfilTimeline.icone"
     />
-    <section class="timeline">
+
+    <section class="timeline" :class="{ marginTop: perfilTimeline !== null }">
       <!-- SEPARADOR -->
       <div v-for="evento in eventosPorTipo" :key="evento.key">
         <SeparadorPeriodo
@@ -209,4 +210,8 @@ export default defineComponent({
   width: 100%;
   position: relative;
 }
+
+.marginTop {
+  margin-top: 8rem;
+}
 </style>