@devix-tecnologia/timeline-vue 1.0.2 → 1.1.1

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

@@ -1,41 +1,74 @@
 <template>
   <article
     class="eventoTimeline"
-    :class="[
-      dadosEvento.valor.status,
-      'criticidade-' + dadosEvento.valor.criticidade,
-      eventoSelecionado,
-    ]"
+    :class="[status, 'criticidade-' + criticidade, eventoSelecionado, clicavel]"
+    :onclick="aoCLicar"
   >
-    <IconeStatus :status="dadosEvento.valor.status" />
-    <HoraEvento
-      :horaPrevista="dadosEvento.valor.previsto"
-      :horaRealizada="dadosEvento.valor.realizado"
-    />
+    <IconeStatus :status="status" />
+    <HoraEvento :horaPrevista="previsto" :horaRealizada="realizado" />
     <IconeCategoria
-      :iconeCategoria="dadosEvento.valor.categoria.icone"
-      :categoria="dadosEvento.valor.categoria.nome"
-    />
-    <DescricaoEvento
-      :titulo="dadosEvento.valor.titulo"
-      :subtitulo="dadosEvento.valor.subtitulo"
+      :iconeCategoria="categoria.icone"
+      :categoria="categoria.nome"
     />
-    <Destaque :destaque="dadosEvento.valor.destaque" />
+    <DescricaoEvento :titulo="titulo" :subtitulo="subtitulo" />
+    <Destaque :destaque="destaque" />
   </article>
 </template>
 <script lang="ts">
-import { defineComponent, computed } from "vue";
+import { defineComponent, computed, PropType } from "vue";
 import IconeCategoria from "../atomos/IconeCategoria.vue";
 import IconeStatus from "../atomos/IconeStatus.vue";
 import DescricaoEvento from "./DescricaoEvento.vue";
 import HoraEvento from "./HoraEvento.vue";
 import Destaque from "../atomos/Destaque.vue";
+// import { Evento, Categoria } from "../type";
+
+interface Categoria {
+  nome: string;
+  icone: string;
+}
 
 export default defineComponent({
   props: {
-    dadosEvento: {
+    status: {
+      required: true,
+      type: String,
+    },
+    criticidade: {
+      required: true,
+      type: String,
+    },
+    ehAtual: {
       required: true,
-      type: Object,
+      type: Boolean,
+    },
+    previsto: {
+      required: true,
+      type: Date,
+    },
+    realizado: {
+      required: false,
+      type: Date as PropType<Date | null>,
+    },
+    categoria: {
+      required: true,
+      type: Object as () => Categoria,
+    },
+    titulo: {
+      required: true,
+      type: String,
+    },
+    subtitulo: {
+      required: true,
+      type: String,
+    },
+    destaque: {
+      required: true,
+      type: String,
+    },
+    aoCLicar: {
+      required: false,
+      type: Function as PropType<VoidFunction>,
     },
   },
   components: {
@@ -48,8 +81,11 @@ export default defineComponent({
   setup(props) {
     return {
       eventoSelecionado: computed(() => ({
-        atual: props.dadosEvento.atual == true,
-        padrao: props.dadosEvento.atual == false,
+        atual: props.ehAtual,
+        padrao: props.ehAtual,
+      })),
+      clicavel: computed(() => ({
+        clicavel: props.aoCLicar !== undefined,
       })),
     };
   },
@@ -64,6 +100,10 @@ export default defineComponent({
   border-radius: 1rem;
 }
 
+.clicavel {
+  cursor: pointer;
+}
+
 .eventoTimeline:hover {
   background: #f9f9f9;
 }
@@ -85,8 +125,8 @@ export default defineComponent({
   position: absolute;
   width: 2px;
   top: 0;
-  height: 1.5rem;
-  left: 11.7rem;
+  height: 2.5rem;
+  left: 11.9rem;
 }
 
 .eventoTimeline:after {
@@ -95,8 +135,24 @@ export default defineComponent({
   display: block;
   position: absolute;
   width: 2px;
-  top: 5.1rem;
+  top: 6.1rem;
   bottom: 0;
-  left: 11.7rem;
+  left: 11.9rem;
+}
+
+.eventoTimeline.atrasado:before {
+  background: var(--cor-alerta);
+}
+
+.eventoTimeline.atrasado:after {
+  background: var(--cor-alerta);
+}
+
+.eventoTimeline.atrasado:before {
+  background: var(--cor-alerta);
+}
+
+.eventoTimeline.atrasado:after {
+  background: var(--cor-alerta);
 }
 </style>

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

@@ -23,8 +23,8 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
-import Hora from '../atomos/Hora.vue';
+import { defineComponent, PropType } from "vue";
+import Hora from "../atomos/Hora.vue";
 
 export default defineComponent({
   props: {
@@ -33,7 +33,8 @@ export default defineComponent({
       required: true,
     },
     horaRealizada: {
-      type: Date,
+      required: false,
+      type: Date as PropType<Date | null>,
     },
     // aparencia: {
     //   type: String,
@@ -56,7 +57,7 @@ export default defineComponent({
   display: table-cell;
   vertical-align: top;
   text-align: right;
-  padding: 1.4rem 0;
+  padding: 2.4rem 0;
 }
 .horaEvento {
   line-height: 1.4rem;

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

@@ -1,15 +1,9 @@
 <template>
-  <div
-    class="perfilTimeline"
-    ref="elementoFixo"
-    :style="style"
-    :class="{ fixed: isFixed }"
-  >
-    <!-- :class="{ fixed: isFixed }" -->
+  <section class="perfilTimeline fixed" ref="elementoFixo" :style="style">
     <AvatarTimeline v-if="imagemPerfil" :imagem="imagemPerfil" />
     <AvatarTimeline v-else-if="iconePerfil" :icone="iconePerfil" />
     <h2 class="nome">{{ nomePerfil }}</h2>
-  </div>
+  </section>
 </template>
 
 <script lang="ts">
@@ -46,30 +40,9 @@ export default defineComponent({
     const style = computed(() => ({
       backgroundColor: props.backgroundColor,
     }));
-    // fixando o box no topo da página
-    const elementoFixo = ref<HTMLElement | null>(null);
-    const isFixed = ref(false);
-
-    const handleScroll = () => {
-      if (elementoFixo.value) {
-        const scrollTop =
-          window.pageYOffset || document.documentElement.scrollTop;
-        const offset = elementoFixo.value.offsetTop;
-        isFixed.value = scrollTop > offset;
-      }
-    };
-
-    onMounted(() => {
-      window.addEventListener("scroll", handleScroll);
-    });
-    onUnmounted(() => {
-      window.removeEventListener("scroll", handleScroll);
-    });
 
     return {
       style,
-      elementoFixo,
-      isFixed,
     };
   },
 });

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

@@ -1,14 +1,17 @@
 <template>
   <div class="separadorPeriodo">
     <div class="areaData">
-      <BoxData :dataNumero="dia" :aparencia="aparencia" />
+      <BoxData :dataNumero="dataSeparador.getDate()" :aparencia="aparencia" />
     </div>
-    <h3 class="titulo" :class="aparencia">{{ mes }} de {{ ano }}</h3>
+    <h3 class="titulo" :class="aparencia">
+      {{ mesCorrente(dataSeparador.getMonth()) }} de
+      {{ dataSeparador.getFullYear() }}
+    </h3>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, ref } from "vue";
 import BoxData from "../atomos/BoxData.vue";
 
 export default defineComponent({
@@ -16,7 +19,7 @@ export default defineComponent({
   props: {
     dataSeparador: {
       required: true,
-      type: String,
+      type: Date,
     },
     aparencia: {
       type: String,
@@ -24,28 +27,24 @@ export default defineComponent({
   },
   components: { BoxData },
   setup(props) {
-    const numeroMes = [
-      "janeiro",
-      "fevereiro",
-      "março",
-      "abril",
-      "maio",
-      "junho",
-      "julho",
-      "agosto",
-      "setembro",
-      "outubro",
-      "novembro",
-      "dezembro",
-    ];
+    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";
 
-    // eslint-disable-next-line vue/no-setup-props-destructure
-    const dataRecebida = props.dataSeparador;
-    const data = new Date(dataRecebida);
-    const ano = data.getFullYear();
-    const mes = numeroMes[data.getMonth()];
-    const dia = data.getDate();
-    return { dataRecebida, ano, mes, dia };
+    const mesCorrente = (mes: number) => {
+      return arrayMes[mes];
+    };
+    return { mesCorrente };
   },
 });
 </script>
@@ -75,7 +74,7 @@ export default defineComponent({
   width: 2px;
   height: 2.5rem;
   top: 0;
-  left: 11.7rem;
+  left: 11.9rem;
 }
 
 .areaData:after {
@@ -86,7 +85,7 @@ export default defineComponent({
   width: 2px;
   height: 2.5rem;
   bottom: 0;
-  left: 11.7rem;
+  left: 11.9rem;
 }
 
 .separadorPeriodo .titulo {

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

@@ -14,7 +14,7 @@ export const dadosEventos: Evento[] = [
     previsto: new Date("2023-04-26T19:00Z"),
     realizado: new Date("2023-04-26T19:30Z"),
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Vacina da Covid",
     subtitulo: "Posto de saúde do bairro",
     destaque: "",
@@ -24,7 +24,9 @@ export const dadosEventos: Evento[] = [
     },
     status: "realizado",
     criticidade: "media",
-    acao: false,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f2",
@@ -32,7 +34,7 @@ export const dadosEventos: Evento[] = [
     previsto: new Date("2023-04-26T18:10Z"),
     realizado: new Date("2023-04-26T18:15Z"),
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Vacina da gripe",
     subtitulo: "Posto de saúde do bairro",
     destaque: "",
@@ -42,15 +44,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "cancelado",
     criticidade: "baixa",
-    acao: false,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f3",
-    data: new Date("2023-05-03T09:00Z"),
-    previsto: new Date("2023-05-03T09:00Z"),
-    realizado: new Date("2023-05-03T09:00Z"),
+    data: new Date("2023-05-03T11:00Z"),
+    previsto: new Date("2023-05-03T11:00Z"),
+    realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Ligar para médica",
     subtitulo: "",
     destaque: "",
@@ -60,15 +64,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: true,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f4",
-    data: new Date("2023-05-03T10:00Z"),
-    previsto: new Date("2023-05-03T10:00Z"),
+    data: new Date("2023-05-03T15:00Z"),
+    previsto: new Date("2023-05-03T15:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Passeio no parque",
     subtitulo: "",
     destaque: "",
@@ -78,15 +84,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: false,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f5",
-    data: new Date("2023-05-03T11:00Z"),
-    previsto: new Date("2023-05-03T11:00Z"),
+    data: new Date("2023-05-03T20:00Z"),
+    previsto: new Date("2023-05-03T20:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Exames do coração",
     subtitulo: "Hospital do Coração",
     destaque: "",
@@ -96,15 +104,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "media",
-    acao: true,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f6",
-    data: new Date("2023-05-01T12:00Z"),
-    previsto: new Date("2023-05-01T12:00Z"),
+    data: new Date("2023-04-01T12:00Z"),
+    previsto: new Date("2023-04-01T12:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Consulta",
     subtitulo: "Posto de saúde",
     destaque: "Remarcado",
@@ -114,15 +124,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "adiado",
     criticidade: "baixa",
-    acao: false,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f7",
-    data: new Date("2023-05-01T13:00Z"),
-    previsto: new Date("2023-05-01T13:00Z"),
+    data: new Date("2023-04-01T13:00Z"),
+    previsto: new Date("2023-04-01T13:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Consulta cardiologista",
     subtitulo: "Posto de saúde do bairro",
     destaque: "",
@@ -132,15 +144,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "realizado",
     criticidade: "alta",
-    acao: true,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f8",
-    data: new Date("2023-05-03T12:30Z"),
-    previsto: new Date("2023-05-03T12:30Z"),
+    data: new Date("2023-05-03T12:00Z"),
+    previsto: new Date("2023-05-03T12:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Dentista",
     subtitulo: "Reta da Penha",
     destaque: "",
@@ -150,15 +164,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: false,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f9",
-    data: new Date("2023-05-03T14:30Z"),
-    previsto: new Date("2023-05-03T14:30Z"),
+    data: new Date("2023-05-03T13:00Z"),
+    previsto: new Date("2023-05-03T13:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Consulta",
     subtitulo: "Hospital central",
     destaque: "",
@@ -168,15 +184,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "alta",
-    acao: true,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f10",
-    data: new Date("2023-05-03T15:30Z"),
-    previsto: new Date("2023-05-03T15:30Z"),
+    data: new Date("2023-05-03T14:27Z"),
+    previsto: new Date("2023-05-03T14:27Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Remédio de pressão",
     subtitulo: "Aferir a pressão",
     destaque: "",
@@ -186,15 +204,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "alta",
-    acao: false,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f11",
-    data: new Date("2023-05-03T16:00Z"),
-    previsto: new Date("2023-05-03T16:00Z"),
+    data: new Date("2023-05-03T15:00Z"),
+    previsto: new Date("2023-05-03T15:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Checar temperatura",
     subtitulo: "",
     destaque: "",
@@ -204,15 +224,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: true,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f12",
-    data: new Date("2023-05-03T17:00Z"),
-    previsto: new Date("2023-05-03T17:00Z"),
+    data: new Date("2023-05-08T16:00Z"),
+    previsto: new Date("2023-05-08T16:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Avaliação Física",
     subtitulo: "",
     destaque: "IMC: 28,4",
@@ -222,15 +244,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: false,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f13",
-    data: new Date("2023-05-03T18:00Z"),
-    previsto: new Date("2023-05-03T18:00Z"),
+    data: new Date("2023-05-09T19:00Z"),
+    previsto: new Date("2023-05-09T19:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Vacina da gripe",
     subtitulo: "Posto de saúde do bairro",
     destaque: "",
@@ -240,15 +264,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: true,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f14",
-    data: new Date("2023-05-03T19:00Z"),
-    previsto: new Date("2023-05-03T19:00Z"),
+    data: new Date("2023-05-09T17:00Z"),
+    previsto: new Date("2023-05-09T17:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Vitamina D",
     subtitulo: "2 comprimidos",
     destaque: "",
@@ -258,15 +284,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: false,
+    aoCLicar: () => alert("Olá, mundo!"),
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f15",
-    data: new Date("2023-05-03T20:00Z"),
-    previsto: new Date("2023-05-03T20:00Z"),
+    data: new Date("2023-05-09T18:01Z"),
+    previsto: new Date("2023-05-09T18:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Fisioterapia",
     subtitulo: "",
     destaque: "",
@@ -276,6 +304,8 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: true,
+
+    atual: false,
+    scroll: false,
   },
 ];

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

@@ -1,12 +1,13 @@
-import Timeline from './Timeline.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { dadosEventos, dadosPerfil } from './Timeline.mock';
+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',
+  title: "Devix/Timeline/Organismos/Timeline",
   component: Timeline,
   parameters: {
-    componentSubtitle: 'Linha do tempo padrão com identidade da Devix',
+    componentSubtitle: "Linha do tempo padrão com identidade da Devix",
   },
   argTypes: {},
 } as Meta<typeof Timeline>;
@@ -15,6 +16,22 @@ 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() {