@nixweb/nixloc-ui 1.10.0 → 1.12.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/@nixweb/nixloc-ui/package.json +88 -88
- package/@nixweb/nixloc-ui/src/App.vue +13 -13
- package/@nixweb/nixloc-ui/src/component/forms/Button.vue +163 -163
- package/@nixweb/nixloc-ui/src/component/forms/CheckboxGroup.vue +69 -69
- package/@nixweb/nixloc-ui/src/component/forms/CheckboxServer.vue +192 -192
- package/@nixweb/nixloc-ui/src/component/forms/CheckboxSimple.vue +60 -60
- package/@nixweb/nixloc-ui/src/component/forms/Color.vue +38 -38
- package/@nixweb/nixloc-ui/src/component/forms/DateTime.vue +170 -170
- package/@nixweb/nixloc-ui/src/component/forms/Dropdown.vue +236 -236
- package/@nixweb/nixloc-ui/src/component/forms/EditorHtml.vue +132 -132
- package/@nixweb/nixloc-ui/src/component/forms/FileUpload.vue +170 -170
- package/@nixweb/nixloc-ui/src/component/forms/InputDecimal.vue +153 -153
- package/@nixweb/nixloc-ui/src/component/forms/InputNumber.vue +160 -160
- package/@nixweb/nixloc-ui/src/component/forms/InputPassword.vue +148 -148
- package/@nixweb/nixloc-ui/src/component/forms/InputText.vue +174 -174
- package/@nixweb/nixloc-ui/src/component/forms/Modal.vue +57 -57
- package/@nixweb/nixloc-ui/src/component/forms/RadioGroup.vue +91 -91
- package/@nixweb/nixloc-ui/src/component/forms/Select.vue +378 -378
- package/@nixweb/nixloc-ui/src/component/forms/SelectStatic.vue +198 -198
- package/@nixweb/nixloc-ui/src/component/forms/Slider.vue +18 -18
- package/@nixweb/nixloc-ui/src/component/forms/TextArea.vue +138 -138
- package/@nixweb/nixloc-ui/src/component/layout/Alert.vue +88 -88
- package/@nixweb/nixloc-ui/src/component/layout/Badge.vue +111 -111
- package/@nixweb/nixloc-ui/src/component/layout/FixedBar.vue +103 -103
- package/@nixweb/nixloc-ui/src/component/layout/Header.vue +56 -56
- package/@nixweb/nixloc-ui/src/component/layout/LoadingFullPage.vue +27 -27
- package/@nixweb/nixloc-ui/src/component/layout/Menu.vue +287 -287
- package/@nixweb/nixloc-ui/src/component/layout/Molded.vue +30 -30
- package/@nixweb/nixloc-ui/src/component/layout/Panel.vue +185 -185
- package/@nixweb/nixloc-ui/src/component/layout/Popover.vue +126 -126
- package/@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue +57 -57
- package/@nixweb/nixloc-ui/src/component/layout/Wizard.vue +211 -211
- package/@nixweb/nixloc-ui/src/component/shared/Collapse.vue +131 -131
- package/@nixweb/nixloc-ui/src/component/shared/ExportPDF.vue +116 -116
- package/@nixweb/nixloc-ui/src/component/shared/HorizontalFilter.vue +64 -64
- package/@nixweb/nixloc-ui/src/component/shared/Loading.vue +107 -107
- package/@nixweb/nixloc-ui/src/component/shared/LoadingMoreButton.vue +23 -23
- package/@nixweb/nixloc-ui/src/component/shared/Messages.vue +109 -109
- package/@nixweb/nixloc-ui/src/component/shared/PDFViewer.vue +24 -24
- package/@nixweb/nixloc-ui/src/component/shared/Pagination.vue +108 -108
- package/@nixweb/nixloc-ui/src/component/shared/ProgressBar.vue +25 -25
- package/@nixweb/nixloc-ui/src/component/shared/QueryButton.vue +66 -66
- package/@nixweb/nixloc-ui/src/component/shared/Search.vue +174 -174
- package/@nixweb/nixloc-ui/src/component/shared/Table.vue +174 -174
- package/@nixweb/nixloc-ui/src/component/shared/TableButton.vue +36 -36
- package/@nixweb/nixloc-ui/src/component/shared/TableTotalization.vue +47 -47
- package/@nixweb/nixloc-ui/src/component/shared/Tip.vue +42 -42
- package/@nixweb/nixloc-ui/src/component/shared/Toast.vue +69 -69
- package/@nixweb/nixloc-ui/src/component/shared/VerticalFilter.vue +97 -97
- package/@nixweb/nixloc-ui/src/component/shared/query-builder/AddRule.vue +203 -203
- package/@nixweb/nixloc-ui/src/component/shared/query-builder/DynamicComponentList.vue +70 -70
- package/@nixweb/nixloc-ui/src/component/shared/query-builder/QueryBuilder.vue +69 -69
- package/@nixweb/nixloc-ui/src/component/shared/query-builder/utilities.js +21 -21
- package/@nixweb/nixloc-ui/src/component/template/ListViewWithDataHandler.vue +429 -429
- package/@nixweb/nixloc-ui/src/component/template/ViewTemplateConfiguration.vue +64 -64
- package/@nixweb/nixloc-ui/src/component/template/ViewTemplateWithSalveCancel.vue +32 -32
- package/@nixweb/nixloc-ui/src/component/template/ViewTemplateWithTable.vue +62 -62
- package/@nixweb/nixloc-ui/src/config/axios.js +9 -9
- package/@nixweb/nixloc-ui/src/config/dicas.js +14 -14
- package/@nixweb/nixloc-ui/src/config/router.js +13 -13
- package/@nixweb/nixloc-ui/src/config/token.js +14 -14
- package/@nixweb/nixloc-ui/src/main.js +23 -23
- package/@nixweb/nixloc-ui/src/store/modules/generic.js +815 -815
- package/@nixweb/nixloc-ui/src/store/modules/validation.js +38 -38
- package/@nixweb/nixloc-ui/src/store/store.js +13 -13
- package/package.json +1 -1
- package/src/component/forms/InputDecimal.vue +18 -5
- package/src/component/training/CourseView.vue +16 -7
- package/src/component/value-objects/Address.vue +35 -19
- package/src/store/modules/generic.js +0 -1
|
@@ -1,153 +1,153 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="form-group">
|
|
3
|
-
<label v-if="title">
|
|
4
|
-
<span class="title">{{ title }}</span>
|
|
5
|
-
<span class="required" v-if="required">*</span>
|
|
6
|
-
<Tip :field="field" :formName="formName" />
|
|
7
|
-
</label>
|
|
8
|
-
<div class="inner-addon right-addon">
|
|
9
|
-
<div class="required glyphicon" v-if="notifications.length > 0 && formDirty">
|
|
10
|
-
<i class="fas fa-exclamation-triangle"></i>
|
|
11
|
-
</div>
|
|
12
|
-
<slot v-else></slot>
|
|
13
|
-
<vue-numeric :style="_style" class="form-control" v-on:keyup.enter.native="pressedEnter"
|
|
14
|
-
:class="{ 'is-invalid': notifications.length > 0 && formDirty }" :placeholder="placeholder" :disabled="disabled"
|
|
15
|
-
currency="R$" separator="." :minus="allowNegative" v-bind:precision="precision" v-model="valueLocal">
|
|
16
|
-
</vue-numeric>
|
|
17
|
-
|
|
18
|
-
</div>
|
|
19
|
-
<div v-if="formDirty">
|
|
20
|
-
<div v-for="message in notifications" :key="message">
|
|
21
|
-
<span class="invalid">{{ message }}</span>
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
25
|
-
</template>
|
|
26
|
-
|
|
27
|
-
<script>
|
|
28
|
-
import Tip from "../shared/Tip.vue";
|
|
29
|
-
import VueNumeric from "vue-numeric";
|
|
30
|
-
|
|
31
|
-
import { mapState, mapMutations } from "vuex";
|
|
32
|
-
|
|
33
|
-
export default {
|
|
34
|
-
name: "InputDecimal",
|
|
35
|
-
mixins: [],
|
|
36
|
-
props: {
|
|
37
|
-
title: String,
|
|
38
|
-
field: String,
|
|
39
|
-
disabled: Boolean,
|
|
40
|
-
placeholder: String,
|
|
41
|
-
formName: String,
|
|
42
|
-
_style: String,
|
|
43
|
-
precision: {
|
|
44
|
-
type: Number,
|
|
45
|
-
default: 2,
|
|
46
|
-
},
|
|
47
|
-
markFormDirty: {
|
|
48
|
-
type: Boolean,
|
|
49
|
-
default: true,
|
|
50
|
-
},
|
|
51
|
-
allowNegative: {
|
|
52
|
-
type: Boolean,
|
|
53
|
-
default: false,
|
|
54
|
-
},
|
|
55
|
-
required: Boolean,
|
|
56
|
-
value: Number,
|
|
57
|
-
enter: Function,
|
|
58
|
-
},
|
|
59
|
-
components: {
|
|
60
|
-
VueNumeric,
|
|
61
|
-
Tip,
|
|
62
|
-
},
|
|
63
|
-
data() {
|
|
64
|
-
return {
|
|
65
|
-
notifications: [],
|
|
66
|
-
formDirty: false,
|
|
67
|
-
_value: 0,
|
|
68
|
-
valueLocal: 20,
|
|
69
|
-
isPrecision: false
|
|
70
|
-
};
|
|
71
|
-
},
|
|
72
|
-
created() {
|
|
73
|
-
// não carregar as validações iniciais para number
|
|
74
|
-
this.valueLocal = this.value;
|
|
75
|
-
},
|
|
76
|
-
methods: {
|
|
77
|
-
...mapMutations("validation", [
|
|
78
|
-
"addValidation",
|
|
79
|
-
"removeValidation",
|
|
80
|
-
"updateFormDirty",
|
|
81
|
-
]),
|
|
82
|
-
validate() {
|
|
83
|
-
this.notifications = [];
|
|
84
|
-
if (this.valueLocal == 0) return;
|
|
85
|
-
if (this.required && !this.valueLocal) {
|
|
86
|
-
var message = `${this.title} não pode ser vazio!`;
|
|
87
|
-
this.notifications.push(message);
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
pressedEnter() {
|
|
91
|
-
if (this.enter) this.enter();
|
|
92
|
-
},
|
|
93
|
-
},
|
|
94
|
-
computed: {
|
|
95
|
-
...mapState("validation", ["resetForm"]),
|
|
96
|
-
},
|
|
97
|
-
watch: {
|
|
98
|
-
value() {
|
|
99
|
-
this.valueLocal = this.value;
|
|
100
|
-
},
|
|
101
|
-
valueLocal() {
|
|
102
|
-
this.validate();
|
|
103
|
-
this.$emit("input", this.valueLocal);
|
|
104
|
-
this.formDirty = true;
|
|
105
|
-
if (this.markFormDirty) this.updateFormDirty(true);
|
|
106
|
-
},
|
|
107
|
-
notifications() {
|
|
108
|
-
let self = this;
|
|
109
|
-
this.notifications.forEach(function (notification) {
|
|
110
|
-
let obj = {
|
|
111
|
-
key: self.field + "&" + self.formName,
|
|
112
|
-
formName: self.formName,
|
|
113
|
-
notification: notification,
|
|
114
|
-
};
|
|
115
|
-
self.addValidation(obj);
|
|
116
|
-
});
|
|
117
|
-
|
|
118
|
-
if (this.notifications.length == 0) {
|
|
119
|
-
let obj = {
|
|
120
|
-
key: self.field + "&" + self.formName,
|
|
121
|
-
formName: self.formName,
|
|
122
|
-
};
|
|
123
|
-
self.removeValidation(obj);
|
|
124
|
-
}
|
|
125
|
-
},
|
|
126
|
-
resetForm: {
|
|
127
|
-
handler(form) {
|
|
128
|
-
if (form.name == this.formName) this.formDirty = false;
|
|
129
|
-
},
|
|
130
|
-
deep: true,
|
|
131
|
-
},
|
|
132
|
-
},
|
|
133
|
-
};
|
|
134
|
-
</script>
|
|
135
|
-
|
|
136
|
-
<style scoped>
|
|
137
|
-
.title {
|
|
138
|
-
font-size: 14px !important;
|
|
139
|
-
font-weight: 400 !important;
|
|
140
|
-
color: #0a0a0a;
|
|
141
|
-
letter-spacing: 0.5px !important;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.success {
|
|
145
|
-
color: #94aa2a;
|
|
146
|
-
font-size: 14px;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.invalid {
|
|
150
|
-
color: #f0134d;
|
|
151
|
-
font-size: 14px;
|
|
152
|
-
}
|
|
153
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="form-group">
|
|
3
|
+
<label v-if="title">
|
|
4
|
+
<span class="title">{{ title }}</span>
|
|
5
|
+
<span class="required" v-if="required">*</span>
|
|
6
|
+
<Tip :field="field" :formName="formName" />
|
|
7
|
+
</label>
|
|
8
|
+
<div class="inner-addon right-addon">
|
|
9
|
+
<div class="required glyphicon" v-if="notifications.length > 0 && formDirty">
|
|
10
|
+
<i class="fas fa-exclamation-triangle"></i>
|
|
11
|
+
</div>
|
|
12
|
+
<slot v-else></slot>
|
|
13
|
+
<vue-numeric :style="_style" class="form-control" v-on:keyup.enter.native="pressedEnter"
|
|
14
|
+
:class="{ 'is-invalid': notifications.length > 0 && formDirty }" :placeholder="placeholder" :disabled="disabled"
|
|
15
|
+
currency="R$" separator="." :minus="allowNegative" v-bind:precision="precision" v-model="valueLocal">
|
|
16
|
+
</vue-numeric>
|
|
17
|
+
|
|
18
|
+
</div>
|
|
19
|
+
<div v-if="formDirty">
|
|
20
|
+
<div v-for="message in notifications" :key="message">
|
|
21
|
+
<span class="invalid">{{ message }}</span>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</template>
|
|
26
|
+
|
|
27
|
+
<script>
|
|
28
|
+
import Tip from "../shared/Tip.vue";
|
|
29
|
+
import VueNumeric from "vue-numeric";
|
|
30
|
+
|
|
31
|
+
import { mapState, mapMutations } from "vuex";
|
|
32
|
+
|
|
33
|
+
export default {
|
|
34
|
+
name: "InputDecimal",
|
|
35
|
+
mixins: [],
|
|
36
|
+
props: {
|
|
37
|
+
title: String,
|
|
38
|
+
field: String,
|
|
39
|
+
disabled: Boolean,
|
|
40
|
+
placeholder: String,
|
|
41
|
+
formName: String,
|
|
42
|
+
_style: String,
|
|
43
|
+
precision: {
|
|
44
|
+
type: Number,
|
|
45
|
+
default: 2,
|
|
46
|
+
},
|
|
47
|
+
markFormDirty: {
|
|
48
|
+
type: Boolean,
|
|
49
|
+
default: true,
|
|
50
|
+
},
|
|
51
|
+
allowNegative: {
|
|
52
|
+
type: Boolean,
|
|
53
|
+
default: false,
|
|
54
|
+
},
|
|
55
|
+
required: Boolean,
|
|
56
|
+
value: Number,
|
|
57
|
+
enter: Function,
|
|
58
|
+
},
|
|
59
|
+
components: {
|
|
60
|
+
VueNumeric,
|
|
61
|
+
Tip,
|
|
62
|
+
},
|
|
63
|
+
data() {
|
|
64
|
+
return {
|
|
65
|
+
notifications: [],
|
|
66
|
+
formDirty: false,
|
|
67
|
+
_value: 0,
|
|
68
|
+
valueLocal: 20,
|
|
69
|
+
isPrecision: false
|
|
70
|
+
};
|
|
71
|
+
},
|
|
72
|
+
created() {
|
|
73
|
+
// não carregar as validações iniciais para number
|
|
74
|
+
this.valueLocal = this.value;
|
|
75
|
+
},
|
|
76
|
+
methods: {
|
|
77
|
+
...mapMutations("validation", [
|
|
78
|
+
"addValidation",
|
|
79
|
+
"removeValidation",
|
|
80
|
+
"updateFormDirty",
|
|
81
|
+
]),
|
|
82
|
+
validate() {
|
|
83
|
+
this.notifications = [];
|
|
84
|
+
if (this.valueLocal == 0) return;
|
|
85
|
+
if (this.required && !this.valueLocal) {
|
|
86
|
+
var message = `${this.title} não pode ser vazio!`;
|
|
87
|
+
this.notifications.push(message);
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
pressedEnter() {
|
|
91
|
+
if (this.enter) this.enter();
|
|
92
|
+
},
|
|
93
|
+
},
|
|
94
|
+
computed: {
|
|
95
|
+
...mapState("validation", ["resetForm"]),
|
|
96
|
+
},
|
|
97
|
+
watch: {
|
|
98
|
+
value() {
|
|
99
|
+
this.valueLocal = this.value;
|
|
100
|
+
},
|
|
101
|
+
valueLocal() {
|
|
102
|
+
this.validate();
|
|
103
|
+
this.$emit("input", this.valueLocal);
|
|
104
|
+
this.formDirty = true;
|
|
105
|
+
if (this.markFormDirty) this.updateFormDirty(true);
|
|
106
|
+
},
|
|
107
|
+
notifications() {
|
|
108
|
+
let self = this;
|
|
109
|
+
this.notifications.forEach(function (notification) {
|
|
110
|
+
let obj = {
|
|
111
|
+
key: self.field + "&" + self.formName,
|
|
112
|
+
formName: self.formName,
|
|
113
|
+
notification: notification,
|
|
114
|
+
};
|
|
115
|
+
self.addValidation(obj);
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
if (this.notifications.length == 0) {
|
|
119
|
+
let obj = {
|
|
120
|
+
key: self.field + "&" + self.formName,
|
|
121
|
+
formName: self.formName,
|
|
122
|
+
};
|
|
123
|
+
self.removeValidation(obj);
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
resetForm: {
|
|
127
|
+
handler(form) {
|
|
128
|
+
if (form.name == this.formName) this.formDirty = false;
|
|
129
|
+
},
|
|
130
|
+
deep: true,
|
|
131
|
+
},
|
|
132
|
+
},
|
|
133
|
+
};
|
|
134
|
+
</script>
|
|
135
|
+
|
|
136
|
+
<style scoped>
|
|
137
|
+
.title {
|
|
138
|
+
font-size: 14px !important;
|
|
139
|
+
font-weight: 400 !important;
|
|
140
|
+
color: #0a0a0a;
|
|
141
|
+
letter-spacing: 0.5px !important;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.success {
|
|
145
|
+
color: #94aa2a;
|
|
146
|
+
font-size: 14px;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.invalid {
|
|
150
|
+
color: #f0134d;
|
|
151
|
+
font-size: 14px;
|
|
152
|
+
}
|
|
153
|
+
</style>
|
|
@@ -1,160 +1,160 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="form-group">
|
|
3
|
-
<label v-if="title">
|
|
4
|
-
<span class="title">{{ title }}</span>
|
|
5
|
-
<span class="required" v-if="required">*</span>
|
|
6
|
-
<Tip :field="field" :formName="formName" />
|
|
7
|
-
</label>
|
|
8
|
-
<div class="inner-addon right-addon">
|
|
9
|
-
<i v-if="notifications.length > 0 && formDirty" class="required glyphicon fas fa-exclamation-triangle"></i>
|
|
10
|
-
<slot v-else></slot>
|
|
11
|
-
<input :style="_style" class="form-control" type="number" :disabled="disabled" v-model="valueLocal"
|
|
12
|
-
@keyup.enter.prevent="pressedEnter" />
|
|
13
|
-
</div>
|
|
14
|
-
|
|
15
|
-
<div v-if="formDirty">
|
|
16
|
-
<div v-for="message in notifications" :key="message">
|
|
17
|
-
<span class="invalid">{{ message }}</span>
|
|
18
|
-
</div>
|
|
19
|
-
</div>
|
|
20
|
-
</div>
|
|
21
|
-
</template>
|
|
22
|
-
|
|
23
|
-
<script>
|
|
24
|
-
import Tip from "../shared/Tip.vue";
|
|
25
|
-
|
|
26
|
-
import { mapState, mapMutations } from "vuex";
|
|
27
|
-
|
|
28
|
-
export default {
|
|
29
|
-
name: "InputNumber",
|
|
30
|
-
components: { Tip },
|
|
31
|
-
props: {
|
|
32
|
-
title: String,
|
|
33
|
-
field: String,
|
|
34
|
-
_style: String,
|
|
35
|
-
placeholder: String,
|
|
36
|
-
disabled: Boolean,
|
|
37
|
-
formName: String,
|
|
38
|
-
required: Boolean,
|
|
39
|
-
maxLength: Number,
|
|
40
|
-
type: {
|
|
41
|
-
type: String,
|
|
42
|
-
default: "float",
|
|
43
|
-
},
|
|
44
|
-
markFormDirty: {
|
|
45
|
-
type: Boolean,
|
|
46
|
-
default: true,
|
|
47
|
-
},
|
|
48
|
-
params: Object,
|
|
49
|
-
value: Number,
|
|
50
|
-
changed: Function,
|
|
51
|
-
enter: Function,
|
|
52
|
-
},
|
|
53
|
-
data() {
|
|
54
|
-
return {
|
|
55
|
-
notifications: [],
|
|
56
|
-
formDirty: false,
|
|
57
|
-
valueLocal: 0,
|
|
58
|
-
precision: 1,
|
|
59
|
-
};
|
|
60
|
-
},
|
|
61
|
-
created() {
|
|
62
|
-
// não carregar as validações iniciais para number
|
|
63
|
-
this.valueLocal = this.value;
|
|
64
|
-
},
|
|
65
|
-
|
|
66
|
-
methods: {
|
|
67
|
-
...mapMutations("validation", [
|
|
68
|
-
"addValidation",
|
|
69
|
-
"removeValidation",
|
|
70
|
-
"updateFormDirty",
|
|
71
|
-
]),
|
|
72
|
-
validate() {
|
|
73
|
-
this.notifications = [];
|
|
74
|
-
if (this.value == 0) return;
|
|
75
|
-
if (this.required && !this.value) {
|
|
76
|
-
var message = `${this.title} não pode ser vazio!`;
|
|
77
|
-
this.notifications.push(message);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
if (this.valueLocal.toString().length > this.maxLength) {
|
|
81
|
-
var message = `Valor inválido!`;
|
|
82
|
-
this.notifications.push(message);
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
|
-
pressedEnter() {
|
|
86
|
-
if (this.enter) this.enter(this.params);
|
|
87
|
-
},
|
|
88
|
-
},
|
|
89
|
-
computed: {
|
|
90
|
-
...mapState("validation", ["resetForm"]),
|
|
91
|
-
},
|
|
92
|
-
watch: {
|
|
93
|
-
value() {
|
|
94
|
-
this.valueLocal = this.value;
|
|
95
|
-
if (this.changed) this.changed();
|
|
96
|
-
},
|
|
97
|
-
valueLocal() {
|
|
98
|
-
this.validate();
|
|
99
|
-
|
|
100
|
-
let valueLocal;
|
|
101
|
-
if (this.type === "int") valueLocal = parseInt(this.valueLocal);
|
|
102
|
-
if (this.type === "float") valueLocal = parseFloat(this.valueLocal);
|
|
103
|
-
|
|
104
|
-
this.$emit("input", valueLocal);
|
|
105
|
-
this.formDirty = true;
|
|
106
|
-
if (this.markFormDirty) this.updateFormDirty(true);
|
|
107
|
-
|
|
108
|
-
this.valueLocal = valueLocal;
|
|
109
|
-
},
|
|
110
|
-
notifications() {
|
|
111
|
-
let self = this;
|
|
112
|
-
this.notifications.forEach(function (notification) {
|
|
113
|
-
let obj = {
|
|
114
|
-
key: self.field + "&" + self.formName,
|
|
115
|
-
formName: self.formName,
|
|
116
|
-
notification: notification,
|
|
117
|
-
};
|
|
118
|
-
self.addValidation(obj);
|
|
119
|
-
});
|
|
120
|
-
|
|
121
|
-
if (this.notifications.length == 0) {
|
|
122
|
-
let obj = {
|
|
123
|
-
key: self.field + "&" + self.formName,
|
|
124
|
-
formName: self.formName,
|
|
125
|
-
};
|
|
126
|
-
self.removeValidation(obj);
|
|
127
|
-
}
|
|
128
|
-
},
|
|
129
|
-
resetForm: {
|
|
130
|
-
handler(form) {
|
|
131
|
-
if (form.name == this.formName) this.formDirty = false;
|
|
132
|
-
},
|
|
133
|
-
deep: true,
|
|
134
|
-
},
|
|
135
|
-
},
|
|
136
|
-
};
|
|
137
|
-
</script>
|
|
138
|
-
|
|
139
|
-
<style scoped>
|
|
140
|
-
.title {
|
|
141
|
-
font-size: 14px !important;
|
|
142
|
-
font-weight: 400 !important;
|
|
143
|
-
color: #0a0a0a;
|
|
144
|
-
letter-spacing: 0.5px !important;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.success {
|
|
148
|
-
color: #94aa2a;
|
|
149
|
-
font-size: 14px;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.invalid {
|
|
153
|
-
color: #f0134d;
|
|
154
|
-
font-size: 14px;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.margin-button {
|
|
158
|
-
margin-top: -2px;
|
|
159
|
-
}
|
|
160
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="form-group">
|
|
3
|
+
<label v-if="title">
|
|
4
|
+
<span class="title">{{ title }}</span>
|
|
5
|
+
<span class="required" v-if="required">*</span>
|
|
6
|
+
<Tip :field="field" :formName="formName" />
|
|
7
|
+
</label>
|
|
8
|
+
<div class="inner-addon right-addon">
|
|
9
|
+
<i v-if="notifications.length > 0 && formDirty" class="required glyphicon fas fa-exclamation-triangle"></i>
|
|
10
|
+
<slot v-else></slot>
|
|
11
|
+
<input :style="_style" class="form-control" type="number" :disabled="disabled" v-model="valueLocal"
|
|
12
|
+
@keyup.enter.prevent="pressedEnter" />
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<div v-if="formDirty">
|
|
16
|
+
<div v-for="message in notifications" :key="message">
|
|
17
|
+
<span class="invalid">{{ message }}</span>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
</template>
|
|
22
|
+
|
|
23
|
+
<script>
|
|
24
|
+
import Tip from "../shared/Tip.vue";
|
|
25
|
+
|
|
26
|
+
import { mapState, mapMutations } from "vuex";
|
|
27
|
+
|
|
28
|
+
export default {
|
|
29
|
+
name: "InputNumber",
|
|
30
|
+
components: { Tip },
|
|
31
|
+
props: {
|
|
32
|
+
title: String,
|
|
33
|
+
field: String,
|
|
34
|
+
_style: String,
|
|
35
|
+
placeholder: String,
|
|
36
|
+
disabled: Boolean,
|
|
37
|
+
formName: String,
|
|
38
|
+
required: Boolean,
|
|
39
|
+
maxLength: Number,
|
|
40
|
+
type: {
|
|
41
|
+
type: String,
|
|
42
|
+
default: "float",
|
|
43
|
+
},
|
|
44
|
+
markFormDirty: {
|
|
45
|
+
type: Boolean,
|
|
46
|
+
default: true,
|
|
47
|
+
},
|
|
48
|
+
params: Object,
|
|
49
|
+
value: Number,
|
|
50
|
+
changed: Function,
|
|
51
|
+
enter: Function,
|
|
52
|
+
},
|
|
53
|
+
data() {
|
|
54
|
+
return {
|
|
55
|
+
notifications: [],
|
|
56
|
+
formDirty: false,
|
|
57
|
+
valueLocal: 0,
|
|
58
|
+
precision: 1,
|
|
59
|
+
};
|
|
60
|
+
},
|
|
61
|
+
created() {
|
|
62
|
+
// não carregar as validações iniciais para number
|
|
63
|
+
this.valueLocal = this.value;
|
|
64
|
+
},
|
|
65
|
+
|
|
66
|
+
methods: {
|
|
67
|
+
...mapMutations("validation", [
|
|
68
|
+
"addValidation",
|
|
69
|
+
"removeValidation",
|
|
70
|
+
"updateFormDirty",
|
|
71
|
+
]),
|
|
72
|
+
validate() {
|
|
73
|
+
this.notifications = [];
|
|
74
|
+
if (this.value == 0) return;
|
|
75
|
+
if (this.required && !this.value) {
|
|
76
|
+
var message = `${this.title} não pode ser vazio!`;
|
|
77
|
+
this.notifications.push(message);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
if (this.valueLocal.toString().length > this.maxLength) {
|
|
81
|
+
var message = `Valor inválido!`;
|
|
82
|
+
this.notifications.push(message);
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
pressedEnter() {
|
|
86
|
+
if (this.enter) this.enter(this.params);
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
computed: {
|
|
90
|
+
...mapState("validation", ["resetForm"]),
|
|
91
|
+
},
|
|
92
|
+
watch: {
|
|
93
|
+
value() {
|
|
94
|
+
this.valueLocal = this.value;
|
|
95
|
+
if (this.changed) this.changed();
|
|
96
|
+
},
|
|
97
|
+
valueLocal() {
|
|
98
|
+
this.validate();
|
|
99
|
+
|
|
100
|
+
let valueLocal;
|
|
101
|
+
if (this.type === "int") valueLocal = parseInt(this.valueLocal);
|
|
102
|
+
if (this.type === "float") valueLocal = parseFloat(this.valueLocal);
|
|
103
|
+
|
|
104
|
+
this.$emit("input", valueLocal);
|
|
105
|
+
this.formDirty = true;
|
|
106
|
+
if (this.markFormDirty) this.updateFormDirty(true);
|
|
107
|
+
|
|
108
|
+
this.valueLocal = valueLocal;
|
|
109
|
+
},
|
|
110
|
+
notifications() {
|
|
111
|
+
let self = this;
|
|
112
|
+
this.notifications.forEach(function (notification) {
|
|
113
|
+
let obj = {
|
|
114
|
+
key: self.field + "&" + self.formName,
|
|
115
|
+
formName: self.formName,
|
|
116
|
+
notification: notification,
|
|
117
|
+
};
|
|
118
|
+
self.addValidation(obj);
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
if (this.notifications.length == 0) {
|
|
122
|
+
let obj = {
|
|
123
|
+
key: self.field + "&" + self.formName,
|
|
124
|
+
formName: self.formName,
|
|
125
|
+
};
|
|
126
|
+
self.removeValidation(obj);
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
resetForm: {
|
|
130
|
+
handler(form) {
|
|
131
|
+
if (form.name == this.formName) this.formDirty = false;
|
|
132
|
+
},
|
|
133
|
+
deep: true,
|
|
134
|
+
},
|
|
135
|
+
},
|
|
136
|
+
};
|
|
137
|
+
</script>
|
|
138
|
+
|
|
139
|
+
<style scoped>
|
|
140
|
+
.title {
|
|
141
|
+
font-size: 14px !important;
|
|
142
|
+
font-weight: 400 !important;
|
|
143
|
+
color: #0a0a0a;
|
|
144
|
+
letter-spacing: 0.5px !important;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.success {
|
|
148
|
+
color: #94aa2a;
|
|
149
|
+
font-size: 14px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.invalid {
|
|
153
|
+
color: #f0134d;
|
|
154
|
+
font-size: 14px;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.margin-button {
|
|
158
|
+
margin-top: -2px;
|
|
159
|
+
}
|
|
160
|
+
</style>
|