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

package/package.json

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

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

@@ -20,7 +20,7 @@
                 :alignText="infoTextAlign"
                 />
             </label-wrapper>
-            <div>
+            <select-button-wrapper :disabled="disabled">
             <selectButton
                 ref="select"
                 @click="toggleDropdown"
@@ -29,6 +29,7 @@
                 :fontColor="buttonFontColor || colorMode=='dark'?'white':'black'"
                 :hasError="hasError"
                 :isSearchBarVisible="isSearchBarVisible"
+                :disabled="disabled"
                 @keydown.native="onKeyDown"
                 >
                 <inputText
@@ -42,9 +43,9 @@
                     :value="textSearch"
                     @keydown.stop="onKeyDown"
                     @input-change="searchChange" />
-                <div v-else>
+                <selector v-else>
                     <slot name="selector" :selectedValue="selectedValue"></slot>
-                </div>
+                </selector>
                 <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'"/>
@@ -65,7 +66,7 @@
                 <slot name="dropdown"></slot>
             </selectDropdown>
             </DropdownWrapper>
-            </div>
+            </select-button-wrapper>
         </input-wrapper>
     </Container>
   </template>
@@ -95,14 +96,21 @@
   import icon from '../../icon'
   import inputText from '../inputText'
 
-  const Caret=styled.div`
-  position:absolute;
-  display:flex;
-  align-items:center;
-  height:100%;
-  right:15px;
+const Caret = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  min-width: 30px;
+  height: 100%;
   padding-top: 5px;
-  `
+  cursor: pointer;
+  margin-left: auto;
+`
+
+const Selector = styled.div`
+  width: 100%;
+`
 
   const labelAttrs = { fontSize: String }
   const InputLabel = styled('div', labelAttrs)`
@@ -123,10 +131,19 @@ const LabelWrapper = styled.div`
   align-items: center;
   justify-content: start;
 `
+
+const SelectButtonWrapperAttrs = {
+  disabled: Boolean
+}
+const SelectButtonWrapper = styled('div', SelectButtonWrapperAttrs)`
+  ${(props) => props.disabled ? 'cursor: not-allowed' : '' };
+`
+
 const selectButtonAttrs={
   bgColor: String,
   fontColor: String,
   hasError: Boolean,
+  disabled: Boolean,
   selectHeight: String,
   isSearchBarVisible: Boolean
 }
@@ -138,13 +155,13 @@ const selectButton = styled('div',selectButtonAttrs)`
     text-align:left;
     border-radius:4px;
     min-height:36px;
-    display: grid;
-    grid-template-columns:auto 40px;
+    display: flex;
     align-items: center;
     max-height:${props=>props.selectHeight};
     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};
+    background-color:${(props) => props.disabled ? props.theme.colors.grey5 : 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};
+    ${(props) => props.disabled ? 'pointer-events: none' : '' };
 `
 const selectDropdownAttrs={bgColor:String,fontColor:String,selectWidth: String, optionWidth: String,hoveredIndex:Number,selectedValue:Number | String}
 const selectDropdown = styled('div',selectDropdownAttrs)`
@@ -255,6 +272,10 @@ const InputWrapper = styled('div', inputAttrs)`
           required: false,
           default: false
         },
+        disabled: {
+          required: false,
+          default: false
+        },
         isAutoSearch:{
             required:false,
             default:true
@@ -263,6 +284,7 @@ const InputWrapper = styled('div', inputAttrs)`
 
     components: {
         selectButton,
+        SelectButtonWrapper,
         selectDropdown,
         Container,
         InputLabel,
@@ -272,6 +294,7 @@ const InputWrapper = styled('div', inputAttrs)`
         DropdownWrapper,
         icon,
         Caret,
+        Selector,
         inputText
     },