@devix-tecnologia/timeline-vue 1.0.1 → 1.1.0

package/src/components/timeline/moleculas/EventoTimeline.stories.ts

@@ -1,17 +1,17 @@
-import EventoTimeline from './EventoTimeline.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
+import EventoTimeline from "./EventoTimeline.vue";
+import { Meta, StoryFn } from "@storybook/vue3";
 
 export default {
-  title: 'Devix/Timeline/Moleculas/EventoTimeline',
+  title: "Devix/Timeline/Moleculas/EventoTimeline",
   component: EventoTimeline,
   argTypes: {
     status: {
-      control: { type: 'select' },
-      options: ['planejado', 'realizado', 'cancelado', 'adiado', 'atrasado'],
+      control: { type: "select" },
+      options: ["planejado", "realizado", "cancelado", "adiado", "atrasado"],
     },
     criticidade: {
-      control: { type: 'select' },
-      options: ['normal', 'media', 'alta'],
+      control: { type: "select" },
+      options: ["normal", "media", "alta"],
     },
   },
 } as Meta<typeof EventoTimeline>;
@@ -21,74 +21,74 @@ const Template: StoryFn<typeof EventoTimeline> = (args) => ({
   setup() {
     return { args };
   },
-  template: '<EventoTimeline :dadosEvento="args" />',
+  template:
+    '<EventoTimeline :status="args.status"  :criticidade="args.criticidade"  :ehAtual="args.ehAtual"  :previsto="args.previsto"  :realizado="args.realizado"  :categoria="args.categoria"  :titulo="args.titulo"  :subtitulo="args.subtitulo" :destaque="args.destaque" />',
 });
 
 export const Padrao = Template.bind({});
 Padrao.args = {
-  previsto: '2023-04-19T11:00Z',
-  realizado: '',
-  tolerancia: '',
-  titulo: 'Consulta Clinico geral',
-  subtitulo: 'Posto de saúde do bairro',
-  destaque: 'Estava passando mal',
+  previsto: new Date("2023-04-19T11:00Z"),
+  realizado: "",
+  titulo: "Consulta Clinico geral",
+  subtitulo: "Posto de saúde do bairro",
+  destaque: "Estava passando mal",
   categoria: {
-    nome: 'Cardiologista',
-    icone: 'cardiology',
+    nome: "Cardiologista",
+    icone: "cardiology",
   },
-  status: 'planejado',
-  criticidade: 'media',
+  status: "planejado",
+  criticidade: "media",
   acao: false,
+  ehAtual: false,
 };
 
 export const Atual = Template.bind({});
 Atual.args = {
-  previsto: '2023-04-19T10:00Z',
-  realizado: '',
-  tolerancia: '',
-  titulo: 'Consulta',
-  subtitulo: 'Posto de saúde',
-  destaque: '',
+  previsto: new Date("2023-04-19T10:00Z"),
+  realizado: "",
+  titulo: "Consulta",
+  subtitulo: "Posto de saúde",
+  destaque: "",
   categoria: {
-    nome: 'Tele consulta',
-    icone: 'call',
+    nome: "Tele consulta",
+    icone: "call",
   },
-  status: 'realizado',
-  criticidade: 'alta',
+  status: "realizado",
+  criticidade: "alta",
   acao: false,
-  selecionado: true,
+  ehAtual: true,
 };
 
 export const Importante = Template.bind({});
 Importante.args = {
-  previsto: '2023-04-19T18:00Z',
-  realizado: '',
-  tolerancia: '',
-  titulo: 'Consulta cardiologista',
-  subtitulo: 'Posto de saúde do bairro',
-  destaque: '',
+  previsto: new Date("2023-04-19T18:00Z"),
+  realizado: "",
+  titulo: "Consulta cardiologista",
+  subtitulo: "Posto de saúde do bairro",
+  destaque: "",
   categoria: {
-    nome: 'Cardiologista',
-    icone: 'cardiology',
+    nome: "Cardiologista",
+    icone: "cardiology",
   },
-  status: 'planejado',
-  criticidade: 'alta',
+  status: "planejado",
+  criticidade: "alta",
   acao: false,
+  ehAtual: false,
 };
 
 export const Realizado = Template.bind({});
 Realizado.args = {
-  previsto: '2023-04-20T12:30Z',
-  realizado: '',
-  tolerancia: '',
-  titulo: 'Vacina da gripe',
-  subtitulo: 'Posto de saúde do bairro',
-  destaque: '',
+  previsto: new Date("2023-04-20T12:30Z"),
+  realizado: "",
+  titulo: "Vacina da gripe",
+  subtitulo: "Posto de saúde do bairro",
+  destaque: "",
   categoria: {
-    nome: 'Vacina',
-    icone: 'vaccines',
+    nome: "Vacina",
+    icone: "vaccines",
   },
-  status: 'realizado',
-  criticidade: 'media',
+  status: "realizado",
+  criticidade: "media",
   acao: true,
+  ehAtual: false,
 };

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,5 +1,5 @@
 <template>
-  <div
+  <section
     class="perfilTimeline"
     ref="elementoFixo"
     :style="style"
@@ -9,7 +9,7 @@
     <AvatarTimeline v-if="imagemPerfil" :imagem="imagemPerfil" />
     <AvatarTimeline v-else-if="iconePerfil" :icone="iconePerfil" />
     <h2 class="nome">{{ nomePerfil }}</h2>
-  </div>
+  </section>
 </template>
 
 <script lang="ts">
@@ -68,7 +68,6 @@ export default defineComponent({
 
     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 {