@burh/nuxt-core 1.0.32 → 1.0.33
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/assets/sass/burh-ds/_variables.scss +2 -2
- package/assets/sass/burh-ds/atoms/_buttons.scss +1 -0
- package/assets/sass/core/forms/_form.scss +16 -0
- package/assets/sass/core/icons/_icon.scss +9 -0
- package/components/argon-core/Inputs/BaseInput.vue +2 -1
- package/components/burh-ds/Headings/AppHeader.vue +10 -12
- package/components/burh-ds/Headings/StepHeader.vue +14 -2
- package/components/burh-ds/Modals/AppConfigModal.vue +57 -54
- package/components/burh-ds/Questions/Question.vue +25 -19
- package/components/burh-ds/Questions/QuestionRadio.vue +31 -14
- package/package.json +1 -1
- package/util/cookie.js +0 -1
|
@@ -405,8 +405,8 @@ $form-group-margin-bottom: 1.5rem !default;
|
|
|
405
405
|
|
|
406
406
|
$form-feedback-valid-bg: lighten($success, 15%) !default;
|
|
407
407
|
$form-feedback-valid-color: theme-color("success") !default;
|
|
408
|
-
$form-feedback-invalid-bg: lighten($
|
|
409
|
-
$form-feedback-invalid-color: theme-color("
|
|
408
|
+
$form-feedback-invalid-bg: lighten($danger, 15%) !default;
|
|
409
|
+
$form-feedback-invalid-color: theme-color("danger") !default;
|
|
410
410
|
|
|
411
411
|
|
|
412
412
|
|
|
@@ -88,6 +88,22 @@ textarea[resize="horizontal"] {
|
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
|
|
91
|
+
.form-control-label {
|
|
92
|
+
&.is-invalid {
|
|
93
|
+
color: $form-feedback-invalid-color;
|
|
94
|
+
}
|
|
95
|
+
&.label-required {
|
|
96
|
+
display: flex;
|
|
97
|
+
justify-content: space-between;
|
|
98
|
+
width: 100%;
|
|
99
|
+
|
|
100
|
+
.label-required-text {
|
|
101
|
+
font-weight: 400;
|
|
102
|
+
text-transform: none;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
91
107
|
// Alternative input
|
|
92
108
|
|
|
93
109
|
.form-control-alternative {
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="form-group">
|
|
3
3
|
<slot name="label">
|
|
4
|
-
<label v-if="label" :class="labelClasses">
|
|
4
|
+
<label v-if="label" :class="[{'is-invalid': error}, {'label-required': required}, labelClasses]">
|
|
5
5
|
{{label}}
|
|
6
|
+
<span v-if="required" class="label-required-text">Obrigatório</span>
|
|
6
7
|
</label>
|
|
7
8
|
</slot>
|
|
8
9
|
<div :class="[
|
|
@@ -5,17 +5,15 @@
|
|
|
5
5
|
<h2 class="font-weight-bold display-3">{{name}}</h2>
|
|
6
6
|
</div>
|
|
7
7
|
|
|
8
|
-
<div class="col-6 d-flex justify-content-end">
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
]"></i>
|
|
8
|
+
<div class="col-6 d-flex justify-content-end align-items-center">
|
|
9
|
+
<el-tooltip v-for="(item, index) in icons" :key="index"
|
|
10
|
+
v-show="!item.disabled"
|
|
11
|
+
class="item" effect="dark" :content="item.title" placement="top">
|
|
12
|
+
<base-button size="md" type="link" class="text-primary px-2 w-auto"
|
|
13
|
+
@click="$emit(item.event, item)">
|
|
14
|
+
<font-awesome-icon :icon="item.icon" class="mr-2" />
|
|
15
|
+
</base-button>
|
|
16
|
+
</el-tooltip>
|
|
19
17
|
|
|
20
18
|
<base-button v-if="firstButtonText" role="button" @click="$emit('btn-first-click')" size="sm" :type="firstButtonType"
|
|
21
19
|
class="ml-2">{{firstButtonText}}</base-button>
|
|
@@ -35,7 +33,7 @@ export default {
|
|
|
35
33
|
props:{
|
|
36
34
|
icons:{
|
|
37
35
|
type: Array,
|
|
38
|
-
default: () =>[{ event: 'view', icon: 'fas
|
|
36
|
+
default: () =>[{ event: 'view', icon: ['fas', 'eye'], disabled: false, title: 'Visualizar' }, { event: 'config', icon: ['fas', 'cog'], disabled: false, title: "Editar" } ]
|
|
39
37
|
},
|
|
40
38
|
name: {
|
|
41
39
|
type: String,
|
|
@@ -29,9 +29,15 @@
|
|
|
29
29
|
|
|
30
30
|
<ul class="step-icons" v-if="!hideIcons">
|
|
31
31
|
<li v-for="(icon, index) in icons"
|
|
32
|
+
:class="`text-danger icon-${icon.type}`"
|
|
32
33
|
:key="`question-icon-${position}-${index}`"
|
|
33
34
|
@click="$emit(icon.event)">
|
|
34
|
-
<
|
|
35
|
+
<el-tooltip class="item" effect="dark" :content="icon.title" placement="top">
|
|
36
|
+
<span class="small">
|
|
37
|
+
<font-awesome-icon :icon="icon.icon" :class="`ml-2 icon-${icon.type}`" :title="icon.title"/>
|
|
38
|
+
{{icon.title}}
|
|
39
|
+
</span>
|
|
40
|
+
</el-tooltip>
|
|
35
41
|
</li>
|
|
36
42
|
</ul>
|
|
37
43
|
</div>
|
|
@@ -59,7 +65,7 @@ export default {
|
|
|
59
65
|
icons: {
|
|
60
66
|
type: Array,
|
|
61
67
|
default: () => [
|
|
62
|
-
{ event: 'first-icon-click', icon: ['fas', 'trash-alt'] }
|
|
68
|
+
{ event: 'first-icon-click', icon: ['fas', 'trash-alt'], title: "Remover etapa", type: "danger" }
|
|
63
69
|
]
|
|
64
70
|
},
|
|
65
71
|
},
|
|
@@ -105,7 +111,13 @@ export default {
|
|
|
105
111
|
padding-left: 1rem;
|
|
106
112
|
padding-right: 1rem;
|
|
107
113
|
cursor: pointer;
|
|
114
|
+
|
|
115
|
+
&:hover,
|
|
116
|
+
&:focus {
|
|
117
|
+
text-decoration: underline;
|
|
118
|
+
}
|
|
108
119
|
}
|
|
120
|
+
|
|
109
121
|
}
|
|
110
122
|
|
|
111
123
|
</style>
|
|
@@ -1,49 +1,55 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<modal :show.sync="openModal" v-on:close="$emit('close-modal')" size='lg' class="modal">
|
|
2
|
+
<modal :show.sync="openModal" modalContentClasses="container-fluid" headerClasses="row px-4 pt-5" bodyClasses="row px-4" v-on:close="$emit('close-modal')" size='lg' class="modal">
|
|
3
3
|
<template slot="header">
|
|
4
|
-
<h2 class="display-4
|
|
4
|
+
<div class="pl-3"><h2 class="display-4">{{title}}</h2></div>
|
|
5
5
|
</template>
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
<validation-observer ref="appConfigModal" tag="div">
|
|
8
|
+
<validation-provider tag="div" class="col-12" :vid="`name`"
|
|
9
|
+
name="name" rules="required" v-slot="{ errors }">
|
|
10
10
|
<base-input
|
|
11
|
+
:label="name"
|
|
11
12
|
placeholder="Insira o nome do teste"
|
|
13
|
+
required
|
|
12
14
|
v-model="configInfo.title"
|
|
15
|
+
:error="errors[0]"
|
|
16
|
+
:valid="errors.length ? true : false"
|
|
13
17
|
>
|
|
14
18
|
</base-input>
|
|
15
|
-
|
|
19
|
+
</validation-provider>
|
|
16
20
|
|
|
17
|
-
<div class="col-12">
|
|
18
|
-
<label for="description">{{textAreaTitle}}</label>
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
<div class="col-12 mb-4">
|
|
22
|
+
<label for="description" class="form-control-label">{{textAreaTitle}}</label>
|
|
23
|
+
<textarea
|
|
24
|
+
id="description"
|
|
25
|
+
class="form-control"
|
|
26
|
+
placeholder="Insira a descrição do teste"
|
|
27
|
+
v-model="configInfo.textarea"
|
|
28
|
+
></textarea>
|
|
25
29
|
</div>
|
|
26
30
|
|
|
27
|
-
<div class="col-12">
|
|
28
|
-
<
|
|
31
|
+
<div class="col-12 mb-4">
|
|
32
|
+
<label class="mb-0 form-control-label mb-3">{{buttonAreaTitle}}</label>
|
|
29
33
|
|
|
30
|
-
<div class="
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
<div class="row">
|
|
35
|
+
<div class="col-6 col-lg-3" v-for="(buttons, index) in buttons" :key="index">
|
|
36
|
+
<button role="button" class="tag tag-outline-primary d-block w-100"
|
|
37
|
+
:id="'button-' + buttons.id" :value="buttons.value"
|
|
38
|
+
:class="buttons.id == currentSelectedButton ? 'active' : ''"
|
|
39
|
+
@click="timeSelection(buttons.id)"
|
|
40
|
+
>
|
|
41
|
+
<i v-if="buttons.id == currentSelectedButton" class="fas fa-check mr-1"></i>
|
|
42
|
+
<small>{{buttons.time}}</small>
|
|
43
|
+
</button>
|
|
44
|
+
</div>
|
|
40
45
|
</div>
|
|
41
46
|
</div>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
+
<div class="col-12 d-flex pb-4">
|
|
48
|
+
<base-button size="md" type="primary" role="button"
|
|
49
|
+
@click="sendConfig()"
|
|
50
|
+
class="ml-auto">{{configAppButton}}</base-button>
|
|
51
|
+
</div>
|
|
52
|
+
</validation-observer>
|
|
47
53
|
</modal>
|
|
48
54
|
</template>
|
|
49
55
|
<script>
|
|
@@ -70,7 +76,11 @@ export default {
|
|
|
70
76
|
name:{
|
|
71
77
|
type: String,
|
|
72
78
|
default: 'Nome'
|
|
73
|
-
|
|
79
|
+
},
|
|
80
|
+
defaultButtonSelected: {
|
|
81
|
+
type: Number,
|
|
82
|
+
default: 6
|
|
83
|
+
},
|
|
74
84
|
buttons:{
|
|
75
85
|
type: Array,
|
|
76
86
|
default: () => [{ id: '1', time: '5 minutos', value:'00:05:00' }, { id: '2', time: '10 minutos', value:'00:10:00' }, { id: '3', time: '15 minutos', value:'00:15:00' },
|
|
@@ -78,13 +88,9 @@ export default {
|
|
|
78
88
|
{ id: '7', time: '2 horas', value: '02:00:00' }, { id: '8', time: '8 horas', value: '08:00:00' }],
|
|
79
89
|
description: 'Botoes de tempo'
|
|
80
90
|
},
|
|
81
|
-
appModalBtnType:{
|
|
82
|
-
type: String,
|
|
83
|
-
default: 'primary'
|
|
84
|
-
},
|
|
85
91
|
title:{
|
|
86
92
|
type: String,
|
|
87
|
-
default: '
|
|
93
|
+
default: 'Criar Teste',
|
|
88
94
|
description: 'Titulo do Modal'
|
|
89
95
|
},
|
|
90
96
|
textAreaTitle:{
|
|
@@ -126,32 +132,29 @@ export default {
|
|
|
126
132
|
},
|
|
127
133
|
methods:{
|
|
128
134
|
loadTime() {
|
|
129
|
-
|
|
135
|
+
let time = this.buttons.find(e => e.value == this.time);
|
|
130
136
|
if(time != null){
|
|
131
137
|
this.currentSelectedButton = time.id
|
|
132
138
|
this.configInfo.selectedTime = this.time
|
|
133
|
-
}
|
|
139
|
+
} else {
|
|
140
|
+
time = this.buttons.find(e => e.id == this.defaultButtonSelected);
|
|
141
|
+
this.currentSelectedButton = time.id
|
|
142
|
+
this.configInfo.selectedTime = time.value
|
|
143
|
+
}
|
|
134
144
|
},
|
|
135
145
|
timeSelection(buttonId){
|
|
136
146
|
let btn = document.getElementById('button-' + buttonId);
|
|
137
147
|
this.configInfo.selectedTime=btn.value;
|
|
138
148
|
this.currentSelectedButton=buttonId;
|
|
139
149
|
},
|
|
140
|
-
sendConfig(){
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
confirmButtonClass: 'btn btn-primary btn-fill',
|
|
149
|
-
});
|
|
150
|
-
}
|
|
151
|
-
else{
|
|
152
|
-
this.$emit('send-config-info', this.configInfo);
|
|
153
|
-
this.openModal=false;
|
|
154
|
-
}
|
|
150
|
+
async sendConfig() {
|
|
151
|
+
const pass = await this.$refs.appConfigModal.validate();
|
|
152
|
+
if(!pass) {
|
|
153
|
+
return;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
this.$emit('send-config-info', this.configInfo);
|
|
157
|
+
this.openModal=false;
|
|
155
158
|
},
|
|
156
159
|
},
|
|
157
160
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="card position-relative">
|
|
3
3
|
<div class="row px-4 justify-content-start">
|
|
4
|
-
<validation-provider tag="div" class="col-8" :vid="`question-${
|
|
4
|
+
<validation-provider tag="div" class="col-8" :vid="`question-${step}-${position}`"
|
|
5
5
|
name="Pergunta" rules="required" v-slot="{ errors }">
|
|
6
6
|
<base-input
|
|
7
7
|
:label="`Pergunta #${position + 1}`"
|
|
@@ -16,10 +16,11 @@
|
|
|
16
16
|
|
|
17
17
|
<div class="col-4">
|
|
18
18
|
<label class="form-control-label d-block pt-1">
|
|
19
|
-
|
|
19
|
+
Tipo
|
|
20
20
|
</label>
|
|
21
21
|
<el-select class="select-danger w-100"
|
|
22
22
|
placeholder="Escolha o tipo da pergunta"
|
|
23
|
+
v-on:change="emitQuestion"
|
|
23
24
|
v-model="question.question_type">
|
|
24
25
|
<el-option v-for="option in listComponentes"
|
|
25
26
|
class="select-danger"
|
|
@@ -44,14 +45,19 @@
|
|
|
44
45
|
:data="question"
|
|
45
46
|
v-on:data-changed="mergeDataQuestion"/>
|
|
46
47
|
</div>
|
|
48
|
+
<div class="col-12 text-right pb-2">
|
|
49
|
+
<ul class="question-icons list-inline">
|
|
50
|
+
<li v-for="(icon, index) in icons"
|
|
51
|
+
:key="`question-icon-${position}-${index}`"
|
|
52
|
+
@click="$emit(icon.event)"
|
|
53
|
+
:class="`list-inline-item text-${icon.type}`">
|
|
54
|
+
<el-tooltip class="item" effect="dark" :content="icon.alt" placement="top">
|
|
55
|
+
<font-awesome-icon :icon="icon.icon" :class="`icon-${icon.type}`" :title="icon.alt"/>
|
|
56
|
+
</el-tooltip>
|
|
57
|
+
</li>
|
|
58
|
+
</ul>
|
|
59
|
+
</div>
|
|
47
60
|
|
|
48
|
-
<ul class="question-icons">
|
|
49
|
-
<li v-for="(icon, index) in icons"
|
|
50
|
-
:key="`question-icon-${position}-${index}`"
|
|
51
|
-
@click="$emit(icon.event)">
|
|
52
|
-
<font-awesome-icon :icon="icon.icon" class="" />
|
|
53
|
-
</li>
|
|
54
|
-
</ul>
|
|
55
61
|
</div>
|
|
56
62
|
</div>
|
|
57
63
|
</template>
|
|
@@ -71,7 +77,7 @@ export default {
|
|
|
71
77
|
QuestionAttach
|
|
72
78
|
},
|
|
73
79
|
props: {
|
|
74
|
-
|
|
80
|
+
step: {
|
|
75
81
|
type: Number,
|
|
76
82
|
default: 0
|
|
77
83
|
},
|
|
@@ -83,8 +89,8 @@ export default {
|
|
|
83
89
|
icons: {
|
|
84
90
|
type: Array,
|
|
85
91
|
default: () => [
|
|
86
|
-
{ event: 'first-icon-click', icon: ['far', 'copy'] },
|
|
87
|
-
{ event: 'second-icon-click', icon: ['fas', 'trash-alt'] }
|
|
92
|
+
{ event: 'first-icon-click', icon: ['far', 'copy'], alt: 'Clonar questão', type: 'primary'},
|
|
93
|
+
{ event: 'second-icon-click', icon: ['fas', 'trash-alt'], alt: 'Remover questão', type: 'danger'}
|
|
88
94
|
]
|
|
89
95
|
},
|
|
90
96
|
listComponentes: {
|
|
@@ -128,13 +134,13 @@ export default {
|
|
|
128
134
|
|
|
129
135
|
<style lang="scss" scoped>
|
|
130
136
|
.question-icons {
|
|
131
|
-
position: absolute;
|
|
132
|
-
bottom: 0;
|
|
133
|
-
right: 1rem;
|
|
134
|
-
display: flex;
|
|
135
|
-
justify-content: flex-end;
|
|
136
|
-
align-items: flex-end;
|
|
137
|
-
list-style: none;
|
|
137
|
+
// position: absolute;
|
|
138
|
+
// bottom: 0;
|
|
139
|
+
// right: 1rem;
|
|
140
|
+
// display: flex;
|
|
141
|
+
// justify-content: flex-end;
|
|
142
|
+
// align-items: flex-end;
|
|
143
|
+
// list-style: none;
|
|
138
144
|
|
|
139
145
|
li {
|
|
140
146
|
padding-top: 1rem;
|
|
@@ -1,14 +1,31 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
<div class="">
|
|
3
|
+
<div v-for="(answer, index) in answers" :key="index">
|
|
4
|
+
<div class="d-flex w-100 align-items-start">
|
|
5
|
+
<el-radio-group v-model="selected">
|
|
6
|
+
<question-radio-item
|
|
7
|
+
:response="answer.name"
|
|
8
|
+
v-on:change-answer="setAnswers($event, answer)"
|
|
9
|
+
></question-radio-item>
|
|
10
|
+
</el-radio-group>
|
|
11
|
+
<el-tooltip class="item" effect="dark" content="Remover alternativa" placement="top">
|
|
12
|
+
<base-button size="sm" type="link" class="text-danger px-2 w-auto m-0 ml-2" @click="removeLastOption">
|
|
13
|
+
<font-awesome-icon icon="trash" />
|
|
14
|
+
</base-button>
|
|
15
|
+
</el-tooltip>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
<ul class="list-inline">
|
|
19
|
+
<li class="list-inline-item">
|
|
20
|
+
<base-button size="xs" type="link" class="mr-0" @click="addOption">
|
|
21
|
+
<font-awesome-icon icon="plus" class="mr-2" />
|
|
22
|
+
Adicionar alternativa
|
|
23
|
+
</base-button>
|
|
24
|
+
</li>
|
|
25
|
+
<!-- <li class="list-inline-item">
|
|
26
|
+
<base-button size="xs" type="link" @click="removeLastOption">Remover opção</base-button>
|
|
27
|
+
</li> -->
|
|
28
|
+
</ul>
|
|
12
29
|
</div>
|
|
13
30
|
</template>
|
|
14
31
|
|
|
@@ -44,11 +61,11 @@ export default {
|
|
|
44
61
|
removeLastOption() {
|
|
45
62
|
if(this.answers.length <= this.minRadios) {
|
|
46
63
|
return Swal.fire({
|
|
47
|
-
title: '
|
|
64
|
+
title: 'Erro',
|
|
48
65
|
text: 'Questões do tipo alternativa deverão conter no mínimo 2 respostas!',
|
|
49
66
|
type: 'warning',
|
|
50
67
|
buttonsStyling: false,
|
|
51
|
-
confirmButtonText: '
|
|
68
|
+
confirmButtonText: 'Entendido',
|
|
52
69
|
confirmButtonClass: 'btn btn-primary btn-fill',
|
|
53
70
|
})
|
|
54
71
|
}
|
|
@@ -58,7 +75,7 @@ export default {
|
|
|
58
75
|
answer.name = value;
|
|
59
76
|
answer.id = id;
|
|
60
77
|
|
|
61
|
-
if(this.selected == null && answer.correct != false) { // be carefully here
|
|
78
|
+
if(this.selected == null && answer.correct != false) { // be carefully here, correct can be null
|
|
62
79
|
this.selected = answer.id
|
|
63
80
|
}
|
|
64
81
|
|
|
@@ -77,7 +94,7 @@ export default {
|
|
|
77
94
|
},
|
|
78
95
|
emitRadioList() {
|
|
79
96
|
const payload = {
|
|
80
|
-
response: this.selected,
|
|
97
|
+
// response: this.selected,
|
|
81
98
|
multiples: this.makeRadiolist()
|
|
82
99
|
}
|
|
83
100
|
this.$emit('data-changed', payload)
|
package/package.json
CHANGED