@burh/nuxt-core 1.0.403 → 1.0.404

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

@@ -1,286 +1,286 @@
-<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>
-</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;
-            }
-        }
-    }
-};
-</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;
-}
-
-.plan {
-    background: #fff;
-    img {
-        width: 100%;
-        height: 8.12rem;
-        object-fit: cover;
-    }
-
-    &__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;
-
-        h4 {
-            font-style: normal;
-            font-weight: 600;
-            font-size: 1.25rem;
-            line-height: 1.875rem;
-
-            color: #1d364b;
-        }
-
-        p {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 14px;
-            line-height: 21px;
-
-            color: #62778c;
-        }
-    }
-
-    &__contact {
-        width: 47%;
-
-        background: #ededed;
-        border-radius: 5px;
-        padding: 1rem 1.5rem 1rem;
-        margin-left: 2rem;
-
-        p {
-            word-break: break-word !important;
-
-            font-style: normal;
-            font-weight: 500;
-            font-size: 15px;
-            line-height: 22px;
-            text-align: center;
-
-            color: #1d364b;
-        }
-
-        section {
-            input {
-                margin: 0.4rem 0;
-                padding: 0.75rem;
-
-                width: 100%;
-                height: 2rem;
-
-                background: #ffffff;
-                border-radius: 3px;
-                border: 0;
-                outline: 0;
-            }
-
-            button {
-                margin-top: 0.6rem;
-
-                width: 100%;
-                height: 2rem;
-
-                background: #1f8ceb;
-                box-shadow: 0px 4.22794px 10.1471px rgba(0, 0, 0, 0.15);
-                border-radius: 22.8309px;
-                border: 0;
-                outline: 0;
-
-                color: #fff;
-            }
-        }
-    }
-}
-
-.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;
-}
-</style>
+<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>
+</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;
+            }
+        }
+    }
+};
+</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;
+}
+
+.plan {
+    background: #fff;
+    img {
+        width: 100%;
+        height: 8.12rem;
+        object-fit: cover;
+    }
+
+    &__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;
+
+        h4 {
+            font-style: normal;
+            font-weight: 600;
+            font-size: 1.25rem;
+            line-height: 1.875rem;
+
+            color: #1d364b;
+        }
+
+        p {
+            font-style: normal;
+            font-weight: normal;
+            font-size: 14px;
+            line-height: 21px;
+
+            color: #62778c;
+        }
+    }
+
+    &__contact {
+        width: 47%;
+
+        background: #ededed;
+        border-radius: 5px;
+        padding: 1rem 1.5rem 1rem;
+        margin-left: 2rem;
+
+        p {
+            word-break: break-word !important;
+
+            font-style: normal;
+            font-weight: 500;
+            font-size: 15px;
+            line-height: 22px;
+            text-align: center;
+
+            color: #1d364b;
+        }
+
+        section {
+            input {
+                margin: 0.4rem 0;
+                padding: 0.75rem;
+
+                width: 100%;
+                height: 2rem;
+
+                background: #ffffff;
+                border-radius: 3px;
+                border: 0;
+                outline: 0;
+            }
+
+            button {
+                margin-top: 0.6rem;
+
+                width: 100%;
+                height: 2rem;
+
+                background: #1f8ceb;
+                box-shadow: 0px 4.22794px 10.1471px rgba(0, 0, 0, 0.15);
+                border-radius: 22.8309px;
+                border: 0;
+                outline: 0;
+
+                color: #fff;
+            }
+        }
+    }
+}
+
+.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;
+}
+</style>