@burh/nuxt-core 1.0.340 → 1.0.342

package/components/burh-ds/Filters/FilterWithDropdown.vue

@@ -1,169 +1,228 @@
-<template>
-	<div
-		v-click-outside="dropDownOutsideClick"
-		class="filter__container"
-	>
-		<button
-			class="filter__item"
-			:class="{'filter__item--active': (shouldOpenDropdown) ? isDropdownOpen : isActive}"
-			@click="handleFilterClick()"
-		>
-			<div
-				v-if="status != ''"
-				class="status"
-				:class="`status--${status}`"
-			></div>
-			<p>{{ text }}</p>
-		</button>
-
-		<div
-			v-if="isDropdownOpen"
-			class="filter__dropdown"
-		>
-			<div class="filter__dropdown__content">
-				<slot name="dropdown-content" />
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'filter-with-dropdown',
-	props: {
-		text: {
-			type: String,
-			default: ''
-		},
-		isActive: {
-			type: Boolean,
-			default: false
-		},
-		shouldOpenDropdown: {
-			type: Boolean,
-			default: false
-		},
-		status: {
-			type: String,
-			default: ''
-		}
-	},
-	data() {
-		return {
-			isDropdownOpen: false
-		};
-	},
-	methods: {
-		handleFilterClick() {
-			if (this.shouldOpenDropdown === true) {
-				this.toggleDropdown();
-			} else {
-				this.$emit('filter-click');
-			}
-		},
-		toggleDropdown() {
-			this.isDropdownOpen = !this.isDropdownOpen;
-		},
-		dropDownOutsideClick() {
-			if (this.isDropdownOpen) {
-				this.isDropdownOpen = false;
-			}
-		}
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@keyframes dropdownAnimation {
-    from {
-        margin-top: -5px;
-        opacity: 0;
-    }
-    to {
-        margin-top: 5px;
-        opacity: 1;
-    }
-}
-
-.filter__container {
-    position: relative;
-    z-index: 200;
-    .filter__dropdown {
-        position: absolute;
-        width: 98%;
-        max-width: 350px;
-        min-width: 350px;
-        left: calc(50% + (10px / 2));
-        transform: translateX(-50%);
-        margin-top: 10px;
-        box-shadow: 0 0 20px rgba(0,0,0,0.08);
-        border-radius: 4px;
-        background: #fff;
-        animation: 0.75s dropdownAnimation cubic-bezier(1,0,.09,1.01);
-        border: 1px solid #e9ecef;
-        &__content {
-            padding: 20px;
-        }
-    }
-
-    .filter__item {
-        cursor: pointer;
-        user-select: none;
-        padding: 5px 20px;
-        border-radius: 100px;
-        margin-right: 10px;
-        border: 1px solid #E9ECEF;
-        transition: background 0.5s;
-        display: flex;
-        align-items: center;
-        background: transparent;
-        &:focus {
-            outline: none;
-            background: rgba(31, 140, 235, 0.2);
-            border-color: transparent;
-            p {
-                color: #5865F2;
-            }
-        }
-        &:not(.filter__item--active):hover {
-            background: rgba(174, 182, 190, 0.2);
-            p {
-                color: #1D364B;
-            }
-        }
-        p {
-            margin: 0;
-            font-weight: 400;
-            color: #AEB6BE;
-            transition: color 0.5s;
-        }
-        &--active {
-            background: rgba(31, 140, 235, 0.2);
-            border-color: transparent;
-            p {
-                color: #5865F2;
-            }
-        }
-        .status {
-				width: 10px;
-				height: 10px;
-				background: #AEB6BE;
-				display: block;
-				border-radius: 100px;
-				margin-right: 10px;
-				&--open {
-					background: #3AC089;
-				}
-				&--awaiting {
-					background: #FFCF02;
-				}
-				&--paused {
-					background: #FF539D;
-				}
-				&--ended {
-					background: #0C95FC;
-				}
-			}
-    }
-}
-</style>
+<template>
+	<div>
+		<div
+			v-if="isDropdownOpen"
+			id="backgroundFade"
+		></div>
+		<div
+			v-click-outside="dropDownOutsideClick"
+			class="filter__container"
+			:class="{'filter__container__dropdown--open': isDropdownOpen}"
+			ref="filterContainer"
+		>
+			<button
+				class="filter__item"
+				:class="{'filter__item--active': isDropdownOpen || isActive}"
+				@click="handleFilterClick()"
+			>
+				<div
+					v-if="status != ''"
+					class="status"
+					:class="`status--${status}`"
+				></div>
+				<p>{{ text }}</p>
+			</button>
+
+			<div
+				v-show="isDropdownOpen"
+				class="filter__dropdown"
+				ref="dropdownContainer"
+			>
+				<div class="filter__dropdown__content">
+					<slot name="dropdown-content" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'filter-with-dropdown',
+	props: {
+		text: {
+			type: String,
+			default: ''
+		},
+		isActive: {
+			type: Boolean,
+			default: false
+		},
+		shouldOpenDropdown: {
+			type: Boolean,
+			default: false
+		},
+		status: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			isDropdownOpen: false
+		};
+	},
+	watch: {
+		isDropdownOpen(value) {
+			if (value === true) {
+				if (this.shouldOpenDropdown) {
+					const filterContainer = this.$refs.filterContainer;
+					const dropdownContainer = this.$refs.dropdownContainer;
+
+					dropdownContainer.classList.remove('dropdown-left');
+					dropdownContainer.classList.remove('dropdown-right');
+
+					if (((filterContainer.offsetLeft - (350 / 2)) - 20) < 0) {
+						dropdownContainer.classList.add('dropdown-left');
+					}
+
+					if (((window.innerWidth - filterContainer.offsetLeft - filterContainer.offsetWidth) - (350 / 2) - 20) < 0) {
+						dropdownContainer.classList.add('dropdown-right');
+					}
+				}
+			}
+		},
+	},
+	methods: {
+		handleFilterClick() {
+			if (this.shouldOpenDropdown === true) {
+				this.toggleDropdown();
+			} else {
+				this.$emit('filter-click');
+			}
+		},
+		toggleDropdown() {
+			this.isDropdownOpen = !this.isDropdownOpen;
+		},
+		dropDownOutsideClick() {
+			if (this.isDropdownOpen) {
+				this.isDropdownOpen = false;
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@keyframes fadeIn {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+@keyframes dropdownAnimation {
+    from {
+        margin-top: -5px;
+        opacity: 0;
+    }
+    to {
+        margin-top: 10px;
+        opacity: 1;
+    }
+}
+
+#backgroundFade {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(255, 255, 255, 0.6);
+    z-index: 200;
+    animation: 0.5s fadeIn;
+}
+
+.filter__container__dropdown--open {
+    z-index: 210!important;
+}
+
+.filter__container {
+    position: relative;
+    z-index: 100;
+    margin-bottom: 10px;
+    .filter__dropdown {
+        position: absolute;
+        width: 350px;
+        left: calc(50% + (10px / 2));
+        transform: translateX(-50%);
+        margin-top: 10px;
+        box-shadow: 0 0 20px rgba(0,0,0,0.08);
+        border-radius: 4px;
+        background: #fff;
+        animation: 0.5s dropdownAnimation cubic-bezier(0.65, 0.05, 0.36, 1);
+        border: 1px solid #e9ecef;
+        &.dropdown-left {
+            transform: none;
+            left: 0;
+        }
+        &.dropdown-right {
+            transform: none;
+            left: initial;
+            right: 10px;
+        }
+        &__content {
+            padding: 20px;
+        }
+    }
+
+    .filter__item {
+        cursor: pointer;
+        user-select: none;
+        padding: 5px 20px;
+        border-radius: 100px;
+        margin-right: 10px;
+        border: 1px solid #E9ECEF;
+        transition: background 0.5s;
+        display: flex;
+        align-items: center;
+        background: transparent;
+        &:focus {
+            outline: none;
+            background: rgba(31, 140, 235, 0.2);
+            border-color: transparent;
+            p {
+                color: #5865F2;
+            }
+        }
+        &:not(.filter__item--active):hover {
+            background: rgba(174, 182, 190, 0.2);
+            p {
+                color: #1D364B;
+            }
+        }
+        p {
+            margin: 0;
+            font-weight: 400;
+            color: #AEB6BE;
+            transition: color 0.5s;
+            white-space: nowrap;
+        }
+        &--active {
+            background: rgba(31, 140, 235, 0.2);
+            border-color: transparent;
+            p {
+                color: #5865F2;
+            }
+        }
+        .status {
+				width: 10px;
+				height: 10px;
+				background: #AEB6BE;
+				display: block;
+				border-radius: 100px;
+				margin-right: 10px;
+				&--open {
+					background: #3AC089;
+				}
+				&--awaiting {
+					background: #FFCF02;
+				}
+				&--paused {
+					background: #FF539D;
+				}
+				&--ended {
+					background: #0C95FC;
+				}
+			}
+    }
+}
+</style>

package/components/burh-ds/Inputs/SearchInput.vue

@@ -1,64 +1,64 @@
-<template>
-	<div class="input__container__icon">
-		<label for="search">
-			<i class="fas fa-search"></i>
-		</label>
-		<input type="text" name="search" id="search" :placeholder="placeholder" v-model="searchModel" @change="$emit('change')">
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'search-input',
-	props: {
-		search: String,
-		placeholder: {
-			type: String,
-			default: 'Busque por vaga'
-		}
-	},
-	data() {
-		return {
-			searchModel: null
-		};
-	},
-	mounted() {
-		this.searchModel = this.search;
-	},
-	watch: {
-		search(value) {
-			this.searchModel = value;
-		},
-		searchModel(value) {
-			this.$emit('search', value);
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.input__container__icon {
-	position: relative;
-	display: flex;
-	align-items: center;
-	border-radius: 100px;
-	max-width: 270px;
-	overflow: hidden;
-	border: 1px solid #E9ECEF;
-	input {
-		background: transparent;
-		border: 0;
-		outline: none;
-		padding: 5px 0;
-		width: 100%;
-	}
-	label {
-		margin: 0;
-		display: block;
-	}
-	i {
-		padding: 0 10px;
-		color: #AEB6BE;
-	}
-}
-</style>
+<template>
+	<div class="input__container__icon">
+		<label for="search">
+			<i class="fas fa-search"></i>
+		</label>
+		<input type="text" name="search" id="search" :placeholder="placeholder" v-model="searchModel" @change="$emit('change')">
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'search-input',
+	props: {
+		search: String,
+		placeholder: {
+			type: String,
+			default: 'Busque por vaga'
+		}
+	},
+	data() {
+		return {
+			searchModel: null
+		};
+	},
+	mounted() {
+		this.searchModel = this.search;
+	},
+	watch: {
+		search(value) {
+			this.searchModel = value;
+		},
+		searchModel(value) {
+			this.$emit('search', value);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.input__container__icon {
+	position: relative;
+	display: flex;
+	align-items: center;
+	border-radius: 100px;
+	max-width: 270px;
+	overflow: hidden;
+	border: 1px solid #E9ECEF;
+	input {
+		background: transparent;
+		border: 0;
+		outline: none;
+		padding: 5px 0;
+		width: 100%;
+	}
+	label {
+		margin: 0;
+		display: block;
+	}
+	i {
+		padding: 0 10px;
+		color: #AEB6BE;
+	}
+}
+</style>