@burh/nuxt-core 1.0.131 → 1.0.133

package/assets/images/burh.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.06482 6.22306C8.48159 6.52696 7.89836 6.52696 7.28443 6.22306C7.22304 6.31423 7.22304 6.43579 7.19234 6.52696C6.82399 7.89449 5.68822 8.89735 4.27619 9.07969C2.25023 9.32281 0.654021 7.89449 0.40845 6.22306C0.224272 4.97709 0.561932 3.88306 1.54422 3.03215C2.00466 2.63709 2.46511 2.27241 2.92555 1.90773C3.386 1.54306 3.93853 1.33033 4.55246 1.29994C4.64455 1.29994 4.70594 1.26955 4.76733 1.20877C4.98221 0.996045 5.19708 0.783318 5.41196 0.60098C6.05658 0.0235765 7.00817 0.145135 7.46861 0.874486C7.49931 0.904876 7.49931 0.935266 7.53 0.965655C7.53 1.02643 7.5914 1.02643 7.65279 0.965655C7.89836 0.844097 8.14393 0.813707 8.4202 0.874486C8.51229 0.904876 8.57368 0.935266 8.66577 0.965655C8.75786 1.02643 8.78856 1.02643 8.81925 0.935266C8.94204 0.661759 9.15691 0.479421 9.40248 0.357863C9.86293 0.145135 10.2927 0.145135 10.7224 0.418642C10.9066 0.5402 11.0601 0.692149 11.2443 0.874486C11.275 0.904876 11.3057 0.935266 11.3364 0.965655C11.4284 1.05682 11.5205 1.17838 11.6433 1.26955C11.7661 1.33033 11.9196 1.29994 12.0731 1.33033C12.5335 1.39111 12.9326 1.54306 13.3009 1.81657C13.8535 2.24202 14.3753 2.66748 14.8971 3.12332C15.4804 3.60955 15.7873 4.27813 15.9408 5.00748C16.2171 6.46618 15.5111 7.98566 14.1297 8.71501C12.0731 9.77865 9.52527 8.59346 9.06482 6.34462C9.09552 6.28384 9.09552 6.25345 9.06482 6.22306ZM12.5028 8.10722C13.7614 8.10722 14.805 7.04358 14.805 5.76722C14.805 4.46046 13.7921 3.39683 12.5028 3.39683C11.367 3.39683 10.2006 4.30852 10.2006 5.76722C10.2313 7.19553 11.3977 8.10722 12.5028 8.10722ZM1.54422 5.76722C1.54422 7.07397 2.58789 8.10722 3.84644 8.10722C5.10499 8.10722 6.14867 7.04358 6.14867 5.73683C6.14867 4.43007 5.10499 3.39683 3.81575 3.39683C2.55719 3.39683 1.54422 4.46046 1.54422 5.76722ZM7.16165 4.67319C7.16165 5.15943 7.5914 5.58488 8.08254 5.58488C8.60438 5.58488 9.03413 5.15943 9.03413 4.67319C9.03413 4.18696 8.60438 3.7615 8.11323 3.7615C7.5914 3.73111 7.16165 4.12618 7.16165 4.67319Z" fill="#F8FAFB"/>
-</svg>
+<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.06482 6.22306C8.48159 6.52696 7.89836 6.52696 7.28443 6.22306C7.22304 6.31423 7.22304 6.43579 7.19234 6.52696C6.82399 7.89449 5.68822 8.89735 4.27619 9.07969C2.25023 9.32281 0.654021 7.89449 0.40845 6.22306C0.224272 4.97709 0.561932 3.88306 1.54422 3.03215C2.00466 2.63709 2.46511 2.27241 2.92555 1.90773C3.386 1.54306 3.93853 1.33033 4.55246 1.29994C4.64455 1.29994 4.70594 1.26955 4.76733 1.20877C4.98221 0.996045 5.19708 0.783318 5.41196 0.60098C6.05658 0.0235765 7.00817 0.145135 7.46861 0.874486C7.49931 0.904876 7.49931 0.935266 7.53 0.965655C7.53 1.02643 7.5914 1.02643 7.65279 0.965655C7.89836 0.844097 8.14393 0.813707 8.4202 0.874486C8.51229 0.904876 8.57368 0.935266 8.66577 0.965655C8.75786 1.02643 8.78856 1.02643 8.81925 0.935266C8.94204 0.661759 9.15691 0.479421 9.40248 0.357863C9.86293 0.145135 10.2927 0.145135 10.7224 0.418642C10.9066 0.5402 11.0601 0.692149 11.2443 0.874486C11.275 0.904876 11.3057 0.935266 11.3364 0.965655C11.4284 1.05682 11.5205 1.17838 11.6433 1.26955C11.7661 1.33033 11.9196 1.29994 12.0731 1.33033C12.5335 1.39111 12.9326 1.54306 13.3009 1.81657C13.8535 2.24202 14.3753 2.66748 14.8971 3.12332C15.4804 3.60955 15.7873 4.27813 15.9408 5.00748C16.2171 6.46618 15.5111 7.98566 14.1297 8.71501C12.0731 9.77865 9.52527 8.59346 9.06482 6.34462C9.09552 6.28384 9.09552 6.25345 9.06482 6.22306ZM12.5028 8.10722C13.7614 8.10722 14.805 7.04358 14.805 5.76722C14.805 4.46046 13.7921 3.39683 12.5028 3.39683C11.367 3.39683 10.2006 4.30852 10.2006 5.76722C10.2313 7.19553 11.3977 8.10722 12.5028 8.10722ZM1.54422 5.76722C1.54422 7.07397 2.58789 8.10722 3.84644 8.10722C5.10499 8.10722 6.14867 7.04358 6.14867 5.73683C6.14867 4.43007 5.10499 3.39683 3.81575 3.39683C2.55719 3.39683 1.54422 4.46046 1.54422 5.76722ZM7.16165 4.67319C7.16165 5.15943 7.5914 5.58488 8.08254 5.58488C8.60438 5.58488 9.03413 5.15943 9.03413 4.67319C9.03413 4.18696 8.60438 3.7615 8.11323 3.7615C7.5914 3.73111 7.16165 4.12618 7.16165 4.67319Z" fill="#F8FAFB"/>
+</svg>

package/assets/images/facebook.svg

@@ -1,3 +1,3 @@
-<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.1222 10.0611C20.1222 4.50451 15.6177 0 10.0611 0C4.50451 0 0 4.50451 0 10.0611C0 15.0829 3.67922 19.2452 8.48906 20V12.9694H5.93448V10.0611H8.48906V7.84452C8.48906 5.32296 9.99112 3.93012 12.2893 3.93012C13.3901 3.93012 14.5415 4.12663 14.5415 4.12663V6.60261H13.2728C12.023 6.60261 11.6332 7.37814 11.6332 8.17379V10.0611H14.4235L13.9775 12.9694H11.6332V20C16.443 19.2452 20.1222 15.0829 20.1222 10.0611Z" fill="#1D364B"/>
-</svg>
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1222 10.0611C20.1222 4.50451 15.6177 0 10.0611 0C4.50451 0 0 4.50451 0 10.0611C0 15.0829 3.67922 19.2452 8.48906 20V12.9694H5.93448V10.0611H8.48906V7.84452C8.48906 5.32296 9.99112 3.93012 12.2893 3.93012C13.3901 3.93012 14.5415 4.12663 14.5415 4.12663V6.60261H13.2728C12.023 6.60261 11.6332 7.37814 11.6332 8.17379V10.0611H14.4235L13.9775 12.9694H11.6332V20C16.443 19.2452 20.1222 15.0829 20.1222 10.0611Z" fill="#1D364B"/>
+</svg>

package/assets/images/linkedin.svg

@@ -1,3 +1,3 @@
-<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1222 0C15.6413 0 20.1222 4.48086 20.1222 10C20.1222 15.5191 15.6413 20 10.1222 20C4.60305 20 0.122192 15.5191 0.122192 10C0.122192 4.48086 4.60305 0 10.1222 0ZM6.99575 15.62V7.81055H4.3995V15.62H6.99575ZM16.3559 15.62V11.1416C16.3559 8.74281 15.0752 7.62691 13.3673 7.62691C11.9901 7.62691 11.3732 8.3843 11.0279 8.91625V7.81055H8.43227C8.46669 8.54324 8.43227 15.62 8.43227 15.62H11.0278V11.2586C11.0278 11.0252 11.0446 10.7918 11.1134 10.625C11.3007 10.1588 11.7281 9.67582 12.4452 9.67582C13.3841 9.67582 13.7602 10.3922 13.7602 11.4416V15.62H16.3559ZM5.71516 4.04492C4.82688 4.04492 4.24653 4.62891 4.24653 5.39434C4.24653 6.14363 4.80922 6.74371 5.68079 6.74371H5.69754C6.60282 6.74371 7.16629 6.14363 7.16629 5.39434C7.1495 4.62891 6.60286 4.04492 5.71516 4.04492Z" fill="#1D364B"/>
-</svg>
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1222 0C15.6413 0 20.1222 4.48086 20.1222 10C20.1222 15.5191 15.6413 20 10.1222 20C4.60305 20 0.122192 15.5191 0.122192 10C0.122192 4.48086 4.60305 0 10.1222 0ZM6.99575 15.62V7.81055H4.3995V15.62H6.99575ZM16.3559 15.62V11.1416C16.3559 8.74281 15.0752 7.62691 13.3673 7.62691C11.9901 7.62691 11.3732 8.3843 11.0279 8.91625V7.81055H8.43227C8.46669 8.54324 8.43227 15.62 8.43227 15.62H11.0278V11.2586C11.0278 11.0252 11.0446 10.7918 11.1134 10.625C11.3007 10.1588 11.7281 9.67582 12.4452 9.67582C13.3841 9.67582 13.7602 10.3922 13.7602 11.4416V15.62H16.3559ZM5.71516 4.04492C4.82688 4.04492 4.24653 4.62891 4.24653 5.39434C4.24653 6.14363 4.80922 6.74371 5.68079 6.74371H5.69754C6.60282 6.74371 7.16629 6.14363 7.16629 5.39434C7.1495 4.62891 6.60286 4.04492 5.71516 4.04492Z" fill="#1D364B"/>
+</svg>

package/assets/images/web.svg

@@ -1,3 +1,3 @@
-<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.11619 0C2.80419 0 0.122192 2.688 0.122192 6C0.122192 9.312 2.80419 12 6.11619 12C9.43419 12 12.1222 9.312 12.1222 6C12.1222 2.688 9.43419 0 6.11619 0ZM10.2742 3.6H8.50419C8.31219 2.85 8.03619 2.13 7.67619 1.464C8.78019 1.842 9.69819 2.61 10.2742 3.6ZM6.12219 1.224C6.62019 1.944 7.01019 2.742 7.26819 3.6H4.97619C5.23419 2.742 5.62419 1.944 6.12219 1.224ZM1.47819 7.2C1.38219 6.816 1.32219 6.414 1.32219 6C1.32219 5.586 1.38219 5.184 1.47819 4.8H3.50619C3.45819 5.196 3.42219 5.592 3.42219 6C3.42219 6.408 3.45819 6.804 3.50619 7.2H1.47819ZM1.97019 8.4H3.74019C3.93219 9.15 4.20819 9.87 4.56819 10.536C3.46419 10.158 2.54619 9.396 1.97019 8.4ZM3.74019 3.6H1.97019C2.54619 2.604 3.46419 1.842 4.56819 1.464C4.20819 2.13 3.93219 2.85 3.74019 3.6ZM6.12219 10.776C5.62419 10.056 5.23419 9.258 4.97619 8.4H7.26819C7.01019 9.258 6.62019 10.056 6.12219 10.776ZM7.52619 7.2H4.71819C4.66419 6.804 4.62219 6.408 4.62219 6C4.62219 5.592 4.66419 5.19 4.71819 4.8H7.52619C7.58019 5.19 7.62219 5.592 7.62219 6C7.62219 6.408 7.58019 6.804 7.52619 7.2ZM7.67619 10.536C8.03619 9.87 8.31219 9.15 8.50419 8.4H10.2742C9.69819 9.39 8.78019 10.158 7.67619 10.536ZM8.73819 7.2C8.78619 6.804 8.82219 6.408 8.82219 6C8.82219 5.592 8.78619 5.196 8.73819 4.8H10.7662C10.8622 5.184 10.9222 5.586 10.9222 6C10.9222 6.414 10.8622 6.816 10.7662 7.2H8.73819Z" fill="white"/>
-</svg>
+<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.11619 0C2.80419 0 0.122192 2.688 0.122192 6C0.122192 9.312 2.80419 12 6.11619 12C9.43419 12 12.1222 9.312 12.1222 6C12.1222 2.688 9.43419 0 6.11619 0ZM10.2742 3.6H8.50419C8.31219 2.85 8.03619 2.13 7.67619 1.464C8.78019 1.842 9.69819 2.61 10.2742 3.6ZM6.12219 1.224C6.62019 1.944 7.01019 2.742 7.26819 3.6H4.97619C5.23419 2.742 5.62419 1.944 6.12219 1.224ZM1.47819 7.2C1.38219 6.816 1.32219 6.414 1.32219 6C1.32219 5.586 1.38219 5.184 1.47819 4.8H3.50619C3.45819 5.196 3.42219 5.592 3.42219 6C3.42219 6.408 3.45819 6.804 3.50619 7.2H1.47819ZM1.97019 8.4H3.74019C3.93219 9.15 4.20819 9.87 4.56819 10.536C3.46419 10.158 2.54619 9.396 1.97019 8.4ZM3.74019 3.6H1.97019C2.54619 2.604 3.46419 1.842 4.56819 1.464C4.20819 2.13 3.93219 2.85 3.74019 3.6ZM6.12219 10.776C5.62419 10.056 5.23419 9.258 4.97619 8.4H7.26819C7.01019 9.258 6.62019 10.056 6.12219 10.776ZM7.52619 7.2H4.71819C4.66419 6.804 4.62219 6.408 4.62219 6C4.62219 5.592 4.66419 5.19 4.71819 4.8H7.52619C7.58019 5.19 7.62219 5.592 7.62219 6C7.62219 6.408 7.58019 6.804 7.52619 7.2ZM7.67619 10.536C8.03619 9.87 8.31219 9.15 8.50419 8.4H10.2742C9.69819 9.39 8.78019 10.158 7.67619 10.536ZM8.73819 7.2C8.78619 6.804 8.82219 6.408 8.82219 6C8.82219 5.592 8.78619 5.196 8.73819 4.8H10.7662C10.8622 5.184 10.9222 5.586 10.9222 6C10.9222 6.414 10.8622 6.816 10.7662 7.2H8.73819Z" fill="white"/>
+</svg>

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

@@ -2,50 +2,73 @@
     <div class="card h-100">
         <div class="container-fluid container-fluid--bu pt-5">
             <div class="">
-                <h4 class="card-title font-weight-bold">{{title}}</h4>
+                <h4 class="card-title font-weight-bold">{{ title }}</h4>
             </div>
 
-            <div class="row card-body px-0">
-                <div class="col-6 col-sm-3 col-md-3 info-box text-center px-0" v-for="items in coursesInfo" :key="items.name">
-                    <img v-if="items.icon" :src="items.icon" style="width: 5rem"/>
-                    <span v-if="items.number" :class="items.color ? items.color : ''" class="display-1 font-weight-bold">{{items.number}}</span>
-                    <p v-if="items.name" :class="items.color ? items.color : ''">{{items.name}}</p>
+            <card-skeleton v-show="isLoading" />
+            <div v-show="!isLoading" class="row card-body px-0">
+                <div
+                    class="col-6 col-sm-3 col-md-3 info-box text-center px-0"
+                    v-for="items in coursesInfo"
+                    :key="items.name"
+                >
+                    <img
+                        v-if="items.icon"
+                        :src="items.icon"
+                        style="width: 5rem"
+                    />
+                    <span
+                        v-if="items.number"
+                        :class="items.color ? items.color : ''"
+                        class="display-1 font-weight-bold"
+                        >{{ items.number }}</span
+                    >
+                    <p
+                        v-if="items.name"
+                        :class="items.color ? items.color : ''"
+                    >
+                        {{ items.name }}
+                    </p>
                 </div>
             </div>
         </div>
     </div>
 </template>
 <script>
+import CardSkeleton from '../Skeleton/Cards.vue';
 export default {
-    data(){
-        return{
-        }
+    components: {
+        CardSkeleton
     },
-    props:{
+    data() {
+        return {};
+    },
+    props: {
         title: {
             type: String,
             default: 'Resumo geral'
         },
-        coursesInfo: Array
+        coursesInfo: Array,
+        isLoading: Boolean
     }
-}
+};
 </script>
 <style lang="scss" scoped>
-    .card-title{
-        font-size: 1rem;
+.card-title {
+    font-size: 1rem;
+}
+.info-box {
+    @media (min-width: 576px) {
+        flex: 0 0 50%;
+        max-width: 50%;
     }
-    .info-box{
-        @media (min-width: 576px) {
-            flex: 0 0 50%;
-            max-width: 50%;
-        }
-        @media (min-width: 768px) {
-            flex: 0 0 50%;
-            max-width: 50%;
-        }
-        @media (min-width: 1024px) {
-            flex: 0 0 33%;
-            max-width: 33%;
-        }
+    @media (min-width: 768px) {
+        flex: 0 0 50%;
+        max-width: 50%;
     }
-</style>
+    @media (min-width: 1024px) {
+        flex: 0 0 33%;
+        max-width: 33%;
+    }
+}
+</style>

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

@@ -0,0 +1,60 @@
+<template lang="">
+    <div>
+        <span class="loader-wrapper">
+            <div>
+                <div :class="'mb-5 product-item--avatar bg-' + color">
+                    <img :src="productImage" alt="" />
+                </div>
+                <div class="d-flex justify-content-center align-items-center">
+                    <i
+                        :class="
+                            'fas fa-3x fa-circle-notch fa-spin text-' + color
+                        "
+                    ></i>
+                </div>
+            </div>
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'new-loading',
+    props: {
+        isLoading: {
+            type: Boolean,
+            default: false,
+            description: 'If the parent screen is loading'
+        },
+        productImage: String,
+        color: String
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+// @import "assets/sass/burh-ds/variables/_colors.scss";
+
+.product-item--avatar {
+    width: 64.78px;
+    height: 64.78px;
+    border-radius: 14.0834px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+        color: #fff;
+    }
+}
+
+.loader-wrapper {
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 95vw;
+    height: 100vh;
+}
+</style>

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

@@ -0,0 +1,133 @@
+<template>
+    <div id="content">
+        <div class="skeleton">
+            <div class="skeleton-wrapper">
+                <div class="skeleton-wrapper-inner">
+                    <div class="skeleton-wrapper-body">
+                        <div class="skeleton-avatar"></div>
+                        <div class="skeleton-author"></div>
+                        <div class="skeleton-label"></div>
+                        <div class="skeleton-content-1"></div>
+                        <div class="skeleton-content-2"></div>
+                        <div class="skeleton-content-3"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'card-skeleton'
+};
+</script>
+
+<style>
+#content {
+    width: 100%;
+    /* margin: 0 auto; */
+}
+.skeleton-wrapper {
+    background: #fff;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    margin: 10px 15px;
+}
+
+.skeleton-wrapper-inner {
+    height: 150px;
+    padding: 15px;
+    position: relative;
+}
+
+.skeleton-wrapper-body div {
+    -webkit-animation-duration: 1s;
+    -webkit-animation-fill-mode: forwards;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-name: placeholderSkeleton;
+    -webkit-animation-timing-function: linear;
+    background: #e0e3e6;
+    background-image: -webkit-gradient(
+        linear,
+        left center,
+        right center,
+        from(#e0e3e6),
+        color-stop(0.2, #edeef1),
+        color-stop(0.4, #e0e3e6),
+        to(#e0e3e6)
+    );
+    background-image: -webkit-linear-gradient(
+        left,
+        #e0e3e6 0%,
+        #edeef1 20%,
+        #e0e3e6 40%,
+        #e0e3e6 100%
+    );
+    background-repeat: no-repeat;
+    background-size: 800px 104px;
+    height: 104px;
+    position: relative;
+}
+
+.skeleton-wrapper-body div {
+    position: absolute;
+    right: 15px;
+    left: 15px;
+    top: 15px;
+}
+
+div.skeleton-avatar {
+    height: 60px;
+    width: 60px;
+    border-radius: 60px;
+    right: auto;
+}
+div.skeleton-author {
+    top: 20px;
+    height: 20px;
+    left: 95px;
+    width: 150px;
+}
+
+div.skeleton-label {
+    left: 95px;
+    top: 50px;
+    height: 10px;
+    width: 100px;
+}
+div.skeleton-content-1,
+div.skeleton-content-2,
+div.skeleton-content-3 {
+    left: 15px;
+    right: 15px;
+    height: 10px;
+}
+div.skeleton-content-1 {
+    top: 100px;
+}
+div.skeleton-content-2 {
+    top: 120px;
+}
+div.skeleton-content-3 {
+    top: 140px;
+}
+
+@-webkit-keyframes placeholderSkeleton {
+    0% {
+        background-position: -468px 0;
+    }
+    100% {
+        background-position: 468px 0;
+    }
+}
+
+@-webkit-keyframes skeletonAnimate {
+    from {
+        background-position: top left;
+    }
+    to {
+        background-position: top right;
+    }
+}
+</style>

package/components/burh-ds/Tabs/Tabs.vue

@@ -1,183 +1,187 @@
 <template>
-  <div>
-    <div
-      :class="[
-        { 'col-md-4': vertical && !tabNavWrapperClasses },
-        { 'col-12': centered && !tabNavWrapperClasses },
-        tabNavWrapperClasses
-      ]"
-    >
-      <ul
-        class="nav nav-pills"
-        role="tablist"
-        :class="[
-          `nav-pills-${type}`,
-          { 'flex-column': vertical },
-          { 'justify-content-center': centered },
-          tabNavClasses
-        ]"
-        :title="navTitle"
-      >
-        <li
-          v-for="tab in tabs"
-          class="nav-item active"
-          data-toggle="tab"
-          role="tablist"
-          aria-expanded="true"
-          :key="tab.id"
+    <div>
+        <div
+            :class="[
+                { 'col-md-4': vertical && !tabNavWrapperClasses },
+                { 'col-12': centered && !tabNavWrapperClasses },
+                tabNavWrapperClasses
+            ]"
         >
-          <a
-            data-toggle="tab"
-            role="tablist"
-            :href="`#${tab.id}`"
-            @click.prevent="activateTab(tab)"
-            :aria-expanded="tab.active"
-            class="nav-link"
-            :class="{ active: tab.active }"
-          >
-            <tab-item-content :tab="tab"> </tab-item-content>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div
-      class="tab-content"
-      :class="[
-        { 'tab-space': !vertical },
-        { 'col-md-8': vertical && !tabContentClasses },
-        tabContentClasses
-      ]"
-    >
-      <slot></slot>
+            <ul
+                class="nav nav-pills"
+                role="tablist"
+                :class="[
+                    `nav-pills-${type}`,
+                    { 'flex-column': vertical },
+                    { 'justify-content-center': centered },
+                    tabNavClasses
+                ]"
+                :title="navTitle"
+            >
+                <li
+                    v-for="tab in tabs"
+                    class="nav-item"
+                    data-toggle="tab"
+                    role="tablist"
+                    aria-expanded="true"
+                    :key="tab.id"
+                >
+                    <a
+                        data-toggle="tab"
+                        role="tablist"
+                        :href="`#${tab.id}`"
+                        @click.prevent="activateTab(tab)"
+                        :aria-expanded="tab.active"
+                        class="nav-link"
+                        :class="{ active: tab.active }"
+                    >
+                        <tab-item-content :tab="tab"> </tab-item-content>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div
+            class="tab-content"
+            :class="[
+                { 'tab-space': !vertical },
+                { 'col-md-8': vertical && !tabContentClasses },
+                tabContentClasses
+            ]"
+        >
+            <slot></slot>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 import { isMobile, isMobileOnly } from 'mobile-device-detect';
 
 export default {
-  name: 'tabs',
-  components: {
-    TabItemContent: {
-      props: ['tab'],
-      render(h) {
-        return h('div', [this.tab.$slots.title || this.tab.title]);
-      }
-    }
-  },
-  provide() {
-    return {
-      addTab: this.addTab,
-      removeTab: this.removeTab
-    };
-  },
-  props: {
-    type: {
-      type: String,
-      default: 'primary',
-      validator: value => {
-        let acceptedValues = [
-          'primary',
-          'info',
-          'success',
-          'warning',
-          'danger'
-        ];
-        return acceptedValues.indexOf(value) !== -1;
-      }
-    },
-    activeTab: {
-      type: String,
-      default: '',
-      description: 'Active tab name'
-    },
-    noActiveTabOnStart: {
-      type: Boolean,
-      default: true,
-      description: 'Start with no active tab'
-    },
-    tabNavWrapperClasses: {
-      type: [String, Object],
-      default: '',
-      description: 'ul wrapper css classes'
+    name: 'tabs',
+    components: {
+        TabItemContent: {
+            props: ['tab'],
+            render(h) {
+                return h('div', [this.tab.$slots.title || this.tab.title]);
+            }
+        }
     },
-    tabNavClasses: {
-      type: [String, Object],
-      default: '',
-      description: 'ul css classes'
+    provide() {
+        return {
+            addTab: this.addTab,
+            removeTab: this.removeTab
+        };
     },
-    tabContentClasses: {
-      type: [String, Object],
-      default: '',
-      description: 'tab content css classes'
+    props: {
+        type: {
+            type: String,
+            default: 'primary',
+            validator: value => {
+                let acceptedValues = [
+                    'primary',
+                    'info',
+                    'success',
+                    'warning',
+                    'danger'
+                ];
+                return acceptedValues.indexOf(value) !== -1;
+            }
+        },
+        activeTab: {
+            type: String,
+            default: '',
+            description: 'Active tab name'
+        },
+        noActiveTabOnStart: {
+            type: Boolean,
+            default: true,
+            description: 'Start with no active tab'
+        },
+        tabNavWrapperClasses: {
+            type: [String, Object],
+            default: '',
+            description: 'ul wrapper css classes'
+        },
+        tabNavClasses: {
+            type: [String, Object],
+            default: '',
+            description: 'ul css classes'
+        },
+        tabContentClasses: {
+            type: [String, Object],
+            default: '',
+            description: 'tab content css classes'
+        },
+        vertical: Boolean,
+        centered: Boolean,
+        value: String,
+        navTitle: String
     },
-    vertical: Boolean,
-    centered: Boolean,
-    value: String,
-    navTitle: String
-  },
-  data() {
-    return {
-      tabs: [],
-      isMobileOnlyWatch: isMobileOnly
-    };
-  },
-  methods: {
-    findAndActivateTab(title) {
-      let tabToActivate = this.tabs.find(t => t.title === title);
-      if (tabToActivate) {
-        this.activateTab(tabToActivate);
-      }
+    data() {
+        return {
+            tabs: [],
+            isMobileOnlyWatch: isMobileOnly
+        };
     },
-    activateTab(tab) {
-      if (this.handleClick) {
-        this.handleClick(tab);
-      }
-      this.deactivateTabs();
-      tab.active = true;
+    methods: {
+        findAndActivateTab(title) {
+            let tabToActivate = this.tabs.find(t => t.title === title);
+            if (tabToActivate) {
+                this.activateTab(tabToActivate);
+            }
+        },
+        activateTab(tab) {
+            if (this.handleClick) {
+                this.handleClick(tab);
+            }
+            this.deactivateTabs();
+            tab.active = true;
 
-      if(this.isMobileOnlyWatch){
-        if(!document.querySelector('html').classList.contains('no-scroll')){
-          document.querySelector('html').classList.add('no-scroll');
+            if (this.isMobileOnlyWatch) {
+                if (
+                    !document
+                        .querySelector('html')
+                        .classList.contains('no-scroll')
+                ) {
+                    document.querySelector('html').classList.add('no-scroll');
+                }
+            }
+        },
+        deactivateTabs() {
+            this.tabs.forEach(tab => {
+                tab.active = false;
+            });
+        },
+        addTab(tab) {
+            const index = this.$slots.default.indexOf(tab.$vnode);
+            if (!this.activeTab && index === 0 && !this.noActiveTabOnStart) {
+                tab.active = true;
+            }
+            if (this.activeTab === tab.name && !this.noActiveTabOnStart) {
+                tab.active = true;
+            }
+            this.tabs.splice(index, 0, tab);
+        },
+        removeTab(tab) {
+            const tabs = this.tabs;
+            const index = tabs.indexOf(tab);
+            if (index > -1) {
+                tabs.splice(index, 1);
+            }
         }
-      }
-    },
-    deactivateTabs() {
-      this.tabs.forEach(tab => {
-        tab.active = false;
-      });
     },
-    addTab(tab) {
-      const index = this.$slots.default.indexOf(tab.$vnode);
-      if (!this.activeTab && index === 0 && !this.noActiveTabOnStart) {
-        tab.active = true;
-      }
-      if (this.activeTab === tab.name && !this.noActiveTabOnStart) {
-        tab.active = true;
-      }
-      this.tabs.splice(index, 0, tab);
+    mounted() {
+        this.$nextTick(() => {
+            if (this.value) {
+                this.findAndActivateTab(this.value);
+            }
+        });
     },
-    removeTab(tab) {
-      const tabs = this.tabs;
-      const index = tabs.indexOf(tab);
-      if (index > -1) {
-        tabs.splice(index, 1);
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      if (this.value) {
-        this.findAndActivateTab(this.value);
-      }
-    });
-  },
-  watch: {
-    value(newVal) {
-      this.findAndActivateTab(newVal);
+    watch: {
+        value(newVal) {
+            this.findAndActivateTab(newVal);
+        }
     }
-  }
 };
 </script>
 

package/package.json

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