@weni/unnnic-system 1.16.13 → 1.16.15

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 (62) hide show
  1. package/dist/scss/fonts.scss +16 -14
  2. package/dist/scss/spacing.scss +48 -48
  3. package/dist/unnnic.common.js +1439 -1109
  4. package/dist/unnnic.common.js.map +1 -1
  5. package/dist/unnnic.css +1 -1
  6. package/dist/unnnic.umd.js +1439 -1109
  7. package/dist/unnnic.umd.js.map +1 -1
  8. package/dist/unnnic.umd.min.js +68 -68
  9. package/dist/unnnic.umd.min.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/assets/icons/bookmark-tag-1.svg +3 -0
  12. package/src/assets/icons/move-expand-vertical-1.svg +3 -0
  13. package/src/assets/scss/fonts.scss +16 -14
  14. package/src/assets/scss/spacing.scss +48 -48
  15. package/src/components/Alert/Alert.vue +9 -9
  16. package/src/components/Alert/Version1dot1.vue +8 -8
  17. package/src/components/AudioRecorder/AudioHandler.vue +1 -1
  18. package/src/components/AudioRecorder/AudioPlayer.vue +3 -3
  19. package/src/components/AudioRecorder/AudioRecorder.vue +3 -3
  20. package/src/components/AutocompleteSelect/AutocompleteSelect.vue +177 -19
  21. package/src/components/Card/Card.vue +1 -1
  22. package/src/components/Card/CardCompany.vue +2 -2
  23. package/src/components/Card/CardStatusesContainer.vue +4 -3
  24. package/src/components/Card/ContentCard.vue +1 -1
  25. package/src/components/Card/DefaultCard.vue +1 -1
  26. package/src/components/CardFlow/CardFlow.vue +6 -6
  27. package/src/components/CardImage/CardImage.vue +2 -2
  28. package/src/components/CardInformation/CardInformation.vue +8 -1
  29. package/src/components/Carousel/TagCarousel.vue +1 -1
  30. package/src/components/ChartBar/ChartBar.vue +4 -4
  31. package/src/components/ChartLine/ChartLine.vue +1 -1
  32. package/src/components/ChatText/ChatText.vue +5 -5
  33. package/src/components/DatePicker/DatePicker.vue +3 -3
  34. package/src/components/Dropdown/Dropdown.vue +3 -3
  35. package/src/components/Dropdown/LanguageSelect.vue +6 -4
  36. package/src/components/FormElement/FormElement.vue +60 -0
  37. package/src/components/Icon.vue +10 -2
  38. package/src/components/Modal/Modal.vue +3 -3
  39. package/src/components/ModalNext/ModalNext.vue +5 -5
  40. package/src/components/ModalUpload/ModalUpload.vue +7 -1
  41. package/src/components/MoodRating/MoodRating.vue +1 -1
  42. package/src/components/ProgressBar/ProgressBar.vue +5 -5
  43. package/src/components/Select/Select.vue +1 -1
  44. package/src/components/Sidebar/Sidebar.vue +2 -2
  45. package/src/components/Sidebar/SidebarPrimary.vue +7 -7
  46. package/src/components/Slider/Slider.vue +4 -8
  47. package/src/components/Switch/Switch.vue +2 -2
  48. package/src/components/TabsExpanded/TabsExpanded.vue +6 -6
  49. package/src/components/Tag/BrandTag.vue +1 -1
  50. package/src/components/TextArea/TextArea.vue +1 -1
  51. package/src/components/TextEditor/TextEditor.vue +4 -4
  52. package/src/components/ToolTip/ToolTip.vue +1 -1
  53. package/src/components/UploadArea/UploadArea.vue +12 -2
  54. package/src/components/config.js +2 -0
  55. package/src/components/index.js +5 -0
  56. package/src/stories/AutocompleteSelect.stories.js +8 -8
  57. package/src/stories/DataArea.stories.js +2 -1
  58. package/src/stories/FormElement.stories.js +40 -0
  59. package/src/stories/Icon.stories.js +17 -1
  60. package/src/stories/ToolTip.stories.js +2 -1
  61. package/src/utils/icons.js +8 -0
  62. package/.prettierrc.json +0 -3
package/dist/scss/fonts.scss CHANGED
@@ -1,6 +1,8 @@
1
1
  @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
2
2
  @import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
3
3
 
4
+ $unnnic-font-size: 16px;
5
+
4
6
  // Font family
5
7
  $unnnic-font-family-primary: 'Aleo', serif;
6
8
  $unnnic-font-family-secondary: Lato;
@@ -12,26 +14,26 @@ $unnnic-font-weight-regular: 400;
12
14
  $unnnic-font-weight-light: 300;
13
15
 
14
16
  // Font size
15
- $unnnic-font-size-body-sm: 0.5rem;
16
- $unnnic-font-size-body-md: 0.75rem;
17
- $unnnic-font-size-body-gt: 0.875rem;
18
- $unnnic-font-size-body-lg: 1rem;
17
+ $unnnic-font-size-body-sm: 0.5 * $unnnic-font-size;
18
+ $unnnic-font-size-body-md: 0.75 * $unnnic-font-size;
19
+ $unnnic-font-size-body-gt: 0.875 * $unnnic-font-size;
20
+ $unnnic-font-size-body-lg: 1 * $unnnic-font-size;
19
21
 
20
- $unnnic-font-size-title-sm: 1.25rem;
21
- $unnnic-font-size-title-md: 1.5rem;
22
- $unnnic-font-size-title-lg: 2rem;
22
+ $unnnic-font-size-title-sm: 1.25 * $unnnic-font-size;
23
+ $unnnic-font-size-title-md: 1.5 * $unnnic-font-size;
24
+ $unnnic-font-size-title-lg: 2 * $unnnic-font-size;
23
25
 
24
- $unnnic-font-size-h4: 2.5rem;
25
- $unnnic-font-size-h3: 3rem;
26
- $unnnic-font-size-h2: 3.5rem;
27
- $unnnic-font-size-h1: 4.5rem;
26
+ $unnnic-font-size-h4: 2.5 * $unnnic-font-size;
27
+ $unnnic-font-size-h3: 3 * $unnnic-font-size;
28
+ $unnnic-font-size-h2: 3.5 * $unnnic-font-size;
29
+ $unnnic-font-size-h1: 4.5 * $unnnic-font-size;
28
30
 
29
31
  // Line height
30
32
  // Add this to font size when using
31
- $unnnic-line-height-small: 0.25rem;
32
- $unnnic-line-height-medium: 0.5rem;
33
+ $unnnic-line-height-small: 0.25 * $unnnic-font-size;
34
+ $unnnic-line-height-medium: 0.5 * $unnnic-font-size;
33
35
  $unnnic-line-height-md: $unnnic-line-height-medium;
34
- $unnnic-line-height-large: 1rem;
36
+ $unnnic-line-height-large: 1 * $unnnic-font-size;
35
37
 
36
38
  .unnnic-font {
37
39
  font-weight: $unnnic-font-weight-regular;
package/dist/scss/spacing.scss CHANGED
@@ -1,31 +1,31 @@
1
1
  // Icon size
2
- $unnnic-icon-size-xl: 2.5rem;
3
- $unnnic-icon-size-lg: 2rem;
4
- $unnnic-icon-size-md: 1.5rem;
5
- $unnnic-icon-size-ant: 1.25rem;
6
- $unnnic-icon-size-sm: 1rem;
7
- $unnnic-icon-size-xs: 0.75rem;
2
+ $unnnic-icon-size-xl: 2.5 * $unnnic-font-size;
3
+ $unnnic-icon-size-lg: 2 * $unnnic-font-size;
4
+ $unnnic-icon-size-md: 1.5 * $unnnic-font-size;
5
+ $unnnic-icon-size-ant: 1.25 * $unnnic-font-size;
6
+ $unnnic-icon-size-sm: 1 * $unnnic-font-size;
7
+ $unnnic-icon-size-xs: 0.75 * $unnnic-font-size;
8
8
 
9
9
  // Avatar size
10
- $unnnic-avatar-size-lg: 6.5rem;
11
- $unnnic-avatar-size-md: 4.5rem;
12
- $unnnic-avatar-size-sm: 2.5rem;
13
- $unnnic-avatar-size-xs: 2rem;
14
- $unnnic-avatar-size-nano: 1.25rem;
10
+ $unnnic-avatar-size-lg: 6.5 * $unnnic-font-size;
11
+ $unnnic-avatar-size-md: 4.5 * $unnnic-font-size;
12
+ $unnnic-avatar-size-sm: 2.5 * $unnnic-font-size;
13
+ $unnnic-avatar-size-xs: 2 * $unnnic-font-size;
14
+ $unnnic-avatar-size-nano: 1.25 * $unnnic-font-size;
15
15
 
16
16
  // Border radius
17
- $unnnic-border-radius-sm: 0.25rem;
18
- $unnnic-border-radius-md: 0.5rem;
19
- $unnnic-border-radius-lg: 1rem;
20
- $unnnic-border-radius-pill: 37.5rem;
17
+ $unnnic-border-radius-sm: 0.25 * $unnnic-font-size;
18
+ $unnnic-border-radius-md: 0.5 * $unnnic-font-size;
19
+ $unnnic-border-radius-lg: 1 * $unnnic-font-size;
20
+ $unnnic-border-radius-pill: 37.5 * $unnnic-font-size;
21
21
 
22
22
  // Border width
23
- $unnnic-border-width-thinner: 0.0625rem;
24
- $unnnic-border-width-thin: 0.125rem;
25
- $unnnic-border-width-thick: 0.25rem;
23
+ $unnnic-border-width-thinner: 0.0625 * $unnnic-font-size;
24
+ $unnnic-border-width-thin: 0.125 * $unnnic-font-size;
25
+ $unnnic-border-width-thick: 0.25 * $unnnic-font-size;
26
26
 
27
27
  // Shadow levels
28
- $unnnic-shadow-level-near: 0rem 0.25rem 8px rgba(0, 0, 0, .12);
28
+ $unnnic-shadow-level-near: 0 * $unnnic-font-size 0.25 * $unnnic-font-size 8px rgba(0, 0, 0, .12);
29
29
  $unnnic-shadow-level-separated: 0px 8px 16px rgba(0, 0, 0, .08);
30
30
  $unnnic-shadow-level-far: 0px 12px 32px rgba(0, 0, 0, .04);
31
31
  $unnnic-shadow-level-distant: 0px 20px 40px rgba(0, 0, 0, .06);
@@ -40,11 +40,11 @@ $unnnic-opacity-level-light: 0.16;
40
40
  $unnnic-opacity-level-extra-light: 0.08;
41
41
 
42
42
  // Spacing
43
- $unnnic-inset-nano: 0.5rem;
44
- $unnnic-inset-xs: 0.75rem;
45
- $unnnic-inset-sm: 1rem;
46
- $unnnic-inset-md: 1.5rem;
47
- $unnnic-inset-lg: 2rem;
43
+ $unnnic-inset-nano: 0.5 * $unnnic-font-size;
44
+ $unnnic-inset-xs: 0.75 * $unnnic-font-size;
45
+ $unnnic-inset-sm: 1 * $unnnic-font-size;
46
+ $unnnic-inset-md: 1.5 * $unnnic-font-size;
47
+ $unnnic-inset-lg: 2 * $unnnic-font-size;
48
48
  $unnnic-spacing-inset-nano: $unnnic-inset-nano;
49
49
  $unnnic-spacing-inset-xs: $unnnic-inset-xs;
50
50
  $unnnic-spacing-inset-sm: $unnnic-inset-sm;
@@ -52,23 +52,23 @@ $unnnic-spacing-inset-md: $unnnic-inset-md;
52
52
  $unnnic-spacing-inset-lg: $unnnic-inset-lg;
53
53
 
54
54
  // Squish
55
- $unnnic-squish-nano: 0.5rem 1rem;
56
- $unnnic-squish-xs: 0.75rem 1rem;
57
- $unnnic-squish-sm: 0.75rem 1.5rem;
58
- $unnnic-squish-md: 1rem 1.5rem;
59
- $unnnic-squish-lg: 1.5rem 2rem;
55
+ $unnnic-squish-nano: 0.5 * $unnnic-font-size 1 * $unnnic-font-size;
56
+ $unnnic-squish-xs: 0.75 * $unnnic-font-size 1 * $unnnic-font-size;
57
+ $unnnic-squish-sm: 0.75 * $unnnic-font-size 1.5 * $unnnic-font-size;
58
+ $unnnic-squish-md: 1 * $unnnic-font-size 1.5 * $unnnic-font-size;
59
+ $unnnic-squish-lg: 1.5 * $unnnic-font-size 2 * $unnnic-font-size;
60
60
 
61
61
  // Inline
62
- $unnnic-inline-nano: 0.25rem;
63
- $unnnic-inline-xs: 0.5rem;
64
- $unnnic-inline-ant: 0.75rem;
65
- $unnnic-inline-sm: 1rem;
66
- $unnnic-inline-md: 1.5rem;
67
- $unnnic-inline-lg: 2rem;
68
- $unnnic-inline-xl: 2.5rem;
69
- $unnnic-inline-giant: 3rem;
70
- $unnnic-inline-xgiant: 4rem;
71
- $unnnic-inline-awesome: 5rem;
62
+ $unnnic-inline-nano: 0.25 * $unnnic-font-size;
63
+ $unnnic-inline-xs: 0.5 * $unnnic-font-size;
64
+ $unnnic-inline-ant: 0.75 * $unnnic-font-size;
65
+ $unnnic-inline-sm: 1 * $unnnic-font-size;
66
+ $unnnic-inline-md: 1.5 * $unnnic-font-size;
67
+ $unnnic-inline-lg: 2 * $unnnic-font-size;
68
+ $unnnic-inline-xl: 2.5 * $unnnic-font-size;
69
+ $unnnic-inline-giant: 3 * $unnnic-font-size;
70
+ $unnnic-inline-xgiant: 4 * $unnnic-font-size;
71
+ $unnnic-inline-awesome: 5 * $unnnic-font-size;
72
72
  $unnnic-spacing-inline-nano: $unnnic-inline-nano;
73
73
  $unnnic-spacing-inline-xs: $unnnic-inline-xs;
74
74
  $unnnic-spacing-inline-ant: $unnnic-inline-ant;
@@ -81,12 +81,12 @@ $unnnic-spacing-inline-xgiant: $unnnic-inline-xgiant;
81
81
  $unnnic-spacing-inline-awesome: $unnnic-inline-awesome;
82
82
 
83
83
  // Stack
84
- $unnnic-spacing-stack-nano: 0.25rem;
85
- $unnnic-spacing-stack-xs: 0.5rem;
86
- $unnnic-spacing-stack-sm: 1rem;
87
- $unnnic-spacing-stack-md: 1.5rem;
88
- $unnnic-spacing-stack-lg: 2rem;
89
- $unnnic-spacing-stack-xl: 2.5rem;
90
- $unnnic-spacing-stack-giant: 3rem;
91
- $unnnic-spacing-stack-xgiant: 4rem;
92
- $unnnic-spacing-stack-awesome: 5rem;
84
+ $unnnic-spacing-stack-nano: 0.25 * $unnnic-font-size;
85
+ $unnnic-spacing-stack-xs: 0.5 * $unnnic-font-size;
86
+ $unnnic-spacing-stack-sm: 1 * $unnnic-font-size;
87
+ $unnnic-spacing-stack-md: 1.5 * $unnnic-font-size;
88
+ $unnnic-spacing-stack-lg: 2 * $unnnic-font-size;
89
+ $unnnic-spacing-stack-xl: 2.5 * $unnnic-font-size;
90
+ $unnnic-spacing-stack-giant: 3 * $unnnic-font-size;
91
+ $unnnic-spacing-stack-xgiant: 4 * $unnnic-font-size;
92
+ $unnnic-spacing-stack-awesome: 5 * $unnnic-font-size;