@farm-investimentos/front-mfe-components 15.0.1 → 15.0.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.
- package/dist/front-mfe-components.common.js +80 -277
- 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 +80 -277
- 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/Buttons/ExportButton/ExportButton.vue +2 -2
- package/src/main.ts +0 -2
- package/src/components/CardContext/CardContext.scss +0 -54
- package/src/components/CardContext/CardContext.stories.js +0 -75
- package/src/components/CardContext/CardContext.vue +0 -130
- package/src/components/CardContext/__tests__/CardContext.spec.js +0 -39
- package/src/components/CardContext/index.ts +0 -3
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
class="farm-btn--responsive"
|
|
6
6
|
outlined
|
|
7
7
|
title="Exportar"
|
|
8
|
-
color="
|
|
8
|
+
color="primary"
|
|
9
9
|
:disabled="disabled"
|
|
10
10
|
>
|
|
11
11
|
<i :class="{ 'mr-2': true, 'mdi-file-export-outline': true, mdi: true }"></i>
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
</farm-btn>
|
|
14
14
|
<farm-contextmenu v-else v-model="value" :bottom="true">
|
|
15
15
|
<template v-slot:activator="{}">
|
|
16
|
-
<farm-btn outlined title="Exportar" color="
|
|
16
|
+
<farm-btn outlined title="Exportar" color="primary" @click="toggleValue">
|
|
17
17
|
Exportar
|
|
18
18
|
<farm-icon class="ml-2"> chevron-{{ value ? 'up' : 'down' }} </farm-icon>
|
|
19
19
|
</farm-btn>
|
package/src/main.ts
CHANGED
|
@@ -15,7 +15,6 @@ import ModalPromptUser from './components/ModalPromptUser';
|
|
|
15
15
|
|
|
16
16
|
import TableContextMenu from './components/TableContextMenu';
|
|
17
17
|
import IconBox from './components/IconBox';
|
|
18
|
-
import CardContext from './components/CardContext';
|
|
19
18
|
|
|
20
19
|
import DefaultButton from './components/Buttons/DefaultButton';
|
|
21
20
|
import Collapsible from './components/Collapsible';
|
|
@@ -39,7 +38,6 @@ export {
|
|
|
39
38
|
ModalPromptUser,
|
|
40
39
|
DefaultButton,
|
|
41
40
|
IconBox,
|
|
42
|
-
CardContext,
|
|
43
41
|
Collapsible,
|
|
44
42
|
IdCaption,
|
|
45
43
|
ResourceMetaInfo,
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
.card-context {
|
|
2
|
-
width: 100%;
|
|
3
|
-
padding: 1.5rem;
|
|
4
|
-
background: #ffffff;
|
|
5
|
-
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
|
|
6
|
-
border-radius: 5px;
|
|
7
|
-
|
|
8
|
-
&.card-context--outlined {
|
|
9
|
-
box-shadow: none;
|
|
10
|
-
border: 1px solid var(--v-gray-lighten2);
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.card-context.height-full {
|
|
15
|
-
height: 100%;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.card-context-header {
|
|
19
|
-
width: 100%;
|
|
20
|
-
height: 40px;
|
|
21
|
-
display: flex;
|
|
22
|
-
align-items: center;
|
|
23
|
-
justify-content: space-between;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.card-context-content {
|
|
27
|
-
width: calc(100% - 56px);
|
|
28
|
-
height: 40px;
|
|
29
|
-
display: flex;
|
|
30
|
-
align-items: center;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.card-context-title {
|
|
34
|
-
color: #5c5c5c;
|
|
35
|
-
margin: 0;
|
|
36
|
-
font-size: 0.75rem;
|
|
37
|
-
&.card-context-content--bold {
|
|
38
|
-
font-size: 0.875rem;
|
|
39
|
-
font-weight: bold;
|
|
40
|
-
color: #1c1c1c;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.card-context-body {
|
|
45
|
-
width: 100%;
|
|
46
|
-
padding-top: 1rem;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.card-context-loading-or-error {
|
|
50
|
-
width: 100%;
|
|
51
|
-
display: flex;
|
|
52
|
-
align-items: center;
|
|
53
|
-
justify-content: center;
|
|
54
|
-
}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import CardContext from './CardContext.vue';
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
title: 'Surfaces/CardContext',
|
|
5
|
-
component: CardContext,
|
|
6
|
-
parameters: {
|
|
7
|
-
docs: {
|
|
8
|
-
description: {
|
|
9
|
-
component: `Card Context<br />
|
|
10
|
-
selector: <em>farm-card-context</em>
|
|
11
|
-
`,
|
|
12
|
-
},
|
|
13
|
-
},
|
|
14
|
-
viewMode: 'docs',
|
|
15
|
-
},
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
export const Primary = () => ({
|
|
19
|
-
template: `
|
|
20
|
-
<farm-card-context icon="mdi-currency-usd" title="Titulo do Card">
|
|
21
|
-
<p>Conteúdo do Card</p>
|
|
22
|
-
</farm-card-context>
|
|
23
|
-
`,
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
export const Secondary = () => ({
|
|
27
|
-
template: `
|
|
28
|
-
<farm-card-context icon="mdi-currency-usd" title="Titulo do Card" bold>
|
|
29
|
-
<p>Conteúdo do Card</p>
|
|
30
|
-
</farm-card-context>
|
|
31
|
-
`,
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
export const WithLoading = () => ({
|
|
35
|
-
template: `
|
|
36
|
-
<farm-card-context icon="mdi-currency-usd" title="Titulo do Card" isLoading>
|
|
37
|
-
<p>Conteúdo do Card</p>
|
|
38
|
-
</farm-card-context>
|
|
39
|
-
`,
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
export const WithLoadingLarge = () => ({
|
|
43
|
-
template: `
|
|
44
|
-
<farm-card-context icon="mdi-currency-usd" title="Titulo do Card" isLoading largeLoading>
|
|
45
|
-
<p>Conteúdo do Card</p>
|
|
46
|
-
</farm-card-context>
|
|
47
|
-
`,
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
export const WithError = () => ({
|
|
51
|
-
components: { CardContext },
|
|
52
|
-
template: `
|
|
53
|
-
<farm-card-context icon="mdi-currency-usd" title="Titulo do Card" isError>
|
|
54
|
-
<p>Conteúdo do Card</p>
|
|
55
|
-
</farm-card-context>
|
|
56
|
-
`,
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
export const NoIcon = () => ({
|
|
60
|
-
components: { CardContext },
|
|
61
|
-
template: `
|
|
62
|
-
<farm-card-context title="Titulo do Card">
|
|
63
|
-
<p>Conteúdo do Card</p>
|
|
64
|
-
</farm-card-context>
|
|
65
|
-
`,
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
export const TooltipText = () => ({
|
|
69
|
-
template: `
|
|
70
|
-
<farm-card-context tooltipText="Lorem Ipsum is simply dummy text of the printing and typesetting industry" icon="mdi-currency-usd" title="Titulo do Card">
|
|
71
|
-
<p>Conteúdo do Card</p>
|
|
72
|
-
</farm-card-context>
|
|
73
|
-
`,
|
|
74
|
-
});
|
|
75
|
-
|
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div
|
|
3
|
-
:class="{
|
|
4
|
-
'card-context': true,
|
|
5
|
-
'height-full': this.full,
|
|
6
|
-
'card-context--outlined': this.outlined,
|
|
7
|
-
}"
|
|
8
|
-
>
|
|
9
|
-
<div class="card-context-header" v-if="isSuccess && title">
|
|
10
|
-
<farm-icon-box v-if="icon" :icon="icon" />
|
|
11
|
-
<div class="card-context-content">
|
|
12
|
-
<div class="d-flex align-center">
|
|
13
|
-
<p :class="{
|
|
14
|
-
'mr-2': true,
|
|
15
|
-
'mb-1': true,
|
|
16
|
-
'card-context-title': true,
|
|
17
|
-
'card-context-content--bold': bold }"
|
|
18
|
-
>
|
|
19
|
-
{{ title }}
|
|
20
|
-
</p>
|
|
21
|
-
<farm-tooltip v-if="tooltipText !== null">
|
|
22
|
-
{{ tooltipText }}
|
|
23
|
-
<template v-slot:activator="{}">
|
|
24
|
-
<farm-icon size="sm" color="gray">help-circle</farm-icon>
|
|
25
|
-
</template>
|
|
26
|
-
</farm-tooltip>
|
|
27
|
-
</div>
|
|
28
|
-
</div>
|
|
29
|
-
</div>
|
|
30
|
-
<div class="card-context-body" v-if="isSuccess">
|
|
31
|
-
<slot></slot>
|
|
32
|
-
</div>
|
|
33
|
-
<div class="card-context-loading-or-error" v-if="isLoading">
|
|
34
|
-
<farm-loader :size="isLargeLoading" />
|
|
35
|
-
</div>
|
|
36
|
-
<div class="card-context-loading-or-error" v-if="isError">
|
|
37
|
-
<farm-alert-reload :label="errorLabel" @onClick="$emit('onLoad')" />
|
|
38
|
-
</div>
|
|
39
|
-
</div>
|
|
40
|
-
</template>
|
|
41
|
-
|
|
42
|
-
<script lang="ts">
|
|
43
|
-
import Vue from 'vue';
|
|
44
|
-
|
|
45
|
-
export default Vue.extend({
|
|
46
|
-
name: 'farm-card-context',
|
|
47
|
-
props: {
|
|
48
|
-
/**
|
|
49
|
-
* Title
|
|
50
|
-
*/
|
|
51
|
-
title: {
|
|
52
|
-
type: String,
|
|
53
|
-
required: true,
|
|
54
|
-
},
|
|
55
|
-
/**
|
|
56
|
-
* Set bold text
|
|
57
|
-
*/
|
|
58
|
-
bold: {
|
|
59
|
-
type: Boolean,
|
|
60
|
-
default: false,
|
|
61
|
-
},
|
|
62
|
-
/**
|
|
63
|
-
* Icon (from Material Icons)
|
|
64
|
-
* Example: mdi-chart-bar
|
|
65
|
-
*/
|
|
66
|
-
icon: {
|
|
67
|
-
type: String,
|
|
68
|
-
default: null,
|
|
69
|
-
},
|
|
70
|
-
/**
|
|
71
|
-
* Show loader
|
|
72
|
-
*/
|
|
73
|
-
isLoading: {
|
|
74
|
-
type: Boolean,
|
|
75
|
-
default: false,
|
|
76
|
-
},
|
|
77
|
-
largeLoading: {
|
|
78
|
-
type: Boolean,
|
|
79
|
-
default: false,
|
|
80
|
-
},
|
|
81
|
-
/**
|
|
82
|
-
* Show error alert
|
|
83
|
-
*/
|
|
84
|
-
isError: {
|
|
85
|
-
type: Boolean,
|
|
86
|
-
default: false,
|
|
87
|
-
},
|
|
88
|
-
/**
|
|
89
|
-
* Label to be shown in error alert
|
|
90
|
-
*/
|
|
91
|
-
errorLabel: {
|
|
92
|
-
type: String,
|
|
93
|
-
default: 'Ocorreu um erro',
|
|
94
|
-
},
|
|
95
|
-
/**
|
|
96
|
-
* Is full
|
|
97
|
-
*/
|
|
98
|
-
full: {
|
|
99
|
-
type: Boolean,
|
|
100
|
-
default: false,
|
|
101
|
-
},
|
|
102
|
-
/**
|
|
103
|
-
* Is outlined
|
|
104
|
-
*/
|
|
105
|
-
outlined: {
|
|
106
|
-
type: Boolean,
|
|
107
|
-
default: false,
|
|
108
|
-
},
|
|
109
|
-
/**
|
|
110
|
-
* Show Tooltip and help text
|
|
111
|
-
*/
|
|
112
|
-
tooltipText: {
|
|
113
|
-
type: String,
|
|
114
|
-
default: null,
|
|
115
|
-
}
|
|
116
|
-
},
|
|
117
|
-
computed: {
|
|
118
|
-
isSuccess() {
|
|
119
|
-
return !this.isLoading && !this.isError;
|
|
120
|
-
},
|
|
121
|
-
isLargeLoading() {
|
|
122
|
-
return this.largeLoading ? 'normal' : 'small';
|
|
123
|
-
},
|
|
124
|
-
},
|
|
125
|
-
});
|
|
126
|
-
</script>
|
|
127
|
-
|
|
128
|
-
<style lang="scss" scoped>
|
|
129
|
-
@import './CardContext.scss';
|
|
130
|
-
</style>
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { shallowMount } from '@vue/test-utils';
|
|
2
|
-
import CardContext from '../CardContext';
|
|
3
|
-
|
|
4
|
-
describe('CardContext component', () => {
|
|
5
|
-
let wrapper;
|
|
6
|
-
let component;
|
|
7
|
-
|
|
8
|
-
beforeEach(() => {
|
|
9
|
-
wrapper = shallowMount(CardContext, {
|
|
10
|
-
propsData: {
|
|
11
|
-
title: 'title',
|
|
12
|
-
},
|
|
13
|
-
});
|
|
14
|
-
component = wrapper.vm;
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
test('Created hook', () => {
|
|
18
|
-
expect(wrapper).toBeDefined();
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
describe('mount component', () => {
|
|
22
|
-
it('renders correctly', () => {
|
|
23
|
-
expect(wrapper.element).toMatchSnapshot();
|
|
24
|
-
});
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
describe('Computed properties', () => {
|
|
28
|
-
it('Should compute isLargeLoading for false', () => {
|
|
29
|
-
expect(component.isLargeLoading).toEqual('small');
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
it('Should compute isLargeLoading for true', async () => {
|
|
33
|
-
await wrapper.setProps({
|
|
34
|
-
largeLoading: true,
|
|
35
|
-
});
|
|
36
|
-
expect(component.isLargeLoading).toEqual('normal');
|
|
37
|
-
});
|
|
38
|
-
});
|
|
39
|
-
});
|