@burh/nuxt-core 1.0.243 → 1.0.244

package/components/burh-ds/Curriculum/UserCurriculum/UserCvLeftSide.vue

@@ -1,436 +1,437 @@
-<template>
-	<div class="bg-white content-left">
-		<div class="profile w-100 text-center">
-			<div class="avatar">
-				<img
-					v-if="userData.urlAvatar"
-					:src="userData.urlAvatar"
-					:alt="userData.name"
-				/>
-				<div v-else class="no-image">
-					{{ userData.name }}
-				</div>
-			</div>
-
-			<h5 class="mb-0 text-wrap" :class="{ 'mt-5': !userData.urlAvatar }" v-html="highlightText(search, `${userData.name} ${userData.last_name}`)"></h5>
-
-			<p class="user-info" v-if="userData.user_experience.length > 0" v-html="highlightText(search, `${userData.user_experience[0].job_title} em ${userData.user_experience[0].company}`)"></p>
-
-			<span v-if="userData.user_address">
-				<i class="fas fa-map-marker-alt"></i>
-				{{ userData.user_address.city_name }} -
-				{{ userData.user_address.region_code }}
-			</span>
-			<br>
-			<span>Data de atualização: {{ $moment(userData.updated_at).format('DD/MM/YYYY H:mm')}}</span>
-		</div>
-		
-		<div
-			v-show="userData.user_desired_job.length > 0"
-			class="desidered title-block mt-3 ml-4"
-		>
-			<h6 class="mb-0">Cargos desejados</h6>
-			<div class="line"></div>
-
-			<p
-				v-for="(des, index) in userData.user_desired_job"
-				:key="`skill-${index}`"
-				class="ml-1 mt-1 mb-0 text-capitalize"
-				v-html="highlightText(search, des.occupation)"
-			></p>
-		</div>
-
-		<div
-			v-show="userData.user_language.length > 0"
-			class="languages title-block mt-3 ml-4"
-		>
-			<h6 class="mb-0">Idiomas</h6>
-			<div class="line"></div>
-
-			<p
-				class="mb-1 text-capitalize"
-				v-for="(lan, index) in userData.user_language"
-				:key="index"
-				v-html="highlightText(search, `${lan.language[0].name} ${languageLevel(lan.level)}`)"
-			></p>
-		</div>
-
-		<div
-			v-show="userData.user_skill.length > 0"
-			class="skills title-block ml-4"
-		>
-			<h6 class="mb-0">Habilidades</h6>
-			<div class="line"></div>
-
-			<p
-				v-for="(skill, index) in userData.user_skill"
-				:key="`skill-${index}`"
-				class="ml-1 mt-1 mb-0 text-capitalize"
-				v-html="highlightText(search, skill.skill_word)"
-			></p>
-		</div>
-
-		<div
-			class="deficiency title-block mt-3 ml-4"
-			v-if="userData.user_deficiency"
-		>
-			<div class="d-flex align-items-center">
-				<i class="fas fa-wheelchair"></i>
-				<h6 class="mb-0 ml-2">Deficiência</h6>
-			</div>
-			<div class="line"></div>
-			<p>
-				{{ userData.user_deficiency.deficiency_id | allDeficiencies }} -
-				{{ userData.user_deficiency.cid }}
-			</p>
-
-			<p v-show="userData.user_deficiency.appliance">
-				Acessório: {{ userData.user_deficiency.appliance }}
-			</p>
-
-			<p v-show="userData.user_deficiency.apparatus">
-				Necessidade: {{ userData.user_deficiency.apparatus }}
-			</p>
-
-			<p v-show="userData.user_deficiency.course">
-				Curso: {{ userData.user_deficiency.course }}
-			</p>
-
-			<p v-show="userData.user_deficiency.note">
-				Anotações: {{ userData.user_deficiency.note }}
-			</p>
-
-			<p v-show="userData.user_deficiency.transport === 1">
-				Utiliza transporte coletivo
-			</p>
-
-			<p v-show="userData.user_deficiency.vehicle === 1">
-				Possuí veículo adaptado
-			</p>
-
-			<p v-show="userData.user_deficiency.escort === 1">
-				Precisa de acompanhante
-			</p>
-		</div>
-
-		<div class="socials text-center mt-5">
-			<a
-				:href="baseUrl + '/' + userData.slug.slug"
-				class="text-center"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<img
-					class="no-social"
-					src="../../../../assets/images/burhCv.svg"
-					alt="Burh"
-				/>
-			</a>
-			<a
-				v-show="userData.user_complementary_information.facebook_url"
-				:href="userData.user_complementary_information.facebook_url"
-				target="_blank"
-				class="ml-2"
-				rel="noopener noreferrer"
-			>
-				<img
-					class="no-social"
-					src="../../../../assets/images/facebookCv.svg"
-					alt="Facebook"
-				/>
-			</a>
-			<a
-				v-show="userData.user_complementary_information.linkedin_url"
-				:href="userData.user_complementary_information.linkedin_url"
-				target="_blank"
-				class="ml-2"
-				rel="noopener noreferrer"
-			>
-				<img
-					class="no-social"
-					src="../../../../assets/images/linkedinCv.svg"
-					alt="Linkdin"
-				/>
-			</a>
-			<a
-				v-show="userData.user_complementary_information.website"
-				:href="userData.user_complementary_information.website"
-				class="text-center ml-2"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<img
-					class="no-social"
-					src="../../../../assets/images/webCv.svg"
-					alt="Web"
-				/>
-			</a>
-		</div>
-
-		<div class="burh-code text-center mt-4">
-			<vue-qrcode
-				:value="baseUrl + '/' + userData.slug.slug"
-				:options="{ width: 98, height: 98 }"
-				class="border qr-code"
-			></vue-qrcode>
-			<p class="mb-0">Código BURH</p>
-			<span class="qr-id">{{ userData.id }}</span>
-		</div>
-	</div>
-</template>
-
-<script>
-import getPrefixes from '~/util/getPrefixes.js';
-import VueQrcode from '@chenfengyuan/vue-qrcode';
-
-export default {
-	name: 'user-cv-left-side',
-	components: {
-		VueQrcode
-	},
-	props: {
-		userData: Object,
-		baseUrl: String,
-		search: {
-			type: String,
-			default: ''
-		}
-	},
-	methods: {
-		highlightText(search, text) {
-			if (search.length < 2) return text;
-
-			const regex = new RegExp(search.toLowerCase(), 'gmi');
-			return String(text || '').replace(regex, `<span class="search-highlight">${search}</span>`);
-		},
-		getTime(
-			{ start_year = null, end_year = null, start_month, end_month },
-			textHappening = 'Cursando'
-		) {
-			const isHappening = !end_month && !end_year;
-
-			if (isHappening) {
-				return textHappening;
-			}
-
-			const dateInitial = this.$moment(
-				['1', start_month.toString(), start_year.toString()],
-				'DD/MM/YYYY'
-			);
-			const dateDone = this.$moment(
-				['1', end_month.toString(), end_year.toString()],
-				'DD/MM/YYYY'
-			);
-			const diffDuration = this.$moment.duration(
-				dateDone.diff(dateInitial)
-			);
-			const years = diffDuration.years();
-			const months = diffDuration.months();
-
-			if (years) {
-				return years > 1 ? `(${years} anos)` : `(${years} ano)`;
-			}
-
-			return months > 1
-				? `(${months} meses)`
-				: months == 1
-					? `(${months} mês)`
-					: '';
-		},
-		languageLevel(level) {
-			switch (parseInt(level)) {
-			case 1:
-				return 'Iniciante';
-			case 2:
-				return 'Elementar';
-			case 3:
-				return 'Pré-intermediário';
-			case 4:
-				return 'Intermediário';
-			case 5:
-				return 'Intermediário Superior';
-			case 6:
-				return 'Avançado';
-			case 7:
-				return 'Fluente';
-			default:
-				return '';
-			}
-		},
-		treatPhone(phone) {
-			if (phone) {
-				if (phone == '0' || phone.length < 9 || !phone) {
-					return 'não cadastrado';
-				}
-			}
-
-			return phone;
-		},
-		treatCellphone(cellphone) {
-			if (cellphone) {
-				if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
-					return 'não cadastrado';
-				}
-			}
-
-			return cellphone;
-		},
-		handleGetPrefixes(name = '') {
-			return getPrefixes(name);
-		},
-		treatEndDate(end_month, end_year) {
-			if (end_month && end_year) {
-				return `${end_month}/${end_year}`;
-			}
-			return '';
-		}
-	},
-	filters: {
-		allDeficiencies(id) {
-			const typeDeficiency = {
-				1: 'Deficiência Física',
-				2: 'Deficiência Visual',
-				3: 'Deficiência Mental',
-				4: 'Deficiência Auditiva',
-				5: 'Deficiência Fonológica',
-				6: 'Deficiência Múltipla'
-			};
-
-			return typeDeficiency[id] || '-';
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
-
-/deep/ .search-highlight {
-	background: rgb(255, 252, 61);
-	color: #000;
-}
-
-.qr-id {
-    color: #32325d !important;
-}
-
-.bg-light--darken {
-    background-color: $gray-100 !important;
-}
-
-.profile {
-    .avatar {
-        img {
-            width: 178.14px;
-            height: 163px;
-            border-radius: 50%;
-            top: 75%;
-        }
-
-        .no-image {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            position: absolute;
-            background-color: #adb5bd;
-            width: 163px;
-            height: 163px;
-            top: 120;
-            border-radius: 50%;
-            margin-bottom: 20px;
-        }
-    }
-
-    .user-info {
-        padding: 0 20px;
-        margin-top: 5px;
-    }
-
-    p {
-        font-size: 13px;
-        font-weight: 400;
-        color: #62778c;
-        line-height: 0.85rem;
-        margin-bottom: 2rem;
-    }
-
-    span {
-        font-size: 14px;
-        color: #8da2b5;
-    }
-}
-
-.skills {
-    margin-top: 2.3rem;
-    margin-bottom: 2.3rem;
-}
-
-.desidered {
-    margin-bottom: 2.3rem;
-}
-
-.deficiency {
-    p {
-        margin-top: 0.25rem;
-        margin-bottom: 0;
-        text-transform: capitalize;
-    }
-}
-
-.languages {
-    margin-bottom: 2.3rem;
-}
-
-.title-block {
-    .line {
-        width: 235px;
-        height: 0px;
-        border: 1px solid #ececec5c;
-        margin-bottom: 0.75rem;
-    }
-
-    p {
-        font-size: 13px;
-    }
-}
-
-.burh-code {
-    .qr-code {
-        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-        border-radius: 10px;
-    }
-
-    p {
-        font-size: 8px;
-        font-weight: bold;
-    }
-
-    span {
-        font-size: 12px;
-        font-weight: bold;
-    }
-}
-
-.socials {
-    .no-social {
-        height: 1.39rem;
-    }
-}
-
-.cv-left {
-    word-break: initial;
-}
-
-.disable-none {
-    user-select: none;
-}
-
-.content-left {
-    width: 25%;
-    height: auto;
-    padding: 0 20px;
-    word-break: break-word !important;
-    color: #62778c !important;
-}
-</style>
+<template>
+	<div class="bg-white content-left">
+		<div class="profile w-100 text-center">
+			<div class="avatar">
+				<img
+					v-if="userData.urlAvatar"
+					:src="userData.urlAvatar"
+					:alt="userData.name"
+				/>
+				<div v-else class="no-image">
+					{{ userData.name }}
+				</div>
+			</div>
+
+			<h5 class="mb-0 text-wrap" :class="{ 'mt-5': !userData.urlAvatar }" v-html="highlightText(search, `${userData.name} ${userData.last_name}`)"></h5>
+
+			<p class="user-info" v-if="userData.user_experience.length > 0" v-html="highlightText(search, `${userData.user_experience[0].job_title} em ${userData.user_experience[0].company}`)"></p>
+
+			<span v-if="userData.user_address">
+				<i class="fas fa-map-marker-alt"></i>
+				{{ userData.user_address.city_name }} -
+				{{ userData.user_address.region_code }}
+			</span>
+			<br>
+			<span>Data de atualização: {{ $moment(userData.updated_at).format('DD/MM/YYYY H:mm')}}</span>
+		</div>
+
+		<div
+			v-show="userData.user_desired_job.length > 0"
+			class="desidered title-block mt-3 ml-4"
+		>
+			<h6 class="mb-0">Cargos desejados</h6>
+			<div class="line"></div>
+
+			<p
+				v-for="(des, index) in userData.user_desired_job"
+				:key="`skill-${index}`"
+				class="ml-1 mt-1 mb-0 text-capitalize"
+				v-html="highlightText(search, des.occupation)"
+			></p>
+		</div>
+
+		<div
+			v-show="userData.user_language.length > 0"
+			class="languages title-block mt-3 ml-4"
+		>
+			<h6 class="mb-0">Idiomas</h6>
+			<div class="line"></div>
+
+			<p
+				class="mb-1 text-capitalize"
+				v-for="(lan, index) in userData.user_language"
+				:key="index"
+				v-html="highlightText(search, `${lan.language[0].name} ${languageLevel(lan.level)}`)"
+			></p>
+		</div>
+
+		<div
+			v-show="userData.user_skill.length > 0"
+			class="skills title-block ml-4"
+		>
+			<h6 class="mb-0">Habilidades</h6>
+			<div class="line"></div>
+
+			<p
+				v-for="(skill, index) in userData.user_skill"
+				:key="`skill-${index}`"
+				class="ml-1 mt-1 mb-0 text-capitalize"
+				v-html="highlightText(search, skill.skill_word)"
+			></p>
+		</div>
+
+		<div
+			class="deficiency title-block mt-3 ml-4"
+			v-if="userData.user_deficiency"
+		>
+			<div class="d-flex align-items-center">
+				<i class="fas fa-wheelchair"></i>
+				<h6 class="mb-0 ml-2">Deficiência</h6>
+			</div>
+			<div class="line"></div>
+			<p>
+				{{ userData.user_deficiency.deficiency_id | allDeficiencies }} -
+				{{ userData.user_deficiency.cid }}
+			</p>
+
+			<p v-show="userData.user_deficiency.appliance">
+				Acessório: {{ userData.user_deficiency.appliance }}
+			</p>
+
+			<p v-show="userData.user_deficiency.apparatus">
+				Necessidade: {{ userData.user_deficiency.apparatus }}
+			</p>
+
+			<p v-show="userData.user_deficiency.course">
+				Curso: {{ userData.user_deficiency.course }}
+			</p>
+
+			<p v-show="userData.user_deficiency.note">
+				Anotações: {{ userData.user_deficiency.note }}
+			</p>
+
+			<p v-show="userData.user_deficiency.transport === 1">
+				Utiliza transporte coletivo
+			</p>
+
+			<p v-show="userData.user_deficiency.vehicle === 1">
+				Possuí veículo adaptado
+			</p>
+
+			<p v-show="userData.user_deficiency.escort === 1">
+				Precisa de acompanhante
+			</p>
+		</div>
+
+		<div class="socials text-center mt-5">
+			<a
+				:href="baseUrl + '/' + userData.slug.slug"
+				class="text-center"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<img
+					class="no-social"
+					src="../../../../assets/images/burhCv.svg"
+					alt="Burh"
+				/>
+			</a>
+			<a
+				v-show="userData.user_complementary_information.facebook_url"
+				:href="userData.user_complementary_information.facebook_url"
+				target="_blank"
+				class="ml-2"
+				rel="noopener noreferrer"
+			>
+				<img
+					class="no-social"
+					src="../../../../assets/images/facebookCv.svg"
+					alt="Facebook"
+				/>
+			</a>
+			<a
+				v-show="userData.user_complementary_information.linkedin_url"
+				:href="userData.user_complementary_information.linkedin_url"
+				target="_blank"
+				class="ml-2"
+				rel="noopener noreferrer"
+			>
+				<img
+					class="no-social"
+					src="../../../../assets/images/linkedinCv.svg"
+					alt="Linkdin"
+				/>
+			</a>
+			<a
+				v-show="userData.user_complementary_information.website"
+				:href="userData.user_complementary_information.website"
+				class="text-center ml-2"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<img
+					class="no-social"
+					src="../../../../assets/images/webCv.svg"
+					alt="Web"
+				/>
+			</a>
+		</div>
+
+		<div class="burh-code text-center mt-4">
+			<vue-qrcode
+				:value="baseUrl + '/' + userData.slug.slug"
+				:options="{ width: 98, height: 98 }"
+				class="border qr-code"
+			></vue-qrcode>
+			<p class="mb-0">Código BURH</p>
+			<span class="qr-id">{{ userData.id }}</span>
+		</div>
+	</div>
+</template>
+
+<script>
+import getPrefixes from '~/util/getPrefixes.js';
+import VueQrcode from '@chenfengyuan/vue-qrcode';
+
+export default {
+	name: 'user-cv-left-side',
+	components: {
+		VueQrcode
+	},
+	props: {
+		userData: Object,
+		baseUrl: String,
+		search: {
+			type: String,
+			default: ''
+		}
+	},
+	methods: {
+		highlightText(search, text) {
+			if (search.length < 2) return text;
+
+			const regex = new RegExp(search.toLowerCase(), 'gmi');
+			return String(text || '').replace(regex, `<span class="search-highlight">${search}</span>`);
+		},
+		getTime(
+			{ start_year = null, end_year = null, start_month, end_month },
+			textHappening = 'Cursando'
+		) {
+			const isHappening = !end_month && !end_year;
+
+			if (isHappening) {
+				return textHappening;
+			}
+
+			const dateInitial = this.$moment(
+				['1', start_month.toString(), start_year.toString()],
+				'DD/MM/YYYY'
+			);
+			const dateDone = this.$moment(
+				['1', end_month.toString(), end_year.toString()],
+				'DD/MM/YYYY'
+			);
+			const diffDuration = this.$moment.duration(
+				dateDone.diff(dateInitial)
+			);
+			const years = diffDuration.years();
+			const months = diffDuration.months();
+
+			if (years) {
+				return years > 1 ? `(${years} anos)` : `(${years} ano)`;
+			}
+
+			return months > 1
+				? `(${months} meses)`
+				: months == 1
+					? `(${months} mês)`
+					: '';
+		},
+		languageLevel(level) {
+			switch (parseInt(level)) {
+			case 1:
+				return 'Iniciante';
+			case 2:
+				return 'Elementar';
+			case 3:
+				return 'Pré-intermediário';
+			case 4:
+				return 'Intermediário';
+			case 5:
+				return 'Intermediário Superior';
+			case 6:
+				return 'Avançado';
+			case 7:
+				return 'Fluente';
+			default:
+				return '';
+			}
+		},
+		treatPhone(phone) {
+			if (phone) {
+				if (phone == '0' || phone.length < 9 || !phone) {
+					return 'não cadastrado';
+				}
+			}
+
+			return phone;
+		},
+		treatCellphone(cellphone) {
+			if (cellphone) {
+				if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
+					return 'não cadastrado';
+				}
+			}
+
+			return cellphone;
+		},
+		handleGetPrefixes(name = '') {
+			return getPrefixes(name);
+		},
+		treatEndDate(end_month, end_year) {
+			if (end_month && end_year) {
+				return `${end_month}/${end_year}`;
+			}
+			return '';
+		}
+	},
+	filters: {
+		allDeficiencies(id) {
+			const typeDeficiency = {
+				1: 'Deficiência Física',
+				2: 'Deficiência Visual',
+				3: 'Deficiência Mental',
+				4: 'Deficiência Auditiva',
+				5: 'Deficiência Fonológica',
+				6: 'Deficiência Múltipla'
+			};
+
+			return typeDeficiency[id] || '-';
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+/deep/ .search-highlight {
+	background: rgb(255, 252, 61);
+	color: #000;
+}
+
+.qr-id {
+    color: #32325d !important;
+}
+
+.bg-light--darken {
+    background-color: $gray-100 !important;
+}
+
+.profile {
+    .avatar {
+        background: transparent!important;
+        img {
+            width: 178.14px;
+            height: 163px;
+            border-radius: 50%;
+            top: 75%;
+        }
+
+        .no-image {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            position: absolute;
+            background-color: #adb5bd;
+            width: 163px;
+            height: 163px;
+            top: 120;
+            border-radius: 50%;
+            margin-bottom: 20px;
+        }
+    }
+
+    .user-info {
+        padding: 0 20px;
+        margin-top: 5px;
+    }
+
+    p {
+        font-size: 13px;
+        font-weight: 400;
+        color: #62778c;
+        line-height: 0.85rem;
+        margin-bottom: 2rem;
+    }
+
+    span {
+        font-size: 14px;
+        color: #8da2b5;
+    }
+}
+
+.skills {
+    margin-top: 2.3rem;
+    margin-bottom: 2.3rem;
+}
+
+.desidered {
+    margin-bottom: 2.3rem;
+}
+
+.deficiency {
+    p {
+        margin-top: 0.25rem;
+        margin-bottom: 0;
+        text-transform: capitalize;
+    }
+}
+
+.languages {
+    margin-bottom: 2.3rem;
+}
+
+.title-block {
+    .line {
+        width: 235px;
+        height: 0px;
+        border: 1px solid #ececec5c;
+        margin-bottom: 0.75rem;
+    }
+
+    p {
+        font-size: 13px;
+    }
+}
+
+.burh-code {
+    .qr-code {
+        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+        border-radius: 10px;
+    }
+
+    p {
+        font-size: 8px;
+        font-weight: bold;
+    }
+
+    span {
+        font-size: 12px;
+        font-weight: bold;
+    }
+}
+
+.socials {
+    .no-social {
+        height: 1.39rem;
+    }
+}
+
+.cv-left {
+    word-break: initial;
+}
+
+.disable-none {
+    user-select: none;
+}
+
+.content-left {
+    width: 25%;
+    height: auto;
+    padding: 0 20px;
+    word-break: break-word !important;
+    color: #62778c !important;
+}
+</style>

package/components/burh-ds/Curriculum/UserCurriculum/index.vue

@@ -2,13 +2,13 @@
 	<el-dialog
 		:visible.sync="isActive"
 		width="80%"
-		custom-class="position-relative"
+		:custom-class="`position-relative user__preview__container ${isLoading ? 'loading' : ''}`"
 		@close="$emit('close')"
 		class="test-radius"
 	>
 		<template>
 			<div class="row d-flex justify-content-between mx-0 user-pdf">
-				<img v-show="coverPhoto" :src="coverPhoto" alt="" />
+				<img v-if="!isLoading" v-show="coverPhoto" :src="coverPhoto" alt="" />
 				<div v-show="!coverPhoto" class="no-cover-photo"></div>
 				<slot name="content"></slot>
 			</div>
@@ -72,7 +72,8 @@ export default {
 			showTools: false,
 			coverPhoto: this.cover,
 			hasPrevUser: false,
-			hasNextUser: false
+			hasNextUser: false,
+			isLoading: false,
 		};
 	},
 	watch: {
@@ -91,12 +92,12 @@ export default {
 	},
 	methods: {
 		preUser() {
-			if (this.currentUserIndex <= 0) return;
+			if (this.currentUserIndex <= 0 || this.isLoading) return;
 
 			this.$emit('prev-user');
 		},
 		nextUser() {
-			if (this.currentUserIndex >= (this.maxUsers - 1)) return;
+			if (this.currentUserIndex >= (this.maxUsers - 1) || this.isLoading) return;
 
 			this.$emit('next-user');
 		},
@@ -112,6 +113,8 @@ export default {
 			}
 		},
 		handleArrowsActive() {
+			this.isLoading = true;
+
 			if (this.currentUserIndex <= 0) {
 				this.hasPrevUser = false;
 				this.hasNextUser = true;
@@ -125,6 +128,8 @@ export default {
 			if (this.currentUserIndex === (this.maxUsers - 1)) {
 				this.hasNextUser = false;
 			}
+
+			setTimeout(() => this.isLoading = false, 1000);
 		}
 	},
 	beforeMount() {
@@ -170,6 +175,7 @@ export default {
     width: 100%;
     height: 100vh;
     z-index: -1;
+    pointer-events: none;
     > button {
         width: 42px;
         height: 42px;
@@ -180,6 +186,7 @@ export default {
         background: transparent;
         font-size: 2rem;
         color: $primary;
+        pointer-events: all;
     }
 }
 
@@ -228,4 +235,11 @@ export default {
         height: 150px;
     }
 }
+
+/deep/ .user__preview__container {
+    transition: opacity 0.2s;
+    &.loading {
+        opacity: 0;
+    }
+}
 </style>

package/package.json

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