@burh/nuxt-core 1.0.500 → 1.0.502

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

@@ -1,373 +1,373 @@
-<template>
-	<base-header class="app-header" :type="'white'">
-		<div class="row justify-content-between app__header">
-			<div
-				:class="{ 'images__container': users.length }"
-				class="col-8 my-auto header__container"
-			>
-				<slot name="header-top" />
-
-				<div class="header__content">
-					<div class="d-flex align-items-center justify-content-center flex-row header__title" :class="{ hasBackButton }">
-						<button class="back__button" v-if="hasBackButton" @click="goBack()">
-							<i class="fas fa-arrow-left"></i>
-						</button>
-						<h2 class="font-weight-bold display-3">{{name}}</h2>
-						<badge
-							v-if="beta"
-							rounded
-							size="md"
-							class="badge-bg-color badge-font ml-2 mb-2"
-							type="primary"
-						>
-							BETA
-						</badge>
-					</div>
-					<div class="images" v-if="users.length">
-						<el-tooltip
-							v-for="user in users.slice(0, 5)"
-							:key="user.id"
-							placement="top"
-							:content="user.name"
-							class="user__avatar"
-							:class="{ 'user__avatar--active': activeUserId === user.id }"
-						>
-							<image-with-fallback
-								@click.native="setActiveUser(user.id)"
-								:src="user.avatar"
-								:alt="user.name"
-								:fallbackText="user.name"
-								fallbackSize="200"
-								:fallbackBackground="avatarColor"
-								:style=" `--avatar-color: #${avatarColor}`"
-							/>
-						</el-tooltip>
-
-						<template v-if="users.length > 5">
-							<el-dropdown trigger="click" class="ml-4">
-								<span class="app__header__dropdown__title" :class="{ 'app__header__dropdown__title--active': users.map(user => user.id).includes(activeUserId) }" draggable="false">
-									+ {{ users.slice(5).length }}
-								</span>
-								<el-dropdown-menu slot="dropdown" class="app__header__imagems__dropdown">
-									<el-dropdown-item
-										v-for="user in users.slice(5)"
-										:key="user.id"
-										@click.native="setActiveUser(user.id)"
-									>
-										<div class="dropdown__user__data" :class="{ 'dropdown__user__data--active': activeUserId === user.id }">
-											<image-with-fallback
-												:src="user.avatar"
-												:alt="user.name"
-												:fallbackText="user.name"
-												fallbackSize="200"
-												:fallbackBackground="avatarColor"
-												:style=" `--avatar-color: #${avatarColor}`"
-											/>
-											<span>{{ user.name }} {{ user.last_name }}</span>
-										</div>
-									</el-dropdown-item>
-								</el-dropdown-menu>
-							</el-dropdown>
-						</template>
-					</div>
-				</div>
-
-				<span id="credits-amount" v-if="subheader !== null">
-					{{ subheader }} Créditos
-				</span>
-
-				<slot name="header-bottom" />
-			</div>
-
-			<div class="col-4 d-flex justify-content-end align-items-start footer__content">
-				<el-tooltip v-for="(item, index) in icons" :key="index"
-					v-show="!item.disabled"
-					class="item" effect="dark" :content="item.title" placement="top">
-					<base-button size="md" type="link" class="text-primary px-2 w-auto"
-						@click="$emit(item.event, item)">
-						<font-awesome-icon :icon="item.icon" class="mr-2" />
-					</base-button>
-				</el-tooltip>
-
-				<slot name="buttons" />
-			</div>
-
-			<slot/>
-		</div>
-	</base-header>
-</template>
-<script>
-import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
-export default {
-	components: {
-		ElDropdown: Dropdown,
-		ElDropdownMenu: DropdownMenu,
-		ElDropdownItem: DropdownItem,
-	},
-	data(){
-		return{
-			default: '',
-			activeUserId: null
-		};
-	},
-	props:{
-		icons:{
-			type: Array,
-			default: () =>[{ event: 'view', icon: ['fas', 'eye'], disabled: false, title: 'Visualizar' }, { event: 'config', icon: ['fas', 'cog'], disabled: false, title: 'Editar' } ]
-		},
-		name: {
-			type: String,
-			default: 'Teste de matematica'
-		},
-		beta:{
-			type: Boolean,
-			default: false
-		},
-		subheader: {
-			type: Number,
-			default: null
-		},
-		users: {
-			type: Array,
-			default: () => []
-		},
-		hasBackButton: {
-			type: Boolean,
-			default: false
-		},
-		backClickAction: {
-			type: Function || null,
-			default: null
-		},
-		avatarColor: {
-			type: String,
-			default: '5865f2'
-		}
-	},
-	methods: {
-		goBack() {
-			if (this.backClickAction === null) {
-				this.$router.go(-1);
-			} else {
-				this.backClickAction();
-			}
-		},
-		setActiveUser(userId) {
-			if (this.activeUserId !== userId) {
-				this.activeUserId = userId;
-				this.$emit('active-user', userId);
-			} else {
-				this.activeUserId = null;
-				this.$emit('active-user', null);
-			}
-		}
-	}
-};
-</script>
-<style lang="scss">
-    .app__header__imagems__dropdown {
-        max-height: 300px;
-        overflow: hidden;
-        overflow-y: scroll;
-        &::-webkit-scrollbar {
-            width: 8px;
-        }
-
-        &::-webkit-scrollbar-track {
-            background: #f5f5f5;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background: #e9e8e8;
-            border-radius: 10px;
-        }
-        .dropdown__user__data {
-            display: grid;
-            grid-template-columns: 40px 1fr;
-            align-items: center;
-            margin-bottom: 5px;
-            img {
-                width: 32px;
-                height: 32px;
-                border-radius: 100px;
-                display: block;
-                border: 2px solid transparent;
-            }
-            span {
-                font-weight: 500;
-            }
-            &--active {
-                img {
-                    border-color: #5865f2;
-                }
-            }
-        }
-    }
-</style>
-
-<style lang="scss" scoped>
-@media (max-width: 850px) {
-    .app__header {
-        .header__container {
-            width: 100%!important;
-            max-width: none!important;
-        }
-        .hasBackButton {
-            flex-direction: row!important;
-            justify-content: flex-start!important;
-        }
-        .header__content {
-            width: 100%!important;
-            max-width: none!important;
-            flex-direction: column!important;
-            text-align: left!important;
-            align-items: flex-start!important;
-            justify-content: flex-start!important;
-            > .images {
-                margin: 0!important;
-                margin-top: 10px!important;
-            }
-        }
-    }
-}
-@media (max-width: 600px) {
-    .app__header {
-        display: flex!important;
-        flex-direction: column!important;
-        .header__content {
-            .header__title {
-                width: 100%!important;
-                max-width: none!important;
-                text-align: left!important;
-                align-items: flex-start!important;
-                justify-content: flex-start!important;
-                &:not(:has(.hasBackButton)) {
-                    flex-direction: column!important;
-                }
-            }
-        }
-        .footer__content {
-            width: 100%!important;
-            max-width: none!important;
-            padding: 0!important;
-            display: grid!important;
-            grid-template-columns: repeat(auto-fit, minmax(calc(100% / 2), 1fr));
-            justify-content: stretch!important;
-            /deep/ button {
-                width: 100%!important;
-            }
-        }
-    }
-}
-
-.app__header__dropdown__title {
-    background: #8DA2B5;
-    color: #fff;
-    width: 42px;
-    height: 42px;
-    display: grid;
-    place-items: center;
-    border-radius: 100px;
-    border: 2px solid #fff;
-    margin-left: -34px;
-    font-size: 0.7rem;
-    user-select: none;
-    &--active {
-        border-color: #5865f2;
-    }
-}
-
-#credits-amount {
-    margin: 0!important;
-    min-width: 8em;
-    margin: 1rem 1rem 1rem 0;
-    padding: 0.25em 1em;
-    font-size: 0.85rem;
-    line-height: 1.4em;
-    border-radius: 23rem;
-    font-weight: 400;
-    text-align: center;
-    background-color: rgba(29, 161, 241, 0.1);
-    color: #5865F2;
-}
-</style>
-<style lang="scss">
-
-.app-header {
-    width: 100%;
-    padding-top: 1.25rem;
-    box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
-}
-
-.back__button {
-    cursor: pointer;
-    width: 42px;
-    height: 42px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 10px;
-    border-radius: 100px;
-    transition: background 0.5s;
-    margin-left: -15px;
-    border: 0;
-    background: transparent;
-	color: #32325d;
-    &:focus {
-        outline: none;
-    }
-    &:not(:disabled):hover, &:focus:not(:disabled):hover {
-        background: rgba(0, 0, 0, 0.08);
-    }
-}
-
-.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;
-        h2 {
-            margin-bottom: 0;
-        }
-        .images {
-            margin-left: 10px;
-            display: flex;
-            align-items: center;
-            user-select: none;
-            .user__avatar {
-                cursor: pointer;
-                border: 2px solid transparent;
-                transition: border-color 0.5s;
-                border: 2px solid #fff;
-                background: var(--avatar-color);
-                &--active {
-                    border-color: #5865F2;
-                    z-index: 10;
-                }
-            }
-            img {
-                $size: 42px;
-                display: block;
-                width: $size;
-                height: $size;
-                object-fit: cover;
-                border-radius: 100px;
-                &:not(:first-child) {
-                    margin-left: -10px;
-                }
-            }
-        }
-    }
-}
-</style>
+<template>
+	<base-header class="app-header" :type="'white'">
+		<div class="row justify-content-between app__header">
+			<div
+				:class="{ 'images__container': users.length }"
+				class="col-8 my-auto header__container"
+			>
+				<slot name="header-top" />
+
+				<div class="header__content">
+					<div class="d-flex align-items-center justify-content-center flex-row header__title" :class="{ hasBackButton }">
+						<button class="back__button" v-if="hasBackButton" @click="goBack()">
+							<i class="fas fa-arrow-left"></i>
+						</button>
+						<h2 class="font-weight-bold display-3">{{name}}</h2>
+						<badge
+							v-if="beta"
+							rounded
+							size="md"
+							class="badge-bg-color badge-font ml-2 mb-2"
+							type="primary"
+						>
+							BETA
+						</badge>
+					</div>
+					<div class="images" v-if="users.length">
+						<el-tooltip
+							v-for="user in users.slice(0, 5)"
+							:key="user.id"
+							placement="top"
+							:content="user.name"
+							class="user__avatar"
+							:class="{ 'user__avatar--active': activeUserId === user.id }"
+						>
+							<image-with-fallback
+								@click.native="setActiveUser(user.id)"
+								:src="user.avatar"
+								:alt="user.name"
+								:fallbackText="user.name"
+								fallbackSize="200"
+								:fallbackBackground="avatarColor"
+								:style=" `--avatar-color: #${avatarColor}`"
+							/>
+						</el-tooltip>
+
+						<template v-if="users.length > 5">
+							<el-dropdown trigger="click" class="ml-4">
+								<span class="app__header__dropdown__title" :class="{ 'app__header__dropdown__title--active': users.map(user => user.id).includes(activeUserId) }" draggable="false">
+									+ {{ users.slice(5).length }}
+								</span>
+								<el-dropdown-menu slot="dropdown" class="app__header__imagems__dropdown">
+									<el-dropdown-item
+										v-for="user in users.slice(5)"
+										:key="user.id"
+										@click.native="setActiveUser(user.id)"
+									>
+										<div class="dropdown__user__data" :class="{ 'dropdown__user__data--active': activeUserId === user.id }">
+											<image-with-fallback
+												:src="user.avatar"
+												:alt="user.name"
+												:fallbackText="user.name"
+												fallbackSize="200"
+												:fallbackBackground="avatarColor"
+												:style=" `--avatar-color: #${avatarColor}`"
+											/>
+											<span>{{ user.name }} {{ user.last_name }}</span>
+										</div>
+									</el-dropdown-item>
+								</el-dropdown-menu>
+							</el-dropdown>
+						</template>
+					</div>
+				</div>
+
+				<span id="credits-amount" v-if="subheader !== null">
+					{{ subheader }} Créditos
+				</span>
+
+				<slot name="header-bottom" />
+			</div>
+
+			<div class="col-4 d-flex justify-content-end align-items-start footer__content">
+				<el-tooltip v-for="(item, index) in icons" :key="index"
+					v-show="!item.disabled"
+					class="item" effect="dark" :content="item.title" placement="top">
+					<base-button size="md" type="link" class="text-primary px-2 w-auto"
+						@click="$emit(item.event, item)">
+						<font-awesome-icon :icon="item.icon" class="mr-2" />
+					</base-button>
+				</el-tooltip>
+
+				<slot name="buttons" />
+			</div>
+
+			<slot/>
+		</div>
+	</base-header>
+</template>
+<script>
+import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
+export default {
+	components: {
+		ElDropdown: Dropdown,
+		ElDropdownMenu: DropdownMenu,
+		ElDropdownItem: DropdownItem,
+	},
+	data(){
+		return{
+			default: '',
+			activeUserId: null
+		};
+	},
+	props:{
+		icons:{
+			type: Array,
+			default: () =>[{ event: 'view', icon: ['fas', 'eye'], disabled: false, title: 'Visualizar' }, { event: 'config', icon: ['fas', 'cog'], disabled: false, title: 'Editar' } ]
+		},
+		name: {
+			type: String,
+			default: 'Teste de matematica'
+		},
+		beta:{
+			type: Boolean,
+			default: false
+		},
+		subheader: {
+			type: Number,
+			default: null
+		},
+		users: {
+			type: Array,
+			default: () => []
+		},
+		hasBackButton: {
+			type: Boolean,
+			default: false
+		},
+		backClickAction: {
+			type: Function || null,
+			default: null
+		},
+		avatarColor: {
+			type: String,
+			default: '5865f2'
+		}
+	},
+	methods: {
+		goBack() {
+			if (this.backClickAction === null) {
+				this.$router.go(-1);
+			} else {
+				this.backClickAction();
+			}
+		},
+		setActiveUser(userId) {
+			if (this.activeUserId !== userId) {
+				this.activeUserId = userId;
+				this.$emit('active-user', userId);
+			} else {
+				this.activeUserId = null;
+				this.$emit('active-user', null);
+			}
+		}
+	}
+};
+</script>
+<style lang="scss">
+    .app__header__imagems__dropdown {
+        max-height: 300px;
+        overflow: hidden;
+        overflow-y: scroll;
+        &::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: #f5f5f5;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: #e9e8e8;
+            border-radius: 10px;
+        }
+        .dropdown__user__data {
+            display: grid;
+            grid-template-columns: 40px 1fr;
+            align-items: center;
+            margin-bottom: 5px;
+            img {
+                width: 32px;
+                height: 32px;
+                border-radius: 100px;
+                display: block;
+                border: 2px solid transparent;
+            }
+            span {
+                font-weight: 500;
+            }
+            &--active {
+                img {
+                    border-color: #5865f2;
+                }
+            }
+        }
+    }
+</style>
+
+<style lang="scss" scoped>
+@media (max-width: 850px) {
+    .app__header {
+        .header__container {
+            width: 100%!important;
+            max-width: none!important;
+        }
+        .hasBackButton {
+            flex-direction: row!important;
+            justify-content: flex-start!important;
+        }
+        .header__content {
+            width: 100%!important;
+            max-width: none!important;
+            flex-direction: column!important;
+            text-align: left!important;
+            align-items: flex-start!important;
+            justify-content: flex-start!important;
+            > .images {
+                margin: 0!important;
+                margin-top: 10px!important;
+            }
+        }
+    }
+}
+@media (max-width: 600px) {
+    .app__header {
+        display: flex!important;
+        flex-direction: column!important;
+        .header__content {
+            .header__title {
+                width: 100%!important;
+                max-width: none!important;
+                text-align: left!important;
+                align-items: flex-start!important;
+                justify-content: flex-start!important;
+                &:not(:has(.hasBackButton)) {
+                    flex-direction: column!important;
+                }
+            }
+        }
+        .footer__content {
+            width: 100%!important;
+            max-width: none!important;
+            padding: 0!important;
+            display: grid!important;
+            grid-template-columns: repeat(auto-fit, minmax(calc(100% / 2), 1fr));
+            justify-content: stretch!important;
+            /deep/ button {
+                width: 100%!important;
+            }
+        }
+    }
+}
+
+.app__header__dropdown__title {
+    background: #8DA2B5;
+    color: #fff;
+    width: 42px;
+    height: 42px;
+    display: grid;
+    place-items: center;
+    border-radius: 100px;
+    border: 2px solid #fff;
+    margin-left: -34px;
+    font-size: 0.7rem;
+    user-select: none;
+    &--active {
+        border-color: #5865f2;
+    }
+}
+
+#credits-amount {
+    margin: 0!important;
+    min-width: 8em;
+    margin: 1rem 1rem 1rem 0;
+    padding: 0.25em 1em;
+    font-size: 0.85rem;
+    line-height: 1.4em;
+    border-radius: 23rem;
+    font-weight: 400;
+    text-align: center;
+    background-color: rgba(29, 161, 241, 0.1);
+    color: #5865F2;
+}
+</style>
+<style lang="scss">
+
+.app-header {
+    width: 100%;
+    padding-top: 1.25rem;
+    box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
+}
+
+.back__button {
+    cursor: pointer;
+    width: 42px;
+    height: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+    border-radius: 100px;
+    transition: background 0.5s;
+    margin-left: -15px;
+    border: 0;
+    background: transparent;
+	color: #32325d;
+    &:focus {
+        outline: none;
+    }
+    &:not(:disabled):hover, &:focus:not(:disabled):hover {
+        background: rgba(0, 0, 0, 0.08);
+    }
+}
+
+.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;
+        h2 {
+            margin-bottom: 0;
+        }
+        .images {
+            margin-left: 10px;
+            display: flex;
+            align-items: center;
+            user-select: none;
+            .user__avatar {
+                cursor: pointer;
+                border: 2px solid transparent;
+                transition: border-color 0.5s;
+                border: 2px solid #fff;
+                background: var(--avatar-color);
+                &--active {
+                    border-color: #5865F2;
+                    z-index: 10;
+                }
+            }
+            img {
+                $size: 42px;
+                display: block;
+                width: $size;
+                height: $size;
+                object-fit: cover;
+                border-radius: 100px;
+                &:not(:first-child) {
+                    margin-left: -10px;
+                }
+            }
+        }
+    }
+}
+</style>