@burh/nuxt-core 1.0.381 → 1.0.383

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

@@ -1,228 +1,228 @@
-<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>
+<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/Modals/AddCustomerModal.vue

@@ -114,7 +114,7 @@
 									filterable
 									remote
 									required
-									:auto-complete="`new-city-${new Date().getTime()}`"
+									auto-complete="off"
 									:class="{'is-invalid': errors[0]}"
 									:remote-method="getCityListFiltered"
 									:loading="isSelectLoading"

package/package.json

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