@weni/unnnic-system 3.2.9-alpha.12 → 3.2.9-alpha.13
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/dist/components/Button/Button.vue.d.ts.map +1 -1
- package/dist/components/ChartFunnel/DefaultFunnel/ChartDefaultFunnelBase.vue.d.ts.map +1 -1
- package/dist/components/Input/TextInput.vue.d.ts.map +1 -1
- package/dist/components/ModalDialog/ModalDialog.vue.d.ts +1 -1
- package/dist/components/ModalDialog/ModalDialog.vue.d.ts.map +1 -1
- package/dist/components/TemplatePreview/TemplatePreview.vue.d.ts.map +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/{es-66126ef1.mjs → es-5aa232c1.mjs} +1 -1
- package/dist/{index-f6e9b879.mjs → index-69d07468.mjs} +353 -352
- package/dist/{pt-br-3b5a8852.mjs → pt-br-5f8a4e67.mjs} +1 -1
- package/dist/style.css +1 -1
- package/dist/unnnic.mjs +1 -1
- package/dist/unnnic.umd.js +7 -7
- package/package.json +2 -2
- package/src/components/Button/Button.vue +7 -4
- package/src/components/ChartFunnel/DefaultFunnel/ChartDefaultFunnelBase.vue +1 -2
- package/src/components/ChartFunnel/SvgFunnel/ChartFunnelTwoRows.vue +60 -61
- package/src/components/Chip/Chip.vue +1 -1
- package/src/components/Input/BaseInput.vue +4 -4
- package/src/components/Input/Input.vue +1 -1
- package/src/components/Input/TextInput.vue +2 -3
- package/src/components/ModalDialog/ModalDialog.vue +29 -26
- package/src/components/Popover/__tests__/Popover.spec.js +18 -18
- package/src/components/Popover/index.vue +93 -78
- package/src/components/Select/SelectOption.vue +43 -37
- package/src/components/Select/__tests__/Select.spec.js +41 -36
- package/src/components/Select/__tests__/SelectItem.spec.js +35 -15
- package/src/components/Select/__tests__/SelectOption.spec.js +6 -3
- package/src/components/Select/index.vue +192 -142
- package/src/components/TemplatePreview/TemplatePreview.vue +30 -27
- package/src/components/TemplatePreview/TemplatePreviewModal.vue +11 -11
- package/src/components/TemplatePreview/types.d.ts +3 -3
- package/src/stories/Button.stories.js +1 -7
- package/src/stories/Input.stories.js +4 -4
- package/src/stories/Popover.stories.js +9 -9
- package/src/stories/Select.stories.js +39 -39
- package/src/stories/TemplatePreview.stories.js +27 -27
- package/src/stories/TemplatePreviewModal.stories.js +31 -31
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import UnnnicSelect from '../components/Select/index.vue';
|
|
2
2
|
|
|
3
3
|
const options = [
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
]
|
|
4
|
+
{ label: 'Option 1', value: 'option1', altValue: 'alt_value_option1' },
|
|
5
|
+
{ label: 'Option 2', value: 'option2', altValue: 'alt_value_option2' },
|
|
6
|
+
{ label: 'Option 3', value: 'option3', altValue: 'alt_value_option3' },
|
|
7
|
+
{ label: 'Option 4', value: 'option4', altValue: 'alt_value_option4' },
|
|
8
|
+
{ label: 'Option 5', value: 'option5', altValue: 'alt_value_option5' },
|
|
9
|
+
{ label: 'Option 6', value: 'option6', altValue: 'alt_value_option6' },
|
|
10
|
+
{ label: 'Option 7', value: 'option7', altValue: 'alt_value_option7' },
|
|
11
|
+
{ label: 'Option 8', value: 'option8', altValue: 'alt_value_option8' },
|
|
12
|
+
{ label: 'Option 9', value: 'option9', altValue: 'alt_value_option9' },
|
|
13
|
+
{ label: 'Option 10', value: 'option10', disabled: true },
|
|
14
|
+
];
|
|
15
15
|
|
|
16
16
|
export default {
|
|
17
17
|
title: 'Form/Select',
|
|
@@ -20,15 +20,15 @@ export default {
|
|
|
20
20
|
components: { UnnnicSelect },
|
|
21
21
|
setup() {
|
|
22
22
|
const handleSearch = (value) => {
|
|
23
|
-
args.search = value
|
|
24
|
-
}
|
|
23
|
+
args.search = value;
|
|
24
|
+
};
|
|
25
25
|
return { args, handleSearch };
|
|
26
26
|
},
|
|
27
27
|
data() {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
return {
|
|
29
|
+
exampleValue: null,
|
|
30
|
+
};
|
|
31
|
+
},
|
|
32
32
|
template: `
|
|
33
33
|
<p>modelValue: {{ exampleValue }}</p>
|
|
34
34
|
<unnnic-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
|
|
@@ -38,54 +38,54 @@ export default {
|
|
|
38
38
|
|
|
39
39
|
export const Default = {
|
|
40
40
|
args: {
|
|
41
|
-
placeholder:
|
|
42
|
-
label:
|
|
41
|
+
placeholder: 'Placeholder',
|
|
42
|
+
label: 'Label',
|
|
43
43
|
options,
|
|
44
|
-
}
|
|
44
|
+
},
|
|
45
45
|
};
|
|
46
46
|
|
|
47
47
|
export const ReturnObject = {
|
|
48
48
|
args: {
|
|
49
49
|
returnObject: true,
|
|
50
|
-
placeholder:
|
|
51
|
-
label:
|
|
50
|
+
placeholder: 'Placeholder',
|
|
51
|
+
label: 'Label',
|
|
52
52
|
options,
|
|
53
|
-
}
|
|
53
|
+
},
|
|
54
54
|
};
|
|
55
55
|
|
|
56
56
|
export const AlternativeValueKey = {
|
|
57
57
|
args: {
|
|
58
|
-
itemValue:
|
|
59
|
-
placeholder:
|
|
60
|
-
label:
|
|
58
|
+
itemValue: 'altValue',
|
|
59
|
+
placeholder: 'Placeholder',
|
|
60
|
+
label: 'Label',
|
|
61
61
|
options,
|
|
62
|
-
}
|
|
62
|
+
},
|
|
63
63
|
};
|
|
64
64
|
|
|
65
65
|
export const AlternativeValueLabel = {
|
|
66
66
|
args: {
|
|
67
|
-
itemLabel:
|
|
68
|
-
placeholder:
|
|
69
|
-
label:
|
|
67
|
+
itemLabel: 'altValue',
|
|
68
|
+
placeholder: 'Placeholder',
|
|
69
|
+
label: 'Label',
|
|
70
70
|
options,
|
|
71
|
-
}
|
|
71
|
+
},
|
|
72
72
|
};
|
|
73
73
|
|
|
74
74
|
export const Disabled = {
|
|
75
75
|
args: {
|
|
76
|
-
placeholder:
|
|
77
|
-
label:
|
|
76
|
+
placeholder: 'Placeholder',
|
|
77
|
+
label: 'Label',
|
|
78
78
|
options,
|
|
79
79
|
disabled: true,
|
|
80
|
-
}
|
|
80
|
+
},
|
|
81
81
|
};
|
|
82
82
|
|
|
83
83
|
export const WithSearch = {
|
|
84
84
|
args: {
|
|
85
|
-
placeholder:
|
|
86
|
-
label:
|
|
85
|
+
placeholder: 'Placeholder',
|
|
86
|
+
label: 'Label',
|
|
87
87
|
options,
|
|
88
88
|
enableSearch: true,
|
|
89
|
-
search:
|
|
90
|
-
}
|
|
91
|
-
}
|
|
89
|
+
search: '',
|
|
90
|
+
},
|
|
91
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import UnnnicTemplatePreview from
|
|
1
|
+
import UnnnicTemplatePreview from '../components/TemplatePreview/TemplatePreview.vue';
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title:
|
|
5
|
-
tags: [
|
|
4
|
+
title: 'example/TemplatePreview',
|
|
5
|
+
tags: ['autodocs'],
|
|
6
6
|
component: UnnnicTemplatePreview,
|
|
7
7
|
};
|
|
8
8
|
|
|
@@ -17,28 +17,28 @@ const Template = (args) => ({
|
|
|
17
17
|
});
|
|
18
18
|
|
|
19
19
|
const bodyText =
|
|
20
|
-
|
|
20
|
+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.';
|
|
21
21
|
|
|
22
22
|
export const Default = Template.bind({});
|
|
23
23
|
Default.args = {
|
|
24
24
|
template: {
|
|
25
25
|
header: {
|
|
26
|
-
type:
|
|
27
|
-
text:
|
|
26
|
+
type: 'TEXT',
|
|
27
|
+
text: 'Hello, world!',
|
|
28
28
|
},
|
|
29
|
-
footer:
|
|
29
|
+
footer: 'Weni by VTEX',
|
|
30
30
|
buttons: [
|
|
31
31
|
{
|
|
32
|
-
text:
|
|
33
|
-
type:
|
|
32
|
+
text: 'Button 1',
|
|
33
|
+
type: 'PHONE_NUMBER',
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
|
-
text:
|
|
37
|
-
type:
|
|
36
|
+
text: 'Button 2',
|
|
37
|
+
type: 'URL',
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
|
-
text:
|
|
41
|
-
type:
|
|
40
|
+
text: 'Button 3',
|
|
41
|
+
type: 'QUICK_REPLY',
|
|
42
42
|
},
|
|
43
43
|
],
|
|
44
44
|
body: bodyText,
|
|
@@ -49,10 +49,10 @@ export const Image = Template.bind({});
|
|
|
49
49
|
Image.args = {
|
|
50
50
|
template: {
|
|
51
51
|
header: {
|
|
52
|
-
type:
|
|
53
|
-
mediaType:
|
|
52
|
+
type: 'MEDIA',
|
|
53
|
+
mediaType: 'IMAGE',
|
|
54
54
|
},
|
|
55
|
-
footer:
|
|
55
|
+
footer: 'Weni by VTEX',
|
|
56
56
|
body: bodyText,
|
|
57
57
|
},
|
|
58
58
|
};
|
|
@@ -61,21 +61,21 @@ export const Video = Template.bind({});
|
|
|
61
61
|
Video.args = {
|
|
62
62
|
template: {
|
|
63
63
|
header: {
|
|
64
|
-
type:
|
|
65
|
-
mediaType:
|
|
64
|
+
type: 'MEDIA',
|
|
65
|
+
mediaType: 'VIDEO',
|
|
66
66
|
},
|
|
67
67
|
buttons: [
|
|
68
68
|
{
|
|
69
|
-
text:
|
|
70
|
-
type:
|
|
69
|
+
text: 'Button 1',
|
|
70
|
+
type: 'PHONE_NUMBER',
|
|
71
71
|
},
|
|
72
72
|
{
|
|
73
|
-
text:
|
|
74
|
-
type:
|
|
73
|
+
text: 'Button 2',
|
|
74
|
+
type: 'URL',
|
|
75
75
|
},
|
|
76
76
|
{
|
|
77
|
-
text:
|
|
78
|
-
type:
|
|
77
|
+
text: 'Button 3',
|
|
78
|
+
type: 'QUICK_REPLY',
|
|
79
79
|
},
|
|
80
80
|
],
|
|
81
81
|
},
|
|
@@ -85,10 +85,10 @@ export const Document = Template.bind({});
|
|
|
85
85
|
Document.args = {
|
|
86
86
|
template: {
|
|
87
87
|
header: {
|
|
88
|
-
type:
|
|
89
|
-
mediaType:
|
|
88
|
+
type: 'MEDIA',
|
|
89
|
+
mediaType: 'DOCUMENT',
|
|
90
90
|
},
|
|
91
|
-
footer:
|
|
91
|
+
footer: 'Weni by VTEX',
|
|
92
92
|
body: bodyText,
|
|
93
93
|
},
|
|
94
94
|
};
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import UnnnicTemplatePreviewModal from
|
|
1
|
+
import UnnnicTemplatePreviewModal from '../components/TemplatePreview/TemplatePreviewModal.vue';
|
|
2
2
|
|
|
3
|
-
import { action } from
|
|
3
|
+
import { action } from '@storybook/addon-actions';
|
|
4
4
|
|
|
5
5
|
export default {
|
|
6
|
-
title:
|
|
7
|
-
tags: [
|
|
6
|
+
title: 'example/TemplatePreviewModal',
|
|
7
|
+
tags: ['autodocs'],
|
|
8
8
|
component: UnnnicTemplatePreviewModal,
|
|
9
9
|
argTypes: {
|
|
10
10
|
locale: {
|
|
11
|
-
control: { type:
|
|
12
|
-
options: [
|
|
11
|
+
control: { type: 'select' },
|
|
12
|
+
options: ['pt-br', 'en', 'es'],
|
|
13
13
|
},
|
|
14
14
|
},
|
|
15
15
|
};
|
|
@@ -18,7 +18,7 @@ const Template = (args) => ({
|
|
|
18
18
|
components: { UnnnicTemplatePreviewModal },
|
|
19
19
|
setup() {
|
|
20
20
|
const close = () => {
|
|
21
|
-
action(
|
|
21
|
+
action('close')();
|
|
22
22
|
args.modelValue = false;
|
|
23
23
|
};
|
|
24
24
|
return { args, close };
|
|
@@ -32,29 +32,29 @@ const Template = (args) => ({
|
|
|
32
32
|
});
|
|
33
33
|
|
|
34
34
|
const bodyText =
|
|
35
|
-
|
|
35
|
+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.';
|
|
36
36
|
|
|
37
37
|
export const Default = Template.bind({});
|
|
38
38
|
Default.args = {
|
|
39
39
|
modelValue: false,
|
|
40
40
|
template: {
|
|
41
41
|
header: {
|
|
42
|
-
type:
|
|
43
|
-
text:
|
|
42
|
+
type: 'TEXT',
|
|
43
|
+
text: 'Hello, world!',
|
|
44
44
|
},
|
|
45
|
-
footer:
|
|
45
|
+
footer: 'Weni by VTEX',
|
|
46
46
|
buttons: [
|
|
47
47
|
{
|
|
48
|
-
text:
|
|
49
|
-
type:
|
|
48
|
+
text: 'Button 1',
|
|
49
|
+
type: 'PHONE_NUMBER',
|
|
50
50
|
},
|
|
51
51
|
{
|
|
52
|
-
text:
|
|
53
|
-
type:
|
|
52
|
+
text: 'Button 2',
|
|
53
|
+
type: 'URL',
|
|
54
54
|
},
|
|
55
55
|
{
|
|
56
|
-
text:
|
|
57
|
-
type:
|
|
56
|
+
text: 'Button 3',
|
|
57
|
+
type: 'QUICK_REPLY',
|
|
58
58
|
},
|
|
59
59
|
],
|
|
60
60
|
body: bodyText,
|
|
@@ -65,10 +65,10 @@ export const Image = Template.bind({});
|
|
|
65
65
|
Image.args = {
|
|
66
66
|
template: {
|
|
67
67
|
header: {
|
|
68
|
-
type:
|
|
69
|
-
mediaType:
|
|
68
|
+
type: 'MEDIA',
|
|
69
|
+
mediaType: 'IMAGE',
|
|
70
70
|
},
|
|
71
|
-
footer:
|
|
71
|
+
footer: 'Weni by VTEX',
|
|
72
72
|
body: bodyText,
|
|
73
73
|
},
|
|
74
74
|
};
|
|
@@ -77,21 +77,21 @@ export const Video = Template.bind({});
|
|
|
77
77
|
Video.args = {
|
|
78
78
|
template: {
|
|
79
79
|
header: {
|
|
80
|
-
type:
|
|
81
|
-
mediaType:
|
|
80
|
+
type: 'MEDIA',
|
|
81
|
+
mediaType: 'VIDEO',
|
|
82
82
|
},
|
|
83
83
|
buttons: [
|
|
84
84
|
{
|
|
85
|
-
text:
|
|
86
|
-
type:
|
|
85
|
+
text: 'Button 1',
|
|
86
|
+
type: 'PHONE_NUMBER',
|
|
87
87
|
},
|
|
88
88
|
{
|
|
89
|
-
text:
|
|
90
|
-
type:
|
|
89
|
+
text: 'Button 2',
|
|
90
|
+
type: 'URL',
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
|
-
text:
|
|
94
|
-
type:
|
|
93
|
+
text: 'Button 3',
|
|
94
|
+
type: 'QUICK_REPLY',
|
|
95
95
|
},
|
|
96
96
|
],
|
|
97
97
|
},
|
|
@@ -101,10 +101,10 @@ export const Document = Template.bind({});
|
|
|
101
101
|
Document.args = {
|
|
102
102
|
template: {
|
|
103
103
|
header: {
|
|
104
|
-
type:
|
|
105
|
-
mediaType:
|
|
104
|
+
type: 'MEDIA',
|
|
105
|
+
mediaType: 'DOCUMENT',
|
|
106
106
|
},
|
|
107
|
-
footer:
|
|
107
|
+
footer: 'Weni by VTEX',
|
|
108
108
|
body: bodyText,
|
|
109
109
|
},
|
|
110
110
|
};
|