@weni/unnnic-system 3.9.1-alpha.1 → 3.9.1-alpha.2

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 (95) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/dist/components/Button/Button.vue.d.ts.map +1 -1
  3. package/dist/components/DateFilter/DateFilter.vue.d.ts +3 -82
  4. package/dist/components/Input/BaseInput.vue.d.ts +0 -22
  5. package/dist/components/Input/BaseInput.vue.d.ts.map +1 -1
  6. package/dist/components/Input/Input.vue.d.ts +3 -82
  7. package/dist/components/Input/Input.vue.d.ts.map +1 -1
  8. package/dist/components/Input/TextInput.vue.d.ts +2 -53
  9. package/dist/components/Input/TextInput.vue.d.ts.map +1 -1
  10. package/dist/components/InputDatePicker/InputDatePicker.vue.d.ts +4 -83
  11. package/dist/components/InputNext/InputNext.vue.d.ts +1 -1
  12. package/dist/components/ModalDialog/ModalDialog.vue.d.ts +29 -203
  13. package/dist/components/ModalDialog/ModalDialog.vue.d.ts.map +1 -1
  14. package/dist/components/ModalNext/ModalNext.vue.d.ts +3 -82
  15. package/dist/components/SelectSmart/SelectSmart.vue.d.ts +2 -53
  16. package/dist/components/SelectTime/index.vue.d.ts +2 -53
  17. package/dist/components/Tag/DefaultTag.vue.d.ts.map +1 -1
  18. package/dist/components/index.d.ts +236 -1764
  19. package/dist/components/index.d.ts.map +1 -1
  20. package/dist/{es-de156c12.mjs → es-d456f02a.mjs} +1 -1
  21. package/dist/{index-21cbba5d.mjs → index-120e037a.mjs} +11437 -12248
  22. package/dist/locales/en.json.d.ts +1 -2
  23. package/dist/locales/es.json.d.ts +1 -2
  24. package/dist/locales/pt_br.json.d.ts +1 -2
  25. package/dist/{pt-br-5fa49a3e.mjs → pt-br-b627c074.mjs} +1 -1
  26. package/dist/style.css +1 -1
  27. package/dist/unnnic.mjs +179 -195
  28. package/dist/unnnic.umd.js +34 -41
  29. package/package.json +1 -1
  30. package/src/assets/scss/tailwind.scss +0 -8
  31. package/src/components/Alert/__tests__/__snapshots__/Version1dot1.spec.js.snap +1 -1
  32. package/src/components/Button/Button.vue +0 -1
  33. package/src/components/Input/BaseInput.vue +2 -21
  34. package/src/components/Input/Input.scss +3 -3
  35. package/src/components/Input/Input.vue +1 -19
  36. package/src/components/Input/TextInput.vue +21 -62
  37. package/src/components/ModalDialog/ModalDialog.vue +148 -62
  38. package/src/components/ModalDialog/__tests__/ModalDialog.spec.js +221 -11
  39. package/src/components/ModalDialog/__tests__/__snapshots__/ModalDialog.spec.js.snap +22 -1
  40. package/src/components/Radio/__test__/__snapshots__/Radio.spec.js.snap +1 -0
  41. package/src/components/Tag/DefaultTag.vue +0 -5
  42. package/src/components/index.ts +23 -55
  43. package/src/locales/en.json +1 -2
  44. package/src/locales/es.json +1 -2
  45. package/src/locales/pt_br.json +1 -2
  46. package/src/stories/ModalDialog.mdx +0 -3
  47. package/src/stories/ModalDialog.stories.js +1 -1
  48. package/dist/components/PageHeader/PageHeader.vue.d.ts +0 -28
  49. package/dist/components/PageHeader/PageHeader.vue.d.ts.map +0 -1
  50. package/dist/components/PageHeader/index.d.ts +0 -3
  51. package/dist/components/PageHeader/index.d.ts.map +0 -1
  52. package/dist/components/PageHeader/types.d.ts +0 -9
  53. package/dist/components/PageHeader/types.d.ts.map +0 -1
  54. package/dist/components/ui/dialog/Dialog.vue.d.ts +0 -23
  55. package/dist/components/ui/dialog/Dialog.vue.d.ts.map +0 -1
  56. package/dist/components/ui/dialog/DialogClose.vue.d.ts +0 -19
  57. package/dist/components/ui/dialog/DialogClose.vue.d.ts.map +0 -1
  58. package/dist/components/ui/dialog/DialogContent.vue.d.ts +0 -43
  59. package/dist/components/ui/dialog/DialogContent.vue.d.ts.map +0 -1
  60. package/dist/components/ui/dialog/DialogFooter.vue.d.ts +0 -25
  61. package/dist/components/ui/dialog/DialogFooter.vue.d.ts.map +0 -1
  62. package/dist/components/ui/dialog/DialogHeader.vue.d.ts +0 -29
  63. package/dist/components/ui/dialog/DialogHeader.vue.d.ts.map +0 -1
  64. package/dist/components/ui/dialog/DialogTitle.vue.d.ts +0 -23
  65. package/dist/components/ui/dialog/DialogTitle.vue.d.ts.map +0 -1
  66. package/dist/components/ui/dialog/DialogTrigger.vue.d.ts +0 -19
  67. package/dist/components/ui/dialog/DialogTrigger.vue.d.ts.map +0 -1
  68. package/dist/components/ui/dialog/index.d.ts +0 -8
  69. package/dist/components/ui/dialog/index.d.ts.map +0 -1
  70. package/src/components/Alert/SIMPLE_MIGRATION_GUIDE.md +0 -152
  71. package/src/components/PageHeader/PageHeader.vue +0 -154
  72. package/src/components/PageHeader/index.ts +0 -2
  73. package/src/components/PageHeader/types.ts +0 -10
  74. package/src/components/Popover/__tests__/Popover.spec.js +0 -147
  75. package/src/components/Popover/__tests__/__snapshots__/Popover.spec.js.snap +0 -8
  76. package/src/components/Popover/index.vue +0 -146
  77. package/src/components/Select/SelectOption.vue +0 -65
  78. package/src/components/Select/__tests__/Select.spec.js +0 -412
  79. package/src/components/Select/__tests__/SelectItem.spec.js +0 -330
  80. package/src/components/Select/__tests__/SelectOption.spec.js +0 -174
  81. package/src/components/Select/__tests__/__snapshots__/Select.spec.js.snap +0 -97
  82. package/src/components/Select/__tests__/__snapshots__/SelectItem.spec.js.snap +0 -15
  83. package/src/components/Select/__tests__/__snapshots__/SelectOption.spec.js.snap +0 -25
  84. package/src/components/Select/index.vue +0 -245
  85. package/src/components/ui/dialog/Dialog.vue +0 -15
  86. package/src/components/ui/dialog/DialogClose.vue +0 -25
  87. package/src/components/ui/dialog/DialogContent.vue +0 -133
  88. package/src/components/ui/dialog/DialogFooter.vue +0 -46
  89. package/src/components/ui/dialog/DialogHeader.vue +0 -79
  90. package/src/components/ui/dialog/DialogTitle.vue +0 -34
  91. package/src/components/ui/dialog/DialogTrigger.vue +0 -12
  92. package/src/components/ui/dialog/index.ts +0 -7
  93. package/src/stories/Dialog.stories.js +0 -832
  94. package/src/stories/PageHeader.stories.js +0 -330
  95. package/src/stories/Select.stories.js +0 -158
@@ -1,5 +1,5 @@
1
1
  import { mount } from '@vue/test-utils';
2
- import { describe, it } from 'vitest';
2
+ import { describe, it, vi } from 'vitest';
3
3
  import ModalDialog from '../ModalDialog.vue';
4
4
 
5
5
  describe('ModalDialog.vue', () => {
@@ -16,12 +16,7 @@ describe('ModalDialog.vue', () => {
16
16
  'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
17
17
  },
18
18
  global: {
19
- stubs: [
20
- 'teleport',
21
- 'UnnnicIcon',
22
- 'UnnnicButton',
23
- 'UnnnicDialogContent',
24
- ],
19
+ stubs: ['UnnnicIcon', 'UnnnicButton'],
25
20
  },
26
21
  });
27
22
  });
@@ -31,16 +26,231 @@ describe('ModalDialog.vue', () => {
31
26
  expect(wrapper.html()).toMatchSnapshot();
32
27
  });
33
28
 
29
+ it('should render correctly when modelValue is true', () => {
30
+ const modal = wrapper.find('[data-testid="modal-dialog"]');
31
+ expect(modal.exists()).toBe(true);
32
+ });
33
+
34
+ it('should not render when modelValue is false', async () => {
35
+ await wrapper.setProps({ modelValue: false });
36
+
37
+ const modal = wrapper.find('[data-testid="modal-dialog"]');
38
+ expect(modal.exists()).toBe(false);
39
+ });
40
+
34
41
  it('should apply the correct size class based on the size prop', async () => {
35
- const modalContainer = wrapper.find('[data-testid="modal-dialog"]');
42
+ const modalContainer = wrapper.find('[data-testid="modal-container"]');
43
+ const defaultClass = 'unnnic-modal-dialog__container';
36
44
 
37
- expect(modalContainer.attributes('size')).toContain('medium');
45
+ expect(modalContainer.classes()).toContain(defaultClass + '--md');
38
46
 
39
47
  await wrapper.setProps({ size: 'lg' });
40
- expect(modalContainer.attributes('size')).toContain('large');
48
+ expect(modalContainer.classes()).toContain(defaultClass + '--lg');
41
49
 
42
50
  await wrapper.setProps({ size: 'sm' });
43
- expect(modalContainer.attributes('size')).toContain('small');
51
+ expect(modalContainer.classes()).toContain(defaultClass + '--sm');
52
+ });
53
+
54
+ it('should render the icon and title when provided', () => {
55
+ const title = wrapper.find('[data-testid="title-text"]');
56
+ expect(title.exists()).toBe(true);
57
+ expect(title.text()).toBe('Test Title');
58
+
59
+ const icon = wrapper.findComponent('[data-testid="title-icon"]');
60
+ expect(icon.exists()).toBe(true);
61
+ expect(icon.props('icon')).toBe('test-icon');
62
+ });
63
+
64
+ it('should render the icon from iconsMapper when type prop is provided', async () => {
65
+ await wrapper.setProps({
66
+ type: 'success',
67
+ icon: '',
68
+ });
69
+
70
+ const icon = wrapper.findComponent('[data-testid="title-icon"]');
71
+ expect(icon.exists()).toBe(true);
72
+ expect(icon.props().icon).toBe(wrapper.vm.iconsMapper['success'].icon);
73
+ });
74
+
75
+ it('should not render the icon when both icon and type props are not provided', async () => {
76
+ await wrapper.setProps({
77
+ icon: '',
78
+ type: '',
79
+ });
80
+
81
+ const icon = wrapper.find('[data-testid="title-icon"]');
82
+ expect(icon.exists()).toBe(false);
83
+ });
84
+
85
+ it('should render the close icon when showCloseIcon is true', () => {
86
+ const closeIcon = wrapper.find('[data-testid="close-icon"]');
87
+ expect(closeIcon.exists()).toBe(true);
88
+ });
89
+
90
+ it('should not render buttons when primaryButtonProps is not provided', async () => {
91
+ await wrapper.setProps({ primaryButtonProps: undefined });
92
+
93
+ const primaryButton = wrapper.find('[data-testid="primary-button"]');
94
+ const secondaryButton = wrapper.find('[data-testid="secondary-button"]');
95
+ expect(primaryButton.exists()).toBe(false);
96
+ expect(secondaryButton.exists()).toBe(false);
97
+ });
98
+ });
99
+
100
+ describe('Overlay behavior', () => {
101
+ it('should close the modal when clicking on the overlay if persistent is false', async () => {
102
+ expect(wrapper.props().modelValue).toBe(true);
103
+
104
+ const overlay = wrapper.find('[data-testid="modal-overlay"]');
105
+ await overlay.trigger('click');
106
+
107
+ expect(wrapper.emitted('update:modelValue')).toBeTruthy();
108
+ expect(wrapper.emitted('update:modelValue')[0]).toEqual([false]);
109
+ expect(wrapper.props().modelValue).toBe(false);
110
+ });
111
+
112
+ it('should not close the modal when clicking on the overlay if persistent is true', async () => {
113
+ await wrapper.setProps({ persistent: true });
114
+
115
+ const overlay = wrapper.find('[data-testid="modal-overlay"]');
116
+ await overlay.trigger('click');
117
+
118
+ expect(wrapper.emitted('update:modelValue')).toBeFalsy();
119
+ expect(wrapper.props().modelValue).toBe(true);
120
+ });
121
+ });
122
+
123
+ describe('Slot rendering', () => {
124
+ it('should render leftSidebar slot when provided', () => {
125
+ const wrapper = mount(ModalDialog, {
126
+ props: {
127
+ modelValue: true,
128
+ },
129
+ slots: {
130
+ leftSidebar:
131
+ '<div data-testid="left-sidebar">Left Sidebar Content</div>',
132
+ },
133
+ });
134
+
135
+ const leftSidebar = wrapper.find('[data-testid="left-sidebar"]');
136
+ expect(leftSidebar.exists()).toBe(true);
137
+ expect(leftSidebar.text()).toBe('Left Sidebar Content');
138
+ });
139
+
140
+ it('should render default slot content', () => {
141
+ const wrapper = mount(ModalDialog, {
142
+ props: {
143
+ modelValue: true,
144
+ },
145
+ slots: {
146
+ default: '<div data-testid="default-slot">Default Slot Content</div>',
147
+ },
148
+ });
149
+
150
+ const defaultSlot = wrapper.find('[data-testid="default-slot"]');
151
+ expect(defaultSlot.exists()).toBe(true);
152
+ expect(defaultSlot.text()).toBe('Default Slot Content');
153
+ });
154
+ });
155
+
156
+ describe('Buttons actions', () => {
157
+ it('should close the modal when clicking on close icon', async () => {
158
+ const closeIcon = wrapper.find('[data-testid="close-icon"]');
159
+ await closeIcon.trigger('click');
160
+
161
+ expect(wrapper.emitted('update:modelValue')).toBeTruthy();
162
+ expect(wrapper.emitted('update:modelValue')[0]).toEqual([false]);
163
+ expect(wrapper.props().modelValue).toBe(false);
164
+ });
165
+
166
+ it('should emit primaryButtonClick event when the primary button is clicked', async () => {
167
+ const primaryButton = wrapper.find('[data-testid="primary-button"]');
168
+ await primaryButton.trigger('click');
169
+
170
+ expect(wrapper.emitted('primaryButtonClick')).toBeTruthy();
171
+ });
172
+
173
+ it('should emit secondaryButtonClick event when the secondary button is clicked', async () => {
174
+ await wrapper.setProps({
175
+ secondaryButtonProps: { text: 'Cancel' },
176
+ });
177
+
178
+ const secondaryButton = wrapper.find('[data-testid="secondary-button"]');
179
+ await secondaryButton.trigger('click');
180
+
181
+ expect(wrapper.emitted('secondaryButtonClick')).toBeTruthy();
182
+ });
183
+
184
+ it('should close the modal when the secondary button is clicked and no secondaryButtonClick event is provided', async () => {
185
+ const secondaryButton = wrapper.find('[data-testid="secondary-button"]');
186
+ await secondaryButton.trigger('click');
187
+
188
+ const emittedValue = wrapper.emitted('update:modelValue');
189
+
190
+ expect(emittedValue).toBeTruthy();
191
+ expect(emittedValue[0][0]).toEqual(false);
192
+ });
193
+ });
194
+
195
+ describe('Actions and appearance', () => {
196
+ it('should not render the secondary button when hideSecondaryButton is true', async () => {
197
+ await wrapper.setProps({
198
+ hideSecondaryButton: true,
199
+ });
200
+ const secondaryButton = wrapper.find('[data-testid="secondary-button"]');
201
+ expect(secondaryButton.exists()).toBe(false);
202
+ });
203
+
204
+ it('should apply a divider class to the actions section when showActionsDivider is true', async () => {
205
+ await wrapper.setProps({
206
+ showActionsDivider: true,
207
+ });
208
+
209
+ const actionsSection = wrapper.find('[data-testid="actions-section"]');
210
+ expect(actionsSection.classes()).toContain(
211
+ 'unnnic-modal-dialog__container__actions--divider',
212
+ );
213
+ });
214
+ });
215
+
216
+ describe('Body overflow', () => {
217
+ it('should toggle body overflow based on modal visibility', async () => {
218
+ await wrapper.setProps({ modelValue: false });
219
+ const updateBodyOverflowSpy = vi.spyOn(wrapper.vm, 'updateBodyOverflow');
220
+
221
+ await wrapper.setProps({ modelValue: true });
222
+ expect(updateBodyOverflowSpy).toHaveBeenCalledWith(true);
223
+
224
+ await wrapper.setProps({ modelValue: false });
225
+ expect(updateBodyOverflowSpy).toHaveBeenCalledWith(false);
226
+ });
227
+ });
228
+
229
+ describe('Validators', () => {
230
+ describe('type prop validator', () => {
231
+ it('should validate type prop when a valid value is provided', () => {
232
+ const validTypes = ['success', 'warning', 'attention'];
233
+ validTypes.forEach((validType) => {
234
+ expect(ModalDialog.props.type.validate(validType)).toBe(true);
235
+ });
236
+ });
237
+
238
+ it('should invalidate type prop when an invalid value is provided', () => {
239
+ expect(ModalDialog.props.type.validate('invalidType')).toBe(false);
240
+ });
241
+ });
242
+
243
+ describe('size prop validator', () => {
244
+ it('should validate size prop when a valid value is provided', () => {
245
+ const validSizes = ['sm', 'md', 'lg'];
246
+ validSizes.forEach((validSize) => {
247
+ expect(ModalDialog.props.size.validate(validSize)).toBe(true);
248
+ });
249
+ });
250
+
251
+ it('should invalidate size prop when an invalid value is provided', () => {
252
+ expect(ModalDialog.props.size.validate('invalidSize')).toBe(false);
253
+ });
44
254
  });
45
255
  });
46
256
  });
@@ -1,3 +1,24 @@
1
1
  // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
- exports[`ModalDialog.vue > Elements rendering > matches the snapshot 1`] = `"<unnnic-dialog-content-stub data-v-68ebadeb="" forcemount="false" disableoutsidepointerevents="false" aschild="false" parentclass="unnnic-modal-dialog," class="unnnic-modal-dialog__container" size="medium" data-testid="modal-dialog"></unnnic-dialog-content-stub>"`;
3
+ exports[`ModalDialog.vue > Elements rendering > matches the snapshot 1`] = `
4
+ "<section data-v-68ebadeb="" class="unnnic-modal-dialog" data-testid="modal-dialog">
5
+ <section data-v-68ebadeb="" class="unnnic-modal-dialog__overlay" data-testid="modal-overlay"></section>
6
+ <section data-v-68ebadeb="" class="unnnic-modal-dialog__container unnnic-modal-dialog__container--md" data-testid="modal-container">
7
+ <!--v-if-->
8
+ <section data-v-68ebadeb="" class="unnnic-modal-dialog__container__body">
9
+ <header data-v-68ebadeb="" class="unnnic-modal-dialog__container__header">
10
+ <section data-v-68ebadeb="" class="unnnic-modal-dialog__container__title-container">
11
+ <unnnic-icon-stub data-v-68ebadeb="" filled="false" icon="test-icon" clickable="false" size="md" scheme="neutral-darkest" data-testid="title-icon" class="unnnic-modal-dialog__container__title-icon"></unnnic-icon-stub>
12
+ <h1 data-v-68ebadeb="" class="unnnic-modal-dialog__container__title-text" data-testid="title-text">Test Title</h1>
13
+ </section>
14
+ <unnnic-icon-stub data-v-68ebadeb="" filled="false" icon="close" clickable="true" size="md" scheme="neutral-cloudy" data-testid="close-icon"></unnnic-icon-stub>
15
+ </header>
16
+ <section data-v-68ebadeb="" class="unnnic-modal-dialog__container__content"></section>
17
+ <section data-v-68ebadeb="" data-testid="actions-section" class="unnnic-modal-dialog__container__actions">
18
+ <unnnic-button-stub data-v-68ebadeb="" size="large" text="Cancel" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="secondary-button" class="unnnic-modal-dialog__container__actions__secondary-button"></unnnic-button-stub>
19
+ <unnnic-button-stub data-v-68ebadeb="" size="large" text="Confirm" type="primary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="primary-button" class="unnnic-modal-dialog__container__actions__primary-button"></unnnic-button-stub>
20
+ </section>
21
+ </section>
22
+ </section>
23
+ </section>"
24
+ `;
@@ -3,5 +3,6 @@
3
3
  exports[`Radio.vue > matches the snapshot 1`] = `
4
4
  "<section data-v-38c6bf5e="" class="unnnic-radio" size="md"><label data-v-38c6bf5e="" class="unnnic-radio__input-wrapper"><input data-v-38c6bf5e="" class="unnnic-radio__input" type="radio" name="">
5
5
  <p data-v-38c6bf5e="" class="unnnic-radio__label"> Option 1</p>
6
+ <!--v-if-->
6
7
  </label></section>"
7
8
  `;
@@ -62,7 +62,6 @@ const color = computed(() => {
62
62
  gap: $unnnic-space-1;
63
63
  border-radius: $unnnic-border-radius-pill;
64
64
  padding: calc($unnnic-space-1 * 1.5) $unnnic-space-3;
65
- width: fit-content;
66
65
 
67
66
  background-color: v-bind(color);
68
67
 
@@ -73,10 +72,6 @@ const color = computed(() => {
73
72
  &__label {
74
73
  margin: 0;
75
74
 
76
- overflow: hidden;
77
- text-overflow: ellipsis;
78
- white-space: nowrap;
79
-
80
75
  font: $unnnic-font-caption-1;
81
76
  color: $unnnic-color-fg-emphasized;
82
77
  }
@@ -89,28 +89,20 @@ import ModalDialog from './ModalDialog/ModalDialog.vue';
89
89
  import Tour from './Tour/Tour.vue';
90
90
  import Navigator from './Navigator/index.vue';
91
91
  import SelectTime from './SelectTime/index.vue';
92
- import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
93
- import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
94
92
  import DataTable from './DataTable/index.vue';
95
93
  import Chip from './Chip/Chip.vue';
96
94
  import Toast from './Toast/Toast.vue';
97
95
  import { toast } from './Toast/ToastManager';
98
- import Popover from './ui/popover/Popover.vue';
99
- import PopoverContent from './ui/popover/PopoverContent.vue';
100
- import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
101
- import PopoverFooter from './ui/popover/PopoverFooter.vue';
102
- import Dialog from './ui/dialog/Dialog.vue';
103
- import DialogContent from './ui/dialog/DialogContent.vue';
104
- import DialogFooter from './ui/dialog/DialogFooter.vue';
105
- import DialogHeader from './ui/dialog/DialogHeader.vue';
106
- import DialogTitle from './ui/dialog/DialogTitle.vue';
107
- import DialogTrigger from './ui/dialog/DialogTrigger.vue';
108
- import DialogClose from './ui/dialog/DialogClose.vue';
109
96
  import Tabs from './ui/tabs/Tabs.vue';
110
97
  import TabsList from './ui/tabs/TabsList.vue';
111
98
  import TabsTrigger from './ui/tabs/TabsTrigger.vue';
112
99
  import TabsContent from './ui/tabs/TabsContent.vue';
113
- import PageHeader from './PageHeader/PageHeader.vue';
100
+ import Popover from './ui/popover/Popover.vue';
101
+ import PopoverContent from './ui/popover/PopoverContent.vue';
102
+ import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
103
+ import PopoverFooter from './ui/popover/PopoverFooter.vue';
104
+ import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
105
+ import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
114
106
 
115
107
  type VueComponent = Component;
116
108
 
@@ -216,21 +208,13 @@ export const components: ComponentsMap = {
216
208
  unnnicChip: Chip,
217
209
  unnnicToast: Toast,
218
210
  unnnicToastManager: toast,
219
- unnnicPopover: Popover,
220
- unnnicPopoverContent: PopoverContent,
221
- unnnicPopoverTrigger: PopoverTrigger,
222
- unnnicDialog: Dialog,
223
- unnnicDialogContent: DialogContent,
224
- unnnicDialogFooter: DialogFooter,
225
- unnnicDialogHeader: DialogHeader,
226
- unnnicDialogTitle: DialogTitle,
227
- unnnicDialogTrigger: DialogTrigger,
228
- unnnicDialogClose: DialogClose,
229
211
  unnnicTabs: Tabs,
230
212
  unnnicTabsList: TabsList,
231
213
  unnnicTabsTrigger: TabsTrigger,
232
214
  unnnicTabsContent: TabsContent,
233
- unnnicPageHeader: PageHeader,
215
+ unnnicPopover: Popover,
216
+ unnnicPopoverContent: PopoverContent,
217
+ unnnicPopoverTrigger: PopoverTrigger,
234
218
  };
235
219
 
236
220
  export const unnnicFontSize = fontSize;
@@ -324,29 +308,21 @@ export const unnnicDrawer = Drawer;
324
308
  export const unnnicTableNext = TableNext;
325
309
  export const unnnicTour = Tour;
326
310
  export const unnnicNavigator = Navigator;
327
- export const unnnicSelectTime = SelectTime as VueComponent;
328
- export const unnnicTemplatePreview = TemplatePreview as VueComponent;
329
- export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
330
311
  export const unnnicDataTable = DataTable as VueComponent;
312
+ export const unnnicSelectTime = SelectTime as VueComponent;
331
313
  export const unnnicChip = Chip;
332
314
  export const unnnicToast = Toast;
333
315
  export const unnnicToastManager = toast;
334
- export const unnnicPopover = Popover;
335
- export const unnnicPopoverContent = PopoverContent;
336
- export const unnnicPopoverTrigger = PopoverTrigger;
337
- export const unnnicPopoverFooter = PopoverFooter;
338
- export const unnnicDialog = Dialog;
339
- export const unnnicDialogContent = DialogContent;
340
- export const unnnicDialogFooter = DialogFooter;
341
- export const unnnicDialogHeader = DialogHeader;
342
- export const unnnicDialogTitle = DialogTitle;
343
- export const unnnicDialogTrigger = DialogTrigger;
344
- export const unnnicDialogClose = DialogClose;
345
316
  export const unnnicTabs = Tabs;
346
317
  export const unnnicTabsList = TabsList;
347
318
  export const unnnicTabsTrigger = TabsTrigger;
348
319
  export const unnnicTabsContent = TabsContent;
349
- export const unnnicPageHeader = PageHeader;
320
+ export const unnnicPopover = Popover;
321
+ export const unnnicPopoverContent = PopoverContent;
322
+ export const unnnicPopoverTrigger = PopoverTrigger;
323
+ export const unnnicPopoverFooter = PopoverFooter;
324
+ export const unnnicTemplatePreview = TemplatePreview as VueComponent;
325
+ export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
350
326
 
351
327
  export const UnnnicFontSize = fontSize;
352
328
  export const UnnnicInput = input;
@@ -438,26 +414,18 @@ export const UnnnicDrawer = Drawer;
438
414
  export const UnnnicTableNext = TableNext;
439
415
  export const UnnnicTour = Tour;
440
416
  export const UnnnicNavigator = Navigator;
441
- export const UnnnicSelectTime = SelectTime as VueComponent;
442
- export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
443
- export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
444
417
  export const UnnnicDataTable = DataTable as VueComponent;
418
+ export const UnnnicSelectTime = SelectTime as VueComponent;
445
419
  export const UnnnicChip = Chip;
446
420
  export const UnnnicToast = Toast;
447
421
  export const UnnnicToastManager = toast;
448
- export const UnnnicPopover = Popover;
449
- export const UnnnicPopoverContent = PopoverContent;
450
- export const UnnnicPopoverTrigger = PopoverTrigger;
451
- export const UnnnicPopoverFooter = PopoverFooter;
452
- export const UnnnicDialog = Dialog;
453
- export const UnnnicDialogContent = DialogContent;
454
- export const UnnnicDialogFooter = DialogFooter;
455
- export const UnnnicDialogHeader = DialogHeader;
456
- export const UnnnicDialogTitle = DialogTitle;
457
- export const UnnnicDialogTrigger = DialogTrigger;
458
- export const UnnnicDialogClose = DialogClose;
459
422
  export const UnnnicTabs = Tabs;
460
423
  export const UnnnicTabsList = TabsList;
461
424
  export const UnnnicTabsTrigger = TabsTrigger;
462
425
  export const UnnnicTabsContent = TabsContent;
463
- export const UnnnicPageHeader = PageHeader;
426
+ export const UnnnicPopover = Popover;
427
+ export const UnnnicPopoverContent = PopoverContent;
428
+ export const UnnnicPopoverTrigger = PopoverTrigger;
429
+ export const UnnnicPopoverFooter = PopoverFooter;
430
+ export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
431
+ export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
@@ -41,6 +41,5 @@
41
41
  "flags": "Flags",
42
42
  "custom": "Custom"
43
43
  }
44
- },
45
- "search": "Search"
44
+ }
46
45
  }
@@ -41,6 +41,5 @@
41
41
  "flags": "Banderas",
42
42
  "custom": "Personalizados"
43
43
  }
44
- },
45
- "search": "Buscar"
44
+ }
46
45
  }
@@ -41,6 +41,5 @@
41
41
  "flags": "Bandeiras",
42
42
  "custom": "Personalizados"
43
43
  }
44
- },
45
- "search": "Buscar"
44
+ }
46
45
  }
@@ -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,28 +0,0 @@
1
- import { PageHeaderProps } from './types';
2
- declare function __VLS_template(): {
3
- attrs: Partial<{}>;
4
- slots: {
5
- tag?(_: {}): any;
6
- actions?(_: {}): any;
7
- tabs?(_: {}): any;
8
- };
9
- refs: {};
10
- rootEl: HTMLElement;
11
- };
12
- type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
13
- declare const __VLS_component: import('vue').DefineComponent<PageHeaderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
14
- back: () => any;
15
- }, string, import('vue').PublicProps, Readonly<PageHeaderProps> & Readonly<{
16
- onBack?: (() => any) | undefined;
17
- }>, {
18
- description: string;
19
- hasBackButton: boolean;
20
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
21
- declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
22
- export default _default;
23
- type __VLS_WithTemplateSlots<T, S> = T & {
24
- new (): {
25
- $slots: S;
26
- };
27
- };
28
- //# sourceMappingURL=PageHeader.vue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PageHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/PageHeader.vue"],"names":[],"mappings":"AAsDA;AAgKA,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,SAAS,CAAC;AAyBhE,iBAAS,cAAc;WA2FT,OAAO,IAA6B;;qBAZzB,GAAG;yBACC,GAAG;sBACN,GAAG;;;;EAe5B;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;qFASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
@@ -1,3 +0,0 @@
1
- export { default } from './PageHeader.vue';
2
- export { default as PageHeader } from './PageHeader.vue';
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC"}
@@ -1,9 +0,0 @@
1
- export interface PageHeaderProps {
2
- title: string;
3
- description?: string;
4
- hasBackButton?: boolean;
5
- }
6
- export interface PageHeaderEmits {
7
- (event: 'back'): void;
8
- }
9
- //# sourceMappingURL=types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB"}
@@ -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":"AAiBA,OAAO,KAAK,EAAmB,eAAe,EAAE,MAAM,SAAS,CAAC;AAYhE,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"}
@@ -1,19 +0,0 @@
1
- import { DialogCloseProps } 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<DialogCloseProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DialogCloseProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
12
- declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
13
- export default _default;
14
- type __VLS_WithTemplateSlots<T, S> = T & {
15
- new (): {
16
- $slots: S;
17
- };
18
- };
19
- //# sourceMappingURL=DialogClose.vue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DialogClose.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dialog/DialogClose.vue"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQhD,iBAAS,cAAc;WAsCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,4SAOnB,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"}
@@ -1,43 +0,0 @@
1
- import { DialogContentProps } from 'reka-ui';
2
- import { HTMLAttributes } from 'vue';
3
- type __VLS_Props = DialogContentProps & {
4
- parentClass?: HTMLAttributes['class'];
5
- class?: HTMLAttributes['class'];
6
- size?: 'small' | 'medium' | 'large';
7
- };
8
- declare function __VLS_template(): {
9
- attrs: Partial<{}>;
10
- slots: {
11
- default?(_: {}): any;
12
- };
13
- refs: {};
14
- rootEl: any;
15
- };
16
- type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
17
- declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
18
- escapeKeyDown: (event: KeyboardEvent) => any;
19
- pointerDownOutside: (event: import('reka-ui').PointerDownOutsideEvent) => any;
20
- focusOutside: (event: import('reka-ui').FocusOutsideEvent) => any;
21
- interactOutside: (event: import('reka-ui').PointerDownOutsideEvent | import('reka-ui').FocusOutsideEvent) => any;
22
- openAutoFocus: (event: Event) => any;
23
- closeAutoFocus: (event: Event) => any;
24
- }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
25
- onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
26
- onPointerDownOutside?: ((event: import('reka-ui').PointerDownOutsideEvent) => any) | undefined;
27
- onFocusOutside?: ((event: import('reka-ui').FocusOutsideEvent) => any) | undefined;
28
- onInteractOutside?: ((event: import('reka-ui').PointerDownOutsideEvent | import('reka-ui').FocusOutsideEvent) => any) | undefined;
29
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
30
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
31
- }>, {
32
- size: "small" | "medium" | "large";
33
- class: HTMLAttributes["class"];
34
- parentClass: HTMLAttributes["class"];
35
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
36
- declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
37
- export default _default;
38
- type __VLS_WithTemplateSlots<T, S> = T & {
39
- new (): {
40
- $slots: S;
41
- };
42
- };
43
- //# sourceMappingURL=DialogContent.vue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DialogContent.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dialog/DialogContent.vue"],"names":[],"mappings":"AAuIA,OAAO,KAAK,EAAsB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAWrD,KAAK,WAAW,GAAG,kBAAkB,GAAG;IAClC,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,CAAC;AA2CN,iBAAS,cAAc;WAkET,OAAO,IAA6B;;yBAVpB,GAAG;;;;EAehC;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;UApIR,OAAO,GAAG,QAAQ,GAAG,OAAO;WAD3B,cAAc,CAAC,OAAO,CAAC;iBADjB,cAAc,CAAC,OAAO,CAAC;6EA+IzC,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}