@burh/nuxt-core 1.0.352 → 1.0.354

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

@@ -1,42 +1,42 @@
-<template>
-  <div>
-    <modal :show.sync="show.modal0" class="modal__mini">
-        <!-- slot inside of slot, because have component inside component-->
-        <template slot="header">
-            <slot name="header"></slot>
-        </template>
-
-        <!-- body -->
-        <template slot>
-            <slot></slot>
-        </template>
-        <!-- /body  -->
-
-        <template slot="footer">
-            <slot name="footer"></slot>
-        </template>
-    </modal>
-  </div>
-</template>
-
-<script>
-
-
-export default {
-  name: "sub-modal",
-  props: {
-    show: Object,
-    url: String
-  },
-  data() {
-    return {
-    }
-  },
-  mounted(){
-
-  },
-};
-</script>
-<style lang="scss">
-
+<template>
+  <div>
+    <modal :show.sync="show.modal0" class="modal__mini">
+        <!-- slot inside of slot, because have component inside component-->
+        <template slot="header">
+            <slot name="header"></slot>
+        </template>
+
+        <!-- body -->
+        <template slot>
+            <slot></slot>
+        </template>
+        <!-- /body  -->
+
+        <template slot="footer">
+            <slot name="footer"></slot>
+        </template>
+    </modal>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: "sub-modal",
+  props: {
+    show: Object,
+    url: String
+  },
+  data() {
+    return {
+    }
+  },
+  mounted(){
+
+  },
+};
+</script>
+<style lang="scss">
+
 </style>

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

@@ -0,0 +1,262 @@
+<template>
+	<el-dialog
+		:visible.sync="isActive"
+		width="54%"
+		custom-class="position-relative"
+		@close="$emit('close')"
+	>
+		<template>
+			<h2 class="display-4 mt-5 ml-5">Compartilhar</h2>
+			<div class="d-flex justify-content-center align-items-center">
+				<ul class="col-12 list-inline mb-4 mt-3 ml-5">
+					<li
+						v-if="socialLinks.whatsapp"
+						class="p list-inline-item ml-2 cursor-pointer"
+						@click="$emit('whatsapp-modal')"
+					>
+						<base-button
+							icon
+							type="whatsapp"
+							class="btn--rounded mr-2"
+						>
+							<span class="btn-inner--icon"
+							><i class="fab fa-whatsapp"></i
+							></span>
+						</base-button>
+						<span class="btn-inner--text">Whatsapp</span>
+					</li>
+					<a
+						v-if="socialLinks.facebook"
+						:href="`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="social social-link"
+					>
+						<li class="p list-inline-item ml-2 cursor-pointer">
+							<base-button
+								icon
+								class="btn-facebook btn--rounded mr-2"
+							>
+								<span class="btn-inner--icon"
+								><i class="fab fa-facebook-f"></i
+								></span>
+							</base-button>
+							<span class="btn-inner--text">Facebook</span>
+						</li>
+					</a>
+					<a
+						v-if="socialLinks.twitter"
+						:href="`https://twitter.com/intent/tweet?text=${shareUrl}`"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="social social-link"
+					>
+						<li class="p list-inline-item ml-2 cursor-pointer">
+							<base-button
+								icon
+								class="btn-twitter btn--rounded mr-2"
+							>
+								<span class="btn-inner--icon"
+								><i class="fab fa-twitter"></i
+								></span>
+							</base-button>
+							<span class="btn-inner--text">Twitter</span>
+						</li>
+					</a>
+					<a
+						v-if="socialLinks.linkedin"
+						:href="`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="social social-link"
+					>
+						<li class="p list-inline-item ml-2 cursor-pointer">
+							<base-button
+								icon
+								class="btn-linkedin btn--rounded mr-2"
+							>
+								<span class="btn-inner--icon"
+								><i class="fab fa-linkedin-in"></i
+								></span>
+							</base-button>
+							<span class="btn-inner--text">Linkedin</span>
+						</li>
+					</a>
+				</ul>
+			</div>
+
+			<div class="row">
+				<div class="col-8" @click="copyToClipboard">
+					<label class="ml-5 social social-label" for="linkShareModal"
+					>Link compartilhável</label
+					>
+					<input
+						v-if="shareUrl"
+						id="linkShareModal"
+						:value="shareUrl"
+						type="text"
+						class="ml-5 form-control social social-input"
+						readonly
+					/>
+				</div>
+
+				<div class="col-4 text-center pt-1">
+					<base-button
+						id="btnCopyLinkShare"
+						size="sm"
+						type="outline-primary"
+						class="mt-4"
+						@click="copyToClipboard"
+					>
+						Copiar
+					</base-button>
+				</div>
+			</div>
+
+			<span class="tool tool-close" @click="$emit('close-modal')">
+				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: 'shared-modal',
+	components: {
+		[Dialog.name]: Dialog
+	},
+	props: {
+		isActive: Boolean,
+		shareUrl: String,
+		socialLinks: {
+			type: Object,
+			default: () => {
+				return {
+					whatsapp: true,
+					facebook: true,
+					twitter: true,
+					linkedin: true
+				};
+			}
+		}
+	},
+	methods: {
+		copyToClipboard() {
+			let text = document.getElementById('linkShareModal');
+			let btnCopy = document.getElementById('btnCopyLinkShare');
+			text.select();
+			document.execCommand('copy');
+
+			btnCopy.innerText = 'Copiado';
+			btnCopy.classList.remove('btn-outline-primary');
+			btnCopy.classList.add('btn-primary');
+
+			setTimeout(() => {
+				btnCopy.innerText = 'Copiar';
+				btnCopy.classList.remove('btn-primary');
+				btnCopy.classList.add('btn-outline-primary');
+			}, 3000);
+		}
+	},
+	watch: {
+		isActive(to) {
+			!to && this.$emit('close-modal');
+		},
+	}
+};
+</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: 725px;
+    min-width: 725px;
+}
+
+.social {
+    &-label {
+        color: #8898aa;
+        text-transform: uppercase;
+    }
+
+    &-input {
+        /* width: 300px; */
+        border: none;
+        border-radius: 5px;
+        background: #e9ecef;
+        color: #32325d;
+        padding-left: 15px;
+        outline: 0;
+        cursor: pointer;
+    }
+
+    &-link {
+        color: #606266;
+    }
+}
+
+.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;
+    }
+}
+
+.btn-whatsapp:hover {
+    color: white;
+}
+
+.btn-email {
+    color: white;
+    background-color: $primary !important;
+    border-color: $primary !important;
+}
+
+.btn--rounded {
+    font-size: 1.5rem;
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    min-width: 0;
+    width: 3rem;
+    height: 3rem;
+}
+</style>

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

@@ -0,0 +1,144 @@
+<template>
+	<el-dialog
+		:visible.sync="isActive"
+		width="54%"
+		custom-class="position-relative"
+		@close="$emit('close')"
+	>
+		<template>
+			<div class="row mt-5">
+				<div class="col-12 px-3 mb-4">
+					<p class="lead mt-0 ml-5">
+						Insira aqui o número do telefone.
+					</p>
+					<base-input
+						class="mb-1 ml-5 mr-5"
+						v-model="phoneNumber"
+						placeholder="Ex: (15) 3342-6237"
+						type="text"
+						name="NumberCellphone"
+					>
+					</base-input>
+				</div>
+
+				<div class="col-12 d-flex">
+					<base-button
+						size="md"
+						outline
+						type="primary"
+						role="button"
+						class="ml-5"
+						@click="$emit('close-modal')"
+					>voltar
+					</base-button>
+					<base-button
+						size="md"
+						type="primary"
+						role="button"
+						@click="sendMessage()"
+						class="ml-auto mr-5"
+					>Enviar
+					</base-button>
+				</div>
+			</div>
+
+			<span class="tool tool-close" @click="$emit('close-modal')">
+				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: 'whatsapp-modal',
+	components: {
+		[Dialog.name]: Dialog
+	},
+	data() {
+		return {
+			phoneNumber: ''
+		};
+	},
+	props: {
+		isActive: Boolean,
+		shareUrl: {
+			type: String,
+			required: true
+		},
+	},
+	methods: {
+		sendMessage() {
+			let phoneNumber = this.phoneNumber
+				.replace('(', '')
+				.replace(')', '')
+				.replace(' ', '')
+				.replace('-', '');
+			window.open(
+				'https://api.whatsapp.com/send?phone=' +
+                    '+55' +
+                    phoneNumber +
+                    '&text=' +
+                    this.shareUrl
+			);
+		}
+	},
+	watch: {
+		isActive(newValue) {
+			!newValue && this.$emit('close-modal');
+		}
+	}
+};
+</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: 725px;
+    min-width: 725px;
+}
+
+.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;
+    }
+}
+</style>