@farm-investimentos/front-mfe-components 15.14.4 → 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.
Files changed (17) hide show
  1. package/dist/front-mfe-components.common.js +365 -1042
  2. package/dist/front-mfe-components.common.js.map +1 -1
  3. package/dist/front-mfe-components.css +1 -1
  4. package/dist/front-mfe-components.umd.js +365 -1042
  5. package/dist/front-mfe-components.umd.js.map +1 -1
  6. package/dist/front-mfe-components.umd.min.js +1 -1
  7. package/dist/front-mfe-components.umd.min.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/Modal/Modal.scss +86 -85
  10. package/src/components/Tooltip/Tooltip.scss +90 -62
  11. package/src/components/Tooltip/Tooltip.stories.js +322 -158
  12. package/src/components/Tooltip/Tooltip.vue +265 -302
  13. package/src/components/Tooltip/docs/README.md +304 -0
  14. package/src/components/Tooltip/docs/SPECIFICATION.md +374 -0
  15. package/src/components/Tooltip/index.ts +16 -0
  16. package/src/components/Tooltip/types/tooltip.types.ts +49 -0
  17. package/src/components/Tooltip/utils/tooltip.utils.ts +70 -0
package/src/components/Tooltip/Tooltip.stories.js CHANGED
@@ -1,205 +1,369 @@
1
- import { withDesign } from 'storybook-addon-designs';
2
- import Tooltip from '.';
1
+ import Tooltip from './Tooltip.vue';
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
- title: 'Interactions/Tooltip',
8
+ title: 'Display/Tooltip',
6
9
  component: Tooltip,
7
- decorators: [withDesign],
8
10
  parameters: {
9
11
  docs: {
10
12
  description: {
11
13
  component: `Tooltip<br />
12
14
  selector: <em>farm-tooltip</em><br />
13
15
  <span style="color: var(--farm-primary-base);">ready for use</span>
14
- <br /><br />
15
- <h3>Important notes:</h3>
16
- <ul>
17
- <li><strong>Do not add margin to the activator element</strong> - This can confuse the tooltip display watcher and prevent the arrow from being positioned correctly</li>
18
- <li>Prefer to add margin to the parent element or sibling elements of the tooltip</li>
19
- <li>Arrow positioning is calculated based on the activator element position</li>
20
- <li>The close button (X) is automatically displayed only in tooltips controlled by v-model</li>
21
- <li>The arrow is only displayed when a position is explicitly defined (position property). If no position is defined, the tooltip will not have an arrow</li>
22
- <li>You can add a title to the tooltip using the "title" slot. When used in a controlled tooltip, the close button will be aligned with the title</li>
23
- </ul>
24
16
  `,
25
17
  },
26
18
  },
27
- design: {
28
- type: 'figma',
29
- url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=3779%3A6131',
30
- },
31
19
  viewMode: 'docs',
32
20
  },
33
21
  };
34
22
 
35
- export const Tooltips = () => ({
36
- template: `<div style="padding-left: 80px; padding-top: 80px;">
37
- <span style="display: flex; align-items: center;">
38
- Hover over the icon
39
- <farm-tooltip>
40
- <span>
41
- This is a simple tooltip
42
- </span>
43
- <template v-slot:activator>
44
- <farm-icon size="sm" color="gray" style="margin-left: 8px; cursor: help;">help-circle</farm-icon>
45
- </template>
46
- </farm-tooltip>
47
- </span>
48
- </div>`,
49
- });
50
-
51
- export const InsideCard = () => ({
52
- template: `<div style="padding-left: 80px; padding-top: 80px;">
53
- <farm-card style="padding: 32px">
23
+ export const Primary = () => ({
24
+ components: { Tooltip },
25
+ template: `
26
+ <div style="padding-left: 80px; padding-top: 80px;">
54
27
  <span style="display: flex; align-items: center;">
55
- <span style="margin-right: 8px;">Important information</span>
56
- <farm-tooltip>
57
- this is the tooltip!
28
+ Hover over the icon
29
+ <farm-tooltip placement="top-center">
58
30
  <template v-slot:activator>
59
- <farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
31
+ <farm-icon size="sm" color="gray">help-circle</farm-icon>
60
32
  </template>
33
+ This is a simple tooltip
61
34
  </farm-tooltip>
62
35
  </span>
63
- </farm-card>
64
- </div>`,
36
+ </div>
37
+ `,
65
38
  });
66
39
 
67
- export const FluidTooltip = () => ({
68
- template: `<div style="padding-left: 80px; padding-top: 80px;">
69
- <span style="display: flex; align-items: center;">
70
- <span style="margin-right: 8px;">Fluid width tooltip</span>
71
- <farm-tooltip fluid>
72
- This is a fluid tooltip that will grow based on its content.
73
- It contains a longer text to demonstrate how it expands horizontally.
74
- <template v-slot:activator>
75
- <farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
76
- </template>
77
- </farm-tooltip>
78
- </span>
79
- </div>`,
80
- });
40
+ export const AllPositions = () => ({
41
+ components: { Tooltip },
42
+ template: `
43
+ <div style="padding: 100px; display: flex; flex-direction: column; align-items: center; gap: 50px;">
44
+ <div style="display: flex; gap: 30px; margin-bottom: 50px;">
45
+ <div style="display: flex; flex-direction: column; align-items: center;">
46
+ <p style="margin-bottom: 10px;">Top Left</p>
47
+ <farm-tooltip placement="top-left">
48
+ <template v-slot:activator>
49
+ <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
50
+ </template>
51
+ Top-Left Position
52
+ </farm-tooltip>
53
+ </div>
81
54
 
82
- export const TooltipPositions = () => ({
83
- template: `<div style="padding: 100px; display: flex; flex-direction: column; align-items: center; gap: 50px;">
84
- <div style="display: flex; gap: 30px; margin-bottom: 50px;">
85
- <div style="display: flex; flex-direction: column; align-items: center;">
86
- <p style="margin-bottom: 10px;">Top Left</p>
87
- <farm-tooltip position="top-left">
88
- Top-Left Position
89
- <template v-slot:activator>
90
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
91
- </template>
92
- </farm-tooltip>
93
- </div>
55
+ <div style="display: flex; flex-direction: column; align-items: center;">
56
+ <p style="margin-bottom: 10px;">Top Center</p>
57
+ <farm-tooltip placement="top-center">
58
+ <template v-slot:activator>
59
+ <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
60
+ </template>
61
+ Top-Center Position (Default)
62
+ </farm-tooltip>
63
+ </div>
94
64
 
95
- <div style="display: flex; flex-direction: column; align-items: center;">
96
- <p style="margin-bottom: 10px;">Top Center</p>
97
- <farm-tooltip position="top-center">
98
- Top-Center Position (Default)
99
- <template v-slot:activator>
100
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
101
- </template>
102
- </farm-tooltip>
65
+ <div style="display: flex; flex-direction: column; align-items: center;">
66
+ <p style="margin-bottom: 10px;">Top Right</p>
67
+ <farm-tooltip placement="top-right">
68
+ <template v-slot:activator>
69
+ <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
70
+ </template>
71
+ Top-Right Position
72
+ </farm-tooltip>
73
+ </div>
103
74
  </div>
104
75
 
105
- <div style="display: flex; flex-direction: column; align-items: center;">
106
- <p style="margin-bottom: 10px;">Top Right</p>
107
- <farm-tooltip position="top-right">
108
- Top-Right Position
109
- <template v-slot:activator>
110
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
111
- </template>
112
- </farm-tooltip>
113
- </div>
114
- </div>
76
+ <div style="display: flex; gap: 30px;">
77
+ <div style="display: flex; flex-direction: column; align-items: center;">
78
+ <p style="margin-bottom: 10px;">Bottom Left</p>
79
+ <farm-tooltip placement="bottom-left">
80
+ <template v-slot:activator>
81
+ <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
82
+ </template>
83
+ Bottom-Left Position
84
+ </farm-tooltip>
85
+ </div>
115
86
 
116
- <div style="display: flex; gap: 30px;">
117
- <div style="display: flex; flex-direction: column; align-items: center;">
118
- <p style="margin-bottom: 10px;">Bottom Left</p>
119
- <farm-tooltip position="bottom-left">
120
- Bottom-Left Position
121
- <template v-slot:activator>
122
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
123
- </template>
124
- </farm-tooltip>
87
+ <div style="display: flex; flex-direction: column; align-items: center;">
88
+ <p style="margin-bottom: 10px;">Bottom Center</p>
89
+ <farm-tooltip placement="bottom-center">
90
+ <template v-slot:activator>
91
+ <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
92
+ </template>
93
+ Bottom-Center Position
94
+ </farm-tooltip>
95
+ </div>
96
+
97
+ <div style="display: flex; flex-direction: column; align-items: center;">
98
+ <p style="margin-bottom: 10px;">Bottom Right</p>
99
+ <farm-tooltip placement="bottom-right">
100
+ <template v-slot:activator>
101
+ <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
102
+ </template>
103
+ Bottom-Right Position
104
+ </farm-tooltip>
105
+ </div>
125
106
  </div>
107
+ </div>
108
+ `,
109
+ });
126
110
 
127
- <div style="display: flex; flex-direction: column; align-items: center;">
128
- <p style="margin-bottom: 10px;">Bottom Center</p>
129
- <farm-tooltip position="bottom-center">
130
- Bottom-Center Position
111
+ export const ControlledTooltip = () => ({
112
+ components: { Tooltip },
113
+ data() {
114
+ return {
115
+ showTooltip: false,
116
+ };
117
+ },
118
+ template: `
119
+ <div style="padding: 80px;">
120
+ <span style="display: flex; align-items: center;">
121
+ <span >Click to open:</span>
122
+ <farm-tooltip v-model="showTooltip" placement="top-right">
131
123
  <template v-slot:activator>
132
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
124
+ <farm-icon @click="showTooltip = !showTooltip" size="md" color="blue" style="cursor: pointer;">help-circle</farm-icon>
133
125
  </template>
126
+ <template v-slot:title>Controlled Tooltip</template>
127
+ This tooltip is controlled by v-model
134
128
  </farm-tooltip>
135
- </div>
129
+ </span>
130
+ </div>
131
+ `,
132
+ });
136
133
 
137
- <div style="display: flex; flex-direction: column; align-items: center;">
138
- <p style="margin-bottom: 10px;">Bottom Right</p>
139
- <farm-tooltip position="bottom-right">
140
- Bottom-Right Position
134
+ export const FluidTooltip = () => ({
135
+ components: { Tooltip },
136
+ template: `
137
+ <div style="padding-left: 80px; padding-top: 80px;">
138
+ <span style="display: flex; align-items: center;">
139
+ <span style="margin-right: 8px;">Fluid width tooltip</span>
140
+ <farm-tooltip placement="top-center" :fluid="true">
141
141
  <template v-slot:activator>
142
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
142
+ <farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
143
143
  </template>
144
+ This is a fluid tooltip that will grow based on its content.
145
+ It contains a longer text to demonstrate how it expands horizontally.
144
146
  </farm-tooltip>
145
- </div>
147
+ </span>
146
148
  </div>
147
- </div>`,
148
- });
149
-
150
- export const FluidWithPosition = () => ({
151
- template: `<div style="padding: 200px;">
152
- <span style="display: flex; align-items: center;">
153
- <span style="margin-right: 8px;">Fluid tooltip with position</span>
154
- <farm-tooltip fluid position="bottom-left">
155
- This is a fluid tooltip with Bottom-Left position.
156
- Notice how it grows based on content and has the arrow in the correct position.
157
- <template v-slot:activator>
158
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
159
- </template>
160
- </farm-tooltip>
161
- </span>
162
- </div>`,
163
- });
164
-
165
- export const TooltipWithTitle = () => ({
166
- template: `<div style="padding-left: 80px; padding-top: 80px;">
167
- <span style="display: flex; align-items: center;">
168
- <span style="margin-right: 8px;">Tooltip with title</span>
169
- <farm-tooltip fluid position="top-left">
170
- <template v-slot:title>
171
- <farm-icon size="sm" color="white">alert</farm-icon>
172
- <span class="ml-10">Important Information</span>
173
- </template>
174
- This tooltip has a title that appears at the top.
175
- <template v-slot:activator>
176
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
177
- </template>
178
- </farm-tooltip>
179
- </span>
180
- </div>`,
149
+ `,
181
150
  });
182
151
 
183
- export const ControlledTooltipWithTitle = () => ({
152
+ export const WithModal = () => ({
153
+ components: { Tooltip, Modal, DefaultButton, Typography, Icon },
184
154
  data() {
185
155
  return {
186
- showTooltip: false,
156
+ showModal: false,
187
157
  };
188
158
  },
189
- template: `<div style="padding: 80px;">
190
- <span style="display: flex; align-items: center;">
191
- <span style="margin-right: 8px;">Click to open:</span>
192
- <farm-tooltip fluid v-model="showTooltip" position="top-right">
193
- <template v-slot:title>
194
- Tooltip Title
159
+ template: `
160
+ <div>
161
+ <farm-btn color="primary" @click="showModal = true">
162
+ Abrir Modal com Tooltips
163
+ </farm-btn>
164
+
165
+ <farm-modal v-model="showModal" size="md">
166
+ <template v-slot:header>
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>
175
+ </template>
176
+
177
+ <template v-slot:content>
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>
355
+ </div>
356
+ </div>
195
357
  </template>
196
- This is a controlled tooltip with title.
197
- <br><br>
198
- Notice how the close button is aligned with the title.
199
- <template v-slot:activator>
200
- <farm-icon @click="showTooltip = !showTooltip" size="md" color="blue" style="cursor: pointer;">help-circle</farm-icon>
358
+
359
+ <template v-slot:footer>
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>
201
365
  </template>
202
- </farm-tooltip>
203
- </span>
204
- </div>`,
366
+ </farm-modal>
367
+ </div>
368
+ `,
205
369
  });