@burh/nuxt-core 1.0.16 → 1.0.17

package/assets/sass/burh-ds/_global.scss

@@ -89,6 +89,17 @@ body {
   }
 }
 
+.aria-text {
+    clip-path: inset(100%);
+    clip: rect(1px 1px 1px 1px); /* IE 6/7 */
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap; /* added line */
+    width: 1px;
+}
+
 .printable__qrcode {
   display: none;
   @media only print {

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

@@ -0,0 +1,67 @@
+
+<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>
+
+</template>
+<script>
+export default {
+    name: 'welcome-card',
+    components: { 
+    },
+    props:{
+        title: {
+            type: String,
+            default: 'Seja Bem Vindo ao DISC Profiler'
+        },
+        text:{
+            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.'
+        }
+    },
+    data(){
+        return{
+            default: ''
+        };
+    }
+}
+</script>
+<style lang="scss">
+    .text--initial{
+        text-align: initial;
+    }
+    .card--content{
+        @media screen and (min-width:768px){
+            width: 50%;
+        }
+        .button--area{
+            @media screen and (max-width:768px){
+                display: flex;
+                flex-wrap: wrap;
+            }
+            .btn--flex{
+                @media screen and(max-width:768px){
+                    font-size: 0.685rem;
+                    display: flex;
+                }
+                @media screen and(max-width:320px){
+                    font-size: 0.579rem;
+                }
+            }
+        }
+        .card-title{
+            @media screen and (max-width:768px){
+                padding-left: 1.5rem;
+                padding-right: 1.5rem;
+            }
+        }
+    }
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+    <component :is="tag" class="product-group" @click="$emit('click-product')">
+        <img :src="avatar" :class="avatarClass" class="avatar avatar-xl rounded-circle product-group--avatar" :alt="`Logo do Produto ${title}`">
+        <main :class="contentClass" class="product-group--content">
+            <component :is="titleTag" :class="titleClass" class="product-group--title">{{title}}</component>
+            <p :class="descriptionClass" class="product-group--description" v-if="description">{{description}}</p>
+            <badge :class="badgeClass" v-if="badge">{{badge}}</badge>
+        </main>
+    </component >
+</template>
+
+<script>
+export default {
+    name: 'simple-product-group',
+    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,
+        badgeClass: String,
+    }
+}
+</script>
+
+<style lang="scss">
+
+.product-group {
+    display: inline-block;
+
+    &--avatar {
+        
+    }
+
+    &--title {
+        text-align: center;
+    }
+
+    figure {
+        margin: 0;
+        padding: 0;
+    }
+}
+
+</style>

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

@@ -0,0 +1,73 @@
+<template>
+  <div @click="clicked"
+       class="custom-control custom-checkbox"
+       :class="[
+       {disabled: disabled},
+       {[`custom-checkbox-${type}`]: type},inlineClass]">
+    <input :id="cbId"
+           class="custom-control-input"
+           :aria-label="ariaLabel"
+           :class="inputClasses"
+           type="checkbox"
+           :disabled="disabled"
+           v-model="touched"/>
+    <label :for="cbId" class="custom-control-label">
+      <slot>
+        <span v-if="inline">&nbsp;</span>
+      </slot>
+    </label>
+  </div>
+</template>
+<script>
+  export default {
+    name: "base-checkbox",
+    props: {
+      checked: {
+        type: [Array, Boolean],
+        description: "Whether checkbox is checked",
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        description: "Whether checkbox is disabled"
+      },
+      ariaLabel: String,
+      inline: {
+        type: Boolean,
+        description: "Whether checkbox is inline"
+      },
+      inputClasses: {
+        type: [String, Object, Array],
+        description: "Checkbox input classes"
+      },
+      type: {
+        type: String,
+        description: 'Checkbox type (e.g info, danger etc)'
+      }
+    },
+    data() {
+      return {
+        cbId: "",
+        touched: this.checked,
+      };
+    },
+    computed: {
+      inlineClass() {
+        if (this.inline) {
+          return `form-check-inline`;
+        }
+      }
+    },
+    methods: {
+        clicked() {
+            this.touched = !this.touched;
+            this.$emit('input', this.touched);
+        }
+    },
+    created() {
+      this.cbId = Math.random()
+        .toString(16)
+        .slice(2);
+    }
+  };
+</script>

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

@@ -0,0 +1,158 @@
+<template>
+    <div>
+        <h4 class="aria-text">Lista de {{context}}</h4>
+        <ul class="avatar-group d-inline-block">
+            <li class="avatar rounded-circle cursor-pointer" :class="{'avatar--selected' : isThereInSelecteds(obj.id) }" v-for="obj in getInlineAvatars" :key="obj.id" @click="setSelecteds(obj.id)">
+                <span class="aria-text" aria-label="nome usuário">{{obj.name}}</span>
+                <img :alt="`Imagem do ${context} ${obj.name}`" :src="obj.avatar">
+            </li>
+        </ul>
+        <h4 class="aria-text">Filtro de {{context}}</h4>
+        <el-dropdown :hide-on-click="false" trigger="click" class="avatar--listdrop" v-if="getAvatarToDropdown != null">
+            <button aria-label="Mostrar lista de filtros" class="avatar avatar--listdrop--item rounded-circle">
+                +{{getAvatarToDropdown.length}}
+            </button>
+            <el-dropdown-menu class="avatar--listdrop--group" slot="dropdown">
+                <el-dropdown-item v-for="obj in getAvatarToDropdown" :key="obj.id">
+                    <base-checkbox class="my-2" v-on:input="setSelecteds(obj.id)">
+                        <span class="avatar avatar-sm rounded-circle">
+                            <img :alt="`Imagem do ${context} ${obj.name}`" :src="obj.avatar">
+                        </span>
+                        <p class="avatar--listdrop--item-name">{{obj.name}}</p>
+                    </base-checkbox>
+                </el-dropdown-item>
+            </el-dropdown-menu>
+        </el-dropdown>
+    </div>
+</template>
+
+<script>
+import { Dropdown, DropdownMenu, DropdownItem } from "element-ui";
+import BaseCheckbox from "@burh/nuxt-core/components/burh-ds/Inputs/BaseCheckbox.vue";
+
+export default {
+    components: {
+        [Dropdown.name]: Dropdown,
+        [DropdownItem.name]: DropdownItem,
+        [DropdownMenu.name]: DropdownMenu,
+        BaseCheckbox
+    },
+    props: {
+        context: {
+            type: String,
+            default: 'Usuarios'
+        },
+        limitShowInline: {
+            type: Number,
+            default: 3
+        },
+        avatars: {
+            type: Array,
+            default: () => [
+                {   
+                    id: 1,
+                    name: 'Nome Gigante Para Quebrar Layout',
+                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
+                },
+                {   
+                    id: 2,
+                    name: 'Nome Gigante Para Quebrar Layout',
+                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
+                },
+                {   
+                    id: 3,
+                    name: 'Nome Gigante Para Quebrar Layout',
+                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
+                },
+                {   
+                    id: 4,
+                    name: 'Nome Gigante Para Quebrar Layout',
+                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
+                },
+                {   
+                    id: 5,
+                    name: 'Nome Gigante Para Quebrar Layout',
+                    avatar: "https://demos.creative-tim.com/vue-argon-dashboard-pro//img/theme/team-1.jpg"
+                },
+            ]
+        }
+    },
+    data() {
+        return {
+            selecteds: []
+        }
+    },
+    computed: {
+        getInlineAvatars() {
+            return this.avatars.slice(0, this.limitShowInline);
+        },
+        getAvatarToDropdown() {
+            return this.avatars.slice(this.limitShowInline)
+        }
+    },
+    methods: {
+        setSelecteds(id) {
+            if (!this.isThereInSelecteds(id)) {
+                this.selecteds.push(id);
+            }else {
+                this.removeItemFromSelecteds(id);
+            }            
+
+            return this.$emit('selecteds', this.selecteds);
+        },
+        removeItemFromSelecteds(id) {
+            const positionInArray = this.selecteds.findIndex(e => e == id);
+            return this.selecteds.splice(positionInArray, 1);
+        },
+        isThereInSelecteds(id) {
+            return this.selecteds.includes(id)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+@import "@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
+
+.avatar {
+    &--listdrop {
+        display: inline-block;
+        top: -1rem;
+        left: -1rem;
+        z-index: 2;
+        cursor: pointer;
+
+        &--item {
+            &:focus {
+                outline: initial;
+            }
+
+            &-name {
+                display: inline-block;
+                position: relative;
+                top: -.65rem;
+                left: .25rem;
+            }
+        }   
+
+        &--group {
+            li {
+                line-height: 2.5rem;
+            }
+
+            .custom-control-label {
+                &:before,
+                &:after {
+                    top: .75rem;
+                }
+            }
+        }
+    }
+
+    &-group {
+        .avatar.avatar--selected {
+            border-color: $color-primary !important; 
+        }
+    }
+}
+</style>

package/components/layouts/burh-ds/footer/StatusFooter.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="footer-simple dark w-100 border-top">
+        <div class="footer--container row px-3 m-0">
+            <div class="col-6 d-flex">
+                <p class="pt-4 pr-4 small text-white" v-if="vacancy.length == 1">{{vacancy.length}} vaga selecionada</p>
+                <p class="pt-4 pr-4 small text-white" v-else>{{vacancy.length}} vagas selecionadas</p>
+                <base-dropdown>
+                    <base-button slot="title-container" type="primary" class="btn--small text-dark">
+                    {{currentStatus.default}}
+                    <i class="fas fa-long-arrow-alt-down"></i>
+                    </base-button>
+                    <a v-for="(status, index) in status" :key="index" @click="statusDefiner(status.description)" class="dropdown-item" href="#">{{status.description}}</a>
+                </base-dropdown>
+            </div>
+            <div class="col-6 d-inline-flex">
+                <base-button slot="title-container" type="primary" @click="$emit('apply')" class="btn--small ml-auto round text-dark p-2 mx-2">
+                    {{buttons[1].name}}
+                </base-button>
+                <base-button slot="title-container" type="default" @click="$emit('cancel')" class="btn--small round dark p-2 mx-2">
+                    {{buttons[0].name}}
+                </base-button>
+            </div>
+        </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+      vacancy:{
+          type: Array,
+          default: ()=>{
+            return [{id: 0, vacancydescription: 'Auxiliar de Corona Virus'}, {id: 1, vacancydescription: 'Corona Virus'}]
+          }
+      },
+      btnForwardText: {
+          type: String,
+          default: 'Ir para o checkout'
+      },
+      status:{
+          type: Array,
+          default: ()=>{
+           return [{description: 'Aberta'}, {description: 'Fechada'}]
+        }
+      },
+      buttons:{
+          type: Array,
+          default:()=>{
+              return [{name: 'Cancelar'}, {name: 'Aplicar'}]
+          }
+      }
+  },
+  data() {
+    return {
+      currentStatus: {
+          default: 'Definir Status'
+      },
+      year: new Date().getFullYear()
+    };
+  },
+  mounted(){
+  },
+  methods:{
+      statusDefiner(status){
+          let selectedStatus = status;
+          console.log(selectedStatus)
+          this.currentStatus.default = status;
+      },
+  }
+};
+</script>
+<style lang="scss">
+@import "~bootstrap/scss/functions.scss";
+@import "~bootstrap/scss/mixins.scss";
+@import "node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables.scss";
+@import "node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
+
+    .btn--small{
+        font-size: 0.75rem !important;
+        background-color:$white;
+        border-color:$white;
+        border-radius: 0.5rem;
+
+        &.round{
+            border-radius: 1rem;
+        }
+        &.dark{
+            background-color: $default;
+            border-color:$default;
+            
+            &:active{
+                background-color: $default !important;
+            }
+        }
+    }
+    .footer-simple{
+        &.dark{
+            background-color: $default;
+        }
+    }
+    .btn-primary:hover {
+    color: $white !important;
+    background-color: transparent !important;
+    border-color: $white !important;
+}
+</style>

package/package.json

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

package/components/Feed/Comment.vue

@@ -1,50 +0,0 @@
-<template>
-  <div class="media media-comment">
-    <img alt="Image placeholder" class="avatar avatar-lg media-comment-avatar rounded-circle" :src="userImage">
-    <div class="media-body">
-      <div class="media-comment-text">
-        <h6 class="h5 mt-0">{{userName}}</h6>
-        <p class="text-sm lh-160" v-html="text"></p>
-        <div class="icon-actions">
-          <a href="#" class="like active">
-            <i class="ni ni-like-2"></i>
-            <span class="text-muted">{{likeCount}} likes</span>
-          </a>
-          <a href="#">
-            <i class="ni ni-curved-next"></i>
-            <span class="text-muted">{{shareCount}} shares</span>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-  export default {
-    name: 'comment',
-    props: {
-      userImage: {
-        type: String,
-        default: 'img/theme/team-1.jpg'
-      },
-      userName: {
-        type: String,
-        default: 'Michael Lewis'
-      },
-      text: {
-        type: String,
-        default: 'Cras sit amet nibh libero nulla vel metus scelerisque ante sollicitudin. Cras purus odio vestibulum in vulputate viverra turpis.'
-      },
-      likeCount: {
-        type: Number,
-        default: 0
-      },
-      shareCount: {
-        type: Number,
-        default: 0
-      }
-    }
-  }
-</script>
-<style>
-</style>