@farm-investimentos/front-mfe-components 11.5.5 → 11.6.0
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/front-mfe-components.common.js +146 -126
- package/dist/front-mfe-components.common.js.map +1 -1
- package/dist/front-mfe-components.css +1 -1
- package/dist/front-mfe-components.umd.js +146 -126
- package/dist/front-mfe-components.umd.js.map +1 -1
- package/dist/front-mfe-components.umd.min.js +1 -1
- package/dist/front-mfe-components.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ContextMenu/ContextMenu.stories.js +17 -1
- package/src/components/ContextMenu/ContextMenu.vue +11 -3
- package/src/components/ContextMenu/__tests__/ContextMenu.spec.js +2 -2
- package/src/components/layout/Row/Row.scss +10 -0
- package/src/components/layout/Row/Row.stories.js +70 -0
- package/src/components/layout/Row/Row.vue +16 -0
- package/src/scss/FormOverrides.scss +1 -0
package/package.json
CHANGED
|
@@ -27,7 +27,23 @@ export const Primary = () => ({
|
|
|
27
27
|
v-bind="attrs"
|
|
28
28
|
v-on="on"
|
|
29
29
|
>
|
|
30
|
-
|
|
30
|
+
open
|
|
31
|
+
</farm-btn>
|
|
32
|
+
</template>
|
|
33
|
+
</farm-contextmenu>
|
|
34
|
+
</div>`,
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
export const LongActivator = () => ({
|
|
38
|
+
template: `<div style="padding-left: 120px; padding-top: 80px; display: flex;">
|
|
39
|
+
<farm-contextmenu>
|
|
40
|
+
some text
|
|
41
|
+
<template v-slot:activator="{ on, attrs }">
|
|
42
|
+
<farm-btn
|
|
43
|
+
v-bind="attrs"
|
|
44
|
+
v-on="on"
|
|
45
|
+
>
|
|
46
|
+
Very long Activator
|
|
31
47
|
</farm-btn>
|
|
32
48
|
</template>
|
|
33
49
|
</farm-contextmenu>
|
|
@@ -104,15 +104,23 @@ export default Vue.extend({
|
|
|
104
104
|
window.scrollY +
|
|
105
105
|
(!bottom.value ? 0 : activatorBoundingClientRect.height);
|
|
106
106
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
107
|
+
//
|
|
108
|
+
|
|
109
|
+
let offsetLeft = activatorBoundingClientRect.left;
|
|
110
110
|
|
|
111
111
|
styles.minWidth =
|
|
112
112
|
(activatorBoundingClientRect.width > 96
|
|
113
113
|
? parseInt(activatorBoundingClientRect.width)
|
|
114
114
|
: 96) + 'px';
|
|
115
115
|
|
|
116
|
+
if(activatorBoundingClientRect.width < 96) {
|
|
117
|
+
const w = popupClientRect.width < 96 ? 96 : popupClientRect.width;
|
|
118
|
+
offsetLeft =
|
|
119
|
+
activatorBoundingClientRect.left +
|
|
120
|
+
activatorBoundingClientRect.width / 2 -
|
|
121
|
+
w / 2;
|
|
122
|
+
}
|
|
123
|
+
|
|
116
124
|
//Do not allow to open outside window
|
|
117
125
|
|
|
118
126
|
const rightEdge = offsetLeft + popupClientRect.width;
|
|
@@ -71,3 +71,73 @@ export const Justify = () => ({
|
|
|
71
71
|
export const NoDefaultGutters = () => ({
|
|
72
72
|
template: '<farm-row :no-default-gutters="true">no gutters</farm-row>',
|
|
73
73
|
});
|
|
74
|
+
|
|
75
|
+
export const DefaultGrid = () => ({
|
|
76
|
+
template: `<div>
|
|
77
|
+
<farm-row>
|
|
78
|
+
<farm-col md="6">
|
|
79
|
+
<div style="border:1px solid red;">col 1</div>
|
|
80
|
+
</farm-col>
|
|
81
|
+
<farm-col md="6">
|
|
82
|
+
<div style="border:1px solid red;">col 2</div>
|
|
83
|
+
</farm-col>
|
|
84
|
+
<farm-col md="6">
|
|
85
|
+
<div style="border:1px solid red;">col 3</div>
|
|
86
|
+
</farm-col>
|
|
87
|
+
<farm-col md="6">
|
|
88
|
+
<div style="border:1px solid red;">col 4</div>
|
|
89
|
+
</farm-col>
|
|
90
|
+
</farm-row>
|
|
91
|
+
</div>`,
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
export const yGridGutters = () => ({
|
|
96
|
+
template: `<div>
|
|
97
|
+
<farm-row y-grid-gutters>
|
|
98
|
+
<farm-col md="6">
|
|
99
|
+
<div style="border:1px solid red;">col 1</div>
|
|
100
|
+
</farm-col>
|
|
101
|
+
<farm-col md="6">
|
|
102
|
+
<div style="border:1px solid red;">col 2</div>
|
|
103
|
+
</farm-col>
|
|
104
|
+
<farm-col md="6">
|
|
105
|
+
<div style="border:1px solid red;">col 3</div>
|
|
106
|
+
</farm-col>
|
|
107
|
+
<farm-col md="6">
|
|
108
|
+
<div style="border:1px solid red;">col 4</div>
|
|
109
|
+
</farm-col>
|
|
110
|
+
</farm-row>
|
|
111
|
+
</div>`,
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
export const yFormGutters = () => ({
|
|
115
|
+
template: `<div>
|
|
116
|
+
<farm-row y-form-gutters>
|
|
117
|
+
<farm-col md="6">
|
|
118
|
+
<div style="border:1px solid red;">
|
|
119
|
+
<farm-label>label 1</farm-label>
|
|
120
|
+
<farm-textfield />
|
|
121
|
+
</div>
|
|
122
|
+
</farm-col>
|
|
123
|
+
<farm-col md="6">
|
|
124
|
+
<div style="border:1px solid red;">
|
|
125
|
+
<farm-label>label 2</farm-label>
|
|
126
|
+
<farm-textfield />
|
|
127
|
+
</div>
|
|
128
|
+
</farm-col>
|
|
129
|
+
<farm-col md="6">
|
|
130
|
+
<div style="border:1px solid red;">
|
|
131
|
+
<farm-label>label 3</farm-label>
|
|
132
|
+
<farm-textfield hint="some hint text" persistent-hint />
|
|
133
|
+
</div>
|
|
134
|
+
</farm-col>
|
|
135
|
+
<farm-col md="6">
|
|
136
|
+
<div style="border:1px solid red;">
|
|
137
|
+
<farm-label>label 4</farm-label>
|
|
138
|
+
<farm-textfield />
|
|
139
|
+
</div>
|
|
140
|
+
</farm-col>
|
|
141
|
+
</farm-row>
|
|
142
|
+
</div>`,
|
|
143
|
+
});
|
|
@@ -8,6 +8,8 @@
|
|
|
8
8
|
[`farm-row--justify-${justify}`]: justify,
|
|
9
9
|
'farm-row--no-default-gutters': noDefaultGutters,
|
|
10
10
|
'farm-row--extra-decrease': extraDecrease,
|
|
11
|
+
'farm-row--y-grid-gutters': yGridGutters,
|
|
12
|
+
'farm-row--y-form-gutters': yFormGutters,
|
|
11
13
|
}"
|
|
12
14
|
>
|
|
13
15
|
<slot></slot>
|
|
@@ -60,6 +62,20 @@ export default Vue.extend({
|
|
|
60
62
|
type: Boolean,
|
|
61
63
|
default: false,
|
|
62
64
|
},
|
|
65
|
+
/**
|
|
66
|
+
* Add gutters to farm-cols in Y axis
|
|
67
|
+
*/
|
|
68
|
+
yGridGutters: {
|
|
69
|
+
type: Boolean,
|
|
70
|
+
default: false,
|
|
71
|
+
},
|
|
72
|
+
/**
|
|
73
|
+
* Add proper gutters to farm-cols in Y axis to be used with form elements
|
|
74
|
+
*/
|
|
75
|
+
yFormGutters: {
|
|
76
|
+
type: Boolean,
|
|
77
|
+
default: false,
|
|
78
|
+
},
|
|
63
79
|
},
|
|
64
80
|
inheritAttrs: true,
|
|
65
81
|
});
|