@burh/nuxt-core 1.0.500 → 1.0.502

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

@@ -1,267 +1,267 @@
-<template>
-	<div class="w-100 h-100">
-		<div class="card h-100">
-			<div class="pt-4 pl-4 pr-4">
-				<h4 class="card-title font-weight-bold mb-0">{{ title }}</h4>
-			</div>
-			<div class="container-fluid container-fluid--bu pt-2 pb-2 container--height">
-				<div class="card__content">
-					<div v-if="hasChart">
-						<div v-if="haveDataCoursesProgress">
-							<div class="chart__graph">
-								<doughnut-chart :data="chartData" />
-							</div>
-							<div class="row card-body px-0 justify-content-center">
-								<div
-									class="text-center px-0"
-									:class="!items.icon ? 'col-6 col-sm-3 col-md-3' : 'col-12'"
-									v-for="(items, index) in coursesProgress"
-									:key="items.name"
-								>
-									<div :class="{ 'item__with__icon': items.icon }">
-										<img
-											v-if="items.icon"
-											:src="items.icon"
-											style="width: 5rem"
-										/>
-										<div>
-											<span
-												v-if="items.number"
-												:class="items.color ? items.color : ''"
-												class="display-1 font-weight-bold number-value"
-											>{{ items.percentage ? items.percentage : items.number}}</span
-											>
-											<p
-												v-if="items.name"
-												:class="[
-													items.color ? items.color : '',
-													hasChart && 'chart-label',
-													hasChart && `chart-color-${index}`
-												]"
-											>
-												{{ items.name }}
-											</p>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div v-else>
-							<empty-chart :item="'status dos treinamentos'"/>
-						</div>
-					</div>
-					<div v-if="hasIcon">
-						<div v-if="haveDataOverview" class="row card-body px-0 justify-content-center">
-							<div
-								class="text-center px-0"
-								:class="!items.icon ? 'col-6 col-sm-3 col-md-3' : 'col-12'"
-								v-for="(items, index) in overview"
-								:key="items.name"
-							>
-								<div :class="{ 'item__with__icon': items.icon }">
-									<img
-										v-if="items.icon"
-										:src="items.icon"
-										style="width: 5rem"
-									/>
-									<div>
-										<span
-											v-if="items.number"
-											:class="items.color ? items.color : ''"
-											class="display-1 font-weight-bold number-value"
-										>{{ items.percentage ? items.percentage : items.number}}</span
-										>
-										<p
-											v-if="items.name"
-											:class="[
-												items.color ? items.color : '',
-												hasChart && 'chart-label',
-												hasChart && `chart-color-${index}`
-											]"
-										>
-											{{ items.name }}
-										</p>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div v-else>
-							<empty-chart :item="'resumo geral'"/>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-<script>
-import DoughnutChart from '../Chart/DoughnutChart.vue';
-import EmptyChart from '../../organismos/emptyChart/index.vue';
-export default {
-	components: {
-		DoughnutChart,
-		EmptyChart
-	},
-	props: {
-		title: {
-			type: String,
-			default:''
-		},
-		hasChart: {
-			type: Boolean,
-			default: false
-		},
-		hasIcon: {
-			type: Boolean,
-			default: false
-		},
-		overview: Array,
-		coursesProgress: Array,
-	},
-	computed:{
-		chartData(){
-			if(this.coursesProgress.length){
-				return {
-					labels: this.coursesProgress.map(item => item.name),
-					datasets: [
-						{
-							label: 'Dataset 1',
-							data: this.coursesProgress.map(item => item.number),
-							backgroundColor: ['#5865F2', '#9D35FC', '#FF539D', '#FF7D7E', '#FFCF02', '#00b388']
-						},
-					]
-				};
-			}else{
-				return {};
-			}
-		},
-		haveDataCoursesProgress(){
-			let data =  this.coursesProgress;
-			if(!data || !data.length){
-				return false;
-			}else{
-				if(data[0].number == 0 && data[1].number == 0 && data[2].number == 0) return false;
-				return true;
-			}
-		},
-		haveDataOverview(){
-			let data =  this.overview.map((e)=>e.number);
-			if(!this.overview.length){
-				return false;
-			}else{
-				if(data[0] == 0 && data[1] == 0 && data[2] == 0) return false;
-				return true;
-			}
-		}
-	}
-};
-</script>
-<style lang="scss" scoped>
-.chart-label {
-    position: relative;
-    &::before {
-        content: '';
-        width: 20px;
-        height: 20px;
-        display: block;
-        position: absolute;
-        bottom: -30px;
-        left: 50%;
-        transform: translateX(-50%);
-        border-radius: 100%;
-        background: #5865F2;
-    }
-
-    $colors: (#5865F2, #9D35FC, #FF539D, #FF7D7E, #FFCF02, #00b388);
-
-    @each $color in $colors {
-        $i: index($colors, $color);
-
-        &.chart-color-#{$i - 1} {
-            &::before {
-                background: $color!important;
-            }
-        }
-    }
-     @media screen and (max-width: 1380px){
-        font-size: .8rem;
-    }
-    @media screen and (max-width: 1132px){
-        font-size: .7rem;
-    }
-    @media screen and (max-width: 1009px){
-        font-size: .67rem;
-    }
-    @media screen and (max-width: 768px){
-        font-size: 1rem;
-    }
-}
-
-.chart__graph {
-    width: 40%;
-    margin: 0 auto;
-}
-
-.item__with__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 30px;
-    img {
-        margin-right: 60px;
-    }
-}
-
-.container--height {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-}
-
-.number-value{
-    font-size: 2rem;
-
-    @media screen and (max-width: 1380px){
-        font-size: 1.5rem;
-    }
-    @media screen and (max-width: 1075px){
-        font-size: 1.3rem;
-    }
-    @media screen and (max-width: 934px){
-        font-size: 1.2rem;
-    }
-    @media screen and (max-width: 952px){
-        font-size: 1rem;
-    }
-    @media screen and (max-width: 768px){
-        font-size: 1.8rem;
-    }
-    @media screen and (max-width: 672px){
-        font-size: 1.4rem;
-    }
-}
-.card__content {
-    width: 100%;
-}
-
-.card-title {
-    font-size: 1rem;
-}
-
-.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%;
-    }
-}
-</style>
+<template>
+	<div class="w-100 h-100">
+		<div class="card h-100">
+			<div class="pt-4 pl-4 pr-4">
+				<h4 class="card-title font-weight-bold mb-0">{{ title }}</h4>
+			</div>
+			<div class="container-fluid container-fluid--bu pt-2 pb-2 container--height">
+				<div class="card__content">
+					<div v-if="hasChart">
+						<div v-if="haveDataCoursesProgress">
+							<div class="chart__graph">
+								<doughnut-chart :data="chartData" />
+							</div>
+							<div class="row card-body px-0 justify-content-center">
+								<div
+									class="text-center px-0"
+									:class="!items.icon ? 'col-6 col-sm-3 col-md-3' : 'col-12'"
+									v-for="(items, index) in coursesProgress"
+									:key="items.name"
+								>
+									<div :class="{ 'item__with__icon': items.icon }">
+										<img
+											v-if="items.icon"
+											:src="items.icon"
+											style="width: 5rem"
+										/>
+										<div>
+											<span
+												v-if="items.number"
+												:class="items.color ? items.color : ''"
+												class="display-1 font-weight-bold number-value"
+											>{{ items.percentage ? items.percentage : items.number}}</span
+											>
+											<p
+												v-if="items.name"
+												:class="[
+													items.color ? items.color : '',
+													hasChart && 'chart-label',
+													hasChart && `chart-color-${index}`
+												]"
+											>
+												{{ items.name }}
+											</p>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div v-else>
+							<empty-chart :item="'status dos treinamentos'"/>
+						</div>
+					</div>
+					<div v-if="hasIcon">
+						<div v-if="haveDataOverview" class="row card-body px-0 justify-content-center">
+							<div
+								class="text-center px-0"
+								:class="!items.icon ? 'col-6 col-sm-3 col-md-3' : 'col-12'"
+								v-for="(items, index) in overview"
+								:key="items.name"
+							>
+								<div :class="{ 'item__with__icon': items.icon }">
+									<img
+										v-if="items.icon"
+										:src="items.icon"
+										style="width: 5rem"
+									/>
+									<div>
+										<span
+											v-if="items.number"
+											:class="items.color ? items.color : ''"
+											class="display-1 font-weight-bold number-value"
+										>{{ items.percentage ? items.percentage : items.number}}</span
+										>
+										<p
+											v-if="items.name"
+											:class="[
+												items.color ? items.color : '',
+												hasChart && 'chart-label',
+												hasChart && `chart-color-${index}`
+											]"
+										>
+											{{ items.name }}
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div v-else>
+							<empty-chart :item="'resumo geral'"/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import DoughnutChart from '../Chart/DoughnutChart.vue';
+import EmptyChart from '../../organismos/emptyChart/index.vue';
+export default {
+	components: {
+		DoughnutChart,
+		EmptyChart
+	},
+	props: {
+		title: {
+			type: String,
+			default:''
+		},
+		hasChart: {
+			type: Boolean,
+			default: false
+		},
+		hasIcon: {
+			type: Boolean,
+			default: false
+		},
+		overview: Array,
+		coursesProgress: Array,
+	},
+	computed:{
+		chartData(){
+			if(this.coursesProgress.length){
+				return {
+					labels: this.coursesProgress.map(item => item.name),
+					datasets: [
+						{
+							label: 'Dataset 1',
+							data: this.coursesProgress.map(item => item.number),
+							backgroundColor: ['#5865F2', '#9D35FC', '#FF539D', '#FF7D7E', '#FFCF02', '#00b388']
+						},
+					]
+				};
+			}else{
+				return {};
+			}
+		},
+		haveDataCoursesProgress(){
+			let data =  this.coursesProgress;
+			if(!data || !data.length){
+				return false;
+			}else{
+				if(data[0].number == 0 && data[1].number == 0 && data[2].number == 0) return false;
+				return true;
+			}
+		},
+		haveDataOverview(){
+			let data =  this.overview.map((e)=>e.number);
+			if(!this.overview.length){
+				return false;
+			}else{
+				if(data[0] == 0 && data[1] == 0 && data[2] == 0) return false;
+				return true;
+			}
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+.chart-label {
+    position: relative;
+    &::before {
+        content: '';
+        width: 20px;
+        height: 20px;
+        display: block;
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-radius: 100%;
+        background: #5865F2;
+    }
+
+    $colors: (#5865F2, #9D35FC, #FF539D, #FF7D7E, #FFCF02, #00b388);
+
+    @each $color in $colors {
+        $i: index($colors, $color);
+
+        &.chart-color-#{$i - 1} {
+            &::before {
+                background: $color!important;
+            }
+        }
+    }
+     @media screen and (max-width: 1380px){
+        font-size: .8rem;
+    }
+    @media screen and (max-width: 1132px){
+        font-size: .7rem;
+    }
+    @media screen and (max-width: 1009px){
+        font-size: .67rem;
+    }
+    @media screen and (max-width: 768px){
+        font-size: 1rem;
+    }
+}
+
+.chart__graph {
+    width: 40%;
+    margin: 0 auto;
+}
+
+.item__with__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 30px;
+    img {
+        margin-right: 60px;
+    }
+}
+
+.container--height {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.number-value{
+    font-size: 2rem;
+
+    @media screen and (max-width: 1380px){
+        font-size: 1.5rem;
+    }
+    @media screen and (max-width: 1075px){
+        font-size: 1.3rem;
+    }
+    @media screen and (max-width: 934px){
+        font-size: 1.2rem;
+    }
+    @media screen and (max-width: 952px){
+        font-size: 1rem;
+    }
+    @media screen and (max-width: 768px){
+        font-size: 1.8rem;
+    }
+    @media screen and (max-width: 672px){
+        font-size: 1.4rem;
+    }
+}
+.card__content {
+    width: 100%;
+}
+
+.card-title {
+    font-size: 1rem;
+}
+
+.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%;
+    }
+}
+</style>

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

@@ -1,74 +1,74 @@
-<template>
-	<div class="feature__card">
-		<div class="feature__card__image" :style="`--icon-bg-color: #${iconBgColor}`">
-			<img :src="icon" :alt="title">
-		</div>
-		<div class="feature__card__title">
-			<p>{{ title }}</p>
-		</div>
-		<div class="feature__card__description">
-			<span>{{ description }}</span>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'FeatureBusinessCard',
-	props: {
-		icon: String,
-		iconBgColor: {
-			type: String,
-			default: '5983FE'
-		},
-		title: String,
-		description: String,
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-    .feature__card {
-        background: #fff;
-        padding: 20px;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        box-shadow: 5px 5px 50px 2px #E9EEF2;
-        border-radius: 10px;
-        width: 100%;
-        min-width: 300px;
-        margin: 0 auto;
-        transition: transform 0.25s, box-shadow 0.5s;
-        &__image {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 45px;
-            height: 45px;
-            border-radius: 10px;
-            background: var(--icon-bg-color);
-            img {
-                display: block;
-                width: 25px;
-            }
-        }
-        &__title {
-            padding: 10px 0;
-            p {
-                font-size: 1.5625rem;
-                font-weight: 600;
-                margin-bottom: 0;
-            }
-        }
-        &__description {
-            text-align: left;
-            font-weight: 400;
-            font-size: 0.875rem;
-        }
-        &:hover {
-            transform: translateY(-10px);
-            box-shadow: 7px 15px 20px rgba(0, 0, 0, 0.05);
-        }
-    }
-</style>
+<template>
+	<div class="feature__card">
+		<div class="feature__card__image" :style="`--icon-bg-color: #${iconBgColor}`">
+			<img :src="icon" :alt="title">
+		</div>
+		<div class="feature__card__title">
+			<p>{{ title }}</p>
+		</div>
+		<div class="feature__card__description">
+			<span>{{ description }}</span>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'FeatureBusinessCard',
+	props: {
+		icon: String,
+		iconBgColor: {
+			type: String,
+			default: '5983FE'
+		},
+		title: String,
+		description: String,
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+    .feature__card {
+        background: #fff;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        box-shadow: 5px 5px 50px 2px #E9EEF2;
+        border-radius: 10px;
+        width: 100%;
+        min-width: 300px;
+        margin: 0 auto;
+        transition: transform 0.25s, box-shadow 0.5s;
+        &__image {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 45px;
+            height: 45px;
+            border-radius: 10px;
+            background: var(--icon-bg-color);
+            img {
+                display: block;
+                width: 25px;
+            }
+        }
+        &__title {
+            padding: 10px 0;
+            p {
+                font-size: 1.5625rem;
+                font-weight: 600;
+                margin-bottom: 0;
+            }
+        }
+        &__description {
+            text-align: left;
+            font-weight: 400;
+            font-size: 0.875rem;
+        }
+        &:hover {
+            transform: translateY(-10px);
+            box-shadow: 7px 15px 20px rgba(0, 0, 0, 0.05);
+        }
+    }
+</style>