@devix-tecnologia/timeline-vue 1.1.1 → 1.1.2

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,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;
-}