@devix-tecnologia/timeline-vue 1.0.1

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

@@ -0,0 +1,102 @@
+<template>
+  <article
+    class="eventoTimeline"
+    :class="[
+      dadosEvento.valor.status,
+      'criticidade-' + dadosEvento.valor.criticidade,
+      eventoSelecionado,
+    ]"
+  >
+    <IconeStatus :status="dadosEvento.valor.status" />
+    <HoraEvento
+      :horaPrevista="dadosEvento.valor.previsto"
+      :horaRealizada="dadosEvento.valor.realizado"
+    />
+    <IconeCategoria
+      :iconeCategoria="dadosEvento.valor.categoria.icone"
+      :categoria="dadosEvento.valor.categoria.nome"
+    />
+    <DescricaoEvento
+      :titulo="dadosEvento.valor.titulo"
+      :subtitulo="dadosEvento.valor.subtitulo"
+    />
+    <Destaque :destaque="dadosEvento.valor.destaque" />
+  </article>
+</template>
+<script lang="ts">
+import { defineComponent, computed } 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";
+
+export default defineComponent({
+  props: {
+    dadosEvento: {
+      required: true,
+      type: Object,
+    },
+  },
+  components: {
+    IconeStatus,
+    IconeCategoria,
+    HoraEvento,
+    DescricaoEvento,
+    Destaque,
+  },
+  setup(props) {
+    return {
+      eventoSelecionado: computed(() => ({
+        atual: props.dadosEvento.atual == true,
+        padrao: props.dadosEvento.atual == false,
+      })),
+    };
+  },
+});
+</script>
+<style scoped>
+/* BOX DO EVENTO */
+
+.eventoTimeline {
+  position: relative;
+  width: 100%;
+  border-radius: 1rem;
+}
+
+.eventoTimeline:hover {
+  background: #f9f9f9;
+}
+
+.atual {
+  background: var(--cor-selecao);
+}
+
+.atual:hover {
+  background: var(--cor-selecao);
+}
+
+/* box com as informações */
+
+.eventoTimeline:before {
+  content: "";
+  background: var(--cor-linha);
+  display: block;
+  position: absolute;
+  width: 2px;
+  top: 0;
+  height: 1.5rem;
+  left: 11.7rem;
+}
+
+.eventoTimeline:after {
+  content: "";
+  background: var(--cor-linha);
+  display: block;
+  position: absolute;
+  width: 2px;
+  top: 5.1rem;
+  bottom: 0;
+  left: 11.7rem;
+}
+</style>

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

@@ -0,0 +1,37 @@
+import HoraEvento from './HoraEvento.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Devix/Timeline/Moleculas/HoraEvento',
+  component: HoraEvento,
+  argTypes: {
+    // aparencia: {
+    //   control: { type: 'select' },
+    //   options: ['padrao', 'riscada'],
+    // },
+  },
+} as Meta<typeof HoraEvento>;
+
+const horaMock = '2023-12-10T11:00Z';
+
+const Template: StoryFn<typeof HoraEvento> = (args) => ({
+  components: { HoraEvento: HoraEvento },
+  setup() {
+    return { args };
+  },
+  template: '<HoraEvento v-bind="args"  />',
+});
+
+export const Padrao = Template.bind({});
+Padrao.args = {
+  horaPrevista: horaMock,
+  horaRealizada: '',
+  // aparencia: 'padrao',
+};
+
+export const Atrasado = Template.bind({});
+Atrasado.args = {
+  horaPrevista: horaMock,
+  horaRealizada: '2023-12-10T12:00Z',
+  // aparencia: 'riscada',
+};

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

@@ -0,0 +1,73 @@
+<template>
+  <div class="areaHora">
+    <div class="horaEvento">
+      <Hora
+        v-if="horaRealizada"
+        class="horaRealizada texto-grande"
+        :hora="horaRealizada"
+        style="padding-top: 0.3rem"
+      />
+      <Hora
+        v-if="horaRealizada"
+        class="horaPlanejada texto-pequeno"
+        :hora="horaPrevista"
+      />
+
+      <Hora
+        v-else
+        class="horaRealizada texto-grande"
+        :hora="horaPrevista"
+        style="padding-top: 1.2rem"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Hora from '../atomos/Hora.vue';
+
+export default defineComponent({
+  props: {
+    horaPrevista: {
+      type: Date,
+      required: true,
+    },
+    horaRealizada: {
+      type: Date,
+    },
+    // aparencia: {
+    //   type: String,
+    // },
+  },
+  components: { Hora },
+  setup() {
+    return {};
+  },
+});
+</script>
+<style scoped>
+.realizado .horaEvento,
+.cancelado .horaEvento,
+.adiado .horaEvento {
+  opacity: 0.4;
+}
+.areaHora {
+  width: 4.5rem;
+  display: table-cell;
+  vertical-align: top;
+  text-align: right;
+  padding: 1.4rem 0;
+}
+.horaEvento {
+  line-height: 1.4rem;
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+}
+.horaRealizada {
+  font-weight: 500;
+}
+.horaPlanejada {
+  text-decoration: line-through;
+}
+</style>

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

@@ -0,0 +1,40 @@
+import PerfilTimeline from "./PerfilTimeline.vue";
+import { Meta, StoryFn } from "@storybook/vue3";
+
+export default {
+  title: "Devix/Timeline/Moleculas/PerfilTimeline",
+  component: PerfilTimeline,
+  argTypes: {},
+} as Meta<typeof PerfilTimeline>;
+
+const avatar =
+  "https://images.unsplash.com/photo-1526080652727-5b77f74eacd2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1752&q=80";
+
+const Template: StoryFn<typeof PerfilTimeline> = (args) => ({
+  components: { PerfilTimeline: PerfilTimeline },
+  setup() {
+    return { args };
+  },
+  template: '<PerfilTimeline v-bind="args" style="position: relative"  />',
+});
+
+export const ComImagem = Template.bind({});
+ComImagem.args = {
+  imagemPerfil: avatar,
+  nomePerfil: "Dona Maria",
+  iconePerfil: "",
+};
+
+export const ComIcone = Template.bind({});
+ComIcone.args = {
+  imagemPerfil: "",
+  nomePerfil: "Dona Maria",
+  iconePerfil: "person",
+};
+
+export const ApenasTitulo = Template.bind({});
+ApenasTitulo.args = {
+  imagemPerfil: "",
+  nomePerfil: "Dona Maria",
+  iconePerfil: "",
+};

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

@@ -0,0 +1,103 @@
+<template>
+  <div
+    class="perfilTimeline"
+    ref="elementoFixo"
+    :style="style"
+    :class="{ fixed: isFixed }"
+  >
+    <!-- :class="{ fixed: isFixed }" -->
+    <AvatarTimeline v-if="imagemPerfil" :imagem="imagemPerfil" />
+    <AvatarTimeline v-else-if="iconePerfil" :icone="iconePerfil" />
+    <h2 class="nome">{{ nomePerfil }}</h2>
+  </div>
+</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,
+    }));
+    // 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,
+    };
+  },
+});
+</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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,101 @@
+<template>
+  <div class="separadorPeriodo">
+    <div class="areaData">
+      <BoxData :dataNumero="dia" :aparencia="aparencia" />
+    </div>
+    <h3 class="titulo" :class="aparencia">{{ mes }} de {{ ano }}</h3>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import BoxData from "../atomos/BoxData.vue";
+
+export default defineComponent({
+  name: "SeparadorPeriodo",
+  props: {
+    dataSeparador: {
+      required: true,
+      type: String,
+    },
+    aparencia: {
+      type: String,
+    },
+  },
+  components: { BoxData },
+  setup(props) {
+    const numeroMes = [
+      "janeiro",
+      "fevereiro",
+      "março",
+      "abril",
+      "maio",
+      "junho",
+      "julho",
+      "agosto",
+      "setembro",
+      "outubro",
+      "novembro",
+      "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 };
+  },
+});
+</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.7rem;
+}
+
+.areaData:after {
+  content: "";
+  background: var(--cor-linha);
+  display: block;
+  position: absolute;
+  width: 2px;
+  height: 2.5rem;
+  bottom: 0;
+  left: 11.7rem;
+}
+
+.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

@@ -0,0 +1,38 @@
+<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>