@burh/nuxt-core 1.0.436 → 1.0.438

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