@devix-tecnologia/timeline-vue 1.1.1 → 1.2.0

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

@@ -1,76 +0,0 @@
-<template>
-  <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>
-  </section>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  ref,
-  onMounted,
-  onUnmounted,
-  reactive,
-  computed,
-} from "vue";
-import AvatarTimeline from "../atomos/AvatarTimeline.vue";
-
-export default defineComponent({
-  components: { AvatarTimeline },
-  props: {
-    imagemPerfil: {
-      type: String,
-    },
-    nomePerfil: {
-      type: String,
-    },
-    iconePerfil: {
-      type: String,
-    },
-    backgroundColor: {
-      type: String,
-      default: "var(--cor-primaria)",
-    },
-  },
-  setup(props) {
-    props = reactive(props);
-    // passando o background por props no style
-    const style = computed(() => ({
-      backgroundColor: props.backgroundColor,
-    }));
-
-    return {
-      style,
-    };
-  },
-});
-</script>
-
-<style scoped>
-.perfilTimeline {
-  background: var(--cor-primaria);
-  padding: 1.4rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 1.4rem;
-  z-index: 999;
-  width: 100%;
-  min-height: 8rem;
-  transition: all 0.3s;
-}
-
-.nome {
-  color: var(--cor-secundaria);
-}
-
-.fixed {
-  position: fixed;
-  top: 0;
-  left: 0;
-  transition: all 0.3s;
-}
-</style>

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

@@ -1,42 +0,0 @@
-import SeparadorPeriodo from './SeparadorPeriodo.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Devix/Timeline/Moleculas/SeparadorPeriodo',
-  component: SeparadorPeriodo,
-  argTypes: {
-    aparencia: {
-      control: { type: 'select' },
-      options: ['padrao', 'escuro', 'claro'],
-    },
-  },
-} as Meta<typeof SeparadorPeriodo>;
-
-const Template: StoryFn<typeof SeparadorPeriodo> = (args) => ({
-  components: { SeparadorPeriodo: SeparadorPeriodo },
-  setup() {
-    return { args };
-  },
-  template: '<SeparadorPeriodo v-bind="args"  />',
-});
-
-export const Padrao = Template.bind({});
-Padrao.args = {
-  dataSeparador: '01',
-  mesNome: 'Janeiro',
-  aparencia: 'padrao',
-};
-
-export const Escuro = Template.bind({});
-Escuro.args = {
-  dataSeparador: '01',
-  mesNome: 'Janeiro',
-  aparencia: 'escuro',
-};
-
-export const Claro = Template.bind({});
-Claro.args = {
-  dataSeparador: '01',
-  mesNome: 'Janeiro',
-  aparencia: 'claro',
-};

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