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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.48-EPDM-5846.5",
+  "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
@@ -65,7 +66,7 @@
                 <slot name="dropdown"></slot>
             </selectDropdown>
             </DropdownWrapper>
-            </div>
+            </select-button-wrapper>
         </input-wrapper>
     </Container>
   </template>
@@ -130,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
 }
@@ -149,8 +159,9 @@ const selectButton = styled('div',selectButtonAttrs)`
     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)`
@@ -261,6 +272,10 @@ const InputWrapper = styled('div', inputAttrs)`
           required: false,
           default: false
         },
+        disabled: {
+          required: false,
+          default: false
+        },
         isAutoSearch:{
             required:false,
             default:true
@@ -269,6 +284,7 @@ const InputWrapper = styled('div', inputAttrs)`
 
     components: {
         selectButton,
+        SelectButtonWrapper,
         selectDropdown,
         Container,
         InputLabel,