@farm-investimentos/front-mfe-components 15.5.4 → 15.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.
- package/dist/front-mfe-components.common.js +169 -137
- 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 +169 -137
- 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/Collapsible/Collapsible.scss +15 -0
- package/src/components/Collapsible/Collapsible.stories.js +165 -3
- package/src/components/Collapsible/Collapsible.vue +45 -5
- package/src/scss/utils.scss +16 -5
package/package.json
CHANGED
|
@@ -7,6 +7,11 @@
|
|
|
7
7
|
align-items: center;
|
|
8
8
|
justify-content: space-between;
|
|
9
9
|
cursor: pointer;
|
|
10
|
+
|
|
11
|
+
&--custom {
|
|
12
|
+
position: relative;
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
}
|
|
10
15
|
}
|
|
11
16
|
|
|
12
17
|
&__content-title {
|
|
@@ -19,6 +24,12 @@
|
|
|
19
24
|
display: flex;
|
|
20
25
|
align-items: center;
|
|
21
26
|
justify-content: space-between;
|
|
27
|
+
|
|
28
|
+
&--custom {
|
|
29
|
+
position: absolute;
|
|
30
|
+
right: 0;
|
|
31
|
+
top: 3px;
|
|
32
|
+
}
|
|
22
33
|
}
|
|
23
34
|
|
|
24
35
|
&__icon {
|
|
@@ -37,6 +48,10 @@
|
|
|
37
48
|
}
|
|
38
49
|
}
|
|
39
50
|
|
|
51
|
+
.full-width {
|
|
52
|
+
width: 100%;
|
|
53
|
+
}
|
|
54
|
+
|
|
40
55
|
.fade-enter-active,
|
|
41
56
|
.fade-leave-active {
|
|
42
57
|
transition: opacity 0.3s ease-in-out;
|
|
@@ -152,20 +152,182 @@ export const Dense = () => ({
|
|
|
152
152
|
|
|
153
153
|
export const Custom = () => ({
|
|
154
154
|
template: `
|
|
155
|
-
<farm-collapsible custom>
|
|
155
|
+
<farm-collapsible title="" custom open>
|
|
156
156
|
<template #custom>
|
|
157
|
+
<farm-row justify="space-between" align="center">
|
|
158
|
+
<farm-col md="6">
|
|
159
|
+
<farm-caption>caption</farm-caption>
|
|
160
|
+
</farm-col>
|
|
161
|
+
<farm-col md="6" justify="end"
|
|
162
|
+
align="end">
|
|
157
163
|
<farm-btn
|
|
158
|
-
|
|
159
|
-
v-on="on"
|
|
164
|
+
|
|
160
165
|
>
|
|
161
166
|
custom
|
|
162
167
|
</farm-btn>
|
|
168
|
+
</farm-col>
|
|
169
|
+
</farm-row>
|
|
163
170
|
</template>
|
|
164
171
|
collapsible content
|
|
165
172
|
</farm-collapsible>
|
|
166
173
|
`,
|
|
167
174
|
});
|
|
168
175
|
|
|
176
|
+
export const CustomHeaderContent = () => ({
|
|
177
|
+
template: `
|
|
178
|
+
<farm-collapsible title="" custom-header>
|
|
179
|
+
<template #header-content>
|
|
180
|
+
<farm-row>
|
|
181
|
+
<farm-col md="12">
|
|
182
|
+
<farm-bodytext color="success">initial text</farm-bodytext>
|
|
183
|
+
</farm-col>
|
|
184
|
+
</farm-row>
|
|
185
|
+
|
|
186
|
+
<farm-row class="pt-4">
|
|
187
|
+
<farm-col class="collapsible-stories-class-with-line">
|
|
188
|
+
<farm-caption variation="semiBold"
|
|
189
|
+
>text here</farm-caption
|
|
190
|
+
>
|
|
191
|
+
123455
|
|
192
|
+
</farm-col>
|
|
193
|
+
<farm-col class="collapsible-stories-class-with-line">
|
|
194
|
+
<farm-caption variation="semiBold"
|
|
195
|
+
>label here</farm-caption
|
|
196
|
+
>
|
|
197
|
+
|
|
198
|
+
<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
|
|
199
|
+
</farm-col>
|
|
200
|
+
|
|
201
|
+
<farm-col class="collapsible-stories-class-with-line">
|
|
202
|
+
<farm-caption variation="semiBold">LABEL HERE</farm-caption>
|
|
203
|
+
|
|
204
|
+
<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
|
|
205
|
+
</farm-col>
|
|
206
|
+
|
|
207
|
+
<farm-col>
|
|
208
|
+
<farm-caption variation="semiBold"
|
|
209
|
+
>Label here (text here)</farm-caption
|
|
210
|
+
>
|
|
211
|
+
<farm-caption variation="medium" class="my-1">value here</farm-caption>
|
|
212
|
+
</farm-col>
|
|
213
|
+
</farm-row>
|
|
214
|
+
</template>
|
|
215
|
+
|
|
216
|
+
<farm-bodytext >collapsible content</farm-bodytext>
|
|
217
|
+
</farm-collapsible>
|
|
218
|
+
`,
|
|
219
|
+
});
|
|
220
|
+
|
|
221
|
+
export const customBodyContent = () => ({
|
|
222
|
+
template: `
|
|
223
|
+
<farm-collapsible title="simple title" custom-body>
|
|
224
|
+
<farm-row extraDecrease style="background-color:#f5f5f5;" class="px-4">
|
|
225
|
+
<farm-col class="collapsible-stories-class-with-line">
|
|
226
|
+
<farm-caption variation="semiBold"
|
|
227
|
+
>text here</farm-caption
|
|
228
|
+
>
|
|
229
|
+
123455
|
|
230
|
+
</farm-col>
|
|
231
|
+
<farm-col class="collapsible-stories-class-with-line">
|
|
232
|
+
<farm-caption variation="semiBold"
|
|
233
|
+
>label here</farm-caption
|
|
234
|
+
>
|
|
235
|
+
|
|
236
|
+
<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
|
|
237
|
+
</farm-col>
|
|
238
|
+
|
|
239
|
+
<farm-col class="collapsible-stories-class-with-line">
|
|
240
|
+
<farm-caption variation="semiBold">LABEL HERE</farm-caption>
|
|
241
|
+
|
|
242
|
+
<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
|
|
243
|
+
</farm-col>
|
|
244
|
+
|
|
245
|
+
<farm-col>
|
|
246
|
+
<farm-caption variation="semiBold"
|
|
247
|
+
>Label here (text here)</farm-caption
|
|
248
|
+
>
|
|
249
|
+
<farm-caption variation="medium" class="my-1">value here</farm-caption>
|
|
250
|
+
</farm-col>
|
|
251
|
+
</farm-row>
|
|
252
|
+
</farm-collapsible>
|
|
253
|
+
`,
|
|
254
|
+
});
|
|
255
|
+
|
|
256
|
+
export const CustomHeaderAndBodyContent = () => ({
|
|
257
|
+
template: `
|
|
258
|
+
<farm-collapsible title="" custom-header custom-body>
|
|
259
|
+
|
|
260
|
+
<template #header-content>
|
|
261
|
+
<div class="mb-4">
|
|
262
|
+
<farm-row>
|
|
263
|
+
<farm-col md="12">
|
|
264
|
+
<farm-bodytext color="success">initial text</farm-bodytext>
|
|
265
|
+
</farm-col>
|
|
266
|
+
</farm-row>
|
|
267
|
+
|
|
268
|
+
<farm-row class="pt-4">
|
|
269
|
+
<farm-col class="collapsible-stories-class-with-line">
|
|
270
|
+
<farm-caption variation="semiBold"
|
|
271
|
+
>text here</farm-caption
|
|
272
|
+
>
|
|
273
|
+
123455
|
|
274
|
+
</farm-col>
|
|
275
|
+
<farm-col class="collapsible-stories-class-with-line">
|
|
276
|
+
<farm-caption variation="semiBold"
|
|
277
|
+
>label here</farm-caption
|
|
278
|
+
>
|
|
279
|
+
|
|
280
|
+
<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
|
|
281
|
+
</farm-col>
|
|
282
|
+
|
|
283
|
+
<farm-col class="collapsible-stories-class-with-line">
|
|
284
|
+
<farm-caption variation="semiBold">LABEL HERE</farm-caption>
|
|
285
|
+
|
|
286
|
+
<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
|
|
287
|
+
</farm-col>
|
|
288
|
+
|
|
289
|
+
<farm-col>
|
|
290
|
+
<farm-caption variation="semiBold"
|
|
291
|
+
>Label here (text here)</farm-caption
|
|
292
|
+
>
|
|
293
|
+
<farm-caption variation="medium" class="my-1">value here</farm-caption>
|
|
294
|
+
</farm-col>
|
|
295
|
+
</farm-row>
|
|
296
|
+
</div>
|
|
297
|
+
</template>
|
|
298
|
+
|
|
299
|
+
<farm-row extraDecrease style="background-color:#f5f5f5;" class="mt-5 px-2">
|
|
300
|
+
<farm-col class="collapsible-stories-class-with-line">
|
|
301
|
+
<farm-caption variation="semiBold"
|
|
302
|
+
>text here</farm-caption
|
|
303
|
+
>
|
|
304
|
+
123455
|
|
305
|
+
</farm-col>
|
|
306
|
+
<farm-col class="collapsible-stories-class-with-line">
|
|
307
|
+
<farm-caption variation="semiBold"
|
|
308
|
+
>label here</farm-caption
|
|
309
|
+
>
|
|
310
|
+
|
|
311
|
+
<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
|
|
312
|
+
</farm-col>
|
|
313
|
+
|
|
314
|
+
<farm-col class="collapsible-stories-class-with-line">
|
|
315
|
+
<farm-caption variation="semiBold">LABEL HERE</farm-caption>
|
|
316
|
+
|
|
317
|
+
<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
|
|
318
|
+
</farm-col>
|
|
319
|
+
|
|
320
|
+
<farm-col>
|
|
321
|
+
<farm-caption variation="semiBold"
|
|
322
|
+
>Label here (text here)</farm-caption
|
|
323
|
+
>
|
|
324
|
+
<farm-caption variation="medium" class="my-1">value here</farm-caption>
|
|
325
|
+
</farm-col>
|
|
326
|
+
</farm-row>
|
|
327
|
+
</farm-collapsible>
|
|
328
|
+
`,
|
|
329
|
+
});
|
|
330
|
+
|
|
169
331
|
Primary.storyName = 'Basic';
|
|
170
332
|
Title.storyName = 'Title';
|
|
171
333
|
Icon.storyName = 'Icon';
|
|
@@ -1,9 +1,19 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<farm-card class="collapsible">
|
|
3
|
-
<farm-card-content gutter="md">
|
|
4
|
-
<div
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
<farm-card-content gutter="md" :class="{ 'pb-0': customBody }">
|
|
4
|
+
<div
|
|
5
|
+
v-if="!customHeader"
|
|
6
|
+
class="collapsible__header"
|
|
7
|
+
@click="onToggleCollapsible(status)"
|
|
8
|
+
>
|
|
9
|
+
<div
|
|
10
|
+
class="collapsible__content-title"
|
|
11
|
+
:class="{ 'full-width': custom, 'pb-4': customBody }"
|
|
12
|
+
>
|
|
13
|
+
<div
|
|
14
|
+
class="collapsible__icon collapsible__icon--main"
|
|
15
|
+
v-if="icon !== '' && !custom"
|
|
16
|
+
>
|
|
7
17
|
<farm-icon size="md" :color="colorIcon">
|
|
8
18
|
{{ icon }}
|
|
9
19
|
</farm-icon>
|
|
@@ -40,7 +50,29 @@
|
|
|
40
50
|
</div>
|
|
41
51
|
</div>
|
|
42
52
|
</div>
|
|
43
|
-
|
|
53
|
+
|
|
54
|
+
<div
|
|
55
|
+
v-if="customHeader"
|
|
56
|
+
class="collapsible__header--custom"
|
|
57
|
+
@click="onToggleCollapsible(status)"
|
|
58
|
+
>
|
|
59
|
+
<slot name="header-content"></slot>
|
|
60
|
+
<div class="collapsible__content-right--custom">
|
|
61
|
+
<div class="collapsible__icon collapsible__icon--arrow">
|
|
62
|
+
<farm-icon size="md" color="primary">
|
|
63
|
+
{{ arrowIcon }}
|
|
64
|
+
</farm-icon>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<transition v-if="customBody" name="fade">
|
|
70
|
+
<div v-show="status">
|
|
71
|
+
<slot></slot>
|
|
72
|
+
</div>
|
|
73
|
+
</transition>
|
|
74
|
+
|
|
75
|
+
<transition v-else name="fade">
|
|
44
76
|
<div class="collapsible__body" v-show="status">
|
|
45
77
|
<slot></slot>
|
|
46
78
|
</div>
|
|
@@ -180,6 +212,14 @@ export default defineComponent({
|
|
|
180
212
|
type: Boolean,
|
|
181
213
|
default: false,
|
|
182
214
|
},
|
|
215
|
+
customBody: {
|
|
216
|
+
type: Boolean,
|
|
217
|
+
default: false,
|
|
218
|
+
},
|
|
219
|
+
customHeader: {
|
|
220
|
+
type: Boolean,
|
|
221
|
+
default: false,
|
|
222
|
+
},
|
|
183
223
|
},
|
|
184
224
|
|
|
185
225
|
data() {
|
package/src/scss/utils.scss
CHANGED
|
@@ -11,9 +11,8 @@ tr.v-data-table__empty-wrapper {
|
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
|
|
15
14
|
.mf-Containers.mf-Containers-authenticated {
|
|
16
|
-
|
|
15
|
+
> .mf-Container > div.v-application {
|
|
17
16
|
padding-bottom: 2.625rem;
|
|
18
17
|
}
|
|
19
18
|
}
|
|
@@ -37,8 +36,6 @@ body.body--has-footer {
|
|
|
37
36
|
.v-icon.v-icon {
|
|
38
37
|
font-size: 22px;
|
|
39
38
|
color: var(--farm-neutral-farken);
|
|
40
|
-
;
|
|
41
|
-
|
|
42
39
|
&.mdi-checkbox-marked,
|
|
43
40
|
&.mdi-minus-box {
|
|
44
41
|
color: var(--farm-primary-base);
|
|
@@ -48,4 +45,18 @@ body.body--has-footer {
|
|
|
48
45
|
.v-input--selection-controls__ripple {
|
|
49
46
|
display: none;
|
|
50
47
|
}
|
|
51
|
-
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.collapsible-stories-class-with-line {
|
|
51
|
+
position: relative;
|
|
52
|
+
padding-right: 20px;
|
|
53
|
+
&:after {
|
|
54
|
+
content: '';
|
|
55
|
+
position: absolute;
|
|
56
|
+
height: 80%;
|
|
57
|
+
width: 1px;
|
|
58
|
+
border-right: 1px solid var(--farm-stroke-base);
|
|
59
|
+
right: 10px;
|
|
60
|
+
top: 5%;
|
|
61
|
+
}
|
|
62
|
+
}
|