@nixweb/nixloc-ui 0.0.142 → 0.0.144
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/package.json
CHANGED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div class="btn-container side-by-side text-center">
|
|
4
|
+
<div
|
|
5
|
+
v-for="option in options"
|
|
6
|
+
class="btn-item side-by-side"
|
|
7
|
+
:class="{ selected: option.value == selected }"
|
|
8
|
+
@click="execute(option)"
|
|
9
|
+
:key="option.title"
|
|
10
|
+
>
|
|
11
|
+
<i :class="option.classIcon"></i>
|
|
12
|
+
<span class="btn-title">{{ option.title }}</span>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
17
|
+
<script>
|
|
18
|
+
import { mapMutations } from "vuex";
|
|
19
|
+
|
|
20
|
+
export default {
|
|
21
|
+
name: "ButtonFilter",
|
|
22
|
+
props: {
|
|
23
|
+
initialOption: String,
|
|
24
|
+
options: {
|
|
25
|
+
type: Array,
|
|
26
|
+
default: [],
|
|
27
|
+
},
|
|
28
|
+
value: String,
|
|
29
|
+
params: Object,
|
|
30
|
+
clicked: Function,
|
|
31
|
+
},
|
|
32
|
+
data() {
|
|
33
|
+
return {
|
|
34
|
+
selected: "",
|
|
35
|
+
};
|
|
36
|
+
},
|
|
37
|
+
created() {
|
|
38
|
+
if (this.initialOption) this.selected = this.initialOption;
|
|
39
|
+
},
|
|
40
|
+
methods: {
|
|
41
|
+
...mapMutations("generic", ["addEvent"]),
|
|
42
|
+
execute(option) {
|
|
43
|
+
if (this.initialOption) this.selected = option.value;
|
|
44
|
+
this.addEvent({ name: option.eventName, data: option });
|
|
45
|
+
this.$emit("input", option.value);
|
|
46
|
+
if (this.clicked) this.clicked(this.params);
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
</script>
|
|
51
|
+
<style scoped>
|
|
52
|
+
.btn-container {
|
|
53
|
+
margin-left: 10px;
|
|
54
|
+
margin-bottom: 15px;
|
|
55
|
+
height: 40px;
|
|
56
|
+
border: 1px solid #e5e4e8;
|
|
57
|
+
border-radius: 50px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.btn-title {
|
|
61
|
+
margin-left: 10px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.btn-item {
|
|
65
|
+
margin-top: 5px;
|
|
66
|
+
margin-left: 10px;
|
|
67
|
+
margin-right: 10px;
|
|
68
|
+
padding-left: 10px;
|
|
69
|
+
padding-right: 10px;
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.selected {
|
|
74
|
+
background-color: #f7f7f7;
|
|
75
|
+
padding-left: 10px;
|
|
76
|
+
padding-right: 10px;
|
|
77
|
+
border-radius: 15px;
|
|
78
|
+
}
|
|
79
|
+
</style>
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
<Molded :borderRadius="15">
|
|
31
31
|
<div v-for="item in items" :key="item.eventName">
|
|
32
32
|
<div
|
|
33
|
+
v-if="isVisible(item.conditionVisibility)"
|
|
33
34
|
:style="item.style"
|
|
34
35
|
class="item"
|
|
35
36
|
@click="execute(item.eventName)"
|
|
@@ -43,7 +44,10 @@
|
|
|
43
44
|
</b-col>
|
|
44
45
|
</b-row>
|
|
45
46
|
</div>
|
|
46
|
-
<hr
|
|
47
|
+
<hr
|
|
48
|
+
v-if="item.hr && isVisible(item.conditionVisibility)"
|
|
49
|
+
class="hr-dropdown"
|
|
50
|
+
/>
|
|
47
51
|
</div>
|
|
48
52
|
</Molded>
|
|
49
53
|
</div>
|
|
@@ -87,6 +91,13 @@ export default {
|
|
|
87
91
|
this.toggle();
|
|
88
92
|
this.addEvent({ name: eventName, data: this.param });
|
|
89
93
|
},
|
|
94
|
+
isVisible(conditionVisibility) {
|
|
95
|
+
// se for undefined, quer dizer que não tem condicional, então pode mostrar
|
|
96
|
+
if (conditionVisibility == undefined) return true;
|
|
97
|
+
|
|
98
|
+
var verify = `this.param.${conditionVisibility}`;
|
|
99
|
+
if (eval(verify)) return true;
|
|
100
|
+
},
|
|
90
101
|
},
|
|
91
102
|
};
|
|
92
103
|
</script>
|
|
@@ -11,12 +11,12 @@
|
|
|
11
11
|
:eventData="row"
|
|
12
12
|
/>
|
|
13
13
|
<Dropdown
|
|
14
|
-
v-if="obj.typeButton == '
|
|
14
|
+
v-if="obj.typeButton == 'dropdown'"
|
|
15
15
|
:title="obj.button.title"
|
|
16
16
|
:type="obj.button.type"
|
|
17
17
|
:size="obj.button.size"
|
|
18
18
|
:classIcon="obj.button.classIcon"
|
|
19
|
-
:
|
|
19
|
+
:param="row"
|
|
20
20
|
:items="obj.button.items"
|
|
21
21
|
/>
|
|
22
22
|
</div>
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
:key="item.title"
|
|
7
7
|
>
|
|
8
8
|
<div class="badge-totalization" :class="item.classCss">
|
|
9
|
-
<span>{{ item.title }}</span>
|
|
10
|
-
<span>{{ item.value }}</span>
|
|
9
|
+
<span>{{ item.title }} </span>
|
|
10
|
+
<span>{{ item.value | currency }}</span>
|
|
11
11
|
</div>
|
|
12
12
|
</div>
|
|
13
13
|
</div>
|
|
@@ -34,14 +34,14 @@ export default {
|
|
|
34
34
|
padding-left: 5px;
|
|
35
35
|
padding-right: 5px;
|
|
36
36
|
border-radius: 30px;
|
|
37
|
-
font-size:
|
|
37
|
+
font-size: 14px;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
.
|
|
40
|
+
.revenue {
|
|
41
41
|
color: darkblue;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
.
|
|
44
|
+
.expense {
|
|
45
45
|
color: red;
|
|
46
46
|
}
|
|
47
47
|
</style>
|