@burh/nuxt-core 1.0.437 → 1.0.439
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.
|
@@ -1,91 +1,143 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="base__filter">
|
|
3
|
-
<div class="base__filter__content">
|
|
4
|
-
<slot />
|
|
5
|
-
</div>
|
|
6
|
-
|
|
7
|
-
<div v-if="showFooter" class="base__filter__footer">
|
|
8
|
-
<div>
|
|
9
|
-
<button
|
|
10
|
-
@click="$emit('filter-clear')"
|
|
11
|
-
class="base__filter__button clear"
|
|
12
|
-
>
|
|
13
|
-
<span>Limpar</span>
|
|
14
|
-
</button>
|
|
15
|
-
</div>
|
|
16
|
-
<div>
|
|
17
|
-
<button
|
|
18
|
-
@click="$emit('filter-apply')"
|
|
19
|
-
class="base__filter__button apply"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
1
|
+
<template>
|
|
2
|
+
<div class="base__filter">
|
|
3
|
+
<div class="base__filter__content">
|
|
4
|
+
<slot />
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div v-if="showFooter" class="base__filter__footer">
|
|
8
|
+
<div>
|
|
9
|
+
<button
|
|
10
|
+
@click="$emit('filter-clear')"
|
|
11
|
+
class="base__filter__button clear"
|
|
12
|
+
>
|
|
13
|
+
<span>Limpar</span>
|
|
14
|
+
</button>
|
|
15
|
+
</div>
|
|
16
|
+
<div>
|
|
17
|
+
<button
|
|
18
|
+
@click="!isLocked ? $emit('filter-apply') : $emit('open-plan-modal')"
|
|
19
|
+
class="base__filter__button apply"
|
|
20
|
+
:class="{ 'disabled': isLocked }"
|
|
21
|
+
>
|
|
22
|
+
<template v-if="isLocked">
|
|
23
|
+
<span class="mr-1 custom__icon">
|
|
24
|
+
<i class="fas fa-lock lock"></i>
|
|
25
|
+
<i class="fas fa-rocket rocket"></i>
|
|
26
|
+
</span>
|
|
27
|
+
</template>
|
|
28
|
+
<span>Filtrar</span>
|
|
29
|
+
</button>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</template>
|
|
34
|
+
|
|
35
|
+
<script>
|
|
36
|
+
export default {
|
|
37
|
+
name: 'base-filter-container',
|
|
38
|
+
props: {
|
|
39
|
+
showFooter: {
|
|
40
|
+
type: Boolean,
|
|
41
|
+
default: true
|
|
42
|
+
},
|
|
43
|
+
isLocked: {
|
|
44
|
+
type: Boolean,
|
|
45
|
+
default: false
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<style lang="scss" scoped>
|
|
52
|
+
@keyframes fadeInDown {
|
|
53
|
+
from {
|
|
54
|
+
opacity: 0;
|
|
55
|
+
transform: translateY(-20px);
|
|
56
|
+
}
|
|
57
|
+
to {
|
|
58
|
+
opacity: 1;
|
|
59
|
+
transform: translateY(0);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.base__filter {
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
justify-content: space-between;
|
|
67
|
+
max-height: 350px;
|
|
68
|
+
&__content {
|
|
69
|
+
max-height: calc(350px - 44px);
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
overflow-y: auto;
|
|
72
|
+
&::-webkit-scrollbar-track {
|
|
73
|
+
border-radius: 10px;
|
|
74
|
+
background-color: #f5f5f5;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&::-webkit-scrollbar {
|
|
78
|
+
width: 4px;
|
|
79
|
+
background-color: #f5f5f5;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&::-webkit-scrollbar-thumb {
|
|
83
|
+
border-radius: 10px;
|
|
84
|
+
background-color: #e9e8e8;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
&__footer {
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
justify-content: space-between;
|
|
91
|
+
margin-top: 20px;
|
|
92
|
+
.base__filter__button {
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
background: transparent;
|
|
95
|
+
border: none;
|
|
96
|
+
color: #32325d;
|
|
97
|
+
padding: 10px 20px;
|
|
98
|
+
border-radius: 4px;
|
|
99
|
+
transition: background 0.5s, color 0.5s;
|
|
100
|
+
&:focus {
|
|
101
|
+
outline: none;
|
|
102
|
+
}
|
|
103
|
+
&.clear:hover {
|
|
104
|
+
background: rgba(222, 33, 75, 0.1);
|
|
105
|
+
color: #de214b;
|
|
106
|
+
}
|
|
107
|
+
&.apply:hover {
|
|
108
|
+
background: rgba(88, 101, 242, 0.1);
|
|
109
|
+
color: #5865F2;
|
|
110
|
+
}
|
|
111
|
+
&.disabled {
|
|
112
|
+
background: #e9e9e9;
|
|
113
|
+
display: flex;
|
|
114
|
+
.custom__icon {
|
|
115
|
+
width: 24px;
|
|
116
|
+
height: 24px;
|
|
117
|
+
overflow: hidden;
|
|
118
|
+
i {
|
|
119
|
+
padding: 5px;
|
|
120
|
+
}
|
|
121
|
+
.lock {
|
|
122
|
+
animation: fadeInDown 0.5s;
|
|
123
|
+
}
|
|
124
|
+
.rocket {
|
|
125
|
+
display: none;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
&:hover {
|
|
129
|
+
.custom__icon {
|
|
130
|
+
.lock {
|
|
131
|
+
display: none;
|
|
132
|
+
}
|
|
133
|
+
.rocket {
|
|
134
|
+
display: block;
|
|
135
|
+
animation: fadeInDown 0.5s;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
</style>
|
|
@@ -8,11 +8,7 @@
|
|
|
8
8
|
export default {
|
|
9
9
|
name: 'html-editor',
|
|
10
10
|
components: {
|
|
11
|
-
'text-editor': () =>
|
|
12
|
-
if (process.client) {
|
|
13
|
-
return import('@blowstack/ckeditor-nuxt');
|
|
14
|
-
}
|
|
15
|
-
}
|
|
11
|
+
'text-editor': () => process.client && import('@blowstack/ckeditor-nuxt')
|
|
16
12
|
},
|
|
17
13
|
props: {
|
|
18
14
|
value: {
|
|
@@ -5,14 +5,23 @@
|
|
|
5
5
|
<label class="form-control-label d-block pt-1">
|
|
6
6
|
{{ `Pergunta #${position + 1}` }}
|
|
7
7
|
</label>
|
|
8
|
-
<
|
|
9
|
-
v-if="isHtmlEditorActive"
|
|
10
|
-
|
|
11
|
-
:
|
|
12
|
-
:
|
|
13
|
-
|
|
14
|
-
@input="handleInput"
|
|
8
|
+
<skeleton-animate
|
|
9
|
+
v-if="isHtmlEditorActive && !isHtmlEditorLoaded"
|
|
10
|
+
:percentageWidth="true"
|
|
11
|
+
:width="100"
|
|
12
|
+
:height="200"
|
|
13
|
+
class="mb-4"
|
|
15
14
|
/>
|
|
15
|
+
<div :class="{ 'loading': !isHtmlEditorLoaded }">
|
|
16
|
+
<html-editor
|
|
17
|
+
v-if="isHtmlEditorActive"
|
|
18
|
+
placeholder="Escreva uma pergunta"
|
|
19
|
+
:value="question.question"
|
|
20
|
+
:baseApiUrl="baseApiUrl"
|
|
21
|
+
:token="token"
|
|
22
|
+
@input="handleInput"
|
|
23
|
+
/>
|
|
24
|
+
</div>
|
|
16
25
|
<div @click="handleLoadHtmlEditor" v-if="!isHtmlEditorActive" class="question__preview" v-html="question.question"></div>
|
|
17
26
|
</div>
|
|
18
27
|
|
|
@@ -87,6 +96,7 @@ import QuestionText from '@burh/nuxt-core/components/burh-ds/Questions/QuestionT
|
|
|
87
96
|
import QuestionRadio from '@burh/nuxt-core/components/burh-ds/Questions/QuestionRadio.vue';
|
|
88
97
|
import QuestionAttach from '@burh/nuxt-core/components/burh-ds/Questions/QuestionAttach.vue';
|
|
89
98
|
import HtmlEditor from '@burh/nuxt-core/components/burh-ds/Inputs/HtmlEditor.vue';
|
|
99
|
+
import SkeletonAnimate from '../Skeleton/SkeletonAnimate.vue';
|
|
90
100
|
|
|
91
101
|
export default {
|
|
92
102
|
components: {
|
|
@@ -95,7 +105,8 @@ export default {
|
|
|
95
105
|
Paragraph: QuestionText,
|
|
96
106
|
QuestionRadio,
|
|
97
107
|
QuestionAttach,
|
|
98
|
-
HtmlEditor
|
|
108
|
+
HtmlEditor,
|
|
109
|
+
SkeletonAnimate
|
|
99
110
|
},
|
|
100
111
|
props: {
|
|
101
112
|
step: {
|
|
@@ -140,6 +151,7 @@ export default {
|
|
|
140
151
|
console: console,
|
|
141
152
|
question: this.data,
|
|
142
153
|
isHtmlEditorActive: false,
|
|
154
|
+
isHtmlEditorLoaded: false,
|
|
143
155
|
htmlEditorActiveTimer: null
|
|
144
156
|
};
|
|
145
157
|
},
|
|
@@ -151,7 +163,10 @@ export default {
|
|
|
151
163
|
methods: {
|
|
152
164
|
setHtmlEditorTimeout() {
|
|
153
165
|
clearTimeout(this.htmlEditorActiveTimer);
|
|
154
|
-
this.htmlEditorActiveTimer = setTimeout(() =>
|
|
166
|
+
this.htmlEditorActiveTimer = setTimeout(() => {
|
|
167
|
+
this.isHtmlEditorActive = false;
|
|
168
|
+
this.isHtmlEditorLoaded = false;
|
|
169
|
+
}, (1000 * 60) * 1);
|
|
155
170
|
},
|
|
156
171
|
handleInput($event) {
|
|
157
172
|
this.setHtmlEditorTimeout();
|
|
@@ -161,6 +176,8 @@ export default {
|
|
|
161
176
|
handleLoadHtmlEditor() {
|
|
162
177
|
this.isHtmlEditorActive = true;
|
|
163
178
|
|
|
179
|
+
setTimeout(() => this.isHtmlEditorLoaded = true, 2000);
|
|
180
|
+
|
|
164
181
|
this.setHtmlEditorTimeout();
|
|
165
182
|
},
|
|
166
183
|
emitQuestion() {
|
|
@@ -199,8 +216,12 @@ export default {
|
|
|
199
216
|
}
|
|
200
217
|
}
|
|
201
218
|
|
|
219
|
+
.loading {
|
|
220
|
+
display: none;
|
|
221
|
+
}
|
|
222
|
+
|
|
202
223
|
.question__preview {
|
|
203
|
-
|
|
224
|
+
border: 1px solid #dee2e6;
|
|
204
225
|
height: 200px;
|
|
205
226
|
padding: 20px;
|
|
206
227
|
margin: 20px 0;
|