@devix-tecnologia/timeline-vue 1.1.0 → 1.1.2

package/README.md

@@ -1,11 +1,14 @@
-![TimelineDevix](docs/timeline_topo.png)
+![TimelineDevix](https://github.com/devix-tecnologia/timeline-vue/blob/044648477f0b124c6968d4e84de6781d7633b984/docs/timeline_topo.png)
+
+
 
 # Timeline de Eventos DEVIX
 
 Este é um projeto implementando uma linha do tempo de eventos utilizando Vue 3 e Typescript. Utiliza o Storybook para o desenvolvimento dos componentes seguindo o Design Atômico. 
 
-
-![TimelineDevixExemplo](docs/timeline01.gif)
+<div align="center">
+<img src="https://github.com/devix-tecnologia/timeline-vue/blob/91c3b94c6167ca02364507d58dc59bb804b3b51f/docs/timeline01.gif" width="300px"/>
+</div>
 
 
 ## 🛠 Como usar
@@ -24,55 +27,66 @@ yarn add @devix-tecnologia/timeline-vue
 //exemplo.vue
 
 <template>
-  <Timeline :dadosTimeLine="ListaEventos" />
+  <main>
+    <div class="telaTimeline">
+      <Timeline :perfilTimeline="perfilTimeline" :eventosTimeline="listaEventos" />
+    </div>
+  </main>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-import { Timeline } from "@devix-tecnologia/timeline-vue";
+import { defineComponent } from 'vue'
+import { Timeline } from '@devix-tecnologia/timeline-vue'
+import '@devix-tecnologia/timeline-vue/dist/style.css'
 
 export default defineComponent({
+  components: { Timeline },
   setup() {
-    const ListaEventos = [
+    const perfilTimeline = {
+      nome: 'Maria do Socorro',
+      imagem: 'https://this-person-does-not-exist.com/img/avatar-gen11071f8e0802a35d66684ee9376722b2.jpg',
+      icone: 'person'
+    }
+    const listaEventos = [
       {
-        id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f2",
-        data: new Date("2023-04-26T18:10Z"),
-        previsto: new Date("2023-04-26T18:10Z"),
-        realizado: new Date("2023-04-26T18:15Z"),
+        id: '15ea7863-2402-4b84-8a8d-10a00ba07e2f2',
+        data: new Date('2023-04-26T18:10Z'),
+        previsto: new Date('2023-04-26T18:10Z'),
+        realizado: new Date('2023-04-26T18:15Z'),
         duracao: null,
         tolerancia: 20,
-        titulo: "Vacina da gripe",
-        subtitulo: "Posto de saúde do bairro",
-        destaque: "",
+        titulo: 'Vacina da gripe',
+        subtitulo: 'Posto de saúde do bairro',
+        destaque: '',
         categoria: {
-          nome: "Vacina",
-          icone: "vaccines",
+          nome: 'Vacina',
+          icone: 'vaccines'
         },
-        status: "realizado",
-        criticidade: "alta",
+        status: 'realizado',
+        criticidade: 'alta'
       },
       {
-        id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f14",
-        data: new Date("2023-05-09T17:00Z"),
-        previsto: new Date("2023-05-09T17:00Z"),
+        id: '15ea7863-2402-4b84-8a8d-10a00ba07e2f14',
+        data: new Date('2023-05-09T17:00Z'),
+        previsto: new Date('2023-05-09T17:00Z'),
         realizado: null,
         duracao: null,
         tolerancia: 10,
-        titulo: "Vitamina D",
-        subtitulo: "2 comprimidos",
-        destaque: "",
+        titulo: 'Vitamina D',
+        subtitulo: '2 comprimidos',
+        destaque: '',
         categoria: {
-          nome: "Remédio",
-          icone: "pill",
+          nome: 'Remédio',
+          icone: 'pill'
         },
-        status: "planejado",
-        criticidade: "baixa",
-        aoCLicar: () => alert("Olá, mundo!"),
-      },
-    ];
-    return { ListaEventos };
-  },
-});
+        status: 'planejado',
+        criticidade: 'baixa',
+        aoCLicar: () => alert('Olá, mundo!')
+      }
+    ]
+    return { perfilTimeline, listaEventos }
+  }
+})
 </script>
 
 <style>
@@ -124,7 +138,8 @@ A Timeline da DEVIX ordena e lista Eventos de forma crescente de acordo com a da
 Cada Evento mostra a hora prevista, hora em que o evento foi realizado, título, subtítulo, ícone de categoria, ícone de status, indicação de criticidade e campo para informação em destaque.
 
 
-![TimelineDevixExemplo](docs/evento.png)
+![TimelineDevixExemploEvento](https://github.com/devix-tecnologia/timeline-vue/blob/044648477f0b124c6968d4e84de6781d7633b984/docs/evento.png)
+
 
 ## 🚀  Contribuindo
 ---