@devix-tecnologia/timeline-vue 1.1.1 → 1.2.0

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

@@ -1,73 +0,0 @@
-<template>
-  <div :class="classes" class="iconeStatus"></div>
-</template>
-<script lang="ts">
-import { defineComponent, reactive, computed } from "vue";
-
-export default defineComponent({
-  name: "status",
-  props: {
-    status: {
-      required: true,
-      type: String,
-    },
-  },
-  components: {},
-  setup(props) {
-    props = reactive(props);
-    return {
-      classes: computed(() => ({
-        [`${props.status || "planejado"}`]: true,
-      })),
-    };
-  },
-});
-</script>
-<style scoped>
-/* icones */
-.iconeStatus {
-  font-size: 1.8rem;
-  line-height: 1rem;
-  color: var(--cor-secundaria);
-  width: 1.6rem;
-  display: table-cell;
-  padding: 2.4rem 1.4rem;
-  vertical-align: top;
-  padding-top: 3.7rem;
-}
-
-.realizado.iconeStatus {
-  color: var(--cor-sucesso);
-}
-.realizado.iconeStatus::before {
-  font-family: "Material Symbols Outlined";
-  content: "\e86c";
-}
-.cancelado.iconeStatus {
-  color: var(--cor-importante);
-}
-.cancelado.iconeStatus::before {
-  font-family: "Material Symbols Outlined";
-  content: "\e5c9";
-}
-.adiado.iconeStatus {
-  color: var(--cor-apoio);
-}
-.adiado.iconeStatus::before {
-  font-family: "Material Symbols Outlined";
-  content: "\e923";
-}
-
-.planejado.iconeStatus {
-  opacity: 0;
-}
-.planejado.iconeStatus::before {
-  font-family: "Material Symbols Outlined";
-  content: "\e838";
-}
-.atrasado.iconeStatus::before {
-  font-family: "Material Symbols Outlined";
-  content: "\f725";
-  color: var(--cor-alerta);
-}
-</style>

package/src/components/timeline/atomos/SubtituloEvento.stories.ts

@@ -1,24 +0,0 @@
-import '@fontsource/material-icons';
-import SubtituloEvento from './SubtituloEvento.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Devix/Timeline/Atomos/SubtituloEvento',
-  component: SubtituloEvento,
-  argTypes: {
-    // subtitulo: { control: { type: String } },
-  },
-} as Meta<typeof SubtituloEvento>;
-
-const subtituloEventooMock = 'subtitulo';
-
-const Template: StoryFn<typeof SubtituloEvento> = (args) => ({
-  components: { SubtituloEvento },
-  setup() {
-    return { args };
-  },
-  template: '<SubtituloEvento v-bind="args"  />',
-});
-
-export const Padrao = Template.bind({});
-Padrao.args = { subtitulo: subtituloEventooMock };

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

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

package/src/components/timeline/atomos/TituloEvento.stories.ts

@@ -1,24 +0,0 @@
-import '@fontsource/material-icons';
-import TituloEvento from './TituloEvento.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Devix/Timeline/Atomos/TituloEvento',
-  component: TituloEvento,
-  argTypes: {
-    // titulo: { control: { type: String } },
-  },
-} as Meta<typeof TituloEvento>;
-
-const tituloEventoMock = 'titulo';
-
-const Template: StoryFn<typeof TituloEvento> = (args) => ({
-  components: { TituloEvento },
-  setup() {
-    return { args };
-  },
-  template: '<TituloEvento v-bind="args"  />',
-});
-
-export const Padrao = Template.bind({});
-Padrao.args = { titulo: tituloEventoMock };

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