@burh/nuxt-core 1.0.391 → 1.0.392

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burh/nuxt-core",
-  "version": "1.0.391",
+  "version": "1.0.392",
   "description": "Design System and Components.",
   "author": "Burh",
   "scripts": {

package/components/burh-ds/Cards/RecruitmentCard.vue

@@ -1,243 +0,0 @@
-<template>
-	<nuxt-link :to="`/recrutamento/vaga/${job.id}`" class="recruitment__card">
-		<article>
-			<header class="recruitment__card__header">
-				<div class="recruitment__card__header__status">
-					<job-status-dropdown
-						:status="job.status"
-						@select="handleChangeJobStatus"
-					/>
-				</div>
-				<div class="recruitment__card__header__actions">
-					<el-tooltip placement="top" content="Anotações">
-						<button
-							class="action__item"
-							@click.stop.prevent="$emit('notes-click')"
-						>
-							<i class="far fa-comment-alt"></i>
-						</button>
-					</el-tooltip>
-
-					<el-tooltip placement="top" content="Compartilhar">
-						<button
-							class="action__item"
-							@click.stop.prevent="$emit('share-click')"
-						>
-							<i class="fas fa-share-alt"></i>
-						</button>
-					</el-tooltip>
-				</div>
-			</header>
-
-			<section class="recruitment__card__content">
-				<span class="recruitment__card__content__date">Publicada {{fromNow(job.published_at)}}</span>
-				<h2 class="recruitment__card__content__title">
-					{{ job.title }}
-					<el-tooltip v-if="job.handicapped" placement="top" content="PCD">
-						<i class="fas fa-wheelchair pcd"></i>
-					</el-tooltip>
-					<el-tooltip v-if="job.is_private" placement="top" content="Privada">
-						<i v-if="job.is_private" class="fas fa-lock pcd"></i>
-					</el-tooltip>
-
-					<el-tooltip v-if="job.is_internal" placement="top" content="Interna">
-						<i v-if="job.is_internal" class="fas fa-building pcd"></i>
-					</el-tooltip>
-
-					<el-tooltip v-if="job.is_urgency" placement="top" content="Urgente">
-						<i v-if="job.is_urgency" class="fas fa-clock pcd"></i>
-					</el-tooltip>
-				</h2>
-				<span class="recruitment__card__content__id">{{ job.id }}</span>
-
-				<div class="recruitment__card__info">
-					<p class="recruitment__card__info__text"><span>{{ job.info.applieds }}</span>Inscritos</p>
-					<p class="recruitment__card__info__text"><span>{{ job.info.positions }}</span>Posição</p>
-					<p class="recruitment__card__info__text"><span>{{ job.info.hireds }}</span>Contratados</p>
-					<p class="recruitment__card__info__text"><span>{{ job.info.reproveds }}</span>Reprovados</p>
-				</div>
-			</section>
-
-			<footer class="recruitment__card__footer">
-				<p class="recruitment__card__footer__title">EQUIPE RESPONSÁVEL</p>
-				<div class="recruitment__card__footer__images">
-					<el-tooltip
-						v-for="user in job.team"
-						:key="user.id"
-						placement="top"
-						:content="user.name"
-					>
-						<img
-							:src="(user.avatar) ? user.avatar : getNameInitials(user.name, user.last_name)"
-							:alt="user.name"
-						>
-					</el-tooltip>
-				</div>
-			</footer>
-		</article>
-	</nuxt-link>
-</template>
-
-<script>
-import moment from 'moment';
-import 'moment/locale/pt-br';
-
-import JobStatusDropdown from '@burh/nuxt-core/components/burh-ds/Dropdown/JobStatusDropdown.vue';
-
-export default {
-	name: 'recruitment-card',
-	components: {
-		JobStatusDropdown
-	},
-	props: {
-		job: {
-			type: Object,
-			default: () => []
-		}
-	},
-	methods: {
-		getNameInitials(name, last_name) {
-			const avatarUrl = process.env.routes.avatar;
-
-			let userAvatarName;
-
-			if (name && last_name) {
-				userAvatarName = `${name.toUpperCase().charAt(0)}${last_name.toUpperCase().charAt(0)}`;
-			} else if (name && last_name === null) {
-				userAvatarName = name;
-			} else {
-				userAvatarName = 'BURH';
-			}
-
-			return avatarUrl.replace(':size', '64x64').replace(':initials', userAvatarName);
-		},
-		fromNow(date, format = 'YYYYMMDD') {
-			return moment(date, format).fromNow();
-		},
-		handleChangeJobStatus(id) {
-			this.$emit('select', id);
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.recruitment__card {
-    cursor: pointer;
-    background: #fff;
-    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
-    padding: 20px;
-    border-radius: 4px;
-    border: none;
-    text-align: initial;
-    color: #1D364B;
-    transition: transform 0.25s;
-    &:focus {
-        outline: none;
-        transform: translateY(-5px);
-    }
-    &:hover {
-        transform: translateY(-5px);
-    }
-
-    &__header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 5px 0;
-        &__actions {
-            display: flex;
-            align-items: center;
-            .action__item {
-                cursor: pointer;
-                width: 42px;
-                height: 42px;
-                border-radius: 100px;
-                transition: background 0.5s;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background: transparent;
-                border: 0;
-                position: relative;
-                &:not(:disabled):hover {
-                    background: rgba(0, 0, 0, 0.08);
-                }
-                &:focus {
-                    outline: none;
-                    background: rgba(0, 0, 0, 0.08);
-                }
-                &:not(:first-child) {
-                    margin-left: 5px;
-                }
-                i {
-                    color: #AEB6BE;
-                }
-            }
-        }
-    }
-
-    &__content {
-        &__date {
-            font-size: 0.875rem;
-            font-weight: 400;
-            color: #AEB6BE;
-        }
-        &__title {
-            font-size: 1.275rem;
-            color: #1D364B;
-            margin-bottom: 0;
-            .pcd {
-                color: #1F8CEB;
-                margin-left: 5px;
-            }
-        }
-        &__id {
-            font-size: 0.875rem;
-            font-weight: 600;
-            color: #525F7F;
-        }
-    }
-
-    &__info {
-        padding: 20px 0;
-        &__text {
-            margin-bottom: 0;
-            font-size: 1rem;
-            font-weight: 500;
-            span {
-                margin-right: 5px;
-                color: #1F8CEB;
-            }
-        }
-    }
-
-    &__footer {
-        border-top: 1px solid #E9E9E9;
-        padding-top: 10px;
-        &__title {
-            color: #525F7F;
-            font-size: 0.875rem;
-            font-weight: 600;
-            margin-bottom: 0;
-        }
-        &__images {
-            display: flex;
-            align-items: center;
-            user-select: none;
-            img {
-                $size: 32px;
-                display: block;
-                width: $size;
-                height: $size;
-                object-fit: cover;
-                border-radius: 100px;
-                border: 2px solid #fff;
-                &:not(:first-child) {
-                    margin-left: -10px;
-                }
-            }
-        }
-    }
-}
-</style>

package/components/burh-ds/Dropdown/JobStatusDropdown.vue

@@ -1,153 +0,0 @@
-<template>
-	<div
-		v-if="selectedOptionId"
-		v-click-outside="dropDownOutsideClick"
-		class="job__status"
-	>
-		<p class="job__status__title" @click.stop.prevent="toggleDropdown">
-			<span :class="`color--${options[(selectedOptionId - 1)].color}`"></span>
-			{{ options[(selectedOptionId - 1)].title }}
-			<i class="fas fa-caret-down"></i>
-		</p>
-		<ul class="job__status__dropdown" :class="{ 'job__status__dropdown--open': isDropdownOpen }">
-			<li
-				v-for="item in options"
-				:key="item.id"
-			>
-				<p
-					class="job__status__title"
-					v-if="item.id !== selectedOptionId"
-					@click.stop.prevent="selectOption(item.id)"
-				>
-					<span :class="`color--${item.color}`"></span>
-					{{ item.title }}
-				</p>
-			</li>
-		</ul>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'job-status-dropdown',
-	props: {
-		status: {
-			type: Number,
-			default: 1
-		}
-	},
-	data() {
-		return {
-			isDropdownOpen: false,
-			selectedOptionId: null,
-			options: [
-				{
-					id: 1,
-					title: 'Aberta',
-					color: 'green'
-				},
-				{
-					id: 2,
-					title: 'Em Análise',
-					color: 'yellow'
-				},
-				{
-					id: 3,
-					title: 'Pausada',
-					color: 'pink'
-				},
-				{
-					id: 4,
-					title: 'Finalizada',
-					color: 'blue'
-				}
-			]
-		};
-	},
-	mounted() {
-		this.selectedOptionId = this.status;
-	},
-	methods: {
-		toggleDropdown() {
-			this.isDropdownOpen = !this.isDropdownOpen;
-		},
-		selectOption(id) {
-			this.selectedOptionId = id;
-			this.isDropdownOpen = false;
-			this.$emit('select', id);
-		},
-		dropDownOutsideClick() {
-			this.isDropdownOpen = false;
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.job__status {
-    position: relative;
-    z-index: 120;
-    &__dropdown {
-        position: absolute;
-        left: -20px;
-        transform: translateY(-10px);
-        opacity: 0;
-        pointer-events: none;
-        background: #fff;
-        box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.2);
-        list-style: none;
-        border-radius: 4px;
-        overflow: hidden;
-        min-width: 220px;
-        padding: 0!important;
-        margin: 0!important;
-        transition: transform 0.3s, opacity 0.3s;
-        transform-origin: top;
-        &--open {
-            transform: translateY(10px);
-            opacity: 1;
-            pointer-events: all;
-        }
-        li {
-            display: block;
-                p {
-                    padding: 15px 20px;
-                    transition: background 0.5s, color 0.5s;
-                    &:hover {
-                        background: #F6F9FC;
-                        color: #1F8CEB;
-                    }
-            }
-        }
-    }
-    &__title {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        user-select: none;
-        margin: 0!important;
-        span {
-            display: block;
-            border-radius: 100px;
-            width: 12px;
-            height: 12px;
-            margin-right: 10px;
-            &.color--green {
-                background: #3AC089;
-            }
-            &.color--yellow {
-                background: #FFCF02;
-            }
-            &.color--pink {
-                background: #FF539D;
-            }
-            &.color--blue {
-                background: #0C95FC;
-            }
-        }
-        i {
-            margin-left: 10px;
-        }
-    }
-}
-</style>