@burh/nuxt-core 1.0.409 → 1.0.411

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

@@ -1,87 +1,87 @@
-<template>
-	<div>
-		<modal
-			:show.sync="isModalOpen"
-			@close="$emit('close-modal')"
-			class="modal modal-new"
-			bodyClasses="container-fluid px-4 pt-0 modal-new-fix"
-			headerClasses="container-fluid new-modal-header pb-0"
-		>
-			<template slot="header">
-				<p>&ThinSpace;</p>
-			</template>
-			<div class="text-center mb-4 mt-0">
-				<img src="/img/logotipo_color.svg" class="pb-4" width="110" alt="Burh">
-				<h5 class="display-5 text-center">Olá! Sou a Burh! Estamos mudando.</h5>
-			</div>
-			<div class="mt-2 text-justify">
-				<p>
-					O Burh foi criado para empresas que buscam os melhores profissionais para compor seu time, mas que para isso não tenham que passar por sistemas burocráticos, ultrapassados e cheios de pegadinhas. Com o único propósito de tornar o mercado profissional em um lugar livre e aberto, chegou a hora de apresentarmos a melhor versão que já criamos, uma plataforma inteligente, rápida, segura e repleta de novas possibilidades.
-					<br><br>
-					Por isso acreditamos que você vai adorar! A nova plataforma possibilita criar e organizar pastas na nuvem, anexar documentos e notas nos perfis dos profissionais e compartilhar essas informações com toda segurança da LGPD. Tudo isso de forma simples, inovadora e inteligente.
-					<br><br>
-					Pode-se dizer que estamos amadurecendo, o que é meio chavão para uma marca dizer, mas nós somos gratos pelas pessoas que ficaram ao nosso lado nos últimos quatro anos e estamos empolgados para crescer cada vez mais juntos.
-					<br><br>
-					Hoje, apresentamos a nova Burh Empresas que será liberada nos próximos dias. Uma solução que reflete aquilo que somos, nossa essência e o que acreditamos. Nossas novas cores representam toda a integração, possibilidade e liberdade de criarmos o novo, de pessoas para pessoas.
-					<br><br>
-					Com amor,<br>Burh
-				</p>
-			</div>
-		</modal>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'new-user-modal',
-	props: {
-		show: {
-			type: Boolean,
-			default: false
-		},
-	},
-	data() {
-		return {
-			isModalOpen: this.show
-		};
-	},
-	watch: {
-		show(value) {
-			this.isModalOpen = value;
-		}
-	}
-};
-</script>
-<style lang="scss">
-.modal-new {
-    overflow-y: auto!important;
-    &::-webkit-scrollbar-track {
-		border-radius: 10px!important;
-		background-color: rgba(23, 43, 77, 0.7)!important;
-	}
-
-	&::-webkit-scrollbar {
-		width: 8px!important;
-		background-color: rgba(23, 43, 77, 0.7)!important;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		border-radius: 10px!important;
-		background-color: #e9e8e8!important;
-	}
-    .modal-dialog {
-        min-width: 60rem;
-        display: flex;
-        flex-direction: columns;
-        align-items: center;
-    }
-}
-.modal-new-fix {
-    padding: 30px 60px!important;
-    padding-top: 0!important;
-    width: 75%!important;
-}
-.new-modal-header {
-	padding: 10px!important;
-}
-</style>
+<template>
+	<div>
+		<modal
+			:show.sync="isModalOpen"
+			@close="$emit('close-modal')"
+			class="modal modal-new"
+			bodyClasses="container-fluid px-4 pt-0 modal-new-fix"
+			headerClasses="container-fluid new-modal-header pb-0"
+		>
+			<template slot="header">
+				<p>&ThinSpace;</p>
+			</template>
+			<div class="text-center mb-4 mt-0">
+				<img src="/img/logotipo_color.svg" class="pb-4" width="110" alt="Burh">
+				<h5 class="display-5 text-center">Olá! Sou a Burh! Estamos mudando.</h5>
+			</div>
+			<div class="mt-2 text-justify">
+				<p>
+					O Burh foi criado para empresas que buscam os melhores profissionais para compor seu time, mas que para isso não tenham que passar por sistemas burocráticos, ultrapassados e cheios de pegadinhas. Com o único propósito de tornar o mercado profissional em um lugar livre e aberto, chegou a hora de apresentarmos a melhor versão que já criamos, uma plataforma inteligente, rápida, segura e repleta de novas possibilidades.
+					<br><br>
+					Por isso acreditamos que você vai adorar! A nova plataforma possibilita criar e organizar pastas na nuvem, anexar documentos e notas nos perfis dos profissionais e compartilhar essas informações com toda segurança da LGPD. Tudo isso de forma simples, inovadora e inteligente.
+					<br><br>
+					Pode-se dizer que estamos amadurecendo, o que é meio chavão para uma marca dizer, mas nós somos gratos pelas pessoas que ficaram ao nosso lado nos últimos quatro anos e estamos empolgados para crescer cada vez mais juntos.
+					<br><br>
+					Hoje, apresentamos a nova Burh Empresas que será liberada nos próximos dias. Uma solução que reflete aquilo que somos, nossa essência e o que acreditamos. Nossas novas cores representam toda a integração, possibilidade e liberdade de criarmos o novo, de pessoas para pessoas.
+					<br><br>
+					Com amor,<br>Burh
+				</p>
+			</div>
+		</modal>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'new-user-modal',
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+	},
+	data() {
+		return {
+			isModalOpen: this.show
+		};
+	},
+	watch: {
+		show(value) {
+			this.isModalOpen = value;
+		}
+	}
+};
+</script>
+<style lang="scss">
+.modal-new {
+    overflow-y: auto!important;
+    &::-webkit-scrollbar-track {
+		border-radius: 10px!important;
+		background-color: rgba(23, 43, 77, 0.7)!important;
+	}
+
+	&::-webkit-scrollbar {
+		width: 8px!important;
+		background-color: rgba(23, 43, 77, 0.7)!important;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		border-radius: 10px!important;
+		background-color: #e9e8e8!important;
+	}
+    .modal-dialog {
+        min-width: 60rem;
+        display: flex;
+        flex-direction: columns;
+        align-items: center;
+    }
+}
+.modal-new-fix {
+    padding: 30px 60px!important;
+    padding-top: 0!important;
+    width: 75%!important;
+}
+.new-modal-header {
+	padding: 10px!important;
+}
+</style>

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

@@ -1,167 +1,154 @@
 <template>
-    <el-dialog
-        :visible.sync="isActive"
-        width="55%"
-        custom-class="position-relative"
-        @close="$emit('close')"
-    >
-        <template>
-            <div class="plan">
-                <img :src="cover" alt="" />
-
-                <div class="plan__modal">
-                    <section class="plan__information">
-                        <h4>
-                            Você vai amar o Plano Empresas. <br />
-                            Dê um Upgrade no seu R&S
-                        </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>
-                    </section>
-                    <section class="plan__contact">
-                        <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>
-
-                                <button type="button" @click="sendContact()">
-                                    Solicitar Contato
-                                </button>
-                            </section>
-                        </validation-observer>
-                    </section>
-                </div>
-            </div>
-
-            <span class="tool tool-close" @click="$emit('close')">
-                Fechar
-                <font-awesome-icon
-                    :icon="['fas', 'times']"
-                    class="text-white ml-1"
-                />
-            </span>
-        </template>
-    </el-dialog>
+	<modal
+		:show.sync="isActive"
+		:size="'lg'"
+		@close="$emit('close')"
+	>
+		<template>
+			<div class="plan">
+				<img :src="cover" alt="" />
+
+				<div class="plan__modal">
+					<section class="plan__information">
+						<h4>
+							Você vai amar o Plano Empresas. <br />
+							Dê um Upgrade no seu R&S
+						</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>
+					</section>
+					<section class="plan__contact">
+						<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>
+
+								<button type="button" @click="sendContact()">
+									Solicitar Contato
+								</button>
+							</section>
+						</validation-observer>
+					</section>
+				</div>
+			</div>
+
+			<span class="tool tool-close" @click="$emit('close')">
+				Fechar
+				<font-awesome-icon
+					:icon="['fas', 'times']"
+					class="text-white ml-1"
+				/>
+			</span>
+		</template>
+	</modal>
 </template>
 
 <script>
-import { Dialog } from 'element-ui';
-
 export default {
-    name: 'plan-modal',
-    components: {
-        [Dialog.name]: Dialog
-    },
-    props: {
-        isActive: Boolean,
-        cover: String
-    },
-    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;
-            }
-        }
-    }
+	name: 'plan-modal',
+	components: {},
+	props: {
+		isActive: Boolean,
+		cover: String
+	},
+	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';
 
-/deep/ .el-dialog__body {
-    padding: 0;
-}
-
-/deep/ .el-dialog__header {
-    display: none;
-}
-
-/deep/ .el-dialog {
-    overflow: hidden;
-    border-radius: 10px;
-    padding-bottom: 50px;
-    max-width: 47.5rem;
+/deep/ .modal-body {
+    margin-bottom: 2rem;
 }
 
 .plan {
     background: #fff;
+    border-radius: 0.4375rem;
     img {
         width: 100%;
         height: 8.12rem;
         object-fit: cover;
+        border-top-left-radius: 0.4375rem;
+        border-top-right-radius: 0.4375rem;
     }
 
     &__modal {
@@ -242,7 +229,7 @@ export default {
                 width: 100%;
                 height: 2rem;
 
-                background: #1f8ceb;
+                background: #5865f2;
                 box-shadow: 0px 4.22794px 10.1471px rgba(0, 0, 0, 0.15);
                 border-radius: 22.8309px;
                 border: 0;
@@ -254,32 +241,6 @@ export default {
     }
 }
 
-.tool {
-    position: absolute;
-    top: 1rem;
-    z-index: 10;
-    color: $primary;
-    cursor: pointer;
-
-    &-close {
-        position: absolute;
-        width: 88px;
-        height: 27px;
-        right: 7px;
-        top: 7px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        font-size: 11px;
-
-        font-weight: 500;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 17.5px;
-        color: #fff;
-    }
-}
-
 ::-webkit-input-placeholder {
     color: #c0c0c0;
 }