@devix-tecnologia/timeline-vue 1.1.0 → 1.1.2

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

@@ -1,32 +0,0 @@
-import AvatarTimeline from './AvatarTimeline.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Devix/Timeline/Atomos/AvatarTimeline',
-  component: AvatarTimeline,
-  parameters: {
-    componentSubtitle: 'Imagem ou ícones do Materials Symbols do Google',
-  },
-  argTypes: {},
-} as Meta<typeof AvatarTimeline>;
-
-const Template: StoryFn<typeof AvatarTimeline> = (args) => ({
-  components: { AvatarTimeline },
-  setup() {
-    return { args };
-  },
-  template: '<AvatarTimeline v-bind="args"  />',
-});
-
-const avatar =
-  'https://images.unsplash.com/photo-1526080652727-5b77f74eacd2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1752&q=80';
-
-export const Imagem = Template.bind({});
-Imagem.args = {
-  imagem: avatar,
-};
-
-export const Icone = Template.bind({});
-Icone.args = {
-  icone: 'person',
-};

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

@@ -1,51 +0,0 @@
-<template>
-  <div class="avatar">
-    <img v-if="imagem" :src="imagem" />
-    <span v-else-if="icone" class="material-symbols-outlined">
-      {{ icone }}
-    </span>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  props: {
-    imagem: {
-      type: String,
-    },
-    icone: {
-      type: String,
-    },
-  },
-  setup() {
-    return {};
-  },
-});
-</script>
-<style scoped>
-.avatar {
-  background: var(--cor-secundaria);
-  color: var(--cor-apoio);
-  width: 6rem;
-  height: 6rem;
-  border-radius: 50%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  aspect-ratio: 1 / 1;
-}
-
-.avatar img {
-  aspect-ratio: 1 / 1;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  border-radius: 50%;
-}
-
-.avatar span {
-  font-size: 3rem;
-}
-</style>

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

@@ -1,41 +0,0 @@
-import '@fontsource/material-icons';
-import BoxData from './BoxData.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Devix/Timeline/Atomos/BoxData',
-  component: BoxData,
-  argTypes: {
-    // dataBox: { control: { type: String } },
-    aparencia: {
-      control: { type: 'select' },
-      options: ['padrao', 'escuro', 'claro'],
-    },
-  },
-} as Meta<typeof BoxData>;
-
-const Template: StoryFn<typeof BoxData> = (args) => ({
-  components: { BoxData },
-  setup() {
-    return { args };
-  },
-  template: '<BoxData v-bind="args"  />',
-});
-
-export const Padrao = Template.bind({});
-Padrao.args = {
-  dataNumero: '01',
-  aparencia: 'padrao',
-};
-
-export const Escuro = Template.bind({});
-Escuro.args = {
-  dataNumero: '01',
-  aparencia: 'escuro',
-};
-
-export const Claro = Template.bind({});
-Claro.args = {
-  dataNumero: '01',
-  aparencia: 'claro',
-};

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

@@ -1,57 +0,0 @@
-<template>
-  <h3 class="boxData padrao" :class="classes">{{ dataNumero }}</h3>
-</template>
-<script lang="ts">
-import { defineComponent, reactive, computed } from 'vue';
-
-export default defineComponent({
-  name: 'BoxData',
-  props: {
-    dataNumero: {
-      required: true,
-      type: Number,
-    },
-    aparencia: {
-      type: String,
-    },
-  },
-  components: {},
-  setup(props) {
-    props = reactive(props);
-    return {
-      classes: computed(() => ({
-        [`${props.aparencia || 'padrao'}`]: true,
-      })),
-    };
-  },
-});
-</script>
-
-<style scoped>
-.boxData {
-  line-height: 3.5rem;
-  border-radius: 0.5rem;
-  background: var(--cor-primaria);
-  color: var(--cor-secundaria);
-  margin: 0;
-  width: 3.5rem;
-  height: 3.5rem;
-  text-align: center;
-}
-
-.padrao {
-  background: var(--cor-primaria);
-  color: var(--cor-secundaria);
-}
-
-.escuro {
-  background: var(--cor-secundaria);
-  color: var(--cor-primaria);
-}
-
-.claro {
-  background: var(--cor-terciaria);
-  color: var(--cor-secundaria);
-  box-shadow: 0px 0px 10px 0px #0000001c;
-}
-</style>

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

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

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

@@ -1,39 +0,0 @@
-<template>
-  <div class="destaqueEvento texto-pequeno">{{ destaque }}</div>
-</template>
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "destaque",
-  props: {
-    destaque: {
-      type: String,
-    },
-  },
-  components: {},
-  setup() {
-    return {};
-  },
-});
-</script>
-<style scoped>
-.realizado .destaqueEvento,
-.cancelado .destaqueEvento,
-.adiado .destaqueEvento {
-  opacity: 0.4;
-}
-.destaqueEvento {
-  display: table-cell;
-  text-align: right;
-  width: 15%;
-  line-height: 1em;
-  color: var(--cor-texto);
-  padding: 2.4rem 1.4rem;
-  vertical-align: middle;
-}
-
-.bg-selecionado .destaqueEvento {
-  color: var(--cor-texto-selecao);
-}
-</style>

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

@@ -1,36 +0,0 @@
-import Hora from './Hora.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Devix/Timeline/Atomos/Hora',
-  component: Hora,
-  argTypes: {
-    // hora: { control: { type: String } },
-    aparencia: {
-      control: { type: 'select' },
-      options: ['padrao', 'riscada'],
-    },
-  },
-} as Meta<typeof Hora>;
-
-const horaMock = '2023-12-10T09:00Z';
-
-const Template: StoryFn<typeof Hora> = (args) => ({
-  components: { Hora },
-  setup() {
-    return { args };
-  },
-  template: '<Hora v-bind="args"  />',
-});
-
-export const Padrao = Template.bind({});
-Padrao.args = {
-  hora: horaMock,
-  aparencia: 'padrao',
-};
-
-export const Riscada = Template.bind({});
-Riscada.args = {
-  hora: horaMock,
-  aparencia: 'riscada',
-};

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

@@ -1,50 +0,0 @@
-<template>
-  <div class="hora" :class="classes">
-    {{ hora.getHours() }}:{{ hora.getMinutes().toString().padStart(2, "0") }}
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, reactive, computed, ref } from "vue";
-
-export default defineComponent({
-  name: "hora",
-  props: {
-    hora: {
-      required: true,
-      type: Date,
-    },
-    aparencia: {
-      type: String,
-    },
-  },
-  components: {},
-  setup(props) {
-    const propsAparecia = ref(props.aparencia);
-
-    return {
-      classes: computed(() => ({
-        [`hora-${propsAparecia || ""}`]: true,
-      })),
-    };
-  },
-});
-</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

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