@devix-tecnologia/timeline-vue 1.1.0 → 1.1.2

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

@@ -1,100 +0,0 @@
-<template>
-  <div class="separadorPeriodo">
-    <div class="areaData">
-      <BoxData :dataNumero="dataSeparador.getDate()" :aparencia="aparencia" />
-    </div>
-    <h3 class="titulo" :class="aparencia">
-      {{ mesCorrente(dataSeparador.getMonth()) }} de
-      {{ dataSeparador.getFullYear() }}
-    </h3>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-import BoxData from "../atomos/BoxData.vue";
-
-export default defineComponent({
-  name: "SeparadorPeriodo",
-  props: {
-    dataSeparador: {
-      required: true,
-      type: Date,
-    },
-    aparencia: {
-      type: String,
-    },
-  },
-  components: { BoxData },
-  setup(props) {
-    const arrayMes = new Array(12);
-    arrayMes[0] = "Janeiro";
-    arrayMes[1] = "Fevereiro";
-    arrayMes[2] = "Março";
-    arrayMes[3] = "Abril";
-    arrayMes[4] = "Maio";
-    arrayMes[5] = "Junho";
-    arrayMes[6] = "Julho";
-    arrayMes[7] = "Agosto";
-    arrayMes[8] = "Setembro";
-    arrayMes[9] = "Outubro";
-    arrayMes[10] = "Novembro";
-    arrayMes[11] = "Dezembro";
-
-    const mesCorrente = (mes: number) => {
-      return arrayMes[mes];
-    };
-    return { mesCorrente };
-  },
-});
-</script>
-
-<style scoped>
-/* SEPARADOR */
-
-.separadorPeriodo {
-  display: table-row;
-  width: 100%;
-  position: relative;
-  background: #fff;
-}
-
-.areaData {
-  display: table-cell;
-  padding: 2.8rem 1.4rem;
-  padding-left: 10.1rem;
-  position: relative;
-}
-
-.areaData:before {
-  content: "";
-  background: var(--cor-linha);
-  display: block;
-  position: absolute;
-  width: 2px;
-  height: 2.5rem;
-  top: 0;
-  left: 11.9rem;
-}
-
-.areaData:after {
-  content: "";
-  background: var(--cor-linha);
-  display: block;
-  position: absolute;
-  width: 2px;
-  height: 2.5rem;
-  bottom: 0;
-  left: 11.9rem;
-}
-
-.separadorPeriodo .titulo {
-  text-transform: uppercase;
-  padding-bottom: 3.45rem;
-  color: var(--cor-texto);
-}
-
-.separadorPeriodo .titulo.claro {
-  color: var(--cor-apoio);
-}
-</style>

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

@@ -1,38 +0,0 @@
-<template>
-  <div class="topo">
-    <div class="Topo">
-      <!-- iconeSeta -->
-      <span class="material-symbols-outlined"> arrow_back </span>
-      <!-- titulo -->
-      <h2 class="titulo">Linha do tempo</h2>
-      <!-- menu -->
-      <span class="material-symbols-outlined"> more_vert </span>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  setup() {
-    return {};
-  },
-});
-</script>
-
-<style scoped>
-/* CABEÇALHO */
-.material-symbols-outlined {
-  font-size: 2.6rem;
-}
-.Topo {
-  background: var(--cor-secundaria);
-  padding: 1.4rem;
-  color: var(--cor-terciaria);
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-</style>

package/src/components/timeline/organismos/Timeline.mock.ts

@@ -1,311 +0,0 @@
-import { Evento, Perfil } from "../type";
-
-export const dadosPerfil: Perfil = {
-  nome: "Maria do Socorro",
-  imagem:
-    "https://this-person-does-not-exist.com/img/avatar-gen11071f8e0802a35d66684ee9376722b2.jpg",
-  icone: "person",
-};
-
-export const dadosEventos: Evento[] = [
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f1",
-    data: new Date("2023-04-26T19:00Z"),
-    previsto: new Date("2023-04-26T19:00Z"),
-    realizado: new Date("2023-04-26T19:30Z"),
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Vacina da Covid",
-    subtitulo: "Posto de saúde do bairro",
-    destaque: "",
-    categoria: {
-      nome: "Vacina",
-      icone: "vaccines",
-    },
-    status: "realizado",
-    criticidade: "media",
-
-    atual: false,
-    scroll: false,
-  },
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f2",
-    data: new Date("2023-04-26T18:10Z"),
-    previsto: new Date("2023-04-26T18:10Z"),
-    realizado: new Date("2023-04-26T18:15Z"),
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Vacina da gripe",
-    subtitulo: "Posto de saúde do bairro",
-    destaque: "",
-    categoria: {
-      nome: "Vacina",
-      icone: "vaccines",
-    },
-    status: "cancelado",
-    criticidade: "baixa",
-
-    atual: false,
-    scroll: false,
-  },
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f3",
-    data: new Date("2023-05-03T11:00Z"),
-    previsto: new Date("2023-05-03T11:00Z"),
-    realizado: null,
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Ligar para médica",
-    subtitulo: "",
-    destaque: "",
-    categoria: {
-      nome: "Ligação",
-      icone: "call",
-    },
-    status: "planejado",
-    criticidade: "baixa",
-
-    atual: false,
-    scroll: false,
-  },
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f4",
-    data: new Date("2023-05-03T15:00Z"),
-    previsto: new Date("2023-05-03T15:00Z"),
-    realizado: null,
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Passeio no parque",
-    subtitulo: "",
-    destaque: "",
-    categoria: {
-      nome: "Passeio",
-      icone: "tour",
-    },
-    status: "planejado",
-    criticidade: "baixa",
-
-    atual: false,
-    scroll: false,
-  },
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f5",
-    data: new Date("2023-05-03T20:00Z"),
-    previsto: new Date("2023-05-03T20:00Z"),
-    realizado: null,
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Exames do coração",
-    subtitulo: "Hospital do Coração",
-    destaque: "",
-    categoria: {
-      nome: "Cardiologista",
-      icone: "cardiology",
-    },
-    status: "planejado",
-    criticidade: "media",
-
-    atual: false,
-    scroll: false,
-  },
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f6",
-    data: new Date("2023-04-01T12:00Z"),
-    previsto: new Date("2023-04-01T12:00Z"),
-    realizado: null,
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Consulta",
-    subtitulo: "Posto de saúde",
-    destaque: "Remarcado",
-    categoria: {
-      nome: "Tele consulta",
-      icone: "call",
-    },
-    status: "adiado",
-    criticidade: "baixa",
-
-    atual: false,
-    scroll: false,
-  },
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f7",
-    data: new Date("2023-04-01T13:00Z"),
-    previsto: new Date("2023-04-01T13:00Z"),
-    realizado: null,
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Consulta cardiologista",
-    subtitulo: "Posto de saúde do bairro",
-    destaque: "",
-    categoria: {
-      nome: "Cardiologista",
-      icone: "cardiology",
-    },
-    status: "realizado",
-    criticidade: "alta",
-
-    atual: false,
-    scroll: false,
-  },
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f8",
-    data: new Date("2023-05-03T12:00Z"),
-    previsto: new Date("2023-05-03T12:00Z"),
-    realizado: null,
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Dentista",
-    subtitulo: "Reta da Penha",
-    destaque: "",
-    categoria: {
-      nome: "Dentista",
-      icone: "dentistry",
-    },
-    status: "planejado",
-    criticidade: "baixa",
-
-    atual: false,
-    scroll: false,
-  },
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f9",
-    data: new Date("2023-05-03T13:00Z"),
-    previsto: new Date("2023-05-03T13:00Z"),
-    realizado: null,
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Consulta",
-    subtitulo: "Hospital central",
-    destaque: "",
-    categoria: {
-      nome: "Consulta",
-      icone: "health_and_safety",
-    },
-    status: "planejado",
-    criticidade: "alta",
-
-    atual: false,
-    scroll: false,
-  },
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f10",
-    data: new Date("2023-05-03T14:27Z"),
-    previsto: new Date("2023-05-03T14:27Z"),
-    realizado: null,
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Remédio de pressão",
-    subtitulo: "Aferir a pressão",
-    destaque: "",
-    categoria: {
-      nome: "Remédio",
-      icone: "pill",
-    },
-    status: "planejado",
-    criticidade: "alta",
-
-    atual: false,
-    scroll: false,
-  },
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f11",
-    data: new Date("2023-05-03T15:00Z"),
-    previsto: new Date("2023-05-03T15:00Z"),
-    realizado: null,
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Checar temperatura",
-    subtitulo: "",
-    destaque: "",
-    categoria: {
-      nome: "Termometro",
-      icone: "thermometer_gain",
-    },
-    status: "planejado",
-    criticidade: "baixa",
-
-    atual: false,
-    scroll: false,
-  },
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f12",
-    data: new Date("2023-05-08T16:00Z"),
-    previsto: new Date("2023-05-08T16:00Z"),
-    realizado: null,
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Avaliação Física",
-    subtitulo: "",
-    destaque: "IMC: 28,4",
-    categoria: {
-      nome: "Avaliação Física",
-      icone: "conditions",
-    },
-    status: "planejado",
-    criticidade: "baixa",
-
-    atual: false,
-    scroll: false,
-  },
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f13",
-    data: new Date("2023-05-09T19:00Z"),
-    previsto: new Date("2023-05-09T19:00Z"),
-    realizado: null,
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Vacina da gripe",
-    subtitulo: "Posto de saúde do bairro",
-    destaque: "",
-    categoria: {
-      nome: "Vacina",
-      icone: "vaccines",
-    },
-    status: "planejado",
-    criticidade: "baixa",
-
-    atual: false,
-    scroll: false,
-  },
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f14",
-    data: new Date("2023-05-09T17:00Z"),
-    previsto: new Date("2023-05-09T17:00Z"),
-    realizado: null,
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Vitamina D",
-    subtitulo: "2 comprimidos",
-    destaque: "",
-    categoria: {
-      nome: "Remédio",
-      icone: "pill",
-    },
-    status: "planejado",
-    criticidade: "baixa",
-    aoCLicar: () => alert("Olá, mundo!"),
-    atual: false,
-    scroll: false,
-  },
-  {
-    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f15",
-    data: new Date("2023-05-09T18:01Z"),
-    previsto: new Date("2023-05-09T18:00Z"),
-    realizado: null,
-    duracao: null,
-    tolerancia: 10,
-    titulo: "Fisioterapia",
-    subtitulo: "",
-    destaque: "",
-    categoria: {
-      nome: "Fisioterapia",
-      icone: "physical_therapy",
-    },
-    status: "planejado",
-    criticidade: "baixa",
-
-    atual: false,
-    scroll: false,
-  },
-];

package/src/components/timeline/organismos/Timeline.stories.ts

@@ -1,48 +0,0 @@
-import Timeline from "./Timeline.vue";
-import { Meta, StoryFn } from "@storybook/vue3";
-import { dadosEventos, dadosPerfil } from "./Timeline.mock";
-import { Evento } from "../type";
-
-export default {
-  title: "Devix/Timeline/Organismos/Timeline",
-  component: Timeline,
-  parameters: {
-    componentSubtitle: "Linha do tempo padrão com identidade da Devix",
-  },
-  argTypes: {},
-} as Meta<typeof Timeline>;
-
-const perfilMock = dadosPerfil;
-
-const eventosPorDataMock = dadosEventos;
-
-function atualizarDatas(eventos: Evento[]) {
-  const agora = new Date();
-  const mesAtual = agora.getMonth() + 1;
-
-  for (let i = 0; i < eventos.length; i++) {
-    const evento = eventos[i];
-    const mesEvento = evento.data.getMonth() + 1;
-
-    if (mesEvento >= mesAtual) {
-      evento.data.setMonth(agora.getMonth(), agora.getDate());
-      evento.previsto.setMonth(agora.getMonth(), agora.getDate());
-    }
-  }
-}
-atualizarDatas(dadosEventos);
-
-const Template: StoryFn<typeof Timeline> = (args) => ({
-  components: { Timeline: Timeline },
-  setup() {
-    return { args };
-  },
-  template:
-    '<Timeline :perfilTimeline="args.perfilTimeline" :eventosTimeline="args.eventosTimeline" style="position: relative" />',
-});
-
-export const Padrao = Template.bind({});
-Padrao.args = {
-  perfilTimeline: perfilMock,
-  eventosTimeline: eventosPorDataMock,
-};

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

@@ -1,212 +0,0 @@
-<template>
-  <div class="areaTimeline">
-    <PerfilTimeline
-      v-if="perfilTimeline !== null"
-      :nomePerfil="perfilTimeline.nome"
-      :imagemPerfil="perfilTimeline.imagem"
-      :iconePerfil="perfilTimeline.icone"
-    />
-    <section class="timeline">
-      <!-- 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;
-}
-</style>