@eturnity/eturnity_reusable_components 1.2.48-EPDM-5846.2 → 1.2.48-EPDM-5846.4

package/package.json

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

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

@@ -24,11 +24,11 @@
             <selectButton
                 ref="select"
                 @click="toggleDropdown"
-                :isDropdownOpen="isDropdownOpen"
                 :selectHeight="selectHeight"
                 :bgColor="buttonBgColor || colorMode=='dark'?'transparentBlack1':'white'"
                 :fontColor="buttonFontColor || colorMode=='dark'?'white':'black'"
                 :hasError="hasError"
+                :isSearchBarVisible="isSearchBarVisible"
                 @keydown.native="onKeyDown"
                 >
                 <inputText
@@ -36,7 +36,7 @@
                     ref="searchInput"
                     tabindex="0"
                     :noBorder="true"
-                    :inputHeight="selectHeight"
+                    :fontSize="fontSize"
                     backgroundColor="transparent"
                     :fontColor="buttonFontColor || colorMode=='dark'?'white':'black'"
                     :value="textSearch"
@@ -45,8 +45,9 @@
                 <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>
@@ -94,16 +95,13 @@
   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 }
@@ -130,13 +128,13 @@ const selectButtonAttrs={
   fontColor: String,
   hasError: Boolean,
   selectHeight: String,
-  isDropdownOpen: Boolean
+  isSearchBarVisible: Boolean
 }
 const selectButton = styled('div',selectButtonAttrs)`
     position:relative;
     box-sizing: border-box;
     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;
@@ -144,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.hasError && !props.isDropdownOpen ? props.theme.colors.red : 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};
 `

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

@@ -3,7 +3,7 @@
         <slot></slot>
     </optionContainer>
   </template>
-  
+
   <script>
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
@@ -15,7 +15,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    padding: 12px 15px;
+    padding: 12px 10px;
     gap: 14px;
     width:100%;
     box-sizing:inherit;
@@ -23,10 +23,10 @@
       background-color:${(props) => props.theme.colors[props.hoveredBgColor]?props.theme.colors[props.hoveredBgColor]:props.hoveredBgColor};
     }
   `
-  
+
   export default {
     name: 'RCoption',
-  
+
     props: {
       value: {
         required: true
@@ -39,9 +39,9 @@
         default:'light'
       }
     },
-  
+
     components: {optionContainer},
-  
+
     data() {
       return {}
     },
@@ -57,4 +57,3 @@
     }
   }
   </script>
-