@eturnity/eturnity_reusable_components 1.2.48-EPDM-5846.1 → 1.2.48-EPDM-5846.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.48-EPDM-5846.1",
+  "version": "1.2.48-EPDM-5846.3",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -1,6 +1,6 @@
 <template>
-    <Container 
-        :selectWidth="selectWidth" 
+    <Container
+        :selectWidth="selectWidth"
         @mouseenter="mouseEnterHandler"
         @mouseleave="mouseLeaveHandler"
         >
@@ -9,7 +9,7 @@
         :alignItems="alignItems"
         >
             <label-wrapper v-if="label"  >
-                <input-label 
+                <input-label
                     :fontColor="labelFontColor || colorMode=='dark'?'white':'eturnityGrey'"
                     :fontSize="fontSize">{{ label }}</input-label>
                 <info-text
@@ -21,35 +21,37 @@
                 />
             </label-wrapper>
             <div>
-            <selectButton 
+            <selectButton
                 ref="select"
                 @click="toggleDropdown"
-                :isActive="isActive"
                 :selectHeight="selectHeight"
                 :bgColor="buttonBgColor || colorMode=='dark'?'transparentBlack1':'white'"
                 :fontColor="buttonFontColor || colorMode=='dark'?'white':'black'"
+                :hasError="hasError"
+                :isSearchBarVisible="isSearchBarVisible"
                 @keydown.native="onKeyDown"
                 >
-                <inputText 
+                <inputText
                     v-if="isSearchBarVisible"
                     ref="searchInput"
                     tabindex="0"
                     :noBorder="true"
-                    :inputHeight="selectHeight"
+                    :fontSize="fontSize"
                     backgroundColor="transparent"
                     :fontColor="buttonFontColor || colorMode=='dark'?'white':'black'"
-                    :value="textSearch" 
+                    :value="textSearch"
                     @keydown.stop="onKeyDown"
                     @input-change="searchChange" />
                 <div v-else>
                     <slot name="selector" :selectedValue="selectedValue"></slot>
                 </div>
-                <Caret :isUp="isDropdownOpen" @click.stop="toggleCaretDropdown" >
-                    <icon name="arrow_up" size="12px" :color="caretColor || colorMode=='dark'?'white':'transparentBlack1'"/>
+                <Caret @click.stop="toggleCaretDropdown" >
+                    <icon v-if="isDropdownOpen" name="arrow_up" size="12px" :color="caretColor || colorMode=='dark'?'white':'transparentBlack1'"/>
+                    <icon v-else name="arrow_down" size="12px" :color="caretColor || colorMode=='dark'?'white':'transparentBlack1'"/>
                 </Caret>
             </selectButton>
             <DropdownWrapper>
-            <selectDropdown 
+            <selectDropdown
                 ref="dropdown"
                 v-show="isDropdownOpen"
                 :hoveredIndex="hoveredIndex"
@@ -64,13 +66,13 @@
             </selectDropdown>
             </DropdownWrapper>
             </div>
-        </input-wrapper>    
+        </input-wrapper>
     </Container>
   </template>
-  
+
   <script>
     //How to use it
-    // <Select 
+    // <Select
     //     hoverDropdown="true"
     //     selectWidth="100%"
     //     optionWidth="50%"
@@ -86,23 +88,20 @@
     //     <Option value="3">value three</Option>
     //     <Option value="4">value four</Option>
     //     </template>
-    // </Select> 
-                
+    // </Select>
+
   import styled from 'vue-styled-components'
   import InfoText from '../../infoText'
   import icon from '../../icon'
   import inputText from '../inputText'
-  
-  const caretAttrs={isUp:Boolean}
-  const Caret=styled('div', caretAttrs)`
+
+  const Caret=styled.div`
   position:absolute;
   display:flex;
   align-items:center;
   height:100%;
   right:15px;
-  top:-2px
-  transform: ${props=>!props.isUp?"rotate(180deg)":""};
-  transform-origin: center;
+  padding-top: 5px;
   `
 
   const labelAttrs = { fontSize: String }
@@ -124,13 +123,18 @@ const LabelWrapper = styled.div`
   align-items: center;
   justify-content: start;
 `
-const selectButtonAttrs={bgColor:String,fontColor:String,isActive:Boolean,selectHeight:String}
+const selectButtonAttrs={
+  bgColor: String,
+  fontColor: String,
+  hasError: Boolean,
+  selectHeight: String,
+  isSearchBarVisible: Boolean
+}
 const selectButton = styled('div',selectButtonAttrs)`
     position:relative;
     box-sizing: border-box;
-    border:1px solid red;
     border-radius:4px;
-    padding:0px 10px;
+    padding: ${(props) => props.isSearchBarVisible ? '0 10px 0 0' : '0px 10px' };
     text-align:left;
     border-radius:4px;
     min-height:36px;
@@ -138,7 +142,7 @@ const selectButton = styled('div',selectButtonAttrs)`
     grid-template-columns:auto 40px;
     align-items: center;
     max-height:${props=>props.selectHeight};
-    border:1px solid ${(props)=>props.theme.colors.grey4}
+    border:1px solid ${(props) => props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
     background-color:${(props) => props.theme.colors[props.bgColor]?props.theme.colors[props.bgColor]:props.bgColor};
     color:${(props) => props.theme.colors[props.fontColor]?props.theme.colors[props.fontColor]:props.fontColor};
 `
@@ -182,7 +186,7 @@ const InputWrapper = styled('div', inputAttrs)`
 `
   export default {
     name: 'RCselect',
-  
+
     props: {
         value:{
             required:false,
@@ -247,12 +251,16 @@ const InputWrapper = styled('div', inputAttrs)`
             required:false,
             default:true
         },
+        hasError: {
+          required: false,
+          default: false
+        },
         isAutoSearch:{
             required:false,
             default:true
         }
     },
-  
+
     components: {
         selectButton,
         selectDropdown,
@@ -266,7 +274,7 @@ const InputWrapper = styled('div', inputAttrs)`
         Caret,
         inputText
     },
-  
+
     data() {
       return {
         selectedValue: null,
@@ -293,10 +301,10 @@ const InputWrapper = styled('div', inputAttrs)`
         },
         toggleDropdown(){
             if(this.isSearchBarVisible){return}
-            this.isDropdownOpen=!this.isDropdownOpen            
+            this.isDropdownOpen=!this.isDropdownOpen
         },
         toggleCaretDropdown(){
-            this.isDropdownOpen=!this.isDropdownOpen            
+            this.isDropdownOpen=!this.isDropdownOpen
         },
         openDropdown(){
             this.focus()
@@ -356,7 +364,7 @@ const InputWrapper = styled('div', inputAttrs)`
                 const optionHoveredComponent=this.$refs.dropdown.$children[(this.hoveredIndex-1+this.optionLength)%this.optionLength]
                 this.optionSelected(optionHoveredComponent.$el.dataset.value)
             }
-            
+
         },
         onArrowPress(dir){
             this.hoveredIndex=((this.hoveredIndex+dir+this.optionLength-1)%this.optionLength)+1
@@ -382,6 +390,7 @@ const InputWrapper = styled('div', inputAttrs)`
             this.selectedValue=val
         },
         isDropdownOpen(val){
+            this.$emit('is-dropdown-open', val)
             if(val){
                 setTimeout(()=>{
                     this.isClickOutsideActive=true
@@ -398,4 +407,3 @@ const InputWrapper = styled('div', inputAttrs)`
     }
   }
   </script>
-