@devix-tecnologia/timeline-vue 1.0.2 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +148 -11
- package/dist/style.css +1 -1
- package/dist/timeline-vue.es.js +283 -256
- package/dist/types/components/timeline/atomos/AvatarTimeline.vue.d.ts +0 -1
- package/dist/types/components/timeline/atomos/BoxData.vue.d.ts +0 -1
- package/dist/types/components/timeline/atomos/Destaque.vue.d.ts +0 -1
- package/dist/types/components/timeline/atomos/Hora.vue.d.ts +0 -2
- package/dist/types/components/timeline/atomos/IconeCategoria.vue.d.ts +2 -3
- package/dist/types/components/timeline/atomos/IconeStatus.vue.d.ts +0 -1
- package/dist/types/components/timeline/atomos/SubtituloEvento.vue.d.ts +0 -1
- package/dist/types/components/timeline/atomos/TituloEvento.vue.d.ts +0 -1
- package/dist/types/components/timeline/moleculas/DescricaoEvento.vue.d.ts +0 -1
- package/dist/types/components/timeline/moleculas/EventoTimeline.vue.d.ts +84 -5
- package/dist/types/components/timeline/moleculas/HoraEvento.vue.d.ts +5 -3
- package/dist/types/components/timeline/moleculas/PerfilTimeline.vue.d.ts +0 -3
- package/dist/types/components/timeline/moleculas/SeparadorPeriodo.vue.d.ts +3 -7
- package/dist/types/components/timeline/moleculas/Topo.vue.d.ts +0 -1
- package/dist/types/components/timeline/organismos/Timeline.vue.d.ts +2 -5
- package/dist/types/components/timeline/type.d.ts +10 -7
- package/package.json +1 -1
- package/src/components/timeline/atomos/Destaque.vue +3 -3
- package/src/components/timeline/atomos/Hora.vue +7 -10
- package/src/components/timeline/atomos/IconeCategoria.vue +6 -6
- package/src/components/timeline/atomos/IconeStatus.vue +17 -16
- package/src/components/timeline/moleculas/DescricaoEvento.vue +5 -5
- package/src/components/timeline/moleculas/EventoTimeline.stories.ts +49 -49
- package/src/components/timeline/moleculas/EventoTimeline.vue +82 -26
- package/src/components/timeline/moleculas/HoraEvento.vue +5 -4
- package/src/components/timeline/moleculas/PerfilTimeline.vue +2 -29
- package/src/components/timeline/moleculas/SeparadorPeriodo.vue +26 -27
- package/src/components/timeline/organismos/Timeline.mock.ts +87 -57
- package/src/components/timeline/organismos/Timeline.stories.ts +22 -5
- package/src/components/timeline/organismos/Timeline.vue +102 -73
- package/src/components/timeline/type.ts +11 -7
package/README.md
CHANGED
|
@@ -1,18 +1,155 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
|
|
3
|
-
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
|
4
3
|
|
|
5
|
-
## Recommended IDE Setup
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
# Timeline de Eventos DEVIX
|
|
8
6
|
|
|
9
|
-
|
|
7
|
+
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.
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
<div align="center">
|
|
10
|
+
<img src="https://github.com/devix-tecnologia/timeline-vue/blob/91c3b94c6167ca02364507d58dc59bb804b3b51f/docs/timeline01.gif" width="300px"/>
|
|
11
|
+
</div>
|
|
12
12
|
|
|
13
|
-
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
|
|
14
13
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
## 🛠 Como usar
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
### Instalação
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
```sh
|
|
21
|
+
yarn add @devix-tecnologia/timeline-vue
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Exemplo de código
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
//exemplo.vue
|
|
28
|
+
|
|
29
|
+
<template>
|
|
30
|
+
<Timeline :perfilTimeline="perfilTimeline" :eventosTimeline="listaEventos" />
|
|
31
|
+
</template>
|
|
32
|
+
|
|
33
|
+
<script lang="ts">
|
|
34
|
+
import { defineComponent } from "vue";
|
|
35
|
+
import { Timeline } from "@devix-tecnologia/timeline-vue";
|
|
36
|
+
|
|
37
|
+
export default defineComponent({
|
|
38
|
+
setup() {
|
|
39
|
+
|
|
40
|
+
const perfilTimeline = {
|
|
41
|
+
nome: "Maria do Socorro",
|
|
42
|
+
imagem: "https://this-person-does-not-exist.com/img/avatar-gen11071f8e0802a35d66684ee9376722b2.jpg",
|
|
43
|
+
icone: "person",
|
|
44
|
+
};
|
|
45
|
+
const listaEventos = [
|
|
46
|
+
{
|
|
47
|
+
id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f2",
|
|
48
|
+
data: new Date("2023-04-26T18:10Z"),
|
|
49
|
+
previsto: new Date("2023-04-26T18:10Z"),
|
|
50
|
+
realizado: new Date("2023-04-26T18:15Z"),
|
|
51
|
+
duracao: null,
|
|
52
|
+
tolerancia: 20,
|
|
53
|
+
titulo: "Vacina da gripe",
|
|
54
|
+
subtitulo: "Posto de saúde do bairro",
|
|
55
|
+
destaque: "",
|
|
56
|
+
categoria: {
|
|
57
|
+
nome: "Vacina",
|
|
58
|
+
icone: "vaccines",
|
|
59
|
+
},
|
|
60
|
+
status: "realizado",
|
|
61
|
+
criticidade: "alta",
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f14",
|
|
65
|
+
data: new Date("2023-05-09T17:00Z"),
|
|
66
|
+
previsto: new Date("2023-05-09T17:00Z"),
|
|
67
|
+
realizado: null,
|
|
68
|
+
duracao: null,
|
|
69
|
+
tolerancia: 10,
|
|
70
|
+
titulo: "Vitamina D",
|
|
71
|
+
subtitulo: "2 comprimidos",
|
|
72
|
+
destaque: "",
|
|
73
|
+
categoria: {
|
|
74
|
+
nome: "Remédio",
|
|
75
|
+
icone: "pill",
|
|
76
|
+
},
|
|
77
|
+
status: "planejado",
|
|
78
|
+
criticidade: "baixa",
|
|
79
|
+
aoCLicar: () => alert("Olá, mundo!"),
|
|
80
|
+
},
|
|
81
|
+
];
|
|
82
|
+
return {perfilTimeline, listaEventos };
|
|
83
|
+
},
|
|
84
|
+
});
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<style>
|
|
88
|
+
:root {
|
|
89
|
+
--cor-primaria: #00e01d;
|
|
90
|
+
}
|
|
91
|
+
</style>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
### ✨ Customização de estilos
|
|
96
|
+
|
|
97
|
+
Para customizar o visual da Timeline de acordo com a identidade visual da aplicação basta adicionar o código a seguir no CSS e alterar de acordo com a necessidade.
|
|
98
|
+
|
|
99
|
+
```css
|
|
100
|
+
:root {
|
|
101
|
+
--fonte: 'Work Sans', sans-serif;
|
|
102
|
+
font-size: 62.5%;
|
|
103
|
+
|
|
104
|
+
--cor-primaria: #00e01d;
|
|
105
|
+
--cor-secundaria: #1b2f39;
|
|
106
|
+
--cor-terciaria: #ebf1f2;
|
|
107
|
+
|
|
108
|
+
--cor-fundo: #fff;
|
|
109
|
+
|
|
110
|
+
--cor-selecao: #ccf9d2;
|
|
111
|
+
--cor-texto-selecao: #1b2f39;
|
|
112
|
+
--cor-texto: #1b2f39;
|
|
113
|
+
|
|
114
|
+
--cor-apoio: #57676f;
|
|
115
|
+
--cor-linha: #e9eaeb;
|
|
116
|
+
|
|
117
|
+
--cor-importante: #bb0202;
|
|
118
|
+
--cor-alerta: #f0cc0d;
|
|
119
|
+
--cor-sucesso: #00a816;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
body {
|
|
123
|
+
font-family: var(--fonte);
|
|
124
|
+
font-size: 1.6rem;
|
|
125
|
+
font-weight: 300;
|
|
126
|
+
}
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### Propriedades:
|
|
130
|
+
|
|
131
|
+
A Timeline da DEVIX ordena e lista Eventos de forma crescente de acordo com a data/hora cadastrada.
|
|
132
|
+
|
|
133
|
+
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.
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
## 🚀 Contribuindo
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
Faça um fork do projeto, crie uma nova branch e faça seus commits.
|
|
143
|
+
|
|
144
|
+
### Importante:
|
|
145
|
+
- Os componentes da Timeline Devix são divididos em átomos, moléculas e organismos, seguindo os padrões do Design Atômico;
|
|
146
|
+
- Cada componente vem acompanhado de documentação no storybook;
|
|
147
|
+
- A timeline de demonstração utiliza dados mock;
|
|
148
|
+
- Dê uma olhada no arquivo ``` type.ts ``` também, ele é o arquivo de tipos com influência sobre toda a aplicação.
|
|
149
|
+
- Para ver o projeto funcionando no Storybook basta rodar:
|
|
150
|
+
|
|
151
|
+
```sh
|
|
152
|
+
yarn storybook
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
## 😉
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.areaCategoria[data-v-
|
|
1
|
+
.areaCategoria[data-v-01127706]{display:table-cell;align-items:center;width:3rem;padding:2.8rem 1.4rem}.bg-escuro[data-v-01127706],.iconeCategoria[data-v-01127706]{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[data-v-01127706]{font-size:2rem}.iconeCategoria.bg-claro[data-v-01127706],.realizado .iconeCategoria[data-v-01127706],.cancelado .iconeCategoria[data-v-01127706],.adiado .iconeCategoria[data-v-01127706]{opacity:.3}.iconeCategoria.borda-alerta[data-v-01127706],.criticidade-media .iconeCategoria[data-v-01127706]{border-color:var(--cor-alerta)}.iconeCategoria.borda-importante[data-v-01127706],.criticidade-alta .iconeCategoria[data-v-01127706]{border-color:var(--cor-importante)}.iconeCategoria.borda-sucesso[data-v-01127706]{border-color:var(--cor-sucesso)}.bg-claro.iconeCategoria.borda-importante[data-v-01127706],.adiado.criticidade-alta .iconeCategoria[data-v-01127706],.cancelado.criticidade-alta .iconeCategoria[data-v-01127706],.realizado.criticidade-alta .iconeCategoria[data-v-01127706]{border-color:var(--cor-importante)}.iconeStatus[data-v-22a8820e]{font-size:1.8rem;line-height:1rem;color:var(--cor-secundaria);width:1.6rem;display:table-cell;padding:3.7rem 1.4rem 2.4rem;vertical-align:top}.realizado.iconeStatus[data-v-22a8820e]{color:var(--cor-sucesso)}.realizado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:""}.cancelado.iconeStatus[data-v-22a8820e]{color:var(--cor-importante)}.cancelado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:""}.adiado.iconeStatus[data-v-22a8820e]{color:var(--cor-apoio)}.adiado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:""}.planejado.iconeStatus[data-v-22a8820e]{opacity:0}.planejado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:""}.atrasado.iconeStatus[data-v-22a8820e]:before{font-family:Material Symbols Outlined;content:"";color:var(--cor-alerta)}.descricaoEvento .subtitulo[data-v-f5319628]{line-height:1.4rem;margin:0;color:var(--cor-texto)}.bg-selecionado .descricaoEvento .subtitulo[data-v-f5319628]{color:var(--cor-texto-selecao)}.descricaoEvento .titulo[data-v-fce23b0e]{line-height:1.4rem;margin:0;color:var(--cor-texto)}.bg-selecionado .descricaoEvento .titulo[data-v-fce23b0e]{color:var(--cor-texto-selecao)}.descricaoEvento[data-v-bb6e1ced]{display:table-cell;vertical-align:top;padding:2.4rem;padding-left:0}.realizado .descricaoEvento[data-v-bb6e1ced],.cancelado .descricaoEvento[data-v-bb6e1ced],.adiado .descricaoEvento[data-v-bb6e1ced]{opacity:.4}.descricaoEvento .titulo[data-v-bb6e1ced]{line-height:1.8rem;margin:0}@media only screen and (max-width: 400px){.descricaoEvento[data-v-bb6e1ced]{max-width:15rem}}.hora[data-v-071a9ea4]{color:var(--cor-texto)}.bg-selecionado .hora[data-v-071a9ea4]{color:var(--cor-texto-selecao)}.hora-padrao[data-v-071a9ea4],.horaRealizada[data-v-071a9ea4]{font-weight:500;font-size:1.4rem}.hora-riscada[data-v-071a9ea4],.horaPlanejada[data-v-071a9ea4]{text-decoration:line-through;font-size:1rem}.realizado .horaEvento[data-v-04f44efd],.cancelado .horaEvento[data-v-04f44efd],.adiado .horaEvento[data-v-04f44efd]{opacity:.4}.areaHora[data-v-04f44efd]{width:4.5rem;display:table-cell;vertical-align:top;text-align:right;padding:2.4rem 0}.horaEvento[data-v-04f44efd]{line-height:1.4rem;text-align:right;display:flex;flex-direction:column}.horaRealizada[data-v-04f44efd]{font-weight:500}.horaPlanejada[data-v-04f44efd]{text-decoration:line-through}.realizado .destaqueEvento[data-v-b0b0beb7],.cancelado .destaqueEvento[data-v-b0b0beb7],.adiado .destaqueEvento[data-v-b0b0beb7]{opacity:.4}.destaqueEvento[data-v-b0b0beb7]{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[data-v-b0b0beb7]{color:var(--cor-texto-selecao)}.eventoTimeline[data-v-1d1f6a39]{position:relative;width:100%;border-radius:1rem}.clicavel[data-v-1d1f6a39]{cursor:pointer}.eventoTimeline[data-v-1d1f6a39]:hover{background:#f9f9f9}.atual[data-v-1d1f6a39],.atual[data-v-1d1f6a39]:hover{background:var(--cor-selecao)}.eventoTimeline[data-v-1d1f6a39]:before{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;top:0;height:2.5rem;left:11.9rem}.eventoTimeline[data-v-1d1f6a39]:after{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;top:6.1rem;bottom:0;left:11.9rem}.eventoTimeline.atrasado[data-v-1d1f6a39]:before{background:var(--cor-alerta)}.eventoTimeline.atrasado[data-v-1d1f6a39]:after{background:var(--cor-alerta)}.boxData[data-v-5e2b8273]{line-height:3.5rem;border-radius:.5rem;background:var(--cor-primaria);color:var(--cor-secundaria);margin:0;width:3.5rem;height:3.5rem;text-align:center}.padrao[data-v-5e2b8273]{background:var(--cor-primaria);color:var(--cor-secundaria)}.escuro[data-v-5e2b8273]{background:var(--cor-secundaria);color:var(--cor-primaria)}.claro[data-v-5e2b8273]{background:var(--cor-terciaria);color:var(--cor-secundaria);box-shadow:0 0 10px #0000001c}.separadorPeriodo[data-v-de9ead2d]{display:table-row;width:100%;position:relative;background:#fff}.areaData[data-v-de9ead2d]{display:table-cell;padding:2.8rem 1.4rem 2.8rem 10.1rem;position:relative}.areaData[data-v-de9ead2d]:before{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;height:2.5rem;top:0;left:11.9rem}.areaData[data-v-de9ead2d]:after{content:"";background:var(--cor-linha);display:block;position:absolute;width:2px;height:2.5rem;bottom:0;left:11.9rem}.separadorPeriodo .titulo[data-v-de9ead2d]{text-transform:uppercase;padding-bottom:3.45rem;color:var(--cor-texto)}.separadorPeriodo .titulo.claro[data-v-de9ead2d]{color:var(--cor-apoio)}.avatar[data-v-a913d26b]{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[data-v-a913d26b]{aspect-ratio:1 / 1;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%}.avatar span[data-v-a913d26b]{font-size:3rem}.perfilTimeline[data-v-9f148523]{background:var(--cor-primaria);padding:1.4rem;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1.4rem;z-index:999;width:100%;min-height:8rem;transition:all .3s}.nome[data-v-9f148523]{color:var(--cor-secundaria)}.fixed[data-v-9f148523]{position:fixed;top:0;left:0;transition:all .3s}.areaEvento[data-v-4245f5f5]{display:table-row;min-height:8rem;position:relative!important;width:100%}.timeline[data-v-4245f5f5]{display:table;width:100%;position:relative}.marginTop[data-v-4245f5f5]{margin-top:8rem}*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*:focus{outline:none}:root{--fonte: "Work Sans", sans-serif;font-size:62.5%;--cor-primaria: #00e01d;--cor-secundaria: #1b2f39;--cor-terciaria: #ebf1f2;--cor-fundo: #fff;--cor-selecao: #ccf9d2;--cor-texto-selecao: #1b2f39;--cor-texto: #1b2f39;--cor-apoio: #57676f;--cor-linha: #e9eaeb;--cor-importante: #bb0202;--cor-alerta: #f0cc0d;--cor-sucesso: #00a816}:root .tema-escuro{--fonte: "Work Sans", sans-serif;font-size:62.5%;--cor-primaria: #00e01d;--cor-secundaria: #ebf1f2;--cor-terciaria: #1b2f39;--cor-fundo: #1b2f39;--cor-selecao: #ccf9d2;--cor-texto-selecao: #1b2f39;--cor-texto: #f9f9f9;--cor-apoio: #57676f;--cor-linha: #e9eaeb;--cor-importante: #bb0202;--cor-alerta: #f0cc0d;--cor-sucesso: #00a816}body{font-family:var(--fonte);font-size:1.6rem;font-weight:300}h1{font-size:2.4rem;font-weight:600}h2{font-size:1.8rem;font-weight:600}h3{font-size:1.4rem;font-weight:600;margin:0;padding:0;line-height:1em}h4{font-size:1.2rem;font-weight:300}.texto-pequeno{font-size:1rem}.texto-medio{font-size:1.2rem}.texto-grande{font-size:1.4rem}
|