@devix-tecnologia/timeline-vue 1.0.2 → 1.1.0

package/dist/types/components/timeline/atomos/AvatarTimeline.vue.d.ts

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 declare const _default: import("vue").DefineComponent<{
     imagem: {
         type: StringConstructor;

package/dist/types/components/timeline/atomos/BoxData.vue.d.ts

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 declare const _default: import("vue").DefineComponent<{
     dataNumero: {
         required: true;

package/dist/types/components/timeline/atomos/Destaque.vue.d.ts

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 declare const _default: import("vue").DefineComponent<{
     destaque: {
         type: StringConstructor;

package/dist/types/components/timeline/atomos/Hora.vue.d.ts

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 declare const _default: import("vue").DefineComponent<{
     hora: {
         required: true;
@@ -11,7 +10,6 @@ declare const _default: import("vue").DefineComponent<{
     classes: import("vue").ComputedRef<{
         [x: string]: boolean;
     }>;
-    horaString: string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     hora: {
         required: true;

package/dist/types/components/timeline/atomos/IconeCategoria.vue.d.ts

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 declare const _default: import("vue").DefineComponent<{
     iconeCategoria: {
         type: StringConstructor;
@@ -23,8 +22,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     classes: import("vue").ComputedRef<{
         [x: string]: boolean;
-        'bg-escuro': boolean;
-        'bg-claro': boolean;
+        "bg-escuro": boolean;
+        "bg-claro": boolean;
     }>;
     style: import("vue").ComputedRef<{
         borderColor: string | undefined;

package/dist/types/components/timeline/atomos/IconeStatus.vue.d.ts

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 declare const _default: import("vue").DefineComponent<{
     status: {
         required: true;

package/dist/types/components/timeline/atomos/SubtituloEvento.vue.d.ts

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 declare const _default: import("vue").DefineComponent<{
     subtitulo: {
         required: true;

package/dist/types/components/timeline/atomos/TituloEvento.vue.d.ts

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 declare const _default: import("vue").DefineComponent<{
     titulo: {
         required: true;

package/dist/types/components/timeline/moleculas/DescricaoEvento.vue.d.ts

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 declare const _default: import("vue").DefineComponent<{
     titulo: {
         required: true;

package/dist/types/components/timeline/moleculas/EventoTimeline.vue.d.ts

@@ -1,18 +1,97 @@
-/** __vue_virtual_code_placeholder */
+import { PropType } from "vue";
+interface Categoria {
+    nome: string;
+    icone: string;
+}
 declare const _default: import("vue").DefineComponent<{
-    dadosEvento: {
+    status: {
         required: true;
-        type: ObjectConstructor;
+        type: StringConstructor;
+    };
+    criticidade: {
+        required: true;
+        type: StringConstructor;
+    };
+    ehAtual: {
+        required: true;
+        type: BooleanConstructor;
+    };
+    previsto: {
+        required: true;
+        type: DateConstructor;
+    };
+    realizado: {
+        required: false;
+        type: PropType<Date | null>;
+    };
+    categoria: {
+        required: true;
+        type: () => Categoria;
+    };
+    titulo: {
+        required: true;
+        type: StringConstructor;
+    };
+    subtitulo: {
+        required: true;
+        type: StringConstructor;
+    };
+    destaque: {
+        required: true;
+        type: StringConstructor;
+    };
+    aoCLicar: {
+        required: false;
+        type: PropType<VoidFunction>;
     };
 }, {
     eventoSelecionado: import("vue").ComputedRef<{
         atual: boolean;
         padrao: boolean;
     }>;
+    clicavel: import("vue").ComputedRef<{
+        clicavel: boolean;
+    }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    dadosEvento: {
+    status: {
         required: true;
-        type: ObjectConstructor;
+        type: StringConstructor;
+    };
+    criticidade: {
+        required: true;
+        type: StringConstructor;
+    };
+    ehAtual: {
+        required: true;
+        type: BooleanConstructor;
+    };
+    previsto: {
+        required: true;
+        type: DateConstructor;
+    };
+    realizado: {
+        required: false;
+        type: PropType<Date | null>;
+    };
+    categoria: {
+        required: true;
+        type: () => Categoria;
+    };
+    titulo: {
+        required: true;
+        type: StringConstructor;
+    };
+    subtitulo: {
+        required: true;
+        type: StringConstructor;
+    };
+    destaque: {
+        required: true;
+        type: StringConstructor;
+    };
+    aoCLicar: {
+        required: false;
+        type: PropType<VoidFunction>;
     };
 }>>, {}>;
 export default _default;

package/dist/types/components/timeline/moleculas/HoraEvento.vue.d.ts

@@ -1,11 +1,12 @@
-/** __vue_virtual_code_placeholder */
+import { PropType } from "vue";
 declare const _default: import("vue").DefineComponent<{
     horaPrevista: {
         type: DateConstructor;
         required: true;
     };
     horaRealizada: {
-        type: DateConstructor;
+        required: false;
+        type: PropType<Date | null>;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     horaPrevista: {
@@ -13,7 +14,8 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     horaRealizada: {
-        type: DateConstructor;
+        required: false;
+        type: PropType<Date | null>;
     };
 }>>, {}>;
 export default _default;

package/dist/types/components/timeline/moleculas/PerfilTimeline.vue.d.ts

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 declare const _default: import("vue").DefineComponent<{
     imagemPerfil: {
         type: StringConstructor;
@@ -17,7 +16,6 @@ declare const _default: import("vue").DefineComponent<{
     style: import("vue").ComputedRef<{
         backgroundColor: string;
     }>;
-    elementoFixo: import("vue").Ref<HTMLElement | null>;
     isFixed: import("vue").Ref<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     imagemPerfil: {

package/dist/types/components/timeline/moleculas/SeparadorPeriodo.vue.d.ts

@@ -1,21 +1,17 @@
-/** __vue_virtual_code_placeholder */
 declare const _default: import("vue").DefineComponent<{
     dataSeparador: {
         required: true;
-        type: StringConstructor;
+        type: DateConstructor;
     };
     aparencia: {
         type: StringConstructor;
     };
 }, {
-    dataRecebida: string;
-    ano: number;
-    mes: string;
-    dia: number;
+    mesCorrente: (mes: number) => any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     dataSeparador: {
         required: true;
-        type: StringConstructor;
+        type: DateConstructor;
     };
     aparencia: {
         type: StringConstructor;

package/dist/types/components/timeline/moleculas/Topo.vue.d.ts

@@ -1,3 +1,2 @@
-/** __vue_virtual_code_placeholder */
 declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/types/components/timeline/organismos/Timeline.vue.d.ts

@@ -1,4 +1,3 @@
-/** __vue_virtual_code_placeholder */
 import { Evento } from "../type";
 type TipoEventoTimeline = {
     tipo: "dia";
@@ -8,7 +7,6 @@ type TipoEventoTimeline = {
     tipo: "evento";
     valor: Evento;
     key: number;
-    atual: boolean;
 } | {
     tipo: "eventos";
     valor: Evento[];
@@ -25,9 +23,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     eventosPorTipo: import("vue").ComputedRef<TipoEventoTimeline[]>;
-}, unknown, {}, {
-    scrollParaItemAtual(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    scrollParaItemAtual: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     perfilTimeline: {
         required: true;
         type: ObjectConstructor;

package/dist/types/components/timeline/type.d.ts

@@ -3,21 +3,24 @@ export type Perfil = {
     imagem: string | null;
     icone: string | null;
 };
+export type Categoria = {
+    nome: string;
+    icone: string;
+};
 export type Evento = {
     id: string;
     data: Date;
     previsto: Date;
     duracao: number | null;
     realizado: Date | null;
-    tolerancia: number | null;
+    tolerancia: number;
     titulo: string;
     subtitulo: string;
     destaque: string;
-    categoria: {
-        nome: string;
-        icone: string;
-    };
+    categoria: Categoria;
     status: "atrasado" | "adiantado" | "adiado" | "realizado" | "planejado" | "cancelado";
-    criticidade: string;
-    acao: boolean;
+    criticidade: "baixa" | "media" | "alta";
+    aoCLicar?: VoidFunction;
+    atual: boolean;
+    scroll: boolean;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@devix-tecnologia/timeline-vue",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.1.0",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",

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

@@ -2,10 +2,10 @@
   <div class="destaqueEvento texto-pequeno">{{ destaque }}</div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 
 export default defineComponent({
-  name: 'destaque',
+  name: "destaque",
   props: {
     destaque: {
       type: String,
@@ -29,7 +29,7 @@ export default defineComponent({
   width: 15%;
   line-height: 1em;
   color: var(--cor-texto);
-  padding: 1.4rem;
+  padding: 2.4rem 1.4rem;
   vertical-align: middle;
 }
 

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

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

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

@@ -11,9 +11,9 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, computed } from 'vue';
+import { defineComponent, reactive, computed } from "vue";
 export default defineComponent({
-  name: 'categoria',
+  name: "categoria",
   props: {
     iconeCategoria: {
       type: String,
@@ -40,9 +40,9 @@ export default defineComponent({
     props = reactive(props);
     return {
       classes: computed(() => ({
-        'bg-escuro': props.escuro,
-        'bg-claro': !props.escuro,
-        [`borda-${props.tipo || 'padrao'}`]: true,
+        "bg-escuro": props.escuro,
+        "bg-claro": !props.escuro,
+        [`borda-${props.tipo || "padrao"}`]: true,
       })),
       style: computed(() => ({
         borderColor: props.borderColor,
@@ -59,7 +59,7 @@ export default defineComponent({
   display: table-cell;
   align-items: center;
   width: 3rem;
-  padding: 1.8rem 1.4rem;
+  padding: 2.8rem 1.4rem;
 }
 
 .bg-escuro,

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

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

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

@@ -3,14 +3,14 @@
     <TituloEvento :titulo="titulo" />
     <SubtituloEvento :subtitulo="subtitulo" />
   </div>
-  <div v-else class="descricaoEvento" style="padding-top: 2.3rem">
+  <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';
+import { defineComponent } from "vue";
+import SubtituloEvento from "../atomos/SubtituloEvento.vue";
+import TituloEvento from "../atomos/TituloEvento.vue";
 
 export default defineComponent({
   props: {
@@ -36,7 +36,7 @@ export default defineComponent({
 .descricaoEvento {
   display: table-cell;
   vertical-align: top;
-  padding: 1.4rem;
+  padding: 2.4rem;
   padding-left: 0;
 }
 

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

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