@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.
- package/CHANGELOG.md +1 -1
- package/dist/components/Button/Button.vue.d.ts.map +1 -1
- package/dist/components/DateFilter/DateFilter.vue.d.ts +3 -82
- package/dist/components/Input/BaseInput.vue.d.ts +0 -22
- package/dist/components/Input/BaseInput.vue.d.ts.map +1 -1
- package/dist/components/Input/Input.vue.d.ts +3 -82
- package/dist/components/Input/Input.vue.d.ts.map +1 -1
- package/dist/components/Input/TextInput.vue.d.ts +2 -53
- package/dist/components/Input/TextInput.vue.d.ts.map +1 -1
- package/dist/components/InputDatePicker/InputDatePicker.vue.d.ts +4 -83
- package/dist/components/InputNext/InputNext.vue.d.ts +1 -1
- package/dist/components/ModalDialog/ModalDialog.vue.d.ts +29 -203
- package/dist/components/ModalDialog/ModalDialog.vue.d.ts.map +1 -1
- package/dist/components/ModalNext/ModalNext.vue.d.ts +3 -82
- package/dist/components/SelectSmart/SelectSmart.vue.d.ts +2 -53
- package/dist/components/SelectTime/index.vue.d.ts +2 -53
- package/dist/components/Tag/DefaultTag.vue.d.ts.map +1 -1
- package/dist/components/index.d.ts +236 -1764
- package/dist/components/index.d.ts.map +1 -1
- package/dist/{es-de156c12.mjs → es-d456f02a.mjs} +1 -1
- package/dist/{index-21cbba5d.mjs → index-120e037a.mjs} +11437 -12248
- package/dist/locales/en.json.d.ts +1 -2
- package/dist/locales/es.json.d.ts +1 -2
- package/dist/locales/pt_br.json.d.ts +1 -2
- package/dist/{pt-br-5fa49a3e.mjs → pt-br-b627c074.mjs} +1 -1
- package/dist/style.css +1 -1
- package/dist/unnnic.mjs +179 -195
- package/dist/unnnic.umd.js +34 -41
- package/package.json +1 -1
- package/src/assets/scss/tailwind.scss +0 -8
- package/src/components/Alert/__tests__/__snapshots__/Version1dot1.spec.js.snap +1 -1
- package/src/components/Button/Button.vue +0 -1
- package/src/components/Input/BaseInput.vue +2 -21
- package/src/components/Input/Input.scss +3 -3
- package/src/components/Input/Input.vue +1 -19
- package/src/components/Input/TextInput.vue +21 -62
- package/src/components/ModalDialog/ModalDialog.vue +148 -62
- package/src/components/ModalDialog/__tests__/ModalDialog.spec.js +221 -11
- package/src/components/ModalDialog/__tests__/__snapshots__/ModalDialog.spec.js.snap +22 -1
- package/src/components/Radio/__test__/__snapshots__/Radio.spec.js.snap +1 -0
- package/src/components/Tag/DefaultTag.vue +0 -5
- package/src/components/index.ts +23 -55
- package/src/locales/en.json +1 -2
- package/src/locales/es.json +1 -2
- package/src/locales/pt_br.json +1 -2
- package/src/stories/ModalDialog.mdx +0 -3
- package/src/stories/ModalDialog.stories.js +1 -1
- package/dist/components/PageHeader/PageHeader.vue.d.ts +0 -28
- package/dist/components/PageHeader/PageHeader.vue.d.ts.map +0 -1
- package/dist/components/PageHeader/index.d.ts +0 -3
- package/dist/components/PageHeader/index.d.ts.map +0 -1
- package/dist/components/PageHeader/types.d.ts +0 -9
- package/dist/components/PageHeader/types.d.ts.map +0 -1
- package/dist/components/ui/dialog/Dialog.vue.d.ts +0 -23
- package/dist/components/ui/dialog/Dialog.vue.d.ts.map +0 -1
- package/dist/components/ui/dialog/DialogClose.vue.d.ts +0 -19
- package/dist/components/ui/dialog/DialogClose.vue.d.ts.map +0 -1
- package/dist/components/ui/dialog/DialogContent.vue.d.ts +0 -43
- package/dist/components/ui/dialog/DialogContent.vue.d.ts.map +0 -1
- package/dist/components/ui/dialog/DialogFooter.vue.d.ts +0 -25
- package/dist/components/ui/dialog/DialogFooter.vue.d.ts.map +0 -1
- package/dist/components/ui/dialog/DialogHeader.vue.d.ts +0 -29
- package/dist/components/ui/dialog/DialogHeader.vue.d.ts.map +0 -1
- package/dist/components/ui/dialog/DialogTitle.vue.d.ts +0 -23
- package/dist/components/ui/dialog/DialogTitle.vue.d.ts.map +0 -1
- package/dist/components/ui/dialog/DialogTrigger.vue.d.ts +0 -19
- package/dist/components/ui/dialog/DialogTrigger.vue.d.ts.map +0 -1
- package/dist/components/ui/dialog/index.d.ts +0 -8
- package/dist/components/ui/dialog/index.d.ts.map +0 -1
- package/src/components/Alert/SIMPLE_MIGRATION_GUIDE.md +0 -152
- package/src/components/PageHeader/PageHeader.vue +0 -154
- package/src/components/PageHeader/index.ts +0 -2
- package/src/components/PageHeader/types.ts +0 -10
- package/src/components/Popover/__tests__/Popover.spec.js +0 -147
- package/src/components/Popover/__tests__/__snapshots__/Popover.spec.js.snap +0 -8
- package/src/components/Popover/index.vue +0 -146
- package/src/components/Select/SelectOption.vue +0 -65
- package/src/components/Select/__tests__/Select.spec.js +0 -412
- package/src/components/Select/__tests__/SelectItem.spec.js +0 -330
- package/src/components/Select/__tests__/SelectOption.spec.js +0 -174
- package/src/components/Select/__tests__/__snapshots__/Select.spec.js.snap +0 -97
- package/src/components/Select/__tests__/__snapshots__/SelectItem.spec.js.snap +0 -15
- package/src/components/Select/__tests__/__snapshots__/SelectOption.spec.js.snap +0 -25
- package/src/components/Select/index.vue +0 -245
- package/src/components/ui/dialog/Dialog.vue +0 -15
- package/src/components/ui/dialog/DialogClose.vue +0 -25
- package/src/components/ui/dialog/DialogContent.vue +0 -133
- package/src/components/ui/dialog/DialogFooter.vue +0 -46
- package/src/components/ui/dialog/DialogHeader.vue +0 -79
- package/src/components/ui/dialog/DialogTitle.vue +0 -34
- package/src/components/ui/dialog/DialogTrigger.vue +0 -12
- package/src/components/ui/dialog/index.ts +0 -7
- package/src/stories/Dialog.stories.js +0 -832
- package/src/stories/PageHeader.stories.js +0 -330
- 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,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
|
-
`;
|