@burh/nuxt-core 1.0.19 → 1.0.21

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

@@ -0,0 +1,51 @@
+<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>

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

@@ -1,40 +1,53 @@
 
 <template>
-    <div class="card text-center align-items-center">
-        <div class="card-body card--content">
-            <h2 class="card-title mb-3 mx-md-5">{{title}}</h2>
-            <p class="card-text mb-4 text--initial mx-md-5">{{text}}.</p>
-            <div class="button--area">
-                <base-button outline type="primary" class="btn--flex" @click="$emit('more')">Saiba Mais</base-button>
-                <base-button type="primary" class="btn--flex ml-auto" @click="$emit('send')">Enviar Teste</base-button>
-            </div>
-        </div>
+  <div class="card text-center align-items-center">
+    <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>
+      <div class="button--area">
+        <base-button
+          outline
+          type="primary"
+          class="btn--flex btn--app "
+        >
+            <nuxt-link class="white-text" :to="link">
+                {{buttonText}}
+            </nuxt-link>
+        </base-button>
+      </div>
     </div>
-
+  </div>
 </template>
 <script>
 export default {
     name: 'welcome-card',
-    components: { 
+    components: {
     },
     props:{
+        icon: String,
         title: {
             type: String,
-            default: 'Seja Bem Vindo ao DISC Profiler'
+            default: 'Aqui vai um título'
+        },
+        text: {
+            type: String,
+            default: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis vel tellus viverra pulvinar. Mauris in augue neque. Proin molestie lectus lectus, at semper enim suscipit id. odo colaborador tem um perfil de comportamento e competências. O Profiler é uma ferramenta completa para você identificar cada uma delas e assim formar equipes mais produtivas.'
+        },
+        buttonText: {
+            type: String
         },
-        text:{
+        link: {
             type: String,
-            default: 'Todo colaborador tem um perfil de comportamento e competências. O Profiler é uma ferramenta completa para você identificar cada uma delas e assim formar equipes mais produtivas.'
+            default: "/"
         }
-    },
-    data(){
-        return{
-            default: ''
-        };
     }
 }
 </script>
+
 <style lang="scss">
+@import "@burh/nuxt-core/assets/sass/argon.scss";
+
     .text--initial{
         text-align: initial;
     }
@@ -64,4 +77,24 @@ export default {
             }
         }
     }
-</style>
+
+    .card-text {
+        text-align: center;
+        color: $gray-900;
+    }
+
+    .icon {
+        width: 9rem;
+        height: 9rem;
+        margin-bottom: 2rem;
+    }
+
+    .btn--app {
+        background-color: $violet;
+        border-color: $violet;
+    }
+
+    .white-text {
+        color: #ffffff;
+    }
+</style>

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

@@ -1,33 +1,46 @@
 <template>
-      <base-dropdown menu-on-right
-              class="nav-item mr-2"
-              tag="span"
-              title-tag="a"
-              title-classes="nav-link pr-0">
-        <i href="#" class="pr-0 ml-4 fas fa-th text-white display-4 pt-2 pb-2" @click.prevent slot="title-container"></i>
-
-        <template>
-            <ul class="px-3">
-            <li class="px-3 w-50 d-inline-block" v-for="(links, index) in links" :key="index">
-              <img :src=links.img alt="search" class="dropdown-item">
-              <a href="#" class="nav-link px-0 small text-wrap text-center">{{links.name}}</a>
-            </li>
-          </ul>
-        </template>
-
-      </base-dropdown>
+  <base-dropdown menu-on-right
+    class="mr-2"
+    tag="span"
+    title-tag="a"
+  >
+    <i
+      href="#"
+      class="fas fa-th display-4"
+      @click.prevent
+      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">
+        <img :src=links.img :alt="links.name" class="dropdown-item">
+        <a href="#" class="small">{{links.name}}</a>
+      </li>
+    </ul>
+  </base-dropdown>
 </template>
 <script>
 export default {
   props:{
     links: {
-            type: Array,
-            default:()=>{
-                return [ {id: 1, name:'Busca', img:'/img/icons/search.png'}, {id: 2, name:'Recrutamento', img:'/img/icons/app-recruiter.png'}, {id: 3, name:'Desempenho', img: '/img/icons/app-analytic.png'}, 
-                {id: 4, name:'Universidades', img:'/img/icons/university.png'}, {id: 5, name:'DISC Profiler', img:'/img/icons/profiler.png'}, {id: 6, name:'Teste de Proêficiencia', img:'/img/icons/fluenglish.png'},
-                {id: 7, name:'SMS', img:'/img/icons/app-sms.png'}, {id: 8, name:'Trabalhe Conosco', img:'/img/icons/career.png'}];
-            }
-        }
+      type: Array,
+      default:() => {
+        return [
+          {id: 1, name:'Busca', img:'img/icons/colorfull-icons/busca.svg'},
+          {id: 2, name:'Recrutamento', img:'img/icons/colorfull-icons/recrutamento.svg'},
+          {id: 3, name:'Desempenho', img: 'img/icons/colorfull-icons/indicadores.svg'},
+          {id: 4, name:'Universidades', img:'img/icons/colorfull-icons/universidades.svg'},
+          {id: 5, name:'DISC Profiler', img:'img/icons/colorfull-icons/DISC.svg'},
+          {id: 6, name:'Teste de Proêficiencia', img:'img/icons/colorfull-icons/proficiencia.svg'},
+          {id: 7, name:'SMS', img:'img/icons/colorfull-icons/SMS.svg'},
+          {id: 8, name:'Trabalhe Conosco', img:'img/icons/colorfull-icons/carreiras.svg'}
+        ];
+      }
+    }
   }
 }
-</script>
+</script>
+<style lang="scss" scoped>
+.height-100 {
+  height: 10rem;
+}
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+  <li class="dropdown-item d-flex align-items-center w-100">
+      <span>
+        {{text}}
+      </span>
+      <badge v-if="status === 'NOVO'" rounded type="primary" class="ml-auto">Novo</badge>
+  </li>
+</template>
+<script>
+export default {
+  name: "dropdown-item",
+  props: {
+    link: {
+      type: String,
+      default: "/"
+      },
+    text: String,
+    status: String
+  },
+}
+</script>

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

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <hr class="dropdown-divider">
+    <h6 class="dropdown-header" v-if="title">
+      <span class="aria-text">Funcionalidades,</span>
+      <span>{{title}}</span>
+    </h6>
+    <ul>
+      <dropdown-item
+        v-for="item in items"
+        :key="item.description"
+        :text="item.description"
+        :link="item.link"
+        :status="item.status"
+      />
+    </ul>
+  </div>
+</template>
+<script>
+import DropdownItem from './DropdownItem'
+
+export default {
+  name: "dropdown-section",
+  components: {
+    DropdownItem
+  },
+  props: {
+    title: String,
+    items: Array
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+    list-style: none;
+    padding-left: 0;
+}
+</style>

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

@@ -4,14 +4,19 @@
             tag="span"
             title-tag="a"
             title-classes="nav-link pr-0">
-      <i href="#" class="pr-0 fas fa-question-circle text-white display-4 pt-2 pb-2" @click.prevent slot="title-container"></i>
+      <i
+        href="#"
+        class="fas fa-question-circle display-4"
+        @click.prevent
+        slot="title-container"
+      />
 
       <template>
       <h6 class="dropdown-header">{{faqheader}}</h6>
       <div class="dropdown-divider"></div>
       <template>
         <ul class="pl-0">
-          <li class="col-12 nav-link pt-1 d-flex dropdown-item" 
+          <li class="col-12 nav-link pt-1 d-flex dropdown-item"
             v-for="(videos, index) in videos" :key="index"
             v-on:click="openModalVideo(videos)"
           >
@@ -30,11 +35,11 @@
 export default {
   data(){
     return{
-      
+
     }
   },
   mounted(){
-    
+
   },
   methods:{
     openModalVideo(link){

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

@@ -0,0 +1,11 @@
+<template>
+  <li class="dropdown-item d-flex align-items-center w-100">
+    <font-awesome-icon :icon="['fas','door-open']"/>
+    <span>Sair</span>
+  </li>
+</template>
+<script>
+export default {
+  name: "sign-out-item"
+}
+</script>

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

@@ -0,0 +1,58 @@
+<template>
+  <base-dropdown menu-on-right
+    class="nav-item"
+    tag="li"
+    title-tag="a"
+  >
+    <business-avatar
+      :logo="userAvatar"
+      :userName="userName"
+      :companyName="companyName"
+      class="nav-link pr-0 pt-2 pb-2"
+      :class="textColor"
+      @click.prevent
+      slot="title-container"
+    />
+    <h6 class="dropdown-header">Entrar como</h6>
+    <avatar-link
+      :logo="userAvatar"
+      :name="userName"
+      class="row pl-4"
+    />
+    <dropdown-section
+      v-for="(value, name) in text"
+      :key="name"
+      :title="name"
+      :items="value"
+    />
+    <hr class="dropdown-divider">
+    <sign-out-item />
+  </base-dropdown>
+</template>
+<script>
+import DropdownSection from "./DropdownSection";
+import SignOutItem from "./SignOutItem";
+import AvatarLink from '../Avatar/AvatarLink';
+import BusinessAvatar from '../Avatar/BusinessAvatar';
+
+export default {
+  name: "user-menu-dropdown",
+  components: {
+    DropdownSection,
+    SignOutItem,
+    AvatarLink,
+    BusinessAvatar
+  },
+  props: {
+    text: Object,
+    userAvatar: String,
+    userName: String,
+    companyLogo: String,
+    companyName: String,
+    textColor: String
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

package/components/burh-ds/Groups/ProductItem.vue

@@ -0,0 +1,62 @@
+<template>
+    <component :is="tag" class="product-item" :class="vertical && 'vertical'">
+        <img :src="avatar" :class="avatarClass" class="avatar avatar-xl rounded-circle product-item--avatar" :alt="`Logo do Produto ${title}`"/>
+        <div :class="containerClass" class="text-container">
+            <component :is="titleTag" :class="titleClass" class="text-container--title">{{title}}</component>
+            <p :class="descriptionClass" class="text-container--description">{{description}}</p>
+        </div>
+    </component>
+</template>
+<script>
+export default {
+    name: "product-item",
+    props: {
+        containerClass: String,
+        tag: {
+            type: String,
+            default: 'section'
+        },
+        vertical: Boolean,
+        title: String,
+        titleClass: String,
+        titleTag: {
+            type: String,
+            default: 'h2'
+        },
+        description: String,
+        descriptionClass: {
+            type: String,
+            default: 'none'
+        },
+        avatar: String,
+        avatarClass: String
+    }
+}
+</script>
+<style lang="scss" scoped>
+.product-item {
+    display: flex;
+    text-align: center;
+}
+
+.text-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 1rem;
+
+    &--description {
+        font-size: 1rem;
+        padding: 0;
+        margin: 0
+    }
+}
+.vertical {
+    flex-direction: column;
+}
+
+.none {
+    display: none !important;
+}
+</style>

package/components/burh-ds/Groups/SimpleProductItem.vue

@@ -1,37 +1,41 @@
 <template>
-    <component :is="tag" class="product-item" @click="$emit('click-product')">
-        <img :src="avatar" :class="avatarClass" class="avatar avatar-xl rounded-circle product-item--avatar" :alt="`Logo do Produto ${title}`">
-        <div :class="contentClass" class="product-item--content">
-            <component :is="titleTag" :class="titleClass" class="product-item--title">{{title}}</component>
-            <p :class="descriptionClass" class="product-item--description" v-if="description">{{description}}</p>
-            <badge :class="badgeClass" v-if="badge">{{badge}}</badge>
-        </div>
-    </component >
+	<component :is="tag" :to="to" class="product-item" @click="$emit('click-product')">
+		<img :src="avatar" :class="avatarClass" class="avatar avatar-xl rounded-circle product-item--avatar" :alt="`Logo do Produto ${title}`">
+		<div :class="contentClass" class="product-item--content">
+			<component :is="titleTag" :class="titleClass" class="product-item--title">{{title}}</component>
+			<p :class="descriptionClass" class="product-item--description" v-if="description">{{description}}</p>
+			<badge :class="badgeClass" v-if="hasEnableBadge">Habilitar</badge>
+		</div>
+	</component >
 </template>
 
 <script>
 export default {
-    name: 'simple-product-item',
-    props: {
-        tag: {
-            type: String,
-            default: 'section'
-        },
-        contentClass: String,
-        title: String,
-        titleTag: {
-            type: String,
-            default: 'h3'
-        },
-        titleClass: String,
-        avatar: String,
-        avatarClass: String,
-        description: String,
-        descriptionClass: String,
-        badge: String,
+	name: 'simple-product-item',
+	props: {
+		tag: {
+			type: String,
+			default: 'section'
+		},
+		contentClass: String,
+		title: String,
+		titleTag: {
+			type: String,
+			default: 'h3'
+		},
+		titleClass: String,
+		avatar: String,
+		avatarClass: String,
+		description: String,
+		descriptionClass: String,
+		hasEnableBadge: Boolean,
         badgeClass: String,
-    }
-}
+        to: {
+            type: String,
+            default: "/"
+        }
+	}
+};
 </script>
 
 <style lang="scss">
@@ -40,7 +44,7 @@ export default {
     display: inline-block;
 
     &--avatar {
-        
+
     }
 
     &--title {
@@ -57,4 +61,4 @@ export default {
     }
 }
 
-</style>
+</style>

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

@@ -0,0 +1,63 @@
+<template>
+    <base-header class="app-header" :type="'white'">
+        <div class="row">
+            <div class="col-6 my-auto">
+                <h2 class="font-weight-bold display-3">{{name}}</h2>
+            </div>
+
+            <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>
+
+                <base-button role="button" @click="actionButtonHeader()" size="sm" :type="optionsBtnType" 
+                class="ml-2">{{optionsBtnText}}</base-button>
+            </div>
+
+            <div class="col-12 d-flex justify-content-center">
+                <slot/>
+            </div>
+        </div>
+    </base-header>
+</template>
+<script>
+export default {
+    data(){
+        return{
+            default: ''
+        }
+    },
+    props:{
+        icons:{
+            type: Array,
+            default: () =>[{event: 'view', icon: 'fas fa-eye'}, {event: 'config', icon: 'fas fa-cog'} ]
+        },
+        name: {
+            type: String,
+            default: 'Teste de matematica'
+        },
+        optionsBtnType:{
+            type: String,
+            default: 'test-online'
+        },
+        optionsBtnText: {
+            type: String,
+            default: 'Enviar Teste'
+        },
+    },
+    methods:{
+        actionButtonHeader(){
+            this.$emit('btn-header')
+        },
+    },
+}
+</script>
+<style lang="scss">
+@import "node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
+
+.app-header {
+  width: 100%;
+  padding-top: 1.25rem;
+  box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
+}
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+    <div class="card card--shadow py-3 px-4">
+        <base-input 
+            name="Ask"
+            :label="`Etapa #${position + 1}`" 
+            placeholder="Escreva o nome da etapa" 
+            type="text" 
+            class="" 
+            :error="getError('Ask')" 
+            :valid="isValid('Ask')" 
+            v-model="name"
+            v-validate="'required'"/>
+
+        <div class="">
+            <textarea 
+                v-model="description"
+                class="form-control form-control-alternative" 
+                rows="3" 
+                placeholder="Descrição desta etapa..."/>
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        position: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {    
+            name: '',
+            description: ''
+        }
+    },
+    methods: {
+        getError(name){
+            return this.errors.first(name);
+        },
+        isValid(name) {
+            return this.validated && !this.errors.has(name);
+        },
+        emitStage() {
+            this.$emit('change-stage', 
+            { 
+                name: this.name, 
+                description: this.description 
+            })
+        }
+    },
+    watch: {
+        name() {
+            this.emitStage();
+        },
+        description() {
+            this.emitStage();
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+
+</style>