@devix-tecnologia/timeline-vue 1.1.1 → 1.1.2

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

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

@@ -1,110 +0,0 @@
-<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: 2.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

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

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