@eturnity/eturnity_reusable_components 6.46.5-EPDM-9185.0 → 6.46.5-EPDM-8891.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.46.5-EPDM-9185.0",
+  "version": "6.46.5-EPDM-8891.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/inputs/select/index.vue

@@ -408,7 +408,7 @@ export default {
       isActive: false,
       textSearch: '',
       hoveredIndex: 0,
-      hoveredValue:null,
+      hoveredValue: null,
       isClickOutsideActive: false
     }
   },
@@ -447,7 +447,7 @@ export default {
       this.$emit('input-change', e)
     },
     optionHovered(e) {
-      this.hoveredValue=e
+      this.hoveredValue = e
     },
     mouseEnterHandler() {
       if (this.hoverDropdown) {
@@ -502,14 +502,16 @@ export default {
     },
     onArrowPress(dir) {
       let newHoveredElem
-      const currentHoveredElem=this.$refs.dropdown.$el.querySelector(`[data-value="${this.hoveredValue}"]`);
-      if(currentHoveredElem){
-        if(dir>0){
-          newHoveredElem=currentHoveredElem.nextElementSibling
-        }else{
-          newHoveredElem=currentHoveredElem.previousElementSibling
+      const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
+        `[data-value="${this.hoveredValue}"]`
+      )
+      if (currentHoveredElem) {
+        if (dir > 0) {
+          newHoveredElem = currentHoveredElem.nextElementSibling
+        } else {
+          newHoveredElem = currentHoveredElem.previousElementSibling
         }
-        if(newHoveredElem){
+        if (newHoveredElem) {
           this.hoveredValue = newHoveredElem.getAttribute('data-value')
           const topPos = newHoveredElem.offsetTop
           this.$refs.dropdown.$el.scrollTop = topPos
@@ -520,12 +522,20 @@ export default {
   computed: {
     optionLength() {
       if (this.isDropdownOpen) {
-        return this.$refs.dropdown.$children.length
+        // this filterRef is needed to check for the # of children on Filter dropdowns
+        const filterRef =
+          this.$refs.dropdown.$children &&
+          this.$refs.dropdown.$children.length &&
+          this.$refs.dropdown.$children[0].$children
+            ? this.$refs.dropdown.$children[0].$children
+            : this.$refs.dropdown.$children
+        return filterRef.length
       } else {
         return 0
       }
     },
     isSearchBarVisible() {
+      console.log('this.optionLength', this.optionLength)
       return this.isSearchable && this.optionLength >= 5 && this.isDropdownOpen
     }
   },

package/src/components/projectMarker/index.vue

@@ -1,8 +1,7 @@
 <template>
-  <page-container>
+  <page-container :withDate="!!date">
     <marker-container
       v-if="markerData"
-      :withDate="!!date"
       :backgroundColor="markerData.color"
       :hasIcon="!!iconName"
       :isEditionAllowed="editionAllowed"
@@ -97,9 +96,13 @@ import DeleteIcon from '../deleteIcon'
 import PageSubtitle from '../pageSubtitle'
 import MainButton from '../buttons/mainButton'
 
-const PageContainer = styled.div`
+const PageContainerAttrs = {
+  withDate: Boolean
+}
+const PageContainer = styled('div', PageContainerAttrs)`
   display: flex;
   align-items: center;
+  gap: 10px;
   font-size: 12px;
   line-height: 14px;
 `
@@ -117,7 +120,6 @@ const CtaContainer = styled.div`
 
 const MarkerAttrs = {
   backgroundColor: String,
-  withDate: Boolean,
   hasIcon: Boolean,
   isEditionAllowed: Boolean,
   isActive: Boolean,
@@ -134,8 +136,7 @@ const MarkerContainer = styled('div', MarkerAttrs)`
   color: ${(props) => props.theme.colors.white};
   background-color: ${(props) =>
   props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border: 1px solid ${(props) => props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border-radius: ${(props) => props.withDate ? '4px 0 0 4px' : '4px'};
+  border-radius: 4px;
   white-space: nowrap;
   cursor: ${(props) => props.isEditionAllowed ? 'pointer' : props.cursor};
 
@@ -193,12 +194,7 @@ const IconContainer = styled.div`
   line-height: 0;
 `
 
-const Date = styled.div`
-  padding: 2px 5px;
-  border: 1px solid ${(props) => props.theme.colors.grey4};
-  border-left: none;
-  border-radius: 0 4px 4px 0;
-`
+const Date = styled.div``
 
 export default {
   name: "project-marker",