@burh/nuxt-core 1.0.503 → 1.0.505

package/components/burh-ds/Modals/PlanModal.vue

@@ -1,327 +1,327 @@
-<template>
-	<modal
-		:show.sync="isActive"
-		:size="'lg'"
-		class="no--padding"
-		@close="$emit('close')"
-	>
-		<template>
-			<div class="plan">
-				<div class="cover"/>
-				<div class="plan__modal">
-					<section class="plan__information">
-						<h4>
-							Você vai amar o Plano Empresas! <br />
-							<span>Dê um Upgrade no seu R&S</span>
-						</h4>
-						<p>
-							A Tecnologia Burh e suas Soluções oferecem um
-							ambiente único de Recrutamento e Seleção.
-							Treinamentos e Página de Carreiras para sua empresa.
-						</p>
-						<h4 class="plan__information__title">Soluções Disponíveis</h4>
-						<div class="plan__information__solutions">
-							<ul>
-								<li><i class="fas fa-check"></i>Acessos Ilimitados</li>
-								<li><i class="fas fa-check"></i>Vagas Ilimitadas</li>
-								<li><i class="fas fa-check"></i>Testes Ilimitados</li>
-								<li><i class="fas fa-check"></i>Página Carreiras</li>
-								<li><i class="fas fa-check"></i>Portal do RH</li>
-								<li><i class="fas fa-check"></i>Descontos Exclusivos</li>
-							</ul>
-							<ul>
-								<li><i class="fas fa-check"></i>Filtros Avançados</li>
-								<li><i class="fas fa-check"></i>Robô de Triagem</li>
-								<li><i class="fas fa-check"></i>Plataforma EAD</li>
-								<li><i class="fas fa-check"></i>Anotações e Laudo</li>
-								<li><i class="fas fa-check"></i>Customer Success</li>
-								<li><i class="fas fa-check"></i>E muito mais!</li>
-							</ul>
-						</div>
-					</section>
-					<section class="plan__contact">
-						<img src="/img/diamond-1.svg" class="diamond-svg">
-						<p>
-							Preencha as informações abaixo e nosso time entrará
-							em contato.
-						</p>
-
-						<validation-observer ref="sendTest">
-							<section>
-								<validation-provider
-									tag="div"
-									name="Nome"
-									rules="required"
-									v-slot="{ errors }"
-								>
-									<base-input
-										type="text"
-										v-model="name"
-										:error="errors[0]"
-										:valid="errors.length ? true : false"
-										placeholder="Nome Completo"
-									/>
-								</validation-provider>
-
-								<validation-provider
-									tag="div"
-									name="Telefone"
-									rules="required"
-									v-slot="{ errors }"
-								>
-									<base-input
-										type="text"
-										v-model="phone"
-										v-on:input="maskCellphone($event)"
-										id="phone"
-										:error="errors[0]"
-										:valid="errors.length ? true : false"
-										placeholder="Telefone"
-									/>
-								</validation-provider>
-
-								<base-button
-									type="primary"
-									class="w-100 m-auto"
-									@click.native="sendContact()"
-								>
-									Solicitar Contato
-								</base-button>
-							</section>
-						</validation-observer>
-					</section>
-				</div>
-			</div>
-
-			<span class="tool tool-close" @click="$emit('close')">
-				Fechar
-				<i class="fas fa-times text-white ml-1"/>
-			</span>
-		</template>
-	</modal>
-</template>
-
-<script>
-export default {
-	name: 'plan-modal',
-	components: {},
-	props: {
-		isActive: Boolean,
-		cover: {
-			type: String,
-			default: '/img/new_plans_cover.png'
-		}
-	},
-	data() {
-		return {
-			name: '',
-			phone: ''
-		};
-	},
-	methods: {
-		async sendContact() {
-			const pass = await this.$refs.sendTest.validate();
-			if (!pass) {
-				return;
-			}
-
-			this.phone = this.phone.replace(/\D+/g, '');
-
-			this.$emit('send-contact', this.name, this.phone);
-			this.$emit('close');
-		},
-		maskCellphone(v, onlyMasking = false) {
-			if (v == null || v == '') {
-				return;
-			}
-			var mask = v.replace(/\D/g, '');
-			mask = mask.replace(/^0/, '');
-			if (mask.length > 10) {
-				mask = mask.replace(/^(\d\d)(\d{5})(\d{4}).*/, '($1) $2-$3');
-			} else if (mask.length > 5) {
-				mask = mask.replace(/^(\d\d)(\d{4})(\d{0,4}).*/, '($1) $2-$3');
-			} else if (mask.length > 2) {
-				mask = mask.replace(/^(\d\d)(\d{0,5})/, '($1) $2');
-			} else {
-				mask = mask.replace(/^(\d*)/, '($1');
-			}
-
-			if (!onlyMasking) {
-				this.phone = mask;
-			} else {
-				return mask;
-			}
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
-
-.no--padding {
-    /deep/ .modal-body {
-        padding: 0 !important;
-    }
-}
-
-/deep/ .modal-body {
-    margin-bottom: 2rem;
-}
-.plan {
-    background: #fff;
-    border-radius: 0.4375rem;
-    .cover {
-        height: 16rem;
-        position: relative;
-        border-top-left-radius: 0.4375rem;
-        border-top-right-radius: 0.4375rem;
-		background-image: url('/img/new_plans_cover.png');
-		background-repeat: no-repeat;
-		background-position: top;
-		background-size: cover;
-		&::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 100%;
-            width: 100%;
-            border-top-right-radius: 0.4375rem;
-            border-top-left-radius: 0.4375rem;
-            background: linear-gradient(90deg, rgba(88, 101, 242, 0.5) 0%, rgba(88, 101, 242, 0.5) 100%);
-        }
-		@media (max-width: 576px) {
-			display: none;
-		}
-    }
-    &__modal {
-        display: flex;
-        justify-content: space-between;
-
-        margin-top: 2.5rem;
-        padding: 0 2rem;
-
-        @media (max-width: 960px) {
-
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-        }
-    }
-
-    &__information {
-        width: 53%;
-        word-break: break-word !important;
-
-		@media (max-width: 960px) {
-			width: 75%;
-		}
-
-        &--img {
-            display: flex;
-            align-items: center;
-            flex-direction: column;
-            margin-bottom: 5px;
-            user-select: none;
-            img {
-                display: block;
-                width: 80px;
-            }
-        }
-
-        h4 {
-            font-style: normal;
-            font-weight: 700;
-            font-size: 1.25rem;
-            line-height: 1.875rem;
-
-            color: #1d364b;
-			span {
-				font-weight: 500;
-			}
-        }
-
-        p {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 21px;
-
-            color: #62778c;
-        }
-		&__title {
-			font-weight: 500 !important;
-			font-size: 15px !important;
-		}
-		&__solutions {
-			font-size: 14px;
-			display: flex;
-			justify-content: space-between;
-			ul {
-				list-style: none;
-				padding: 0;
-				margin: 0;
-				/deep/.fa-check {
-					margin-right: 10px;
-					color: #5865f2;
-				}
-			}
-		}
-    }
-
-    &__contact {
-        width: 47%;
-        background: #eff5fd;
-        border-radius: 5px;
-        padding: 1rem 1.5rem 1rem;
-        margin-left: 2rem;
-
-		@media (max-width: 960px) {
-			margin-top: 1rem;
-			width: 75%;
-			margin-left: 0;
-		}
-
-		.diamond-svg{
-			position: relative;
-			top: -35px;
-			right: -82px;
-
-			@media (max-width: 992px) {
-				display: none;
-			}
-		}
-        p {
-            word-break: break-word !important;
-
-            font-style: normal;
-            font-weight: 600;
-            font-size: 16px;
-            line-height: 22px;
-
-            color: #1d364b;
-        }
-
-        section {
-            input {
-                margin: 0.4rem 0;
-                padding: 0.75rem;
-
-                width: 100%;
-                height: 2rem;
-
-                background: #ffffff;
-                border-radius: 3px;
-                border: 0;
-                outline: 0;
-            }
-        }
-    }
-}
-
-::-webkit-input-placeholder {
-    color: #c0c0c0;
-}
-</style>
+<template>
+	<modal
+		:show.sync="isActive"
+		:size="'lg'"
+		class="no--padding"
+		@close="$emit('close')"
+	>
+		<template>
+			<div class="plan">
+				<div class="cover"/>
+				<div class="plan__modal">
+					<section class="plan__information">
+						<h4>
+							Você vai amar o Plano Empresas! <br />
+							<span>Dê um Upgrade no seu R&S</span>
+						</h4>
+						<p>
+							A Tecnologia Burh e suas Soluções oferecem um
+							ambiente único de Recrutamento e Seleção.
+							Treinamentos e Página de Carreiras para sua empresa.
+						</p>
+						<h4 class="plan__information__title">Soluções Disponíveis</h4>
+						<div class="plan__information__solutions">
+							<ul>
+								<li><i class="fas fa-check"></i>Acessos Ilimitados</li>
+								<li><i class="fas fa-check"></i>Vagas Ilimitadas</li>
+								<li><i class="fas fa-check"></i>Testes Ilimitados</li>
+								<li><i class="fas fa-check"></i>Página Carreiras</li>
+								<li><i class="fas fa-check"></i>Portal do RH</li>
+								<li><i class="fas fa-check"></i>Descontos Exclusivos</li>
+							</ul>
+							<ul>
+								<li><i class="fas fa-check"></i>Filtros Avançados</li>
+								<li><i class="fas fa-check"></i>Robô de Triagem</li>
+								<li><i class="fas fa-check"></i>Plataforma EAD</li>
+								<li><i class="fas fa-check"></i>Anotações e Laudo</li>
+								<li><i class="fas fa-check"></i>Customer Success</li>
+								<li><i class="fas fa-check"></i>E muito mais!</li>
+							</ul>
+						</div>
+					</section>
+					<section class="plan__contact">
+						<img src="/img/diamond-1.svg" class="diamond-svg">
+						<p>
+							Preencha as informações abaixo e nosso time entrará
+							em contato.
+						</p>
+
+						<validation-observer ref="sendTest">
+							<section>
+								<validation-provider
+									tag="div"
+									name="Nome"
+									rules="required"
+									v-slot="{ errors }"
+								>
+									<base-input
+										type="text"
+										v-model="name"
+										:error="errors[0]"
+										:valid="errors.length ? true : false"
+										placeholder="Nome Completo"
+									/>
+								</validation-provider>
+
+								<validation-provider
+									tag="div"
+									name="Telefone"
+									rules="required"
+									v-slot="{ errors }"
+								>
+									<base-input
+										type="text"
+										v-model="phone"
+										v-on:input="maskCellphone($event)"
+										id="phone"
+										:error="errors[0]"
+										:valid="errors.length ? true : false"
+										placeholder="Telefone"
+									/>
+								</validation-provider>
+
+								<base-button
+									type="primary"
+									class="w-100 m-auto"
+									@click.native="sendContact()"
+								>
+									Solicitar Contato
+								</base-button>
+							</section>
+						</validation-observer>
+					</section>
+				</div>
+			</div>
+
+			<span class="tool tool-close" @click="$emit('close')">
+				Fechar
+				<i class="fas fa-times text-white ml-1"/>
+			</span>
+		</template>
+	</modal>
+</template>
+
+<script>
+export default {
+	name: 'plan-modal',
+	components: {},
+	props: {
+		isActive: Boolean,
+		cover: {
+			type: String,
+			default: '/img/new_plans_cover.png'
+		}
+	},
+	data() {
+		return {
+			name: '',
+			phone: ''
+		};
+	},
+	methods: {
+		async sendContact() {
+			const pass = await this.$refs.sendTest.validate();
+			if (!pass) {
+				return;
+			}
+
+			this.phone = this.phone.replace(/\D+/g, '');
+
+			this.$emit('send-contact', this.name, this.phone);
+			this.$emit('close');
+		},
+		maskCellphone(v, onlyMasking = false) {
+			if (v == null || v == '') {
+				return;
+			}
+			var mask = v.replace(/\D/g, '');
+			mask = mask.replace(/^0/, '');
+			if (mask.length > 10) {
+				mask = mask.replace(/^(\d\d)(\d{5})(\d{4}).*/, '($1) $2-$3');
+			} else if (mask.length > 5) {
+				mask = mask.replace(/^(\d\d)(\d{4})(\d{0,4}).*/, '($1) $2-$3');
+			} else if (mask.length > 2) {
+				mask = mask.replace(/^(\d\d)(\d{0,5})/, '($1) $2');
+			} else {
+				mask = mask.replace(/^(\d*)/, '($1');
+			}
+
+			if (!onlyMasking) {
+				this.phone = mask;
+			} else {
+				return mask;
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+.no--padding {
+    /deep/ .modal-body {
+        padding: 0 !important;
+    }
+}
+
+/deep/ .modal-body {
+    margin-bottom: 2rem;
+}
+.plan {
+    background: #fff;
+    border-radius: 0.4375rem;
+    .cover {
+        height: 16rem;
+        position: relative;
+        border-top-left-radius: 0.4375rem;
+        border-top-right-radius: 0.4375rem;
+		background-image: url('/img/new_plans_cover.png');
+		background-repeat: no-repeat;
+		background-position: top;
+		background-size: cover;
+		&::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            border-top-right-radius: 0.4375rem;
+            border-top-left-radius: 0.4375rem;
+            background: linear-gradient(90deg, rgba(88, 101, 242, 0.5) 0%, rgba(88, 101, 242, 0.5) 100%);
+        }
+		@media (max-width: 576px) {
+			display: none;
+		}
+    }
+    &__modal {
+        display: flex;
+        justify-content: space-between;
+
+        margin-top: 2.5rem;
+        padding: 0 2rem;
+
+        @media (max-width: 960px) {
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+    }
+
+    &__information {
+        width: 53%;
+        word-break: break-word !important;
+
+		@media (max-width: 960px) {
+			width: 75%;
+		}
+
+        &--img {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            margin-bottom: 5px;
+            user-select: none;
+            img {
+                display: block;
+                width: 80px;
+            }
+        }
+
+        h4 {
+            font-style: normal;
+            font-weight: 700;
+            font-size: 1.25rem;
+            line-height: 1.875rem;
+
+            color: #1d364b;
+			span {
+				font-weight: 500;
+			}
+        }
+
+        p {
+            font-style: normal;
+            font-weight: normal;
+            font-size: 12px;
+            line-height: 21px;
+
+            color: #62778c;
+        }
+		&__title {
+			font-weight: 500 !important;
+			font-size: 15px !important;
+		}
+		&__solutions {
+			font-size: 14px;
+			display: flex;
+			justify-content: space-between;
+			ul {
+				list-style: none;
+				padding: 0;
+				margin: 0;
+				/deep/.fa-check {
+					margin-right: 10px;
+					color: #5865f2;
+				}
+			}
+		}
+    }
+
+    &__contact {
+        width: 47%;
+        background: #eff5fd;
+        border-radius: 5px;
+        padding: 1rem 1.5rem 1rem;
+        margin-left: 2rem;
+
+		@media (max-width: 960px) {
+			margin-top: 1rem;
+			width: 75%;
+			margin-left: 0;
+		}
+
+		.diamond-svg{
+			position: relative;
+			top: -35px;
+			right: -82px;
+
+			@media (max-width: 992px) {
+				display: none;
+			}
+		}
+        p {
+            word-break: break-word !important;
+
+            font-style: normal;
+            font-weight: 600;
+            font-size: 16px;
+            line-height: 22px;
+
+            color: #1d364b;
+        }
+
+        section {
+            input {
+                margin: 0.4rem 0;
+                padding: 0.75rem;
+
+                width: 100%;
+                height: 2rem;
+
+                background: #ffffff;
+                border-radius: 3px;
+                border: 0;
+                outline: 0;
+            }
+        }
+    }
+}
+
+::-webkit-input-placeholder {
+    color: #c0c0c0;
+}
+</style>