@devix-tecnologia/timeline-vue 1.1.1 → 1.2.0

package/README.md

@@ -27,61 +27,64 @@ yarn add @devix-tecnologia/timeline-vue
 //exemplo.vue
 
 <template>
-  <Timeline :perfilTimeline="perfilTimeline" :eventosTimeline="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 perfilTimeline = {
-      nome: "Maria do Socorro",
-      imagem: "https://this-person-does-not-exist.com/img/avatar-gen11071f8e0802a35d66684ee9376722b2.jpg",
-      icone: "person",
-    };
+    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"),
+        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"),
+        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 {perfilTimeline, listaEventos };
-  },
-});
+        status: 'planejado',
+        criticidade: 'baixa',
+        aoClicar: () => alert('Olá, mundo!')
+      }
+    ]
+    return { perfilTimeline, listaEventos }
+  }
+})
 </script>
 
 <style>