@devix-tecnologia/timeline-vue 1.1.1 → 1.2.0

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

@@ -1,217 +0,0 @@
-<template>
-  <div class="areaTimeline">
-    <PerfilTimeline
-      v-if="perfilTimeline !== null"
-      :nomePerfil="perfilTimeline.nome"
-      :imagemPerfil="perfilTimeline.imagem"
-      :iconePerfil="perfilTimeline.icone"
-    />
-
-    <section class="timeline" :class="{ marginTop: perfilTimeline !== null }">
-      <!-- SEPARADOR -->
-      <div v-for="evento in eventosPorTipo" :key="evento.key">
-        <SeparadorPeriodo
-          v-if="evento.tipo === 'dia'"
-          :dataSeparador="evento.valor"
-        />
-        <!--loop-->
-        <EventoTimeline
-          v-if="evento.tipo === 'evento'"
-          :status="evento.valor.status"
-          :criticidade="evento.valor.criticidade"
-          :previsto="evento.valor.previsto"
-          :realizado="evento.valor.realizado"
-          :categoria="evento.valor.categoria"
-          :titulo="evento.valor.titulo"
-          :subtitulo="evento.valor.subtitulo"
-          :destaque="evento.valor.destaque"
-          :ehAtual="evento.valor.atual"
-          :aoCLicar="evento.valor.aoCLicar"
-        />
-      </div>
-    </section>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, reactive } from "vue";
-import EventoTimeline from "../moleculas/EventoTimeline.vue";
-import SeparadorPeriodo from "../moleculas/SeparadorPeriodo.vue";
-import PerfilTimeline from "../moleculas/PerfilTimeline.vue";
-import { Evento } from "../type";
-
-type TipoEventoTimeline =
-  | { tipo: "dia"; valor: Date; key: number }
-  | { tipo: "evento"; valor: Evento; key: number }
-  | { tipo: "eventos"; valor: Evento[]; key: number };
-
-export default defineComponent({
-  props: {
-    perfilTimeline: {
-      required: true,
-      type: Object,
-    },
-    eventosTimeline: {
-      required: true,
-      type: Object,
-    },
-  },
-  components: {
-    PerfilTimeline,
-    SeparadorPeriodo,
-    EventoTimeline,
-  },
-  setup(props) {
-    const dadosEventosTimeline: Evento[] = reactive(
-      props.eventosTimeline as Array<Evento>
-    );
-    let dadosEventosTimelineClone: Evento[] = reactive(dadosEventosTimeline);
-
-    function carregarListaEventos() {
-      dadosEventosTimelineClone = dadosEventosTimeline;
-      const resultado: Evento[] = filtraEventoAtual(dadosEventosTimelineClone);
-      dadosEventosTimelineClone.map((resp) => {
-        if (resultado[0].id === resp.id) {
-          resp.atual = true;
-          resp.scroll = true;
-          void scrollParaItemAtual();
-        } else {
-          resp.atual = false;
-          resp.scroll = false;
-        }
-        return {
-          evento: resp,
-        };
-      });
-    }
-
-    const atualizarEventoAtual = () => {
-      setInterval(carregarListaEventos, 60000);
-    };
-
-    const verifica_mesmo_dia = (a: Date, b: Date) => {
-      const mesmo_dia = a.getDay() === b.getDay();
-      const mesmo_mes = a.getMonth() === b.getMonth();
-      const mesmo_ano = a.getFullYear() === b.getFullYear();
-      return mesmo_dia && mesmo_mes && mesmo_ano;
-    };
-
-    //verifica qual evento está mais próximo da hora atual e coloca ele numa nova lista na primeira posição
-    const filtraEventoAtual = (eventos: Evento[]) => {
-      if (eventos) {
-        const agora = Date.now();
-        let minDiff: number | null = null;
-        let listaEventos = [];
-        for (const e of eventos) {
-          const t = e.data.getTime();
-          if (e.status === "planejado" || e.status === "atrasado") {
-            const diff: number = Math.abs(agora - e.data.getTime());
-            if (minDiff === null || (diff < minDiff && t <= agora)) {
-              minDiff = diff;
-              listaEventos.length = 0;
-            } else if (diff > minDiff) {
-              continue;
-            }
-            listaEventos.push(e);
-          }
-        }
-        return listaEventos;
-      } else {
-        return [];
-      }
-    };
-
-    // lista de eventos por tipo
-    const eventosTimeline = computed(() => {
-      void atualizarEventoAtual();
-
-      const eventosOrdenados = dadosEventosTimelineClone.sort(
-        (a: Evento, b: Evento) => {
-          return a.data.getTime() - b.data.getTime();
-        }
-      );
-      if (eventosOrdenados) {
-        let resultado: Array<TipoEventoTimeline> = [];
-        let dataAtual: Date | null = null;
-        let idx = 0;
-        let statusEvento;
-
-        for (const evento of eventosOrdenados) {
-          const agora = new Date();
-          const dataEvento = evento.data;
-          statusEvento = evento.status;
-          const toleranciaEvento = evento.tolerancia * 60 * 1000;
-
-          //altera status para atrasado
-          if (
-            statusEvento === "planejado" &&
-            dataEvento.getTime() + toleranciaEvento < agora.getTime()
-          ) {
-            evento.status = "atrasado";
-          }
-          if (!dataAtual || !verifica_mesmo_dia(dataAtual, dataEvento)) {
-            dataAtual = dataEvento;
-            resultado.push({
-              tipo: "dia",
-              valor: evento.data,
-              key: ++idx,
-            });
-          }
-          resultado.push({
-            tipo: "evento",
-            valor: evento,
-            key: ++idx,
-          });
-        }
-        return resultado;
-      } else {
-        return [];
-      }
-    });
-
-    const scrollParaItemAtual = () => {
-      const itemAtual = document.querySelector(".atual");
-      itemAtual?.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
-    };
-
-    carregarListaEventos();
-    return {
-      eventosPorTipo: eventosTimeline,
-      scrollParaItemAtual,
-    };
-  },
-  mounted() {
-    // Aguardando a renderização para fazer scroll
-    this.scrollParaItemAtual();
-  },
-});
-</script>
-
-<style scoped>
-/* TIMELINE */
-
-/* .areaTimeline {
-  max-width: 850px;
-  margin: 0 auto;
-} */
-
-.areaEvento {
-  display: table-row;
-  min-height: 8rem;
-  position: relative !important;
-  width: 100%;
-}
-
-.timeline {
-  display: table;
-  width: 100%;
-  position: relative;
-}
-
-.marginTop {
-  margin-top: 8rem;
-}
-</style>

package/src/components/timeline/type.ts

@@ -1,34 +0,0 @@
-export type Perfil = {
-  nome: string;
-  imagem: string | null;
-  icone: string | null;
-};
-
-export type Categoria = {
-  nome: string;
-  icone: string;
-};
-
-export type Evento = {
-  id: string;
-  data: Date;
-  previsto: Date;
-  duracao: number | null;
-  realizado: Date | null;
-  tolerancia: number;
-  titulo: string;
-  subtitulo: string;
-  destaque: string;
-  categoria: Categoria;
-  status:
-    | "atrasado"
-    | "adiantado"
-    | "adiado"
-    | "realizado"
-    | "planejado"
-    | "cancelado";
-  criticidade: "baixa" | "media" | "alta";
-  aoCLicar?: VoidFunction;
-  atual: boolean;
-  scroll: boolean;
-};

package/src/global.css

@@ -1,98 +0,0 @@
-/* GERAIS */
-* {
-  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/src/index.ts

@@ -1,16 +0,0 @@
-import { Plugin } from "vue";
-import * as components from "./components/timeline";
-import "./global.css";
-
-const Timeline: Plugin = {
-  install(app, ...options) {
-    for (const key in components) {
-      // @ts-expect-error
-      app.component(key, components[key]);
-    }
-  },
-};
-
-export default Timeline;
-
-export * from "./components/timeline";

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />