@burh/nuxt-core 1.0.83 → 1.0.85

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

@@ -1,63 +1,67 @@
-<template>
-	<card class="card">
-        <h4 class="aria-text">Funcionalidades</h4>
-        <ul class="list line">
-            <functionality-item
-                class="cursor-pointer"
-                :icone="firstItemIcon"
-                :text="firstItemText"
-                @click="$emit('click-first-item')"/>
-            <functionality-item
-                class="cursor-pointer"
-                :icone="secondItemIcon"
-                :text="secondItemText"
-                @click="$emit('click-second-item')" />
-        </ul>
-        <hr>
-        <h4 class="list-title">{{title}}</h4>
-        <ul class="list">
-            <slot></slot>
-        </ul>
-        <p class="footer-text">{{context}}</p>
-	</card>
-</template>
-<script>
-import FunctionalityItem from './FunctionalityItem'
-export default {
-    name: 'performance-card',
-    components: {
-        FunctionalityItem,
-    },
-    props: {
-        title: String,
-        context: String,
-        firstItemText: String,
-        secondItemText: String,
-        firstItemIcon: String,
-        secondItemIcon: String,
-        subscribers: Number,
-        jobs: Number,
-        visualization: Number,
-    }
-};
-</script>
-<style lang="scss" scoped>
-.list {
-    margin: 3rem 0;
-    display: flex;
-    justify-content: space-evenly;
-}
-
-
-.line ul:not(:first-child) {
-    border: 2px solid #e5e5e5;
-}
-
-.list-title {
-    font-size: 1.25rem;
-}
-
-.footer-text {
-    margin-left: 2rem;
-}
-</style>
+<template>
+	<card class="card">
+        <h4 class="aria-text">Funcionalidades</h4>
+        <ul class="list line">
+            <functionality-item
+                class="cursor-pointer"
+                :icone="firstItemIcon"
+                :text="firstItemText"
+                @functionality-click="$emit('click-first-item')"/>
+            <functionality-item
+                class="cursor-pointer"
+                :icone="secondItemIcon"
+                :text="secondItemText"
+                @functionality-click="$emit('click-second-item')" />
+        </ul>
+        <hr>
+        <h4 class="list-title">{{title}}</h4>
+        <ul class="list">
+            <slot></slot>
+        </ul>
+        <p class="footer-text">{{context}}</p>
+	</card>
+</template>
+<script>
+import FunctionalityItem from './FunctionalityItem'
+export default {
+    name: 'performance-card',
+    components: {
+        FunctionalityItem,
+    },
+    props: {
+        title: String,
+        context: String,
+        firstItemText: String,
+        secondItemText: String,
+        firstItemIcon: String,
+        secondItemIcon: String,
+        subscribers: Number,
+        jobs: Number,
+        visualization: Number,
+        skeleton: {
+            type: Boolean,
+			default: false
+		},
+    }
+};
+</script>
+<style lang="scss" scoped>
+.list {
+    margin: 3rem 0;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+
+.line ul:not(:first-child) {
+    border: 2px solid #e5e5e5;
+}
+
+.list-title {
+    font-size: 1.25rem;
+}
+
+.footer-text {
+    margin-left: 2rem;
+}
+</style>

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

@@ -1,52 +1,60 @@
-<template>
-    <li class="performance-item" :class="primary && ' primary'">
-        <span class="performance-item--title">{{formatedTitle}}</span>
-        <span class="performance-item--value">{{formatedValue}} mil</span>
-    </li>
-</template>
-<script>
-export default {
-    name: "performance-item",
-    props: {
-        title: {
-            type: String,
-            default: "Visualizações"
-        },
-        value: {
-            type: Number,
-            default: 3910
-        },
-        primary: {
-            type: Boolean,
-            default: false
-        }
-    },
-    computed: {
-        formatedValue() {
-            return this.value/1000
-        },
-        formatedTitle() {
-            const title = this.title.toLowerCase();
-            return title[0].toUpperCase() + title.slice(1);
-        }
-    }
-}
-</script>
-<style lang="scss" scoped>
-.performance-item {
-    display: flex;
-    flex-direction: column;
-    &--title {
-        font-size: 1rem;
-    }
-
-    &--value {
-        font-size: 1.75rem;
-    }
-}
-
-.primary {
-    color: #258bf4;
-    font-weight: 600;
-}
-</style>
+<template>
+    <li class="performance-item" :class="primary && ' primary'">
+        <span class="performance-item--title">{{formatedTitle}}</span>
+        <span v-if="!skeleton" class="performance-item--value">{{ value > 999 ? formatedValue + " mil" : formatedValue + "" }}</span>
+        <span v-if="skeleton" class="performance-item--value skeleton-inner"></span>
+    </li>
+</template>
+<script> 
+export default {
+    name: "performance-item",
+    props: {
+        title: {
+            type: String,
+            default: "Visualizações"
+        },
+        value: {
+            type: Number,
+            default: 3910
+        },
+        primary: {
+            type: Boolean,
+            default: false
+        },
+        skeleton: {
+			type: Boolean,
+			default: false
+		},
+    },
+    computed: {
+        formatedValue() {
+            if (this.value > 999) 
+                return this.value/1000
+
+            return this.value
+        },
+        formatedTitle() {
+            const title = this.title.toLowerCase();
+            return title[0].toUpperCase() + title.slice(1);
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.performance-item {
+    display: flex;
+    flex-direction: column;
+    &--title {
+        font-size: 1rem;
+    }
+
+    &--value {
+        font-size: 1.75rem;
+    }
+}
+
+.primary {
+    color: #258bf4;
+    font-weight: 600;
+}
+</style>

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

@@ -1,192 +1,192 @@
-<template>
-	<div :class="'card card--store mb-4 ' + (isSelectedPlan ? 'selected' : '') " tabindex="0" v-on=" { click: () => $emit('card-selected', (isCurrentPlan && isSelectedPlan)) }">
-		<div class="card-header bg-transparent text-center card-header--store">
-			<span class="current-flag" v-if="isCurrentPlan">Atual</span>
-			<h3 class="text-header display-3">{{ name }}</h3>
-			<h3 v-if="!isCurrentPlan" class="display-3">{{ price | convertToReal }}</h3>
-
-			<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="(item, 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> {{  item }} </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 pl-mini">{{ description }}</h6>
-				<div class="h6 font-weight-bold text-sm pl-mini">{{ subtitle }}</div>
-				<div class="pl-mini">
-					<ul class="list-unstyled">
-						<li v-for="(item, 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> {{  item }} </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:{
-		isSelectedPlan:{
-			type: Boolean,
-			default: true
-		},
-		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' }];
-			}
-		},
-		isCurrentPlan: {
-			type: Boolean | Number,
-			default: false
-		},
-	},
-	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";
-	.pl-mini{
-		padding-left: 0.8rem;
-	}
-    .card--shadowless{
-        box-shadow: none !important;
-        margin-bottom: 0px !important;
-
-        .card-header {
-            padding: 0;
-        }
-    }
-
-    .card--store {
-        min-height: 100%;
-
-        .current-flag {
-            color: $color-light--darken
-        }
-
-        &:hover {
-            cursor: pointer;
-            background-color: $color-mono-dark-10;
-            border-style: solid !important;
-            border-width: 2px !important;
-            border-color: $color-mono-dark-10 !important;
-
-            .card-header {
-                border-bottom-color: $color-mono-dark-10;
-            }
-            .card--shadowless {
-                background-color: $color-mono-dark-10;
-
-                .card-header {
-                    background-color: $color-mono-dark-10;
-                }
-            }
-
-            .fa-check::before {
-                color: $color-primary
-            }
-        }
-
-        &.selected {
-            outline: none;
-            background-color: $white;
-            border-style: solid !important;
-            border-width: 2px !important;
-            border-color: $color-primary !important;
-
-            .card-header {
-                border-bottom-color: $color-primary;
-            }
-            .card--shadowless {
-                background-color: $white;
-
-                .card-header {
-                    background-color: $white;
-                }
-            }
-
-            .fa-check::before {
-                color: $color-primary;
-            }
-        }
-
-        .card-header--store {
-            border: 0;
-            @media screen and (min-width: 576px) {
-                border: 0;
-                &::after {
-                    content: '';
-                    width: 85%;
-                    height: 1px;
-                    background-color: $color-light;
-                    position: absolute;
-                    transform: translatex(-50%);
-                }
-            }
-        }
-
-	}
-</style>
+<template>
+	<div :class="'card card--store mb-4 ' + (isSelectedPlan ? 'selected' : '') " tabindex="0" v-on=" { click: () => $emit('card-selected', (isCurrentPlan && isSelectedPlan)) }">
+		<div class="card-header bg-transparent text-center card-header--store">
+			<span class="current-flag" v-if="isCurrentPlan">Atual</span>
+			<h3 class="text-header display-3">{{ name }}</h3>
+			<h3 v-if="!isCurrentPlan" class="display-3">{{ price | convertToReal }}</h3>
+
+			<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="(item, 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> {{  item }} </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 pl-mini">{{ description }}</h6>
+				<div class="h6 font-weight-bold text-sm pl-mini">{{ subtitle }}</div>
+				<div class="pl-mini">
+					<ul class="list-unstyled">
+						<li v-for="(item, 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> {{  item }} </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:{
+		isSelectedPlan:{
+			type: Boolean,
+			default: true
+		},
+		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' }];
+			}
+		},
+		isCurrentPlan: {
+			type: Boolean | Number,
+			default: false
+		},
+	},
+	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";
+	.pl-mini{
+		padding-left: 0.8rem;
+	}
+    .card--shadowless{
+        box-shadow: none !important;
+        margin-bottom: 0px !important;
+
+        .card-header {
+            padding: 0;
+        }
+    }
+
+    .card--store {
+        min-height: 100%;
+
+        .current-flag {
+            color: $color-light--darken
+        }
+
+        &:hover {
+            cursor: pointer;
+            background-color: $color-mono-dark-10;
+            border-style: solid !important;
+            border-width: 2px !important;
+            border-color: $color-mono-dark-10 !important;
+
+            .card-header {
+                border-bottom-color: $color-mono-dark-10;
+            }
+            .card--shadowless {
+                background-color: $color-mono-dark-10;
+
+                .card-header {
+                    background-color: $color-mono-dark-10;
+                }
+            }
+
+            .fa-check::before {
+                color: $color-primary
+            }
+        }
+
+        &.selected {
+            outline: none;
+            background-color: $white;
+            border-style: solid !important;
+            border-width: 2px !important;
+            border-color: $color-primary !important;
+
+            .card-header {
+                border-bottom-color: $color-primary;
+            }
+            .card--shadowless {
+                background-color: $white;
+
+                .card-header {
+                    background-color: $white;
+                }
+            }
+
+            .fa-check::before {
+                color: $color-primary;
+            }
+        }
+
+        .card-header--store {
+            border: 0;
+            @media screen and (min-width: 576px) {
+                border: 0;
+                &::after {
+                    content: '';
+                    width: 85%;
+                    height: 1px;
+                    background-color: $color-light;
+                    position: absolute;
+                    transform: translatex(-50%);
+                }
+            }
+        }
+
+	}
+</style>