@farm-investimentos/front-mfe-components 15.14.5 → 15.14.6
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 +76 -76
- package/dist/front-mfe-components.css +1 -1
- package/dist/front-mfe-components.umd.js +76 -76
- package/package.json +1 -1
- package/src/components/Modal/Modal.scss +86 -85
- package/src/components/Tooltip/Tooltip.scss +3 -3
- package/src/components/Tooltip/Tooltip.stories.js +199 -111
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
|
+
}
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
font-weight: 500;
|
|
38
38
|
padding: 16px;
|
|
39
39
|
position: fixed; /* SEMPRE fixed agora */
|
|
40
|
-
z-index:
|
|
40
|
+
z-index: 10004; /* z-index alto para aparecer sobre modais (modal usa z-index 102, header/footer 103) */
|
|
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: 10004; /* z-index alto para aparecer sobre modais (modal usa z-index 102, header/footer 103) */
|
|
100
100
|
transform: translateZ(0);
|
|
101
101
|
pointer-events: auto;
|
|
102
102
|
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
width: 0;
|
|
145
145
|
height: 0;
|
|
146
146
|
border-style: solid;
|
|
147
|
-
z-index:
|
|
147
|
+
z-index: 10005; /* z-index ainda maior para a seta */
|
|
148
148
|
pointer-events: none;
|
|
149
149
|
}
|
|
150
150
|
}
|
|
@@ -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
|
-
});
|