@farm-investimentos/front-mfe-components-vue3 1.3.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 +420 -1146
- 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 +420 -1146
- 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 +3 -3
- package/src/components/Tooltip/Tooltip.scss +174 -22
- package/src/components/Tooltip/Tooltip.stories.js +264 -80
- package/src/components/Tooltip/Tooltip.vue +399 -119
- package/src/components/Tooltip/__tests__/Tooltip.spec.js +192 -9
- package/src/components/Tooltip/docs/Tooltip.md +313 -0
- package/src/components/Tooltip/index.ts +17 -2
- package/src/components/Tooltip/types.ts +43 -0
- package/src/main.ts +2 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@farm-investimentos/front-mfe-components-vue3",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
"webpack": "5.94.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@babel/core": "7.
|
|
46
|
-
"@babel/generator": "7.
|
|
45
|
+
"@babel/core": "^7.22.0",
|
|
46
|
+
"@babel/generator": "^7.22.0",
|
|
47
47
|
"@farm-investimentos/front-mfe-libs-ts": "3.0.5",
|
|
48
48
|
"@storybook/addon-essentials": "^8.2.9",
|
|
49
49
|
"@storybook/addon-interactions": "^8.2.9",
|
|
@@ -1,41 +1,193 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
.tooltip-container {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
position: relative;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.tooltip-activator {
|
|
7
|
+
display: inline-block;
|
|
8
|
+
}
|
|
3
9
|
|
|
4
10
|
.farm-tooltip {
|
|
5
11
|
display: inline-block;
|
|
6
12
|
position: relative;
|
|
13
|
+
}
|
|
7
14
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
15
|
+
.farm-tooltip__activator {
|
|
16
|
+
display: inline-block;
|
|
11
17
|
}
|
|
12
18
|
|
|
13
19
|
.farm-tooltip__popup {
|
|
14
|
-
background-color:
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
20
|
+
background-color: #333333;
|
|
21
|
+
color: #f5f5f5;
|
|
22
|
+
border-radius: 5px;
|
|
23
|
+
font-family: 'Manrope', sans-serif;
|
|
24
|
+
font-size: 12px;
|
|
25
|
+
font-weight: 500;
|
|
26
|
+
padding: 16px;
|
|
27
|
+
position: fixed;
|
|
28
|
+
z-index: 10001;
|
|
29
|
+
transform: translateZ(0);
|
|
30
|
+
pointer-events: auto;
|
|
31
|
+
|
|
32
|
+
opacity: 0;
|
|
33
|
+
visibility: hidden;
|
|
34
|
+
transition: opacity 0.3s linear, visibility 0.3s linear;
|
|
35
|
+
|
|
36
|
+
&--visible {
|
|
37
|
+
opacity: 1;
|
|
38
|
+
visibility: visible;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&--fluid {
|
|
42
|
+
width: auto;
|
|
43
|
+
max-width: 300px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.farm-tooltip__header {
|
|
47
|
+
display: flex;
|
|
48
|
+
justify-content: space-between;
|
|
49
|
+
align-items: center;
|
|
50
|
+
margin-bottom: 8px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.farm-tooltip__title {
|
|
54
|
+
font-weight: 600;
|
|
55
|
+
font-size: 13px;
|
|
56
|
+
margin-right: 16px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.farm-tooltip__content {
|
|
60
|
+
font-weight: 500;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.farm-tooltip__close {
|
|
64
|
+
width: 16px;
|
|
65
|
+
height: 16px;
|
|
66
|
+
line-height: 16px;
|
|
67
|
+
text-align: center;
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
font-size: 16px;
|
|
70
|
+
color: #f5f5f5;
|
|
19
71
|
}
|
|
20
72
|
}
|
|
21
73
|
|
|
22
|
-
.
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
transition: visibility 0.3s linear, opacity 0.3s linear;
|
|
26
|
-
position: absolute;
|
|
27
|
-
width: 160px;
|
|
28
|
-
contain: content;
|
|
29
|
-
color: white;
|
|
74
|
+
.tooltip-popup {
|
|
75
|
+
background-color: #333333;
|
|
76
|
+
color: #f5f5f5;
|
|
30
77
|
border-radius: 5px;
|
|
31
|
-
font-family: 'Manrope', sans-serif
|
|
78
|
+
font-family: 'Manrope', sans-serif;
|
|
32
79
|
font-size: 12px;
|
|
33
|
-
font-weight:
|
|
34
|
-
padding:
|
|
35
|
-
|
|
80
|
+
font-weight: 500;
|
|
81
|
+
padding: 16px;
|
|
82
|
+
position: fixed;
|
|
83
|
+
z-index: 10001;
|
|
84
|
+
transform: translateZ(0);
|
|
85
|
+
pointer-events: auto;
|
|
86
|
+
|
|
87
|
+
opacity: 0;
|
|
88
|
+
visibility: hidden;
|
|
89
|
+
transition: opacity 0.3s linear, visibility 0.3s linear;
|
|
36
90
|
|
|
37
91
|
&--visible {
|
|
38
92
|
opacity: 1;
|
|
39
93
|
visibility: visible;
|
|
40
94
|
}
|
|
95
|
+
|
|
96
|
+
&--dark {
|
|
97
|
+
background-color: #333333;
|
|
98
|
+
color: #f5f5f5;
|
|
99
|
+
|
|
100
|
+
.tooltip-arrow {
|
|
101
|
+
border-color: #333333 transparent transparent transparent !important;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&.tooltip-popup--bottom-left,
|
|
105
|
+
&.tooltip-popup--bottom-center,
|
|
106
|
+
&.tooltip-popup--bottom-right {
|
|
107
|
+
.tooltip-arrow {
|
|
108
|
+
border-color: transparent transparent #333333 transparent !important;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&--light {
|
|
114
|
+
background-color: #ffffff;
|
|
115
|
+
color: #333333;
|
|
116
|
+
border: 1px solid #e0e0e0;
|
|
117
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
118
|
+
|
|
119
|
+
.tooltip-arrow {
|
|
120
|
+
border-color: #ffffff transparent transparent transparent !important;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&.tooltip-popup--bottom-left,
|
|
124
|
+
&.tooltip-popup--bottom-center,
|
|
125
|
+
&.tooltip-popup--bottom-right {
|
|
126
|
+
.tooltip-arrow {
|
|
127
|
+
border-color: transparent transparent #ffffff transparent !important;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
&--sm {
|
|
133
|
+
font-size: 11px;
|
|
134
|
+
padding: 12px;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
&--md {
|
|
138
|
+
font-size: 12px;
|
|
139
|
+
padding: 16px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
&--lg {
|
|
143
|
+
font-size: 14px;
|
|
144
|
+
padding: 20px;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.tooltip-header {
|
|
148
|
+
display: flex;
|
|
149
|
+
justify-content: space-between;
|
|
150
|
+
align-items: center;
|
|
151
|
+
margin-bottom: 8px;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.tooltip-title {
|
|
155
|
+
font-weight: 600;
|
|
156
|
+
font-size: 13px;
|
|
157
|
+
margin-right: 16px;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.tooltip-content {
|
|
161
|
+
font-weight: 500;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.tooltip-close {
|
|
165
|
+
width: 16px;
|
|
166
|
+
height: 16px;
|
|
167
|
+
line-height: 16px;
|
|
168
|
+
text-align: center;
|
|
169
|
+
cursor: pointer;
|
|
170
|
+
font-size: 16px;
|
|
171
|
+
color: inherit;
|
|
172
|
+
transition: opacity 0.2s ease;
|
|
173
|
+
|
|
174
|
+
&:hover {
|
|
175
|
+
opacity: 0.7;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.tooltip-arrow {
|
|
180
|
+
position: absolute;
|
|
181
|
+
width: 0;
|
|
182
|
+
height: 0;
|
|
183
|
+
border-style: solid;
|
|
184
|
+
z-index: inherit;
|
|
185
|
+
pointer-events: none;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
&--has-title {
|
|
189
|
+
.tooltip-content {
|
|
190
|
+
margin-top: 4px;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
41
193
|
}
|
|
@@ -1,98 +1,282 @@
|
|
|
1
|
-
|
|
2
|
-
import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
|
|
3
|
-
const colors = Object.keys(baseThemeColors);
|
|
1
|
+
import Tooltip from './Tooltip.vue';
|
|
4
2
|
|
|
5
3
|
export default {
|
|
6
|
-
title: '
|
|
7
|
-
|
|
4
|
+
title: 'Display/Tooltip',
|
|
5
|
+
component: Tooltip,
|
|
8
6
|
parameters: {
|
|
9
7
|
docs: {
|
|
10
8
|
description: {
|
|
11
9
|
component: `Tooltip<br />
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
selector: <em>farm-tooltip</em><br />
|
|
11
|
+
<span style="color: var(--farm-primary-base);">ready for use</span>
|
|
12
|
+
`,
|
|
15
13
|
},
|
|
16
14
|
},
|
|
17
|
-
design: {
|
|
18
|
-
type: 'figma',
|
|
19
|
-
url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=3779%3A6131',
|
|
20
|
-
},
|
|
21
15
|
viewMode: 'docs',
|
|
22
16
|
},
|
|
17
|
+
argTypes: {
|
|
18
|
+
placement: {
|
|
19
|
+
control: 'select',
|
|
20
|
+
options: [
|
|
21
|
+
'top-left',
|
|
22
|
+
'top-center',
|
|
23
|
+
'top-right',
|
|
24
|
+
'bottom-left',
|
|
25
|
+
'bottom-center',
|
|
26
|
+
'bottom-right',
|
|
27
|
+
],
|
|
28
|
+
},
|
|
29
|
+
variant: {
|
|
30
|
+
control: 'select',
|
|
31
|
+
options: ['dark'],
|
|
32
|
+
},
|
|
33
|
+
size: {
|
|
34
|
+
control: 'select',
|
|
35
|
+
options: ['sm', 'md', 'lg'],
|
|
36
|
+
},
|
|
37
|
+
trigger: {
|
|
38
|
+
control: 'select',
|
|
39
|
+
options: ['hover', 'click', 'manual'],
|
|
40
|
+
},
|
|
41
|
+
},
|
|
23
42
|
};
|
|
24
43
|
|
|
25
|
-
export const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
:color="color"
|
|
36
|
-
style="margin-right: 4px"
|
|
37
|
-
>
|
|
38
|
-
<span>
|
|
39
|
-
this is the tooltip for {{ color }}
|
|
40
|
-
</span>
|
|
41
|
-
<template v-slot:activator="{ on, attrs }">
|
|
42
|
-
<farm-bodytext :color="color">{{ color }}</farm-bodytext>
|
|
44
|
+
export const Primary = {
|
|
45
|
+
render: () => ({
|
|
46
|
+
components: { 'farm-tooltip': Tooltip },
|
|
47
|
+
template: `
|
|
48
|
+
<div style="padding-left: 80px; padding-top: 80px;">
|
|
49
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
50
|
+
<span>Hover over the icon</span>
|
|
51
|
+
<farm-tooltip placement="top-center">
|
|
52
|
+
<template #activator>
|
|
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>
|
|
43
54
|
</template>
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
55
|
+
This is a simple tooltip
|
|
56
|
+
</farm-tooltip>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
`,
|
|
60
|
+
}),
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
export const AllPositions = {
|
|
64
|
+
render: () => ({
|
|
65
|
+
components: { 'farm-tooltip': Tooltip },
|
|
66
|
+
template: `
|
|
67
|
+
<div style="padding: 100px; display: flex; flex-direction: column; align-items: center; gap: 50px;">
|
|
68
|
+
<div style="display: flex; gap: 30px; margin-bottom: 50px;">
|
|
69
|
+
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
70
|
+
<p style="margin-bottom: 10px;">Top Left</p>
|
|
71
|
+
<farm-tooltip placement="top-left">
|
|
72
|
+
<template #activator>
|
|
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
|
+
</template>
|
|
75
|
+
Top-Left Position
|
|
76
|
+
</farm-tooltip>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
80
|
+
<p style="margin-bottom: 10px;">Top Center</p>
|
|
81
|
+
<farm-tooltip placement="top-center">
|
|
82
|
+
<template #activator>
|
|
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
|
+
</template>
|
|
85
|
+
Top-Center Position (Default)
|
|
86
|
+
</farm-tooltip>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
90
|
+
<p style="margin-bottom: 10px;">Top Right</p>
|
|
91
|
+
<farm-tooltip placement="top-right">
|
|
92
|
+
<template #activator>
|
|
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
|
+
</template>
|
|
95
|
+
Top-Right Position
|
|
96
|
+
</farm-tooltip>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<div style="display: flex; gap: 30px;">
|
|
101
|
+
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
102
|
+
<p style="margin-bottom: 10px;">Bottom Left</p>
|
|
103
|
+
<farm-tooltip placement="bottom-left">
|
|
104
|
+
<template #activator>
|
|
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
|
+
</template>
|
|
107
|
+
Bottom-Left Position
|
|
108
|
+
</farm-tooltip>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
112
|
+
<p style="margin-bottom: 10px;">Bottom Center</p>
|
|
113
|
+
<farm-tooltip placement="bottom-center">
|
|
114
|
+
<template #activator>
|
|
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
|
+
</template>
|
|
117
|
+
Bottom-Center Position
|
|
118
|
+
</farm-tooltip>
|
|
119
|
+
</div>
|
|
47
120
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
121
|
+
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
122
|
+
<p style="margin-bottom: 10px;">Bottom Right</p>
|
|
123
|
+
<farm-tooltip placement="bottom-right">
|
|
124
|
+
<template #activator>
|
|
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
|
+
</template>
|
|
127
|
+
Bottom-Right Position
|
|
128
|
+
</farm-tooltip>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
`,
|
|
133
|
+
}),
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
export const ControlledTooltip = {
|
|
137
|
+
render: () => ({
|
|
138
|
+
components: { 'farm-tooltip': Tooltip },
|
|
139
|
+
data() {
|
|
140
|
+
return {
|
|
141
|
+
showTooltip: false,
|
|
142
|
+
};
|
|
143
|
+
},
|
|
144
|
+
template: `
|
|
145
|
+
<div style="padding: 80px;">
|
|
146
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
147
|
+
<span>Click to open:</span>
|
|
148
|
+
<farm-tooltip v-model="showTooltip" placement="top-right">
|
|
149
|
+
<template #activator>
|
|
150
|
+
<span
|
|
151
|
+
@click="showTooltip = !showTooltip"
|
|
152
|
+
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: pointer;"
|
|
153
|
+
>?</span>
|
|
56
154
|
</template>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
155
|
+
<template #title>Controlled Tooltip</template>
|
|
156
|
+
This tooltip is controlled by v-model
|
|
157
|
+
</farm-tooltip>
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
`,
|
|
161
|
+
}),
|
|
162
|
+
};
|
|
60
163
|
|
|
61
|
-
export const
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
some <em>sample</em> text<br />
|
|
72
|
-
some <em>sample</em> text<br />
|
|
73
|
-
some <em>sample</em> text<br />
|
|
74
|
-
some <em>sample</em> text<br />
|
|
75
|
-
some <em>sample</em> text<br />
|
|
76
|
-
some <em>sample</em> text<br />
|
|
77
|
-
some <em>sample</em> text<br />
|
|
78
|
-
<template v-slot:activator="{ on, attrs }">
|
|
79
|
-
<farm-btn @click="show = !show">
|
|
80
|
-
toggle me
|
|
81
|
-
</farm-btn>
|
|
164
|
+
export const FluidTooltip = {
|
|
165
|
+
render: () => ({
|
|
166
|
+
components: { 'farm-tooltip': Tooltip },
|
|
167
|
+
template: `
|
|
168
|
+
<div style="padding-left: 80px; padding-top: 80px;">
|
|
169
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
170
|
+
<span>Fluid width tooltip</span>
|
|
171
|
+
<farm-tooltip placement="top-center" :fluid="true">
|
|
172
|
+
<template #activator>
|
|
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>
|
|
82
174
|
</template>
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
175
|
+
This is a fluid tooltip that will grow based on its content.
|
|
176
|
+
It contains a longer text to demonstrate how it expands horizontally.
|
|
177
|
+
</farm-tooltip>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
`,
|
|
181
|
+
}),
|
|
182
|
+
};
|
|
183
|
+
|
|
86
184
|
|
|
87
|
-
export const
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
185
|
+
export const Sizes = {
|
|
186
|
+
render: () => ({
|
|
187
|
+
components: { 'farm-tooltip': Tooltip },
|
|
188
|
+
template: `
|
|
189
|
+
<div style="padding: 80px;">
|
|
190
|
+
<div style="display: flex; gap: 30px; align-items: center;">
|
|
191
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
192
|
+
<span>Small:</span>
|
|
193
|
+
<farm-tooltip placement="top-center" size="sm">
|
|
194
|
+
<template #activator>
|
|
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
|
+
</template>
|
|
197
|
+
Small tooltip
|
|
198
|
+
</farm-tooltip>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
202
|
+
<span>Medium:</span>
|
|
203
|
+
<farm-tooltip placement="top-center" size="md">
|
|
204
|
+
<template #activator>
|
|
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
|
+
</template>
|
|
207
|
+
Medium tooltip (default)
|
|
208
|
+
</farm-tooltip>
|
|
209
|
+
</div>
|
|
210
|
+
|
|
211
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
212
|
+
<span>Large:</span>
|
|
213
|
+
<farm-tooltip placement="top-center" size="lg">
|
|
214
|
+
<template #activator>
|
|
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
|
+
</template>
|
|
217
|
+
Large tooltip
|
|
218
|
+
</farm-tooltip>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
`,
|
|
223
|
+
}),
|
|
224
|
+
};
|
|
225
|
+
|
|
226
|
+
export const WithCustomMaxWidth = {
|
|
227
|
+
render: () => ({
|
|
228
|
+
components: { 'farm-tooltip': Tooltip },
|
|
229
|
+
template: `
|
|
230
|
+
<div style="padding: 80px;">
|
|
231
|
+
<div style="display: flex; gap: 30px; align-items: center;">
|
|
232
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
233
|
+
<span>Default width:</span>
|
|
234
|
+
<farm-tooltip placement="top-center">
|
|
235
|
+
<template #activator>
|
|
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
|
+
</template>
|
|
238
|
+
This is a tooltip with default width that can be quite long and will wrap naturally
|
|
239
|
+
</farm-tooltip>
|
|
240
|
+
</div>
|
|
241
|
+
|
|
242
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
243
|
+
<span>Custom max-width (200px):</span>
|
|
244
|
+
<farm-tooltip placement="top-center" max-width="200px">
|
|
245
|
+
<template #activator>
|
|
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
|
+
</template>
|
|
248
|
+
This is a tooltip with custom max-width of 200px that will wrap when it exceeds that width
|
|
249
|
+
</farm-tooltip>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
`,
|
|
254
|
+
}),
|
|
255
|
+
};
|
|
256
|
+
|
|
257
|
+
export const ComplexContent = {
|
|
258
|
+
render: () => ({
|
|
259
|
+
components: { 'farm-tooltip': Tooltip },
|
|
260
|
+
template: `
|
|
261
|
+
<div style="padding: 80px;">
|
|
262
|
+
<div style="display: flex; align-items: center; gap: 8px;">
|
|
263
|
+
<span>Complex tooltip with title:</span>
|
|
264
|
+
<farm-tooltip placement="top-center" :fluid="true">
|
|
265
|
+
<template #activator>
|
|
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
|
+
</template>
|
|
268
|
+
<template #title>Investment Information</template>
|
|
269
|
+
<div>
|
|
270
|
+
<p style="margin: 0 0 8px 0;">Investment details:</p>
|
|
271
|
+
<ul style="margin: 0; padding-left: 16px;">
|
|
272
|
+
<li>Minimum amount: R$ 1,000.00</li>
|
|
273
|
+
<li>Maximum amount: R$ 100,000.00</li>
|
|
274
|
+
<li>Processing time: 2-3 business days</li>
|
|
275
|
+
</ul>
|
|
276
|
+
</div>
|
|
277
|
+
</farm-tooltip>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
`,
|
|
281
|
+
}),
|
|
282
|
+
};
|