@farm-investimentos/front-mfe-components-vue3 1.4.0 → 1.4.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/dist/front-mfe-components.common.js +408 -413
- 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 +408 -413
- 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/Tooltip/Tooltip.scss +0 -21
- package/src/components/Tooltip/Tooltip.stories.js +38 -38
- package/src/components/Tooltip/Tooltip.vue +7 -12
- package/src/components/Tooltip/docs/Tooltip.md +50 -24
- package/src/components/Tooltip/types.ts +3 -11
- package/src/main.ts +2 -0
package/package.json
CHANGED
|
@@ -1,23 +1,12 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* CSS simplificado para Tooltip - Abordagem simples e direta
|
|
3
|
-
* SEMPRE usa position: fixed via JavaScript
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
/* Container principal */
|
|
7
1
|
.tooltip-container {
|
|
8
2
|
display: inline-block;
|
|
9
3
|
position: relative;
|
|
10
4
|
}
|
|
11
5
|
|
|
12
|
-
/* Activator */
|
|
13
6
|
.tooltip-activator {
|
|
14
7
|
display: inline-block;
|
|
15
8
|
}
|
|
16
9
|
|
|
17
|
-
/*
|
|
18
|
-
* COMPATIBILIDADE: Classes antigas mantidas para outros componentes
|
|
19
|
-
* que fazem @extend .farm-tooltip__popup
|
|
20
|
-
*/
|
|
21
10
|
.farm-tooltip {
|
|
22
11
|
display: inline-block;
|
|
23
12
|
position: relative;
|
|
@@ -28,7 +17,6 @@
|
|
|
28
17
|
}
|
|
29
18
|
|
|
30
19
|
.farm-tooltip__popup {
|
|
31
|
-
/* Estilos base mantidos para compatibilidade */
|
|
32
20
|
background-color: #333333;
|
|
33
21
|
color: #f5f5f5;
|
|
34
22
|
border-radius: 5px;
|
|
@@ -41,12 +29,10 @@
|
|
|
41
29
|
transform: translateZ(0);
|
|
42
30
|
pointer-events: auto;
|
|
43
31
|
|
|
44
|
-
/* Estados */
|
|
45
32
|
opacity: 0;
|
|
46
33
|
visibility: hidden;
|
|
47
34
|
transition: opacity 0.3s linear, visibility 0.3s linear;
|
|
48
35
|
|
|
49
|
-
/* Variantes */
|
|
50
36
|
&--visible {
|
|
51
37
|
opacity: 1;
|
|
52
38
|
visibility: visible;
|
|
@@ -57,7 +43,6 @@
|
|
|
57
43
|
max-width: 300px;
|
|
58
44
|
}
|
|
59
45
|
|
|
60
|
-
/* Header */
|
|
61
46
|
.farm-tooltip__header {
|
|
62
47
|
display: flex;
|
|
63
48
|
justify-content: space-between;
|
|
@@ -86,7 +71,6 @@
|
|
|
86
71
|
}
|
|
87
72
|
}
|
|
88
73
|
|
|
89
|
-
/* Estilos globais para tooltip criado dinamicamente */
|
|
90
74
|
.tooltip-popup {
|
|
91
75
|
background-color: #333333;
|
|
92
76
|
color: #f5f5f5;
|
|
@@ -100,7 +84,6 @@
|
|
|
100
84
|
transform: translateZ(0);
|
|
101
85
|
pointer-events: auto;
|
|
102
86
|
|
|
103
|
-
/* Estados */
|
|
104
87
|
opacity: 0;
|
|
105
88
|
visibility: hidden;
|
|
106
89
|
transition: opacity 0.3s linear, visibility 0.3s linear;
|
|
@@ -110,7 +93,6 @@
|
|
|
110
93
|
visibility: visible;
|
|
111
94
|
}
|
|
112
95
|
|
|
113
|
-
/* Variantes */
|
|
114
96
|
&--dark {
|
|
115
97
|
background-color: #333333;
|
|
116
98
|
color: #f5f5f5;
|
|
@@ -147,7 +129,6 @@
|
|
|
147
129
|
}
|
|
148
130
|
}
|
|
149
131
|
|
|
150
|
-
/* Tamanhos */
|
|
151
132
|
&--sm {
|
|
152
133
|
font-size: 11px;
|
|
153
134
|
padding: 12px;
|
|
@@ -163,7 +144,6 @@
|
|
|
163
144
|
padding: 20px;
|
|
164
145
|
}
|
|
165
146
|
|
|
166
|
-
/* Header */
|
|
167
147
|
.tooltip-header {
|
|
168
148
|
display: flex;
|
|
169
149
|
justify-content: space-between;
|
|
@@ -205,7 +185,6 @@
|
|
|
205
185
|
pointer-events: none;
|
|
206
186
|
}
|
|
207
187
|
|
|
208
|
-
/* Posicionamento específico */
|
|
209
188
|
&--has-title {
|
|
210
189
|
.tooltip-content {
|
|
211
190
|
margin-top: 4px;
|
|
@@ -7,7 +7,7 @@ export default {
|
|
|
7
7
|
docs: {
|
|
8
8
|
description: {
|
|
9
9
|
component: `Tooltip<br />
|
|
10
|
-
selector: <em>
|
|
10
|
+
selector: <em>farm-tooltip</em><br />
|
|
11
11
|
<span style="color: var(--farm-primary-base);">ready for use</span>
|
|
12
12
|
`,
|
|
13
13
|
},
|
|
@@ -43,17 +43,17 @@ export default {
|
|
|
43
43
|
|
|
44
44
|
export const Primary = {
|
|
45
45
|
render: () => ({
|
|
46
|
-
components: { Tooltip },
|
|
46
|
+
components: { 'farm-tooltip': Tooltip },
|
|
47
47
|
template: `
|
|
48
48
|
<div style="padding-left: 80px; padding-top: 80px;">
|
|
49
49
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
50
50
|
<span>Hover over the icon</span>
|
|
51
|
-
<
|
|
51
|
+
<farm-tooltip placement="top-center">
|
|
52
52
|
<template #activator>
|
|
53
53
|
<span style="display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #666; color: white; border-radius: 50%; font-size: 10px; cursor: help;">?</span>
|
|
54
54
|
</template>
|
|
55
55
|
This is a simple tooltip
|
|
56
|
-
</
|
|
56
|
+
</farm-tooltip>
|
|
57
57
|
</div>
|
|
58
58
|
</div>
|
|
59
59
|
`,
|
|
@@ -62,70 +62,70 @@ export const Primary = {
|
|
|
62
62
|
|
|
63
63
|
export const AllPositions = {
|
|
64
64
|
render: () => ({
|
|
65
|
-
components: { Tooltip },
|
|
65
|
+
components: { 'farm-tooltip': Tooltip },
|
|
66
66
|
template: `
|
|
67
67
|
<div style="padding: 100px; display: flex; flex-direction: column; align-items: center; gap: 50px;">
|
|
68
68
|
<div style="display: flex; gap: 30px; margin-bottom: 50px;">
|
|
69
69
|
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
70
70
|
<p style="margin-bottom: 10px;">Top Left</p>
|
|
71
|
-
<
|
|
71
|
+
<farm-tooltip placement="top-left">
|
|
72
72
|
<template #activator>
|
|
73
73
|
<span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
|
|
74
74
|
</template>
|
|
75
75
|
Top-Left Position
|
|
76
|
-
</
|
|
76
|
+
</farm-tooltip>
|
|
77
77
|
</div>
|
|
78
78
|
|
|
79
79
|
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
80
80
|
<p style="margin-bottom: 10px;">Top Center</p>
|
|
81
|
-
<
|
|
81
|
+
<farm-tooltip placement="top-center">
|
|
82
82
|
<template #activator>
|
|
83
83
|
<span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
|
|
84
84
|
</template>
|
|
85
85
|
Top-Center Position (Default)
|
|
86
|
-
</
|
|
86
|
+
</farm-tooltip>
|
|
87
87
|
</div>
|
|
88
88
|
|
|
89
89
|
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
90
90
|
<p style="margin-bottom: 10px;">Top Right</p>
|
|
91
|
-
<
|
|
91
|
+
<farm-tooltip placement="top-right">
|
|
92
92
|
<template #activator>
|
|
93
93
|
<span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
|
|
94
94
|
</template>
|
|
95
95
|
Top-Right Position
|
|
96
|
-
</
|
|
96
|
+
</farm-tooltip>
|
|
97
97
|
</div>
|
|
98
98
|
</div>
|
|
99
99
|
|
|
100
100
|
<div style="display: flex; gap: 30px;">
|
|
101
101
|
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
102
102
|
<p style="margin-bottom: 10px;">Bottom Left</p>
|
|
103
|
-
<
|
|
103
|
+
<farm-tooltip placement="bottom-left">
|
|
104
104
|
<template #activator>
|
|
105
105
|
<span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
|
|
106
106
|
</template>
|
|
107
107
|
Bottom-Left Position
|
|
108
|
-
</
|
|
108
|
+
</farm-tooltip>
|
|
109
109
|
</div>
|
|
110
110
|
|
|
111
111
|
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
112
112
|
<p style="margin-bottom: 10px;">Bottom Center</p>
|
|
113
|
-
<
|
|
113
|
+
<farm-tooltip placement="bottom-center">
|
|
114
114
|
<template #activator>
|
|
115
115
|
<span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
|
|
116
116
|
</template>
|
|
117
117
|
Bottom-Center Position
|
|
118
|
-
</
|
|
118
|
+
</farm-tooltip>
|
|
119
119
|
</div>
|
|
120
120
|
|
|
121
121
|
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
122
122
|
<p style="margin-bottom: 10px;">Bottom Right</p>
|
|
123
|
-
<
|
|
123
|
+
<farm-tooltip placement="bottom-right">
|
|
124
124
|
<template #activator>
|
|
125
125
|
<span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
|
|
126
126
|
</template>
|
|
127
127
|
Bottom-Right Position
|
|
128
|
-
</
|
|
128
|
+
</farm-tooltip>
|
|
129
129
|
</div>
|
|
130
130
|
</div>
|
|
131
131
|
</div>
|
|
@@ -135,7 +135,7 @@ export const AllPositions = {
|
|
|
135
135
|
|
|
136
136
|
export const ControlledTooltip = {
|
|
137
137
|
render: () => ({
|
|
138
|
-
components: { Tooltip },
|
|
138
|
+
components: { 'farm-tooltip': Tooltip },
|
|
139
139
|
data() {
|
|
140
140
|
return {
|
|
141
141
|
showTooltip: false,
|
|
@@ -145,7 +145,7 @@ export const ControlledTooltip = {
|
|
|
145
145
|
<div style="padding: 80px;">
|
|
146
146
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
147
147
|
<span>Click to open:</span>
|
|
148
|
-
<
|
|
148
|
+
<farm-tooltip v-model="showTooltip" placement="top-right">
|
|
149
149
|
<template #activator>
|
|
150
150
|
<span
|
|
151
151
|
@click="showTooltip = !showTooltip"
|
|
@@ -154,7 +154,7 @@ export const ControlledTooltip = {
|
|
|
154
154
|
</template>
|
|
155
155
|
<template #title>Controlled Tooltip</template>
|
|
156
156
|
This tooltip is controlled by v-model
|
|
157
|
-
</
|
|
157
|
+
</farm-tooltip>
|
|
158
158
|
</div>
|
|
159
159
|
</div>
|
|
160
160
|
`,
|
|
@@ -163,18 +163,18 @@ export const ControlledTooltip = {
|
|
|
163
163
|
|
|
164
164
|
export const FluidTooltip = {
|
|
165
165
|
render: () => ({
|
|
166
|
-
components: { Tooltip },
|
|
166
|
+
components: { 'farm-tooltip': Tooltip },
|
|
167
167
|
template: `
|
|
168
168
|
<div style="padding-left: 80px; padding-top: 80px;">
|
|
169
169
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
170
170
|
<span>Fluid width tooltip</span>
|
|
171
|
-
<
|
|
171
|
+
<farm-tooltip placement="top-center" :fluid="true">
|
|
172
172
|
<template #activator>
|
|
173
173
|
<span style="display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #666; color: white; border-radius: 50%; font-size: 10px; cursor: help;">?</span>
|
|
174
174
|
</template>
|
|
175
175
|
This is a fluid tooltip that will grow based on its content.
|
|
176
176
|
It contains a longer text to demonstrate how it expands horizontally.
|
|
177
|
-
</
|
|
177
|
+
</farm-tooltip>
|
|
178
178
|
</div>
|
|
179
179
|
</div>
|
|
180
180
|
`,
|
|
@@ -184,38 +184,38 @@ export const FluidTooltip = {
|
|
|
184
184
|
|
|
185
185
|
export const Sizes = {
|
|
186
186
|
render: () => ({
|
|
187
|
-
components: { Tooltip },
|
|
187
|
+
components: { 'farm-tooltip': Tooltip },
|
|
188
188
|
template: `
|
|
189
189
|
<div style="padding: 80px;">
|
|
190
190
|
<div style="display: flex; gap: 30px; align-items: center;">
|
|
191
191
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
192
192
|
<span>Small:</span>
|
|
193
|
-
<
|
|
193
|
+
<farm-tooltip placement="top-center" size="sm">
|
|
194
194
|
<template #activator>
|
|
195
195
|
<span style="display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #666; color: white; border-radius: 50%; font-size: 10px; cursor: help;">?</span>
|
|
196
196
|
</template>
|
|
197
197
|
Small tooltip
|
|
198
|
-
</
|
|
198
|
+
</farm-tooltip>
|
|
199
199
|
</div>
|
|
200
200
|
|
|
201
201
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
202
202
|
<span>Medium:</span>
|
|
203
|
-
<
|
|
203
|
+
<farm-tooltip placement="top-center" size="md">
|
|
204
204
|
<template #activator>
|
|
205
205
|
<span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
|
|
206
206
|
</template>
|
|
207
207
|
Medium tooltip (default)
|
|
208
|
-
</
|
|
208
|
+
</farm-tooltip>
|
|
209
209
|
</div>
|
|
210
210
|
|
|
211
211
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
212
212
|
<span>Large:</span>
|
|
213
|
-
<
|
|
213
|
+
<farm-tooltip placement="top-center" size="lg">
|
|
214
214
|
<template #activator>
|
|
215
215
|
<span style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #666; color: white; border-radius: 50%; font-size: 12px; cursor: help;">?</span>
|
|
216
216
|
</template>
|
|
217
217
|
Large tooltip
|
|
218
|
-
</
|
|
218
|
+
</farm-tooltip>
|
|
219
219
|
</div>
|
|
220
220
|
</div>
|
|
221
221
|
</div>
|
|
@@ -225,28 +225,28 @@ export const Sizes = {
|
|
|
225
225
|
|
|
226
226
|
export const WithCustomMaxWidth = {
|
|
227
227
|
render: () => ({
|
|
228
|
-
components: { Tooltip },
|
|
228
|
+
components: { 'farm-tooltip': Tooltip },
|
|
229
229
|
template: `
|
|
230
230
|
<div style="padding: 80px;">
|
|
231
231
|
<div style="display: flex; gap: 30px; align-items: center;">
|
|
232
232
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
233
233
|
<span>Default width:</span>
|
|
234
|
-
<
|
|
234
|
+
<farm-tooltip placement="top-center">
|
|
235
235
|
<template #activator>
|
|
236
236
|
<span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #666; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
|
|
237
237
|
</template>
|
|
238
238
|
This is a tooltip with default width that can be quite long and will wrap naturally
|
|
239
|
-
</
|
|
239
|
+
</farm-tooltip>
|
|
240
240
|
</div>
|
|
241
241
|
|
|
242
242
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
243
243
|
<span>Custom max-width (200px):</span>
|
|
244
|
-
<
|
|
244
|
+
<farm-tooltip placement="top-center" max-width="200px">
|
|
245
245
|
<template #activator>
|
|
246
246
|
<span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #007bff; color: white; border-radius: 50%; font-size: 11px; cursor: help;">?</span>
|
|
247
247
|
</template>
|
|
248
248
|
This is a tooltip with custom max-width of 200px that will wrap when it exceeds that width
|
|
249
|
-
</
|
|
249
|
+
</farm-tooltip>
|
|
250
250
|
</div>
|
|
251
251
|
</div>
|
|
252
252
|
</div>
|
|
@@ -256,12 +256,12 @@ export const WithCustomMaxWidth = {
|
|
|
256
256
|
|
|
257
257
|
export const ComplexContent = {
|
|
258
258
|
render: () => ({
|
|
259
|
-
components: { Tooltip },
|
|
259
|
+
components: { 'farm-tooltip': Tooltip },
|
|
260
260
|
template: `
|
|
261
261
|
<div style="padding: 80px;">
|
|
262
262
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
263
263
|
<span>Complex tooltip with title:</span>
|
|
264
|
-
<
|
|
264
|
+
<farm-tooltip placement="top-center" :fluid="true">
|
|
265
265
|
<template #activator>
|
|
266
266
|
<span style="display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #28a745; color: white; border-radius: 50%; font-size: 11px; cursor: help;">i</span>
|
|
267
267
|
</template>
|
|
@@ -274,7 +274,7 @@ export const ComplexContent = {
|
|
|
274
274
|
<li>Processing time: 2-3 business days</li>
|
|
275
275
|
</ul>
|
|
276
276
|
</div>
|
|
277
|
-
</
|
|
277
|
+
</farm-tooltip>
|
|
278
278
|
</div>
|
|
279
279
|
</div>
|
|
280
280
|
`,
|
|
@@ -52,6 +52,10 @@
|
|
|
52
52
|
<script setup lang="ts">
|
|
53
53
|
import { ref, computed, onBeforeUnmount, nextTick, watch, useSlots } from 'vue';
|
|
54
54
|
|
|
55
|
+
defineOptions({
|
|
56
|
+
name: 'farm-tooltip',
|
|
57
|
+
});
|
|
58
|
+
|
|
55
59
|
export interface TooltipProps {
|
|
56
60
|
modelValue?: boolean;
|
|
57
61
|
trigger?: 'hover' | 'click' | 'manual';
|
|
@@ -69,7 +73,6 @@ export interface TooltipProps {
|
|
|
69
73
|
delay?: number | [number, number];
|
|
70
74
|
disabled?: boolean;
|
|
71
75
|
fluid?: boolean;
|
|
72
|
-
position?: string;
|
|
73
76
|
}
|
|
74
77
|
|
|
75
78
|
const props = withDefaults(defineProps<TooltipProps>(), {
|
|
@@ -83,7 +86,6 @@ const props = withDefaults(defineProps<TooltipProps>(), {
|
|
|
83
86
|
delay: () => [100, 50],
|
|
84
87
|
disabled: false,
|
|
85
88
|
fluid: false,
|
|
86
|
-
position: undefined,
|
|
87
89
|
});
|
|
88
90
|
|
|
89
91
|
const emit = defineEmits<{
|
|
@@ -111,13 +113,6 @@ const isControlled = computed(() => props.modelValue !== undefined);
|
|
|
111
113
|
const hasTitle = computed(() => !!slots.title);
|
|
112
114
|
const showCloseButton = computed(() => isControlled.value && hasTitle.value);
|
|
113
115
|
|
|
114
|
-
const normalizedPlacement = computed(() => {
|
|
115
|
-
if (props.position) {
|
|
116
|
-
return props.position as typeof props.placement;
|
|
117
|
-
}
|
|
118
|
-
return props.placement;
|
|
119
|
-
});
|
|
120
|
-
|
|
121
116
|
const normalizedMaxWidth = computed(() => {
|
|
122
117
|
if (props.fluid) {
|
|
123
118
|
return '300px';
|
|
@@ -131,7 +126,7 @@ const tooltipClasses = computed(() => ({
|
|
|
131
126
|
[`tooltip-popup--${props.variant}`]: true,
|
|
132
127
|
[`tooltip-popup--${props.size}`]: true,
|
|
133
128
|
'tooltip-popup--has-title': hasTitle.value,
|
|
134
|
-
[`tooltip-popup--${
|
|
129
|
+
[`tooltip-popup--${props.placement}`]: true,
|
|
135
130
|
}));
|
|
136
131
|
|
|
137
132
|
const tooltipStyles = computed(() => {
|
|
@@ -152,7 +147,7 @@ const tooltipStyles = computed(() => {
|
|
|
152
147
|
});
|
|
153
148
|
|
|
154
149
|
const arrowStyles = computed(() => {
|
|
155
|
-
const [verticalPos] =
|
|
150
|
+
const [verticalPos] = props.placement.split('-');
|
|
156
151
|
const arrowColor = props.variant === 'light' ? '#ffffff' : '#333333';
|
|
157
152
|
|
|
158
153
|
const styles: Record<string, string> = {
|
|
@@ -315,7 +310,7 @@ const updatePosition = () => {
|
|
|
315
310
|
const position = calculateTooltipPosition(
|
|
316
311
|
activatorRect,
|
|
317
312
|
tooltipRect,
|
|
318
|
-
|
|
313
|
+
props.placement,
|
|
319
314
|
props.offset
|
|
320
315
|
);
|
|
321
316
|
|
|
@@ -29,7 +29,33 @@ O componente Tooltip fornece informações contextuais ao usuário através de u
|
|
|
29
29
|
## 📦 Instalação e Importação
|
|
30
30
|
|
|
31
31
|
```javascript
|
|
32
|
+
// Importar o componente
|
|
32
33
|
import { Tooltip } from '@farm-investimentos/front-mfe-components-vue3';
|
|
34
|
+
|
|
35
|
+
// Registrar no app Vue (global)
|
|
36
|
+
app.component('farm-tooltip', Tooltip);
|
|
37
|
+
|
|
38
|
+
// Ou registrar localmente no componente
|
|
39
|
+
export default {
|
|
40
|
+
components: {
|
|
41
|
+
'farm-tooltip': Tooltip
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Com script setup
|
|
46
|
+
import { Tooltip } from '@farm-investimentos/front-mfe-components-vue3';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Uso com npm link
|
|
50
|
+
Após fazer `npm link` no projeto e `npm link @farm-investimentos/front-mfe-components-vue3` no projeto de destino, você pode usar:
|
|
51
|
+
|
|
52
|
+
```javascript
|
|
53
|
+
// main.js ou main.ts
|
|
54
|
+
import { createApp } from 'vue';
|
|
55
|
+
import { Tooltip } from '@farm-investimentos/front-mfe-components-vue3';
|
|
56
|
+
|
|
57
|
+
const app = createApp(App);
|
|
58
|
+
app.component('farm-tooltip', Tooltip);
|
|
33
59
|
```
|
|
34
60
|
|
|
35
61
|
## 🎨 API
|
|
@@ -69,28 +95,28 @@ import { Tooltip } from '@farm-investimentos/front-mfe-components-vue3';
|
|
|
69
95
|
|
|
70
96
|
### Básico
|
|
71
97
|
```vue
|
|
72
|
-
<
|
|
98
|
+
<farm-tooltip>
|
|
73
99
|
<template #activator>
|
|
74
100
|
<button>Hover me</button>
|
|
75
101
|
</template>
|
|
76
102
|
Informação adicional sobre este botão
|
|
77
|
-
</
|
|
103
|
+
</farm-tooltip>
|
|
78
104
|
```
|
|
79
105
|
|
|
80
106
|
### Posicionamento Customizado
|
|
81
107
|
```vue
|
|
82
|
-
<
|
|
108
|
+
<farm-tooltip placement="bottom-right" :offset="12">
|
|
83
109
|
<template #activator>
|
|
84
110
|
<IconHelp />
|
|
85
111
|
</template>
|
|
86
112
|
Ajuda contextual posicionada à direita
|
|
87
|
-
</
|
|
113
|
+
</farm-tooltip>
|
|
88
114
|
```
|
|
89
115
|
|
|
90
116
|
### Modo Controlado com Título
|
|
91
117
|
```vue
|
|
92
118
|
<template>
|
|
93
|
-
<
|
|
119
|
+
<farm-tooltip v-model="showHelp">
|
|
94
120
|
<template #activator>
|
|
95
121
|
<button @click="showHelp = !showHelp">
|
|
96
122
|
Toggle Help
|
|
@@ -104,7 +130,7 @@ import { Tooltip } from '@farm-investimentos/front-mfe-components-vue3';
|
|
|
104
130
|
<li>Segundo ponto</li>
|
|
105
131
|
<li>Terceiro ponto</li>
|
|
106
132
|
</ul>
|
|
107
|
-
</
|
|
133
|
+
</farm-tooltip>
|
|
108
134
|
</template>
|
|
109
135
|
|
|
110
136
|
<script setup>
|
|
@@ -115,50 +141,50 @@ const showHelp = ref(false);
|
|
|
115
141
|
|
|
116
142
|
### Tooltip Fluido para Conteúdo Longo
|
|
117
143
|
```vue
|
|
118
|
-
<
|
|
144
|
+
<farm-tooltip :fluid="true">
|
|
119
145
|
<template #activator>
|
|
120
146
|
<span>Ver descrição completa</span>
|
|
121
147
|
</template>
|
|
122
148
|
Este é um texto mais longo que se adapta automaticamente
|
|
123
149
|
à largura do conteúdo, expandindo até o máximo de 300px
|
|
124
150
|
antes de quebrar em múltiplas linhas.
|
|
125
|
-
</
|
|
151
|
+
</farm-tooltip>
|
|
126
152
|
```
|
|
127
153
|
|
|
128
154
|
### Diferentes Tamanhos
|
|
129
155
|
```vue
|
|
130
156
|
<div class="flex gap-4">
|
|
131
|
-
<
|
|
157
|
+
<farm-tooltip size="sm">
|
|
132
158
|
<template #activator>
|
|
133
159
|
<Badge>SM</Badge>
|
|
134
160
|
</template>
|
|
135
161
|
Tooltip pequeno
|
|
136
|
-
</
|
|
162
|
+
</farm-tooltip>
|
|
137
163
|
|
|
138
|
-
<
|
|
164
|
+
<farm-tooltip size="md">
|
|
139
165
|
<template #activator>
|
|
140
166
|
<Badge>MD</Badge>
|
|
141
167
|
</template>
|
|
142
168
|
Tooltip médio (padrão)
|
|
143
|
-
</
|
|
169
|
+
</farm-tooltip>
|
|
144
170
|
|
|
145
|
-
<
|
|
171
|
+
<farm-tooltip size="lg">
|
|
146
172
|
<template #activator>
|
|
147
173
|
<Badge>LG</Badge>
|
|
148
174
|
</template>
|
|
149
175
|
Tooltip grande com mais espaçamento
|
|
150
|
-
</
|
|
176
|
+
</farm-tooltip>
|
|
151
177
|
</div>
|
|
152
178
|
```
|
|
153
179
|
|
|
154
180
|
### Com Delay Customizado
|
|
155
181
|
```vue
|
|
156
|
-
<
|
|
182
|
+
<farm-tooltip :delay="[500, 0]">
|
|
157
183
|
<template #activator>
|
|
158
184
|
<button>Hover com delay</button>
|
|
159
185
|
</template>
|
|
160
186
|
Aparece após 500ms, desaparece instantaneamente
|
|
161
|
-
</
|
|
187
|
+
</farm-tooltip>
|
|
162
188
|
```
|
|
163
189
|
|
|
164
190
|
## 🎯 Casos de Uso Comuns
|
|
@@ -167,42 +193,42 @@ const showHelp = ref(false);
|
|
|
167
193
|
```vue
|
|
168
194
|
<label>
|
|
169
195
|
CPF
|
|
170
|
-
<
|
|
196
|
+
<farm-tooltip placement="top-right">
|
|
171
197
|
<template #activator>
|
|
172
198
|
<IconQuestion class="ml-1 text-gray-400" />
|
|
173
199
|
</template>
|
|
174
200
|
Digite apenas números, sem pontos ou traços
|
|
175
|
-
</
|
|
201
|
+
</farm-tooltip>
|
|
176
202
|
</label>
|
|
177
203
|
```
|
|
178
204
|
|
|
179
205
|
### 2. Botões com Ações Desabilitadas
|
|
180
206
|
```vue
|
|
181
|
-
<
|
|
207
|
+
<farm-tooltip :disabled="canDelete">
|
|
182
208
|
<template #activator>
|
|
183
209
|
<button :disabled="!canDelete" @click="handleDelete">
|
|
184
210
|
Excluir
|
|
185
211
|
</button>
|
|
186
212
|
</template>
|
|
187
213
|
Você não tem permissão para excluir este item
|
|
188
|
-
</
|
|
214
|
+
</farm-tooltip>
|
|
189
215
|
```
|
|
190
216
|
|
|
191
217
|
### 3. Truncate com Preview Completo
|
|
192
218
|
```vue
|
|
193
|
-
<
|
|
219
|
+
<farm-tooltip>
|
|
194
220
|
<template #activator>
|
|
195
221
|
<p class="truncate max-w-xs">
|
|
196
222
|
{{ longText }}
|
|
197
223
|
</p>
|
|
198
224
|
</template>
|
|
199
225
|
{{ longText }}
|
|
200
|
-
</
|
|
226
|
+
</farm-tooltip>
|
|
201
227
|
```
|
|
202
228
|
|
|
203
229
|
### 4. Status com Detalhes
|
|
204
230
|
```vue
|
|
205
|
-
<
|
|
231
|
+
<farm-tooltip placement="bottom-center">
|
|
206
232
|
<template #activator>
|
|
207
233
|
<StatusBadge :status="order.status" />
|
|
208
234
|
</template>
|
|
@@ -211,7 +237,7 @@ const showHelp = ref(false);
|
|
|
211
237
|
<p><strong>Atualizado:</strong> {{ order.updatedAt }}</p>
|
|
212
238
|
<p><strong>Por:</strong> {{ order.updatedBy }}</p>
|
|
213
239
|
</div>
|
|
214
|
-
</
|
|
240
|
+
</farm-tooltip>
|
|
215
241
|
```
|
|
216
242
|
|
|
217
243
|
## ⚡ Performance e Boas Práticas
|
|
@@ -13,28 +13,20 @@ export type TooltipVariant = 'dark' | 'light';
|
|
|
13
13
|
export type TooltipSize = 'sm' | 'md' | 'lg';
|
|
14
14
|
|
|
15
15
|
export interface TooltipProps {
|
|
16
|
-
|
|
17
|
-
modelValue?: boolean; // v-model
|
|
16
|
+
modelValue?: boolean;
|
|
18
17
|
trigger?: TooltipTrigger;
|
|
19
|
-
|
|
20
|
-
// Placement (all 6 positions are supported)
|
|
21
18
|
placement?: TooltipPlacement;
|
|
22
19
|
offset?: number;
|
|
23
|
-
|
|
24
|
-
// Aparência
|
|
25
20
|
variant?: TooltipVariant;
|
|
26
21
|
size?: TooltipSize;
|
|
27
22
|
maxWidth?: string | number;
|
|
28
|
-
|
|
29
|
-
// Comportamento
|
|
30
|
-
delay?: number | [number, number]; // [show, hide]
|
|
23
|
+
delay?: number | [number, number];
|
|
31
24
|
disabled?: boolean;
|
|
32
25
|
fluid?: boolean;
|
|
33
|
-
position?: string;
|
|
34
26
|
}
|
|
35
27
|
|
|
36
28
|
export interface TooltipEmits {
|
|
37
|
-
'update:modelValue': [value: boolean];
|
|
29
|
+
'update:modelValue': [value: boolean];
|
|
38
30
|
show: [];
|
|
39
31
|
hide: [];
|
|
40
32
|
}
|
package/src/main.ts
CHANGED
|
@@ -18,6 +18,7 @@ import PromptUserToConfirm from './components/PromptUserToConfirm';
|
|
|
18
18
|
import RangeDatePicker from './components/RangeDatePicker';
|
|
19
19
|
import ResourceMetaInfo from './components/ResourceMetaInfo';
|
|
20
20
|
import TableContextMenu from './components/TableContextMenu';
|
|
21
|
+
import Tooltip from './components/Tooltip';
|
|
21
22
|
|
|
22
23
|
export {
|
|
23
24
|
DataTablePaginator,
|
|
@@ -38,6 +39,7 @@ export {
|
|
|
38
39
|
Collapsible,
|
|
39
40
|
IdCaption,
|
|
40
41
|
ResourceMetaInfo,
|
|
42
|
+
Tooltip,
|
|
41
43
|
};
|
|
42
44
|
|
|
43
45
|
export * from './components/AlertBox';
|