@nixweb/nixloc-ui 1.15.0 → 1.17.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/package.json +1 -1
- package/src/component/forms/Modal.vue +10 -3
- package/src/component/shared/actions/ActionFooter.vue +72 -34
- package/src/component/shared/actions/ActionItemList.vue +95 -73
- package/src/component/shared/actions/ActionsOptions.vue +158 -122
- package/src/component/shared/actions/ActionsSelected.vue +225 -174
- package/src/component/template/ViewTemplateReportPreview.vue +129 -40
|
@@ -1,39 +1,67 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
<div class="actions-options">
|
|
3
|
+
<div class="ao-body">
|
|
4
|
+
<ScrollBar
|
|
5
|
+
:minHeight="minHeight"
|
|
6
|
+
:maxHeight="maxHeight"
|
|
7
|
+
class="ao-scroll"
|
|
8
|
+
>
|
|
9
|
+
<span class="ao-description title">
|
|
10
|
+
{{ actionSelected.description }}
|
|
11
|
+
</span>
|
|
8
12
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<RadioGroup :field="fieldName" :options="filteredOptions" v-model="optionSelected" />
|
|
16
|
-
</div>
|
|
13
|
+
<div v-if="actionSelected.type == 'component'">
|
|
14
|
+
<component
|
|
15
|
+
:is="actionSelected.component"
|
|
16
|
+
v-model="optionSelected"
|
|
17
|
+
></component>
|
|
18
|
+
</div>
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
<div
|
|
21
|
+
v-if="actionSelected.type == 'options'"
|
|
22
|
+
class="ao-radios"
|
|
23
|
+
role="group"
|
|
24
|
+
:aria-labelledby="'ao-title'"
|
|
25
|
+
>
|
|
26
|
+
<RadioGroup
|
|
27
|
+
:field="fieldName"
|
|
28
|
+
:options="filteredOptions"
|
|
29
|
+
v-model="optionSelected"
|
|
30
|
+
/>
|
|
23
31
|
</div>
|
|
24
32
|
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
</div>
|
|
35
|
-
</footer>
|
|
33
|
+
<div
|
|
34
|
+
v-else
|
|
35
|
+
class="ao-empty"
|
|
36
|
+
aria-live="polite"
|
|
37
|
+
>
|
|
38
|
+
<i class="fas fa-inbox"></i>
|
|
39
|
+
<span>Nenhuma opção encontrada.</span>
|
|
40
|
+
</div>
|
|
41
|
+
</ScrollBar>
|
|
36
42
|
</div>
|
|
43
|
+
|
|
44
|
+
<footer class="ao-footer">
|
|
45
|
+
<div class="ao-footer-left">
|
|
46
|
+
<span
|
|
47
|
+
v-if="optionSelected"
|
|
48
|
+
class="ao-helper title"
|
|
49
|
+
>
|
|
50
|
+
Selecionado: <strong>{{ labelSelected }}</strong>
|
|
51
|
+
</span>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="ao-footer-right">
|
|
54
|
+
<Button
|
|
55
|
+
key="select"
|
|
56
|
+
:disabled="!isValid"
|
|
57
|
+
:title="btnNextLabel"
|
|
58
|
+
type="primary"
|
|
59
|
+
size="medium"
|
|
60
|
+
:clicked="next"
|
|
61
|
+
/>
|
|
62
|
+
</div>
|
|
63
|
+
</footer>
|
|
64
|
+
</div>
|
|
37
65
|
</template>
|
|
38
66
|
|
|
39
67
|
<script>
|
|
@@ -43,131 +71,139 @@ import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
|
|
|
43
71
|
import { mapMutations } from "vuex";
|
|
44
72
|
|
|
45
73
|
export default {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
74
|
+
name: "ActionsOptions",
|
|
75
|
+
components: { Button, RadioGroup, ScrollBar },
|
|
76
|
+
props: {
|
|
77
|
+
actionSelected: { type: Object, required: true },
|
|
78
|
+
minHeight: { type: Number, default: 120 },
|
|
79
|
+
maxHeight: { type: Number, default: 260 },
|
|
80
|
+
btnNextLabel: { type: String, default: "Avançar" },
|
|
81
|
+
fieldName: { type: String, default: "group" },
|
|
82
|
+
searchThreshold: { type: Number, default: 10 },
|
|
83
|
+
value: String,
|
|
84
|
+
},
|
|
85
|
+
data() {
|
|
86
|
+
return {
|
|
87
|
+
optionSelected: null,
|
|
88
|
+
query: "",
|
|
89
|
+
};
|
|
90
|
+
},
|
|
91
|
+
computed: {
|
|
92
|
+
optionsRaw() {
|
|
93
|
+
const list =
|
|
94
|
+
this.actionSelected && Array.isArray(this.actionSelected.options)
|
|
95
|
+
? this.actionSelected.options
|
|
96
|
+
: [];
|
|
97
|
+
return list.map((o) => ({ text: o.text, value: o.value }));
|
|
56
98
|
},
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
99
|
+
filteredOptions() {
|
|
100
|
+
const q = (this.query || "").toLowerCase();
|
|
101
|
+
if (!q) return this.optionsRaw;
|
|
102
|
+
return this.optionsRaw.filter(
|
|
103
|
+
(opt) =>
|
|
104
|
+
String(opt.text).toLowerCase().includes(q) ||
|
|
105
|
+
String(opt.value).toLowerCase().includes(q)
|
|
106
|
+
);
|
|
62
107
|
},
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
},
|
|
70
|
-
filteredOptions() {
|
|
71
|
-
const q = (this.query || "").toLowerCase();
|
|
72
|
-
if (!q) return this.optionsRaw;
|
|
73
|
-
return this.optionsRaw.filter(opt =>
|
|
74
|
-
String(opt.text).toLowerCase().includes(q) ||
|
|
75
|
-
String(opt.value).toLowerCase().includes(q)
|
|
76
|
-
);
|
|
77
|
-
},
|
|
78
|
-
isValid() {
|
|
79
|
-
return this.optionSelected !== null && this.optionSelected !== undefined && this.optionSelected !== "";
|
|
80
|
-
},
|
|
81
|
-
labelSelected() {
|
|
82
|
-
const found = this.optionsRaw.find(o => o.value === this.optionSelected);
|
|
83
|
-
return found ? found.text : "";
|
|
84
|
-
}
|
|
108
|
+
isValid() {
|
|
109
|
+
return (
|
|
110
|
+
this.optionSelected !== null &&
|
|
111
|
+
this.optionSelected !== undefined &&
|
|
112
|
+
this.optionSelected !== ""
|
|
113
|
+
);
|
|
85
114
|
},
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
115
|
+
labelSelected() {
|
|
116
|
+
const found = this.optionsRaw.find(
|
|
117
|
+
(o) => o.value === this.optionSelected
|
|
118
|
+
);
|
|
119
|
+
return found ? found.text : "";
|
|
120
|
+
},
|
|
121
|
+
},
|
|
122
|
+
watch: {
|
|
123
|
+
optionSelected: {
|
|
124
|
+
handler(value) {
|
|
125
|
+
this.$emit("input", value);
|
|
126
|
+
},
|
|
127
|
+
deep: true,
|
|
128
|
+
},
|
|
129
|
+
optionsRaw: {
|
|
130
|
+
immediate: true,
|
|
131
|
+
handler(list) {
|
|
132
|
+
if (Array.isArray(list) && list.length === 1) {
|
|
133
|
+
this.optionSelected = list[0].value;
|
|
100
134
|
}
|
|
135
|
+
},
|
|
136
|
+
},
|
|
137
|
+
},
|
|
138
|
+
methods: {
|
|
139
|
+
...mapMutations("generic", ["openModal", "hideModal"]),
|
|
140
|
+
next() {
|
|
141
|
+
if (!this.isValid) return;
|
|
142
|
+
this.openModal("confirm");
|
|
143
|
+
},
|
|
144
|
+
enterToNext() {
|
|
145
|
+
if (this.isValid) this.next();
|
|
101
146
|
},
|
|
102
|
-
|
|
103
|
-
...mapMutations("generic", ["openModal", "hideModal"]),
|
|
104
|
-
next() {
|
|
105
|
-
if (!this.isValid) return;
|
|
106
|
-
this.openModal("confirm");
|
|
107
|
-
},
|
|
108
|
-
enterToNext() {
|
|
109
|
-
if (this.isValid) this.next();
|
|
110
|
-
},
|
|
111
|
-
}
|
|
147
|
+
},
|
|
112
148
|
};
|
|
113
149
|
</script>
|
|
114
150
|
|
|
115
151
|
<style scoped>
|
|
116
152
|
.actions-options {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
153
|
+
display: flex;
|
|
154
|
+
flex-direction: column;
|
|
155
|
+
gap: 12px;
|
|
156
|
+
max-width: 640px;
|
|
121
157
|
}
|
|
122
158
|
|
|
123
159
|
.ao-body {
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
160
|
+
display: flex;
|
|
161
|
+
flex-direction: column;
|
|
162
|
+
gap: 8px;
|
|
127
163
|
}
|
|
128
164
|
|
|
129
165
|
.ao-scroll {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
166
|
+
border: 1px solid #e5e7eb;
|
|
167
|
+
border-radius: 10px;
|
|
168
|
+
padding: 8px;
|
|
169
|
+
background: #fff;
|
|
134
170
|
}
|
|
135
171
|
|
|
136
172
|
.ao-radios {
|
|
137
|
-
|
|
138
|
-
|
|
173
|
+
display: grid;
|
|
174
|
+
gap: 10px;
|
|
139
175
|
}
|
|
140
176
|
|
|
141
177
|
.ao-empty {
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
178
|
+
display: flex;
|
|
179
|
+
align-items: center;
|
|
180
|
+
gap: 8px;
|
|
181
|
+
color: #6b7280;
|
|
182
|
+
padding: 8px;
|
|
147
183
|
}
|
|
148
184
|
|
|
149
185
|
.ao-footer {
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
186
|
+
display: flex;
|
|
187
|
+
align-items: center;
|
|
188
|
+
justify-content: space-between;
|
|
189
|
+
gap: 12px;
|
|
190
|
+
padding-top: 8px;
|
|
191
|
+
position: sticky;
|
|
192
|
+
bottom: 0;
|
|
157
193
|
}
|
|
158
194
|
|
|
159
195
|
.ao-description {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
196
|
+
color: #475569;
|
|
197
|
+
font-weight: 500;
|
|
198
|
+
font-size: 13px;
|
|
163
199
|
}
|
|
164
200
|
|
|
165
201
|
.ao-footer-right {
|
|
166
|
-
|
|
167
|
-
|
|
202
|
+
display: flex;
|
|
203
|
+
gap: 8px;
|
|
168
204
|
}
|
|
169
205
|
|
|
170
206
|
.ao-helper {
|
|
171
|
-
|
|
207
|
+
color: #374151;
|
|
172
208
|
}
|
|
173
209
|
</style>
|