@burh/nuxt-core 1.0.410 → 1.0.412

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

@@ -1,8 +1,7 @@
 <template>
-	<el-dialog
-		:visible.sync="isActive"
-		width="54%"
-		custom-class="position-relative"
+	<modal
+		:show.sync="isActive"
+		:size="'lg'"
 		@close="$emit('close')"
 	>
 		<template>
@@ -121,17 +120,13 @@
 				/>
 			</span>
 		</template>
-	</el-dialog>
+	</modal>
 </template>
 
 <script>
-import { Dialog } from 'element-ui';
-
 export default {
 	name: 'shared-modal',
-	components: {
-		[Dialog.name]: Dialog
-	},
+	components: {},
 	props: {
 		isActive: Boolean,
 		shareUrl: String,
@@ -176,20 +171,8 @@ export default {
 <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;
+/deep/ .modal-body {
+	margin-bottom: 2rem;
 }
 
 .social {
@@ -214,32 +197,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;
-    }
-}
-
 .btn-whatsapp:hover {
     color: white;
 }

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

@@ -1,8 +1,7 @@
 <template>
-	<el-dialog
-		:visible.sync="isActive"
-		width="54%"
-		custom-class="position-relative"
+	<modal
+		:show.sync="isActive"
+		:size="'lg'"
 		@close="$emit('close')"
 	>
 		<template>
@@ -50,17 +49,13 @@
 				/>
 			</span>
 		</template>
-	</el-dialog>
+	</modal>
 </template>
 
 <script>
-import { Dialog } from 'element-ui';
-
 export default {
 	name: 'whatsapp-modal',
-	components: {
-		[Dialog.name]: Dialog
-	},
+	components: {},
 	data() {
 		return {
 			phoneNumber: ''
@@ -98,47 +93,4 @@ export default {
 </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>

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

@@ -1,143 +1,95 @@
 <template>
-    <el-dialog
-        :visible.sync="isActive"
-        width="54%"
-        custom-class="position-relative"
-        @close="$emit('close')"
-    >
-        <template>
-            <div class="row mt-5">
-                <!-- <base-input class="col-12" label="Email" type="text" /> -->
-                <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>
+	<modal
+		:show.sync="isActive"
+		:size="'lg'"
+		@close="$emit('close')"
+	>
+		<template>
+			<div class="row mt-5">
+				<!-- <base-input class="col-12" label="Email" type="text" /> -->
+				<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>
+				<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>
+			<span class="tool tool-close" @click="$emit('close-modal')">
+				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: 'whatsapp-modal',
-    components: {
-        [Dialog.name]: Dialog
-    },
-    data() {
-        return {
-            phoneNumber: ''
-        };
-    },
-    props: {
-        isActive: Boolean,
-        userData: Object,
-        baseUrl: String
-    },
-    methods: {
-        sendMessage() {
-            let phoneNumber = this.phoneNumber
-                .replace('(', '')
-                .replace(')', '')
-                .replace(' ', '')
-                .replace('-', '');
-            window.open(
-                'https://api.whatsapp.com/send?phone=' +
+	name: 'whatsapp-modal',
+	components: {},
+	data() {
+		return {
+			phoneNumber: ''
+		};
+	},
+	props: {
+		isActive: Boolean,
+		userData: Object,
+		baseUrl: String
+	},
+	methods: {
+		sendMessage() {
+			let phoneNumber = this.phoneNumber
+				.replace('(', '')
+				.replace(')', '')
+				.replace(' ', '')
+				.replace('-', '');
+			window.open(
+				'https://api.whatsapp.com/send?phone=' +
                     '+55' +
                     phoneNumber +
                     '&text=' +
                     `${this.baseUrl}/${this.userData.slug.slug}`
-            );
-        }
-    },
-    watch: {
-        isActive(newValue) {
-            !newValue && this.$emit('close-modal');
-        }
-    }
+			);
+		}
+	},
+	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>

package/components/burh-ds/Skeleton/AppHeader.vue

@@ -0,0 +1,129 @@
+<template>
+	<base-header class="app-header" :type="'white'">
+		<div class="row justify-content-between">
+			<div
+				class="col-8 my-auto header__container"
+			>
+				<template v-if="hasHeaderData">
+					<div class="row mb-4">
+						<skeleton-animate :width="95" :height="30" />
+					</div>
+				</template>
+
+				<div class="header__content row">
+					<div class="d-flex align-items-center flex-row">
+						<skeleton-animate :width="300" :height="40" />
+					</div>
+					<div class="images">
+						<template v-for="i in userAvatarQuantity">
+							<skeleton-animate class="user__avatar" :key="i" :width="42" :height="42" img />
+						</template>
+					</div>
+				</div>
+
+				<template v-if="hasFooterData">
+					<div class="row mt-4">
+						<template v-for="i in footerActionQuantity">
+							<skeleton-animate class="mr-2 mt-2" :key="i" :width="100" :height="30" />
+						</template>
+					</div>
+
+					<div class="row mt-4">
+						<template v-for="i in footerTabsQuantity">
+							<skeleton-animate class="mr-2 mt-2" :key="i" :width="130" :height="65" />
+						</template>
+					</div>
+				</template>
+			</div>
+
+			<div class="col-4 d-flex justify-content-end align-items-start">
+				<div v-for="i in buttonsQuantity" :key="i">
+					<skeleton-animate class="mr-2" :width="160" :height="42" img />
+				</div>
+			</div>
+		</div>
+	</base-header>
+</template>
+<script>
+import SkeletonAnimate from './SkeletonAnimate.vue';
+
+export default {
+	data(){
+		return{
+			default: '',
+			activeUserId: null
+		};
+	},
+	components: {
+		SkeletonAnimate
+	},
+	props:{
+		hasHeaderData: {
+			type: Boolean,
+			default: false
+		},
+		userAvatarQuantity: {
+			type: Number,
+			default: 0
+		},
+		buttonsQuantity: {
+			type: Number,
+			default: 0
+		},
+		hasFooterData: {
+			type: Boolean,
+			default: false
+		},
+		footerActionQuantity: {
+			type: Number,
+			default: 0
+		},
+		footerTabsQuantity: {
+			type: Number,
+			default: 0
+		}
+	},
+};
+</script>
+
+<style lang="scss">
+
+.app-header {
+    width: 100%;
+    padding: 40px 0;
+    box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
+}
+
+.header__container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.images__container {
+	display: flex;
+	align-items: flex-start;
+	justify-content: center;
+	.header__content {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        padding: 10px 0;
+    }
+}
+
+.images {
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    .user__avatar {
+        border: 2px solid #fff;
+        display: inline-block;
+        &:not(:first-child) {
+            margin-left: -10px;
+        }
+    }
+}
+</style>