@devix-tecnologia/timeline-vue 1.5.0 → 2.0.0

package/dist/timeline-vue.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as v, reactive as S, computed as b, openBlock as o, createElementBlock as s, createElementVNode as u, normalizeClass as T, normalizeStyle as j, toDisplayString as l, resolveComponent as d, createVNode as _, createBlock as y, createCommentVNode as E, ref as Q, Fragment as M, renderList as N, renderSlot as z, createTextVNode as A, pushScopeId as H, popScopeId as R, withCtx as P, Transition as k } from "vue";
-const U = v({
+import { defineComponent as p, reactive as S, computed as E, openBlock as a, createElementBlock as i, createElementVNode as u, normalizeClass as q, normalizeStyle as H, toDisplayString as c, resolveComponent as l, createVNode as _, createBlock as C, createCommentVNode as b, ref as W, Fragment as V, renderList as F, renderSlot as B, createTextVNode as R, pushScopeId as M, popScopeId as w, withCtx as D, Transition as z } from "vue";
+const X = p({
   name: "Icone Categoria",
   props: {
     iconeCategoria: {
@@ -25,12 +25,12 @@ const U = v({
   },
   setup(e) {
     return e = S(e), {
-      classes: b(() => ({
+      classes: E(() => ({
         "bg-escuro": e.escuro,
         "bg-claro": !e.escuro,
         [`borda-${e.tipo || "padrao"}`]: !0
       })),
-      style: b(() => ({
+      style: E(() => ({
         borderColor: e.borderColor,
         backgroundColor: e.backgroundColor
       }))
@@ -38,23 +38,23 @@ const U = v({
   }
 });
 const m = (e, t) => {
-  const n = e.__vccOpts || e;
-  for (const [i, c] of t)
-    n[i] = c;
-  return n;
-}, W = { class: "areaCategoria" }, X = ["alt"], Z = { class: "material-symbols-outlined" };
-function x(e, t, n, i, c, p) {
-  return o(), s("div", W, [
+  const s = e.__vccOpts || e;
+  for (const [o, n] of t)
+    s[o] = n;
+  return s;
+}, Z = { class: "areaCategoria" }, x = ["alt"], ee = { class: "material-symbols-outlined" };
+function te(e, t, s, o, n, d) {
+  return a(), i("div", Z, [
     u("div", {
-      class: T(["iconeCategoria", e.classes]),
-      style: j(e.style),
+      class: q(["iconeCategoria", e.classes]),
+      style: H(e.style),
       alt: e.categoria
     }, [
-      u("span", Z, l(e.iconeCategoria), 1)
-    ], 14, X)
+      u("span", ee, c(e.iconeCategoria), 1)
+    ], 14, x)
   ]);
 }
-const w = /* @__PURE__ */ m(U, [["render", x], ["__scopeId", "data-v-f922d1fe"]]), ee = v({
+const L = /* @__PURE__ */ m(X, [["render", te], ["__scopeId", "data-v-f922d1fe"]]), ae = p({
   name: "Icone Status",
   props: {
     status: {
@@ -64,18 +64,18 @@ const w = /* @__PURE__ */ m(U, [["render", x], ["__scopeId", "data-v-f922d1fe"]]
   },
   setup(e) {
     return e = S(e), {
-      classes: b(() => ({
+      classes: E(() => ({
         [`${e.status || "planejado"}`]: !0
       }))
     };
   }
 });
-function oe(e, t, n, i, c, p) {
-  return o(), s("div", {
-    class: T([e.classes, "iconeStatus"])
+function oe(e, t, s, o, n, d) {
+  return a(), i("div", {
+    class: q([e.classes, "iconeStatus"])
   }, null, 2);
 }
-const V = /* @__PURE__ */ m(ee, [["render", oe], ["__scopeId", "data-v-61335255"]]), te = v({
+const J = /* @__PURE__ */ m(ae, [["render", oe], ["__scopeId", "data-v-efe84975"]]), ne = p({
   name: "Subtítulo Evento",
   props: {
     subtitulo: {
@@ -84,11 +84,11 @@ const V = /* @__PURE__ */ m(ee, [["render", oe], ["__scopeId", "data-v-61335255"
     }
   }
 });
-const ae = { class: "subtitulo" };
-function ne(e, t, n, i, c, p) {
-  return o(), s("h4", ae, l(e.subtitulo), 1);
+const se = { class: "subtitulo" };
+function ie(e, t, s, o, n, d) {
+  return a(), i("h4", se, c(e.subtitulo), 1);
 }
-const se = /* @__PURE__ */ m(te, [["render", ne], ["__scopeId", "data-v-5f7c5673"]]), re = v({
+const re = /* @__PURE__ */ m(ne, [["render", ie], ["__scopeId", "data-v-5f7c5673"]]), ce = p({
   name: "Título Evento",
   props: {
     titulo: {
@@ -97,11 +97,11 @@ const se = /* @__PURE__ */ m(te, [["render", ne], ["__scopeId", "data-v-5f7c5673
     }
   }
 });
-const ie = { class: "titulo" };
-function ce(e, t, n, i, c, p) {
-  return o(), s("h3", ie, l(e.titulo), 1);
+const le = { class: "titulo" };
+function de(e, t, s, o, n, d) {
+  return a(), i("h3", le, c(e.titulo), 1);
 }
-const le = /* @__PURE__ */ m(re, [["render", ce], ["__scopeId", "data-v-7369e837"]]), de = v({
+const ue = /* @__PURE__ */ m(ce, [["render", de], ["__scopeId", "data-v-7369e837"]]), _e = p({
   name: "Descrição Evento",
   props: {
     titulo: {
@@ -113,22 +113,22 @@ const le = /* @__PURE__ */ m(re, [["render", ce], ["__scopeId", "data-v-7369e837
       type: String
     }
   },
-  components: { TituloEvento: le, SubtituloEvento: se }
+  components: { TituloEvento: ue, SubtituloEvento: re }
 });
-function ue(e, t, n, i, c, p) {
-  const r = d("TituloEvento"), $ = d("SubtituloEvento");
-  return o(), s("div", {
+function pe(e, t, s, o, n, d) {
+  const r = l("TituloEvento"), f = l("SubtituloEvento");
+  return a(), i("div", {
     class: "descricaoEvento",
-    style: j(`${e.subtitulo ? "" : "padding-top: 3.3rem"}`)
+    style: H(`${e.subtitulo ? "" : "padding-top: 3.3rem"}`)
   }, [
     _(r, { titulo: e.titulo }, null, 8, ["titulo"]),
-    e.subtitulo ? (o(), y($, {
+    e.subtitulo ? (a(), C(f, {
       key: 0,
       subtitulo: e.subtitulo
-    }, null, 8, ["subtitulo"])) : E("", !0)
+    }, null, 8, ["subtitulo"])) : b("", !0)
   ], 4);
 }
-const _e = /* @__PURE__ */ m(de, [["render", ue], ["__scopeId", "data-v-171435d6"]]), pe = v({
+const me = /* @__PURE__ */ m(_e, [["render", pe], ["__scopeId", "data-v-793cab8b"]]), ve = p({
   name: "Hora",
   props: {
     hora: {
@@ -146,19 +146,19 @@ const _e = /* @__PURE__ */ m(de, [["render", ue], ["__scopeId", "data-v-171435d6
   components: {},
   setup(e) {
     return {
-      horas: Q(new Date(e.hora)),
-      classes: b(() => ({
+      horas: W(new Date(e.hora)),
+      classes: E(() => ({
         [`hora-${e.aparencia || ""}`]: !0
       }))
     };
   }
 });
-function ve(e, t, n, i, c, p) {
-  return o(), s("div", {
-    class: T(["hora", e.classes])
-  }, l(e.horas.getHours()) + ":" + l(e.horas.getMinutes().toString().padStart(2, "0")), 3);
+function fe(e, t, s, o, n, d) {
+  return a(), i("div", {
+    class: q(["hora", e.classes])
+  }, c(e.horas.getHours()) + ":" + c(e.horas.getMinutes().toString().padStart(2, "0")), 3);
 }
-const L = /* @__PURE__ */ m(pe, [["render", ve], ["__scopeId", "data-v-dacdabdc"]]), me = v({
+const Y = /* @__PURE__ */ m(ve, [["render", fe], ["__scopeId", "data-v-d3082250"]]), $e = p({
   name: "Hora Evento",
   props: {
     horaPrevista: {
@@ -170,27 +170,27 @@ const L = /* @__PURE__ */ m(pe, [["render", ve], ["__scopeId", "data-v-dacdabdc"
       type: Date
     }
   },
-  components: { Hora: L }
+  components: { Hora: Y }
 });
-const fe = { class: "areaHora" }, $e = { class: "horaEvento" };
-function he(e, t, n, i, c, p) {
-  const r = d("Hora");
-  return o(), s("div", fe, [
-    u("div", $e, [
-      e.horaRealizada ? (o(), y(r, {
+const he = { class: "areaHora" }, ge = { class: "horaEvento" };
+function ye(e, t, s, o, n, d) {
+  const r = l("Hora");
+  return a(), i("div", he, [
+    u("div", ge, [
+      e.horaRealizada ? (a(), C(r, {
         key: 0,
         hora: e.horaRealizada,
         style: { "padding-top": "0.3rem" }
-      }, null, 8, ["hora"])) : E("", !0),
+      }, null, 8, ["hora"])) : b("", !0),
       _(r, {
         hora: e.horaPrevista,
         aparencia: e.horaRealizada ? "riscada" : "padrao",
-        style: j(e.horaRealizada ? "" : "padding-top: 1.2rem")
+        style: H(e.horaRealizada ? "" : "padding-top: 1.2rem")
       }, null, 8, ["hora", "aparencia", "style"])
     ])
   ]);
 }
-const ge = /* @__PURE__ */ m(me, [["render", he], ["__scopeId", "data-v-da519ace"]]), ye = v({
+const Ce = /* @__PURE__ */ m($e, [["render", ye], ["__scopeId", "data-v-da519ace"]]), be = p({
   name: "Destaque",
   props: {
     texto: {
@@ -198,11 +198,11 @@ const ge = /* @__PURE__ */ m(me, [["render", he], ["__scopeId", "data-v-da519ace
     }
   }
 });
-const be = { class: "destaqueEvento texto-pequeno" };
-function Ee(e, t, n, i, c, p) {
-  return o(), s("div", be, l(e.texto), 1);
+const ke = { class: "destaqueEvento texto-pequeno" };
+function Se(e, t, s, o, n, d) {
+  return a(), i("div", ke, c(e.texto), 1);
 }
-const Se = /* @__PURE__ */ m(ye, [["render", Ee], ["__scopeId", "data-v-c2f02de8"]]), Ce = v({
+const Ee = /* @__PURE__ */ m(be, [["render", Se], ["__scopeId", "data-v-c2f02de8"]]), Te = p({
   name: "Evento Timeline",
   props: {
     status: {
@@ -214,14 +214,15 @@ const Se = /* @__PURE__ */ m(ye, [["render", Ee], ["__scopeId", "data-v-c2f02de8
       type: String
     },
     ehAtual: {
-      required: !0,
-      type: Boolean
+      required: !1,
+      type: Boolean,
+      default: !1
     },
-    previsto: {
+    previstoPara: {
       required: !0,
       type: Date
     },
-    realizado: {
+    realizadoEm: {
       required: !1,
       type: Date
     },
@@ -237,58 +238,62 @@ const Se = /* @__PURE__ */ m(ye, [["render", Ee], ["__scopeId", "data-v-c2f02de8
       required: !1,
       type: String
     },
-    destaque: {
+    textoDestaque: {
       required: !1,
       type: String
     },
-    aoClicar: {
+    clicavel: {
       required: !1,
-      type: Function
+      type: Boolean,
+      default: !0
     }
   },
   components: {
-    IconeStatus: V,
-    IconeCategoria: w,
-    HoraEvento: ge,
-    DescricaoEvento: _e,
-    Destaque: Se
+    IconeStatus: J,
+    IconeCategoria: L,
+    HoraEvento: Ce,
+    DescricaoEvento: me,
+    Destaque: Ee
   },
-  setup(e) {
+  emits: {
+    click: (e) => !0
+  },
+  setup(e, { emit: t }) {
     return {
-      eventoSelecionado: b(() => ({
+      handleClick: (o) => {
+        e.clicavel && t("click", o);
+      },
+      eventoSelecionado: E(() => ({
         atual: e.ehAtual,
         padrao: e.ehAtual
-      })),
-      clicavel: b(() => ({
-        clicavel: e.aoClicar !== void 0
       }))
     };
   }
 });
-const Te = ["onclick"];
-function qe(e, t, n, i, c, p) {
-  const r = d("IconeStatus"), $ = d("HoraEvento"), h = d("IconeCategoria"), a = d("DescricaoEvento"), f = d("Destaque");
-  return o(), s("article", {
-    class: T(["eventoTimeline", [e.status, "criticidade-" + e.criticidade, e.eventoSelecionado, e.clicavel]]),
-    onclick: e.aoClicar
+function Pe(e, t, s, o, n, d) {
+  const r = l("IconeStatus"), f = l("HoraEvento"), y = l("IconeCategoria"), $ = l("DescricaoEvento"), I = l("Destaque");
+  return a(), i("article", {
+    "data-testid": "evento",
+    class: q(["eventoTimeline", [e.status, "criticidade-" + e.criticidade, e.eventoSelecionado, e.clicavel]]),
+    onClick: t[0] || (t[0] = (...v) => e.handleClick && e.handleClick(...v))
   }, [
     _(r, { status: e.status }, null, 8, ["status"]),
-    _($, {
-      horaPrevista: e.previsto,
-      horaRealizada: e.realizado
+    _(f, {
+      horaPrevista: e.previstoPara,
+      horaRealizada: e.realizadoEm
     }, null, 8, ["horaPrevista", "horaRealizada"]),
-    _(h, {
+    _(y, {
       iconeCategoria: e.categoria.icone,
       categoria: e.categoria.nome
     }, null, 8, ["iconeCategoria", "categoria"]),
-    _(a, {
+    _($, {
       titulo: e.titulo,
       subtitulo: e.subtitulo
     }, null, 8, ["titulo", "subtitulo"]),
-    _(f, { texto: e.destaque }, null, 8, ["texto"])
-  ], 10, Te);
+    _(I, { texto: e.textoDestaque }, null, 8, ["texto"])
+  ], 2);
 }
-const J = /* @__PURE__ */ m(Ce, [["render", qe]]), De = v({
+const G = /* @__PURE__ */ m(Te, [["render", Pe]]), De = p({
   name: "Box Data",
   props: {
     dataNumero: {
@@ -301,18 +306,18 @@ const J = /* @__PURE__ */ m(Ce, [["render", qe]]), De = v({
   },
   setup(e) {
     return e = S(e), {
-      classes: b(() => ({
+      classes: E(() => ({
         [`${e.aparencia || "padrao"}`]: !0
       }))
     };
   }
 });
-function Pe(e, t, n, i, c, p) {
-  return o(), s("h3", {
-    class: T(["boxData padrao", e.classes])
-  }, l(e.dataNumero), 3);
+function qe(e, t, s, o, n, d) {
+  return a(), i("h3", {
+    class: q(["boxData padrao", e.classes])
+  }, c(e.dataNumero), 3);
 }
-const ke = /* @__PURE__ */ m(De, [["render", Pe], ["__scopeId", "data-v-385cc692"]]), Ie = v({
+const Ie = /* @__PURE__ */ m(De, [["render", qe], ["__scopeId", "data-v-385cc692"]]), ze = p({
   name: "SeparadorPeriodo",
   props: {
     dataSeparador: {
@@ -320,25 +325,25 @@ const ke = /* @__PURE__ */ m(De, [["render", Pe], ["__scopeId", "data-v-385cc692
       type: Date
     }
   },
-  components: { BoxData: ke },
+  components: { BoxData: Ie },
   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: (i) => t[i] };
+    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: (o) => t[o] };
   }
 });
-const ze = { class: "separadorPeriodo" }, Be = { class: "areaData" }, Oe = { class: "titulo" };
-function je(e, t, n, i, c, p) {
-  const r = d("BoxData");
-  return o(), s("div", ze, [
+const Ae = { class: "separadorPeriodo" }, Be = { class: "areaData" }, Oe = { class: "titulo" };
+function je(e, t, s, o, n, d) {
+  const r = l("BoxData");
+  return a(), i("div", Ae, [
     u("div", Be, [
       _(r, {
         dataNumero: e.dataSeparador.getDate()
       }, null, 8, ["dataNumero"])
     ]),
-    u("h3", Oe, l(e.mesCorrente(e.dataSeparador.getMonth())) + " de " + l(e.dataSeparador.getFullYear()), 1)
+    u("h3", Oe, c(e.mesCorrente(e.dataSeparador.getMonth())) + " de " + c(e.dataSeparador.getFullYear()), 1)
   ]);
 }
-const Ae = /* @__PURE__ */ m(Ie, [["render", je]]), He = v({
+const He = /* @__PURE__ */ m(ze, [["render", je]]), Re = p({
   name: "Avatar Timeline",
   props: {
     imagem: {
@@ -349,23 +354,23 @@ const Ae = /* @__PURE__ */ m(Ie, [["render", je]]), He = v({
     }
   }
 });
-const Re = { class: "avatar" }, Fe = ["src"], Me = {
+const Me = { class: "avatar" }, we = ["src"], Ne = {
   key: 1,
   class: "material-symbols-outlined"
-}, Ne = {
+}, Ve = {
   key: 2,
   class: "material-symbols-outlined"
 };
-function we(e, t, n, i, c, p) {
-  return o(), s("div", Re, [
-    e.imagem ? (o(), s("img", {
+function Fe(e, t, s, o, n, d) {
+  return a(), i("div", Me, [
+    e.imagem ? (a(), i("img", {
       key: 0,
       src: e.imagem
-    }, null, 8, Fe)) : e.icone ? (o(), s("span", Me, l(e.icone), 1)) : (o(), s("span", Ne, " person "))
+    }, null, 8, we)) : e.icone ? (a(), i("span", Ne, c(e.icone), 1)) : (a(), i("span", Ve, " person "))
   ]);
 }
-const Ve = /* @__PURE__ */ m(He, [["render", we], ["__scopeId", "data-v-bd3d61f3"]]), Le = v({
-  components: { AvatarTimeline: Ve },
+const Le = /* @__PURE__ */ m(Re, [["render", Fe], ["__scopeId", "data-v-bd3d61f3"]]), Je = p({
+  components: { AvatarTimeline: Le },
   props: {
     imagemPerfil: {
       type: String
@@ -383,30 +388,30 @@ const Ve = /* @__PURE__ */ m(He, [["render", we], ["__scopeId", "data-v-bd3d61f3
   },
   setup(e) {
     return e = S(e), {
-      classes: b(() => ({
+      classes: E(() => ({
         "formato-reduzido": e.formatoReduzido,
         "formato-normal": !e.formatoReduzido
       }))
     };
   }
 });
-const Je = { class: "nome" };
-function Ye(e, t, n, i, c, p) {
-  const r = d("AvatarTimeline");
-  return o(), s("section", {
-    class: T(["perfilTimeline", e.classes])
+const Ye = { class: "nome" };
+function Ge(e, t, s, o, n, d) {
+  const r = l("AvatarTimeline");
+  return a(), i("section", {
+    class: q(["perfilTimeline", e.classes])
   }, [
-    e.imagemPerfil ? (o(), y(r, {
+    e.imagemPerfil ? (a(), C(r, {
       key: 0,
       imagem: e.imagemPerfil
-    }, null, 8, ["imagem"])) : e.iconePerfil ? (o(), y(r, {
+    }, null, 8, ["imagem"])) : e.iconePerfil ? (a(), C(r, {
       key: 1,
       icone: e.iconePerfil
-    }, null, 8, ["icone"])) : E("", !0),
-    u("h2", Je, l(e.nomePerfil), 1)
+    }, null, 8, ["icone"])) : b("", !0),
+    u("h2", Ye, c(e.nomePerfil), 1)
   ], 2);
 }
-const Y = /* @__PURE__ */ m(Le, [["render", Ye]]), Ge = v({
+const K = /* @__PURE__ */ m(Je, [["render", Ge]]), Ke = p({
   props: {
     perfilTimeline: {
       required: !1,
@@ -414,349 +419,355 @@ const Y = /* @__PURE__ */ m(Le, [["render", Ye]]), Ge = v({
     },
     eventosTimeline: {
       required: !0,
-      type: Object
+      type: Array
     }
   },
   components: {
-    PerfilTimeline: Y,
-    SeparadorPeriodo: Ae,
-    EventoTimeline: J
+    PerfilTimeline: K,
+    SeparadorPeriodo: He,
+    EventoTimeline: G
   },
-  setup(e) {
-    const t = S(
-      e.eventosTimeline
-    );
-    let n = S(t);
-    function i() {
-      n = t;
-      const a = r(n);
-      n.map((f) => (a[0] === f ? (f.atual = !0, f.scroll = !0, h()) : (f.atual = !1, f.scroll = !1), {
-        evento: f
-      }));
+  emits: {
+    eventoClick: (e) => !0
+  },
+  setup(e, { emit: t }) {
+    const s = (v) => {
+      t("eventoClick", v);
+    }, o = S(e.eventosTimeline);
+    let n = S(o);
+    function d() {
+      const v = y(o);
+      o.forEach((h) => {
+        const g = v.length > 0 && v[0] === h;
+        h.atual = g, h.scroll = g;
+      }), I();
     }
-    const c = () => {
-      setInterval(i, 6e4);
-    }, p = (a, f) => {
-      const g = a.getDay() === f.getDay(), q = a.getMonth() === f.getMonth(), C = a.getFullYear() === f.getFullYear();
-      return g && q && C;
-    }, r = (a) => {
-      if (a) {
-        const f = Date.now();
-        let g = null, q = [];
-        for (const C of a) {
-          const D = C.data.getTime();
-          if (C.status === "planejado" || C.status === "atrasado") {
-            const I = Math.abs(f - C.data.getTime());
-            if (g === null || I < g && D <= f)
-              g = I, q.length = 0;
-            else if (I > g)
+    const r = () => {
+      setInterval(d, 6e4);
+    }, f = (v, h) => {
+      const g = v.getDay() === h.getDay(), T = v.getMonth() === h.getMonth(), k = v.getFullYear() === h.getFullYear();
+      return g && T && k;
+    }, y = (v) => {
+      if (v) {
+        const h = Date.now();
+        let g = null, T = [];
+        for (const k of v) {
+          const P = k.data.getTime();
+          if (k.status === "planejado" || k.status === "atrasado") {
+            const A = Math.abs(h - k.data.getTime());
+            if (g === null || A < g && P <= h)
+              g = A, T.length = 0;
+            else if (A > g)
               continue;
-            q.push(C);
+            T.push(k);
           }
         }
-        return q;
+        return T;
       } else
         return [];
-    }, $ = b(() => {
-      c();
-      const a = n.sort(
-        (f, g) => f.data.getTime() - g.data.getTime()
-      );
-      if (a) {
-        let f = [], g = null, q = 0, C;
-        for (const D of a) {
-          const I = /* @__PURE__ */ new Date(), O = D.data;
-          C = D.status;
-          const K = D.tolerancia * 60 * 1e3;
-          C === "planejado" && O.getTime() + K < I.getTime() && (D.status = "atrasado"), (!g || !p(g, O)) && (g = O, f.push({
+    }, $ = E(() => {
+      r();
+      const v = n.sort((h, g) => h.data.getTime() - g.data.getTime());
+      if (v) {
+        let h = [], g = null, T = 0, k;
+        for (const P of v) {
+          const A = /* @__PURE__ */ new Date(), j = P.data;
+          k = P.status;
+          const U = P.tolerancia * 60 * 1e3;
+          k === "planejado" && j.getTime() + U < A.getTime() && (P.status = "atrasado"), (!g || !f(g, j)) && (g = j, h.push({
             tipo: "dia",
-            valor: D.data,
-            key: ++q
-          })), f.push({
+            valor: P.data,
+            key: ++T
+          })), h.push({
             tipo: "evento",
-            valor: D,
-            key: ++q
+            valor: P,
+            key: ++T
           });
         }
-        return f;
+        return h;
       } else
         return [];
-    }), h = () => {
-      const a = document.querySelector(".atual");
-      a == null || a.scrollIntoView({
+    }), I = () => {
+      const v = document.querySelector(".atual");
+      !v || !v.scrollIntoView || v.scrollIntoView({
         behavior: "smooth",
         block: "center"
       });
     };
-    return i(), {
+    return d(), {
       eventosPorTipo: $,
-      scrollParaItemAtual: h
-      // clicar,
+      scrollParaItemAtual: I,
+      emitirEventoClick: s
     };
   },
   mounted() {
     this.scrollParaItemAtual();
   }
 });
-const Ke = { class: "areaTimeline" }, Qe = { class: "timeline" };
-function Ue(e, t, n, i, c, p) {
-  const r = d("PerfilTimeline"), $ = d("SeparadorPeriodo"), h = d("EventoTimeline");
-  return o(), s("div", Ke, [
-    e.perfilTimeline ? (o(), y(r, {
+const Qe = { class: "areaTimeline" }, Ue = { class: "timeline" };
+function We(e, t, s, o, n, d) {
+  const r = l("PerfilTimeline"), f = l("SeparadorPeriodo"), y = l("EventoTimeline");
+  return a(), i("div", Qe, [
+    e.perfilTimeline ? (a(), C(r, {
       key: 0,
       nomePerfil: e.perfilTimeline.nome,
       imagemPerfil: e.perfilTimeline.imagem,
-      iconePerfil: e.perfilTimeline.icone
-    }, null, 8, ["nomePerfil", "imagemPerfil", "iconePerfil"])) : E("", !0),
-    u("section", Qe, [
-      (o(!0), s(M, null, N(e.eventosPorTipo, (a) => (o(), s("div", {
-        key: a.key
+      iconePerfil: e.perfilTimeline.icone,
+      "data-testid": "perfilTimeline"
+    }, null, 8, ["nomePerfil", "imagemPerfil", "iconePerfil"])) : b("", !0),
+    u("section", Ue, [
+      (a(!0), i(V, null, F(e.eventosPorTipo, ($, I) => (a(), i("div", {
+        key: $.key
       }, [
-        a.tipo === "dia" ? (o(), y($, {
+        $.tipo === "dia" ? (a(), C(f, {
           key: 0,
-          dataSeparador: a.valor
-        }, null, 8, ["dataSeparador"])) : E("", !0),
-        a.tipo === "evento" ? (o(), y(h, {
+          dataSeparador: $.valor,
+          "data-testid": `evento-timeline-${I}`
+        }, null, 8, ["dataSeparador", "data-testid"])) : b("", !0),
+        $.tipo === "evento" ? (a(), C(y, {
           key: 1,
-          status: a.valor.status,
-          criticidade: a.valor.criticidade,
-          previsto: a.valor.previsto,
-          realizado: a.valor.realizado,
-          categoria: a.valor.categoria,
-          titulo: a.valor.titulo,
-          subtitulo: a.valor.subtitulo,
-          destaque: a.valor.destaque,
-          ehAtual: a.valor.atual,
-          aoClicar: () => {
-            a && a.valor && a.valor.aoClicar && a.valor.aoClicar(a.valor);
-          }
-        }, null, 8, ["status", "criticidade", "previsto", "realizado", "categoria", "titulo", "subtitulo", "destaque", "ehAtual", "aoClicar"])) : E("", !0)
+          status: $.valor.status,
+          criticidade: $.valor.criticidade,
+          previstoPara: $.valor.previstoPara,
+          "realizado-em": $.valor.realizado,
+          categoria: $.valor.categoria,
+          titulo: $.valor.titulo,
+          subtitulo: $.valor.subtitulo,
+          "texto-destaque": $.valor.destaque,
+          ehAtual: $.valor.atual,
+          onClick: (v) => e.emitirEventoClick($.valor),
+          "data-testid": `evento-timeline-${I}`
+        }, null, 8, ["status", "criticidade", "previstoPara", "realizado-em", "categoria", "titulo", "subtitulo", "texto-destaque", "ehAtual", "onClick", "data-testid"])) : b("", !0)
       ]))), 128))
     ])
   ]);
 }
-const We = /* @__PURE__ */ m(Ge, [["render", Ue]]), Xe = v({
+const Xe = /* @__PURE__ */ m(Ke, [["render", We]]), Ze = p({
   name: "Botao",
   props: {
     titulo: {
-      type: String
+      type: String,
+      default: ""
     },
     icone: {
       type: String
     },
     aparencia: {
-      type: String
+      type: String,
+      default: "outline"
     },
     tamanho: {
-      type: String
-    },
-    aoClicar: {
-      required: !1,
-      type: Function
+      type: String,
+      default: "medio"
     }
   },
-  setup(e) {
-    return e = S(e), {
-      classes: b(() => ({
-        [`${e.aparencia || "outline"}`]: !0,
-        [`${e.tamanho || "medio"}`]: !0
-      }))
+  emits: {
+    click: (e) => !0
+  },
+  setup(e, { emit: t }) {
+    e = S(e);
+    const s = (n) => {
+      t("click", n);
+    }, o = E(() => ({
+      [`${e.aparencia}`]: !0,
+      [`${e.tamanho}`]: !0
+    }));
+    return {
+      handleClick: s,
+      classes: o
     };
   }
 });
-const Ze = ["onclick"], xe = {
+const xe = {
   key: 0,
   class: "material-symbols-outlined"
 };
-function eo(e, t, n, i, c, p) {
-  return o(), s("button", {
-    class: T(["btn", e.classes]),
-    onclick: e.aoClicar
+function et(e, t, s, o, n, d) {
+  return a(), i("button", {
+    class: "btn",
+    "data-testid": "botao",
+    onClick: t[0] || (t[0] = (...r) => e.handleClick && e.handleClick(...r))
   }, [
-    z(e.$slots, "default", {}, () => [
-      e.icone ? (o(), s("span", xe, l(e.icone), 1)) : E("", !0),
-      A(" " + l(e.titulo), 1)
+    B(e.$slots, "default", {}, () => [
+      e.icone ? (a(), i("span", xe, c(e.icone), 1)) : b("", !0),
+      R(" " + c(e.titulo), 1)
     ], !0)
-  ], 10, Ze);
+  ]);
 }
-const B = /* @__PURE__ */ m(Xe, [["render", eo], ["__scopeId", "data-v-e91d41fc"]]), oo = v({
-  components: { Botao: B, PerfilTimeline: Y, IconeCategoria: w, Hora: L },
+const O = /* @__PURE__ */ m(Ze, [["render", et], ["__scopeId", "data-v-ce25287c"]]), tt = p({
+  components: { Botao: O, PerfilTimeline: K, IconeCategoria: L, Hora: Y },
   name: "CabecalhoEventoDetalhado",
   props: {
-    perfilEvento: {
+    perfil: {
       required: !0,
       type: Object
     },
-    dadosEvento: {
+    evento: {
       required: !0,
       type: Object
-    },
-    aoClicar: {
-      required: !1,
-      type: Function
     }
   },
   setup(e) {
     return {};
   }
 });
-const G = (e) => (H("data-v-e8d44815"), e = e(), R(), e), to = {
+const Q = (e) => (M("data-v-aa43d357"), e = e(), w(), e), at = {
   key: 1,
   class: "criticidade"
-}, ao = { class: "titulo" }, no = { class: "dataHora" }, so = ["onclick"], ro = /* @__PURE__ */ G(() => /* @__PURE__ */ u("span", { class: "material-symbols-outlined" }, " calendar_month ", -1)), io = { class: "horaEvento" }, co = {
+}, ot = { class: "titulo" }, nt = { class: "dataHora" }, st = { class: "box" }, it = /* @__PURE__ */ Q(() => /* @__PURE__ */ u("span", { class: "material-symbols-outlined" }, " calendar_month ", -1)), rt = { class: "horaEvento" }, ct = {
   key: 0,
   class: "horaRealizada texto-grande"
-}, lo = {
+}, lt = {
   key: 1,
   class: "horaPlanejada texto-pequeno"
-}, uo = {
+}, dt = {
   key: 2,
   class: "horaRealizada texto-grande"
-}, _o = ["onclick"], po = /* @__PURE__ */ G(() => /* @__PURE__ */ u("span", { class: "material-symbols-outlined" }, " schedule ", -1)), vo = { class: "horaEvento" };
-function mo(e, t, n, i, c, p) {
-  const r = d("PerfilTimeline"), $ = d("IconeCategoria"), h = d("Hora");
-  return o(), s("section", {
-    class: T(["cabecalho-evento", ["criticidade-" + e.dadosEvento.criticidade]])
+}, ut = { class: "box" }, _t = /* @__PURE__ */ Q(() => /* @__PURE__ */ u("span", { class: "material-symbols-outlined" }, " schedule ", -1)), pt = { class: "horaEvento" };
+function mt(e, t, s, o, n, d) {
+  const r = l("PerfilTimeline"), f = l("IconeCategoria"), y = l("Hora");
+  return a(), i("section", {
+    class: q(["cabecalho-evento", ["criticidade-" + e.evento.criticidade]])
   }, [
-    e.perfilEvento ? (o(), y(r, {
+    e.perfil ? (a(), C(r, {
       key: 0,
-      nomePerfil: e.perfilEvento.nome,
-      imagemPerfil: e.perfilEvento.imagem,
-      iconePerfil: e.perfilEvento.icone,
+      nomePerfil: e.perfil.nome,
+      imagemPerfil: e.perfil.imagem,
+      iconePerfil: e.perfil.icone,
       formatoReduzido: !0
-    }, null, 8, ["nomePerfil", "imagemPerfil", "iconePerfil"])) : E("", !0),
-    e.dadosEvento.criticidade !== "baixa" ? (o(), s("div", to, " Criticidade: " + l(e.dadosEvento.criticidade), 1)) : E("", !0),
-    u("div", ao, [
-      _($, {
-        iconeCategoria: e.dadosEvento.categoria.icone,
-        categoria: e.dadosEvento.categoria.nome
+    }, null, 8, ["nomePerfil", "imagemPerfil", "iconePerfil"])) : b("", !0),
+    e.evento.criticidade !== "baixa" ? (a(), i("div", at, " Criticidade: " + c(e.evento.criticidade), 1)) : b("", !0),
+    u("div", ot, [
+      _(f, {
+        iconeCategoria: e.evento.categoria.icone,
+        categoria: e.evento.categoria.nome
       }, null, 8, ["iconeCategoria", "categoria"]),
-      u("h1", null, l(e.dadosEvento.titulo), 1)
+      u("h1", null, c(e.evento.titulo), 1)
     ]),
-    u("div", no, [
-      u("div", {
-        onclick: e.aoClicar,
-        class: "box"
-      }, [
-        ro,
-        u("div", io, [
-          e.dadosEvento.realizado ? (o(), s("div", co, l(e.dadosEvento.realizado.toLocaleDateString()), 1)) : E("", !0),
-          e.dadosEvento.realizado ? (o(), s("div", lo, l(e.dadosEvento.realizado.toLocaleDateString()), 1)) : (o(), s("div", uo, l(e.dadosEvento.previsto.toLocaleDateString()), 1))
+    u("div", nt, [
+      u("div", st, [
+        it,
+        u("div", rt, [
+          e.evento.realizado ? (a(), i("div", ct, c(e.evento.realizado.toLocaleDateString()), 1)) : b("", !0),
+          e.evento.realizado ? (a(), i("div", lt, c(e.evento.realizado.toLocaleDateString()), 1)) : (a(), i("div", dt, c(e.evento.previstoPara.toLocaleDateString()), 1))
         ])
-      ], 8, so),
-      u("div", {
-        onclick: e.aoClicar,
-        class: "box"
-      }, [
-        po,
-        u("div", vo, [
-          e.dadosEvento.realizado ? (o(), y(h, {
+      ]),
+      u("div", ut, [
+        _t,
+        u("div", pt, [
+          e.evento.realizado ? (a(), C(y, {
             key: 0,
             class: "horaRealizada texto-grande",
-            hora: e.dadosEvento.realizado
-          }, null, 8, ["hora"])) : E("", !0),
-          e.dadosEvento.realizado ? (o(), y(h, {
+            hora: e.evento.realizado
+          }, null, 8, ["hora"])) : b("", !0),
+          e.evento.realizado ? (a(), C(y, {
             key: 1,
             class: "horaPlanejada texto-pequeno",
-            hora: e.dadosEvento.previsto
-          }, null, 8, ["hora"])) : (o(), y(h, {
+            hora: e.evento.previstoPara
+          }, null, 8, ["hora"])) : (a(), C(y, {
             key: 2,
             class: "horaRealizada texto-grande",
-            hora: e.dadosEvento.previsto
+            hora: e.evento.previstoPara
           }, null, 8, ["hora"]))
         ])
-      ], 8, _o)
+      ])
     ])
   ], 2);
 }
-const fo = /* @__PURE__ */ m(oo, [["render", mo], ["__scopeId", "data-v-e8d44815"]]), $o = v({
-  components: { Botao: B },
+const vt = /* @__PURE__ */ m(tt, [["render", mt], ["__scopeId", "data-v-aa43d357"]]), ft = p({
+  components: { Botao: O },
   name: "Observacoes",
   props: {
     tituloBotao: {
       type: String
     },
-    aoClicar: {
-      required: !1,
-      type: Function
-    },
     observacoes: {
       required: !0,
       type: Object
     }
   },
-  setup(e) {
-    return e.observacoes.sort(
-      (t, n) => n.criadaEm.getTime() - t.criadaEm.getTime()
-    ), e = S(e), {};
+  emits: {
+    adicionarClick: (e) => !0
+  },
+  setup(e, { emit: t }) {
+    const s = (o) => {
+      t("adicionarClick", o);
+    };
+    return e.observacoes.sort((o, n) => n.criadaEm.getTime() - o.criadaEm.getTime()), e = S(e), { emitirAdicionarClick: s };
   }
 });
-const ho = (e) => (H("data-v-e90a0cb4"), e = e(), R(), e), go = { class: "box box-observacoes" }, yo = /* @__PURE__ */ ho(() => /* @__PURE__ */ u("h3", null, "Observações:", -1)), bo = { class: "lista-obs" }, Eo = { class: "texto" }, So = { class: "autor" };
-function Co(e, t, n, i, c, p) {
-  const r = d("Botao");
-  return o(), s("section", go, [
-    yo,
-    u("ul", bo, [
-      (o(!0), s(M, null, N(e.observacoes, ($, h) => (o(), s("li", {
-        key: h,
+const $t = (e) => (M("data-v-2fd919a9"), e = e(), w(), e), ht = { class: "box box-observacoes" }, gt = /* @__PURE__ */ $t(() => /* @__PURE__ */ u("h3", null, "Observações:", -1)), yt = { class: "lista-obs" }, Ct = ["data-testid"], bt = { class: "texto" }, kt = { class: "autor" };
+function St(e, t, s, o, n, d) {
+  const r = l("Botao");
+  return a(), i("section", ht, [
+    gt,
+    u("ul", yt, [
+      (a(!0), i(V, null, F(e.observacoes, (f, y) => (a(), i("li", {
+        "data-testid": `observacao-${y}`,
+        key: y,
         class: "lista-item"
       }, [
-        u("p", Eo, l($.mensagem), 1),
-        u("div", So, l($.autor.nome) + " em " + l($.criadaEm.toLocaleDateString()) + " às " + l($.criadaEm.getHours()) + ":" + l($.criadaEm.getMinutes().toString().padStart(2, "0")), 1)
-      ]))), 128))
+        u("p", bt, c(f.mensagem), 1),
+        u("div", kt, c(f.autor.nome) + " em " + c(f.criadaEm.toLocaleDateString()) + " às " + c(f.criadaEm.getHours()) + ":" + c(f.criadaEm.getMinutes().toString().padStart(2, "0")), 1)
+      ], 8, Ct))), 128))
     ]),
     _(r, {
       titulo: e.tituloBotao,
-      aoClicar: e.aoClicar,
+      "data-testid": "botao-adicionar",
       icone: "add",
       aparencia: "preenchido",
-      tamanho: "pequeno"
-    }, null, 8, ["titulo", "aoClicar"])
+      tamanho: "pequeno",
+      onClick: e.emitirAdicionarClick
+    }, null, 8, ["titulo", "onClick"])
   ]);
 }
-const To = /* @__PURE__ */ m($o, [["render", Co], ["__scopeId", "data-v-e90a0cb4"]]), qo = v({
-  components: { Botao: B, IconeStatus: V },
+const Et = /* @__PURE__ */ m(ft, [["render", St], ["__scopeId", "data-v-2fd919a9"]]), Tt = p({
+  components: { Botao: O, IconeStatus: J },
   name: "BotaoStatus",
   props: {
     aparencia: {
       type: String
     },
     status: {
-      required: !0,
-      type: String
-    },
-    aoClicar: {
-      required: !1,
-      type: Function
+      type: String,
+      default: "planejado"
     }
   },
-  setup(e) {
-    return e = S(e), {
-      classes: b(() => ({
-        [`${e.status || "planejado"}`]: !0
-      }))
+  emits: {
+    click: (e) => !0
+  },
+  setup(e, { emit: t }) {
+    e = S(e);
+    const s = E(() => ({
+      [`${e.status}`]: !0
+    }));
+    return {
+      emitirClick: (n) => {
+        t("click", n);
+      },
+      classes: s
     };
   }
 });
-function Do(e, t, n, i, c, p) {
-  const r = d("IconeStatus"), $ = d("Botao");
-  return o(), y($, {
+function Pt(e, t, s, o, n, d) {
+  const r = l("IconeStatus"), f = l("Botao");
+  return a(), C(f, {
     aparencia: e.aparencia,
-    class: T(e.classes),
-    aoClicar: e.aoClicar
+    class: q(e.classes),
+    onClick: e.emitirClick
   }, {
-    default: P(() => [
+    default: D(() => [
       _(r, {
         class: "icone",
         status: e.status
       }, null, 8, ["status"]),
-      A(" " + l(e.status), 1)
+      R(" " + c(e.status), 1)
     ]),
     _: 1
-  }, 8, ["aparencia", "class", "aoClicar"]);
+  }, 8, ["aparencia", "class", "onClick"]);
 }
-const Po = /* @__PURE__ */ m(qo, [["render", Do], ["__scopeId", "data-v-dc6d6557"]]), ko = v({
-  components: { BotaoStatus: Po },
+const Dt = /* @__PURE__ */ m(Tt, [["render", Pt], ["__scopeId", "data-v-3eb00cbd"]]), qt = p({
+  components: { BotaoStatus: Dt },
   name: "StatusEvento",
   props: {
     aparencia: {
@@ -765,221 +776,259 @@ const Po = /* @__PURE__ */ m(qo, [["render", Do], ["__scopeId", "data-v-dc6d6557
     status: {
       required: !0,
       type: String
-    },
-    aoClicar: {
-      required: !1,
-      type: Function
     }
   },
-  setup(e) {
-    return e = S(e), {};
+  emits: {
+    editarClick: (e) => !0
+  },
+  setup(e, { emit: t }) {
+    const s = (o) => {
+      t("editarClick", o);
+    };
+    return e = S(e), {
+      handleEditarClick: s
+    };
   }
 });
-const Io = (e) => (H("data-v-69bc6463"), e = e(), R(), e), zo = { class: "box box-status" }, Bo = /* @__PURE__ */ Io(() => /* @__PURE__ */ u("h3", null, "Status:", -1));
-function Oo(e, t, n, i, c, p) {
-  const r = d("BotaoStatus");
-  return o(), s("section", zo, [
-    Bo,
+const It = (e) => (M("data-v-c7bc7440"), e = e(), w(), e), zt = { class: "box box-status" }, At = /* @__PURE__ */ It(() => /* @__PURE__ */ u("h3", null, "Status:", -1));
+function Bt(e, t, s, o, n, d) {
+  const r = l("BotaoStatus");
+  return a(), i("section", zt, [
+    At,
     _(r, {
       aparencia: e.aparencia,
-      aoClicar: e.aoClicar,
-      status: e.status
-    }, null, 8, ["aparencia", "aoClicar", "status"])
+      status: e.status,
+      "data-testid": "status-evento",
+      onClick: e.handleEditarClick
+    }, null, 8, ["aparencia", "status", "onClick"])
   ]);
 }
-const jo = /* @__PURE__ */ m(ko, [["render", Oo], ["__scopeId", "data-v-69bc6463"]]), Ao = v({
+const Ot = /* @__PURE__ */ m(qt, [["render", Bt], ["__scopeId", "data-v-c7bc7440"]]), jt = p({
+  name: "EventoDetalhado",
   props: {
-    perfilEvento: {
+    perfil: {
       required: !0,
       type: Object
     },
-    dadosEvento: {
+    evento: {
       required: !0,
       type: Object
     }
   },
-  components: { CabecalhoEventoDetalhado: fo, Observacoes: To, StatusEvento: jo },
-  setup(e) {
-    return {};
+  components: { CabecalhoEventoDetalhado: vt, Observacoes: Et, StatusEvento: Ot },
+  emits: {
+    statusEditarClick: (e) => !0,
+    observacaoAdicionarClick: (e) => !0
+  },
+  setup(e, { emit: t }) {
+    return {
+      handleEditarClick: (n) => {
+        t("statusEditarClick", n);
+      },
+      handleAdicionarObservacaoClick: (n) => {
+        t("observacaoAdicionarClick", n);
+      }
+    };
   }
 });
-const Ho = { class: "evento" }, Ro = { class: "descricao" };
-function Fo(e, t, n, i, c, p) {
-  const r = d("CabecalhoEventoDetalhado"), $ = d("Observacoes"), h = d("StatusEvento");
-  return o(), s("div", Ho, [
-    _(k, {
+const Ht = {
+  class: "evento",
+  "data-testid": "evento-detalhado"
+}, Rt = { class: "descricao" };
+function Mt(e, t, s, o, n, d) {
+  const r = l("CabecalhoEventoDetalhado"), f = l("Observacoes"), y = l("StatusEvento");
+  return a(), i("div", Ht, [
+    _(z, {
       name: "fadeBaixo",
       mode: "out-in",
       appear: ""
     }, {
-      default: P(() => [
+      default: D(() => [
         _(r, {
-          perfilEvento: e.perfilEvento,
-          dadosEvento: e.dadosEvento,
-          aoClicar: e.dadosEvento.aoClicar
-        }, null, 8, ["perfilEvento", "dadosEvento", "aoClicar"])
+          perfil: e.perfil,
+          evento: e.evento
+        }, null, 8, ["perfil", "evento"])
       ]),
       _: 1
     }),
-    _(k, {
+    _(z, {
       name: "fadeBaixo",
       mode: "out-in",
       appear: ""
     }, {
-      default: P(() => [
-        u("section", Ro, [
-          z(e.$slots, "descricao", {}, () => [
-            A(l(e.dadosEvento.subtitulo), 1)
+      default: D(() => [
+        u("section", Rt, [
+          B(e.$slots, "descricao", {}, () => [
+            R(c(e.evento.subtitulo), 1)
           ])
         ])
       ]),
       _: 3
     }),
-    _(k, {
+    _(z, {
       name: "fadeBaixo",
       mode: "out-in",
       appear: ""
     }, {
-      default: P(() => [
-        _($, {
-          observacoes: e.dadosEvento.observacoes,
+      default: D(() => [
+        _(f, {
+          observacoes: e.evento.observacoes,
           tituloBotao: "Inserir observação",
-          aoClicar: e.dadosEvento.aoClicar
-        }, null, 8, ["observacoes", "aoClicar"])
+          onAdicionarClick: e.handleAdicionarObservacaoClick
+        }, null, 8, ["observacoes", "onAdicionarClick"])
       ]),
       _: 1
     }),
-    _(k, {
+    _(z, {
       name: "fadeBaixo",
       mode: "out-in",
       appear: ""
     }, {
-      default: P(() => [
-        _(h, {
+      default: D(() => [
+        _(y, {
           aparencia: "preenchido",
-          aoClicar: e.dadosEvento.aoClicar,
-          status: e.dadosEvento.status
-        }, null, 8, ["aoClicar", "status"])
+          status: e.evento.status,
+          onEditarClick: e.handleEditarClick
+        }, null, 8, ["status", "onEditarClick"])
       ]),
       _: 1
     })
   ]);
 }
-const Mo = /* @__PURE__ */ m(Ao, [["render", Fo]]), No = v({
-  components: { Botao: B },
+const wt = /* @__PURE__ */ m(jt, [["render", Mt]]), Nt = p({
   name: "AreaSalvamento",
-  props: {
-    aoClicar: {
-      required: !1,
-      type: Function
-    }
+  components: { Botao: O },
+  emits: {
+    salvarClick: (e) => !0,
+    cancelarClick: (e) => !0
   },
-  setup(e) {
-    return {};
+  setup(e, { emit: t }) {
+    return {
+      emitirSalvarClick: (n) => {
+        t("salvarClick", n);
+      },
+      emitirCancelarClick: (n) => {
+        t("cancelarClick", n);
+      }
+    };
   }
 });
-const wo = { class: "area-salvamento" };
-function Vo(e, t, n, i, c, p) {
-  const r = d("Botao");
-  return o(), s("section", wo, [
-    z(e.$slots, "default", {}, void 0, !0),
+const Vt = {
+  class: "area-salvamento",
+  "data-testid": "area-salvamento"
+};
+function Ft(e, t, s, o, n, d) {
+  const r = l("Botao");
+  return a(), i("section", Vt, [
+    B(e.$slots, "default", {}, void 0, !0),
     _(r, {
+      "data-testid": "botao-salvar",
       aparencia: "preenchido",
       titulo: "Salvar",
       tamanho: "grande",
-      aoClicar: e.aoClicar
-    }, null, 8, ["aoClicar"]),
+      onClick: e.emitirSalvarClick
+    }, null, 8, ["onClick"]),
     _(r, {
+      "data-testid": "botao-cancelar",
       aparencia: "vazio",
       titulo: "Cancelar",
       tamanho: "pequeno",
-      aoClicar: e.aoClicar
-    }, null, 8, ["aoClicar"])
+      onClick: e.emitirCancelarClick
+    }, null, 8, ["onClick"])
   ]);
 }
-const Lo = /* @__PURE__ */ m(No, [["render", Vo], ["__scopeId", "data-v-5dd5054f"]]), Jo = v({
+const Lt = /* @__PURE__ */ m(Nt, [["render", Ft], ["__scopeId", "data-v-a1900faf"]]), Jt = p({
   props: {
-    aoClicar: {
-      required: !1,
-      type: Function
-    },
     salvarVisivel: {
       type: Boolean
     }
   },
-  components: { AreaSalvamento: Lo },
-  setup(e) {
-    return e = S(e), {
-      classes: b(() => ({
-        visivel: e.salvarVisivel,
-        invisivel: !e.salvarVisivel
-      }))
+  components: { AreaSalvamento: Lt },
+  emits: {
+    salvarClick: (e) => !0,
+    cancelarClick: (e) => !0
+  },
+  setup(e, { emit: t }) {
+    return {
+      emitirSalvarClick: (n) => {
+        t("salvarClick", n);
+      },
+      emitirCancelarClick: (n) => {
+        t("cancelarClick", n);
+      }
+      // classes: computed(() => ({
+      //   visivel: props.salvarVisivel,
+      //   invisivel: !props.salvarVisivel,
+      // })),
     };
   }
 });
-const Yo = { class: "editar-evento" }, Go = { class: "area-conteudo" }, Ko = { class: "salvar" };
-function Qo(e, t, n, i, c, p) {
-  const r = d("AreaSalvamento");
-  return o(), s("div", Yo, [
-    _(k, {
+const Yt = {
+  class: "editar-evento",
+  "data-testid": "editar-evento"
+}, Gt = { class: "area-conteudo" }, Kt = { class: "salvar" };
+function Qt(e, t, s, o, n, d) {
+  const r = l("AreaSalvamento");
+  return a(), i("div", Yt, [
+    _(z, {
       name: "fadeTopo",
       mode: "out-in",
       appear: ""
     }, {
-      default: P(() => [
-        u("div", Go, [
-          z(e.$slots, "conteudo")
+      default: D(() => [
+        u("div", Gt, [
+          B(e.$slots, "conteudo")
         ])
       ]),
       _: 3
     }),
-    _(k, {
+    _(z, {
       name: "fadeBaixo",
       mode: "out-in",
       appear: ""
     }, {
-      default: P(() => [
-        u("div", Ko, [
+      default: D(() => [
+        u("div", Kt, [
           _(r, {
-            aoClicar: e.aoClicar,
-            class: T(e.classes)
+            onSalvarClick: e.emitirSalvarClick,
+            onCancelarClick: e.emitirCancelarClick
           }, {
-            default: P(() => [
-              z(e.$slots, "salvamento")
+            default: D(() => [
+              B(e.$slots, "salvamento")
             ]),
             _: 3
-          }, 8, ["aoClicar", "class"])
+          }, 8, ["onSalvarClick", "onCancelarClick"])
         ])
       ]),
       _: 3
     })
   ]);
 }
-const Uo = /* @__PURE__ */ m(Jo, [["render", Qo]]), Wo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Ut = /* @__PURE__ */ m(Jt, [["render", Qt]]), Wt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
-}, Symbol.toStringTag, { value: "Module" })), Xo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Symbol.toStringTag, { value: "Module" })), Xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
-}, Symbol.toStringTag, { value: "Module" })), F = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Symbol.toStringTag, { value: "Module" })), N = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  EditarEvento: Uo,
-  EventoDetalhado: Mo,
-  EventoTimeline: J,
-  Timeline: We,
-  Tipos: Wo,
-  TiposDetalhado: Xo
+  EditarEvento: Ut,
+  EventoDetalhado: wt,
+  EventoTimeline: G,
+  Timeline: Xe,
+  Tipos: Wt,
+  TiposDetalhado: Xt
 }, Symbol.toStringTag, { value: "Module" }));
-const xo = {
+const xt = {
   install(e, ...t) {
-    for (const n in F)
-      e.component(n, F[n]);
+    for (const s in N)
+      e.component(s, N[s]);
   }
 };
 export {
-  Uo as EditarEvento,
-  Mo as EventoDetalhado,
-  J as EventoTimeline,
-  We as Timeline,
-  Wo as Tipos,
-  Xo as TiposDetalhado,
-  xo as default
+  Ut as EditarEvento,
+  wt as EventoDetalhado,
+  G as EventoTimeline,
+  Xe as Timeline,
+  Wt as Tipos,
+  Xt as TiposDetalhado,
+  xt as default
 };