@farm-investimentos/front-mfe-components 15.14.5 → 15.14.7
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/dist/front-mfe-components.common.js +144 -104
- package/dist/front-mfe-components.common.js.map +1 -1
- package/dist/front-mfe-components.css +1 -1
- package/dist/front-mfe-components.umd.js +144 -104
- package/dist/front-mfe-components.umd.js.map +1 -1
- package/dist/front-mfe-components.umd.min.js +1 -1
- package/dist/front-mfe-components.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Modal/Modal.scss +86 -85
- package/src/components/Tooltip/Tooltip.scss +4 -5
- package/src/components/Tooltip/Tooltip.stories.js +199 -111
- package/src/components/Tooltip/Tooltip.vue +42 -2
package/package.json
CHANGED
|
@@ -1,110 +1,111 @@
|
|
|
1
1
|
@import '../../configurations/mixins';
|
|
2
2
|
|
|
3
3
|
.farm-modal {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
4
|
+
position: fixed;
|
|
5
|
+
top: 0;
|
|
6
|
+
left: 0;
|
|
7
|
+
width: 100vw;
|
|
8
|
+
height: 100vh;
|
|
9
|
+
align-items: center;
|
|
10
|
+
display: flex;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), z-index 1ms;
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
14
|
+
&--overlay {
|
|
15
|
+
position: fixed;
|
|
16
|
+
top: 0;
|
|
17
|
+
left: 0;
|
|
18
|
+
width: 100vw;
|
|
19
|
+
height: 100vh;
|
|
20
|
+
opacity: 0.36;
|
|
21
|
+
background-color: var(--farm-gray-darken);
|
|
22
|
+
z-index: 101;
|
|
23
|
+
}
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
25
|
+
&--container {
|
|
26
|
+
background-color: white;
|
|
27
|
+
border-radius: 4px;
|
|
28
|
+
max-height: calc(100vh - 48px);
|
|
29
|
+
position: relative;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
z-index: 102;
|
|
32
|
+
@include addShadow;
|
|
33
|
+
}
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
35
|
+
&--content {
|
|
36
|
+
max-height: calc(100vh - 48px);
|
|
37
|
+
width: 100%;
|
|
38
|
+
padding: 0;
|
|
39
|
+
> div {
|
|
40
|
+
overflow-y: auto;
|
|
41
|
+
padding: 0 16px;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
44
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
&--footer {
|
|
53
|
-
position: absolute;
|
|
54
|
-
bottom: 0;
|
|
55
|
-
background: white;
|
|
56
|
-
width: 100%;
|
|
57
|
-
}
|
|
45
|
+
&--header {
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 0;
|
|
48
|
+
background: white;
|
|
49
|
+
width: 100%;
|
|
50
|
+
z-index: 103; /* z-index maior que o container (102) para ficar sobre o conteúdo */
|
|
51
|
+
}
|
|
58
52
|
|
|
53
|
+
&--footer {
|
|
54
|
+
position: absolute;
|
|
55
|
+
bottom: 0;
|
|
56
|
+
background: white;
|
|
57
|
+
width: 100%;
|
|
58
|
+
z-index: 103; /* z-index maior que o container (102) para ficar sobre o conteúdo */
|
|
59
|
+
}
|
|
59
60
|
}
|
|
60
61
|
|
|
61
62
|
.fade-enter-active,
|
|
62
63
|
.fade-leave-active {
|
|
63
|
-
|
|
64
|
+
transition: opacity 0.25s;
|
|
64
65
|
}
|
|
65
66
|
|
|
66
67
|
.fade-enter,
|
|
67
68
|
.fade-leave-to {
|
|
68
|
-
|
|
69
|
+
opacity: 0;
|
|
69
70
|
}
|
|
70
71
|
|
|
71
72
|
@include upToSm {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
.farm-modal {
|
|
74
|
+
&--container {
|
|
75
|
+
width: calc(100vw - 32px);
|
|
76
|
+
max-width: calc(100vw - 32px);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
78
79
|
}
|
|
79
80
|
|
|
80
81
|
@include fromSm {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
82
|
+
.farm-modal {
|
|
83
|
+
&--size-default {
|
|
84
|
+
.farm-modal--container {
|
|
85
|
+
width: 960px;
|
|
86
|
+
max-width: 960px;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
88
89
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
90
|
+
&--size-md {
|
|
91
|
+
.farm-modal--container {
|
|
92
|
+
width: 568px;
|
|
93
|
+
max-width: 568px;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
95
96
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
97
|
+
&--size-sm {
|
|
98
|
+
.farm-modal--container {
|
|
99
|
+
width: 448px;
|
|
100
|
+
max-width: 448px;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
102
103
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
}
|
|
104
|
+
&--size-xs {
|
|
105
|
+
.farm-modal--container {
|
|
106
|
+
width: 360px;
|
|
107
|
+
max-width: 360px;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
font-size: 12px;
|
|
37
37
|
font-weight: 500;
|
|
38
38
|
padding: 16px;
|
|
39
|
-
position: fixed;
|
|
40
|
-
z-index:
|
|
39
|
+
position: fixed;
|
|
40
|
+
z-index: 10001;
|
|
41
41
|
transform: translateZ(0);
|
|
42
42
|
pointer-events: auto;
|
|
43
43
|
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
font-weight: 500;
|
|
97
97
|
padding: 16px;
|
|
98
98
|
position: fixed;
|
|
99
|
-
z-index:
|
|
99
|
+
z-index: 10001;
|
|
100
100
|
transform: translateZ(0);
|
|
101
101
|
pointer-events: auto;
|
|
102
102
|
|
|
@@ -138,13 +138,12 @@
|
|
|
138
138
|
color: #f5f5f5;
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
/* Seta presa ao tooltip */
|
|
142
141
|
.tooltip-arrow {
|
|
143
142
|
position: absolute;
|
|
144
143
|
width: 0;
|
|
145
144
|
height: 0;
|
|
146
145
|
border-style: solid;
|
|
147
|
-
z-index:
|
|
146
|
+
z-index: inherit;
|
|
148
147
|
pointer-events: none;
|
|
149
148
|
}
|
|
150
149
|
}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import Tooltip from './Tooltip.vue';
|
|
2
2
|
import Modal from '../Modal/Modal.vue';
|
|
3
|
+
import DefaultButton from '../Buttons/DefaultButton/DefaultButton.vue';
|
|
4
|
+
import Typography from '../Typography/Typography.vue';
|
|
5
|
+
import Icon from '../Icon/Icon.vue';
|
|
3
6
|
|
|
4
7
|
export default {
|
|
5
8
|
title: 'Display/Tooltip',
|
|
@@ -147,7 +150,7 @@ export const FluidTooltip = () => ({
|
|
|
147
150
|
});
|
|
148
151
|
|
|
149
152
|
export const WithModal = () => ({
|
|
150
|
-
components: { Tooltip, Modal },
|
|
153
|
+
components: { Tooltip, Modal, DefaultButton, Typography, Icon },
|
|
151
154
|
data() {
|
|
152
155
|
return {
|
|
153
156
|
showModal: false,
|
|
@@ -155,127 +158,212 @@ export const WithModal = () => ({
|
|
|
155
158
|
},
|
|
156
159
|
template: `
|
|
157
160
|
<div>
|
|
158
|
-
<
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
>
|
|
162
|
-
Abrir Modal com Tooltip
|
|
163
|
-
</button>
|
|
161
|
+
<farm-btn color="primary" @click="showModal = true">
|
|
162
|
+
Abrir Modal com Tooltips
|
|
163
|
+
</farm-btn>
|
|
164
164
|
|
|
165
165
|
<farm-modal v-model="showModal" size="md">
|
|
166
166
|
<template v-slot:header>
|
|
167
|
-
<
|
|
167
|
+
<div style="padding: 20px; border-bottom: 1px solid #e0e0e0; background: white;">
|
|
168
|
+
<farm-typography tag="h2" size="xl" color="black" weight="600" style="margin: 0;">
|
|
169
|
+
Formulário de Investimento
|
|
170
|
+
</farm-typography>
|
|
171
|
+
<farm-typography size="sm" color="gray" style="margin-top: 4px;">
|
|
172
|
+
Preencha as informações para processar seu investimento
|
|
173
|
+
</farm-typography>
|
|
174
|
+
</div>
|
|
168
175
|
</template>
|
|
176
|
+
|
|
169
177
|
<template v-slot:content>
|
|
170
|
-
<div style="height:
|
|
171
|
-
<
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
178
|
+
<div style="max-height: 50vh; overflow-y: auto; padding: 0;">
|
|
179
|
+
<div style="padding: 24px;">
|
|
180
|
+
<!-- Seção 1: Dados Pessoais -->
|
|
181
|
+
<div style="margin-bottom: 32px;">
|
|
182
|
+
<farm-typography tag="h3" size="lg" color="black" weight="600" style="margin-bottom: 16px; border-bottom: 2px solid #f0f0f0; padding-bottom: 8px;">
|
|
183
|
+
Dados Pessoais
|
|
184
|
+
</farm-typography>
|
|
185
|
+
|
|
186
|
+
<div style="display: grid; gap: 16px;" class="mt-12">
|
|
187
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
188
|
+
<farm-typography weight="500">Nome completo</farm-typography>
|
|
189
|
+
<farm-tooltip placement="top-center">
|
|
190
|
+
<template v-slot:activator>
|
|
191
|
+
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
192
|
+
</template>
|
|
193
|
+
Digite seu nome completo exatamente como aparece no documento de identidade.
|
|
194
|
+
</farm-tooltip>
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
198
|
+
<farm-typography weight="500">CPF</farm-typography>
|
|
199
|
+
<farm-tooltip placement="bottom-right">
|
|
200
|
+
<template v-slot:activator>
|
|
201
|
+
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
202
|
+
</template>
|
|
203
|
+
CPF é obrigatório para investimentos. Será validado automaticamente.
|
|
204
|
+
</farm-tooltip>
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
208
|
+
<farm-typography weight="500">Email corporativo</farm-typography>
|
|
209
|
+
<farm-tooltip placement="top-left" :fluid="true">
|
|
210
|
+
<template v-slot:activator>
|
|
211
|
+
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
212
|
+
</template>
|
|
213
|
+
Use apenas emails corporativos (@empresa.com). Emails pessoais não são aceitos para investimentos corporativos.
|
|
214
|
+
</farm-tooltip>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
|
|
219
|
+
<!-- Seção 2: Informações de Investimento -->
|
|
220
|
+
<div style="margin-bottom: 32px;">
|
|
221
|
+
<farm-typography tag="h3" size="lg" color="black" weight="600" style="margin-bottom: 16px; border-bottom: 2px solid #f0f0f0; padding-bottom: 8px;">
|
|
222
|
+
Informações de Investimento
|
|
223
|
+
</farm-typography>
|
|
224
|
+
|
|
225
|
+
<div style="display: grid; gap: 16px;">
|
|
226
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
227
|
+
<farm-typography weight="500">Valor do investimento</farm-typography>
|
|
228
|
+
<farm-tooltip placement="bottom-center">
|
|
229
|
+
<template v-slot:activator>
|
|
230
|
+
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
231
|
+
</template>
|
|
232
|
+
O valor mínimo para investimento é R$ 1.000,00. Valores acima de R$ 100.000,00 requerem aprovação adicional.
|
|
233
|
+
</farm-tooltip>
|
|
234
|
+
</div>
|
|
235
|
+
|
|
236
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
237
|
+
<farm-typography weight="500">Tipo de investimento</farm-typography>
|
|
238
|
+
<farm-tooltip placement="top-right" :fluid="true">
|
|
239
|
+
<template v-slot:activator>
|
|
240
|
+
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
241
|
+
</template>
|
|
242
|
+
CDB, LCI, LCA, Tesouro Direto, Fundos de Investimento. Cada tipo possui características específicas de rentabilidade e liquidez.
|
|
243
|
+
</farm-tooltip>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
247
|
+
<farm-typography weight="500">Prazo de vencimento</farm-typography>
|
|
248
|
+
<farm-tooltip placement="bottom-left">
|
|
249
|
+
<template v-slot:activator>
|
|
250
|
+
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
251
|
+
</template>
|
|
252
|
+
Selecione uma data futura. O prazo mínimo é de 30 dias para CDB e 90 dias para fundos.
|
|
253
|
+
</farm-tooltip>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
|
|
258
|
+
<!-- Seção 3: Documentação -->
|
|
259
|
+
<div style="margin-bottom: 32px;">
|
|
260
|
+
<farm-typography tag="h3" size="lg" color="black" weight="600" style="margin-bottom: 16px; border-bottom: 2px solid #f0f0f0; padding-bottom: 8px;">
|
|
261
|
+
Documentação
|
|
262
|
+
</farm-typography>
|
|
263
|
+
|
|
264
|
+
<div style="display: grid; gap: 16px;">
|
|
265
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
266
|
+
<farm-typography weight="500">Upload de documentos</farm-typography>
|
|
267
|
+
<farm-tooltip placement="bottom-right" :fluid="true">
|
|
268
|
+
<template v-slot:activator>
|
|
269
|
+
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
270
|
+
</template>
|
|
271
|
+
Formatos aceitos: PDF, JPG, PNG. Tamanho máximo: 5MB por arquivo.
|
|
272
|
+
Documentos: RG, CPF, Comprovante de residência (até 3 meses), Comprovante de renda.
|
|
273
|
+
</farm-tooltip>
|
|
274
|
+
</div>
|
|
275
|
+
|
|
276
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
277
|
+
<farm-typography weight="500">Termo de aceite</farm-typography>
|
|
278
|
+
<farm-tooltip placement="top-center">
|
|
279
|
+
<template v-slot:activator>
|
|
280
|
+
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
281
|
+
</template>
|
|
282
|
+
Leia e aceite os termos de tratamento de dados pessoais conforme LGPD.
|
|
283
|
+
</farm-tooltip>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
</div>
|
|
287
|
+
|
|
288
|
+
<!-- Seção 4: Configurações Adicionais -->
|
|
289
|
+
<div style="margin-bottom: 32px;">
|
|
290
|
+
<farm-typography tag="h3" size="lg" color="black" weight="600" style="margin-bottom: 16px; border-bottom: 2px solid #f0f0f0; padding-bottom: 8px;">
|
|
291
|
+
Configurações Adicionais
|
|
292
|
+
</farm-typography>
|
|
293
|
+
|
|
294
|
+
<div style="display: grid; gap: 16px;">
|
|
295
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
296
|
+
<farm-typography weight="500">Perfil de risco</farm-typography>
|
|
297
|
+
<farm-tooltip placement="top-center" :fluid="true">
|
|
298
|
+
<template v-slot:activator>
|
|
299
|
+
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
300
|
+
</template>
|
|
301
|
+
Conservador: baixo risco, Moderado: risco médio, Arrojado: alto risco. Seu perfil determina os produtos disponíveis.
|
|
302
|
+
</farm-tooltip>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
306
|
+
<farm-typography weight="500">Reinvestimento automático</farm-typography>
|
|
307
|
+
<farm-tooltip placement="bottom-left">
|
|
308
|
+
<template v-slot:activator>
|
|
309
|
+
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
310
|
+
</template>
|
|
311
|
+
Ative para reinvestir automaticamente os rendimentos no mesmo produto.
|
|
312
|
+
</farm-tooltip>
|
|
313
|
+
</div>
|
|
314
|
+
|
|
315
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
316
|
+
<farm-typography weight="500">Notificações por email</farm-typography>
|
|
317
|
+
<farm-tooltip placement="top-right">
|
|
318
|
+
<template v-slot:activator>
|
|
319
|
+
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
320
|
+
</template>
|
|
321
|
+
Receba avisos sobre vencimentos, rendimentos e oportunidades de investimento.
|
|
322
|
+
</farm-tooltip>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
</div>
|
|
326
|
+
|
|
327
|
+
<!-- Seção 5: Informações Legais -->
|
|
328
|
+
<div style="margin-bottom: 32px;">
|
|
329
|
+
<farm-typography tag="h3" size="lg" color="black" weight="600" style="margin-bottom: 16px; border-bottom: 2px solid #f0f0f0; padding-bottom: 8px;">
|
|
330
|
+
Informações Legais
|
|
331
|
+
</farm-typography>
|
|
332
|
+
|
|
333
|
+
<div style="display: grid; gap: 16px;">
|
|
334
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
335
|
+
<farm-typography weight="500">Declaração de origem</farm-typography>
|
|
336
|
+
<farm-tooltip placement="bottom-center" :fluid="true">
|
|
337
|
+
<template v-slot:activator>
|
|
338
|
+
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
339
|
+
</template>
|
|
340
|
+
Conforme regulamentação do Banco Central, é obrigatório declarar a origem dos recursos para investimentos acima de R$ 10.000,00.
|
|
341
|
+
</farm-tooltip>
|
|
342
|
+
</div>
|
|
343
|
+
|
|
344
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
345
|
+
<farm-typography weight="500">Compliance</farm-typography>
|
|
346
|
+
<farm-tooltip placement="top-left">
|
|
347
|
+
<template v-slot:activator>
|
|
348
|
+
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
349
|
+
</template>
|
|
350
|
+
Todas as operações são monitoradas para garantir conformidade com as regulamentações vigentes.
|
|
351
|
+
</farm-tooltip>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
</div>
|
|
209
355
|
</div>
|
|
210
|
-
|
|
211
|
-
<p>Linha 11</p>
|
|
212
|
-
<p>Linha 12</p>
|
|
213
|
-
<p>Linha 13</p>
|
|
214
|
-
<p>Linha 14</p>
|
|
215
|
-
<p>Linha 15</p>
|
|
216
|
-
<p>Linha 16</p>
|
|
217
|
-
<p>Linha 17</p>
|
|
218
|
-
<p>Linha 18</p>
|
|
219
|
-
<p>Linha 19</p>
|
|
220
|
-
<p>Linha 20</p>
|
|
221
|
-
<p>Fim do conteúdo!</p>
|
|
222
356
|
</div>
|
|
223
357
|
</template>
|
|
358
|
+
|
|
224
359
|
<template v-slot:footer>
|
|
225
|
-
<
|
|
226
|
-
|
|
227
|
-
|
|
360
|
+
<div style="padding: 20px; border-top: 1px solid #e0e0e0; background: white; display: flex; justify-content: flex-end;">
|
|
361
|
+
<farm-btn color="primary" outlined @click="showModal = false">
|
|
362
|
+
Fechar
|
|
363
|
+
</farm-btn>
|
|
364
|
+
</div>
|
|
228
365
|
</template>
|
|
229
366
|
</farm-modal>
|
|
230
367
|
</div>
|
|
231
368
|
`,
|
|
232
369
|
});
|
|
233
|
-
|
|
234
|
-
export const MultipleTooltips = () => ({
|
|
235
|
-
components: { Tooltip },
|
|
236
|
-
template: `
|
|
237
|
-
<div style="display: flex; gap: 20px; padding: 50px;">
|
|
238
|
-
<farm-tooltip placement="top-left">
|
|
239
|
-
<template v-slot:activator>
|
|
240
|
-
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
241
|
-
</template>
|
|
242
|
-
Tooltip Top-Left
|
|
243
|
-
</farm-tooltip>
|
|
244
|
-
|
|
245
|
-
<farm-tooltip placement="top-center">
|
|
246
|
-
<template v-slot:activator>
|
|
247
|
-
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
248
|
-
</template>
|
|
249
|
-
Tooltip Top-Center
|
|
250
|
-
</farm-tooltip>
|
|
251
|
-
|
|
252
|
-
<farm-tooltip placement="top-right">
|
|
253
|
-
<template v-slot:activator>
|
|
254
|
-
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
255
|
-
</template>
|
|
256
|
-
Tooltip Top-Right
|
|
257
|
-
</farm-tooltip>
|
|
258
|
-
|
|
259
|
-
<farm-tooltip placement="bottom-left">
|
|
260
|
-
<template v-slot:activator>
|
|
261
|
-
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
262
|
-
</template>
|
|
263
|
-
Tooltip Bottom-Left
|
|
264
|
-
</farm-tooltip>
|
|
265
|
-
|
|
266
|
-
<farm-tooltip placement="bottom-center">
|
|
267
|
-
<template v-slot:activator>
|
|
268
|
-
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
269
|
-
</template>
|
|
270
|
-
Tooltip Bottom-Center
|
|
271
|
-
</farm-tooltip>
|
|
272
|
-
|
|
273
|
-
<farm-tooltip placement="bottom-right">
|
|
274
|
-
<template v-slot:activator>
|
|
275
|
-
<farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
|
|
276
|
-
</template>
|
|
277
|
-
Tooltip Bottom-Right
|
|
278
|
-
</farm-tooltip>
|
|
279
|
-
</div>
|
|
280
|
-
`,
|
|
281
|
-
});
|
|
@@ -104,6 +104,46 @@ export default defineComponent({
|
|
|
104
104
|
const tooltipRef = ref<HTMLElement | null>(null);
|
|
105
105
|
const scrollableElementsRef = ref<Element[] | null>(null);
|
|
106
106
|
|
|
107
|
+
const Z_INDEX_OFFSET = 1000;
|
|
108
|
+
const DEFAULT_Z_INDEX = 10001;
|
|
109
|
+
|
|
110
|
+
let modalCache: { modals: Element[]; timestamp: number } | null = null;
|
|
111
|
+
|
|
112
|
+
const getTooltipZIndex = () => {
|
|
113
|
+
const now = Date.now();
|
|
114
|
+
let modals: Element[];
|
|
115
|
+
|
|
116
|
+
if (modalCache && now - modalCache.timestamp < 500) {
|
|
117
|
+
modals = modalCache.modals;
|
|
118
|
+
} else {
|
|
119
|
+
modals = Array.from(document.querySelectorAll('.farm-modal'));
|
|
120
|
+
modalCache = { modals, timestamp: now };
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
let maxModalZIndex = 0;
|
|
124
|
+
|
|
125
|
+
modals.forEach(modal => {
|
|
126
|
+
const htmlModal = modal as HTMLElement;
|
|
127
|
+
|
|
128
|
+
let zIndex = parseInt(htmlModal.style.zIndex, 10);
|
|
129
|
+
|
|
130
|
+
if (Number.isNaN(zIndex)) {
|
|
131
|
+
const computedZIndex = window.getComputedStyle(htmlModal).zIndex;
|
|
132
|
+
if (computedZIndex === 'auto') {
|
|
133
|
+
zIndex = 0;
|
|
134
|
+
} else {
|
|
135
|
+
zIndex = parseInt(computedZIndex, 10) || 0;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
if (zIndex > maxModalZIndex) {
|
|
140
|
+
maxModalZIndex = zIndex;
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
return maxModalZIndex > 0 ? maxModalZIndex + Z_INDEX_OFFSET : DEFAULT_Z_INDEX;
|
|
145
|
+
};
|
|
146
|
+
|
|
107
147
|
const isVisible = ref(false);
|
|
108
148
|
|
|
109
149
|
const isControlled = computed(() => props.value !== undefined);
|
|
@@ -136,7 +176,7 @@ export default defineComponent({
|
|
|
136
176
|
const tooltipStyles = computed(() => {
|
|
137
177
|
const styles: Record<string, string> = {
|
|
138
178
|
position: 'fixed',
|
|
139
|
-
zIndex:
|
|
179
|
+
zIndex: String(getTooltipZIndex()),
|
|
140
180
|
};
|
|
141
181
|
|
|
142
182
|
if (normalizedMaxWidth.value) {
|
|
@@ -158,7 +198,7 @@ export default defineComponent({
|
|
|
158
198
|
width: '0',
|
|
159
199
|
height: '0',
|
|
160
200
|
borderStyle: 'solid',
|
|
161
|
-
zIndex: '
|
|
201
|
+
zIndex: 'inherit',
|
|
162
202
|
};
|
|
163
203
|
|
|
164
204
|
if (verticalPos === 'top') {
|