@devix-tecnologia/timeline-vue 1.0.1

package/README.md

@@ -0,0 +1,18 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support For `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

package/dist/style.css

@@ -0,0 +1 @@
+.areaCategoria[data-v-596712b7]{display:table-cell;align-items:center;width:3rem;padding:1.8rem 1.4rem}.bg-escuro[data-v-596712b7],.iconeCategoria[data-v-596712b7]{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-596712b7]{font-size:2rem}.iconeCategoria.bg-claro[data-v-596712b7],.realizado .iconeCategoria[data-v-596712b7],.cancelado .iconeCategoria[data-v-596712b7],.adiado .iconeCategoria[data-v-596712b7]{opacity:.3}.iconeCategoria.borda-alerta[data-v-596712b7],.criticidade-media .iconeCategoria[data-v-596712b7]{border-color:var(--cor-alerta)}.iconeCategoria.borda-importante[data-v-596712b7],.criticidade-alta .iconeCategoria[data-v-596712b7]{border-color:var(--cor-importante)}.iconeCategoria.borda-sucesso[data-v-596712b7]{border-color:var(--cor-sucesso)}.bg-claro.iconeCategoria.borda-importante[data-v-596712b7],.adiado.criticidade-alta .iconeCategoria[data-v-596712b7],.cancelado.criticidade-alta .iconeCategoria[data-v-596712b7],.realizado.criticidade-alta .iconeCategoria[data-v-596712b7]{border-color:var(--cor-importante)}.iconeStatus[data-v-f9b2f36c]{font-size:1.6rem;line-height:1rem;color:var(--cor-secundaria);width:1.6rem;display:table-cell;padding:2.7rem 1.4rem 1.4rem;vertical-align:top}.realizado.iconeStatus[data-v-f9b2f36c]{color:var(--cor-sucesso)}.realizado.iconeStatus[data-v-f9b2f36c]:before{font-family:Material Symbols Outlined;content:""}.cancelado.iconeStatus[data-v-f9b2f36c]{color:var(--cor-importante)}.cancelado.iconeStatus[data-v-f9b2f36c]:before{font-family:Material Symbols Outlined;content:""}.adiado.iconeStatus[data-v-f9b2f36c]{color:var(--cor-apoio)}.adiado.iconeStatus[data-v-f9b2f36c]:before{font-family:Material Symbols Outlined;content:""}.planejado.iconeStatus[data-v-f9b2f36c]{opacity:0}.planejado.iconeStatus[data-v-f9b2f36c]:before{font-family:Material Symbols Outlined;content:""}.atrasado.iconeStatus[data-v-f9b2f36c]:before{font-family:Material Symbols Outlined;content:""}.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-57ec4748]{display:table-cell;vertical-align:top;padding:1.4rem;padding-left:0}.realizado .descricaoEvento[data-v-57ec4748],.cancelado .descricaoEvento[data-v-57ec4748],.adiado .descricaoEvento[data-v-57ec4748]{opacity:.4}.descricaoEvento .titulo[data-v-57ec4748]{line-height:1.8rem;margin:0}@media only screen and (max-width: 400px){.descricaoEvento[data-v-57ec4748]{max-width:15rem}}.hora[data-v-c83864af]{color:var(--cor-texto)}.bg-selecionado .hora[data-v-c83864af]{color:var(--cor-texto-selecao)}.hora-padrao[data-v-c83864af],.horaRealizada[data-v-c83864af]{font-weight:500;font-size:1.4rem}.hora-riscada[data-v-c83864af],.horaPlanejada[data-v-c83864af]{text-decoration:line-through;font-size:1rem}.realizado .horaEvento[data-v-22e53379],.cancelado .horaEvento[data-v-22e53379],.adiado .horaEvento[data-v-22e53379]{opacity:.4}.areaHora[data-v-22e53379]{width:4.5rem;display:table-cell;vertical-align:top;text-align:right;padding:1.4rem 0}.horaEvento[data-v-22e53379]{line-height:1.4rem;text-align:right;display:flex;flex-direction:column}.horaRealizada[data-v-22e53379]{font-weight:500}.horaPlanejada[data-v-22e53379]{text-decoration:line-through}.realizado .destaqueEvento[data-v-c2b8e419],.cancelado .destaqueEvento[data-v-c2b8e419],.adiado .destaqueEvento[data-v-c2b8e419]{opacity:.4}.destaqueEvento[data-v-c2b8e419]{display:table-cell;text-align:right;width:15%;line-height:1em;color:var(--cor-texto);padding:1.4rem;vertical-align:middle}.bg-selecionado .destaqueEvento[data-v-c2b8e419]{color:var(--cor-texto-selecao)}.eventoTimeline[data-v-54059adf]{position:relative;width:100%;border-radius:1rem}.eventoTimeline[data-v-54059adf]:hover{background:#f9f9f9}.atual[data-v-54059adf],.atual[data-v-54059adf]:hover{background:var(--cor-selecao)}.eventoTimeline[data-v-54059adf]:before{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;top:0;height:1.5rem;left:11.7rem}.eventoTimeline[data-v-54059adf]:after{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;top:5.1rem;bottom:0;left:11.7rem}.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-35229a33]{display:table-row;width:100%;position:relative;background:#fff}.areaData[data-v-35229a33]{display:table-cell;padding:2.8rem 1.4rem 2.8rem 10.1rem;position:relative}.areaData[data-v-35229a33]:before{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;height:2.5rem;top:0;left:11.7rem}.areaData[data-v-35229a33]:after{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;height:2.5rem;bottom:0;left:11.7rem}.separadorPeriodo .titulo[data-v-35229a33]{text-transform:uppercase;padding-bottom:3.45rem;color:var(--cor-texto)}.separadorPeriodo .titulo.claro[data-v-35229a33]{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-de2da009]{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-de2da009]{color:var(--cor-secundaria)}.fixed[data-v-de2da009]{position:fixed;top:0;left:0;transition:all .3s}.areaEvento[data-v-97897a02]{display:table-row;min-height:8rem;position:relative!important;width:100%}.timeline[data-v-97897a02]{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}

package/dist/timeline-vue.es.js

@@ -0,0 +1,557 @@
+import { defineComponent as u, reactive as P, computed as y, openBlock as o, createElementBlock as i, createElementVNode as h, normalizeClass as b, normalizeStyle as I, toDisplayString as g, resolveComponent as p, createVNode as m, createBlock as E, createCommentVNode as T, ref as q, onMounted as z, onUnmounted as j, Fragment as H, renderList as O } from "vue";
+const w = u({
+  name: "categoria",
+  props: {
+    iconeCategoria: {
+      type: String,
+      required: !0
+    },
+    categoria: {
+      type: String
+    },
+    escuro: {
+      type: Boolean,
+      default: !0
+    },
+    tipo: {
+      type: String
+    },
+    borderColor: {
+      type: String
+    },
+    backgroundColor: {
+      type: String
+    }
+  },
+  setup(e) {
+    return e = P(e), {
+      classes: y(() => ({
+        "bg-escuro": e.escuro,
+        "bg-claro": !e.escuro,
+        [`borda-${e.tipo || "padrao"}`]: !0
+      })),
+      style: y(() => ({
+        borderColor: e.borderColor,
+        backgroundColor: e.backgroundColor
+      }))
+    };
+  }
+});
+const _ = (e, n) => {
+  const t = e.__vccOpts || e;
+  for (const [a, s] of n)
+    t[a] = s;
+  return t;
+}, B = { class: "areaCategoria" }, F = ["alt"], M = { class: "material-symbols-outlined" };
+function R(e, n, t, a, s, c) {
+  return o(), i("div", B, [
+    h("div", {
+      class: b(["iconeCategoria", e.classes]),
+      style: I(e.style),
+      alt: e.categoria
+    }, [
+      h("span", M, g(e.iconeCategoria), 1)
+    ], 14, F)
+  ]);
+}
+const A = /* @__PURE__ */ _(w, [["render", R], ["__scopeId", "data-v-596712b7"]]), N = u({
+  name: "status",
+  props: {
+    status: {
+      required: !0,
+      type: String
+    }
+  },
+  components: {},
+  setup(e) {
+    return e = P(e), {
+      classes: y(() => ({
+        [`${e.status || "planejado"}`]: !0
+      }))
+    };
+  }
+});
+function V(e, n, t, a, s, c) {
+  return o(), i("div", {
+    class: b([e.classes, "iconeStatus"])
+  }, null, 2);
+}
+const Y = /* @__PURE__ */ _(N, [["render", V], ["__scopeId", "data-v-f9b2f36c"]]), L = u({
+  props: {
+    subtitulo: {
+      required: !0,
+      type: String
+    }
+  },
+  components: {},
+  setup() {
+    return {};
+  }
+});
+const U = { class: "subtitulo" };
+function G(e, n, t, a, s, c) {
+  return o(), i("h4", U, g(e.subtitulo), 1);
+}
+const J = /* @__PURE__ */ _(L, [["render", G], ["__scopeId", "data-v-f5319628"]]), K = u({
+  props: {
+    titulo: {
+      required: !0,
+      type: String
+    }
+  },
+  components: {},
+  setup() {
+    return {};
+  }
+});
+const Q = { class: "titulo" };
+function W(e, n, t, a, s, c) {
+  return o(), i("h3", Q, g(e.titulo), 1);
+}
+const X = /* @__PURE__ */ _(K, [["render", W], ["__scopeId", "data-v-fce23b0e"]]), Z = u({
+  props: {
+    titulo: {
+      required: !0,
+      type: String
+    },
+    subtitulo: {
+      required: !0,
+      type: String
+    }
+  },
+  components: { TituloEvento: X, SubtituloEvento: J },
+  setup() {
+    return {};
+  }
+});
+const x = {
+  key: 0,
+  class: "descricaoEvento"
+}, ee = {
+  key: 1,
+  class: "descricaoEvento",
+  style: { "padding-top": "2.3rem" }
+};
+function te(e, n, t, a, s, c) {
+  const r = p("TituloEvento"), S = p("SubtituloEvento");
+  return e.subtitulo ? (o(), i("div", x, [
+    m(r, { titulo: e.titulo }, null, 8, ["titulo"]),
+    m(S, { subtitulo: e.subtitulo }, null, 8, ["subtitulo"])
+  ])) : (o(), i("div", ee, [
+    m(r, { titulo: e.titulo }, null, 8, ["titulo"])
+  ]));
+}
+const oe = /* @__PURE__ */ _(Z, [["render", te], ["__scopeId", "data-v-57ec4748"]]), ne = u({
+  name: "hora",
+  props: {
+    hora: {
+      required: !0,
+      type: Date
+    },
+    aparencia: {
+      type: String
+    }
+  },
+  components: {},
+  setup(e) {
+    e = P(e);
+    const n = e.hora, t = n.getHours(), a = n.getMinutes(), s = `${t}:${a.toString().padStart(2, "0")}`;
+    return {
+      classes: y(() => ({
+        [`hora-${e.aparencia || ""}`]: !0
+      })),
+      horaString: s
+    };
+  }
+});
+function ae(e, n, t, a, s, c) {
+  return o(), i("div", {
+    class: b(["hora", e.classes])
+  }, g(e.horaString), 3);
+}
+const se = /* @__PURE__ */ _(ne, [["render", ae], ["__scopeId", "data-v-c83864af"]]), re = u({
+  props: {
+    horaPrevista: {
+      type: Date,
+      required: !0
+    },
+    horaRealizada: {
+      type: Date
+    }
+    // aparencia: {
+    //   type: String,
+    // },
+  },
+  components: { Hora: se },
+  setup() {
+    return {};
+  }
+});
+const ie = { class: "areaHora" }, ce = { class: "horaEvento" };
+function le(e, n, t, a, s, c) {
+  const r = p("Hora");
+  return o(), i("div", ie, [
+    h("div", ce, [
+      e.horaRealizada ? (o(), E(r, {
+        key: 0,
+        class: "horaRealizada texto-grande",
+        hora: e.horaRealizada,
+        style: { "padding-top": "0.3rem" }
+      }, null, 8, ["hora"])) : T("", !0),
+      e.horaRealizada ? (o(), E(r, {
+        key: 1,
+        class: "horaPlanejada texto-pequeno",
+        hora: e.horaPrevista
+      }, null, 8, ["hora"])) : (o(), E(r, {
+        key: 2,
+        class: "horaRealizada texto-grande",
+        hora: e.horaPrevista,
+        style: { "padding-top": "1.2rem" }
+      }, null, 8, ["hora"]))
+    ])
+  ]);
+}
+const de = /* @__PURE__ */ _(re, [["render", le], ["__scopeId", "data-v-22e53379"]]), ue = u({
+  name: "destaque",
+  props: {
+    destaque: {
+      type: String
+    }
+  },
+  components: {},
+  setup() {
+    return {};
+  }
+});
+const _e = { class: "destaqueEvento texto-pequeno" };
+function pe(e, n, t, a, s, c) {
+  return o(), i("div", _e, g(e.destaque), 1);
+}
+const me = /* @__PURE__ */ _(ue, [["render", pe], ["__scopeId", "data-v-c2b8e419"]]), ve = u({
+  props: {
+    dadosEvento: {
+      required: !0,
+      type: Object
+    }
+  },
+  components: {
+    IconeStatus: Y,
+    IconeCategoria: A,
+    HoraEvento: de,
+    DescricaoEvento: oe,
+    Destaque: me
+  },
+  setup(e) {
+    return {
+      eventoSelecionado: y(() => ({
+        atual: e.dadosEvento.atual == !0,
+        padrao: e.dadosEvento.atual == !1
+      }))
+    };
+  }
+});
+function fe(e, n, t, a, s, c) {
+  const r = p("IconeStatus"), S = p("HoraEvento"), d = p("IconeCategoria"), l = p("DescricaoEvento"), v = p("Destaque");
+  return o(), i("article", {
+    class: b(["eventoTimeline", [
+      e.dadosEvento.valor.status,
+      "criticidade-" + e.dadosEvento.valor.criticidade,
+      e.eventoSelecionado
+    ]])
+  }, [
+    m(r, {
+      status: e.dadosEvento.valor.status
+    }, null, 8, ["status"]),
+    m(S, {
+      horaPrevista: e.dadosEvento.valor.previsto,
+      horaRealizada: e.dadosEvento.valor.realizado
+    }, null, 8, ["horaPrevista", "horaRealizada"]),
+    m(d, {
+      iconeCategoria: e.dadosEvento.valor.categoria.icone,
+      categoria: e.dadosEvento.valor.categoria.nome
+    }, null, 8, ["iconeCategoria", "categoria"]),
+    m(l, {
+      titulo: e.dadosEvento.valor.titulo,
+      subtitulo: e.dadosEvento.valor.subtitulo
+    }, null, 8, ["titulo", "subtitulo"]),
+    m(v, {
+      destaque: e.dadosEvento.valor.destaque
+    }, null, 8, ["destaque"])
+  ], 2);
+}
+const ge = /* @__PURE__ */ _(ve, [["render", fe], ["__scopeId", "data-v-54059adf"]]), $e = u({
+  name: "BoxData",
+  props: {
+    dataNumero: {
+      required: !0,
+      type: Number
+    },
+    aparencia: {
+      type: String
+    }
+  },
+  components: {},
+  setup(e) {
+    return e = P(e), {
+      classes: y(() => ({
+        [`${e.aparencia || "padrao"}`]: !0
+      }))
+    };
+  }
+});
+function ye(e, n, t, a, s, c) {
+  return o(), i("h3", {
+    class: b(["boxData padrao", e.classes])
+  }, g(e.dataNumero), 3);
+}
+const he = /* @__PURE__ */ _($e, [["render", ye], ["__scopeId", "data-v-5e2b8273"]]), be = u({
+  name: "SeparadorPeriodo",
+  props: {
+    dataSeparador: {
+      required: !0,
+      type: String
+    },
+    aparencia: {
+      type: String
+    }
+  },
+  components: { BoxData: he },
+  setup(e) {
+    const n = [
+      "janeiro",
+      "fevereiro",
+      "março",
+      "abril",
+      "maio",
+      "junho",
+      "julho",
+      "agosto",
+      "setembro",
+      "outubro",
+      "novembro",
+      "dezembro"
+    ], t = e.dataSeparador, a = new Date(t), s = a.getFullYear(), c = n[a.getMonth()], r = a.getDate();
+    return { dataRecebida: t, ano: s, mes: c, dia: r };
+  }
+});
+const Se = { class: "separadorPeriodo" }, Ee = { class: "areaData" };
+function Te(e, n, t, a, s, c) {
+  const r = p("BoxData");
+  return o(), i("div", Se, [
+    h("div", Ee, [
+      m(r, {
+        dataNumero: e.dia,
+        aparencia: e.aparencia
+      }, null, 8, ["dataNumero", "aparencia"])
+    ]),
+    h("h3", {
+      class: b(["titulo", e.aparencia])
+    }, g(e.mes) + " de " + g(e.ano), 3)
+  ]);
+}
+const Pe = /* @__PURE__ */ _(be, [["render", Te], ["__scopeId", "data-v-35229a33"]]), ke = u({
+  props: {
+    imagem: {
+      type: String
+    },
+    icone: {
+      type: String
+    }
+  },
+  setup() {
+    return {};
+  }
+});
+const qe = { class: "avatar" }, De = ["src"], Ie = {
+  key: 1,
+  class: "material-symbols-outlined"
+};
+function Ce(e, n, t, a, s, c) {
+  return o(), i("div", qe, [
+    e.imagem ? (o(), i("img", {
+      key: 0,
+      src: e.imagem
+    }, null, 8, De)) : e.icone ? (o(), i("span", Ie, g(e.icone), 1)) : T("", !0)
+  ]);
+}
+const ze = /* @__PURE__ */ _(ke, [["render", Ce], ["__scopeId", "data-v-a913d26b"]]), je = u({
+  components: { AvatarTimeline: ze },
+  props: {
+    imagemPerfil: {
+      type: String
+    },
+    nomePerfil: {
+      type: String
+    },
+    iconePerfil: {
+      type: String
+    },
+    backgroundColor: {
+      type: String,
+      default: "var(--cor-primaria)"
+    }
+  },
+  setup(e) {
+    e = P(e);
+    const n = y(() => ({
+      backgroundColor: e.backgroundColor
+    })), t = q(null), a = q(!1), s = () => {
+      if (t.value) {
+        const c = window.pageYOffset || document.documentElement.scrollTop, r = t.value.offsetTop;
+        a.value = c > r;
+      }
+    };
+    return z(() => {
+      window.addEventListener("scroll", s);
+    }), j(() => {
+      window.removeEventListener("scroll", s);
+    }), {
+      style: n,
+      elementoFixo: t,
+      isFixed: a
+    };
+  }
+});
+const He = { class: "nome" };
+function Oe(e, n, t, a, s, c) {
+  const r = p("AvatarTimeline");
+  return o(), i("div", {
+    class: b(["perfilTimeline", { fixed: e.isFixed }]),
+    ref: "elementoFixo",
+    style: I(e.style)
+  }, [
+    e.imagemPerfil ? (o(), E(r, {
+      key: 0,
+      imagem: e.imagemPerfil
+    }, null, 8, ["imagem"])) : e.iconePerfil ? (o(), E(r, {
+      key: 1,
+      icone: e.iconePerfil
+    }, null, 8, ["icone"])) : T("", !0),
+    h("h2", He, g(e.nomePerfil), 1)
+  ], 6);
+}
+const we = /* @__PURE__ */ _(je, [["render", Oe], ["__scopeId", "data-v-de2da009"]]), Be = u({
+  props: {
+    perfilTimeline: {
+      required: !0,
+      type: Object
+    },
+    eventosTimeline: {
+      required: !0,
+      type: Object
+    }
+    // ordem: {
+    //   required: false,
+    //   type: Ordem,
+    // },
+  },
+  components: {
+    PerfilTimeline: we,
+    SeparadorPeriodo: Pe,
+    EventoTimeline: ge
+  },
+  setup(e) {
+    const n = P(
+      e.eventosTimeline
+    ), t = n.sort(
+      (d, l) => d.data.getTime() - l.data.getTime()
+    ), a = (d, l) => {
+      const v = d.getDay() === l.getDay(), f = d.getMonth() === l.getMonth(), $ = d.getFullYear() === l.getFullYear();
+      return v && f && $;
+    };
+    function s(d) {
+      if (d) {
+        const l = Date.now();
+        let v = null, f = [];
+        for (const $ of d) {
+          const C = $.data.getTime(), k = Math.abs(l - C);
+          (v === null || k < v) && (v = k, f.length = 0), ($.status === "planejado" || $.status === "atrasado") && f.push($);
+        }
+        return f;
+      } else
+        return console.log("vazio.. ", []), [];
+    }
+    const c = s(t), r = c[0] ? c[0] : null;
+    return {
+      eventosPorTipo: y(() => {
+        if (n) {
+          let d = [], l = null, v = 0;
+          for (const f of t) {
+            const $ = f.data;
+            (!l || !a(l, $)) && (l = $, d.push({
+              tipo: "dia",
+              valor: f.data,
+              key: ++v
+            })), d.push({
+              tipo: "evento",
+              valor: f,
+              key: ++v,
+              atual: r === null ? !1 : f.id === r.id
+            });
+          }
+          return d;
+        } else
+          return [];
+      })
+    };
+  },
+  methods: {
+    scrollParaItemAtual() {
+      const e = document.querySelector(".atual");
+      e == null || e.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
+    }
+  },
+  mounted() {
+    this.scrollParaItemAtual();
+  }
+});
+const Fe = { key: 0 }, Me = { key: 1 }, Re = { class: "timeline" };
+function Ae(e, n, t, a, s, c) {
+  const r = p("PerfilTimeline"), S = p("SeparadorPeriodo"), d = p("EventoTimeline");
+  return o(), i("div", null, [
+    h("div", null, [
+      e.perfilTimeline !== null ? (o(), E(r, {
+        key: 0,
+        nomePerfil: e.perfilTimeline.nome,
+        imagemPerfil: e.perfilTimeline.imagem,
+        iconePerfil: e.perfilTimeline.icone
+      }, null, 8, ["nomePerfil", "imagemPerfil", "iconePerfil"])) : T("", !0)
+    ]),
+    (o(!0), i(H, null, O(e.eventosPorTipo, (l) => (o(), i("div", {
+      key: l.key,
+      class: "areaTimeline"
+    }, [
+      l.tipo === "dia" ? (o(), i("div", Fe, [
+        m(S, {
+          dataSeparador: l.valor.toDateString()
+        }, null, 8, ["dataSeparador"])
+      ])) : T("", !0),
+      l.tipo === "evento" ? (o(), i("div", Me, [
+        h("section", Re, [
+          m(d, { dadosEvento: l }, null, 8, ["dadosEvento"])
+        ])
+      ])) : T("", !0)
+    ]))), 128))
+  ]);
+}
+const Ne = /* @__PURE__ */ _(Be, [["render", Ae], ["__scopeId", "data-v-97897a02"]]), Ve = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null
+}, Symbol.toStringTag, { value: "Module" })), D = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Timeline: Ne,
+  Tipos: Ve
+}, Symbol.toStringTag, { value: "Module" }));
+const Le = {
+  install(e, ...n) {
+    for (const t in D)
+      e.component(t, D[t]);
+  }
+};
+export {
+  Ne as Timeline,
+  Ve as Tipos,
+  Le as default
+};

package/dist/types/components/timeline/atomos/AvatarTimeline.vue.d.ts

@@ -0,0 +1,17 @@
+/** __vue_virtual_code_placeholder */
+declare const _default: import("vue").DefineComponent<{
+    imagem: {
+        type: StringConstructor;
+    };
+    icone: {
+        type: StringConstructor;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    imagem: {
+        type: StringConstructor;
+    };
+    icone: {
+        type: StringConstructor;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/components/timeline/atomos/BoxData.vue.d.ts

@@ -0,0 +1,23 @@
+/** __vue_virtual_code_placeholder */
+declare const _default: import("vue").DefineComponent<{
+    dataNumero: {
+        required: true;
+        type: NumberConstructor;
+    };
+    aparencia: {
+        type: StringConstructor;
+    };
+}, {
+    classes: import("vue").ComputedRef<{
+        [x: string]: boolean;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    dataNumero: {
+        required: true;
+        type: NumberConstructor;
+    };
+    aparencia: {
+        type: StringConstructor;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/components/timeline/atomos/Destaque.vue.d.ts

@@ -0,0 +1,11 @@
+/** __vue_virtual_code_placeholder */
+declare const _default: import("vue").DefineComponent<{
+    destaque: {
+        type: StringConstructor;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    destaque: {
+        type: StringConstructor;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/components/timeline/atomos/Hora.vue.d.ts

@@ -0,0 +1,24 @@
+/** __vue_virtual_code_placeholder */
+declare const _default: import("vue").DefineComponent<{
+    hora: {
+        required: true;
+        type: DateConstructor;
+    };
+    aparencia: {
+        type: StringConstructor;
+    };
+}, {
+    classes: import("vue").ComputedRef<{
+        [x: string]: boolean;
+    }>;
+    horaString: string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    hora: {
+        required: true;
+        type: DateConstructor;
+    };
+    aparencia: {
+        type: StringConstructor;
+    };
+}>>, {}>;
+export default _default;