@burh/nuxt-core 1.0.20 → 1.0.21

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

@@ -0,0 +1,110 @@
+<template>
+    <div class="card card--shadow">
+        <div class="row px-4 justify-content-start">
+            <base-input 
+                name="Question"
+                :label="`Pergunta #${position + 1}`" 
+                placeholder="Escreva uma pergunta" 
+                type="text" 
+                class="col-8" 
+                :error="getError('Question')" 
+                :valid="isValid('Question')" 
+                v-model="question.question"
+                v-validate="'required'"/>
+
+            <div class="col-4">
+                <label class="form-control-label d-block pt-1">
+                    Escolha o tipo da pergunta
+                </label>
+                <el-select class="select-danger w-100"
+                        placeholder="Single Select"
+                        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-8 form-group">
+                <component 
+                    :is="question.question_type" 
+                    v-on:data-changed="createDataQuestion"
+                />
+                <slot/>
+            </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';
+
+export default {
+    components: {
+        [Select.name]: Select,
+        [Option.name]: Option,
+        Paragraph: QuestionText,
+        QuestionRadio,
+        QuestionAttach
+    },
+    props: {
+        position: Number,
+    },
+    data() {
+        return {
+            console:console,
+            listComponentes: [
+                {
+                    value: 'paragraph',
+                    label: 'Paragrafo'
+                },
+                {
+                    value: 'question-radio',
+                    label: 'Dissertativa'
+                },
+                {
+                    value: 'question-attach',
+                    label: 'Anexo'
+                }
+            ],
+            question: {
+                question_type: 'paragraph',
+                question: '',
+            }
+        }
+    },
+    watch: {
+        question: {
+            handler: 'emitQuestion',
+            deep: true
+        },
+    },
+    methods: {
+        emitQuestion() {
+            this.$emit('change-question', this.question)
+        },
+        isChangeTypeQuestion(value) {
+            return this.listComponentes.includes(value);
+        },
+        createDataQuestion(data) {
+            this.question = { ...this.question , ...data }
+        },
+        getError(name){
+            return this.errors.first(name);
+        },
+        isValid(name) {
+            return this.validated && !this.errors.has(name);
+        },
+    }
+}
+</script>
+
+<style>
+
+</style>

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

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

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

@@ -0,0 +1,97 @@
+<template>
+    <div>
+        <el-radio-group v-model="selected" v-for="(answer, index) in answers" :key="index">
+            <question-radio-item 
+                v-on:change-answer="setAnswers($event, answer)"
+            ></question-radio-item>
+        </el-radio-group>
+        <base-button size="sm" type="primary" @click="addOption">Adicionar</base-button>
+        <base-button outline size="sm" type="primary" @click="removeLastOption">Remover</base-button>
+    </div>
+</template>
+
+<script>
+import {Radio, RadioGroup} from 'element-ui'
+import QuestionRadioItem from '@burh/nuxt-core/components/burh-ds/Questions/QuestionRadioItem.vue';
+
+export default {
+    name: 'question-radio',
+    components: {
+        [Radio.name]: Radio,
+        [RadioGroup.name]: RadioGroup,
+        QuestionRadioItem
+    },
+    props: {
+        dataAnswers: {
+            type: Array,
+            default: () => [{}, {}]
+        }
+    },
+    data() {
+        return {
+            selected: null,
+            answers: this.dataAnswers,
+            minRadios: 2,
+        }
+    },
+    methods: {
+        addOption() {
+            this.answers.push({});
+        },
+        removeLastOption() {
+            if(this.answers.length <= this.minRadios) {
+                return;
+            } 
+            this.answers.splice(this.answers.length - 1, 1);
+        },
+        setAnswers(value, answer) {
+            answer['response'] = value;
+            this.emitAnswersRadio();
+        },
+        makeStructureListRadio() {
+            const listRadio = this.answers.map(radio => {
+                if ( radio.response == this.selected ) {
+                    return {
+                        name: radio.response,
+                        correct: true,
+                    }
+                }
+
+                return {
+                    name: radio.response,
+                    correct: false,
+                }
+            })
+
+            return listRadio
+        },
+        emitAnswersRadio() {
+            const payload = {
+                response: this.selected,
+                multiples: this.makeStructureListRadio()
+            }
+            this.$emit('data-changed', payload)
+        },
+    },
+    computed: {
+        getAnswers() {
+            return this.answers;
+        }
+    },
+    watch: {
+        getAnswers: {
+            handler: 'emitAnswersRadio',
+            deep: true
+        },
+        selected() {
+            this.emitAnswersRadio();
+        }
+    },
+}
+</script>
+
+<style lang='scss'>
+.el-radio-group {
+    width: 100%;
+}
+</style>

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

@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <el-radio 
+          :label="value" 
+          class="form-radio" 
+          :class="{'form-radio--error': getError('Response')}">
+            <base-input 
+                name="Response" 
+                class="" 
+                type="text" 
+                placeholder="Coloque uma resposta aqui" 
+                v-model="value"
+                v-on:input="$emit('change-answer', value)" 
+                :error="getError('Response')" 
+                :valid="isValid('Response')" 
+                v-validate="'required'"/>
+        </el-radio>
+    </div>
+</template>
+
+<script>
+import { Radio } from 'element-ui'
+
+export default {
+    name: 'question-radio-item',
+    components: {
+        [Radio.name]: Radio,
+    },
+    props: {
+    },
+    data() {
+        return {
+            value: '',
+        }
+    },
+    methods: {
+        getError(name){
+            return this.errors.first(name);
+        },
+        isValid(name) {
+            return this.validated && !this.errors.has(name);
+        },
+    }
+}
+</script>
+
+<style lang='scss'>
+.form-radio.el-radio {
+    display: block;
+    margin-right: 1.5rem;
+
+
+    .form-group {
+        display: inline-block;
+        width: 100%;
+        padding-left: 1rem;
+    }
+
+    &:last-child {
+        margin-right: 1.5rem;
+    }
+
+    &__input {
+        top: 1.5rem
+    }
+}
+
+
+.form-radio--error {
+    .el-radio__input {
+        top: -1.5rem;
+    }
+}
+
+</style>

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

@@ -0,0 +1,36 @@
+<template>
+    <base-input 
+        name="maxCharacters"
+        type="Number" 
+        label="Quantidade maxima de caracteres da resposta" 
+        v-model="value"
+        v-on:change="$emit('data-changed', { max_char: value })"
+        :error="getError('maxCharacters')" 
+        :valid="isValid('maxCharacters')"
+        v-validate="'required|between:30,4096'">
+    </base-input>
+</template>
+
+<script>
+
+export default {
+    name: 'question-text',
+    data() {
+        return {
+            value: 240
+        }
+    },
+    methods: {
+        getError(name){
+            return this.errors.first(name);
+        },
+        isValid(name) {
+            return this.validated && !this.errors.has(name);
+        },
+    }
+}
+</script>
+
+<style>
+
+</style>

package/components/burh-ds/Questions/index.js

@@ -0,0 +1,14 @@
+import Question from '@burh/nuxt-core/components/burh-ds/Questions/Question.vue';
+import QuestionAttach from '@burh/nuxt-core/components/burh-ds/Questions/QuestionAttach.vue';
+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 QuestionRadioItem from '@burh/nuxt-core/components/burh-ds/Questions/QuestionRadioItem.vue';
+
+
+export {
+    Question,
+    QuestionAttach,
+    QuestionText,
+    QuestionRadio,
+    QuestionRadioItem
+}

package/components/burh-ds/Tabs/Tab.vue

@@ -1,50 +1,50 @@
-<template>
-  <div
-    class="tab-pane"
-    v-show="active"
-    :id="id || title"
-    :class="{ active: active }"
-    :aria-expanded="active"
-  >
-    <slot></slot>
-  </div>
-</template>
-<script>
-import { isMobile, isMobileOnly } from 'mobile-device-detect';
-
-export default {
-  name: 'tab-pane',
-  props: ['title', 'id'],
-  inject: ['addTab', 'removeTab'],
-  data() {
-    return {
-      active: false,
-      isMobileOnlyWatch: isMobileOnly
-    };
-  },
-  mounted() {
-    this.addTab(this);
-
-    this.$bus.$on('close-tab', (data) => {
-      this.active = false;
-      if(this.isMobileOnlyWatch){
-        if(document.querySelector('html').classList.contains('no-scroll')){
-          document.querySelector('html').classList.remove('no-scroll');
-        }
-      }
-    });
-  },
-  beforeDestroy(){
-    if(document.querySelector('html').classList.contains('no-scroll')){
-      document.querySelector('html').classList.remove('no-scroll');
-    }
-  },
-  destroyed() {
-    if (this.$el && this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el);
-    }
-    this.removeTab(this);
-  }
-};
-</script>
-<style></style>
+<template>
+  <div
+    class="tab-pane"
+    v-show="active"
+    :id="id || title"
+    :class="{ active: active }"
+    :aria-expanded="active"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script>
+import { isMobile, isMobileOnly } from 'mobile-device-detect';
+
+export default {
+  name: 'tab-pane',
+  props: ['title', 'id'],
+  inject: ['addTab', 'removeTab'],
+  data() {
+    return {
+      active: false,
+      isMobileOnlyWatch: isMobileOnly
+    };
+  },
+  mounted() {
+    this.addTab(this);
+
+    this.$bus.$on('close-tab', (data) => {
+      this.active = false;
+      if(this.isMobileOnlyWatch){
+        if(document.querySelector('html').classList.contains('no-scroll')){
+          document.querySelector('html').classList.remove('no-scroll');
+        }
+      }
+    });
+  },
+  beforeDestroy(){
+    if(document.querySelector('html').classList.contains('no-scroll')){
+      document.querySelector('html').classList.remove('no-scroll');
+    }
+  },
+  destroyed() {
+    if (this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
+    this.removeTab(this);
+  }
+};
+</script>
+<style></style>