@devix-tecnologia/timeline-vue 1.0.1

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

@@ -0,0 +1,53 @@
+<template>
+  <div class="hora" :class="classes">{{ horaString }}</div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, computed } from 'vue';
+
+export default defineComponent({
+  name: 'hora',
+  props: {
+    hora: {
+      required: true,
+      type: Date,
+    },
+    aparencia: {
+      type: String,
+    },
+  },
+  components: {},
+  setup(props) {
+    props = reactive(props);
+
+    const data =  props.hora;
+    const horaSimples = data.getHours();
+    const minutos = data.getMinutes();
+    const horaString = `${horaSimples}:${minutos.toString().padStart(2, '0')}`;
+    return {
+      classes: computed(() => ({
+        [`hora-${props.aparencia || ''}`]: true,
+      })),
+      horaString,
+    };
+  },
+});
+</script>
+<style scoped>
+.hora {
+  color: var(--cor-texto);
+}
+
+.bg-selecionado .hora {
+  color: var(--cor-texto-selecao);
+}
+.hora-padrao,
+.horaRealizada {
+  font-weight: 500;
+  font-size: 1.4rem;
+}
+.hora-riscada,
+.horaPlanejada {
+  text-decoration: line-through;
+  font-size: 1rem;
+}
+</style>

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

@@ -0,0 +1,60 @@
+import '@fontsource/material-icons';
+import IconeCategoria from './IconeCategoria.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Devix/Timeline/Atomos/IconeCategoria',
+  component: IconeCategoria,
+  argTypes: {
+    // categoria: { control: { type: String } },
+    tipo: {
+      control: { type: 'select' },
+      options: ['padrao', 'importante', 'alerta', 'sucesso'],
+    },
+  },
+} as Meta<typeof IconeCategoria>;
+
+const categoriaMock = 'call';
+
+const Template: StoryFn<typeof IconeCategoria> = (args) => ({
+  components: { IconeCategoria },
+  setup() {
+    return { args };
+  },
+  template: '<IconeCategoria v-bind="args"  />',
+});
+
+export const Escuro = Template.bind({});
+Escuro.args = {
+  iconeCategoria: categoriaMock,
+  escuro: true,
+  tipo: 'padrao',
+};
+
+export const Claro = Template.bind({});
+Claro.args = {
+  iconeCategoria: categoriaMock,
+  escuro: false,
+  tipo: 'padrao',
+};
+
+export const Importante = Template.bind({});
+Importante.args = {
+  iconeCategoria: categoriaMock,
+  escuro: true,
+  tipo: 'importante',
+};
+
+export const Alerta = Template.bind({});
+Alerta.args = {
+  iconeCategoria: categoriaMock,
+  escuro: true,
+  tipo: 'alerta',
+};
+
+export const Sucesso = Template.bind({});
+Sucesso.args = {
+  iconeCategoria: categoriaMock,
+  escuro: true,
+  tipo: 'sucesso',
+};

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

@@ -0,0 +1,110 @@
+<template>
+  <div class="areaCategoria">
+    <div
+      class="iconeCategoria"
+      :class="classes"
+      :style="style"
+      :alt="categoria"
+    >
+      <span class="material-symbols-outlined"> {{ iconeCategoria }} </span>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, computed } from 'vue';
+export default defineComponent({
+  name: 'categoria',
+  props: {
+    iconeCategoria: {
+      type: String,
+      required: true,
+    },
+    categoria: {
+      type: String,
+    },
+    escuro: {
+      type: Boolean,
+      default: true,
+    },
+    tipo: {
+      type: String,
+    },
+    borderColor: {
+      type: String,
+    },
+    backgroundColor: {
+      type: String,
+    },
+  },
+  setup(props) {
+    props = reactive(props);
+    return {
+      classes: computed(() => ({
+        'bg-escuro': props.escuro,
+        'bg-claro': !props.escuro,
+        [`borda-${props.tipo || 'padrao'}`]: true,
+      })),
+      style: computed(() => ({
+        borderColor: props.borderColor,
+        backgroundColor: props.backgroundColor,
+      })),
+    };
+  },
+});
+</script>
+<style scoped>
+/* icone com categoria */
+
+.areaCategoria {
+  display: table-cell;
+  align-items: center;
+  width: 3rem;
+  padding: 1.8rem 1.4rem;
+}
+
+.bg-escuro,
+.iconeCategoria {
+  background: var(--cor-secundaria);
+  border-radius: 50%;
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  color: var(--cor-terciaria);
+  border: 3px solid var(--cor-secundaria);
+}
+
+.iconeCategoria span {
+  font-size: 2rem;
+}
+
+.iconeCategoria.bg-claro,
+.realizado .iconeCategoria,
+.cancelado .iconeCategoria,
+.adiado .iconeCategoria {
+  opacity: 0.3;
+}
+
+.iconeCategoria.borda-alerta,
+.criticidade-media .iconeCategoria {
+  border-color: var(--cor-alerta);
+}
+
+.iconeCategoria.borda-importante,
+.criticidade-alta .iconeCategoria {
+  border-color: var(--cor-importante);
+}
+
+.iconeCategoria.borda-sucesso {
+  border-color: var(--cor-sucesso);
+}
+
+.bg-claro.iconeCategoria.borda-importante,
+.adiado.criticidade-alta .iconeCategoria,
+.cancelado.criticidade-alta .iconeCategoria,
+.realizado.criticidade-alta .iconeCategoria {
+  border-color: var(--cor-importante);
+}
+</style>

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

@@ -0,0 +1,38 @@
+import '@fontsource/material-icons';
+import IconeStatus from './IconeStatus.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Devix/Timeline/Atomos/IconeStatus',
+  component: IconeStatus,
+  argTypes: {
+    // status: { control: { type: String } },
+    status: {
+      control: { type: 'select' },
+      options: ['planejado', 'realizado', 'cancelado', 'adiado', 'atrasado'],
+    },
+  },
+} as Meta<typeof IconeStatus>;
+
+const Template: StoryFn<typeof IconeStatus> = (args) => ({
+  components: { IconeStatus },
+  setup() {
+    return { args };
+  },
+  template: '<IconeStatus v-bind="args"  />',
+});
+
+export const Planejado = Template.bind({});
+Planejado.args = { status: 'planejado' };
+
+export const Realizado = Template.bind({});
+Realizado.args = { status: 'realizado' };
+
+export const Cancelado = Template.bind({});
+Cancelado.args = { status: 'cancelado' };
+
+export const Adiado = Template.bind({});
+Adiado.args = { status: 'adiado' };
+
+export const Atrasado = Template.bind({});
+Atrasado.args = { status: 'atrasado' };

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

@@ -0,0 +1,72 @@
+<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.6rem;
+  line-height: 1rem;
+  color: var(--cor-secundaria);
+  width: 1.6rem;
+  display: table-cell;
+  padding: 1.4rem;
+  vertical-align: top;
+  padding-top: 2.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: '\e8b5';
+}
+</style>

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

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

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

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

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

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

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

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

@@ -0,0 +1,59 @@
+<template>
+  <div v-if="subtitulo" class="descricaoEvento">
+    <TituloEvento :titulo="titulo" />
+    <SubtituloEvento :subtitulo="subtitulo" />
+  </div>
+  <div v-else class="descricaoEvento" style="padding-top: 2.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: 1.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

@@ -0,0 +1,94 @@
+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 :dadosEvento="args" />',
+});
+
+export const Padrao = Template.bind({});
+Padrao.args = {
+  previsto: '2023-04-19T11:00Z',
+  realizado: '',
+  tolerancia: '',
+  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,
+};
+
+export const Atual = Template.bind({});
+Atual.args = {
+  previsto: '2023-04-19T10:00Z',
+  realizado: '',
+  tolerancia: '',
+  titulo: 'Consulta',
+  subtitulo: 'Posto de saúde',
+  destaque: '',
+  categoria: {
+    nome: 'Tele consulta',
+    icone: 'call',
+  },
+  status: 'realizado',
+  criticidade: 'alta',
+  acao: false,
+  selecionado: true,
+};
+
+export const Importante = Template.bind({});
+Importante.args = {
+  previsto: '2023-04-19T18:00Z',
+  realizado: '',
+  tolerancia: '',
+  titulo: 'Consulta cardiologista',
+  subtitulo: 'Posto de saúde do bairro',
+  destaque: '',
+  categoria: {
+    nome: 'Cardiologista',
+    icone: 'cardiology',
+  },
+  status: 'planejado',
+  criticidade: 'alta',
+  acao: false,
+};
+
+export const Realizado = Template.bind({});
+Realizado.args = {
+  previsto: '2023-04-20T12:30Z',
+  realizado: '',
+  tolerancia: '',
+  titulo: 'Vacina da gripe',
+  subtitulo: 'Posto de saúde do bairro',
+  destaque: '',
+  categoria: {
+    nome: 'Vacina',
+    icone: 'vaccines',
+  },
+  status: 'realizado',
+  criticidade: 'media',
+  acao: true,
+};