@devix-tecnologia/timeline-vue 1.2.0 → 1.3.0

package/dist/timeline-vue.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as d, reactive as P, computed as g, openBlock as a, createElementBlock as i, createElementVNode as T, normalizeClass as C, normalizeStyle as I, toDisplayString as v, resolveComponent as p, createVNode as h, createBlock as S, createCommentVNode as q, ref as B, Fragment as j, renderList as M } from "vue";
-const O = d({
+import { defineComponent as v, reactive as S, computed as b, openBlock as o, createElementBlock as s, createElementVNode as u, normalizeClass as T, normalizeStyle as O, 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 j, pushScopeId as H, popScopeId as R, withCtx as k, Transition as D } from "vue";
+const U = v({
   name: "Icone Categoria",
   props: {
     iconeCategoria: {
@@ -24,37 +24,37 @@ const O = d({
     }
   },
   setup(e) {
-    return e = P(e), {
-      classes: g(() => ({
+    return e = S(e), {
+      classes: b(() => ({
         "bg-escuro": e.escuro,
         "bg-claro": !e.escuro,
         [`borda-${e.tipo || "padrao"}`]: !0
       })),
-      style: g(() => ({
+      style: b(() => ({
         borderColor: e.borderColor,
         backgroundColor: e.backgroundColor
       }))
     };
   }
 });
-const _ = (e, o) => {
-  const r = e.__vccOpts || e;
-  for (const [s, l] of o)
-    r[s] = l;
-  return r;
-}, R = { class: "areaCategoria" }, N = ["alt"], F = { class: "material-symbols-outlined" };
-function w(e, o, r, s, l, c) {
-  return a(), i("div", R, [
-    T("div", {
-      class: C(["iconeCategoria", e.classes]),
-      style: I(e.style),
+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, [
+    u("div", {
+      class: T(["iconeCategoria", e.classes]),
+      style: O(e.style),
       alt: e.categoria
     }, [
-      T("span", F, v(e.iconeCategoria), 1)
-    ], 14, N)
+      u("span", Z, l(e.iconeCategoria), 1)
+    ], 14, X)
   ]);
 }
-const V = /* @__PURE__ */ _(O, [["render", w], ["__scopeId", "data-v-f922d1fe"]]), J = d({
+const w = /* @__PURE__ */ m(U, [["render", x], ["__scopeId", "data-v-f922d1fe"]]), ee = v({
   name: "Icone Status",
   props: {
     status: {
@@ -63,19 +63,19 @@ const V = /* @__PURE__ */ _(O, [["render", w], ["__scopeId", "data-v-f922d1fe"]]
     }
   },
   setup(e) {
-    return e = P(e), {
-      classes: g(() => ({
+    return e = S(e), {
+      classes: b(() => ({
         [`${e.status || "planejado"}`]: !0
       }))
     };
   }
 });
-function Y(e, o, r, s, l, c) {
-  return a(), i("div", {
-    class: C([e.classes, "iconeStatus"])
+function oe(e, t, n, i, c, p) {
+  return o(), s("div", {
+    class: T([e.classes, "iconeStatus"])
   }, null, 2);
 }
-const L = /* @__PURE__ */ _(J, [["render", Y], ["__scopeId", "data-v-61335255"]]), G = d({
+const V = /* @__PURE__ */ m(ee, [["render", oe], ["__scopeId", "data-v-61335255"]]), te = v({
   name: "Subtítulo Evento",
   props: {
     subtitulo: {
@@ -84,11 +84,11 @@ const L = /* @__PURE__ */ _(J, [["render", Y], ["__scopeId", "data-v-61335255"]]
     }
   }
 });
-const K = { class: "subtitulo" };
-function Q(e, o, r, s, l, c) {
-  return a(), i("h4", K, v(e.subtitulo), 1);
+const ae = { class: "subtitulo" };
+function ne(e, t, n, i, c, p) {
+  return o(), s("h4", ae, l(e.subtitulo), 1);
 }
-const U = /* @__PURE__ */ _(G, [["render", Q], ["__scopeId", "data-v-5f7c5673"]]), W = d({
+const se = /* @__PURE__ */ m(te, [["render", ne], ["__scopeId", "data-v-5f7c5673"]]), re = v({
   name: "Título Evento",
   props: {
     titulo: {
@@ -97,11 +97,11 @@ const U = /* @__PURE__ */ _(G, [["render", Q], ["__scopeId", "data-v-5f7c5673"]]
     }
   }
 });
-const X = { class: "titulo" };
-function Z(e, o, r, s, l, c) {
-  return a(), i("h3", X, v(e.titulo), 1);
+const ie = { class: "titulo" };
+function ce(e, t, n, i, c, p) {
+  return o(), s("h3", ie, l(e.titulo), 1);
 }
-const x = /* @__PURE__ */ _(W, [["render", Z], ["__scopeId", "data-v-7369e837"]]), ee = d({
+const le = /* @__PURE__ */ m(re, [["render", ce], ["__scopeId", "data-v-7369e837"]]), de = v({
   name: "Descrição Evento",
   props: {
     titulo: {
@@ -113,22 +113,22 @@ const x = /* @__PURE__ */ _(W, [["render", Z], ["__scopeId", "data-v-7369e837"]]
       type: String
     }
   },
-  components: { TituloEvento: x, SubtituloEvento: U }
+  components: { TituloEvento: le, SubtituloEvento: se }
 });
-function te(e, o, r, s, l, c) {
-  const u = p("TituloEvento"), b = p("SubtituloEvento");
-  return a(), i("div", {
+function ue(e, t, n, i, c, p) {
+  const r = d("TituloEvento"), $ = d("SubtituloEvento");
+  return o(), s("div", {
     class: "descricaoEvento",
-    style: I(`${e.subtitulo ? "" : "padding-top: 3.3rem"}`)
+    style: O(`${e.subtitulo ? "" : "padding-top: 3.3rem"}`)
   }, [
-    h(u, { titulo: e.titulo }, null, 8, ["titulo"]),
-    e.subtitulo ? (a(), S(b, {
+    _(r, { titulo: e.titulo }, null, 8, ["titulo"]),
+    e.subtitulo ? (o(), y($, {
       key: 0,
       subtitulo: e.subtitulo
-    }, null, 8, ["subtitulo"])) : q("", !0)
+    }, null, 8, ["subtitulo"])) : E("", !0)
   ], 4);
 }
-const oe = /* @__PURE__ */ _(ee, [["render", te], ["__scopeId", "data-v-171435d6"]]), ae = d({
+const _e = /* @__PURE__ */ m(de, [["render", ue], ["__scopeId", "data-v-171435d6"]]), pe = v({
   name: "Hora",
   props: {
     hora: {
@@ -146,19 +146,19 @@ const oe = /* @__PURE__ */ _(ee, [["render", te], ["__scopeId", "data-v-171435d6
   components: {},
   setup(e) {
     return {
-      horas: B(new Date(e.hora)),
-      classes: g(() => ({
+      horas: Q(new Date(e.hora)),
+      classes: b(() => ({
         [`hora-${e.aparencia || ""}`]: !0
       }))
     };
   }
 });
-function re(e, o, r, s, l, c) {
-  return a(), i("div", {
-    class: C(["hora", e.classes])
-  }, v(e.horas.getHours()) + ":" + v(e.horas.getMinutes().toString().padStart(2, "0")), 3);
+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);
 }
-const ne = /* @__PURE__ */ _(ae, [["render", re], ["__scopeId", "data-v-dacdabdc"]]), se = d({
+const L = /* @__PURE__ */ m(pe, [["render", ve], ["__scopeId", "data-v-dacdabdc"]]), me = v({
   name: "Hora Evento",
   props: {
     horaPrevista: {
@@ -170,27 +170,27 @@ const ne = /* @__PURE__ */ _(ae, [["render", re], ["__scopeId", "data-v-dacdabdc
       type: Date
     }
   },
-  components: { Hora: ne }
+  components: { Hora: L }
 });
-const ie = { class: "areaHora" }, le = { class: "horaEvento" };
-function ce(e, o, r, s, l, c) {
-  const u = p("Hora");
-  return a(), i("div", ie, [
-    T("div", le, [
-      e.horaRealizada ? (a(), S(u, {
+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, {
         key: 0,
         hora: e.horaRealizada,
         style: { "padding-top": "0.3rem" }
-      }, null, 8, ["hora"])) : q("", !0),
-      h(u, {
+      }, null, 8, ["hora"])) : E("", !0),
+      _(r, {
         hora: e.horaPrevista,
         aparencia: e.horaRealizada ? "riscada" : "padrao",
-        style: I(e.horaRealizada ? "" : "padding-top: 1.2rem")
+        style: O(e.horaRealizada ? "" : "padding-top: 1.2rem")
       }, null, 8, ["hora", "aparencia", "style"])
     ])
   ]);
 }
-const ue = /* @__PURE__ */ _(se, [["render", ce], ["__scopeId", "data-v-da519ace"]]), de = d({
+const ge = /* @__PURE__ */ m(me, [["render", he], ["__scopeId", "data-v-da519ace"]]), ye = v({
   name: "Destaque",
   props: {
     texto: {
@@ -198,11 +198,11 @@ const ue = /* @__PURE__ */ _(se, [["render", ce], ["__scopeId", "data-v-da519ace
     }
   }
 });
-const _e = { class: "destaqueEvento texto-pequeno" };
-function pe(e, o, r, s, l, c) {
-  return a(), i("div", _e, v(e.texto), 1);
+const be = { class: "destaqueEvento texto-pequeno" };
+function Ee(e, t, n, i, c, p) {
+  return o(), s("div", be, l(e.texto), 1);
 }
-const me = /* @__PURE__ */ _(de, [["render", pe], ["__scopeId", "data-v-c2f02de8"]]), ve = d({
+const Se = /* @__PURE__ */ m(ye, [["render", Ee], ["__scopeId", "data-v-c2f02de8"]]), Ce = v({
   name: "Evento Timeline",
   props: {
     status: {
@@ -247,48 +247,48 @@ const me = /* @__PURE__ */ _(de, [["render", pe], ["__scopeId", "data-v-c2f02de8
     }
   },
   components: {
-    IconeStatus: L,
-    IconeCategoria: V,
-    HoraEvento: ue,
-    DescricaoEvento: oe,
-    Destaque: me
+    IconeStatus: V,
+    IconeCategoria: w,
+    HoraEvento: ge,
+    DescricaoEvento: _e,
+    Destaque: Se
   },
   setup(e) {
     return {
-      eventoSelecionado: g(() => ({
+      eventoSelecionado: b(() => ({
         atual: e.ehAtual,
         padrao: e.ehAtual
       })),
-      clicavel: g(() => ({
+      clicavel: b(() => ({
         clicavel: e.aoClicar !== void 0
       }))
     };
   }
 });
-const fe = ["onclick"];
-function ge(e, o, r, s, l, c) {
-  const u = p("IconeStatus"), b = p("HoraEvento"), E = p("IconeCategoria"), t = p("DescricaoEvento"), n = p("Destaque");
-  return a(), i("article", {
-    class: C(["eventoTimeline", [e.status, "criticidade-" + e.criticidade, e.eventoSelecionado, e.clicavel]]),
+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
   }, [
-    h(u, { status: e.status }, null, 8, ["status"]),
-    h(b, {
+    _(r, { status: e.status }, null, 8, ["status"]),
+    _($, {
       horaPrevista: e.previsto,
       horaRealizada: e.realizado
     }, null, 8, ["horaPrevista", "horaRealizada"]),
-    h(E, {
+    _(h, {
       iconeCategoria: e.categoria.icone,
       categoria: e.categoria.nome
     }, null, 8, ["iconeCategoria", "categoria"]),
-    h(t, {
+    _(a, {
       titulo: e.titulo,
       subtitulo: e.subtitulo
     }, null, 8, ["titulo", "subtitulo"]),
-    h(n, { texto: e.destaque }, null, 8, ["texto"])
-  ], 10, fe);
+    _(f, { texto: e.destaque }, null, 8, ["texto"])
+  ], 10, Te);
 }
-const A = /* @__PURE__ */ _(ve, [["render", ge]]), ye = d({
+const J = /* @__PURE__ */ m(Ce, [["render", qe]]), Pe = v({
   name: "Box Data",
   props: {
     dataNumero: {
@@ -300,19 +300,19 @@ const A = /* @__PURE__ */ _(ve, [["render", ge]]), ye = d({
     }
   },
   setup(e) {
-    return e = P(e), {
-      classes: g(() => ({
+    return e = S(e), {
+      classes: b(() => ({
         [`${e.aparencia || "padrao"}`]: !0
       }))
     };
   }
 });
-function $e(e, o, r, s, l, c) {
-  return a(), i("h3", {
-    class: C(["boxData padrao", e.classes])
-  }, v(e.dataNumero), 3);
+function ke(e, t, n, i, c, p) {
+  return o(), s("h3", {
+    class: T(["boxData padrao", e.classes])
+  }, l(e.dataNumero), 3);
 }
-const he = /* @__PURE__ */ _(ye, [["render", $e], ["__scopeId", "data-v-385cc692"]]), be = d({
+const De = /* @__PURE__ */ m(Pe, [["render", ke], ["__scopeId", "data-v-385cc692"]]), Ie = v({
   name: "SeparadorPeriodo",
   props: {
     dataSeparador: {
@@ -320,25 +320,25 @@ const he = /* @__PURE__ */ _(ye, [["render", $e], ["__scopeId", "data-v-385cc692
       type: Date
     }
   },
-  components: { BoxData: he },
+  components: { BoxData: De },
   setup(e) {
-    const o = new Array(12);
-    return o[0] = "Janeiro", o[1] = "Fevereiro", o[2] = "Março", o[3] = "Abril", o[4] = "Maio", o[5] = "Junho", o[6] = "Julho", o[7] = "Agosto", o[8] = "Setembro", o[9] = "Outubro", o[10] = "Novembro", o[11] = "Dezembro", { mesCorrente: (s) => o[s] };
+    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] };
   }
 });
-const Se = { class: "separadorPeriodo" }, Te = { class: "areaData" }, Ee = { class: "titulo" };
-function qe(e, o, r, s, l, c) {
-  const u = p("BoxData");
-  return a(), i("div", Se, [
-    T("div", Te, [
-      h(u, {
+const ze = { class: "separadorPeriodo" }, Be = { class: "areaData" }, Ae = { class: "titulo" };
+function Oe(e, t, n, i, c, p) {
+  const r = d("BoxData");
+  return o(), s("div", ze, [
+    u("div", Be, [
+      _(r, {
         dataNumero: e.dataSeparador.getDate()
       }, null, 8, ["dataNumero"])
     ]),
-    T("h3", Ee, v(e.mesCorrente(e.dataSeparador.getMonth())) + " de " + v(e.dataSeparador.getFullYear()), 1)
+    u("h3", Ae, l(e.mesCorrente(e.dataSeparador.getMonth())) + " de " + l(e.dataSeparador.getFullYear()), 1)
   ]);
 }
-const Pe = /* @__PURE__ */ _(be, [["render", qe]]), Ce = d({
+const je = /* @__PURE__ */ m(Ie, [["render", Oe]]), He = v({
   name: "Avatar Timeline",
   props: {
     imagem: {
@@ -349,23 +349,23 @@ const Pe = /* @__PURE__ */ _(be, [["render", qe]]), Ce = d({
     }
   }
 });
-const De = { class: "avatar" }, ke = ["src"], Ie = {
+const Re = { class: "avatar" }, Fe = ["src"], Me = {
   key: 1,
   class: "material-symbols-outlined"
-}, ze = {
+}, Ne = {
   key: 2,
   class: "material-symbols-outlined"
 };
-function Ae(e, o, r, s, l, c) {
-  return a(), i("div", De, [
-    e.imagem ? (a(), i("img", {
+function we(e, t, n, i, c, p) {
+  return o(), s("div", Re, [
+    e.imagem ? (o(), s("img", {
       key: 0,
       src: e.imagem
-    }, null, 8, ke)) : e.icone ? (a(), i("span", Ie, v(e.icone), 1)) : (a(), i("span", ze, " person "))
+    }, null, 8, Fe)) : e.icone ? (o(), s("span", Me, l(e.icone), 1)) : (o(), s("span", Ne, " person "))
   ]);
 }
-const He = /* @__PURE__ */ _(Ce, [["render", Ae], ["__scopeId", "data-v-bd3d61f3"]]), Be = d({
-  components: { AvatarTimeline: He },
+const Ve = /* @__PURE__ */ m(He, [["render", we], ["__scopeId", "data-v-bd3d61f3"]]), Le = v({
+  components: { AvatarTimeline: Ve },
   props: {
     imagemPerfil: {
       type: String
@@ -382,31 +382,31 @@ const He = /* @__PURE__ */ _(Ce, [["render", Ae], ["__scopeId", "data-v-bd3d61f3
     }
   },
   setup(e) {
-    return e = P(e), {
-      classes: g(() => ({
+    return e = S(e), {
+      classes: b(() => ({
         "formato-reduzido": e.formatoReduzido,
         "formato-normal": !e.formatoReduzido
       }))
     };
   }
 });
-const je = { class: "nome" };
-function Me(e, o, r, s, l, c) {
-  const u = p("AvatarTimeline");
-  return a(), i("section", {
-    class: C(["perfilTimeline", e.classes])
+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])
   }, [
-    e.imagemPerfil ? (a(), S(u, {
+    e.imagemPerfil ? (o(), y(r, {
       key: 0,
       imagem: e.imagemPerfil
-    }, null, 8, ["imagem"])) : e.iconePerfil ? (a(), S(u, {
+    }, null, 8, ["imagem"])) : e.iconePerfil ? (o(), y(r, {
       key: 1,
       icone: e.iconePerfil
-    }, null, 8, ["icone"])) : q("", !0),
-    T("h2", je, v(e.nomePerfil), 1)
+    }, null, 8, ["icone"])) : E("", !0),
+    u("h2", Je, l(e.nomePerfil), 1)
   ], 2);
 }
-const Oe = /* @__PURE__ */ _(Be, [["render", Me]]), Re = d({
+const Y = /* @__PURE__ */ m(Le, [["render", Ye]]), Ge = v({
   props: {
     perfilTimeline: {
       required: !1,
@@ -418,79 +418,79 @@ const Oe = /* @__PURE__ */ _(Be, [["render", Me]]), Re = d({
     }
   },
   components: {
-    PerfilTimeline: Oe,
-    SeparadorPeriodo: Pe,
-    EventoTimeline: A
+    PerfilTimeline: Y,
+    SeparadorPeriodo: je,
+    EventoTimeline: J
   },
   setup(e) {
-    const o = P(
+    const t = S(
       e.eventosTimeline
     );
-    let r = P(o);
-    function s() {
-      r = o;
-      const t = u(r);
-      r.map((n) => (t[0] === n ? (n.atual = !0, n.scroll = !0, E()) : (n.atual = !1, n.scroll = !1), {
-        evento: n
+    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
       }));
     }
-    const l = () => {
-      setInterval(s, 6e4);
-    }, c = (t, n) => {
-      const m = t.getDay() === n.getDay(), y = t.getMonth() === n.getMonth(), f = t.getFullYear() === n.getFullYear();
-      return m && y && f;
-    }, u = (t) => {
-      if (t) {
-        const n = Date.now();
-        let m = null, y = [];
-        for (const f of t) {
-          const $ = f.data.getTime();
-          if (f.status === "planejado" || f.status === "atrasado") {
-            const D = Math.abs(n - f.data.getTime());
-            if (m === null || D < m && $ <= n)
-              m = D, y.length = 0;
-            else if (D > m)
+    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 P = C.data.getTime();
+          if (C.status === "planejado" || C.status === "atrasado") {
+            const I = Math.abs(f - C.data.getTime());
+            if (g === null || I < g && P <= f)
+              g = I, q.length = 0;
+            else if (I > g)
               continue;
-            y.push(f);
+            q.push(C);
           }
         }
-        return y;
+        return q;
       } else
         return [];
-    }, b = g(() => {
-      l();
-      const t = r.sort(
-        (n, m) => n.data.getTime() - m.data.getTime()
+    }, $ = b(() => {
+      c();
+      const a = n.sort(
+        (f, g) => f.data.getTime() - g.data.getTime()
       );
-      if (t) {
-        let n = [], m = null, y = 0, f;
-        for (const $ of t) {
-          const D = /* @__PURE__ */ new Date(), k = $.data;
-          f = $.status;
-          const H = $.tolerancia * 60 * 1e3;
-          f === "planejado" && k.getTime() + H < D.getTime() && ($.status = "atrasado"), (!m || !c(m, k)) && (m = k, n.push({
+      if (a) {
+        let f = [], g = null, q = 0, C;
+        for (const P of a) {
+          const I = /* @__PURE__ */ new Date(), A = P.data;
+          C = P.status;
+          const K = P.tolerancia * 60 * 1e3;
+          C === "planejado" && A.getTime() + K < I.getTime() && (P.status = "atrasado"), (!g || !p(g, A)) && (g = A, f.push({
             tipo: "dia",
-            valor: $.data,
-            key: ++y
-          })), n.push({
+            valor: P.data,
+            key: ++q
+          })), f.push({
             tipo: "evento",
-            valor: $,
-            key: ++y
+            valor: P,
+            key: ++q
           });
         }
-        return n;
+        return f;
       } else
         return [];
-    }), E = () => {
-      const t = document.querySelector(".atual");
-      t == null || t.scrollIntoView({
+    }), h = () => {
+      const a = document.querySelector(".atual");
+      a == null || a.scrollIntoView({
         behavior: "smooth",
         block: "center"
       });
     };
-    return s(), {
-      eventosPorTipo: b,
-      scrollParaItemAtual: E
+    return i(), {
+      eventosPorTipo: $,
+      scrollParaItemAtual: h
       // clicar,
     };
   },
@@ -498,60 +498,484 @@ const Oe = /* @__PURE__ */ _(Be, [["render", Me]]), Re = d({
     this.scrollParaItemAtual();
   }
 });
-const Ne = { class: "areaTimeline" }, Fe = { class: "timeline" };
-function we(e, o, r, s, l, c) {
-  const u = p("PerfilTimeline"), b = p("SeparadorPeriodo"), E = p("EventoTimeline");
-  return a(), i("div", Ne, [
-    e.perfilTimeline ? (a(), S(u, {
+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, {
       key: 0,
       nomePerfil: e.perfilTimeline.nome,
       imagemPerfil: e.perfilTimeline.imagem,
       iconePerfil: e.perfilTimeline.icone
-    }, null, 8, ["nomePerfil", "imagemPerfil", "iconePerfil"])) : q("", !0),
-    T("section", Fe, [
-      (a(!0), i(j, null, M(e.eventosPorTipo, (t) => (a(), i("div", {
-        key: t.key
+    }, 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
       }, [
-        t.tipo === "dia" ? (a(), S(b, {
+        a.tipo === "dia" ? (o(), y($, {
           key: 0,
-          dataSeparador: t.valor
-        }, null, 8, ["dataSeparador"])) : q("", !0),
-        t.tipo === "evento" ? (a(), S(E, {
+          dataSeparador: a.valor
+        }, null, 8, ["dataSeparador"])) : E("", !0),
+        a.tipo === "evento" ? (o(), y(h, {
           key: 1,
-          status: t.valor.status,
-          criticidade: t.valor.criticidade,
-          previsto: t.valor.previsto,
-          realizado: t.valor.realizado,
-          categoria: t.valor.categoria,
-          titulo: t.valor.titulo,
-          subtitulo: t.valor.subtitulo,
-          destaque: t.valor.destaque,
-          ehAtual: t.valor.atual,
+          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: () => {
-            t && t.valor && t.valor.aoClicar && t.valor.aoClicar(t.valor);
+            a && a.valor && a.valor.aoClicar && a.valor.aoClicar(a.valor);
           }
-        }, null, 8, ["status", "criticidade", "previsto", "realizado", "categoria", "titulo", "subtitulo", "destaque", "ehAtual", "aoClicar"])) : q("", !0)
+        }, null, 8, ["status", "criticidade", "previsto", "realizado", "categoria", "titulo", "subtitulo", "destaque", "ehAtual", "aoClicar"])) : E("", !0)
       ]))), 128))
     ])
   ]);
 }
-const Ve = /* @__PURE__ */ _(Re, [["render", we]]), Je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const We = /* @__PURE__ */ m(Ge, [["render", Ue]]), Xe = v({
+  name: "Botao",
+  props: {
+    titulo: {
+      type: String
+    },
+    icone: {
+      type: String
+    },
+    aparencia: {
+      type: String
+    },
+    tamanho: {
+      type: String
+    },
+    aoClicar: {
+      required: !1,
+      type: Function
+    }
+  },
+  setup(e) {
+    return e = S(e), {
+      classes: b(() => ({
+        [`${e.aparencia || "outline"}`]: !0,
+        [`${e.tamanho || "medio"}`]: !0
+      }))
+    };
+  }
+});
+const Ze = ["onclick"], 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
+  }, [
+    z(e.$slots, "default", {}, () => [
+      e.icone ? (o(), s("span", xe, l(e.icone), 1)) : E("", !0),
+      j(" " + l(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 },
+  name: "CabecalhoEventoDetalhado",
+  props: {
+    perfilEvento: {
+      required: !0,
+      type: Object
+    },
+    dadosEvento: {
+      required: !0,
+      type: Object
+    },
+    aoClicar: {
+      required: !1,
+      type: Function
+    }
+  },
+  setup(e) {
+    return {};
+  }
+});
+const G = (e) => (H("data-v-e8d44815"), e = e(), R(), e), to = {
+  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 = {
+  key: 0,
+  class: "horaRealizada texto-grande"
+}, lo = {
+  key: 1,
+  class: "horaPlanejada texto-pequeno"
+}, uo = {
+  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]])
+  }, [
+    e.perfilEvento ? (o(), y(r, {
+      key: 0,
+      nomePerfil: e.perfilEvento.nome,
+      imagemPerfil: e.perfilEvento.imagem,
+      iconePerfil: e.perfilEvento.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, ["iconeCategoria", "categoria"]),
+      u("h1", null, l(e.dadosEvento.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))
+        ])
+      ], 8, so),
+      u("div", {
+        onclick: e.aoClicar,
+        class: "box"
+      }, [
+        po,
+        u("div", vo, [
+          e.dadosEvento.realizado ? (o(), y(h, {
+            key: 0,
+            class: "horaRealizada texto-grande",
+            hora: e.dadosEvento.realizado
+          }, null, 8, ["hora"])) : E("", !0),
+          e.dadosEvento.realizado ? (o(), y(h, {
+            key: 1,
+            class: "horaPlanejada texto-pequeno",
+            hora: e.dadosEvento.previsto
+          }, null, 8, ["hora"])) : (o(), y(h, {
+            key: 2,
+            class: "horaRealizada texto-grande",
+            hora: e.dadosEvento.previsto
+          }, null, 8, ["hora"]))
+        ])
+      ], 8, _o)
+    ])
+  ], 2);
+}
+const fo = /* @__PURE__ */ m(oo, [["render", mo], ["__scopeId", "data-v-e8d44815"]]), $o = v({
+  components: { Botao: B },
+  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), {};
+  }
+});
+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,
+        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))
+    ]),
+    _(r, {
+      titulo: e.tituloBotao,
+      aoClicar: e.aoClicar,
+      icone: "add",
+      aparencia: "preenchido",
+      tamanho: "pequeno"
+    }, null, 8, ["titulo", "aoClicar"])
+  ]);
+}
+const To = /* @__PURE__ */ m($o, [["render", Co], ["__scopeId", "data-v-e90a0cb4"]]), qo = v({
+  components: { Botao: B, IconeStatus: V },
+  name: "BotaoStatus",
+  props: {
+    aparencia: {
+      type: String
+    },
+    status: {
+      required: !0,
+      type: String
+    },
+    aoClicar: {
+      required: !1,
+      type: Function
+    }
+  },
+  setup(e) {
+    return e = S(e), {
+      classes: b(() => ({
+        [`${e.status || "planejado"}`]: !0
+      }))
+    };
+  }
+});
+function Po(e, t, n, i, c, p) {
+  const r = d("IconeStatus"), $ = d("Botao");
+  return o(), y($, {
+    aparencia: e.aparencia,
+    class: T(e.classes),
+    aoClicar: e.aoClicar
+  }, {
+    default: k(() => [
+      _(r, {
+        class: "icone",
+        status: e.status
+      }, null, 8, ["status"]),
+      j(" " + l(e.status), 1)
+    ]),
+    _: 1
+  }, 8, ["aparencia", "class", "aoClicar"]);
+}
+const ko = /* @__PURE__ */ m(qo, [["render", Po], ["__scopeId", "data-v-dc6d6557"]]), Do = v({
+  components: { BotaoStatus: ko },
+  name: "StatusEvento",
+  props: {
+    aparencia: {
+      type: String
+    },
+    status: {
+      required: !0,
+      type: String
+    },
+    aoClicar: {
+      required: !1,
+      type: Function
+    }
+  },
+  setup(e) {
+    return e = S(e), {};
+  }
+});
+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 Ao(e, t, n, i, c, p) {
+  const r = d("BotaoStatus");
+  return o(), s("section", zo, [
+    Bo,
+    _(r, {
+      aparencia: e.aparencia,
+      aoClicar: e.aoClicar,
+      status: e.status
+    }, null, 8, ["aparencia", "aoClicar", "status"])
+  ]);
+}
+const Oo = /* @__PURE__ */ m(Do, [["render", Ao], ["__scopeId", "data-v-69bc6463"]]), jo = v({
+  props: {
+    perfilEvento: {
+      required: !0,
+      type: Object
+    },
+    dadosEvento: {
+      required: !0,
+      type: Object
+    }
+  },
+  components: { CabecalhoEventoDetalhado: fo, Observacoes: To, StatusEvento: Oo },
+  setup(e) {
+    return {};
+  }
+});
+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, [
+    _(D, {
+      name: "fadeBaixo",
+      mode: "out-in",
+      appear: ""
+    }, {
+      default: k(() => [
+        _(r, {
+          perfilEvento: e.perfilEvento,
+          dadosEvento: e.dadosEvento,
+          aoClicar: e.dadosEvento.aoClicar
+        }, null, 8, ["perfilEvento", "dadosEvento", "aoClicar"])
+      ]),
+      _: 1
+    }),
+    _(D, {
+      name: "fadeBaixo",
+      mode: "out-in",
+      appear: ""
+    }, {
+      default: k(() => [
+        u("section", Ro, [
+          z(e.$slots, "descricao", {}, () => [
+            j(l(e.dadosEvento.subtitulo), 1)
+          ])
+        ])
+      ]),
+      _: 3
+    }),
+    _(D, {
+      name: "fadeBaixo",
+      mode: "out-in",
+      appear: ""
+    }, {
+      default: k(() => [
+        _($, {
+          observacoes: e.dadosEvento.observacoes,
+          tituloBotao: "Inserir observação",
+          aoClicar: e.dadosEvento.aoClicar
+        }, null, 8, ["observacoes", "aoClicar"])
+      ]),
+      _: 1
+    }),
+    _(D, {
+      name: "fadeBaixo",
+      mode: "out-in",
+      appear: ""
+    }, {
+      default: k(() => [
+        _(h, {
+          aparencia: "preenchido",
+          aoClicar: e.dadosEvento.aoClicar,
+          status: e.dadosEvento.status
+        }, null, 8, ["aoClicar", "status"])
+      ]),
+      _: 1
+    })
+  ]);
+}
+const Mo = /* @__PURE__ */ m(jo, [["render", Fo]]), No = v({
+  components: { Botao: B },
+  name: "AreaSalvamento",
+  props: {
+    aoClicar: {
+      required: !1,
+      type: Function
+    }
+  },
+  setup(e) {
+    return {};
+  }
+});
+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),
+    _(r, {
+      aparencia: "preenchido",
+      titulo: "Salvar",
+      tamanho: "grande",
+      aoClicar: e.aoClicar
+    }, null, 8, ["aoClicar"]),
+    _(r, {
+      aparencia: "vazio",
+      titulo: "Cancelar",
+      tamanho: "pequeno",
+      aoClicar: e.aoClicar
+    }, null, 8, ["aoClicar"])
+  ]);
+}
+const Lo = /* @__PURE__ */ m(No, [["render", Vo], ["__scopeId", "data-v-5dd5054f"]]), Jo = v({
+  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
+      }))
+    };
+  }
+});
+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, [
+    _(D, {
+      name: "fadeTopo",
+      mode: "out-in",
+      appear: ""
+    }, {
+      default: k(() => [
+        u("div", Go, [
+          z(e.$slots, "conteudo")
+        ])
+      ]),
+      _: 3
+    }),
+    _(D, {
+      name: "fadeBaixo",
+      mode: "out-in",
+      appear: ""
+    }, {
+      default: k(() => [
+        u("div", Ko, [
+          _(r, {
+            aoClicar: e.aoClicar,
+            class: T(e.classes)
+          }, {
+            default: k(() => [
+              z(e.$slots, "salvamento")
+            ]),
+            _: 3
+          }, 8, ["aoClicar", "class"])
+        ])
+      ]),
+      _: 3
+    })
+  ]);
+}
+const Uo = /* @__PURE__ */ m(Jo, [["render", Qo]]), Wo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
-}, Symbol.toStringTag, { value: "Module" })), z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Symbol.toStringTag, { value: "Module" })), F = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  EventoTimeline: A,
-  Timeline: Ve,
-  Tipos: Je
+  EditarEvento: Uo,
+  EventoDetalhado: Mo,
+  EventoTimeline: J,
+  Timeline: We,
+  Tipos: Wo
 }, Symbol.toStringTag, { value: "Module" }));
-const Le = {
-  install(e, ...o) {
-    for (const r in z)
-      e.component(r, z[r]);
+const Zo = {
+  install(e, ...t) {
+    for (const n in F)
+      e.component(n, F[n]);
   }
 };
 export {
-  A as EventoTimeline,
-  Ve as Timeline,
-  Je as Tipos,
-  Le as default
+  Uo as EditarEvento,
+  Mo as EventoDetalhado,
+  J as EventoTimeline,
+  We as Timeline,
+  Wo as Tipos,
+  Zo as default
 };