@burh/nuxt-core 1.0.18 → 1.0.20

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

@@ -1,149 +1,154 @@
-<template>
-    <div class="card card--store mb-4" tabindex="0" @click="$emit('card-selected')">
-        <div class="card-header bg-transparent text-center card-header--store">
-            <h3 class="text-header">{{ name }}</h3>
-            <div class="value-header display-2">{{ price | convertToReal }}</div>
-
-            <div class="d-block d-sm-none text-center">
-                <collapse :animation-duration="200">
-                    <collapse-item class="card--shadowless" name="1">
-                        <button slot="title" class="btn btn-link" @click="$emit('card-benefits')">Beneficios</button>
-                        <div>
-                            <ul class="list-unstyled">
-                                <li v-for="(items, index) in features" :key="index">
-                                    <div class="d-flex align-items-center">
-                                        <span>
-                                            <i class="fas fa-check"></i>
-                                        </span>
-                                        <div class="ml-4 small text-left">
-                                            <span> {{  items.name }} </span>
-                                        </div>
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                    </collapse-item>
-                </collapse>
-
-            </div>
-        </div>
-
-        <div class="card-body p-4 px-lg-4 d-none d-md-block">
-            <div>
-                <h6 class="card-text text-sm">{{ description }}</h6>
-                <div class="h6 font-weight-bold text-sm">{{ subtitle }}</div>
-                <div>
-                    <ul class="list-unstyled">
-                        <li v-for="(items, index) in features" :key="index">
-                            <div class="d-flex align-items-center">
-                                <span>
-                                    <i class="fas fa-check"></i>
-                                </span>
-                                <div class="ml-4 small">
-                                    <span> {{  items.name }} </span>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-import Collapse from '@burh/nuxt-core/components/argon-core/Collapse/Collapse.vue';
-import CollapseItem from '@burh/nuxt-core/components/argon-core/Collapse/CollapseItem.vue';
-export default {
-    name: 'store-card',
-    components: { 
-    Collapse, 
-    CollapseItem 
-    },
-    props:{
-        name: {
-            type: String,
-            default: 'Premium'
-        },
-        price: {
-            type: Number,
-            default: 397
-        },
-        description: {
-            type: String,
-            default: 'Recursos inteligentes para não perder mais tempo no processo seletivo'
-        },
-        subtitle: {
-            type: String,
-            default: 'Tudo no gratuito e mais:'
-        },
-        features: {
-            type: Array,
-            default:()=>{
-                return [ {id: 1, name:'Vagas Confidenciais'}, {id: 2, name:'Vagas Urgentes'}, {id: 3, name:'Filtros Avançados'}, {id: 4, name:'Processos Customizados'}, {id: 5, name:'Anotações nas vagas e nos candidatos'}];
-            }
-        }
-    },
-    filters: {
-        convertToReal(value) {
-            return 'R$ ' + value.toFixed(2).replace('.',',');
-        }  
-    },
-    data(){
-        return{
-            default: ''
-        };
-    }
-}
-</script>
-<style lang="scss">
-@import "@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
-    .card--shadowless{
-        box-shadow: none !important;
-        margin-bottom: 0px !important;
-
-        .card-header {
-            padding: 0;
-        }
-    }
-
-    .card--store {
-        border: 1px solid #e5e5e5;
-
-        &:focus{
-            background-color: $color-info--ligthen;
-            border-style: solid !important;
-            border-width: 2px !important;
-            border-color: $color-info--mid-dark !important;
-            
-            .card-header{
-                border-bottom-color: $color-info--mid-dark;
-            }
-            .card--shadowless{
-                background-color: $color-info--ligthen;
-                
-                .card-header{
-                    background-color: $color-info--ligthen;
-                }
-            }
-
-            .fa-check::before{
-                color: #32A0D5;
-            } 
-        }
-
-        .card-header--store {
-            @media screen and (min-width: 576px) {
-                border: 0;
-                &::after {
-                    content: '';
-                    width: 75%;
-                    height: 1px;
-                    background-color: #679DBF;
-                    position: absolute;
-                    transform: translatex(-50%);
-                }
-            }
-        }
-}
-
+<template>
+    <div class="card card--store mb-4" tabindex="0" @click="$emit('card-selected')" :class="planid == selectedPlan ? 'selected' : ''" >
+        <div class="card-header bg-transparent text-center card-header--store">
+            <h3 class="text-header">{{ name }}</h3>
+            <div class="value-header display-2">{{ price | convertToReal }}</div>
+
+            <div class="d-block d-sm-none text-center">
+                <collapse :animation-duration="200">
+                    <collapse-item class="card--shadowless" name="1">
+                        <button slot="title" class="btn btn-link" @click="$emit('card-benefits')">Beneficios</button>
+                        <div>
+                            <ul class="list-unstyled">
+                                <li v-for="(items, index) in features" :key="index">
+                                    <div class="d-flex align-items-center">
+                                        <span>
+                                            <i class="fas fa-check"></i>
+                                        </span>
+                                        <div class="ml-4 small text-left">
+                                            <span> {{  items.name }} </span>
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </collapse-item>
+                </collapse>
+
+            </div>
+        </div>
+
+        <div class="card-body p-4 px-lg-4 d-none d-md-block">
+            <div>
+                <h6 class="card-text text-sm">{{ description }}</h6>
+                <div class="h6 font-weight-bold text-sm">{{ subtitle }}</div>
+                <div>
+                    <ul class="list-unstyled">
+                        <li v-for="(items, index) in features" :key="index">
+                            <div class="d-flex align-items-center">
+                                <span>
+                                    <i class="fas fa-check"></i>
+                                </span>
+                                <div class="ml-4 small">
+                                    <span> {{  items.name }} </span>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import Collapse from '@burh/nuxt-core/components/argon-core/Collapse/Collapse.vue';
+import CollapseItem from '@burh/nuxt-core/components/argon-core/Collapse/CollapseItem.vue';
+export default {
+    name: 'plan-card',
+    components: { 
+    Collapse, 
+    CollapseItem 
+    },
+    props:{
+        selectedPlan:{
+            type: Number,
+        },
+        planid:{
+            type: Number,
+        },
+        name: {
+            type: String,
+            default: 'Premium'
+        },
+        price: {
+            type: Number,
+            default: 397
+        },
+        description: {
+            type: String,
+            default: 'Recursos inteligentes para não perder mais tempo no processo seletivo'
+        },
+        subtitle: {
+            type: String,
+            default: 'Tudo no gratuito e mais:'
+        },
+        features: {
+            type: Array,
+            default:()=>{
+                return [ {id: 1, name:'Vagas Confidenciais'}, {id: 2, name:'Vagas Urgentes'}, {id: 3, name:'Filtros Avançados'}, {id: 4, name:'Processos Customizados'}, {id: 5, name:'Anotações nas vagas e nos candidatos'}];
+            }
+        }
+    },
+    filters: {
+        convertToReal(value) {
+            return 'R$ ' + value.toFixed(2).replace('.',',');
+        }  
+    },
+    data(){
+        return{
+        };
+    },
+}
+</script>
+<style lang="scss">
+@import "@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
+    .card--shadowless{
+        box-shadow: none !important;
+        margin-bottom: 0px !important;
+
+        .card-header {
+            padding: 0;
+        }
+    }
+
+    .card--store {
+        border: 1px solid #e5e5e5;
+
+        &.selected{
+            background-color: $color-info--ligthen;
+            border-style: solid !important;
+            border-width: 2px !important;
+            border-color: $color-info--mid-dark !important;
+            
+            .card-header{
+                border-bottom-color: $color-info--mid-dark;
+            }
+            .card--shadowless{
+                background-color: $color-info--ligthen;
+                
+                .card-header{
+                    background-color: $color-info--ligthen;
+                }
+            }
+
+            .fa-check::before{
+                color: #32A0D5;
+            } 
+        }
+
+        .card-header--store {
+            @media screen and (min-width: 576px) {
+                border: 0;
+                &::after {
+                    content: '';
+                    width: 75%;
+                    height: 1px;
+                    background-color: #679DBF;
+                    position: absolute;
+                    transform: translatex(-50%);
+                }
+            }
+        }
+}
+
 </style>

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

@@ -1,62 +1,62 @@
-<template>
-    <div class="col w-100 pr-md-3">
-        <div class="card card--purchase-resume">
-            <div class="card-header">
-                <h5 class="h5 mb-0 font-weight-bold card__inner">{{!skeleton ? 'Resumo' : ''}}</h5>
-                <div class="d-flex">
-                    <h5 class="h5 mb-0 mt-3 text-muted card__inner">{{ !skeleton ? 'Total' : ''}}</h5>
-
-                    <h5 v-if="skeleton != true" class="h5 mb-0 mt-3 text-muted ml-auto card__inner">{{total | convertToReal }}</h5>
-                    <h5 v-if="skeleton == true" class="h5 mb-0 mt-3 text-muted ml-auto card__inner"></h5>
-                </div>
-            </div>
-            <div class="card-body">
-
-                <p v-if="skeleton != true" class="card-text card__local mb-4">{{!skeleton ? 'Valor total de pagamento recorrente mensal, primeiro faturamento gerado apenas para daqui 30 dias' : ''}}</p>
-
-                <div v-if="skeleton != true" role="alert" class="alert alert-info d-flex card__local">
-                    <span class="alert-text">
-                        <span data-notify="icon" class="alert-icon mr-2">
-                            <i class="fas fa-info-circle"></i>
-                        </span> 
-                        Nosso time financeiro vai entrar em contato para ajustar o melhor dia de faturamento e envio da nota fiscal para sua empresa.
-				    </span> 
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    name: 'purchase-card',
-    components:{
-
-    },
-    props:{
-        total:{
-            type: Number,
-            default: 600
-        },
-        skeleton: {
-			type: Boolean,
-			default: false
-		},
-    },
-    data(){
-        return{
-            default: ''
-        };
-    },
-    filters: {
-        convertToReal(value) {
-            return 'R$ ' + value.toFixed(2).replace('.',',');
-        }  
-    },
-}
-</script>
-
-<style lang="scss">
-.card--purchase-resume {
-    border: 1px solid #e5e5e5;
-}
+<template>
+    <div class="col w-100 pr-md-3">
+        <div class="card card--purchase-resume">
+            <div class="card-header">
+                <h5 class="h5 mb-0 font-weight-bold card__inner">{{!skeleton ? 'Resumo' : ''}}</h5>
+                <div class="d-flex">
+                    <h5 class="h5 mb-0 mt-3 text-muted card__inner">{{ !skeleton ? 'Total' : ''}}</h5>
+
+                    <h5 v-if="skeleton != true" class="h5 mb-0 mt-3 text-muted ml-auto card__inner">{{total | convertToReal }}</h5>
+                    <h5 v-if="skeleton == true" class="h5 mb-0 mt-3 text-muted ml-auto card__inner"></h5>
+                </div>
+            </div>
+            <div class="card-body">
+
+                <p v-if="skeleton != true" class="card-text card__local mb-4">{{!skeleton ? 'Valor total de pagamento recorrente mensal, primeiro faturamento gerado apenas para daqui 30 dias' : ''}}</p>
+
+                <div v-if="skeleton != true" role="alert" class="alert alert-info d-flex card__local">
+                    <span class="alert-text">
+                        <span data-notify="icon" class="alert-icon mr-2">
+                            <i class="fas fa-info-circle"></i>
+                        </span> 
+                        Nosso time financeiro vai entrar em contato para ajustar o melhor dia de faturamento e envio da nota fiscal para sua empresa.
+				    </span> 
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'purchase-card',
+    components:{
+
+    },
+    props:{
+        total:{
+            type: Number,
+            default: 600
+        },
+        skeleton: {
+			type: Boolean,
+			default: false
+		},
+    },
+    data(){
+        return{
+            default: ''
+        };
+    },
+    filters: {
+        convertToReal(value) {
+            return 'R$ ' + value.toFixed(2).replace('.',',');
+        }  
+    },
+}
+</script>
+
+<style lang="scss">
+.card--purchase-resume {
+    border: 1px solid #e5e5e5;
+}
 </style>

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

@@ -1,62 +1,62 @@
-<template>
-    <div class="col w-100 pr-md-3">
-        <div class="card card--purchase-resume">
-            <div class="card-header border-0">
-                <h1 class="h5 mb-0 card__inner font-weight-bold">{{ type }}</h1>
-            </div>
-            <div class="card-body pt-0">
-                <p class="card-text card__local mb-1">{{ textSelected }}</p>
-
-                <p v-if="skeleton != true" class="text-right card__local mb-0">{{ price | convertToReal}}</p>
-                <p v-if="skeleton == true" class="text-right card__local mb-0"></p>
-                <!-- <p class="text-right mb-0">{{ paybackPeriod }}</p> -->
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    name: 'purchase-card-simple',
-    components:{
-
-    },
-    props:{
-        type:{
-            type: String,
-            default: 'Plano'
-        },
-        textSelected:{
-            type: String,
-            default: 'Você selecionou o Plano Carreiras anual faturado mensalmente'
-        },
-        paybackPeriod:{
-            type: String,
-            default: 'Mensal'
-        },
-        price:{
-            type: Number,
-            default: 600
-        },
-        skeleton: {
-			type: Boolean,
-			default: false
-		},
-    },
-    data(){
-        return{
-            default: ''
-        };
-    },
-    filters: {
-        convertToReal(value) {
-            return 'R$ ' + value.toFixed(2).replace('.',',');
-        }  
-    },
-}
-</script>
-
-<style lang="scss">
-.card--purchase-resume {
-    border: 1px solid #e5e5e5;
-}
+<template>
+    <div class="col w-100 pr-md-3">
+        <div class="card card--purchase-resume">
+            <div class="card-header border-0">
+                <h1 class="h5 mb-0 card__inner font-weight-bold">{{ type }}</h1>
+            </div>
+            <div class="card-body pt-0">
+                <p class="card-text card__local mb-1">{{ textSelected }}</p>
+
+                <p v-if="skeleton != true" class="text-right card__local mb-0">{{ price | convertToReal}}</p>
+                <p v-if="skeleton == true" class="text-right card__local mb-0"></p>
+                <!-- <p class="text-right mb-0">{{ paybackPeriod }}</p> -->
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'purchase-card-simple',
+    components:{
+
+    },
+    props:{
+        type:{
+            type: String,
+            default: 'Plano'
+        },
+        textSelected:{
+            type: String,
+            default: 'Você selecionou o Plano Carreiras anual faturado mensalmente'
+        },
+        paybackPeriod:{
+            type: String,
+            default: 'Mensal'
+        },
+        price:{
+            type: Number,
+            default: 600
+        },
+        skeleton: {
+			type: Boolean,
+			default: false
+		},
+    },
+    data(){
+        return{
+            default: ''
+        };
+    },
+    filters: {
+        convertToReal(value) {
+            return 'R$ ' + value.toFixed(2).replace('.',',');
+        }  
+    },
+}
+</script>
+
+<style lang="scss">
+.card--purchase-resume {
+    border: 1px solid #e5e5e5;
+}
 </style>