@burh/nuxt-core 1.0.503 → 1.0.505

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

@@ -1,289 +1,289 @@
-<template>
-	<div :class="{'filter__with__dropdown' : isDropdownOpen}">
-		<div
-			v-if="isDropdownOpen"
-			id="backgroundFade"
-			@mousedown="dropDownOutsideClick"
-		></div>
-		<div
-			ref="filterContainer"
-			class="filter__container"
-			:class="{'filter__container__dropdown--open': isDropdownOpen}"
-			:style="`--filter-text-color: ${this.baseColor}; --filter-base-color: ${this.baseColor}22`"
-		>
-			<button
-				class="filter__item"
-				:class="{'filter__item--active': isDropdownOpen || isActive}"
-				:disabled="disabled"
-				@click="handleFilterClick()"
-			>
-				<div
-					v-if="status != ''"
-					class="status"
-					:class="`status--${status}`"
-				/>
-
-				<slot name="button-left" />
-
-				<p>{{ text }}</p>
-
-				<slot name="button-right" />
-			</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: ''
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		baseColor: {
-			type: String,
-			default: '#5865F2'
-		}
-	},
-	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;
-			}
-		}
-	},
-	mounted() {
-		this.$bus.$on('close-dropdown', () => this.isDropdownOpen = false);
-	},
-	beforeDestroy() {
-		this.$bus.$off('close-dropdown');
-	}
-};
-</script>
-
-<style lang="scss">
-.el-select-dropdown.el-popper {
-    z-index: 2147483020!important;
-}
-</style>
-
-<style lang="scss" scoped>
-@keyframes fadeIn {
-	from { opacity: 0; }
-	to { opacity: 1; }
-}
-
-@keyframes slideInUp {
-	from { opacity: 0; transform: translateY(20px) }
-	to { opacity: 1; transform: translateY(0) }
-}
-
-@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: 1050;
-    animation: 0.5s fadeIn;
-}
-
-.filter__with__dropdown {
-    @media (max-width: 820px) {
-        & {
-            z-index: 2147483010;
-        }
-    }
-}
-
-.filter__container__dropdown--open {
-    z-index: 1060!important;
-}
-
-.filter__container {
-    $baseColor: var(--filter-base-color);
-    $textColor: var(--filter-text-color);
-
-    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;
-        @media (min-width: 821px) {
-            &.dropdown-left {
-                transform: none;
-                left: 0;
-            }
-            &.dropdown-right {
-                transform: none;
-                left: initial;
-                right: 10px;
-            }
-        }
-        &__content {
-            padding: 20px;
-        }
-        @media (max-width: 820px) {
-            & {
-                position: fixed;
-                bottom: 0;
-                width: 98%;
-                margin: 0 auto;
-                left: 0!important;
-                right: 0!important;
-                bottom: 20px;
-                transform: translateX(0)!important;
-                animation: 0.35s slideInUp cubic-bezier(0.65, 0.05, 0.36, 1);
-            }
-        }
-    }
-
-    .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: $baseColor;
-            border-color: transparent;
-            p {
-                color: $textColor;
-            }
-        }
-        &:not(.filter__item--active):not(:disabled):hover {
-            background: rgba(174, 182, 190, 0.2);
-            p {
-                color: #1D364B;
-            }
-        }
-        &:not(.filter__item--active):disabled {
-            background: #E9ECEF!important;;
-        }
-        p {
-            margin: 0;
-            font-weight: 400;
-            color: #AEB6BE;
-            transition: color 0.5s;
-            white-space: nowrap;
-        }
-        &--active {
-            background: $baseColor;
-            border-color: transparent;
-            p {
-                color: $textColor;
-            }
-        }
-        .status {
-				width: 10px;
-				height: 10px;
-				background: #AEB6BE;
-				display: block;
-				border-radius: 100px;
-				margin-right: 10px;
-				&--open {
-					background: #3AC089;
-				}
-				&--paused {
-					background: #FFCF02;
-				}
-				&--canceled {
-					background: #8DA2B5;
-				}
-				&--ended {
-					background: #0C95FC;
-				}
-			}
-    }
-}
-</style>
+<template>
+	<div :class="{'filter__with__dropdown' : isDropdownOpen}">
+		<div
+			v-if="isDropdownOpen"
+			id="backgroundFade"
+			@mousedown="dropDownOutsideClick"
+		></div>
+		<div
+			ref="filterContainer"
+			class="filter__container"
+			:class="{'filter__container__dropdown--open': isDropdownOpen}"
+			:style="`--filter-text-color: ${this.baseColor}; --filter-base-color: ${this.baseColor}22`"
+		>
+			<button
+				class="filter__item"
+				:class="{'filter__item--active': isDropdownOpen || isActive}"
+				:disabled="disabled"
+				@click="handleFilterClick()"
+			>
+				<div
+					v-if="status != ''"
+					class="status"
+					:class="`status--${status}`"
+				/>
+
+				<slot name="button-left" />
+
+				<p>{{ text }}</p>
+
+				<slot name="button-right" />
+			</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: ''
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		baseColor: {
+			type: String,
+			default: '#5865F2'
+		}
+	},
+	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;
+			}
+		}
+	},
+	mounted() {
+		this.$bus.$on('close-dropdown', () => this.isDropdownOpen = false);
+	},
+	beforeDestroy() {
+		this.$bus.$off('close-dropdown');
+	}
+};
+</script>
+
+<style lang="scss">
+.el-select-dropdown.el-popper {
+    z-index: 2147483020!important;
+}
+</style>
+
+<style lang="scss" scoped>
+@keyframes fadeIn {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+@keyframes slideInUp {
+	from { opacity: 0; transform: translateY(20px) }
+	to { opacity: 1; transform: translateY(0) }
+}
+
+@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: 1050;
+    animation: 0.5s fadeIn;
+}
+
+.filter__with__dropdown {
+    @media (max-width: 820px) {
+        & {
+            z-index: 2147483010;
+        }
+    }
+}
+
+.filter__container__dropdown--open {
+    z-index: 1060!important;
+}
+
+.filter__container {
+    $baseColor: var(--filter-base-color);
+    $textColor: var(--filter-text-color);
+
+    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;
+        @media (min-width: 821px) {
+            &.dropdown-left {
+                transform: none;
+                left: 0;
+            }
+            &.dropdown-right {
+                transform: none;
+                left: initial;
+                right: 10px;
+            }
+        }
+        &__content {
+            padding: 20px;
+        }
+        @media (max-width: 820px) {
+            & {
+                position: fixed;
+                bottom: 0;
+                width: 98%;
+                margin: 0 auto;
+                left: 0!important;
+                right: 0!important;
+                bottom: 20px;
+                transform: translateX(0)!important;
+                animation: 0.35s slideInUp cubic-bezier(0.65, 0.05, 0.36, 1);
+            }
+        }
+    }
+
+    .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: $baseColor;
+            border-color: transparent;
+            p {
+                color: $textColor;
+            }
+        }
+        &:not(.filter__item--active):not(:disabled):hover {
+            background: rgba(174, 182, 190, 0.2);
+            p {
+                color: #1D364B;
+            }
+        }
+        &:not(.filter__item--active):disabled {
+            background: #E9ECEF!important;;
+        }
+        p {
+            margin: 0;
+            font-weight: 400;
+            color: #AEB6BE;
+            transition: color 0.5s;
+            white-space: nowrap;
+        }
+        &--active {
+            background: $baseColor;
+            border-color: transparent;
+            p {
+                color: $textColor;
+            }
+        }
+        .status {
+				width: 10px;
+				height: 10px;
+				background: #AEB6BE;
+				display: block;
+				border-radius: 100px;
+				margin-right: 10px;
+				&--open {
+					background: #3AC089;
+				}
+				&--paused {
+					background: #FFCF02;
+				}
+				&--canceled {
+					background: #8DA2B5;
+				}
+				&--ended {
+					background: #0C95FC;
+				}
+			}
+    }
+}
+</style>