@burh/nuxt-core 1.0.340 → 1.0.342

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

@@ -1,146 +1,153 @@
-<template>
-	<div class="job__status" v-if="selectedOptionId">
-		<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);
-		}
-	}
-};
-</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>
+<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>

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

@@ -1,71 +1,91 @@
-<template>
-	<div class="base__filter">
-		<div class="base__filter__content">
-			<slot />
-		</div>
-
-		<div v-if="showFooter" class="base__filter__footer">
-			<div>
-				<button
-					@click="$emit('filter-clear')"
-					class="base__filter__button clear"
-				>
-					<span>Limpar</span>
-				</button>
-			</div>
-			<div>
-				<button
-					@click="$emit('filter-apply')"
-					class="base__filter__button apply"
-				>
-					<span>Filtrar</span>
-				</button>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'base-filter-container',
-	props: {
-		showFooter: {
-			type: Boolean,
-			default: true
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.base__filter {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    min-height: 200px;
-    &__footer {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .base__filter__button {
-            background: transparent;
-            border: none;
-            color: #32325d;
-            padding: 10px 20px;
-            border-radius: 4px;
-            transition: background 0.5s, color 0.5s;
-            &:focus {
-                outline: none;
-            }
-            &.clear:hover {
-                background: rgba(222, 33, 75, 0.1);
-                color: #de214b;
-            }
-            &.apply:hover {
-                background: rgba(88, 101, 242, 0.1);
-                color: #5865F2;
-            }
-        }
-    }
-}
-</style>
+<template>
+	<div class="base__filter">
+		<div class="base__filter__content">
+			<slot />
+		</div>
+
+		<div v-if="showFooter" class="base__filter__footer">
+			<div>
+				<button
+					@click="$emit('filter-clear')"
+					class="base__filter__button clear"
+				>
+					<span>Limpar</span>
+				</button>
+			</div>
+			<div>
+				<button
+					@click="$emit('filter-apply')"
+					class="base__filter__button apply"
+				>
+					<span>Filtrar</span>
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'base-filter-container',
+	props: {
+		showFooter: {
+			type: Boolean,
+			default: true
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.base__filter {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    max-height: 350px;
+    &__content {
+        max-height: calc(350px - 44px);
+        overflow: hidden;
+        overflow-y: auto;
+        &::-webkit-scrollbar-track {
+			border-radius: 10px;
+			background-color: #f5f5f5;
+		}
+
+		&::-webkit-scrollbar {
+			width: 4px;
+			background-color: #f5f5f5;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			border-radius: 10px;
+			background-color: #e9e8e8;
+		}
+    }
+    &__footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 20px;
+        .base__filter__button {
+            background: transparent;
+            border: none;
+            color: #32325d;
+            padding: 10px 20px;
+            border-radius: 4px;
+            transition: background 0.5s, color 0.5s;
+            &:focus {
+                outline: none;
+            }
+            &.clear:hover {
+                background: rgba(222, 33, 75, 0.1);
+                color: #de214b;
+            }
+            &.apply:hover {
+                background: rgba(88, 101, 242, 0.1);
+                color: #5865F2;
+            }
+        }
+    }
+}
+</style>