@burh/nuxt-core 1.0.500 → 1.0.502

package/components/burh-ds/Questions/Question.vue

@@ -1,243 +1,243 @@
-<template>
-	<div class="card position-relative">
-		<div class="row px-4 justify-content-start">
-			<div class="col-12 col-md-8">
-				<label class="form-control-label d-block pt-1">
-					{{ `Pergunta #${position + 1}` }}
-				</label>
-				<skeleton-animate
-					v-if="isHtmlEditorActive && !isHtmlEditorLoaded"
-					:percentageWidth="true"
-					:width="100"
-					:height="200"
-					class="mb-4"
-				/>
-				<div :class="{ 'loading': !isHtmlEditorLoaded }">
-					<html-editor
-						v-if="isHtmlEditorActive"
-						placeholder="Escreva uma pergunta"
-						:value="question.question"
-						:baseApiUrl="baseApiUrl"
-						:token="token"
-						@input="handleInput"
-					/>
-				</div>
-				<div @click="handleLoadHtmlEditor" v-if="!isHtmlEditorActive" class="question__preview" v-html="question.question"></div>
-			</div>
-
-			<div class="col-12 col-md-4 mb-4 mb-md-0">
-				<label class="form-control-label d-block pt-1">
-					Tipo
-				</label>
-				<el-select
-					class="select-danger w-100"
-					placeholder="Escolha o tipo da pergunta"
-					v-on:change="emitQuestion"
-					v-model="question.question_type"
-				>
-					<el-option
-						v-for="option in listComponentes"
-						class="select-danger"
-						:value="option.value"
-						:label="option.label"
-						:key="option.label"
-					>
-					</el-option>
-				</el-select>
-			</div>
-
-			<div class="col-12 col-md-8 form-group">
-				<paragraph
-					v-if="question.question_type == 'paragraph'"
-					:data="question.max_char ? question.max_char : undefined"
-					v-on:data-changed="mergeDataQuestion"
-				/>
-				<question-radio
-					v-if="question.question_type == 'multiple'"
-					:data="question.multiples"
-					v-on:data-changed="mergeDataQuestion"
-				/>
-				<question-attach
-					v-if="question.question_type == 'annex'"
-					:data="question"
-					v-on:data-changed="mergeDataQuestion"
-				/>
-			</div>
-			<div class="col-12 text-right pb-2">
-				<ul class="question-icons list-inline">
-					<li
-						v-for="(icon, index) in icons"
-						:key="`question-icon-${position}-${index}`"
-						@click="$emit(icon.event)"
-						:class="`list-inline-item text-${icon.type}`"
-					>
-						<el-tooltip
-							class="item"
-							effect="dark"
-							:content="icon.alt"
-							placement="top"
-						>
-							<font-awesome-icon
-								:icon="icon.icon"
-								:class="`icon-${icon.type}`"
-								:title="icon.alt"
-							/>
-						</el-tooltip>
-					</li>
-				</ul>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import { Select, Option } from 'element-ui';
-import QuestionText from '@burh/nuxt-core/components/burh-ds/Questions/QuestionText.vue';
-import QuestionRadio from '@burh/nuxt-core/components/burh-ds/Questions/QuestionRadio.vue';
-import QuestionAttach from '@burh/nuxt-core/components/burh-ds/Questions/QuestionAttach.vue';
-import HtmlEditor from '@burh/nuxt-core/components/burh-ds/Inputs/HtmlEditor.vue';
-import SkeletonAnimate from '../Skeleton/SkeletonAnimate.vue';
-
-export default {
-	components: {
-		[Select.name]: Select,
-		[Option.name]: Option,
-		Paragraph: QuestionText,
-		QuestionRadio,
-		QuestionAttach,
-		HtmlEditor,
-		SkeletonAnimate
-	},
-	props: {
-		step: {
-			type: Number,
-			default: 0
-		},
-		position: {
-			type: Number,
-			default: 0
-		},
-		data: null,
-		baseApiUrl: String,
-		token: String,
-		icons: {
-			type: Array,
-			default: () => [
-				{
-					event: 'first-icon-click',
-					icon: ['far', 'copy'],
-					alt: 'Clonar questão',
-					type: 'primary'
-				},
-				{
-					event: 'second-icon-click',
-					icon: ['fas', 'trash-alt'],
-					alt: 'Remover questão',
-					type: 'danger'
-				}
-			]
-		},
-		listComponentes: {
-			type: Array,
-			default: () => [
-				{ value: 'paragraph', label: 'Paragrafo' },
-				{ value: 'multiple', label: 'Alternativa' },
-				{ value: 'annex', label: 'Anexo' }
-			]
-		}
-	},
-	data() {
-		return {
-			console: console,
-			question: this.data,
-			isHtmlEditorActive: false,
-			isHtmlEditorLoaded: false,
-			htmlEditorActiveTimer: null
-		};
-	},
-	watch: {
-		data(newValue) {
-			this.question = newValue;
-		}
-	},
-	methods: {
-		setHtmlEditorTimeout() {
-			clearTimeout(this.htmlEditorActiveTimer);
-			this.htmlEditorActiveTimer = setTimeout(() => {
-				this.isHtmlEditorActive = false;
-				this.isHtmlEditorLoaded = false;
-			}, (1000 * 60) * 1);
-		},
-		handleInput($event) {
-			this.setHtmlEditorTimeout();
-
-			this.setQuestion('question', $event);
-		},
-		handleLoadHtmlEditor() {
-			this.isHtmlEditorActive = true;
-
-			setTimeout(() => this.isHtmlEditorLoaded = true, 2000);
-
-			this.setHtmlEditorTimeout();
-		},
-		emitQuestion() {
-			this.$emit('change-question', this.question);
-		},
-		setQuestion(type, data) {
-			this.question[type] = data;
-			this.emitQuestion();
-		},
-		mergeDataQuestion(data) {
-			this.question = { ...this.question, ...data };
-			this.emitQuestion();
-		},
-		isChangeTypeQuestion(value) {
-			return this.listComponentes.includes(value);
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.question-icons {
-    // position: absolute;
-    // bottom: 0;
-    // right: 1rem;
-    // display: flex;
-    // justify-content: flex-end;
-    // align-items: flex-end;
-    // list-style: none;
-
-    li {
-        padding-top: 1rem;
-        padding-left: 1rem;
-        padding-right: 1rem;
-        cursor: pointer;
-    }
-}
-
-.loading {
-    display: none;
-}
-
-.question__preview {
-    border: 1px solid #dee2e6;
-    height: 200px;
-    padding: 20px;
-    margin: 20px 0;
-    border-radius: 4px;
-    user-select: none;
-    position: relative;
-    overflow: hidden;
-
-    &::before {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 40px;
-        background: linear-gradient(180deg, rgba(#ffffff, 0.2), rgba(#ffffff, 0.9));
-    }
-}
-</style>
+<template>
+	<div class="card position-relative">
+		<div class="row px-4 justify-content-start">
+			<div class="col-12 col-md-8">
+				<label class="form-control-label d-block pt-1">
+					{{ `Pergunta #${position + 1}` }}
+				</label>
+				<skeleton-animate
+					v-if="isHtmlEditorActive && !isHtmlEditorLoaded"
+					:percentageWidth="true"
+					:width="100"
+					:height="200"
+					class="mb-4"
+				/>
+				<div :class="{ 'loading': !isHtmlEditorLoaded }">
+					<html-editor
+						v-if="isHtmlEditorActive"
+						placeholder="Escreva uma pergunta"
+						:value="question.question"
+						:baseApiUrl="baseApiUrl"
+						:token="token"
+						@input="handleInput"
+					/>
+				</div>
+				<div @click="handleLoadHtmlEditor" v-if="!isHtmlEditorActive" class="question__preview" v-html="question.question"></div>
+			</div>
+
+			<div class="col-12 col-md-4 mb-4 mb-md-0">
+				<label class="form-control-label d-block pt-1">
+					Tipo
+				</label>
+				<el-select
+					class="select-danger w-100"
+					placeholder="Escolha o tipo da pergunta"
+					v-on:change="emitQuestion"
+					v-model="question.question_type"
+				>
+					<el-option
+						v-for="option in listComponentes"
+						class="select-danger"
+						:value="option.value"
+						:label="option.label"
+						:key="option.label"
+					>
+					</el-option>
+				</el-select>
+			</div>
+
+			<div class="col-12 col-md-8 form-group">
+				<paragraph
+					v-if="question.question_type == 'paragraph'"
+					:data="question.max_char ? question.max_char : undefined"
+					v-on:data-changed="mergeDataQuestion"
+				/>
+				<question-radio
+					v-if="question.question_type == 'multiple'"
+					:data="question.multiples"
+					v-on:data-changed="mergeDataQuestion"
+				/>
+				<question-attach
+					v-if="question.question_type == 'annex'"
+					:data="question"
+					v-on:data-changed="mergeDataQuestion"
+				/>
+			</div>
+			<div class="col-12 text-right pb-2">
+				<ul class="question-icons list-inline">
+					<li
+						v-for="(icon, index) in icons"
+						:key="`question-icon-${position}-${index}`"
+						@click="$emit(icon.event)"
+						:class="`list-inline-item text-${icon.type}`"
+					>
+						<el-tooltip
+							class="item"
+							effect="dark"
+							:content="icon.alt"
+							placement="top"
+						>
+							<font-awesome-icon
+								:icon="icon.icon"
+								:class="`icon-${icon.type}`"
+								:title="icon.alt"
+							/>
+						</el-tooltip>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { Select, Option } from 'element-ui';
+import QuestionText from '@burh/nuxt-core/components/burh-ds/Questions/QuestionText.vue';
+import QuestionRadio from '@burh/nuxt-core/components/burh-ds/Questions/QuestionRadio.vue';
+import QuestionAttach from '@burh/nuxt-core/components/burh-ds/Questions/QuestionAttach.vue';
+import HtmlEditor from '@burh/nuxt-core/components/burh-ds/Inputs/HtmlEditor.vue';
+import SkeletonAnimate from '../Skeleton/SkeletonAnimate.vue';
+
+export default {
+	components: {
+		[Select.name]: Select,
+		[Option.name]: Option,
+		Paragraph: QuestionText,
+		QuestionRadio,
+		QuestionAttach,
+		HtmlEditor,
+		SkeletonAnimate
+	},
+	props: {
+		step: {
+			type: Number,
+			default: 0
+		},
+		position: {
+			type: Number,
+			default: 0
+		},
+		data: null,
+		baseApiUrl: String,
+		token: String,
+		icons: {
+			type: Array,
+			default: () => [
+				{
+					event: 'first-icon-click',
+					icon: ['far', 'copy'],
+					alt: 'Clonar questão',
+					type: 'primary'
+				},
+				{
+					event: 'second-icon-click',
+					icon: ['fas', 'trash-alt'],
+					alt: 'Remover questão',
+					type: 'danger'
+				}
+			]
+		},
+		listComponentes: {
+			type: Array,
+			default: () => [
+				{ value: 'paragraph', label: 'Paragrafo' },
+				{ value: 'multiple', label: 'Alternativa' },
+				{ value: 'annex', label: 'Anexo' }
+			]
+		}
+	},
+	data() {
+		return {
+			console: console,
+			question: this.data,
+			isHtmlEditorActive: false,
+			isHtmlEditorLoaded: false,
+			htmlEditorActiveTimer: null
+		};
+	},
+	watch: {
+		data(newValue) {
+			this.question = newValue;
+		}
+	},
+	methods: {
+		setHtmlEditorTimeout() {
+			clearTimeout(this.htmlEditorActiveTimer);
+			this.htmlEditorActiveTimer = setTimeout(() => {
+				this.isHtmlEditorActive = false;
+				this.isHtmlEditorLoaded = false;
+			}, (1000 * 60) * 1);
+		},
+		handleInput($event) {
+			this.setHtmlEditorTimeout();
+
+			this.setQuestion('question', $event);
+		},
+		handleLoadHtmlEditor() {
+			this.isHtmlEditorActive = true;
+
+			setTimeout(() => this.isHtmlEditorLoaded = true, 2000);
+
+			this.setHtmlEditorTimeout();
+		},
+		emitQuestion() {
+			this.$emit('change-question', this.question);
+		},
+		setQuestion(type, data) {
+			this.question[type] = data;
+			this.emitQuestion();
+		},
+		mergeDataQuestion(data) {
+			this.question = { ...this.question, ...data };
+			this.emitQuestion();
+		},
+		isChangeTypeQuestion(value) {
+			return this.listComponentes.includes(value);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.question-icons {
+    // position: absolute;
+    // bottom: 0;
+    // right: 1rem;
+    // display: flex;
+    // justify-content: flex-end;
+    // align-items: flex-end;
+    // list-style: none;
+
+    li {
+        padding-top: 1rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        cursor: pointer;
+    }
+}
+
+.loading {
+    display: none;
+}
+
+.question__preview {
+    border: 1px solid #dee2e6;
+    height: 200px;
+    padding: 20px;
+    margin: 20px 0;
+    border-radius: 4px;
+    user-select: none;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 40px;
+        background: linear-gradient(180deg, rgba(#ffffff, 0.2), rgba(#ffffff, 0.9));
+    }
+}
+</style>

package/components/burh-ds/Questions/QuestionAttach.vue

@@ -1,14 +1,14 @@
-<template>
-    <p class="text-lead form-group">Será solicitado um anexo de acordo com a sua pergunta.</p>
-</template>
-
-<script>
-
-export default {
-    name: 'question-attach',
-}
-</script>
-
-<style>
-
+<template>
+    <p class="text-lead form-group">Será solicitado um anexo de acordo com a sua pergunta.</p>
+</template>
+
+<script>
+
+export default {
+    name: 'question-attach',
+}
+</script>
+
+<style>
+
 </style>