@weni/unnnic-system 3.11.3-alpha.2 → 3.12.0

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 (166) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/components/Alert/Alert.vue.d.ts +3 -3
  3. package/dist/components/Alert/Version1dot1.vue.d.ts +1 -1
  4. package/dist/components/AudioRecorder/AudioHandler.vue.d.ts +18 -109
  5. package/dist/components/AudioRecorder/AudioRecorder.vue.d.ts +36 -218
  6. package/dist/components/AvatarIcon/AvatarIcon.vue.d.ts +1 -1
  7. package/dist/components/Button/Button.vue.d.ts +2 -2
  8. package/dist/components/Card/AccountCard.vue.d.ts +2 -2
  9. package/dist/components/Card/Card.vue.d.ts +29 -120
  10. package/dist/components/Card/CardCompany.vue.d.ts +2 -2
  11. package/dist/components/Card/CardStatusesContainer.vue.d.ts +19 -110
  12. package/dist/components/Card/ContentCard.vue.d.ts +1 -1
  13. package/dist/components/Card/DashCard.vue.d.ts +2 -2
  14. package/dist/components/Card/DefaultCard.vue.d.ts +1 -1
  15. package/dist/components/Card/MarketplaceCard.vue.d.ts +1 -1
  16. package/dist/components/Card/SimpleCard.vue.d.ts +18 -109
  17. package/dist/components/Card/StatusCard.vue.d.ts +1 -1
  18. package/dist/components/Card/TitleCard.vue.d.ts +18 -109
  19. package/dist/components/CardImage/CardImage.vue.d.ts +5 -5
  20. package/dist/components/CardInformation/CardInformation.vue.d.ts +19 -110
  21. package/dist/components/CardProject/CardProject.vue.d.ts +2 -2
  22. package/dist/components/Carousel/Carousel.vue.d.ts +2 -2
  23. package/dist/components/Carousel/TagCarousel.vue.d.ts +2 -2
  24. package/dist/components/ChartBar/ChartBar.vue.d.ts +24 -115
  25. package/dist/components/ChartLine/ChartLine.vue.d.ts +18 -109
  26. package/dist/components/ChatText/ChatText.vue.d.ts +18 -109
  27. package/dist/components/ChatsContact/ChatsContact.vue.d.ts +6 -6
  28. package/dist/components/ChatsMessage/ChatsMessage.vue.d.ts +18 -109
  29. package/dist/components/ChatsUserAvatar/ChatsUserAvatar.vue.d.ts +1 -1
  30. package/dist/components/Checkbox/Checkbox.vue.d.ts +3 -3
  31. package/dist/components/DataArea/DataArea.vue.d.ts +18 -109
  32. package/dist/components/DataTable/index.vue.d.ts +1 -1
  33. package/dist/components/DataTable/index.vue.d.ts.map +1 -1
  34. package/dist/components/DateFilter/DateFilter.vue.d.ts +10 -10
  35. package/dist/components/Drawer/Drawer.vue.d.ts +207 -37
  36. package/dist/components/Drawer/Drawer.vue.d.ts.map +1 -1
  37. package/dist/components/Dropdown/Dropdown.vue.d.ts +1 -1
  38. package/dist/components/FormElement/FormElement.vue.d.ts +4 -4
  39. package/dist/components/ImportCard/ImportCard.vue.d.ts +6 -6
  40. package/dist/components/Input/Input.vue.d.ts +9 -9
  41. package/dist/components/Input/TextInput.vue.d.ts +2 -2
  42. package/dist/components/InputNext/InputNext.vue.d.ts +3 -3
  43. package/dist/components/Modal/Modal.vue.d.ts +1 -1
  44. package/dist/components/ModalDialog/ModalDialog.vue.d.ts +35 -209
  45. package/dist/components/ModalDialog/ModalDialog.vue.d.ts.map +1 -1
  46. package/dist/components/ModalNext/ModalNext.vue.d.ts +15 -15
  47. package/dist/components/ModalUpload/ModalUpload.vue.d.ts +12 -12
  48. package/dist/components/MoodRating/MoodRating.vue.d.ts +18 -109
  49. package/dist/components/MultiSelect/MultiSelect.vue.d.ts +18 -18
  50. package/dist/components/Pagination/Pagination.vue.d.ts +6 -6
  51. package/dist/components/Radio/Radio.vue.d.ts +6 -6
  52. package/dist/components/SelectSmart/SelectSmart.vue.d.ts +11 -11
  53. package/dist/components/SelectSmart/SelectSmartMultipleHeader.vue.d.ts +2 -2
  54. package/dist/components/SelectSmart/SelectSmartOption.vue.d.ts +5 -5
  55. package/dist/components/SelectTime/index.vue.d.ts +3 -3
  56. package/dist/components/Slider/Slider.vue.d.ts +18 -109
  57. package/dist/components/Switch/Switch.vue.d.ts +2 -2
  58. package/dist/components/Tab/Tab.vue.d.ts +18 -109
  59. package/dist/components/TableNext/TableBodyCell.vue.d.ts +2 -2
  60. package/dist/components/TableNext/TablePagination.vue.d.ts +6 -6
  61. package/dist/components/Tag/DefaultTag.vue.d.ts +1 -1
  62. package/dist/components/Tag/Tag.vue.d.ts +2 -2
  63. package/dist/components/TextArea/TextArea.vue.d.ts +5 -5
  64. package/dist/components/Toast/Toast.vue.d.ts +1 -1
  65. package/dist/components/Toast/Toast.vue.d.ts.map +1 -1
  66. package/dist/components/ToolTip/ToolTip.vue.d.ts +18 -109
  67. package/dist/components/ToolTip/ToolTip.vue.d.ts.map +1 -1
  68. package/dist/components/Tour/Tour.vue.d.ts +6 -6
  69. package/dist/components/Tour/TourPopover.vue.d.ts +6 -6
  70. package/dist/components/UploadArea/UploadArea.vue.d.ts +6 -6
  71. package/dist/components/ui/popover/PopoverContent.vue.d.ts +2 -2
  72. package/dist/components/ui/popover/PopoverContent.vue.d.ts.map +1 -1
  73. package/dist/{es-99b102dc.mjs → es-9756db6d.mjs} +1 -1
  74. package/dist/{index-c20fa852.mjs → index-ab280280.mjs} +51987 -54801
  75. package/dist/{pt-br-b17e69b4.mjs → pt-br-55135cbc.mjs} +1 -1
  76. package/dist/style.css +1 -1
  77. package/dist/unnnic.mjs +203 -231
  78. package/dist/unnnic.umd.js +44 -48
  79. package/package.json +1 -2
  80. package/src/assets/scss/tailwind.scss +0 -8
  81. package/src/components/Drawer/Drawer.vue +269 -190
  82. package/src/components/Drawer/__tests__/Drawer.spec.js +46 -37
  83. package/src/components/Drawer/__tests__/__snapshots__/Drawer.spec.js.snap +19 -18
  84. package/src/components/ModalDialog/ModalDialog.vue +148 -64
  85. package/src/components/ModalDialog/__tests__/ModalDialog.spec.js +221 -11
  86. package/src/components/ModalDialog/__tests__/__snapshots__/ModalDialog.spec.js.snap +22 -1
  87. package/src/components/Tab/__test__/__snapshots__/Tab.spec.js.snap +1 -3
  88. package/src/components/Toast/Toast.vue +8 -12
  89. package/src/components/ToolTip/ToolTip.vue +188 -41
  90. package/src/components/ToolTip/__tests__/ToolTip.spec.js +61 -345
  91. package/src/components/index.ts +19 -75
  92. package/src/components/ui/popover/PopoverContent.vue +2 -0
  93. package/src/stories/Drawer.stories.js +1 -1
  94. package/src/stories/ModalDialog.mdx +0 -3
  95. package/src/stories/ModalDialog.stories.js +1 -1
  96. package/dist/components/ui/dialog/Dialog.vue.d.ts +0 -23
  97. package/dist/components/ui/dialog/Dialog.vue.d.ts.map +0 -1
  98. package/dist/components/ui/dialog/DialogClose.vue.d.ts +0 -19
  99. package/dist/components/ui/dialog/DialogClose.vue.d.ts.map +0 -1
  100. package/dist/components/ui/dialog/DialogContent.vue.d.ts +0 -43
  101. package/dist/components/ui/dialog/DialogContent.vue.d.ts.map +0 -1
  102. package/dist/components/ui/dialog/DialogFooter.vue.d.ts +0 -25
  103. package/dist/components/ui/dialog/DialogFooter.vue.d.ts.map +0 -1
  104. package/dist/components/ui/dialog/DialogHeader.vue.d.ts +0 -29
  105. package/dist/components/ui/dialog/DialogHeader.vue.d.ts.map +0 -1
  106. package/dist/components/ui/dialog/DialogTitle.vue.d.ts +0 -23
  107. package/dist/components/ui/dialog/DialogTitle.vue.d.ts.map +0 -1
  108. package/dist/components/ui/dialog/DialogTrigger.vue.d.ts +0 -19
  109. package/dist/components/ui/dialog/DialogTrigger.vue.d.ts.map +0 -1
  110. package/dist/components/ui/dialog/index.d.ts +0 -8
  111. package/dist/components/ui/dialog/index.d.ts.map +0 -1
  112. package/dist/components/ui/drawer/Drawer.vue.d.ts +0 -35
  113. package/dist/components/ui/drawer/Drawer.vue.d.ts.map +0 -1
  114. package/dist/components/ui/drawer/DrawerClose.vue.d.ts +0 -19
  115. package/dist/components/ui/drawer/DrawerClose.vue.d.ts.map +0 -1
  116. package/dist/components/ui/drawer/DrawerContent.vue.d.ts +0 -42
  117. package/dist/components/ui/drawer/DrawerContent.vue.d.ts.map +0 -1
  118. package/dist/components/ui/drawer/DrawerDescription.vue.d.ts +0 -23
  119. package/dist/components/ui/drawer/DrawerDescription.vue.d.ts.map +0 -1
  120. package/dist/components/ui/drawer/DrawerFooter.vue.d.ts +0 -22
  121. package/dist/components/ui/drawer/DrawerFooter.vue.d.ts.map +0 -1
  122. package/dist/components/ui/drawer/DrawerHeader.vue.d.ts +0 -25
  123. package/dist/components/ui/drawer/DrawerHeader.vue.d.ts.map +0 -1
  124. package/dist/components/ui/drawer/DrawerOverlay.vue.d.ts +0 -8
  125. package/dist/components/ui/drawer/DrawerOverlay.vue.d.ts.map +0 -1
  126. package/dist/components/ui/drawer/DrawerTitle.vue.d.ts +0 -23
  127. package/dist/components/ui/drawer/DrawerTitle.vue.d.ts.map +0 -1
  128. package/dist/components/ui/drawer/DrawerTrigger.vue.d.ts +0 -19
  129. package/dist/components/ui/drawer/DrawerTrigger.vue.d.ts.map +0 -1
  130. package/dist/components/ui/drawer/index.d.ts +0 -11
  131. package/dist/components/ui/drawer/index.d.ts.map +0 -1
  132. package/dist/components/ui/tooltip/Tooltip.vue.d.ts +0 -23
  133. package/dist/components/ui/tooltip/Tooltip.vue.d.ts.map +0 -1
  134. package/dist/components/ui/tooltip/TooltipContent.vue.d.ts +0 -31
  135. package/dist/components/ui/tooltip/TooltipContent.vue.d.ts.map +0 -1
  136. package/dist/components/ui/tooltip/TooltipProvider.vue.d.ts +0 -19
  137. package/dist/components/ui/tooltip/TooltipProvider.vue.d.ts.map +0 -1
  138. package/dist/components/ui/tooltip/TooltipTrigger.vue.d.ts +0 -19
  139. package/dist/components/ui/tooltip/TooltipTrigger.vue.d.ts.map +0 -1
  140. package/dist/components/ui/tooltip/index.d.ts +0 -5
  141. package/dist/components/ui/tooltip/index.d.ts.map +0 -1
  142. package/src/components/ui/dialog/Dialog.vue +0 -19
  143. package/src/components/ui/dialog/DialogClose.vue +0 -29
  144. package/src/components/ui/dialog/DialogContent.vue +0 -134
  145. package/src/components/ui/dialog/DialogFooter.vue +0 -50
  146. package/src/components/ui/dialog/DialogHeader.vue +0 -83
  147. package/src/components/ui/dialog/DialogTitle.vue +0 -38
  148. package/src/components/ui/dialog/DialogTrigger.vue +0 -16
  149. package/src/components/ui/dialog/index.ts +0 -7
  150. package/src/components/ui/drawer/Drawer.vue +0 -27
  151. package/src/components/ui/drawer/DrawerClose.vue +0 -37
  152. package/src/components/ui/drawer/DrawerContent.vue +0 -101
  153. package/src/components/ui/drawer/DrawerDescription.vue +0 -40
  154. package/src/components/ui/drawer/DrawerFooter.vue +0 -38
  155. package/src/components/ui/drawer/DrawerHeader.vue +0 -57
  156. package/src/components/ui/drawer/DrawerOverlay.vue +0 -33
  157. package/src/components/ui/drawer/DrawerTitle.vue +0 -37
  158. package/src/components/ui/drawer/DrawerTrigger.vue +0 -31
  159. package/src/components/ui/drawer/index.ts +0 -10
  160. package/src/components/ui/tooltip/Tooltip.vue +0 -15
  161. package/src/components/ui/tooltip/TooltipContent.vue +0 -73
  162. package/src/components/ui/tooltip/TooltipProvider.vue +0 -15
  163. package/src/components/ui/tooltip/TooltipTrigger.vue +0 -22
  164. package/src/components/ui/tooltip/index.ts +0 -4
  165. package/src/stories/Dialog.stories.js +0 -832
  166. package/src/stories/DrawerNext.stories.js +0 -610
@@ -3,386 +3,102 @@ import { mount } from '@vue/test-utils';
3
3
 
4
4
  import ToolTip from '../ToolTip.vue';
5
5
 
6
- globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
7
- observe: vi.fn(),
8
- unobserve: vi.fn(),
9
- disconnect: vi.fn(),
10
- }));
11
-
12
- const createWrapper = (props = {}, slots = {}) => {
13
- return mount(ToolTip, {
14
- props,
15
- slots: {
16
- default: '<button data-testid="trigger-button">Hover me</button>',
17
- ...slots,
18
- },
19
- attachTo: document.body,
20
- global: {
21
- stubs: {
22
- teleport: true,
23
- },
24
- },
25
- });
6
+ const createWrapper = (props) => {
7
+ return mount(ToolTip, { props });
26
8
  };
27
9
 
28
10
  describe('ToolTip', () => {
29
11
  let wrapper;
30
-
31
12
  beforeEach(() => {
32
- wrapper = createWrapper({ text: 'Tooltip text', enabled: true });
13
+ wrapper = createWrapper({ text: 'Text', enabled: true });
33
14
  });
34
15
 
35
- afterEach(() => {
36
- if (wrapper) {
37
- wrapper.unmount();
38
- }
16
+ it('should not display the tooltip when enabled is false', async () => {
17
+ await wrapper.setProps({ enabled: false });
18
+ const tooltipLabel = wrapper.find('[data-testid="tooltip-label"]');
19
+ expect(tooltipLabel.isVisible()).toBe(false);
39
20
  });
40
21
 
41
- describe('Component Rendering', () => {
42
- it('should render the component', () => {
43
- expect(wrapper.exists()).toBe(true);
44
- expect(wrapper.vm).toBeTruthy();
45
- });
46
-
47
- it('should render slot content', () => {
48
- const triggerButton = wrapper.find('[data-testid="trigger-button"]');
49
- expect(triggerButton.exists()).toBe(true);
50
- expect(triggerButton.text()).toBe('Hover me');
51
- });
52
-
53
- it('should render custom slot content', () => {
54
- const customWrapper = createWrapper(
55
- { text: 'Tooltip text', enabled: true },
56
- {
57
- default: '<span data-testid="custom-trigger">Custom Content</span>',
58
- },
59
- );
60
-
61
- const customTrigger = customWrapper.find(
62
- '[data-testid="custom-trigger"]',
63
- );
64
- expect(customTrigger.exists()).toBe(true);
65
- expect(customTrigger.text()).toBe('Custom Content');
66
-
67
- customWrapper.unmount();
68
- });
69
- });
70
-
71
- describe('Props', () => {
72
- it('should accept text prop', () => {
73
- expect(wrapper.vm.$props.text).toBe('Tooltip text');
74
- });
75
-
76
- it('should accept enabled prop', () => {
77
- expect(wrapper.vm.$props.enabled).toBe(true);
78
- });
79
-
80
- it('should accept forceOpen prop', () => {
81
- const testWrapper = createWrapper({ text: 'Text', forceOpen: true });
82
- expect(testWrapper.vm.$props.forceOpen).toBe(true);
83
- testWrapper.unmount();
84
- });
85
-
86
- it('should accept side prop with valid values', () => {
87
- const sides = ['top', 'right', 'bottom', 'left'];
88
-
89
- sides.forEach((side) => {
90
- const sideWrapper = createWrapper({
91
- text: 'Text',
92
- enabled: true,
93
- side,
94
- });
95
- expect(sideWrapper.vm.$props.side).toBe(side);
96
- sideWrapper.unmount();
97
- });
98
- });
99
-
100
- it('should default to "right" side when not specified', () => {
101
- expect(wrapper.vm.$props.side).toBe('right');
102
- });
103
-
104
- it('should accept maxWidth prop', () => {
105
- const maxWidthWrapper = createWrapper({
106
- text: 'Text',
107
- enabled: true,
108
- maxWidth: '200px',
109
- });
110
-
111
- expect(maxWidthWrapper.vm.$props.maxWidth).toBe('200px');
112
-
113
- maxWidthWrapper.unmount();
114
- });
115
-
116
- it('should accept enableHtml prop', () => {
117
- const htmlWrapper = createWrapper({
118
- text: 'Text',
119
- enableHtml: true,
120
- });
121
-
122
- expect(htmlWrapper.vm.$props.enableHtml).toBe(true);
123
-
124
- htmlWrapper.unmount();
125
- });
22
+ it('should display the tooltip when enabled is true', async () => {
23
+ const tooltipLabel = wrapper.find('[data-testid="tooltip-label"]');
24
+ expect(tooltipLabel.isVisible()).toBe(true);
126
25
  });
127
26
 
128
- describe('Boolean Props', () => {
129
- it('should handle enabled false', () => {
130
- const disabledWrapper = createWrapper({
131
- text: 'Text',
132
- enabled: false,
133
- });
134
-
135
- expect(disabledWrapper.vm.$props.enabled).toBe(false);
136
-
137
- disabledWrapper.unmount();
138
- });
139
-
140
- it('should handle forceOpen true', () => {
141
- const forceOpenWrapper = createWrapper({
142
- text: 'Text',
143
- enabled: false,
144
- forceOpen: true,
145
- });
27
+ it('should force open the tooltip when forceOpen is true', async () => {
28
+ await wrapper.setProps({ enabled: false, forceOpen: true });
146
29
 
147
- expect(forceOpenWrapper.vm.$props.forceOpen).toBe(true);
148
-
149
- forceOpenWrapper.unmount();
150
- });
151
-
152
- it('should handle enableHtml false', () => {
153
- expect(wrapper.vm.$props.enableHtml).toBe(false);
154
- });
30
+ const tooltipLabel = wrapper.find('[data-testid="tooltip-label"]');
31
+ expect(tooltipLabel.isVisible()).toBe(true);
155
32
  });
156
33
 
157
- describe('Text Content Rendering', () => {
158
- it('should accept plain text content via prop', () => {
159
- const plainWrapper = createWrapper({
160
- text: 'Simple tooltip text',
161
- enabled: true,
162
- });
163
-
164
- expect(plainWrapper.vm.$props.text).toBe('Simple tooltip text');
165
-
166
- plainWrapper.unmount();
167
- });
168
-
169
- it('should accept multiline text via prop', () => {
170
- const multilineWrapper = createWrapper({
171
- text: 'First line\nSecond line\nThird line',
172
- enabled: true,
173
- });
174
-
175
- expect(multilineWrapper.vm.$props.text).toBe(
176
- 'First line\nSecond line\nThird line',
177
- );
178
-
179
- multilineWrapper.unmount();
180
- });
34
+ it('should position the tooltip correctly based on the side prop', async () => {
35
+ const sideValues = ['top', 'right', 'bottom', 'left'];
181
36
 
182
- it('should handle empty text', () => {
183
- const emptyWrapper = createWrapper({ text: '', enabled: true });
184
-
185
- expect(emptyWrapper.vm.$props.text).toBe('');
186
- expect(emptyWrapper.exists()).toBe(true);
187
-
188
- emptyWrapper.unmount();
189
- });
190
- });
191
-
192
- describe('HTML Content', () => {
193
- it('should accept HTML text with enableHtml prop set to true', () => {
194
- const htmlWrapper = createWrapper({
195
- enableHtml: true,
196
- enabled: true,
197
- text: 'Tooltip with <strong>bold</strong> text',
198
- });
199
-
200
- expect(htmlWrapper.vm.$props.enableHtml).toBe(true);
201
- expect(htmlWrapper.vm.$props.text).toBe(
202
- 'Tooltip with <strong>bold</strong> text',
203
- );
204
-
205
- htmlWrapper.unmount();
206
- });
207
-
208
- it('should accept HTML link with enableHtml prop', () => {
209
- const linkWrapper = createWrapper({
210
- enableHtml: true,
211
- enabled: true,
212
- text: 'Visit <a href="https://weni.ai/" target="_blank">Weni</a>',
213
- });
214
-
215
- expect(linkWrapper.vm.$props.enableHtml).toBe(true);
216
- expect(linkWrapper.vm.$props.text).toContain('href="https://weni.ai/"');
217
- expect(linkWrapper.vm.$props.text).toContain('target="_blank"');
218
-
219
- linkWrapper.unmount();
220
- });
221
-
222
- it('should handle plain text when enableHtml is false', () => {
223
- const plainWrapper = createWrapper({
224
- enableHtml: false,
225
- enabled: true,
226
- text: 'Tooltip with <strong>bold</strong> text',
227
- });
228
-
229
- expect(plainWrapper.vm.$props.enableHtml).toBe(false);
230
- expect(plainWrapper.vm.$props.text).toBe(
231
- 'Tooltip with <strong>bold</strong> text',
232
- );
233
-
234
- plainWrapper.unmount();
235
- });
236
- });
237
-
238
- describe('Component Structure', () => {
239
- it('should have TooltipProvider component', () => {
240
- expect(wrapper.findComponent({ name: 'TooltipProvider' }).exists()).toBe(
241
- true,
242
- );
243
- });
244
-
245
- it('should have Tooltip component', () => {
246
- expect(wrapper.findComponent({ name: 'Tooltip' }).exists()).toBe(true);
247
- });
248
-
249
- it('should have TooltipTrigger component', () => {
250
- expect(wrapper.findComponent({ name: 'TooltipTrigger' }).exists()).toBe(
251
- true,
252
- );
253
- });
254
-
255
- it('should have TooltipContent component', () => {
256
- expect(wrapper.findComponent({ name: 'TooltipContent' }).exists()).toBe(
257
- true,
258
- );
259
- });
37
+ for (let side of sideValues) {
38
+ await wrapper.setProps({ side });
39
+ const tooltipLabel = wrapper.find('[data-testid="tooltip-label"]');
40
+ expect(tooltipLabel.classes()).include(`unnnic-tooltip-label-${side}`);
41
+ }
260
42
  });
261
43
 
262
- describe('CSS Classes', () => {
263
- it('should pass side prop to TooltipContent', () => {
264
- const sides = ['top', 'right', 'bottom', 'left'];
44
+ it('should split tooltip text into multiple lines', async () => {
45
+ await wrapper.setProps({ text: 'First line\nSecond line' });
265
46
 
266
- sides.forEach((side) => {
267
- const sideWrapper = createWrapper({
268
- text: 'Text',
269
- enabled: true,
270
- side,
271
- });
47
+ const tooltipLabel = wrapper.find('[data-testid="tooltip-label"]');
272
48
 
273
- const tooltipContent = sideWrapper.findComponent({
274
- name: 'TooltipContent',
275
- });
276
- expect(tooltipContent.exists()).toBe(true);
277
- expect(tooltipContent.props('side')).toBe(side);
49
+ expect(tooltipLabel.text()).toContain('First line');
50
+ expect(tooltipLabel.text()).toContain('Second line');
278
51
 
279
- sideWrapper.unmount();
280
- });
281
- });
282
-
283
- it('should pass class prop to TooltipContent component', () => {
284
- const tooltipContent = wrapper.findComponent({ name: 'TooltipContent' });
285
- expect(tooltipContent.exists()).toBe(true);
286
- expect(tooltipContent.props('class')).toContain('unnnic-tooltip-label');
287
- });
52
+ const brElements = tooltipLabel.findAll('br');
53
+ expect(brElements.length).toBe(2);
288
54
  });
289
55
 
290
- describe('Side Validator', () => {
291
- it('should validate side prop correctly', () => {
292
- const validator = wrapper.vm.$options.props.side.validator;
56
+ it('should display shortcutText when provided', async () => {
57
+ await wrapper.setProps({ shortcutText: 'Ctrl+C' });
293
58
 
294
- expect(validator('top')).toBe(true);
295
- expect(validator('right')).toBe(true);
296
- expect(validator('bottom')).toBe(true);
297
- expect(validator('left')).toBe(true);
298
- expect(validator('invalid')).toBe(false);
299
- });
59
+ const tooltipShortcut = wrapper.find(
60
+ '[data-testid="tooltip-label-shortcut"]',
61
+ );
62
+ expect(tooltipShortcut.exists()).toBe(true);
63
+ expect(tooltipShortcut.text()).toBe('Ctrl+C');
300
64
  });
301
65
 
302
- describe('Props Defaults', () => {
303
- it('should have correct default values', () => {
304
- const defaultWrapper = createWrapper();
66
+ it('should calculate tooltip position based on element coordinates', async () => {
67
+ await wrapper.setProps({ side: 'right' });
305
68
 
306
- expect(defaultWrapper.vm.$props.text).toBe('');
307
- expect(defaultWrapper.vm.$props.enabled).toBe(false);
308
- expect(defaultWrapper.vm.$props.forceOpen).toBe(false);
309
- expect(defaultWrapper.vm.$props.side).toBe('right');
310
- expect(defaultWrapper.vm.$props.maxWidth).toBe('');
311
- expect(defaultWrapper.vm.$props.enableHtml).toBe(false);
69
+ await wrapper.vm.$nextTick();
312
70
 
313
- defaultWrapper.unmount();
314
- });
71
+ expect(wrapper.vm.leftPos).toBeDefined();
72
+ expect(wrapper.vm.topPos).toBeDefined();
315
73
  });
316
74
 
317
- describe('Max Width Style', () => {
318
- it('should pass maxWidth prop to TooltipContent', () => {
319
- const maxWidthWrapper = createWrapper({
320
- text: 'Text',
321
- enabled: true,
322
- maxWidth: '250px',
323
- });
324
-
325
- expect(maxWidthWrapper.vm.$props.maxWidth).toBe('250px');
326
-
327
- maxWidthWrapper.unmount();
328
- });
329
-
330
- it('should handle different maxWidth values', () => {
331
- const values = ['100px', '50%', '20rem', '300px'];
332
-
333
- values.forEach((maxWidth) => {
334
- const testWrapper = createWrapper({
335
- text: 'Text',
336
- enabled: true,
337
- maxWidth,
338
- });
75
+ it('should remove event listeners on unmount', () => {
76
+ const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
339
77
 
340
- expect(testWrapper.vm.$props.maxWidth).toBe(maxWidth);
78
+ wrapper.unmount();
341
79
 
342
- testWrapper.unmount();
343
- });
344
- });
80
+ expect(removeEventListenerSpy).toHaveBeenCalledWith(
81
+ 'scroll',
82
+ expect.any(Function),
83
+ );
84
+ expect(removeEventListenerSpy).toHaveBeenCalledWith(
85
+ 'resize',
86
+ expect.any(Function),
87
+ );
345
88
  });
346
89
 
347
- describe('Component Props Types', () => {
348
- it('should have correct prop types', () => {
349
- const { props } = wrapper.vm.$options;
350
-
351
- expect(props.text.type).toBe(String);
352
- expect(props.enabled.type).toBe(Boolean);
353
- expect(props.forceOpen.type).toBe(Boolean);
354
- expect(props.side.type).toBe(String);
355
- expect(props.maxWidth.type).toBe(String);
356
- expect(props.enableHtml.type).toBe(Boolean);
357
- });
90
+ it('should call handleResize on mouseover event', async () => {
91
+ const handlResizeSpy = vi.spyOn(wrapper.vm, 'handleResize');
92
+ await wrapper.trigger('mouseover');
93
+ expect(handlResizeSpy).toHaveBeenCalled();
358
94
  });
359
95
 
360
- describe('Enabled and ForceOpen Logic', () => {
361
- it('should be disabled when enabled is false and forceOpen is false', () => {
362
- const disabledWrapper = createWrapper({
363
- text: 'Text',
364
- enabled: false,
365
- forceOpen: false,
366
- });
367
-
368
- expect(disabledWrapper.vm.$props.enabled).toBe(false);
369
- expect(disabledWrapper.vm.$props.forceOpen).toBe(false);
370
-
371
- disabledWrapper.unmount();
372
- });
373
-
374
- it('should override disabled state when forceOpen is true', () => {
375
- const forceOpenWrapper = createWrapper({
376
- text: 'Text',
377
- enabled: false,
378
- forceOpen: true,
379
- });
380
-
381
- expect(forceOpenWrapper.vm.$props.enabled).toBe(false);
382
- expect(forceOpenWrapper.vm.$props.forceOpen).toBe(true);
383
- expect(forceOpenWrapper.html()).toContain('unnnic-tooltip');
384
-
385
- forceOpenWrapper.unmount();
96
+ it('should render html link variation', async () => {
97
+ await wrapper.setProps({
98
+ enableHtml: true,
99
+ text: 'tooltip with <a data-testid="weni-link" href="https://weni.ai/" target="_blank" style="color: white;">weni</a> link',
386
100
  });
101
+ const link = wrapper.find('a[data-testid="weni-link"]');
102
+ expect(link.exists()).toBeTruthy();
387
103
  });
388
104
  });
@@ -93,6 +93,12 @@ import DataTable from './DataTable/index.vue';
93
93
  import Chip from './Chip/Chip.vue';
94
94
  import Toast from './Toast/Toast.vue';
95
95
  import { toast } from './Toast/ToastManager';
96
+ import Popover from './ui/popover/Popover.vue';
97
+ import PopoverContent from './ui/popover/PopoverContent.vue';
98
+ import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
99
+ import PopoverFooter from './ui/popover/PopoverFooter.vue';
100
+ import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
101
+ import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
96
102
  import Tabs from './ui/tabs/Tabs.vue';
97
103
  import TabsList from './ui/tabs/TabsList.vue';
98
104
  import TabsTrigger from './ui/tabs/TabsTrigger.vue';
@@ -103,27 +109,7 @@ import {
103
109
  SegmentedControlTrigger,
104
110
  SegmentedControlContent,
105
111
  } from './ui/segmented-control';
106
- import Popover from './ui/popover/Popover.vue';
107
- import PopoverContent from './ui/popover/PopoverContent.vue';
108
- import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
109
- import PopoverFooter from './ui/popover/PopoverFooter.vue';
110
- import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
111
- import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
112
112
  import PageHeader from './PageHeader/PageHeader.vue';
113
- import Dialog from './ui/dialog/Dialog.vue';
114
- import DialogContent from './ui/dialog/DialogContent.vue';
115
- import DialogFooter from './ui/dialog/DialogFooter.vue';
116
- import DialogHeader from './ui/dialog/DialogHeader.vue';
117
- import DialogTitle from './ui/dialog/DialogTitle.vue';
118
- import DialogTrigger from './ui/dialog/DialogTrigger.vue';
119
- import DialogClose from './ui/dialog/DialogClose.vue';
120
- import DrawerNext from './ui/drawer/Drawer.vue';
121
- import DrawerContent from './ui/drawer/DrawerContent.vue';
122
- import DrawerHeader from './ui/drawer/DrawerHeader.vue';
123
- import DrawerFooter from './ui/drawer/DrawerFooter.vue';
124
- import DrawerClose from './ui/drawer/DrawerClose.vue';
125
- import DrawerTitle from './ui/drawer/DrawerTitle.vue';
126
- import DrawerDescription from './ui/drawer/DrawerDescription.vue';
127
113
 
128
114
  type VueComponent = Component;
129
115
 
@@ -236,25 +222,11 @@ export const components: ComponentsMap = {
236
222
  unnnicTabsList: TabsList,
237
223
  unnnicTabsTrigger: TabsTrigger,
238
224
  unnnicTabsContent: TabsContent,
239
- unnnicPageHeader: PageHeader,
240
225
  unnnicSegmentedControl: SegmentedControl,
241
226
  unnnicSegmentedControlList: SegmentedControlList,
242
227
  unnnicSegmentedControlTrigger: SegmentedControlTrigger,
243
228
  unnnicSegmentedControlContent: SegmentedControlContent,
244
- unnnicDialog: Dialog,
245
- unnnicDialogContent: DialogContent,
246
- unnnicDialogFooter: DialogFooter,
247
- unnnicDialogHeader: DialogHeader,
248
- unnnicDialogTitle: DialogTitle,
249
- unnnicDialogTrigger: DialogTrigger,
250
- unnnicDialogClose: DialogClose,
251
- unnnicDrawerNext: DrawerNext,
252
- unnnicDrawerContent: DrawerContent,
253
- unnnicDrawerHeader: DrawerHeader,
254
- unnnicDrawerFooter: DrawerFooter,
255
- unnnicDrawerClose: DrawerClose,
256
- unnnicDrawerTitle: DrawerTitle,
257
- unnnicDrawerDescription: DrawerDescription,
229
+ unnnicPageHeader: PageHeader,
258
230
  };
259
231
 
260
232
  export const unnnicFontSize = fontSize;
@@ -353,6 +325,12 @@ export const unnnicSelectTime = SelectTime as VueComponent;
353
325
  export const unnnicChip = Chip;
354
326
  export const unnnicToast = Toast;
355
327
  export const unnnicToastManager = toast;
328
+ export const unnnicPopover = Popover;
329
+ export const unnnicPopoverContent = PopoverContent;
330
+ export const unnnicPopoverTrigger = PopoverTrigger;
331
+ export const unnnicPopoverFooter = PopoverFooter;
332
+ export const unnnicTemplatePreview = TemplatePreview as VueComponent;
333
+ export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
356
334
  export const unnnicTabs = Tabs;
357
335
  export const unnnicTabsList = TabsList;
358
336
  export const unnnicTabsTrigger = TabsTrigger;
@@ -361,27 +339,7 @@ export const unnnicSegmentedControl = SegmentedControl;
361
339
  export const unnnicSegmentedControlList = SegmentedControlList;
362
340
  export const unnnicSegmentedControlTrigger = SegmentedControlTrigger;
363
341
  export const unnnicSegmentedControlContent = SegmentedControlContent;
364
- export const unnnicPopover = Popover;
365
- export const unnnicPopoverContent = PopoverContent;
366
- export const unnnicPopoverTrigger = PopoverTrigger;
367
- export const unnnicPopoverFooter = PopoverFooter;
368
- export const unnnicTemplatePreview = TemplatePreview as VueComponent;
369
- export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
370
342
  export const unnnicPageHeader = PageHeader;
371
- export const unnnicDialog = Dialog;
372
- export const unnnicDialogContent = DialogContent;
373
- export const unnnicDialogFooter = DialogFooter;
374
- export const unnnicDialogHeader = DialogHeader;
375
- export const unnnicDialogTitle = DialogTitle;
376
- export const unnnicDialogTrigger = DialogTrigger;
377
- export const unnnicDialogClose = DialogClose;
378
- export const unnnicDrawerNext = DrawerNext;
379
- export const unnnicDrawerContent = DrawerContent;
380
- export const unnnicDrawerHeader = DrawerHeader;
381
- export const unnnicDrawerFooter = DrawerFooter;
382
- export const unnnicDrawerClose = DrawerClose;
383
- export const unnnicDrawerTitle = DrawerTitle;
384
- export const unnnicDrawerDescription = DrawerDescription;
385
343
 
386
344
  export const UnnnicFontSize = fontSize;
387
345
  export const UnnnicFormElement = formElement;
@@ -479,6 +437,12 @@ export const UnnnicSelectTime = SelectTime as VueComponent;
479
437
  export const UnnnicChip = Chip;
480
438
  export const UnnnicToast = Toast;
481
439
  export const UnnnicToastManager = toast;
440
+ export const UnnnicPopover = Popover;
441
+ export const UnnnicPopoverContent = PopoverContent;
442
+ export const UnnnicPopoverTrigger = PopoverTrigger;
443
+ export const UnnnicPopoverFooter = PopoverFooter;
444
+ export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
445
+ export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
482
446
  export const UnnnicTabs = Tabs;
483
447
  export const UnnnicTabsList = TabsList;
484
448
  export const UnnnicTabsTrigger = TabsTrigger;
@@ -487,24 +451,4 @@ export const UnnnicSegmentedControl = SegmentedControl;
487
451
  export const UnnnicSegmentedControlList = SegmentedControlList;
488
452
  export const UnnnicSegmentedControlTrigger = SegmentedControlTrigger;
489
453
  export const UnnnicSegmentedControlContent = SegmentedControlContent;
490
- export const UnnnicPopover = Popover;
491
- export const UnnnicPopoverContent = PopoverContent;
492
- export const UnnnicPopoverTrigger = PopoverTrigger;
493
- export const UnnnicPopoverFooter = PopoverFooter;
494
- export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
495
- export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
496
454
  export const UnnnicPageHeader = PageHeader;
497
- export const UnnnicDialog = Dialog;
498
- export const UnnnicDialogContent = DialogContent;
499
- export const UnnnicDialogFooter = DialogFooter;
500
- export const UnnnicDialogHeader = DialogHeader;
501
- export const UnnnicDialogTitle = DialogTitle;
502
- export const UnnnicDialogTrigger = DialogTrigger;
503
- export const UnnnicDialogClose = DialogClose;
504
- export const UnnnicDrawerNext = DrawerNext;
505
- export const UnnnicDrawerContent = DrawerContent;
506
- export const UnnnicDrawerHeader = DrawerHeader;
507
- export const UnnnicDrawerFooter = DrawerFooter;
508
- export const UnnnicDrawerClose = DrawerClose;
509
- export const UnnnicDrawerTitle = DrawerTitle;
510
- export const UnnnicDrawerDescription = DrawerDescription;
@@ -87,6 +87,8 @@ const footerChildren = computed(() => {
87
87
  $popover-space: $unnnic-space-4;
88
88
 
89
89
  .unnnic-popover {
90
+ z-index: 10000;
91
+
90
92
  border-radius: $unnnic-radius-2;
91
93
  box-shadow: $unnnic-shadow-1;
92
94
 
@@ -14,7 +14,7 @@ const primaryButtonTypeOptions = [
14
14
  ];
15
15
 
16
16
  export default {
17
- title: 'Misc/Drawer',
17
+ title: 'Example/Drawer',
18
18
  component: UnnnicDrawer,
19
19
  argTypes: {
20
20
  title: { control: { type: 'text' } },
@@ -6,9 +6,6 @@ import * as ModalDialogStories from './ModalDialog.stories';
6
6
 
7
7
  # ModalDialog
8
8
 
9
- > **⚠️ DEPRECATED**: This component has been deprecated in favor of the new `Dialog` component. Please use `UnnnicDialog`
10
- instead for new implementations. See the [Dialog documentation](?path=/docs/feedback-dialog--docs) for more information.
11
-
12
9
  The ModalDialog was designed to inform the user about a specific task, request information, or involve other tasks.
13
10
 
14
11
  <Source
@@ -7,7 +7,7 @@ import iconsList from '../utils/iconList';
7
7
  import colorsList from '../utils/colorsList';
8
8
 
9
9
  export default {
10
- title: 'Feedback/ModalDialog',
10
+ title: 'Example/ModalDialog',
11
11
  component: UnnnicModalDialog,
12
12
  argTypes: {
13
13
  type: {
@@ -1,23 +0,0 @@
1
- import { DialogRootProps } from 'reka-ui';
2
- declare function __VLS_template(): {
3
- attrs: Partial<{}>;
4
- slots: {
5
- default?(_: {}): any;
6
- };
7
- refs: {};
8
- rootEl: any;
9
- };
10
- type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
11
- declare const __VLS_component: import('vue').DefineComponent<DialogRootProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
12
- "update:open": (value: boolean) => any;
13
- }, string, import('vue').PublicProps, Readonly<DialogRootProps> & Readonly<{
14
- "onUpdate:open"?: ((value: boolean) => any) | undefined;
15
- }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
16
- declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
17
- export default _default;
18
- type __VLS_WithTemplateSlots<T, S> = T & {
19
- new (): {
20
- $slots: S;
21
- };
22
- };
23
- //# sourceMappingURL=Dialog.vue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Dialog.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dialog/Dialog.vue"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAmB,eAAe,EAAE,MAAM,SAAS,CAAC;AAgBhE,iBAAS,cAAc;WAgCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAWD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;kFAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}