@burh/nuxt-core 1.0.21 → 1.0.22

package/components/burh-ds/Cards/TestCard.vue

@@ -0,0 +1,70 @@
+<template>
+    <li class="column">
+        <nuxt-link :to="link" class="small-card">
+            <img
+                v-if="icon === ''"
+                class="card__image"
+                :src="image"
+                :alt="`Icone para ${text}`"
+            >
+            <i
+                v-else
+                :class="icon"
+                class="card__icon"
+            />
+        </nuxt-link>
+        <span class="card-title">{{text}}</span>
+	</li>
+</template>
+<script>
+export default {
+    name: "test-card",
+    props:{
+        link: String,
+        text: String,
+        image: String,
+        icon: {
+            type: String,
+            default: ''
+        }
+    }
+}
+</script>
+<style lang="scss">
+@import "@burh/nuxt-core/assets/sass/argon.scss";
+    .column {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .card__image {
+        width: 6rem;
+    }
+
+    .card-title {
+        font-size: .9rem;
+        line-height: .9rem;
+        color: #3c4858;
+        font-weight: 600;
+        margin-top: 1rem;
+    }
+
+    .card__icon {
+        font-size: 6rem;
+        color: $violet;
+    }
+
+    .small-card {
+        padding: 3rem 4rem;
+        margin: 0 1rem;
+        box-shadow: 0 0 1rem 0 rgba(#4a525a, .15);
+        border: 2px solid transparent;
+        border-radius: 5px;
+        &:hover {
+            cursor: pointer;
+            border: 2px solid #c78fe1;
+        }
+    }
+</style>

package/components/burh-ds/Cards/WelcomeCard.vue

@@ -4,7 +4,7 @@
     <div class="card-body card--content">
       <img class="icon" :src="icon">
       <h2 class="card-title mb-3 mx-md-5">{{title}}</h2>
-      <p class="card-text mb-4 text--initial mx-md-5">{{text}}.</p>
+      <p class="card-text mb-4 text--initial mx-md-5" v-html="text" />
       <div class="button--area">
         <base-button
           outline
@@ -52,8 +52,11 @@ export default {
         text-align: initial;
     }
     .card--content{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         @media screen and (min-width:768px){
-            width: 50%;
+
         }
         .button--area{
             @media screen and (max-width:768px){
@@ -71,6 +74,8 @@ export default {
             }
         }
         .card-title{
+            width: 30%;
+            font-weight: 600;
             @media screen and (max-width:768px){
                 padding-left: 1.5rem;
                 padding-right: 1.5rem;
@@ -80,6 +85,7 @@ export default {
 
     .card-text {
         text-align: center;
+        width: 55%;
         color: $gray-900;
     }
 
@@ -92,9 +98,16 @@ export default {
     .btn--app {
         background-color: $violet;
         border-color: $violet;
+        &:hover {
+            background-color: darken($violet, 10%);
+            border-color: darken($violet, 10%);
+        }
     }
 
     .white-text {
         color: #ffffff;
+        &:hover {
+            color: #ffffff;
+        }
     }
 </style>

package/components/burh-ds/Dropdown/AppLinkArea.vue

@@ -1,6 +1,6 @@
 <template>
   <base-dropdown menu-on-right
-    class="mr-2"
+    class="mr-3"
     tag="span"
     title-tag="a"
   >
@@ -11,7 +11,7 @@
       slot="title-container"
     />
     <ul class="px-3">
-      <li class="w-50 d-inline-block text-wrap text-center" v-for="(links, index) in links" :key="index">
+      <li class="w-50 d-inline-block text-wrap text-center align-top" v-for="(links, index) in links" :key="index">
         <img :src=links.img :alt="links.name" class="dropdown-item">
         <a href="#" class="small">{{links.name}}</a>
       </li>

package/components/burh-ds/Dropdown/FaqVideoArea.vue

@@ -1,6 +1,6 @@
 <template>
     <base-dropdown menu-on-right
-            class="nav-item mr-2"
+            class="nav-item mr-3"
             tag="span"
             title-tag="a"
             title-classes="nav-link pr-0">

package/components/burh-ds/Headings/AppHeader.vue

@@ -8,7 +8,7 @@
             <div class="col-6 d-flex justify-content-end">
                 <i v-for="(options, index) in icons" :key="index" 
                 @click="$emit(options.event)" 
-                class="display-4 text-default mt-3 mx-3 cursor-pointer" :class="options.icon"></i>
+                class="display-4 text-default pt-3 px-3 cursor-pointer" :class="options.icon"></i>
 
                 <base-button role="button" @click="actionButtonHeader()" size="sm" :type="optionsBtnType" 
                 class="ml-2">{{optionsBtnText}}</base-button>

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

@@ -9,7 +9,7 @@
                 <label for="description">{{name}}</label>
                 <base-input
                 placeholder="Insira o nome do teste"
-                v-model="atributes.title"
+                v-model="configInfo.title"
                 >
                 </base-input>
             </div>
@@ -20,21 +20,21 @@
                 type="textarea"
                 :rows="5"
                 placeholder="Insira a descrição do teste"
-                v-model="atributes.textarea">
+                v-model="configInfo.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"
+                <div class="d-flex justify-content-lg-between justify-content-center flex-wrap">
+                  <base-button role="button" outline size="sm" :type=appModalBtnType class="mx-lg-0"
                     v-for="(buttons, index) in buttons" :key="index"
                     :id="'button-' + buttons.id" :value="buttons.value"
-                    :class="buttons.id == currentSelectedButton ? 'focus' : ''"
+                    :class="buttons.id == currentSelectedButton ? 'active' : ''"
                     @click="timeSelection(buttons.id)"
                   >
-                    <i v-if="buttons.id == currentSelectedButton" class="fas fa-check purple mr-1"></i>
+                    <i v-if="buttons.id == currentSelectedButton" class="fas fa-check mr-1"></i>
                     <small>{{buttons.time}}</small>
                   </base-button>
                 </div>
@@ -50,9 +50,9 @@
                 ></base-input>
             </div>
 
-            <base-button size="md" type="test-online" role="button" 
+            <base-button size="md" :type=appModalBtnType role="button" 
               @click="sendConfig()"
-              class="ml-auto mr-3">{{sendButton}}</base-button>
+              class="ml-auto mr-3">{{configAppButton}}</base-button>
         </div>
     </modal>
 </template>
@@ -63,7 +63,7 @@ export default {
     directives: {mask},
     data(){
         return{
-            atributes:{
+            configInfo:{
                 title: '',
                 textarea: '',
                 selectedTime: '',
@@ -89,6 +89,10 @@ export default {
             {id: '7', time: '2 horas', value: '02:00:00'}, {id: 'custom', time: 'Personalizado', value: ''}],
             description: 'Botoes de tempo'
         },
+        appModalBtnType:{
+            type: String,
+            default: 'test-online'
+        },
         title:{
             type: String,
             default: 'Geral',
@@ -104,7 +108,7 @@ export default {
             default: 'Tempo Limite',
             description: 'Titulo da area de botões'
         },
-        sendButton:{
+        configAppButton:{
             type: String,
             default: 'Salvar',
             description: 'Botão de envio'
@@ -126,7 +130,7 @@ export default {
             let btn = document.getElementById('button-' + buttonId);
             let timePicker = document.getElementById('time-picker');
             if(buttonId != 'custom'){
-                this.atributes.selectedTime=btn.value;
+                this.configInfo.selectedTime=btn.value;
                 this.currentSelectedButton=buttonId
                 this.disableTimePicker = true;
             }
@@ -139,26 +143,26 @@ export default {
             let button = document.getElementById('button-custom');
 
             button.value = this.value;
-            this.atributes.selectedTime = this.value;
+            this.configInfo.selectedTime = this.value;
         },
 
         sendConfig(){
-            if(this.atributes.title == '' || this.atributes.textarea == '' || 
-            this.atributes.selectedTime == '' || this.atributes.selectedTime.length != 8){
+            if(this.configInfo.title == '' || this.configInfo.textarea == '' || 
+            this.configInfo.selectedTime == '' || this.configInfo.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',
+                    confirmButtonClass: 'btn btn-test-online btn-fill',
                 });
             }
             else{
-                this.$emit('send-atributes', this.atributes)
+                this.$emit('send-config-info', this.configInfo)
                 swal.fire({
                     title: `Parabéns`,
                     html: `Configurações salvas com sucesso.`,
                     buttonsStyling: false,
-                    confirmButtonClass: 'btn btn-primary btn-fill',
+                    confirmButtonClass: 'btn btn-test-online btn-fill',
                 });
                 this.openModal=false;
             }

package/components/layouts/burh-ds/navbar/AppNavbar.vue

@@ -1,6 +1,6 @@
 <template>
   <base-nav
-    container-classes="container-class-layout"
+    container-classes="container-fluid container-fluid--bu"
     class="border-bottom navbar-animated navbar-horizontal"
     expand="lg"
     type="white"

package/components/layouts/burh-ds/navbar/BusinessGlobalNavbar.vue

@@ -10,7 +10,6 @@
     <div
       slot="brand"
       class="navbar-wrapper d-flex"
-      v-if="!appMode"
     >
       <nuxt-link class="navbar-brand d-flex pt-2" to="/">
         <img

package/data/ListNavLinksMock.json

@@ -1,7 +1,7 @@
 [
     {
         "id" : "Inicio",
-        "name" : "inicio2",
+        "name" : "Inicio",
         "link" : "burh.com.br",
         "children" : []
     },
@@ -110,4 +110,4 @@
             }
         ]
     }
-]
+]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burh/nuxt-core",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "Design System and Components.",
   "author": "Burh",
   "scripts": {

package/components/burh-ds/Cards/RecentTestCard.vue

@@ -1,51 +0,0 @@
-<template>
-    <div class="card--container d-flex flex-column w-25" @click="$emit('more')">
-        <div class="card card--small">
-            <div class="row m-auto">
-                <i class="display-1" :class="iconColor + ' ' + Icon" v-if="isIcon"></i>
-                <img :src=Image alt="Imagem do Card" class="w-75 m-auto" v-else>
-            </div>
-        </div>
-        <h3 class="small font-weight-bold m-auto">{{testName}}</h3>
-    </div>
-</template>
-<script>
-export default {
-    props:{
-        iconColor:{
-            type: String,
-            default: () => 'text-primary',
-            description: 'Cor do icone. Normalmente Azul'
-        },
-        isIcon:{
-            type: Boolean,
-            default: false
-        },
-        Image:{
-            type: String,
-            default: () => '/img/brand/burh-imagotipo.svg',
-            description: 'Imagem do card'
-        },
-        Icon:{
-            type: String,
-            default: () => 'fas fa-plus',
-            description: 'Icone do card'
-        },
-        testName:{
-            type: String,
-            default: 'Testes',
-            description: 'Nome do teste'
-        }
-    }
-}
-</script>
-<style lang="scss">
-    @media screen and (max-width: 768px){
-        .card--container{
-            width: 50% !important;
-        }
-    }
-    .card--small{
-        min-height: 10rem;
-    }
-</style>