@weni/unnnic-system 3.12.1-alpha.0 → 3.12.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.
Files changed (178) hide show
  1. package/CHANGELOG.md +7 -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 -92
  5. package/dist/components/AudioRecorder/AudioRecorder.vue.d.ts +36 -184
  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 -103
  10. package/dist/components/Card/CardCompany.vue.d.ts +2 -2
  11. package/dist/components/Card/CardStatusesContainer.vue.d.ts +19 -93
  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 -92
  17. package/dist/components/Card/StatusCard.vue.d.ts +1 -1
  18. package/dist/components/Card/TitleCard.vue.d.ts +18 -92
  19. package/dist/components/CardImage/CardImage.vue.d.ts +5 -5
  20. package/dist/components/CardInformation/CardInformation.vue.d.ts +19 -93
  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 -98
  25. package/dist/components/ChartLine/ChartLine.vue.d.ts +18 -92
  26. package/dist/components/ChatText/ChatText.vue.d.ts +18 -92
  27. package/dist/components/ChatsContact/ChatsContact.vue.d.ts +6 -6
  28. package/dist/components/ChatsMessage/ChatsMessage.vue.d.ts +18 -92
  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 -92
  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 +13 -13
  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 +6 -6
  39. package/dist/components/ImportCard/ImportCard.vue.d.ts +6 -6
  40. package/dist/components/Input/Input.vue.d.ts +12 -12
  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/Label/Label.vue.d.ts +1 -1
  44. package/dist/components/Label/Label.vue.d.ts.map +1 -1
  45. package/dist/components/Modal/Modal.vue.d.ts +1 -1
  46. package/dist/components/ModalDialog/ModalDialog.vue.d.ts +35 -209
  47. package/dist/components/ModalDialog/ModalDialog.vue.d.ts.map +1 -1
  48. package/dist/components/ModalNext/ModalNext.vue.d.ts +18 -18
  49. package/dist/components/ModalUpload/ModalUpload.vue.d.ts +12 -12
  50. package/dist/components/MoodRating/MoodRating.vue.d.ts +18 -92
  51. package/dist/components/MultiSelect/MultiSelect.vue.d.ts +18 -18
  52. package/dist/components/Pagination/Pagination.vue.d.ts +6 -6
  53. package/dist/components/Radio/Radio.vue.d.ts +6 -6
  54. package/dist/components/SelectSmart/SelectSmart.vue.d.ts +11 -11
  55. package/dist/components/SelectSmart/SelectSmartMultipleHeader.vue.d.ts +2 -2
  56. package/dist/components/SelectSmart/SelectSmartOption.vue.d.ts +5 -5
  57. package/dist/components/SelectTime/index.vue.d.ts +3 -3
  58. package/dist/components/Slider/Slider.vue.d.ts +18 -92
  59. package/dist/components/Switch/Switch.vue.d.ts +3 -3
  60. package/dist/components/Tab/Tab.vue.d.ts +18 -92
  61. package/dist/components/TableNext/TableBodyCell.vue.d.ts +2 -2
  62. package/dist/components/TableNext/TablePagination.vue.d.ts +6 -6
  63. package/dist/components/Tag/DefaultTag.vue.d.ts +1 -1
  64. package/dist/components/Tag/Tag.vue.d.ts +2 -2
  65. package/dist/components/TextArea/TextArea.vue.d.ts +8 -8
  66. package/dist/components/Toast/Toast.vue.d.ts +1 -1
  67. package/dist/components/Toast/Toast.vue.d.ts.map +1 -1
  68. package/dist/components/ToolTip/ToolTip.vue.d.ts +18 -92
  69. package/dist/components/ToolTip/ToolTip.vue.d.ts.map +1 -1
  70. package/dist/components/Tour/Tour.vue.d.ts +6 -6
  71. package/dist/components/Tour/TourPopover.vue.d.ts +6 -6
  72. package/dist/components/UploadArea/UploadArea.vue.d.ts +6 -6
  73. package/dist/components/ui/popover/PopoverContent.vue.d.ts +2 -2
  74. package/dist/components/ui/popover/PopoverContent.vue.d.ts.map +1 -1
  75. package/dist/components/ui/popover/PopoverOption.vue.d.ts +1 -1
  76. package/dist/components/ui/popover/PopoverOption.vue.d.ts.map +1 -1
  77. package/dist/components/ui/popover/PopoverTrigger.vue.d.ts.map +1 -1
  78. package/dist/{es-38bd0c9c.mjs → es-9756db6d.mjs} +1 -1
  79. package/dist/{index-561a4027.mjs → index-ab280280.mjs} +50935 -53788
  80. package/dist/{pt-br-14a3c647.mjs → pt-br-55135cbc.mjs} +1 -1
  81. package/dist/style.css +1 -1
  82. package/dist/unnnic.mjs +203 -231
  83. package/dist/unnnic.umd.js +44 -48
  84. package/package.json +2 -3
  85. package/src/assets/scss/tailwind.scss +0 -8
  86. package/src/components/Alert/__tests__/__snapshots__/Alert.spec.js.snap +1 -1
  87. package/src/components/Drawer/Drawer.vue +269 -190
  88. package/src/components/Drawer/__tests__/Drawer.spec.js +46 -37
  89. package/src/components/Drawer/__tests__/__snapshots__/Drawer.spec.js.snap +19 -18
  90. package/src/components/ModalDialog/ModalDialog.vue +148 -64
  91. package/src/components/ModalDialog/__tests__/ModalDialog.spec.js +221 -11
  92. package/src/components/ModalDialog/__tests__/__snapshots__/ModalDialog.spec.js.snap +22 -1
  93. package/src/components/Tab/__test__/__snapshots__/Tab.spec.js.snap +1 -3
  94. package/src/components/Toast/Toast.vue +9 -16
  95. package/src/components/ToolTip/ToolTip.vue +177 -25
  96. package/src/components/ToolTip/__tests__/ToolTip.spec.js +61 -339
  97. package/src/components/index.ts +0 -56
  98. package/src/components/ui/popover/PopoverContent.vue +2 -4
  99. package/src/components/ui/popover/PopoverOption.vue +2 -2
  100. package/src/components/ui/popover/PopoverTrigger.vue +1 -5
  101. package/src/stories/Drawer.stories.js +1 -1
  102. package/src/stories/ModalDialog.mdx +0 -3
  103. package/src/stories/ModalDialog.stories.js +1 -1
  104. package/src/stories/Popover.stories.js +3 -2
  105. package/src/stories/PopoverOption.stories.js +2 -5
  106. package/dist/components/ui/dialog/Dialog.vue.d.ts +0 -23
  107. package/dist/components/ui/dialog/Dialog.vue.d.ts.map +0 -1
  108. package/dist/components/ui/dialog/DialogClose.vue.d.ts +0 -19
  109. package/dist/components/ui/dialog/DialogClose.vue.d.ts.map +0 -1
  110. package/dist/components/ui/dialog/DialogContent.vue.d.ts +0 -43
  111. package/dist/components/ui/dialog/DialogContent.vue.d.ts.map +0 -1
  112. package/dist/components/ui/dialog/DialogFooter.vue.d.ts +0 -25
  113. package/dist/components/ui/dialog/DialogFooter.vue.d.ts.map +0 -1
  114. package/dist/components/ui/dialog/DialogHeader.vue.d.ts +0 -29
  115. package/dist/components/ui/dialog/DialogHeader.vue.d.ts.map +0 -1
  116. package/dist/components/ui/dialog/DialogTitle.vue.d.ts +0 -23
  117. package/dist/components/ui/dialog/DialogTitle.vue.d.ts.map +0 -1
  118. package/dist/components/ui/dialog/DialogTrigger.vue.d.ts +0 -19
  119. package/dist/components/ui/dialog/DialogTrigger.vue.d.ts.map +0 -1
  120. package/dist/components/ui/dialog/index.d.ts +0 -8
  121. package/dist/components/ui/dialog/index.d.ts.map +0 -1
  122. package/dist/components/ui/drawer/Drawer.vue.d.ts +0 -35
  123. package/dist/components/ui/drawer/Drawer.vue.d.ts.map +0 -1
  124. package/dist/components/ui/drawer/DrawerClose.vue.d.ts +0 -19
  125. package/dist/components/ui/drawer/DrawerClose.vue.d.ts.map +0 -1
  126. package/dist/components/ui/drawer/DrawerContent.vue.d.ts +0 -43
  127. package/dist/components/ui/drawer/DrawerContent.vue.d.ts.map +0 -1
  128. package/dist/components/ui/drawer/DrawerDescription.vue.d.ts +0 -23
  129. package/dist/components/ui/drawer/DrawerDescription.vue.d.ts.map +0 -1
  130. package/dist/components/ui/drawer/DrawerFooter.vue.d.ts +0 -22
  131. package/dist/components/ui/drawer/DrawerFooter.vue.d.ts.map +0 -1
  132. package/dist/components/ui/drawer/DrawerHeader.vue.d.ts +0 -25
  133. package/dist/components/ui/drawer/DrawerHeader.vue.d.ts.map +0 -1
  134. package/dist/components/ui/drawer/DrawerOverlay.vue.d.ts +0 -8
  135. package/dist/components/ui/drawer/DrawerOverlay.vue.d.ts.map +0 -1
  136. package/dist/components/ui/drawer/DrawerTitle.vue.d.ts +0 -23
  137. package/dist/components/ui/drawer/DrawerTitle.vue.d.ts.map +0 -1
  138. package/dist/components/ui/drawer/DrawerTrigger.vue.d.ts +0 -19
  139. package/dist/components/ui/drawer/DrawerTrigger.vue.d.ts.map +0 -1
  140. package/dist/components/ui/drawer/index.d.ts +0 -11
  141. package/dist/components/ui/drawer/index.d.ts.map +0 -1
  142. package/dist/components/ui/tooltip/Tooltip.vue.d.ts +0 -23
  143. package/dist/components/ui/tooltip/Tooltip.vue.d.ts.map +0 -1
  144. package/dist/components/ui/tooltip/TooltipContent.vue.d.ts +0 -31
  145. package/dist/components/ui/tooltip/TooltipContent.vue.d.ts.map +0 -1
  146. package/dist/components/ui/tooltip/TooltipTrigger.vue.d.ts +0 -19
  147. package/dist/components/ui/tooltip/TooltipTrigger.vue.d.ts.map +0 -1
  148. package/dist/components/ui/tooltip/index.d.ts +0 -4
  149. package/dist/components/ui/tooltip/index.d.ts.map +0 -1
  150. package/dist/lib/layer-manager.d.ts +0 -16
  151. package/dist/lib/layer-manager.d.ts.map +0 -1
  152. package/src/components/ui/dialog/Dialog.vue +0 -19
  153. package/src/components/ui/dialog/DialogClose.vue +0 -29
  154. package/src/components/ui/dialog/DialogContent.vue +0 -140
  155. package/src/components/ui/dialog/DialogFooter.vue +0 -50
  156. package/src/components/ui/dialog/DialogHeader.vue +0 -83
  157. package/src/components/ui/dialog/DialogTitle.vue +0 -38
  158. package/src/components/ui/dialog/DialogTrigger.vue +0 -16
  159. package/src/components/ui/dialog/index.ts +0 -7
  160. package/src/components/ui/drawer/Drawer.vue +0 -27
  161. package/src/components/ui/drawer/DrawerClose.vue +0 -37
  162. package/src/components/ui/drawer/DrawerContent.vue +0 -111
  163. package/src/components/ui/drawer/DrawerDescription.vue +0 -40
  164. package/src/components/ui/drawer/DrawerFooter.vue +0 -38
  165. package/src/components/ui/drawer/DrawerHeader.vue +0 -57
  166. package/src/components/ui/drawer/DrawerOverlay.vue +0 -33
  167. package/src/components/ui/drawer/DrawerTitle.vue +0 -37
  168. package/src/components/ui/drawer/DrawerTrigger.vue +0 -31
  169. package/src/components/ui/drawer/index.ts +0 -10
  170. package/src/components/ui/tooltip/Tooltip.vue +0 -21
  171. package/src/components/ui/tooltip/TooltipContent.vue +0 -74
  172. package/src/components/ui/tooltip/TooltipTrigger.vue +0 -26
  173. package/src/components/ui/tooltip/index.ts +0 -3
  174. package/src/lib/layer-manager.ts +0 -84
  175. package/src/stories/Dialog.stories.js +0 -832
  176. package/src/stories/DrawerNext.stories.js +0 -611
  177. package/src/stories/LayerManager.docs.mdx +0 -40
  178. package/src/stories/LayerManager.stories.js +0 -364
@@ -3,380 +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
- });
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);
69
25
  });
70
26
 
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');
27
+ it('should force open the tooltip when forceOpen is true', async () => {
28
+ await wrapper.setProps({ enabled: false, forceOpen: true });
112
29
 
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
- });
126
- });
127
-
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
- });
146
-
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');
34
+ it('should position the tooltip correctly based on the side prop', async () => {
35
+ const sideValues = ['top', 'right', 'bottom', 'left'];
165
36
 
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
- });
181
-
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 Tooltip component', () => {
240
- expect(wrapper.findComponent({ name: 'Tooltip' }).exists()).toBe(true);
241
- });
242
-
243
- it('should have TooltipTrigger component', () => {
244
- expect(wrapper.findComponent({ name: 'TooltipTrigger' }).exists()).toBe(
245
- true,
246
- );
247
- });
248
-
249
- it('should have TooltipContent component', () => {
250
- expect(wrapper.findComponent({ name: 'TooltipContent' }).exists()).toBe(
251
- true,
252
- );
253
- });
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
+ }
254
42
  });
255
43
 
256
- describe('CSS Classes', () => {
257
- it('should pass side prop to TooltipContent', () => {
258
- 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' });
259
46
 
260
- sides.forEach((side) => {
261
- const sideWrapper = createWrapper({
262
- text: 'Text',
263
- enabled: true,
264
- side,
265
- });
47
+ const tooltipLabel = wrapper.find('[data-testid="tooltip-label"]');
266
48
 
267
- const tooltipContent = sideWrapper.findComponent({
268
- name: 'TooltipContent',
269
- });
270
- expect(tooltipContent.exists()).toBe(true);
271
- expect(tooltipContent.props('side')).toBe(side);
49
+ expect(tooltipLabel.text()).toContain('First line');
50
+ expect(tooltipLabel.text()).toContain('Second line');
272
51
 
273
- sideWrapper.unmount();
274
- });
275
- });
276
-
277
- it('should pass class prop to TooltipContent component', () => {
278
- const tooltipContent = wrapper.findComponent({ name: 'TooltipContent' });
279
- expect(tooltipContent.exists()).toBe(true);
280
- expect(tooltipContent.props('class')).toContain('unnnic-tooltip-label');
281
- });
52
+ const brElements = tooltipLabel.findAll('br');
53
+ expect(brElements.length).toBe(2);
282
54
  });
283
55
 
284
- describe('Side Validator', () => {
285
- it('should validate side prop correctly', () => {
286
- const validator = wrapper.vm.$options.props.side.validator;
56
+ it('should display shortcutText when provided', async () => {
57
+ await wrapper.setProps({ shortcutText: 'Ctrl+C' });
287
58
 
288
- expect(validator('top')).toBe(true);
289
- expect(validator('right')).toBe(true);
290
- expect(validator('bottom')).toBe(true);
291
- expect(validator('left')).toBe(true);
292
- expect(validator('invalid')).toBe(false);
293
- });
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');
294
64
  });
295
65
 
296
- describe('Props Defaults', () => {
297
- it('should have correct default values', () => {
298
- const defaultWrapper = createWrapper();
66
+ it('should calculate tooltip position based on element coordinates', async () => {
67
+ await wrapper.setProps({ side: 'right' });
299
68
 
300
- expect(defaultWrapper.vm.$props.text).toBe('');
301
- expect(defaultWrapper.vm.$props.enabled).toBe(false);
302
- expect(defaultWrapper.vm.$props.forceOpen).toBe(false);
303
- expect(defaultWrapper.vm.$props.side).toBe('right');
304
- expect(defaultWrapper.vm.$props.maxWidth).toBe('');
305
- expect(defaultWrapper.vm.$props.enableHtml).toBe(false);
69
+ await wrapper.vm.$nextTick();
306
70
 
307
- defaultWrapper.unmount();
308
- });
71
+ expect(wrapper.vm.leftPos).toBeDefined();
72
+ expect(wrapper.vm.topPos).toBeDefined();
309
73
  });
310
74
 
311
- describe('Max Width Style', () => {
312
- it('should pass maxWidth prop to TooltipContent', () => {
313
- const maxWidthWrapper = createWrapper({
314
- text: 'Text',
315
- enabled: true,
316
- maxWidth: '250px',
317
- });
318
-
319
- expect(maxWidthWrapper.vm.$props.maxWidth).toBe('250px');
320
-
321
- maxWidthWrapper.unmount();
322
- });
323
-
324
- it('should handle different maxWidth values', () => {
325
- const values = ['100px', '50%', '20rem', '300px'];
326
-
327
- values.forEach((maxWidth) => {
328
- const testWrapper = createWrapper({
329
- text: 'Text',
330
- enabled: true,
331
- maxWidth,
332
- });
75
+ it('should remove event listeners on unmount', () => {
76
+ const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
333
77
 
334
- expect(testWrapper.vm.$props.maxWidth).toBe(maxWidth);
78
+ wrapper.unmount();
335
79
 
336
- testWrapper.unmount();
337
- });
338
- });
80
+ expect(removeEventListenerSpy).toHaveBeenCalledWith(
81
+ 'scroll',
82
+ expect.any(Function),
83
+ );
84
+ expect(removeEventListenerSpy).toHaveBeenCalledWith(
85
+ 'resize',
86
+ expect.any(Function),
87
+ );
339
88
  });
340
89
 
341
- describe('Component Props Types', () => {
342
- it('should have correct prop types', () => {
343
- const { props } = wrapper.vm.$options;
344
-
345
- expect(props.text.type).toBe(String);
346
- expect(props.enabled.type).toBe(Boolean);
347
- expect(props.forceOpen.type).toBe(Boolean);
348
- expect(props.side.type).toBe(String);
349
- expect(props.maxWidth.type).toBe(String);
350
- expect(props.enableHtml.type).toBe(Boolean);
351
- });
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();
352
94
  });
353
95
 
354
- describe('Enabled and ForceOpen Logic', () => {
355
- it('should be disabled when enabled is false and forceOpen is false', () => {
356
- const disabledWrapper = createWrapper({
357
- text: 'Text',
358
- enabled: false,
359
- forceOpen: false,
360
- });
361
-
362
- expect(disabledWrapper.vm.$props.enabled).toBe(false);
363
- expect(disabledWrapper.vm.$props.forceOpen).toBe(false);
364
-
365
- disabledWrapper.unmount();
366
- });
367
-
368
- it('should override disabled state when forceOpen is true', () => {
369
- const forceOpenWrapper = createWrapper({
370
- text: 'Text',
371
- enabled: false,
372
- forceOpen: true,
373
- });
374
-
375
- expect(forceOpenWrapper.vm.$props.enabled).toBe(false);
376
- expect(forceOpenWrapper.vm.$props.forceOpen).toBe(true);
377
- expect(forceOpenWrapper.html()).toContain('unnnic-tooltip');
378
-
379
- 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',
380
100
  });
101
+ const link = wrapper.find('a[data-testid="weni-link"]');
102
+ expect(link.exists()).toBeTruthy();
381
103
  });
382
104
  });
@@ -110,20 +110,6 @@ import {
110
110
  SegmentedControlContent,
111
111
  } from './ui/segmented-control';
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
 
@@ -241,20 +227,6 @@ export const components: ComponentsMap = {
241
227
  unnnicSegmentedControlTrigger: SegmentedControlTrigger,
242
228
  unnnicSegmentedControlContent: SegmentedControlContent,
243
229
  unnnicPageHeader: PageHeader,
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,
258
230
  };
259
231
 
260
232
  export const unnnicFontSize = fontSize;
@@ -368,20 +340,6 @@ export const unnnicSegmentedControlList = SegmentedControlList;
368
340
  export const unnnicSegmentedControlTrigger = SegmentedControlTrigger;
369
341
  export const unnnicSegmentedControlContent = SegmentedControlContent;
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;
@@ -494,17 +452,3 @@ export const UnnnicSegmentedControlList = SegmentedControlList;
494
452
  export const UnnnicSegmentedControlTrigger = SegmentedControlTrigger;
495
453
  export const UnnnicSegmentedControlContent = SegmentedControlContent;
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;
@@ -9,7 +9,6 @@
9
9
  'bg-popover text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
10
10
  )
11
11
  "
12
- :style="{ zIndex: popoverZIndex }"
13
12
  >
14
13
  <section :class="`unnnic-popover__content ${props.class || ''}`">
15
14
  <component
@@ -35,7 +34,6 @@ import { computed, useSlots } from 'vue';
35
34
  import { reactiveOmit } from '@vueuse/core';
36
35
  import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
37
36
  import { cn } from '@/lib/utils';
38
- import { useLayerZIndex } from '@/lib/layer-manager';
39
37
 
40
38
  defineOptions({
41
39
  inheritAttrs: false,
@@ -63,8 +61,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
63
61
 
64
62
  const slots = useSlots();
65
63
 
66
- const popoverZIndex = useLayerZIndex('popover');
67
-
68
64
  const getComponentName = (vnode: VNode): string | undefined => {
69
65
  const componentType = vnode.type as { name?: string; __name?: string };
70
66
  return componentType?.name || componentType?.__name;
@@ -91,6 +87,8 @@ const footerChildren = computed(() => {
91
87
  $popover-space: $unnnic-space-4;
92
88
 
93
89
  .unnnic-popover {
90
+ z-index: 10000;
91
+
94
92
  border-radius: $unnnic-radius-2;
95
93
  box-shadow: $unnnic-shadow-1;
96
94
 
@@ -75,8 +75,8 @@ const schemeColor = computed(() => {
75
75
 
76
76
  .unnnic-popover-option {
77
77
  cursor: pointer;
78
- border-radius: $unnnic-radius-1;
79
- padding: $unnnic-space-2 $unnnic-space-4;
78
+ border-radius: $unnnic-radius-2;
79
+ padding: $unnnic-space-2;
80
80
  font: $unnnic-font-emphasis;
81
81
  display: flex;
82
82
  gap: $unnnic-space-2;
@@ -14,14 +14,10 @@ const props = defineProps<PopoverTriggerProps>();
14
14
  </PopoverTrigger>
15
15
  </template>
16
16
 
17
- <style lang="scss" scoped>
17
+ <style scoped>
18
18
  .unnnic-popover-trigger {
19
19
  border: none;
20
20
  background: transparent;
21
21
  padding: 0;
22
-
23
- & > * {
24
- width: 100%;
25
- }
26
22
  }
27
23
  </style>
@@ -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: {
@@ -133,8 +133,9 @@ export const WithOptions = {
133
133
  <PopoverOption label="View details" icon="info" scheme="fg-info" />
134
134
  <PopoverOption label="Edit" icon="edit" scheme="fg-warning" />
135
135
  <PopoverOption label="Delete" icon="delete" scheme="fg-critical" />
136
- <PopoverOption label="Disable" icon="close" disabled />
137
- <PopoverOption label="Active" icon="check" active />
136
+ <PopoverOption label="Focused" focused />
137
+ <PopoverOption label="Disable" disabled />
138
+ <PopoverOption label="Active" active />
138
139
  </section>
139
140
  </PopoverContent>
140
141
  </Popover>
@@ -8,11 +8,8 @@ export default {
8
8
  parameters: {
9
9
  docs: {
10
10
  description: {
11
- component: `A popover component that displays rich content in a portal, floating on top of other content.
12
- <br/>
13
- It supports three sizes (small, medium, large).
14
- <br/>
15
- API reference: https://www.reka-ui.com/docs/components/popover
11
+ component: `A popover options item component.
12
+ It is used to display options in a popover.
16
13
  `,
17
14
  },
18
15
  },
@@ -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"}