@devix-tecnologia/timeline-vue 1.1.0 → 1.1.2

package/src/components/timeline/atomos/TituloEvento.vue

@@ -1,32 +0,0 @@
-<template>
-  <h3 class="titulo">{{ titulo }}</h3>
-</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    titulo: {
-      required: true,
-      type: String,
-    },
-  },
-  components: {},
-  setup() {
-    return {};
-  },
-});
-</script>
-
-<style scoped>
-/* descrição do evento */
-.descricaoEvento .titulo {
-  line-height: 1.4rem;
-  margin: 0;
-  color: var(--cor-texto);
-}
-
-.bg-selecionado .descricaoEvento .titulo {
-  color: var(--cor-texto-selecao);
-}
-</style>

package/src/components/timeline/index.ts

@@ -1,7 +0,0 @@
-// Organismos
-import Timeline from "./organismos/Timeline.vue";
-
-// Tipos
-import * as Tipos from "./type";
-
-export { Timeline, Tipos };

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

@@ -1,31 +0,0 @@
-import DescricaoEvento from './DescricaoEvento.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Devix/Timeline/Moleculas/DescricaoEvento',
-  component: DescricaoEvento,
-  argTypes: {},
-} as Meta<typeof DescricaoEvento>;
-
-const tituloMock = 'Título';
-const subtituloMock = 'Subtítulo';
-
-const Template: StoryFn<typeof DescricaoEvento> = (args) => ({
-  components: { DescricaoEvento: DescricaoEvento },
-  setup() {
-    return { args };
-  },
-  template: '<DescricaoEvento v-bind="args"  />',
-});
-
-export const Simples = Template.bind({});
-Simples.args = {
-  titulo: tituloMock,
-  subtitulo: '',
-};
-
-export const Completa = Template.bind({});
-Completa.args = {
-  titulo: tituloMock,
-  subtitulo: subtituloMock,
-};

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

@@ -1,59 +0,0 @@
-<template>
-  <div v-if="subtitulo" class="descricaoEvento">
-    <TituloEvento :titulo="titulo" />
-    <SubtituloEvento :subtitulo="subtitulo" />
-  </div>
-  <div v-else class="descricaoEvento" style="padding-top: 3.3rem">
-    <TituloEvento :titulo="titulo" />
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent } from "vue";
-import SubtituloEvento from "../atomos/SubtituloEvento.vue";
-import TituloEvento from "../atomos/TituloEvento.vue";
-
-export default defineComponent({
-  props: {
-    titulo: {
-      required: true,
-      type: String,
-    },
-    subtitulo: {
-      required: true,
-      type: String,
-    },
-  },
-  components: { TituloEvento, SubtituloEvento },
-  setup() {
-    return {};
-  },
-});
-</script>
-
-<style scoped>
-/* descrição do evento */
-
-.descricaoEvento {
-  display: table-cell;
-  vertical-align: top;
-  padding: 2.4rem;
-  padding-left: 0;
-}
-
-.realizado .descricaoEvento,
-.cancelado .descricaoEvento,
-.adiado .descricaoEvento {
-  opacity: 0.4;
-}
-
-.descricaoEvento .titulo {
-  line-height: 1.8rem;
-  margin: 0;
-}
-
-@media only screen and (max-width: 400px) {
-  .descricaoEvento {
-    max-width: 15rem;
-  }
-}
-</style>

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

@@ -1,94 +0,0 @@
-import EventoTimeline from "./EventoTimeline.vue";
-import { Meta, StoryFn } from "@storybook/vue3";
-
-export default {
-  title: "Devix/Timeline/Moleculas/EventoTimeline",
-  component: EventoTimeline,
-  argTypes: {
-    status: {
-      control: { type: "select" },
-      options: ["planejado", "realizado", "cancelado", "adiado", "atrasado"],
-    },
-    criticidade: {
-      control: { type: "select" },
-      options: ["normal", "media", "alta"],
-    },
-  },
-} as Meta<typeof EventoTimeline>;
-
-const Template: StoryFn<typeof EventoTimeline> = (args) => ({
-  components: { EventoTimeline: EventoTimeline },
-  setup() {
-    return { 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: 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",
-  },
-  status: "planejado",
-  criticidade: "media",
-  acao: false,
-  ehAtual: false,
-};
-
-export const Atual = Template.bind({});
-Atual.args = {
-  previsto: new Date("2023-04-19T10:00Z"),
-  realizado: "",
-  titulo: "Consulta",
-  subtitulo: "Posto de saúde",
-  destaque: "",
-  categoria: {
-    nome: "Tele consulta",
-    icone: "call",
-  },
-  status: "realizado",
-  criticidade: "alta",
-  acao: false,
-  ehAtual: true,
-};
-
-export const Importante = Template.bind({});
-Importante.args = {
-  previsto: new Date("2023-04-19T18:00Z"),
-  realizado: "",
-  titulo: "Consulta cardiologista",
-  subtitulo: "Posto de saúde do bairro",
-  destaque: "",
-  categoria: {
-    nome: "Cardiologista",
-    icone: "cardiology",
-  },
-  status: "planejado",
-  criticidade: "alta",
-  acao: false,
-  ehAtual: false,
-};
-
-export const Realizado = Template.bind({});
-Realizado.args = {
-  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",
-  },
-  status: "realizado",
-  criticidade: "media",
-  acao: true,
-  ehAtual: false,
-};

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,102 +0,0 @@
-<template>
-  <section
-    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>
-  </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,
-    }));
-    // 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,
-      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

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