@devix-tecnologia/timeline-vue 1.1.1 → 1.1.2

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

@@ -1,158 +0,0 @@
-<template>
-  <article
-    class="eventoTimeline"
-    :class="[status, 'criticidade-' + criticidade, eventoSelecionado, clicavel]"
-    :onclick="aoCLicar"
-  >
-    <IconeStatus :status="status" />
-    <HoraEvento :horaPrevista="previsto" :horaRealizada="realizado" />
-    <IconeCategoria
-      :iconeCategoria="categoria.icone"
-      :categoria="categoria.nome"
-    />
-    <DescricaoEvento :titulo="titulo" :subtitulo="subtitulo" />
-    <Destaque :destaque="destaque" />
-  </article>
-</template>
-<script lang="ts">
-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: {
-    status: {
-      required: true,
-      type: String,
-    },
-    criticidade: {
-      required: true,
-      type: String,
-    },
-    ehAtual: {
-      required: true,
-      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: {
-    IconeStatus,
-    IconeCategoria,
-    HoraEvento,
-    DescricaoEvento,
-    Destaque,
-  },
-  setup(props) {
-    return {
-      eventoSelecionado: computed(() => ({
-        atual: props.ehAtual,
-        padrao: props.ehAtual,
-      })),
-      clicavel: computed(() => ({
-        clicavel: props.aoCLicar !== undefined,
-      })),
-    };
-  },
-});
-</script>
-<style scoped>
-/* BOX DO EVENTO */
-
-.eventoTimeline {
-  position: relative;
-  width: 100%;
-  border-radius: 1rem;
-}
-
-.clicavel {
-  cursor: pointer;
-}
-
-.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: 2.5rem;
-  left: 11.9rem;
-}
-
-.eventoTimeline:after {
-  content: "";
-  background: var(--cor-linha);
-  display: block;
-  position: absolute;
-  width: 2px;
-  top: 6.1rem;
-  bottom: 0;
-  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.stories.ts

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

@@ -1,74 +0,0 @@
-<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, PropType } from "vue";
-import Hora from "../atomos/Hora.vue";
-
-export default defineComponent({
-  props: {
-    horaPrevista: {
-      type: Date,
-      required: true,
-    },
-    horaRealizada: {
-      required: false,
-      type: Date as PropType<Date | null>,
-    },
-    // 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: 2.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

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

@@ -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>