@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,25 +0,0 @@
1
- import { HTMLAttributes } from 'vue';
2
- type __VLS_Props = {
3
- class?: HTMLAttributes['class'];
4
- divider?: boolean;
5
- };
6
- declare function __VLS_template(): {
7
- attrs: Partial<{}>;
8
- slots: {
9
- default?(_: {}): any;
10
- };
11
- refs: {};
12
- rootEl: HTMLElement;
13
- };
14
- type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
15
- declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
16
- divider: boolean;
17
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
18
- declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
19
- export default _default;
20
- type __VLS_WithTemplateSlots<T, S> = T & {
21
- new (): {
22
- $slots: S;
23
- };
24
- };
25
- //# sourceMappingURL=DialogFooter.vue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DialogFooter.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dialog/DialogFooter.vue"],"names":[],"mappings":"AAgDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,KAAK,WAAW,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAa1E,iBAAS,cAAc;WAgCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aA7D2C,OAAO;qFAqErE,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,29 +0,0 @@
1
- import { HTMLAttributes } from 'vue';
2
- type __VLS_Props = {
3
- class?: HTMLAttributes['class'];
4
- divider?: boolean;
5
- type?: 'default' | 'success' | 'warning' | 'attention';
6
- closeButton?: boolean;
7
- };
8
- declare function __VLS_template(): {
9
- attrs: Partial<{}>;
10
- slots: {
11
- default?(_: {}): any;
12
- };
13
- refs: {};
14
- rootEl: HTMLElement;
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, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
18
- type: "default" | "success" | "warning" | "attention";
19
- divider: boolean;
20
- closeButton: boolean;
21
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
22
- declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
23
- export default _default;
24
- type __VLS_WithTemplateSlots<T, S> = T & {
25
- new (): {
26
- $slots: S;
27
- };
28
- };
29
- //# sourceMappingURL=DialogHeader.vue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DialogHeader.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dialog/DialogHeader.vue"],"names":[],"mappings":"AAiFA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1C,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAC;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAwBJ,iBAAS,cAAc;WA0ET,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;UAxHV,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW;aAD5C,OAAO;iBAEH,OAAO;qFA+HvB,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,23 +0,0 @@
1
- import { DialogTitleProps } from 'reka-ui';
2
- import { HTMLAttributes } from 'vue';
3
- type __VLS_Props = DialogTitleProps & {
4
- class?: HTMLAttributes['class'];
5
- };
6
- declare function __VLS_template(): {
7
- attrs: Partial<{}>;
8
- slots: {
9
- default?(_: {}): any;
10
- };
11
- refs: {};
12
- rootEl: any;
13
- };
14
- type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
15
- declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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=DialogTitle.vue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DialogTitle.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dialog/DialogTitle.vue"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,KAAK,WAAW,GAAG,gBAAgB,GAAG;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC;AAW1E,iBAAS,cAAc;WAqCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAWD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAOnB,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 { DialogTriggerProps } 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<DialogTriggerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DialogTriggerProps> & 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=DialogTrigger.vue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DialogTrigger.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dialog/DialogTrigger.vue"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAQlD,iBAAS,cAAc;WAgCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,gTAOnB,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,8 +0,0 @@
1
- export { default as Dialog } from './Dialog.vue';
2
- export { default as DialogClose } from './DialogClose.vue';
3
- export { default as DialogContent } from './DialogContent.vue';
4
- export { default as DialogFooter } from './DialogFooter.vue';
5
- export { default as DialogHeader } from './DialogHeader.vue';
6
- export { default as DialogTitle } from './DialogTitle.vue';
7
- export { default as DialogTrigger } from './DialogTrigger.vue';
8
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
@@ -1,152 +0,0 @@
1
- # 🚀 Guia de Migração: Alert → Toast
2
-
3
- ## 📦 Importação
4
-
5
- **ANTES:**
6
-
7
- ```javascript
8
- import Unnnic from '@weni/unnnic-system';
9
-
10
- Unnnic.unnnicCallAlert(...);
11
- ```
12
-
13
- **DEPOIS:**
14
-
15
- ```javascript
16
- import { toast } from "@weni/unnnic-system";
17
- ```
18
-
19
- ---
20
-
21
- ## 📋 Mapeamento de Propriedades
22
-
23
- | Alert | Toast | Alteração |
24
- | ------------------- | ------------------- | ------------------------------- |
25
- | `text` | `title` | Propriedade renomeada |
26
- | `seconds` | `timeout` | Agora em **milissegundos (ms)** |
27
- | `type: 'success'` | `toast.success()` | Substituído por método direto |
28
- | `type: 'error'` | `toast.error()` | Substituído por método direto |
29
- | `type: 'attention'` | `toast.attention()` | Substituído por método direto |
30
- | `type: 'default'` | `toast.info()` | Substituído por método direto |
31
-
32
- ---
33
-
34
- ## 🔄 Exemplos de Uso
35
-
36
- ### Exemplo 1 – Uso com Função
37
-
38
- **ANTES:**
39
-
40
- ```javascript
41
- // callAlert
42
- alert.callAlert({
43
- props: {
44
- text: "Dados salvos com sucesso!",
45
- type: "success",
46
- },
47
- seconds: 3,
48
- });
49
- ```
50
-
51
- **DEPOIS:**
52
-
53
- ```javascript
54
- // toast
55
- toast.success("Dados salvos com sucesso!");
56
- ```
57
-
58
- ---
59
-
60
- ### Exemplo 2 – Uso com Componente
61
-
62
- **ANTES:**
63
-
64
- ```vue
65
- <!-- UnnnicAlert -->
66
- <UnnnicAlert
67
- text="Dados salvos com sucesso!"
68
- type="success"
69
- @close="handleClose"
70
- />
71
- ```
72
-
73
- **DEPOIS:**
74
-
75
- ```vue
76
- <!-- UnnnicToast -->
77
- <UnnnicToast
78
- title="Dados salvos com sucesso!"
79
- type="success"
80
- @close="handleClose"
81
- />
82
- ```
83
-
84
- ---
85
-
86
- ## 📚 Casos Comuns
87
-
88
- ### ✅ Sucesso
89
-
90
- **ANTES:**
91
-
92
- ```javascript
93
- alert.callAlert({
94
- props: {
95
- text: "Dados salvos com sucesso!",
96
- type: "success",
97
- },
98
- seconds: 5,
99
- });
100
- ```
101
-
102
- **DEPOIS:**
103
-
104
- ```javascript
105
- toast.success("Dados salvos com sucesso!");
106
- ```
107
-
108
- ---
109
-
110
- ### ❌ Erro
111
-
112
- **ANTES:**
113
-
114
- ```javascript
115
- alert.callAlert({
116
- props: {
117
- text: "Erro ao salvar dados",
118
- type: "error",
119
- },
120
- seconds: 5,
121
- });
122
- ```
123
-
124
- **DEPOIS:**
125
-
126
- ```javascript
127
- toast.error("Erro ao salvar dados");
128
- ```
129
-
130
- ---
131
-
132
- ### ⏱ Timeout Personalizado
133
-
134
- **ANTES:**
135
-
136
- ```javascript
137
- alert.callAlert({
138
- props: {
139
- text: "Mensagem importante",
140
- type: "success",
141
- },
142
- seconds: 10, // 10 segundos
143
- });
144
- ```
145
-
146
- **DEPOIS:**
147
-
148
- ```javascript
149
- toast.success("Mensagem importante", "", {
150
- timeout: 10000, // 10 segundos em ms
151
- });
152
- ```
@@ -1,154 +0,0 @@
1
- <template>
2
- <header
3
- :class="`page-header
4
- ${hasBackButton ? 'page-header--has-back-button' : ''}
5
- ${hasTabsSlot ? 'page-header--has-tabs' : ''}
6
- `"
7
- >
8
- <UnnnicButton
9
- v-if="hasBackButton"
10
- data-testid="back-button"
11
- type="tertiary"
12
- iconCenter="arrow_back_ios_new"
13
- class="page-header__back-button"
14
- @click="handleBackClick"
15
- />
16
-
17
- <section class="page-header__infos">
18
- <section class="page-header__main-infos">
19
- <h1
20
- class="page-header__title"
21
- data-testid="page-title"
22
- >
23
- {{ title }}
24
- </h1>
25
-
26
- <slot name="tag" />
27
- </section>
28
-
29
- <p
30
- v-if="description"
31
- class="page-header__description"
32
- data-testid="page-description"
33
- >
34
- {{ description }}
35
- </p>
36
- </section>
37
-
38
- <section
39
- v-if="hasActionsSlot"
40
- class="page-header__actions"
41
- data-testid="page-actions"
42
- >
43
- <slot name="actions" />
44
- </section>
45
-
46
- <section
47
- v-if="hasTabsSlot"
48
- class="page-header__tabs"
49
- data-testid="page-tabs"
50
- >
51
- <slot name="tabs" />
52
- </section>
53
- </header>
54
- </template>
55
-
56
- <script setup lang="ts">
57
- import { useSlots } from 'vue';
58
-
59
- import UnnnicButton from '../Button/Button.vue';
60
-
61
- import type { PageHeaderProps, PageHeaderEmits } from './types';
62
-
63
- withDefaults(defineProps<PageHeaderProps>(), {
64
- description: '',
65
- hasBackButton: false,
66
- });
67
-
68
- const emit = defineEmits<PageHeaderEmits>();
69
-
70
- const slots = useSlots();
71
- const hasActionsSlot = !!slots.actions;
72
- const hasTabsSlot = !!slots.tabs;
73
-
74
- const handleBackClick = (): void => {
75
- emit('back');
76
- };
77
- </script>
78
-
79
- <style lang="scss" scoped>
80
- @use '@/assets/scss/unnnic' as *;
81
-
82
- * {
83
- margin: 0;
84
- padding: 0;
85
- box-sizing: border-box;
86
- }
87
-
88
- .page-header {
89
- width: 100%;
90
-
91
- margin-top: $unnnic-space-2;
92
- padding-bottom: $unnnic-space-6;
93
-
94
- display: grid;
95
- gap: $unnnic-space-4;
96
- grid-template-columns: 1fr minmax(250px, 20%); // TODO: Verify if is 250px or 20% (8fr 2fr)
97
- align-items: center;
98
-
99
- border-bottom: 1px solid $unnnic-color-border-soft;
100
-
101
- &--has-back-button {
102
- grid-template-columns: auto 1fr minmax(250px, 20%);
103
- }
104
-
105
- &--has-tabs {
106
- border-bottom: none;
107
- }
108
-
109
- &__infos {
110
- display: flex;
111
- flex-direction: column;
112
- gap: $unnnic-space-2;
113
- }
114
-
115
- &__main-infos {
116
- display: flex;
117
- align-items: center;
118
- gap: $unnnic-space-2;
119
- }
120
-
121
- &__title {
122
- overflow: hidden;
123
- text-overflow: ellipsis;
124
- white-space: nowrap;
125
-
126
- color: $unnnic-color-fg-emphasized;
127
- text-overflow: ellipsis;
128
-
129
- font: $unnnic-font-display-1;
130
- }
131
-
132
- &__description {
133
- color: $unnnic-color-fg-base;
134
-
135
- font: $unnnic-font-body;
136
- }
137
-
138
- &__actions {
139
- display: flex;
140
- gap: $unnnic-space-2;
141
- align-items: center;
142
- justify-content: flex-end;
143
-
144
- > * {
145
- width: 100%;
146
- }
147
- }
148
-
149
- &__tabs {
150
- grid-column: 1 / -1;
151
- grid-row: 2 / 3;
152
- }
153
- }
154
- </style>
@@ -1,2 +0,0 @@
1
- export { default } from './PageHeader.vue';
2
- export { default as PageHeader } from './PageHeader.vue';
@@ -1,10 +0,0 @@
1
- export interface PageHeaderProps {
2
- title: string;
3
- description?: string;
4
-
5
- hasBackButton?: boolean;
6
- }
7
-
8
- export interface PageHeaderEmits {
9
- (event: 'back'): void;
10
- }
@@ -1,147 +0,0 @@
1
- import { mount } from '@vue/test-utils';
2
- import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
3
- import UnnnicPopover from '@/components/Popover/index.vue';
4
-
5
- vi.mock('@vueuse/core', () => ({
6
- onClickOutside: vi.fn(),
7
- useResizeObserver: vi.fn(),
8
- }));
9
-
10
- describe('UnnnicPopover.vue', () => {
11
- let wrapper;
12
-
13
- const defaultSlots = {
14
- trigger: '<button data-testid="trigger-button">Click me</button>',
15
- content: '<div data-testid="popover-content">Popover content</div>',
16
- };
17
-
18
- const mountWrapper = (props) => {
19
- return mount(UnnnicPopover, {
20
- slots: defaultSlots,
21
- props: {
22
- ...props,
23
- },
24
- });
25
- };
26
-
27
- beforeEach(() => {
28
- wrapper = mountWrapper();
29
- });
30
-
31
- afterEach(() => {
32
- wrapper?.unmount();
33
- });
34
-
35
- test('renders correctly', () => {
36
- expect(wrapper.exists()).toBe(true);
37
- expect(wrapper.find('.unnnic-popover').exists()).toBe(true);
38
- });
39
-
40
- test('renders trigger slot', () => {
41
- const trigger = wrapper.find('[data-testid="popover-trigger"]');
42
- const triggerButton = wrapper.find('[data-testid="trigger-button"]');
43
-
44
- expect(trigger.exists()).toBe(true);
45
- expect(triggerButton.exists()).toBe(true);
46
- expect(triggerButton.text()).toBe('Click me');
47
- });
48
-
49
- test('renders content slot inside balloon', async () => {
50
- wrapper.vm.open = true;
51
- await wrapper.vm.$nextTick();
52
- const balloon = wrapper.find('[data-testid="popover-balloon"]');
53
- const content = wrapper.find('[data-testid="popover-content"]');
54
-
55
- expect(balloon.exists()).toBe(true);
56
- expect(content.exists()).toBe(true);
57
- expect(content.text()).toBe('Popover content');
58
- });
59
-
60
- test('balloon is hidden by default', () => {
61
- const balloon = wrapper.find('[data-testid="popover-balloon"]');
62
- expect(balloon.exists()).toBe(false);
63
- });
64
-
65
- test('toggles balloon visibility when trigger is clicked', async () => {
66
- const trigger = wrapper.find('[data-testid="popover-trigger"]');
67
-
68
- let balloon = wrapper.find('[data-testid="popover-balloon"]');
69
-
70
- expect(balloon.exists()).toBe(false);
71
-
72
- await trigger.trigger('click');
73
- await wrapper.vm.$nextTick();
74
-
75
- balloon = wrapper.find('[data-testid="popover-balloon"]');
76
-
77
- expect(balloon.exists()).toBe(true);
78
- });
79
-
80
- test('uses modelValue when provided', async () => {
81
- const wrapper = mountWrapper({ modelValue: true });
82
- const balloon = wrapper.find('[data-testid="popover-balloon"]');
83
- expect(balloon.isVisible()).toBe(true);
84
- });
85
-
86
- test('emits update:modelValue when open state changes', async () => {
87
- await wrapper.setProps({ modelValue: false });
88
-
89
- const trigger = wrapper.find('[data-testid="popover-trigger"]');
90
- await trigger.trigger('click');
91
-
92
- expect(wrapper.emitted('update:modelValue')).toBeTruthy();
93
- expect(wrapper.emitted('update:modelValue')[0]).toEqual([true]);
94
- });
95
-
96
- test('does not emit update:modelValue when modelValue is undefined', async () => {
97
- const trigger = wrapper.find('[data-testid="popover-trigger"]');
98
- await trigger.trigger('click');
99
-
100
- expect(wrapper.emitted('update:modelValue')).toBeFalsy();
101
- });
102
-
103
- test('exposes open ref', () => {
104
- expect(wrapper.vm.open).toBeDefined();
105
- expect(typeof wrapper.vm.open).toBe('boolean');
106
- });
107
-
108
- test('open ref can be controlled programmatically', async () => {
109
- wrapper.vm.open = true;
110
- await wrapper.vm.$nextTick();
111
-
112
- const balloon = wrapper.find('[data-testid="popover-balloon"]');
113
- expect(balloon.isVisible()).toBe(true);
114
- });
115
-
116
- test('persistent prop prevents closing on outside click', async () => {
117
- await wrapper.setProps({ persistent: true });
118
-
119
- const { onClickOutside } = await import('@vueuse/core');
120
- const mockOnClickOutside = vi.mocked(onClickOutside);
121
-
122
- const callback = mockOnClickOutside.mock.calls[0][1];
123
-
124
- wrapper.vm.open = true;
125
- await wrapper.vm.$nextTick();
126
-
127
- callback();
128
-
129
- const balloon = wrapper.find('[data-testid="popover-balloon"]');
130
- expect(balloon.isVisible()).toBe(true);
131
- });
132
-
133
- test('applies correct CSS classes', async () => {
134
- wrapper.vm.open = true;
135
- await wrapper.vm.$nextTick();
136
-
137
- const popover = wrapper.find('.unnnic-popover');
138
- const balloon = wrapper.find('.unnnic-popover__balloon');
139
-
140
- expect(popover.exists()).toBe(true);
141
- expect(balloon.exists()).toBe(true);
142
- });
143
-
144
- test('matches the snapshot', () => {
145
- expect(wrapper.html()).toMatchSnapshot();
146
- });
147
- });
@@ -1,8 +0,0 @@
1
- // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
-
3
- exports[`UnnnicPopover.vue > matches the snapshot 1`] = `
4
- "<section data-v-5a3125ac="" class="unnnic-popover">
5
- <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger"><button data-testid="trigger-button">Click me</button></div>
6
- <!--v-if-->
7
- </section>"
8
- `;