@farm-investimentos/front-mfe-components 11.5.3 → 11.5.5

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 (21) hide show
  1. package/dist/front-mfe-components.common.js +174 -139
  2. package/dist/front-mfe-components.common.js.map +1 -1
  3. package/dist/front-mfe-components.css +1 -1
  4. package/dist/front-mfe-components.umd.js +174 -139
  5. package/dist/front-mfe-components.umd.js.map +1 -1
  6. package/dist/front-mfe-components.umd.min.js +1 -1
  7. package/dist/front-mfe-components.umd.min.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/Buttons/DefaultButton/DefaultButton.stories.js +4 -0
  10. package/src/components/ContextMenu/ContextMenu.stories.js +34 -1
  11. package/src/components/ContextMenu/ContextMenu.vue +17 -15
  12. package/src/components/ContextMenu/__tests__/ContextMenu.spec.js +9 -0
  13. package/src/components/CopyToClipboard/CopyToClipboard.stories.js +7 -4
  14. package/src/components/CopyToClipboard/CopyToClipboard.vue +20 -2
  15. package/src/components/DialogFooter/DialogFooter.scss +2 -2
  16. package/src/components/Form/Form.stories.js +56 -0
  17. package/src/components/IdCaption/IdCaption.stories.js +34 -0
  18. package/src/components/IdCaption/IdCaption.vue +33 -2
  19. package/src/components/layout/DisplayBreakpoints.stories.mdx +0 -2
  20. package/src/components/layout/Line/Line.scss +1 -1
  21. package/src/scss/FormOverrides.scss +157 -146
package/src/scss/FormOverrides.scss CHANGED
@@ -1,170 +1,182 @@
1
1
  .theme--light {
2
- .fieldset-default,
3
- .v-col-fieldset-default {
4
- border: 0;
5
- label {
6
- font-weight: bold;
7
- display: block;
8
- margin-bottom: 0.5rem;
9
- }
10
- }
2
+ .fieldset-default,
3
+ .v-col-fieldset-default {
4
+ border: 0;
5
+ label {
6
+ font-weight: bold;
7
+ display: block;
8
+ margin-bottom: 0.5rem;
9
+ }
10
+ }
11
11
 
12
- &.v-input {
13
- &.v-text-field.v-text-field--outlined {
14
- .v-input__slot {
15
- min-height: 36px !important;
16
- height: 36px;
17
- background: white;
18
- fieldset {
19
- border-color: var(--v-gray-lighten2);
20
- }
21
- input,
22
- .v-select__selection {
23
- font-size: 0.75rem;
24
- }
25
- .v-input__append-inner {
12
+ &.v-input {
13
+ &.v-text-field.v-text-field--outlined {
14
+ .v-input__slot {
15
+ .v-input__append-inner {
16
+ margin-top: 8px;
17
+ }
18
+ .v-input__prepend-inner {
19
+ margin-top: 8px;
20
+ }
21
+ }
22
+ .v-input__prepend-outer {
23
+ margin-top: 8px;
24
+ }
25
+ }
26
+ &.v-text-field.v-input--dense.v-text-field--outlined {
27
+ .v-input__slot {
28
+ min-height: 36px !important;
29
+ height: 36px;
30
+ background: white;
31
+ fieldset {
32
+ border-color: var(--v-gray-lighten2);
33
+ }
34
+ input,
35
+ .v-select__selection {
36
+ font-size: 0.75rem;
37
+ }
38
+ .v-input__append-inner {
39
+ margin-top: 8px;
40
+ }
41
+ .v-input__prepend-inner {
26
42
  margin-top: 8px;
27
43
  }
28
- .v-input__prepend-inner {
29
- margin-top: 8px;
30
- }
31
- }
32
- .v-input__prepend-outer {
33
- margin-top: 8px;
34
- }
35
- &.v-input--is-label-active.v-input--is-focused {
36
- .v-input__slot fieldset {
37
- border-color: var(--v-secondary-base);
38
- }
39
- input {
40
- color: var(--v-secondary-base);
41
- }
42
- }
43
- &.error--text {
44
- .v-input__slot fieldset {
45
- border-color: var(--v-error-base);
46
- border-width: 1px;
47
- }
48
- &:after {
49
- content: '\F0028';
50
- position: absolute;
51
- font: normal normal normal 24px/1 'Material Design Icons';
52
- right: 6px;
53
- top: 6px;
54
- }
55
- }
56
- }
57
- }
58
- .v-textarea.v-text-field--enclosed .v-text-field__slot {
59
- textarea {
60
- font-size: 0.75rem;
61
- line-height: 1.25rem;
62
- }
63
- }
64
- .v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
65
- > .v-input__control
66
- > .v-input__slot
67
- fieldset {
68
- border-color: var(--v-gray-lighten2);
69
- }
70
- .v-text-field--outlined.v-input--is-focused > .v-input__control > .v-input__slot fieldset {
71
- border-color: var(--v-gray-lighten2);
72
- border-width: 1px;
73
- }
74
- .v-text-field .v-text-field__details {
75
- padding-left: 0 !important;
76
- }
44
+ }
45
+ .v-input__prepend-outer {
46
+ margin-top: 8px;
47
+ }
48
+ &.v-input--is-label-active.v-input--is-focused {
49
+ .v-input__slot fieldset {
50
+ border-color: var(--v-secondary-base);
51
+ }
52
+ input {
53
+ color: var(--v-secondary-base);
54
+ }
55
+ }
56
+ &.error--text {
57
+ .v-input__slot fieldset {
58
+ border-color: var(--v-error-base);
59
+ border-width: 1px;
60
+ }
61
+ &:after {
62
+ content: '\F0028';
63
+ position: absolute;
64
+ font: normal normal normal 24px/1 'Material Design Icons';
65
+ right: 6px;
66
+ top: 6px;
67
+ }
68
+ }
69
+ }
70
+ }
71
+ .v-textarea.v-text-field--enclosed .v-text-field__slot {
72
+ textarea {
73
+ font-size: 0.75rem;
74
+ line-height: 1.25rem;
75
+ }
76
+ }
77
+ .v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
78
+ > .v-input__control
79
+ > .v-input__slot
80
+ fieldset {
81
+ border-color: var(--v-gray-lighten2);
82
+ }
83
+ .v-text-field--outlined.v-input--is-focused > .v-input__control > .v-input__slot fieldset {
84
+ border-color: var(--v-gray-lighten2);
85
+ border-width: 1px;
86
+ }
87
+ .v-text-field .v-text-field__details {
88
+ padding-left: 0 !important;
89
+ }
77
90
  }
78
91
  .v-form {
79
- .v-col-fieldset-default {
80
- margin-bottom: 0;
81
- padding-bottom: 0;
92
+ .v-col-fieldset-default {
93
+ margin-bottom: 0;
94
+ padding-bottom: 0;
82
95
 
83
- span.required {
84
- color: var(--v-error-base);
85
- }
86
- }
87
- .row.form__footer-buttons--right {
88
- margin: 0;
89
- margin-top: 1rem;
90
- padding: 0;
91
- justify-content: flex-end;
92
- .v-btn {
93
- margin-left: 1rem;
94
- }
95
- }
96
+ span.required {
97
+ color: var(--v-error-base);
98
+ }
99
+ }
100
+ .row.form__footer-buttons--right {
101
+ margin: 0;
102
+ margin-top: 1rem;
103
+ padding: 0;
104
+ justify-content: flex-end;
105
+ .v-btn {
106
+ margin-left: 1rem;
107
+ }
108
+ }
96
109
  }
97
110
  .v-form.v-form-importfile {
98
- > .row:first-child {
99
- border-bottom: 1px solid var(--v-gray-lighten2);
100
- padding: 1rem;
101
- h3 {
102
- font-weight: 700;
103
- color: var(--v-secondary-base);
104
- }
105
- }
111
+ > .row:first-child {
112
+ border-bottom: 1px solid var(--v-gray-lighten2);
113
+ padding: 1rem;
114
+ h3 {
115
+ font-weight: 700;
116
+ color: var(--v-secondary-base);
117
+ }
118
+ }
106
119
 
107
- > .row:nth-child(2) {
108
- padding: 1rem;
109
- legend {
110
- font-weight: 700;
111
- width: 100%;
112
- }
113
- }
120
+ > .row:nth-child(2) {
121
+ padding: 1rem;
122
+ legend {
123
+ font-weight: 700;
124
+ width: 100%;
125
+ }
126
+ }
114
127
  }
115
128
  .v-form.form-custom-disabled {
116
- .theme--light {
117
- &.v-text-field.v-input--is-disabled .v-input__slot {
118
- padding-left: 0;
119
- input,
120
- label {
121
- color: var(--v-primary-base);
122
- font-size: 1rem !important;
123
- }
124
- }
125
- &.v-text-field.v-input--is-disabled .v-input__slot fieldset {
126
- border: none;
127
- }
128
- }
129
+ .theme--light {
130
+ &.v-text-field.v-input--is-disabled .v-input__slot {
131
+ padding-left: 0;
132
+ input,
133
+ label {
134
+ color: var(--v-primary-base);
135
+ font-size: 1rem !important;
136
+ }
137
+ }
138
+ &.v-text-field.v-input--is-disabled .v-input__slot fieldset {
139
+ border: none;
140
+ }
141
+ }
129
142
  }
130
143
  .v-text-field.v-text-field--solo .v-input__control {
131
- min-height: 30px;
144
+ min-height: 30px;
132
145
  }
133
146
 
134
147
  .theme--light.v-input--switch {
135
- .v-input--switch__thumb {
136
- color: #ffffff !important;
137
- }
138
- .v-input--switch__track.theme--light {
139
- background: #f0643b;
148
+ .v-input--switch__thumb {
149
+ color: #ffffff !important;
150
+ }
151
+ .v-input--switch__track.theme--light {
152
+ background: #f0643b;
140
153
 
141
- &.secondary--text {
142
- background-color: var(--v-secondary-base);
143
- }
144
- }
145
- label {
146
- font-size: 0.5rem;
147
- font-weight: 600;
148
- margin-top: 0.5rem;
149
- padding-bottom: 0.5rem;
150
- }
154
+ &.secondary--text {
155
+ background-color: var(--v-secondary-base);
156
+ }
157
+ }
158
+ label {
159
+ font-size: 0.5rem;
160
+ font-weight: 600;
161
+ margin-top: 0.5rem;
162
+ padding-bottom: 0.5rem;
163
+ }
151
164
  }
152
165
 
153
166
  @media screen and (max-width: 600px) {
154
- .v-form {
155
- .row.form__footer-buttons--right {
156
- justify-content: unset;
157
- .v-btn {
158
- margin-left: 0;
159
- }
160
- .v-btn:not(:first-child) {
161
- margin-top: 1rem;
162
- }
163
- }
164
- }
167
+ .v-form {
168
+ .row.form__footer-buttons--right {
169
+ justify-content: unset;
170
+ .v-btn {
171
+ margin-left: 0;
172
+ }
173
+ .v-btn:not(:first-child) {
174
+ margin-top: 1rem;
175
+ }
176
+ }
177
+ }
165
178
  }
166
179
 
167
-
168
180
  //temporary solution for v-data-table checkboxes
169
181
  .v-data-table__checkbox.v-simple-checkbox {
170
182
  .v-icon.v-icon {
@@ -181,7 +193,6 @@
181
193
  }
182
194
 
183
195
  .v-list.v-select-list.v-sheet.theme--light.v-list--dense.theme--light {
184
-
185
196
  .v-list-item.v-list-item--link {
186
197
  padding: 8px 12px;
187
198
  height: 36px;
@@ -202,4 +213,4 @@
202
213
  .v-list-item__action:first-child {
203
214
  margin-right: 16px;
204
215
  }
205
- }
216
+ }