@burh/nuxt-core 1.0.291 → 1.0.292

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

@@ -1,270 +1,270 @@
-<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
-						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="slug"
-						:href="`https://www.facebook.com/sharer/sharer.php?u=${baseUrl}/${slug}`"
-						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="slug"
-						:href="`https://twitter.com/intent/tweet?text=${baseUrl}/${slug}`"
-						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="slug"
-						:href="`https://www.linkedin.com/sharing/share-offsite/?url=${baseUrl}/${slug}`"
-						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-6" @click="copyToClipboard">
-					<label class="ml-5 social social-label" for="linkShareModal"
-					>Link compartilhável</label
-					>
-					<input
-						v-if="slug"
-						id="linkShareModal"
-						:value="`${baseUrl}/${slug}`"
-						type="text"
-						class="ml-5 form-control social social-input"
-						readonly
-					/>
-				</div>
-
-				<div class="col-6 text-center pt-1">
-					<base-button
-						size="sm"
-						type="outline-primary"
-						class="mt-4 ml-3"
-						@click="$emit('close-modal')"
-					>
-						Voltar
-					</base-button>
-
-					<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,
-		userData: Object,
-		baseUrl: String
-	},
-	data() {
-		return {
-			slug: null
-		};
-	},
-	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(newValue) {
-			!newValue && this.$emit('close-modal');
-		},
-		userData(userData) {
-			if (userData.slug) {
-				this.slug = userData.slug.slug || null;
-			}
-		}
-	}
-};
-</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>
+<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
+						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="slug"
+						:href="`https://www.facebook.com/sharer/sharer.php?u=${baseUrl}/${slug}`"
+						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="slug"
+						:href="`https://twitter.com/intent/tweet?text=${baseUrl}/${slug}`"
+						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="slug"
+						:href="`https://www.linkedin.com/sharing/share-offsite/?url=${baseUrl}/${slug}`"
+						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-6" @click="copyToClipboard">
+					<label class="ml-5 social social-label" for="linkShareModal"
+					>Link compartilhável</label
+					>
+					<input
+						v-if="slug"
+						id="linkShareModal"
+						:value="`${baseUrl}/${slug}`"
+						type="text"
+						class="ml-5 form-control social social-input"
+						readonly
+					/>
+				</div>
+
+				<div class="col-6 text-center pt-1">
+					<base-button
+						size="sm"
+						type="outline-primary"
+						class="mt-4 ml-3"
+						@click="$emit('close-modal')"
+					>
+						Voltar
+					</base-button>
+
+					<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,
+		userData: Object,
+		baseUrl: String
+	},
+	data() {
+		return {
+			slug: null
+		};
+	},
+	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(newValue) {
+			!newValue && this.$emit('close-modal');
+		},
+		userData(userData) {
+			if (userData.slug) {
+				this.slug = userData.slug.slug || null;
+			}
+		}
+	}
+};
+</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>