@farm-investimentos/front-mfe-components 11.3.0 → 11.3.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 (31) hide show
  1. package/dist/front-mfe-components.common.js +475 -1030
  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 +475 -1030
  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/MultiImportButton/MultiImportButton.vue +0 -42
  10. package/src/components/Card/Card.scss +1 -0
  11. package/src/components/Card/Card.stories.js +6 -4
  12. package/src/components/Card/CardComposition.stories.ts +10 -0
  13. package/src/components/Checkbox/Checkbox.scss +17 -4
  14. package/src/components/Checkbox/Checkbox.stories.js +12 -0
  15. package/src/components/Checkbox/Checkbox.vue +20 -2
  16. package/src/components/ContextMenu/ContextMenu.scss +1 -0
  17. package/src/components/ContextMenu/ContextMenu.stories.js +59 -0
  18. package/src/components/ContextMenu/ContextMenu.vue +22 -8
  19. package/src/components/DataTableHeader/DataTableHeader.vue +5 -3
  20. package/src/components/IdCaption/IdCaption.stories.js +18 -1
  21. package/src/components/IdCaption/IdCaption.vue +2 -2
  22. package/src/components/MultipleFilePicker/MultipleFilePicker.scss +0 -4
  23. package/src/components/MultipleFilePicker/MultipleFilePicker.vue +16 -16
  24. package/src/components/layout/Col/Col.scss +52 -3
  25. package/src/components/layout/Col/Col.stories.js +113 -11
  26. package/src/components/layout/Col/Col.vue +32 -19
  27. package/src/components/layout/DisplayBreakpoints.stories.mdx +2 -0
  28. package/src/components/layout/GridSystem.stories.js +138 -0
  29. package/src/components/layout/Row/Row.scss +1 -1
  30. package/src/configurations/_mixins.scss +46 -0
  31. package/src/helpers/calculateMainZindex.js +1 -1
package/src/components/layout/Col/Col.stories.js CHANGED
@@ -7,36 +7,138 @@ export default {
7
7
  docs: {
8
8
  description: {
9
9
  component: `Col<br />
10
- selector: <em>farm-col</em><br />
11
- <span style="color: var(--farm-extra-1-base);">development</span>
12
- `,
10
+ selector: <em>farm-col</em><br />
11
+ <span style="color: var(--farm-extra-1-base);">development</span>
12
+ `,
13
13
  },
14
14
  },
15
15
  viewMode: 'docs',
16
16
  },
17
17
  };
18
18
 
19
+ const style = {
20
+ border: '1px solid var(--farm-extra-1-darken)',
21
+ backgroundColor: 'var(--farm-extra-1-lighten)',
22
+ };
23
+
19
24
  export const Primary = () => ({
20
- template: '<farm-col>col</farm-col>',
25
+ data() {
26
+ return {
27
+ style,
28
+ };
29
+ },
30
+ template: '<farm-col :style="style">col</farm-col>',
21
31
  });
22
32
  export const Xl = () => ({
23
- template: '<farm-col xl="3">xl: 3</farm-col>',
33
+ data() {
34
+ return {
35
+ style,
36
+ };
37
+ },
38
+ template: `<farm-row>
39
+ <farm-col xl="4" :style="style">4</farm-col>
40
+ <farm-col xl="6" :style="style">6</farm-col>
41
+ <farm-col xl="12" :style="style">12</farm-col>
42
+ <farm-col xl="2" :style="style">2</farm-col>
43
+ </farm-row>`,
24
44
  });
25
45
  export const Lg = () => ({
26
- template: '<farm-col lg="4">lg: 4</farm-col>',
46
+ data() {
47
+ return {
48
+ style,
49
+ };
50
+ },
51
+ template: `<farm-row>
52
+ <farm-col lg="4" :style="style">4</farm-col>
53
+ <farm-col lg="6" :style="style">6</farm-col>
54
+ <farm-col lg="12" :style="style">12</farm-col>
55
+ <farm-col lg="2" :style="style">2</farm-col>
56
+ </farm-row>`,
27
57
  });
28
58
  export const Md = () => ({
29
- template: '<farm-col md="6">md: 6</farm-col>',
59
+ data() {
60
+ return {
61
+ style,
62
+ };
63
+ },
64
+ template: `<farm-row>
65
+ <farm-col md="4" :style="style">4</farm-col>
66
+ <farm-col md="6" :style="style">6</farm-col>
67
+ <farm-col md="12" :style="style">12</farm-col>
68
+ <farm-col md="2" :style="style">2</farm-col>
69
+ </farm-row>`,
30
70
  });
71
+
31
72
  export const Sm = () => ({
32
- template: '<farm-col sm="4">sm: 4</farm-col>',
73
+ data() {
74
+ return {
75
+ style,
76
+ };
77
+ },
78
+ template: `<farm-row>
79
+ <farm-col sm="4" :style="style">4</farm-col>
80
+ <farm-col sm="6" :style="style">6</farm-col>
81
+ <farm-col sm="12" :style="style">12</farm-col>
82
+ <farm-col sm="2" :style="style">2</farm-col>
83
+ </farm-row>`,
33
84
  });
85
+
34
86
  export const Xs = () => ({
35
- template: '<farm-col xs="4">xs: 4</farm-col>',
87
+ data() {
88
+ return {
89
+ style,
90
+ };
91
+ },
92
+ template: `<farm-row>
93
+ <farm-col xs="4" :style="style">4</farm-col>
94
+ <farm-col xs="6" :style="style">6</farm-col>
95
+ <farm-col xs="12" :style="style">12</farm-col>
96
+ <farm-col xs="2" :style="style">2</farm-col>
97
+ </farm-row>`,
36
98
  });
99
+
37
100
  export const Combination = () => ({
38
- template: '<farm-col xl="3" xs="4">xl: 3 - xs: 4</farm-col>',
101
+ data() {
102
+ return {
103
+ style,
104
+ };
105
+ },
106
+ template: `<div>
107
+ <farm-col lg="5" md="4" sm="3" :style="style">lg: 5 - md: 4 - sm: 3</farm-col>
108
+ </div>`,
39
109
  });
40
110
  export const TagP = () => ({
41
111
  template: '<farm-col tag="p">col</farm-col>',
42
- });
112
+ });
113
+
114
+ export const CompareToVCol = () => ({
115
+ data() {
116
+ return {
117
+ style,
118
+ };
119
+ },
120
+ template: `<div>
121
+
122
+ <h4>LG 3</h4>
123
+ <farm-col lg="3" :style="style">farm</farm-col>
124
+ <v-col lg="3" :style="style">v-col</v-col>
125
+
126
+ <h4>MD 3</h4>
127
+ <farm-col md="3" :style="style">farm</farm-col>
128
+ <v-col md="3" :style="style">v-col</v-col>
129
+
130
+
131
+ <h4>SM 3</h4>
132
+ <farm-col sm="3" :style="style">farm</farm-col>
133
+ <v-col sm="3" :style="style">v-col</v-col>
134
+ </div>`,
135
+ });
136
+
137
+ export const NoGutters = () => ({
138
+ data() {
139
+ return {
140
+ style,
141
+ };
142
+ },
143
+ template: '<farm-col :no-gutters="true" :style="style">col</farm-col>',
144
+ });
package/src/components/layout/Col/Col.vue CHANGED
@@ -8,6 +8,7 @@
8
8
  [`farm-col--md-${md}`]: md,
9
9
  [`farm-col--sm-${sm}`]: sm,
10
10
  [`farm-col--xs-${xs}`]: xs,
11
+ 'farm-col--no-gutters': noGutters,
11
12
  }"
12
13
  >
13
14
  <slot></slot>
@@ -23,34 +24,46 @@ export default Vue.extend({
23
24
  * Html tag
24
25
  */
25
26
  tag: { type: String, default: 'div' },
27
+ /**
28
+ * Extra-large breakpoint
29
+ */
26
30
  xl: {
27
- type: [String, Number, Boolean] as PropType<
28
- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
29
- >,
30
- default: false,
31
+ type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>,
32
+ default: null,
31
33
  },
34
+ /**
35
+ * Large breakpoint
36
+ */
32
37
  lg: {
33
- type: [String, Number, Boolean] as PropType<
34
- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
35
- >,
36
- default: false,
38
+ type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>,
39
+ default: null,
37
40
  },
41
+ /**
42
+ * Medium breakpoint
43
+ */
38
44
  md: {
39
- type: [String, Number, Boolean] as PropType<
40
- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
41
- >,
42
- default: false,
45
+ type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>,
46
+ default: null,
43
47
  },
48
+ /**
49
+ * Small breakpoint
50
+ */
44
51
  sm: {
45
- type: [String, Number, Boolean] as PropType<
46
- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
47
- >,
48
- default: false,
52
+ type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>,
53
+ default: null,
49
54
  },
55
+ /**
56
+ * Extra-small breakpoint
57
+ */
50
58
  xs: {
51
- type: [String, Number, Boolean] as PropType<
52
- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
53
- >,
59
+ type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>,
60
+ default: null,
61
+ },
62
+ /**
63
+ * Remove default gutters
64
+ */
65
+ noGutters: {
66
+ type: Boolean,
54
67
  default: false,
55
68
  },
56
69
  },
package/src/components/layout/DisplayBreakpoints.stories.mdx CHANGED
@@ -4,6 +4,8 @@ import { Meta } from '@storybook/addon-docs';
4
4
 
5
5
  # Display Breakpoints
6
6
 
7
+ <farm-col>aaa</farm-col>
8
+
7
9
  <table width="100%">
8
10
  <thead>
9
11
  <tr>
package/src/components/layout/GridSystem.stories.js ADDED
@@ -0,0 +1,138 @@
1
+ export default {
2
+ title: 'Layout/Grid System',
3
+ parameters: {
4
+ docs: {
5
+ description: {
6
+ component: `Grid Syste<br />
7
+ `,
8
+ },
9
+ },
10
+ viewMode: 'docs',
11
+ },
12
+ };
13
+
14
+ const style = {
15
+ border: '1px solid var(--farm-extra-1-darken)',
16
+ backgroundColor: 'var(--farm-extra-1-lighten)',
17
+ };
18
+
19
+ export const MixBreakpoints = () => ({
20
+ data() {
21
+ return {
22
+ style,
23
+ };
24
+ },
25
+ template: `<div>
26
+ <farm-col lg="9" md="6" sm="3" :style="style">lg: 9 - md: 6 - sm: 3</farm-col>
27
+ </div>`,
28
+ });
29
+
30
+ export const Xl = () => ({
31
+ data() {
32
+ return {
33
+ style,
34
+ };
35
+ },
36
+ template: `<farm-row>
37
+ <farm-col xl="4" :style="style">1 of 3</farm-col>
38
+ <farm-col xl="4" :style="style">2 of 3</farm-col>
39
+ <farm-col xl="4" :style="style">3 of 3</farm-col>
40
+ <farm-col xl="6" :style="style">1 of 2</farm-col>
41
+ <farm-col xl="6" :style="style">2 of 2</farm-col>
42
+ <farm-col xl="12" :style="style">1 of 1</farm-col>
43
+ <farm-col xl="2" :style="style">1 of 6</farm-col>
44
+ <farm-col xl="2" :style="style">2 of 6</farm-col>
45
+ <farm-col xl="2" :style="style">3 of 6</farm-col>
46
+ <farm-col xl="2" :style="style">4 of 6</farm-col>
47
+ <farm-col xl="2" :style="style">5 of 6</farm-col>
48
+ <farm-col xl="2" :style="style">6 of 6</farm-col>
49
+ </farm-row>`,
50
+ });
51
+ export const Lg = () => ({
52
+ data() {
53
+ return {
54
+ style,
55
+ };
56
+ },
57
+ template: `<farm-row>
58
+ <farm-col lg="4" :style="style">1 of 3</farm-col>
59
+ <farm-col lg="4" :style="style">2 of 3</farm-col>
60
+ <farm-col lg="4" :style="style">3 of 3</farm-col>
61
+ <farm-col lg="6" :style="style">1 of 2</farm-col>
62
+ <farm-col lg="6" :style="style">2 of 2</farm-col>
63
+ <farm-col lg="12" :style="style">1 of 1</farm-col>
64
+ <farm-col lg="2" :style="style">1 of 6</farm-col>
65
+ <farm-col lg="2" :style="style">2 of 6</farm-col>
66
+ <farm-col lg="2" :style="style">3 of 6</farm-col>
67
+ <farm-col lg="2" :style="style">4 of 6</farm-col>
68
+ <farm-col lg="2" :style="style">5 of 6</farm-col>
69
+ <farm-col lg="2" :style="style">6 of 6</farm-col>
70
+ </farm-row>`,
71
+ });
72
+ export const Md = () => ({
73
+ data() {
74
+ return {
75
+ style,
76
+ };
77
+ },
78
+ template: `<farm-row>
79
+ <farm-col md="4" :style="style">1 of 3</farm-col>
80
+ <farm-col md="4" :style="style">2 of 3</farm-col>
81
+ <farm-col md="4" :style="style">3 of 3</farm-col>
82
+ <farm-col md="6" :style="style">1 of 2</farm-col>
83
+ <farm-col md="6" :style="style">2 of 2</farm-col>
84
+ <farm-col md="12" :style="style">1 of 1</farm-col>
85
+ <farm-col md="2" :style="style">1 of 6</farm-col>
86
+ <farm-col md="2" :style="style">2 of 6</farm-col>
87
+ <farm-col md="2" :style="style">3 of 6</farm-col>
88
+ <farm-col md="2" :style="style">4 of 6</farm-col>
89
+ <farm-col md="2" :style="style">5 of 6</farm-col>
90
+ <farm-col md="2" :style="style">6 of 6</farm-col>
91
+ </farm-row>`,
92
+ });
93
+
94
+ export const Sm = () => ({
95
+ data() {
96
+ return {
97
+ style,
98
+ };
99
+ },
100
+ template: `<farm-row>
101
+ <farm-col sm="4" :style="style">1 of 3</farm-col>
102
+ <farm-col sm="4" :style="style">2 of 3</farm-col>
103
+ <farm-col sm="4" :style="style">3 of 3</farm-col>
104
+ <farm-col sm="6" :style="style">1 of 2</farm-col>
105
+ <farm-col sm="6" :style="style">2 of 2</farm-col>
106
+ <farm-col sm="12":style="style" >1 of 1</farm-col>
107
+ <farm-col sm="2" :style="style">1 of 6</farm-col>
108
+ <farm-col sm="2" :style="style">2 of 6</farm-col>
109
+ <farm-col sm="2" :style="style" >3 of 6</farm-col>
110
+ <farm-col sm="2" :style="style">4 of 6</farm-col>
111
+ <farm-col sm="2" :style="style">5 of 6</farm-col>
112
+ <farm-col sm="2" :style="style">6 of 6</farm-col>
113
+ </farm-row>`,
114
+ });
115
+
116
+ export const Xs = () => ({
117
+ data() {
118
+ return {
119
+ style,
120
+ };
121
+ },
122
+ template: `<farm-row>
123
+ <farm-col xs="4" :style="style">1 of 3</farm-col>
124
+ <farm-col xs="4" :style="style">2 of 3</farm-col>
125
+ <farm-col xs="4" :style="style">3 of 3</farm-col>
126
+ <farm-col xs="6" :style="style">1 of 2</farm-col>
127
+ <farm-col xs="6" :style="style">2 of 2</farm-col>
128
+ <farm-col xs="12":style="style" >1 of 1</farm-col>
129
+ <farm-col xs="2" :style="style">1 of 6</farm-col>
130
+ <farm-col xs="2" :style="style">2 of 6</farm-col>
131
+ <farm-col xs="2" :style="style">3 of 6</farm-col>
132
+ <farm-col xs="2" :style="style">4 of 6</farm-col>
133
+ <farm-col xs="2" :style="style">5 of 6</farm-col>
134
+ <farm-col xs="2" :style="style">6 of 6</farm-col>
135
+ </farm-row>`,
136
+ });
137
+
138
+
package/src/components/layout/Row/Row.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  display: flex;
7
7
  flex-wrap: wrap;
8
8
  flex: 1 1 auto;
9
- margin: 0 calc(#{gutter('lg')} * -1);
9
+ margin-inline: -12px;
10
10
 
11
11
  @each $k in $aligns {
12
12
  &#{'--align-' + $k} {
package/src/configurations/_mixins.scss CHANGED
@@ -16,6 +16,12 @@
16
16
  }
17
17
  }
18
18
 
19
+ @mixin fromXs {
20
+ @media (min-width: 600px) {
21
+ @content;
22
+ }
23
+ }
24
+
19
25
  @mixin fromSm {
20
26
  @media (min-width: 960px) {
21
27
  @content;
@@ -36,4 +42,44 @@
36
42
 
37
43
  @mixin addShadow {
38
44
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
45
+ }
46
+
47
+ @mixin buildCol($code) {
48
+ @for $i from 1 through 12 {
49
+ .farm-col--#{$code}-#{$i * 1} {
50
+ flex: 0 0 (100/12 * $i)+#{"%"};
51
+ max-width: (100/12 * $i)+#{"%"};
52
+ }
53
+ }
54
+ }
55
+
56
+ @mixin rippleStyles {
57
+ .farm-ripple {
58
+ border-radius: 50%;
59
+ cursor: pointer;
60
+ position: absolute;
61
+ transition: all 0.4s;
62
+ z-index: 1;
63
+
64
+ &:before {
65
+ transition: all 0.2s;
66
+ border-radius: inherit;
67
+ bottom: 0;
68
+ content: "";
69
+ position: absolute;
70
+ opacity: 0;
71
+ left: 0;
72
+ right: 0;
73
+ top: 0;
74
+ transform-origin: center center;
75
+ background-color: var(--farm-stroke-base);
76
+ }
77
+ }
78
+ }
79
+ @mixin activateRipple {
80
+ &:hover {
81
+ .farm-ripple:before {
82
+ opacity: 0.3;
83
+ }
84
+ }
39
85
  }
package/src/helpers/calculateMainZindex.js CHANGED
@@ -8,5 +8,5 @@ export default () => {
8
8
  all_z.map(x => Number(x))
9
9
  );
10
10
 
11
- return zIndex;
11
+ return zIndex > 5 ? zIndex : 5;
12
12
  };