@burh/nuxt-core 1.0.20 → 1.0.21

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

@@ -1,80 +1,80 @@
-<template lang="">
-	<div>
-		<span class="loader-wrapper"><span class="loader"></span></span>
-		<div class="col loader-target" :class="{'loader-target--hidden': isLoading}" />
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'loading-basics',
-	props: {
-		isLoading: {
-			type: Boolean,
-			default: false,
-			description: 'If the parent screen is loading'
-		}
-	}
-};
-</script>
-
-<style lang="scss">
-@import "assets/sass/burh-ds/variables/_colors.scss";
-
-.login-page {
-    padding: 1rem;
-
-    .h2 {
-        line-height: 1.2;
-        text-align: center;
-    }
-    .btn {
-        white-space: nowrap;
-    }
-    @media screen and (min-width: 560px) {
-    }
-    @media screen and (min-width: 560px) {
-        width: 50%;
-        min-width: 400px;
-        max-width: 600px;
-        margin: 4rem auto;
-        padding: 0px;
-    }
-}
-
-.loader-target {
-    width: 100%;
-    height: 100%;
-    background-color: white;
-    position: absolute !important;
-    z-index: 2;
-    opacity: 0.1;
-
-    &--hidden {
-        .loader-wrapper {
-            width: 0;
-            height: 0;
-            left: 50%;
-            background-color: rgba($base-light, 0);
-            transform: scale(0);
-            transition: all .35s ease-in-out;
-        }
-    }
-}
-.loader-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    background-color: rgba($base-light, .4);
-    transform: scale(1);
-    transition: all .35s ease-in-out;
-}
-
+<template lang="">
+	<div>
+		<span class="loader-wrapper"><span class="loader"></span></span>
+		<div class="col loader-target" :class="{'loader-target--hidden': isLoading}" />
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'loading-basics',
+	props: {
+		isLoading: {
+			type: Boolean,
+			default: false,
+			description: 'If the parent screen is loading'
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+@import "assets/sass/burh-ds/variables/_colors.scss";
+
+.login-page {
+    padding: 1rem;
+
+    .h2 {
+        line-height: 1.2;
+        text-align: center;
+    }
+    .btn {
+        white-space: nowrap;
+    }
+    @media screen and (min-width: 560px) {
+    }
+    @media screen and (min-width: 560px) {
+        width: 50%;
+        min-width: 400px;
+        max-width: 600px;
+        margin: 4rem auto;
+        padding: 0px;
+    }
+}
+
+.loader-target {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    position: absolute !important;
+    z-index: 2;
+    opacity: 0.1;
+
+    &--hidden {
+        .loader-wrapper {
+            width: 0;
+            height: 0;
+            left: 50%;
+            background-color: rgba($base-light, 0);
+            transform: scale(0);
+            transition: all .35s ease-in-out;
+        }
+    }
+}
+.loader-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: rgba($base-light, .4);
+    transform: scale(1);
+    transition: all .35s ease-in-out;
+}
+
 </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/Modals/MobileModal.vue

@@ -1,65 +1,65 @@
-<template>
-	<div>
-		<notifications></notifications>
-		<modal :show.sync="show.mobileModal" class="modal-share">
-			<template slot="header">
-				<!-- <h5 class="modal-title" id="exampleModalLabel">Compartilhar</h5> -->
-			</template>
-			<div class="img-app-container">
-				<img src="img/android_and_ios.png" class="img-app"/>
-			</div>
-
-			<p class="p-title">Estamos atualizando nossos aplicativos</p>
-			<p class="p-text">Nossos Apps iOS e Android estão passando por melhorias, queremos garantir a melhor experiência possível e feedback em tempo real das vagas para você.</p>
-
-		</modal>
-	</div>
-</template>
-
-<script>
-import { mask } from 'vue-the-mask';
-
-export default {
-	name: 'mobile-modal',
-	directives:{
-		mask
-	},
-	components: {
-	},
-	props: {
-		show: Object,
-		url: String
-	},
-	data() {
-		return {
-			modals: {
-				mobileModal: false
-			},
-		};
-	},
-	mounted(){
-
-	},
-	methods:{
-
-	}
-};
-</script>
-<style lang="scss">
-    .img-app-container {
-        text-align: center;
-    }
-    .img-app {
-        width: 300px !important;
-        height: auto !important;
-    }
-    .p-text {
-        text-align: center;
-    }
-    .p-title {
-        font-size: 27px;
-        font-weight: bold;
-        text-align: center;
-        color:#1DA1F1;
-    }
-</style>
+<template>
+	<div>
+		<notifications></notifications>
+		<modal :show.sync="show.mobileModal" class="modal-share">
+			<template slot="header">
+				<!-- <h5 class="modal-title" id="exampleModalLabel">Compartilhar</h5> -->
+			</template>
+			<div class="img-app-container">
+				<img src="img/android_and_ios.png" class="img-app"/>
+			</div>
+
+			<p class="p-title">Estamos atualizando nossos aplicativos</p>
+			<p class="p-text">Nossos Apps iOS e Android estão passando por melhorias, queremos garantir a melhor experiência possível e feedback em tempo real das vagas para você.</p>
+
+		</modal>
+	</div>
+</template>
+
+<script>
+import { mask } from 'vue-the-mask';
+
+export default {
+	name: 'mobile-modal',
+	directives:{
+		mask
+	},
+	components: {
+	},
+	props: {
+		show: Object,
+		url: String
+	},
+	data() {
+		return {
+			modals: {
+				mobileModal: false
+			},
+		};
+	},
+	mounted(){
+
+	},
+	methods:{
+
+	}
+};
+</script>
+<style lang="scss">
+    .img-app-container {
+        text-align: center;
+    }
+    .img-app {
+        width: 300px !important;
+        height: auto !important;
+    }
+    .p-text {
+        text-align: center;
+    }
+    .p-title {
+        font-size: 27px;
+        font-weight: bold;
+        text-align: center;
+        color:#1DA1F1;
+    }
+</style>