@burh/nuxt-core 1.0.19 → 1.0.21

package/components/burh-ds/Inputs/BaseSwitch.vue

@@ -0,0 +1,43 @@
+<template>
+	<label class="custom-toggle" :class="switchClass">
+		<input type="checkbox" @change="$emit('changeRecurrence')" :checked="checked">
+		<span class="custom-toggle-slider rounded-circle" :data-label-off="offText" :data-label-on="onText"></span>
+	</label>
+</template>
+<script>
+export default {
+	name: 'base-switch',
+	props: {
+		onText: {
+			type: String,
+			default: 'Sim'
+		},
+		offText: {
+			type: String,
+			default: 'Não'
+		},
+		checked: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		switchClass() {
+			let baseClass = 'custom-toggle-';
+			if (this.type) {
+				return baseClass + this.type;
+			}
+			return '';
+		},
+	},
+};
+</script>
+<style>
+    .custom-toggle input:not(:checked) + span.custom-toggle-slider::after {
+        width: 40px !important;
+    }
+
+    .custom-toggle {
+        margin: 10px auto !important;
+    }
+</style>

package/components/burh-ds/Inputs/BaseSwitchSecondary.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="custom-toggle--secondary">
+        
+        <p class="custom-toggle--secondary__text" :class="checked ? classToggle.text[1] : classToggle.text[0]">
+            {{onText}}
+        </p>
+
+        <label class="custom-toggle" :class="switchClass">
+            <input type="checkbox" @change="$emit('change-switch')" :checked="checked">
+            <span class="custom-toggle-slider rounded-circle" 
+                :data-label-off="''" :data-label-on="''"/>
+        </label>    
+
+        <p class="custom-toggle--secondary__text" :class="checked ? classToggle.text[0] : classToggle.text[1]">
+            {{offText}} 
+            <badge v-if="badgeText" rounded :type="checked ? classToggle.badge[0] : classToggle.badge[1] ">
+                {{badgeText}}
+            </badge>
+        </p>
+    </div>
+</template>
+<script>
+export default {
+	name: 'base-switch-secondary',
+	props: {
+		onText: {
+			type: String,
+			default: 'Sim'
+		},
+		offText: {
+			type: String,
+			default: 'Não'
+		},
+		checked: {
+			type: Boolean,
+			default: false
+        },
+        badgeText: {
+            type: String,
+            default: ''
+        },
+        classToggle: {
+            type: Object,
+            default: () => { 
+                return {
+                    text: ['text-primary', ''],
+                    badge: ['primary', 'light']
+                }
+            },
+        }
+	},
+	computed: {
+		switchClass() {
+			let baseClass = 'custom-toggle-';
+			if (this.type) {
+				return baseClass + this.type;
+			}
+			return '';
+		},
+	},
+};
+</script>
+<style lang="scss">
+    .custom-toggle--secondary {
+        display: flex;
+        
+        &__text {
+            margin-top: 0.5rem;
+            margin-bottom: 0.5rem;
+            margin-left: 1rem;
+            margin-right: 1rem;
+            text-align: center;
+            font-weight: 600;
+        }
+    }
+
+    .custom-toggle input:not(:checked) + span.custom-toggle-slider::after {
+        width: 40px !important;
+    }
+
+    .custom-toggle {
+        margin: 10px auto !important;
+    }
+</style>

package/components/burh-ds/Lists/ListNavLinks.vue

@@ -1,26 +1,41 @@
 <template>
-    <base-dropdown menu-on-left
-                v-if="children != ''"
-                class="nav-item"
-                tag="li"
-                title-tag="a"
-                title-classes="nav-link pr-0">
-                <span href="#" class="nav-link text-white" @click.prevent slot="title-container">{{name}}</span>
-          <template>
-            <a :href=links.link class="dropdown-item" v-for="(links, index) in children" :key="index">{{links.name}}</a>
-          </template>
-    </base-dropdown>
-    <li v-else class="nav-item">
-        <nuxt-link :to=link class="nav-link text-white">{{name}}</nuxt-link>
-    </li>
+  <base-dropdown menu-on-left
+    v-if="children != ''"
+    class=""
+    tag="li"
+    title-tag="a"
+  >
+    <span
+      href="#"
+      class="nav-link bolder"
+      @click.prevent
+      slot="title-container"
+    >
+      {{name}}
+    </span>
+    <a
+      :href=links.link
+      class="dropdown-item"
+      v-for="(links, index) in children"
+      :key="index">{{links.name}}
+    </a>
+  </base-dropdown>
+  <li v-else class="nav-item">
+    <nuxt-link :to=link class="nav-link bolder">{{name}}</nuxt-link>
+  </li>
 </template>
 <script>
 export default {
-    props:{
-        id: String,
-        name: String,
-        link: String,
-        children: Array
-    }
+  props:{
+    id: String,
+    name: String,
+    link: String,
+    children: Array
+  }
 }
-</script>
+</script>
+<style lang="scss" scoped>
+.bolder {
+    font-weight: 600;
+}
+</style>

package/components/burh-ds/Loadings/LoadingFullPage.vue

@@ -0,0 +1,54 @@
+<template>
+	<div class="vld-parent">
+		<loading :active.sync="isLoading"
+			:can-cancel="true"
+			:on-cancel="onCancel"
+			:is-full-page="fullPage"
+			:color="'#1DA1F1'"
+			:loader="'dots'"></loading>
+
+		<!-- <label><input type="checkbox" v-model="fullPage">Full page?</label>
+		<button @click.prevent="doAjax">fetch Data</button> -->
+	</div>
+</template>
+
+<script>
+// Import component
+import Loading from 'vue-loading-overlay';
+// Import stylesheet
+import 'vue-loading-overlay/dist/vue-loading.css';
+
+export default {
+	// data() {
+	// 	return {
+	// 		isLoading: false,
+	// 		fullPage: true
+	// 	};
+	// },
+	props: {
+		isLoading: {
+		    type: Boolean,
+	        default: false
+		},
+		fullPage: {
+		    type: Boolean,
+	        default: true
+		}
+	},
+	components: {
+		Loading
+	},
+	methods: {
+		doAjax() {
+			this.isLoading = true;
+			// simulate AJAX
+			setTimeout(() => {
+				this.isLoading = false;
+			}, 5000);
+		},
+		onCancel() {
+			console.log('User cancelled the loader.');
+		}
+	}
+};
+</script>

package/components/burh-ds/Modals/AppConfigModal.vue

@@ -0,0 +1,171 @@
+<template>
+    <modal :show.sync="openModal" v-on:close="$emit('close-modal')" size='lg' class="modal">
+        <template slot="header">
+            <h2 class="display-4 px-4">{{title}}</h2>
+        </template>
+        
+        <div class="row px-4">
+            <div class="col-12">
+                <label for="description">{{name}}</label>
+                <base-input
+                placeholder="Insira o nome do teste"
+                v-model="atributes.title"
+                >
+                </base-input>
+            </div>
+
+            <div class="col-12">
+                <label for="description">{{textAreaTitle}}</label>
+                <el-input
+                type="textarea"
+                :rows="5"
+                placeholder="Insira a descrição do teste"
+                v-model="atributes.textarea">
+                </el-input>
+            </div>
+
+            <div class="col-12">
+                <p class="mb-0 mt-3">{{buttonAreaTitle}}</p>
+
+                <div class="d-flex justify-content-between flex-wrap">
+                  <base-button role="button" outline size="sm" type="test-online" class="mx-0"
+                    v-for="(buttons, index) in buttons" :key="index"
+                    :id="'button-' + buttons.id" :value="buttons.value"
+                    :class="buttons.id == currentSelectedButton ? 'focus' : ''"
+                    @click="timeSelection(buttons.id)"
+                  >
+                    <i v-if="buttons.id == currentSelectedButton" class="fas fa-check purple mr-1"></i>
+                    <small>{{buttons.time}}</small>
+                  </base-button>
+                </div>
+
+                <base-input
+                  v-model="value"
+                  id='time-picker'
+                  placeholder='00:00:00'
+                  :disabled="disableTimePicker"
+                  type="'tel'"
+                  v-mask="'##:##:##'"
+                  class="w-50"
+                ></base-input>
+            </div>
+
+            <base-button size="md" type="test-online" role="button" 
+              @click="sendConfig()"
+              class="ml-auto mr-3">{{sendButton}}</base-button>
+        </div>
+    </modal>
+</template>
+<script>
+import swal from 'sweetalert2';
+import {mask} from 'vue-the-mask'
+export default {
+    directives: {mask},
+    data(){
+        return{
+            atributes:{
+                title: '',
+                textarea: '',
+                selectedTime: '',
+            },
+            currentSelectedButton: String,
+            disableTimePicker: true,    
+            value: '',
+        }
+    },
+    model:{
+        prop: 'show'
+    },
+    props:{
+        show: false,
+        name:{
+            type: String,
+            default: 'Nome'
+        },
+        buttons:{
+            type: Array,
+            default: () => [{id: '1', time: '5 minutos', value:'00:05:00'}, {id: '2', time: '10 minutos', value:'00:10:00'}, {id: '3', time: '15 minutos', value:'00:15:00'}, 
+            {id: '4', time: '30 minutos', value:'00:30:00'},{id: '5', time: '45 minutos', value:'00:45:00'}, {id: '6', time: '60 minutos', value:'01:00:00'}, 
+            {id: '7', time: '2 horas', value: '02:00:00'}, {id: 'custom', time: 'Personalizado', value: ''}],
+            description: 'Botoes de tempo'
+        },
+        title:{
+            type: String,
+            default: 'Geral',
+            description: 'Titulo do Modal'
+        },
+        textAreaTitle:{
+            type: String,
+            default: 'Descrição',
+            description: 'Titulo da text area'
+        },
+        buttonAreaTitle:{
+            type: String,
+            default: 'Tempo Limite',
+            description: 'Titulo da area de botões'
+        },
+        sendButton:{
+            type: String,
+            default: 'Salvar',
+            description: 'Botão de envio'
+        }
+    },
+    watch:{
+        value(oldVal, newVal){
+            this.selectCustomTime();
+        }
+    },
+    computed:{
+        openModal:{
+            get(){return this.show},
+            set(show){this.$emit('input', show)}
+        }
+    },
+    methods:{
+        timeSelection(buttonId){
+            let btn = document.getElementById('button-' + buttonId);
+            let timePicker = document.getElementById('time-picker');
+            if(buttonId != 'custom'){
+                this.atributes.selectedTime=btn.value;
+                this.currentSelectedButton=buttonId
+                this.disableTimePicker = true;
+            }
+            else{
+                this.disableTimePicker = false;
+                this.currentSelectedButton = 'custom'
+            }
+        },
+        selectCustomTime(){
+            let button = document.getElementById('button-custom');
+
+            button.value = this.value;
+            this.atributes.selectedTime = this.value;
+        },
+
+        sendConfig(){
+            if(this.atributes.title == '' || this.atributes.textarea == '' || 
+            this.atributes.selectedTime == '' || this.atributes.selectedTime.length != 8){
+                swal.fire({
+                    title: `Aviso`,
+                    html: `Por favor, preencha todos os campos corretamente para continuar.`,
+                    buttonsStyling: false,
+                    confirmButtonClass: 'btn btn-primary btn-fill',
+                });
+            }
+            else{
+                this.$emit('send-atributes', this.atributes)
+                swal.fire({
+                    title: `Parabéns`,
+                    html: `Configurações salvas com sucesso.`,
+                    buttonsStyling: false,
+                    confirmButtonClass: 'btn btn-primary btn-fill',
+                });
+                this.openModal=false;
+            }
+        },
+    },
+}
+</script>
+<style lang="scss">
+@import "node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
+</style>

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>