@devix-tecnologia/timeline-vue 1.0.1 → 1.1.0
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 +138 -11
- package/dist/style.css +1 -1
- package/dist/timeline-vue.es.js +293 -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 -2
- 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 +2 -2
- 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 -3
- 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 +97 -73
- package/src/components/timeline/type.ts +11 -7
package/README.md
CHANGED
|
@@ -1,18 +1,145 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
# Timeline de Eventos DEVIX
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
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.
|
|
6
6
|
|
|
7
|
-
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
|
|
10
9
|
|
|
11
|
-
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
|
|
12
10
|
|
|
13
|
-
|
|
11
|
+
## 🛠 Como usar
|
|
12
|
+
---
|
|
14
13
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
### Instalação
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
yarn add @devix-tecnologia/timeline-vue
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Exemplo de código
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
//exemplo.vue
|
|
25
|
+
|
|
26
|
+
<template>
|
|
27
|
+
<Timeline :dadosTimeLine="ListaEventos" />
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<script lang="ts">
|
|
31
|
+
import { defineComponent } from "vue";
|
|
32
|
+
import { Timeline } from "@devix-tecnologia/timeline-vue";
|
|
33
|
+
|
|
34
|
+
export default defineComponent({
|
|
35
|
+
setup() {
|
|
36
|
+
const ListaEventos = [
|
|
37
|
+
{
|
|
38
|
+
id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f2",
|
|
39
|
+
data: new Date("2023-04-26T18:10Z"),
|
|
40
|
+
previsto: new Date("2023-04-26T18:10Z"),
|
|
41
|
+
realizado: new Date("2023-04-26T18:15Z"),
|
|
42
|
+
duracao: null,
|
|
43
|
+
tolerancia: 20,
|
|
44
|
+
titulo: "Vacina da gripe",
|
|
45
|
+
subtitulo: "Posto de saúde do bairro",
|
|
46
|
+
destaque: "",
|
|
47
|
+
categoria: {
|
|
48
|
+
nome: "Vacina",
|
|
49
|
+
icone: "vaccines",
|
|
50
|
+
},
|
|
51
|
+
status: "realizado",
|
|
52
|
+
criticidade: "alta",
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f14",
|
|
56
|
+
data: new Date("2023-05-09T17:00Z"),
|
|
57
|
+
previsto: new Date("2023-05-09T17:00Z"),
|
|
58
|
+
realizado: null,
|
|
59
|
+
duracao: null,
|
|
60
|
+
tolerancia: 10,
|
|
61
|
+
titulo: "Vitamina D",
|
|
62
|
+
subtitulo: "2 comprimidos",
|
|
63
|
+
destaque: "",
|
|
64
|
+
categoria: {
|
|
65
|
+
nome: "Remédio",
|
|
66
|
+
icone: "pill",
|
|
67
|
+
},
|
|
68
|
+
status: "planejado",
|
|
69
|
+
criticidade: "baixa",
|
|
70
|
+
aoCLicar: () => alert("Olá, mundo!"),
|
|
71
|
+
},
|
|
72
|
+
];
|
|
73
|
+
return { ListaEventos };
|
|
74
|
+
},
|
|
75
|
+
});
|
|
76
|
+
</script>
|
|
77
|
+
|
|
78
|
+
<style>
|
|
79
|
+
:root {
|
|
80
|
+
--cor-primaria: #00e01d;
|
|
81
|
+
}
|
|
82
|
+
</style>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
### ✨ Customização de estilos
|
|
87
|
+
|
|
88
|
+
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.
|
|
89
|
+
|
|
90
|
+
```css
|
|
91
|
+
:root {
|
|
92
|
+
--fonte: 'Work Sans', sans-serif;
|
|
93
|
+
font-size: 62.5%;
|
|
94
|
+
|
|
95
|
+
--cor-primaria: #00e01d;
|
|
96
|
+
--cor-secundaria: #1b2f39;
|
|
97
|
+
--cor-terciaria: #ebf1f2;
|
|
98
|
+
|
|
99
|
+
--cor-fundo: #fff;
|
|
100
|
+
|
|
101
|
+
--cor-selecao: #ccf9d2;
|
|
102
|
+
--cor-texto-selecao: #1b2f39;
|
|
103
|
+
--cor-texto: #1b2f39;
|
|
104
|
+
|
|
105
|
+
--cor-apoio: #57676f;
|
|
106
|
+
--cor-linha: #e9eaeb;
|
|
107
|
+
|
|
108
|
+
--cor-importante: #bb0202;
|
|
109
|
+
--cor-alerta: #f0cc0d;
|
|
110
|
+
--cor-sucesso: #00a816;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
body {
|
|
114
|
+
font-family: var(--fonte);
|
|
115
|
+
font-size: 1.6rem;
|
|
116
|
+
font-weight: 300;
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### Propriedades:
|
|
121
|
+
|
|
122
|
+
A Timeline da DEVIX ordena e lista Eventos de forma crescente de acordo com a data/hora cadastrada.
|
|
123
|
+
|
|
124
|
+
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.
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
## 🚀 Contribuindo
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
Faça um fork do projeto, crie uma nova branch e faça seus commits.
|
|
133
|
+
|
|
134
|
+
### Importante:
|
|
135
|
+
- Os componentes da Timeline Devix são divididos em átomos, moléculas e organismos, seguindo os padrões do Design Atômico;
|
|
136
|
+
- Cada componente vem acompanhado de documentação no storybook;
|
|
137
|
+
- A timeline de demonstração utiliza dados mock;
|
|
138
|
+
- Dê uma olhada no arquivo ``` type.ts ``` também, ele é o arquivo de tipos com influência sobre toda a aplicação.
|
|
139
|
+
- Para ver o projeto funcionando no Storybook basta rodar:
|
|
140
|
+
|
|
141
|
+
```sh
|
|
142
|
+
yarn storybook
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## 😉
|
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-804ffe54]{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-804ffe54]{color:var(--cor-secundaria)}.fixed[data-v-804ffe54]{position:fixed;top:0;left:0;transition:all .3s}.areaEvento[data-v-c833bd5f]{display:table-row;min-height:8rem;position:relative!important;width:100%}.timeline[data-v-c833bd5f]{display:table;width:100%;position:relative}*{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}
|