@burh/nuxt-core 1.0.436 → 1.0.437

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,82 +1,84 @@
1
1
  <template>
2
- <div class="card position-relative">
3
- <div class="row px-4 justify-content-start">
4
- <div class="col-12 col-md-8">
5
- <label class="form-control-label d-block pt-1">
6
- {{ `Pergunta #${position + 1}` }}
7
- </label>
8
- <html-editor
9
- placeholder="Escreva uma pergunta"
10
- :value="question.question"
11
- :baseApiUrl="baseApiUrl"
12
- :token="token"
13
- v-on:input="setQuestion('question', $event)"
14
- />
15
- </div>
2
+ <div class="card position-relative">
3
+ <div class="row px-4 justify-content-start">
4
+ <div class="col-12 col-md-8">
5
+ <label class="form-control-label d-block pt-1">
6
+ {{ `Pergunta #${position + 1}` }}
7
+ </label>
8
+ <html-editor
9
+ v-if="isHtmlEditorActive"
10
+ placeholder="Escreva uma pergunta"
11
+ :value="question.question"
12
+ :baseApiUrl="baseApiUrl"
13
+ :token="token"
14
+ @input="handleInput"
15
+ />
16
+ <div @click="handleLoadHtmlEditor" v-if="!isHtmlEditorActive" class="question__preview" v-html="question.question"></div>
17
+ </div>
16
18
 
17
- <div class="col-12 col-md-4 mb-4 mb-md-0">
18
- <label class="form-control-label d-block pt-1">
19
- Tipo
20
- </label>
21
- <el-select
22
- class="select-danger w-100"
23
- placeholder="Escolha o tipo da pergunta"
24
- v-on:change="emitQuestion"
25
- v-model="question.question_type"
26
- >
27
- <el-option
28
- v-for="option in listComponentes"
29
- class="select-danger"
30
- :value="option.value"
31
- :label="option.label"
32
- :key="option.label"
33
- >
34
- </el-option>
35
- </el-select>
36
- </div>
19
+ <div class="col-12 col-md-4 mb-4 mb-md-0">
20
+ <label class="form-control-label d-block pt-1">
21
+ Tipo
22
+ </label>
23
+ <el-select
24
+ class="select-danger w-100"
25
+ placeholder="Escolha o tipo da pergunta"
26
+ v-on:change="emitQuestion"
27
+ v-model="question.question_type"
28
+ >
29
+ <el-option
30
+ v-for="option in listComponentes"
31
+ class="select-danger"
32
+ :value="option.value"
33
+ :label="option.label"
34
+ :key="option.label"
35
+ >
36
+ </el-option>
37
+ </el-select>
38
+ </div>
37
39
 
38
- <div class="col-12 col-md-8 form-group">
39
- <paragraph
40
- v-if="question.question_type == 'paragraph'"
41
- :data="question.max_char ? question.max_char : undefined"
42
- v-on:data-changed="mergeDataQuestion"
43
- />
44
- <question-radio
45
- v-if="question.question_type == 'multiple'"
46
- :data="question.multiples"
47
- v-on:data-changed="mergeDataQuestion"
48
- />
49
- <question-attach
50
- v-if="question.question_type == 'annex'"
51
- :data="question"
52
- v-on:data-changed="mergeDataQuestion"
53
- />
54
- </div>
55
- <div class="col-12 text-right pb-2">
56
- <ul class="question-icons list-inline">
57
- <li
58
- v-for="(icon, index) in icons"
59
- :key="`question-icon-${position}-${index}`"
60
- @click="$emit(icon.event)"
61
- :class="`list-inline-item text-${icon.type}`"
62
- >
63
- <el-tooltip
64
- class="item"
65
- effect="dark"
66
- :content="icon.alt"
67
- placement="top"
68
- >
69
- <font-awesome-icon
70
- :icon="icon.icon"
71
- :class="`icon-${icon.type}`"
72
- :title="icon.alt"
73
- />
74
- </el-tooltip>
75
- </li>
76
- </ul>
77
- </div>
78
- </div>
79
- </div>
40
+ <div class="col-12 col-md-8 form-group">
41
+ <paragraph
42
+ v-if="question.question_type == 'paragraph'"
43
+ :data="question.max_char ? question.max_char : undefined"
44
+ v-on:data-changed="mergeDataQuestion"
45
+ />
46
+ <question-radio
47
+ v-if="question.question_type == 'multiple'"
48
+ :data="question.multiples"
49
+ v-on:data-changed="mergeDataQuestion"
50
+ />
51
+ <question-attach
52
+ v-if="question.question_type == 'annex'"
53
+ :data="question"
54
+ v-on:data-changed="mergeDataQuestion"
55
+ />
56
+ </div>
57
+ <div class="col-12 text-right pb-2">
58
+ <ul class="question-icons list-inline">
59
+ <li
60
+ v-for="(icon, index) in icons"
61
+ :key="`question-icon-${position}-${index}`"
62
+ @click="$emit(icon.event)"
63
+ :class="`list-inline-item text-${icon.type}`"
64
+ >
65
+ <el-tooltip
66
+ class="item"
67
+ effect="dark"
68
+ :content="icon.alt"
69
+ placement="top"
70
+ >
71
+ <font-awesome-icon
72
+ :icon="icon.icon"
73
+ :class="`icon-${icon.type}`"
74
+ :title="icon.alt"
75
+ />
76
+ </el-tooltip>
77
+ </li>
78
+ </ul>
79
+ </div>
80
+ </div>
81
+ </div>
80
82
  </template>
81
83
 
82
84
  <script>
@@ -87,79 +89,95 @@ import QuestionAttach from '@burh/nuxt-core/components/burh-ds/Questions/Questio
87
89
  import HtmlEditor from '@burh/nuxt-core/components/burh-ds/Inputs/HtmlEditor.vue';
88
90
 
89
91
  export default {
90
- components: {
91
- [Select.name]: Select,
92
- [Option.name]: Option,
93
- Paragraph: QuestionText,
94
- QuestionRadio,
95
- QuestionAttach,
96
- HtmlEditor
97
- },
98
- props: {
99
- step: {
100
- type: Number,
101
- default: 0
102
- },
103
- position: {
104
- type: Number,
105
- default: 0
106
- },
107
- data: null,
108
- baseApiUrl: String,
109
- token: String,
110
- icons: {
111
- type: Array,
112
- default: () => [
113
- {
114
- event: 'first-icon-click',
115
- icon: ['far', 'copy'],
116
- alt: 'Clonar questão',
117
- type: 'primary'
118
- },
119
- {
120
- event: 'second-icon-click',
121
- icon: ['fas', 'trash-alt'],
122
- alt: 'Remover questão',
123
- type: 'danger'
124
- }
125
- ]
126
- },
127
- listComponentes: {
128
- type: Array,
129
- default: () => [
130
- { value: 'paragraph', label: 'Paragrafo' },
131
- { value: 'multiple', label: 'Alternativa' },
132
- { value: 'annex', label: 'Anexo' }
133
- ]
134
- }
135
- },
136
- data() {
137
- return {
138
- console: console,
139
- question: this.data
140
- };
141
- },
142
- watch: {
143
- data(newValue) {
144
- this.question = newValue;
145
- }
146
- },
147
- methods: {
148
- emitQuestion() {
149
- this.$emit('change-question', this.question);
150
- },
151
- setQuestion(type, data) {
152
- this.question[type] = data;
153
- this.emitQuestion();
154
- },
155
- mergeDataQuestion(data) {
156
- this.question = { ...this.question, ...data };
157
- this.emitQuestion();
158
- },
159
- isChangeTypeQuestion(value) {
160
- return this.listComponentes.includes(value);
161
- }
162
- }
92
+ components: {
93
+ [Select.name]: Select,
94
+ [Option.name]: Option,
95
+ Paragraph: QuestionText,
96
+ QuestionRadio,
97
+ QuestionAttach,
98
+ HtmlEditor
99
+ },
100
+ props: {
101
+ step: {
102
+ type: Number,
103
+ default: 0
104
+ },
105
+ position: {
106
+ type: Number,
107
+ default: 0
108
+ },
109
+ data: null,
110
+ baseApiUrl: String,
111
+ token: String,
112
+ icons: {
113
+ type: Array,
114
+ default: () => [
115
+ {
116
+ event: 'first-icon-click',
117
+ icon: ['far', 'copy'],
118
+ alt: 'Clonar questão',
119
+ type: 'primary'
120
+ },
121
+ {
122
+ event: 'second-icon-click',
123
+ icon: ['fas', 'trash-alt'],
124
+ alt: 'Remover questão',
125
+ type: 'danger'
126
+ }
127
+ ]
128
+ },
129
+ listComponentes: {
130
+ type: Array,
131
+ default: () => [
132
+ { value: 'paragraph', label: 'Paragrafo' },
133
+ { value: 'multiple', label: 'Alternativa' },
134
+ { value: 'annex', label: 'Anexo' }
135
+ ]
136
+ }
137
+ },
138
+ data() {
139
+ return {
140
+ console: console,
141
+ question: this.data,
142
+ isHtmlEditorActive: false,
143
+ htmlEditorActiveTimer: null
144
+ };
145
+ },
146
+ watch: {
147
+ data(newValue) {
148
+ this.question = newValue;
149
+ }
150
+ },
151
+ methods: {
152
+ setHtmlEditorTimeout() {
153
+ clearTimeout(this.htmlEditorActiveTimer);
154
+ this.htmlEditorActiveTimer = setTimeout(() => this.isHtmlEditorActive = false, (1000 * 10));
155
+ },
156
+ handleInput($event) {
157
+ this.setHtmlEditorTimeout();
158
+
159
+ this.setQuestion('question', $event);
160
+ },
161
+ handleLoadHtmlEditor() {
162
+ this.isHtmlEditorActive = true;
163
+
164
+ this.setHtmlEditorTimeout();
165
+ },
166
+ emitQuestion() {
167
+ this.$emit('change-question', this.question);
168
+ },
169
+ setQuestion(type, data) {
170
+ this.question[type] = data;
171
+ this.emitQuestion();
172
+ },
173
+ mergeDataQuestion(data) {
174
+ this.question = { ...this.question, ...data };
175
+ this.emitQuestion();
176
+ },
177
+ isChangeTypeQuestion(value) {
178
+ return this.listComponentes.includes(value);
179
+ }
180
+ }
163
181
  };
164
182
  </script>
165
183
 
@@ -180,4 +198,13 @@ export default {
180
198
  cursor: pointer;
181
199
  }
182
200
  }
201
+
202
+ .question__preview {
203
+ background: #e9e9e9;
204
+ height: 200px;
205
+ padding: 20px;
206
+ margin: 20px 0;
207
+ border-radius: 4px;
208
+ user-select: none;
209
+ }
183
210
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@burh/nuxt-core",
3
- "version": "1.0.436",
3
+ "version": "1.0.437",
4
4
  "description": "Design System and Components.",
5
5
  "author": "Burh",
6
6
  "scripts": {