@eturnity/eturnity_reusable_components 1.2.44 → 1.2.45-3d-master.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.44",
+  "version": "1.2.45-3d-master.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -44,7 +44,7 @@
                 <div v-else>
                     <slot name="selector" :selectedValue="selectedValue"></slot>
                 </div>
-                <Caret :isUp="isDropdownOpen" >
+                <Caret :isUp="isDropdownOpen" @click.stop="toggleCaretDropdown" >
                     <icon name="arrow_up" size="12px" :color="caretColor || colorMode=='dark'?'white':'transparentBlack1'"/>
                 </Caret>
             </selectButton>
@@ -274,10 +274,12 @@ const InputWrapper = styled('div', inputAttrs)`
         isActive:false,
         textSearch:"",
         hoveredIndex:0,
+        isClickOutsideActive:false,
       }
     },
     mounted(){
         this.selectedValue=this.value
+        document.addEventListener('click', this.clickOutside)
     },
     beforeDestroy(){
         document.removeEventListener('click', this.clickOutside)
@@ -291,23 +293,18 @@ const InputWrapper = styled('div', inputAttrs)`
         },
         toggleDropdown(){
             if(this.isSearchBarVisible){return}
-            this.isDropdownOpen=!this.isDropdownOpen
-            if (this.isDropdownOpen) {
-                document.addEventListener('click', this.clickOutside)
-            } else {
-                document.removeEventListener('click', this.clickOutside)
-            }
-            
+            this.isDropdownOpen=!this.isDropdownOpen            
+        },
+        toggleCaretDropdown(){
+            this.isDropdownOpen=!this.isDropdownOpen            
         },
         openDropdown(){
             this.focus()
             this.isDropdownOpen=true
-            document.addEventListener('click', this.clickOutside)
         },
         closeDropdown(){
             this.blur()
             this.isDropdownOpen=false
-            document.removeEventListener('click', this.clickOutside)
         },
         optionSelected(e){
             this.selectedValue=e
@@ -339,12 +336,16 @@ const InputWrapper = styled('div', inputAttrs)`
                 if(!el.textContent.toLowerCase().includes(value.toLowerCase())){el.style.display='none'}else{el.style.display='inherit'}
             }))
         },
+        onSelectSlotClick(){
+            this.toggleDropdown()
+        },
         clickOutside(event) {
-            console.log("click outside",event)
+            if(!this.isClickOutsideActive) return
             if (this.$el==event.target || this.$el.contains(event.target)) {
                 return
-            }
+            }else{
             this.closeDropdown()
+            }
         },
         onKeyDown(e){
             if(e.key=='ArrowDown'){
@@ -381,6 +382,15 @@ const InputWrapper = styled('div', inputAttrs)`
             this.selectedValue=val
         },
         isDropdownOpen(val){
+            if(val){
+                setTimeout(()=>{
+                    this.isClickOutsideActive=true
+                },10)
+            }else{
+                setTimeout(()=>{
+                    this.isClickOutsideActive=false
+                },10)
+            }
             if(val && this.isSearchable){
                 this.$nextTick(()=>{if(this.$refs.searchInput){this.$refs.searchInput.$el.querySelector('input').focus()}})
             }

package/src/helpers/translateLang.js

@@ -1,102 +1,80 @@
 export const translateLang = (lang) => {
-  // this is needed so that we use the correct keys for Phrase
-  if (lang === 'en') {
-    return 'english'
-  } else if (lang === 'en-us') {
-    return 'english_us'
-  } else if (lang === 'en-gb') {
-    return 'english_uk'
-  } else if (lang === 'de' || lang === 'de-de') {
-    return 'german'
-  } else if (lang === 'de-ch') {
-    return 'german_ch'
-  } else if (lang === 'de-lu') {
-    return 'german_lu'
-  } else if (lang === 'de-be') {
-    return 'german_be'
-  } else if (lang === 'fr' || lang === 'fr-fr') {
-    return 'french'
-  } else if (lang === 'fr-be') {
-    return 'french_be'
-  } else if (lang === 'fr-lu') {
-    return 'french_lu'
-  } else if (lang === 'fr-ch') {
-    return 'french_ch'
-  } else if (lang === 'it' || lang === 'it-it') {
-    return 'italian'
-  } else if (lang === 'it-ch') {
-    return 'italian_ch'
-  } else if (lang === 'da-dk') {
-    return 'danish'
-  } else if (lang === 'pl-pl') {
-    return 'polish'
-  } else if (lang === 'sv-se') {
-    return 'swedish'
-  } else if (lang === 'no-no') {
-    return 'norwegian'
-  } else if (lang === 'nl-nl' || lang === 'nl') {
-    return 'nl-nl'
-  } else if (lang === 'cs') {
-    return 'czech'
-  } else if (lang === 'fi-fi') {
-    return 'finnish'
-  } else if (lang === 'pt-pt') {
-    return 'portuguese'
-  } else if (lang === 'es-es') {
-    return 'spanish'
-  } else {
-    return lang
-  }
+    // this is needed so that we use the correct keys for Phrase
+    if (lang === 'en') {
+        return 'english'
+    } else if (lang === 'en-us') {
+        return 'english_us'
+    } else if (lang === 'en-gb') {
+        return 'english_uk'
+    } else if (lang === 'de' || lang === 'de-de') {
+        return 'german'
+    } else if (lang === 'de-ch') {
+        return 'german_ch'
+    } else if (lang === 'de-lu') {
+        return 'german_lu'
+    } else if (lang === 'de-be') {
+        return 'german_be'
+    } else if (lang === 'fr' || lang === 'fr-fr') {
+        return 'french'
+    } else if (lang === 'fr-be') {
+        return 'french_be'
+    } else if (lang === 'fr-lu') {
+        return 'french_lu'
+    } else if (lang === 'fr-ch') {
+        return 'french_ch'
+    } else if (lang === 'it' || lang === 'it-it') {
+        return 'italian'
+    } else if (lang === 'it-ch') {
+        return 'italian_ch'
+    } else if (lang === 'da-dk') {
+        return 'danish'
+    } else if (lang === 'pl-pl') {
+        return 'polish'
+    } else if (lang === 'sv-se') {
+        return 'swedish'
+    } else if (lang === 'no-no') {
+        return 'norwegian'
+    } else if (lang === 'nl-nl' || lang === 'nl') {
+        return 'nl-nl'
+    } else if (lang === 'cs') {
+        return 'czech'
+    } else if (lang === 'fi-fi') {
+        return 'finnish'
+    } else if (lang === 'pt-pt') {
+        return 'portuguese'
+    } else if (lang === 'es-es') {
+        return 'spanish'
+    } else {
+        return lang
+    }
 }
 
 export const datePickerLang = (lang) => {
-  if (
-    lang === 'de-de' ||
-    lang === 'de-ch' ||
-    lang === 'de-lu' ||
-    lang === 'de-be'
-  ) {
-    return 'de'
-  } else if (
-    lang === 'fr-fr' ||
-    lang === 'fr-ch' ||
-    lang === 'fr-lu' ||
-    lang === 'fr-be'
-  ) {
-    return 'fr'
-  } else if (lang === 'it-it' || lang === 'it-ch') {
-    return 'it'
-  } else {
-    return lang
-  }
+    if (lang === 'de-de' || lang === 'de-ch' || lang === 'de-lu' || lang === 'de-be') {
+        return 'de'
+    } else if (lang === 'fr-fr' || lang === 'fr-ch' || lang === 'fr-lu' || lang === 'fr-be') {
+        return 'fr'
+    } else if (lang === 'it-it' || lang === 'it-ch') {
+        return 'it'
+    } else {
+        return lang
+    }
 }
 
 export const tinyLanguage = (lang) => {
-  if (
-    lang === 'de' ||
-    lang === 'de-de' ||
-    lang === 'de-ch' ||
-    lang === 'de-lu' ||
-    lang === 'de-be'
-  ) {
-    return 'de'
-  } else if (
-    lang === 'fr' ||
-    lang === 'fr-fr' ||
-    lang === 'fr-ch' ||
-    lang === 'fr-lu' ||
-    lang === 'fr-be'
-  ) {
-    return 'fr_FR'
-  } else if (lang === 'it' || lang === 'it-it' || lang === 'it-ch') {
-    return 'it'
-  } else if (lang === 'en-us') {
-    return null
-  } else {
-    let langCode = lang.replace(/-/g, '_').split('')
-    langCode[3] = langCode[3].toUpperCase()
-    langCode[4] = langCode[4].toUpperCase()
-    langCode = langCode.join('')
-    return langCode
-  }
+    if (lang === 'de' || lang === 'de-de'  || lang === 'de-ch' || lang === 'de-lu' || lang === 'de-be') {
+        return 'de'
+    } else if (lang === 'fr' || lang === 'fr-fr' || lang === 'fr-ch' || lang === 'fr-lu' || lang === 'fr-be') {
+        return 'fr_FR'
+    } else if (lang === 'it' || lang === 'it-it' || lang === 'it-ch') {
+        return 'it-IT'
+    } else if (lang === 'en-us') {
+        return null
+    } else {
+        let langCode = lang.replace(/-/g, '_').split('')
+        langCode[3] = langCode[3].toUpperCase()
+        langCode[4] = langCode[4].toUpperCase()
+        langCode = langCode.join('')
+        return langCode
+    }
 }