@farm-investimentos/front-mfe-components 2.4.4 → 2.4.8
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 +89 -82
- 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 +89 -82
- 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/DataTableHeader/DataTableHeader.vue +8 -2
- package/src/components/Tabs/Tabs.vue +89 -86
package/package.json
CHANGED
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
</v-icon>
|
|
33
33
|
</span>
|
|
34
34
|
|
|
35
|
-
<span v-if="isTHDataTableSelect(item)">
|
|
35
|
+
<span v-if="isTHDataTableSelect(item) && showCheckbox">
|
|
36
36
|
<v-simple-checkbox
|
|
37
37
|
:indeterminate="headerProps.someItems && !headerProps.everyItem"
|
|
38
38
|
v-model="inputVal"
|
|
@@ -88,7 +88,7 @@ export default Vue.extend({
|
|
|
88
88
|
* v-model for data-table-select
|
|
89
89
|
*/
|
|
90
90
|
value: {
|
|
91
|
-
|
|
91
|
+
default: false,
|
|
92
92
|
},
|
|
93
93
|
/**
|
|
94
94
|
* Original header props
|
|
@@ -96,6 +96,12 @@ export default Vue.extend({
|
|
|
96
96
|
headerProps: {
|
|
97
97
|
type: Object,
|
|
98
98
|
},
|
|
99
|
+
/**
|
|
100
|
+
* Hide/show checkbox
|
|
101
|
+
*/
|
|
102
|
+
showCheckbox: {
|
|
103
|
+
default: true,
|
|
104
|
+
},
|
|
99
105
|
},
|
|
100
106
|
computed: {
|
|
101
107
|
inputVal: {
|
|
@@ -1,97 +1,100 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
2
|
+
<v-tabs color="secondary" v-model="selected">
|
|
3
|
+
<v-tab
|
|
4
|
+
v-for="(tab, index) in tabs"
|
|
5
|
+
:key="index"
|
|
6
|
+
:class="{ hideCounter: !showCounter }"
|
|
7
|
+
@change="changeTab(tab, index)"
|
|
8
|
+
:disabled="!allowUserChange"
|
|
9
|
+
>
|
|
10
|
+
<div
|
|
11
|
+
v-if="showCounter"
|
|
12
|
+
:class="{ 'is-selected': isSelected(index) }"
|
|
13
|
+
class="pl-3 pr-3 pt-2 pb-2 mr-2 rounded-circle d-inline-block white--text"
|
|
14
|
+
>
|
|
15
|
+
<span>{{ index + 1 }}</span>
|
|
16
|
+
</div>
|
|
17
|
+
<span class="black--text text-capitalize">{{ tab.name }}</span>
|
|
18
|
+
</v-tab>
|
|
19
|
+
</v-tabs>
|
|
20
20
|
</template>
|
|
21
21
|
|
|
22
22
|
<script>
|
|
23
23
|
import { VTabs, VTab } from 'vuetify/lib/components/VTabs';
|
|
24
24
|
export default {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
25
|
+
data: () => ({
|
|
26
|
+
selected: 0,
|
|
27
|
+
}),
|
|
28
|
+
props: {
|
|
29
|
+
tabs: {
|
|
30
|
+
type: Array,
|
|
31
|
+
default: () => [
|
|
32
|
+
{
|
|
33
|
+
name: 'Seleção',
|
|
34
|
+
path: 'selection',
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
name: 'Revisão',
|
|
38
|
+
path: 'review',
|
|
39
|
+
},
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
showCounter: {
|
|
43
|
+
type: Boolean,
|
|
44
|
+
default: true,
|
|
45
|
+
},
|
|
46
|
+
initialSelect: {
|
|
47
|
+
type: Number,
|
|
48
|
+
default: 0,
|
|
49
|
+
},
|
|
50
|
+
allowUserChange: {
|
|
51
|
+
type: Boolean,
|
|
52
|
+
default: true,
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
methods: {
|
|
56
|
+
isSelected(index) {
|
|
57
|
+
return index === this.selected;
|
|
58
|
+
},
|
|
59
|
+
changeTab(_, index) {
|
|
60
|
+
this.$emit('update', this.tabs[index]);
|
|
61
|
+
},
|
|
62
|
+
next() {
|
|
63
|
+
this.selected = this.selected + 1;
|
|
64
|
+
this.$emit('update', this.tabs[this.selected]);
|
|
65
|
+
},
|
|
66
|
+
previous() {
|
|
67
|
+
this.selected = this.selected - 1;
|
|
68
|
+
this.$emit('update', this.tabs[this.selected]);
|
|
69
|
+
},
|
|
70
|
+
toIndex(index) {
|
|
71
|
+
this.selected = index;
|
|
72
|
+
this.$emit('update', this.tabs[index]);
|
|
73
|
+
},
|
|
74
|
+
updateTabRouting: (component, item, nextRoutePrefix) => {
|
|
75
|
+
component.currentTab = item.path;
|
|
76
|
+
const nextRoute = `${nextRoutePrefix}/${item.path}`;
|
|
77
|
+
const currentRoute = component.$router.history.current.path;
|
|
78
|
+
if (nextRoute !== currentRoute) component.$router.push(nextRoute);
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
created() {
|
|
82
|
+
this.selected = this.initialSelect;
|
|
83
|
+
},
|
|
84
|
+
components: {
|
|
85
|
+
VTabs,
|
|
86
|
+
VTab,
|
|
87
|
+
},
|
|
88
88
|
};
|
|
89
89
|
</script>
|
|
90
90
|
<style scoped lang="scss">
|
|
91
91
|
div.rounded-circle {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
92
|
+
background-color: var(--v-gray-lighten3);
|
|
93
|
+
&.is-selected {
|
|
94
|
+
background-color: var(--v-secondary-base);
|
|
95
|
+
}
|
|
96
96
|
}
|
|
97
|
-
|
|
97
|
+
.v-tab--active.v-tab--disabled {
|
|
98
|
+
opacity: 1;
|
|
99
|
+
}
|
|
100
|
+
</style>
|