@eturnity/eturnity_reusable_components 7.8.2-EPDM-7779.1 → 7.8.2-EPDM-7779.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.8.2-EPDM-7779.1",
+  "version": "7.8.2-EPDM-7779.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -63,7 +63,7 @@
             @input-change="searchChange"
             @click.native.stop
           />
-          <selector :selectWidth="selectorWidth" v-else>
+          <selector :selectWidth="selectWidth" v-else>
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
           <Caret @click.stop="toggleCaretDropdown">
@@ -142,23 +142,24 @@ import InfoText from '../../infoText'
 import icon from '../../icon'
 import inputText from '../inputText'
 
-const CARET_WIDTH = 30
-const ELLIPSIS_WIDTH = 16
+const CARET_WIDTH = '30px'
+const PADDING = '15px'
+const BORDER_WIDTH = '1px'
 
 const Caret = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${CARET_WIDTH}px;
-  min-width: ${CARET_WIDTH}px;
+  width: ${CARET_WIDTH};
+  min-width: ${CARET_WIDTH};
   height: 100%;
-  align-items: stretch
+  align-items: stretch;
   cursor: pointer;
   margin-left: auto;
 `
 
 const Selector = styled('div', { selectWidth: String })`
-  max-width: ${(props) => props.selectWidth};
+  max-width: ${(props) => `calc(${props.selectWidth} - (${CARET_WIDTH} + ${PADDING} + (${BORDER_WIDTH} * 2)))`};
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -178,7 +179,7 @@ const optionalLabel = styled.span`
 `
 const inputProps = { selectWidth: String, optionWidth: String }
 const Container = styled('div', inputProps)`
-  width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
+  width: ${(props) => props.selectWidth};
   position: relative;
   display: inline-block;
 `
@@ -212,9 +213,8 @@ const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
+  ${(props) => (props.isSearchBarVisible ? '' : `padding-left: ${PADDING}` )};
   text-align: left;
-  border-radius: 4px;
   min-height: ${(props) =>
     props.selectHeight
       ? props.selectHeight
@@ -229,7 +229,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   ${({ showBorder, theme, hasError }) =>
     showBorder &&
     `
-    border:1px solid ${hasError ? theme.colors.red : theme.colors.grey4}
+    border: ${BORDER_WIDTH} solid ${hasError ? theme.colors.red : theme.colors.grey4}
   `}
   background-color:${(props) =>
     props.disabled
@@ -247,7 +247,6 @@ const selectDropdownAttrs = {
   hoveredBgColor: String,
   bgColor: String,
   fontColor: String,
-  selectWidth: String,
   optionWidth: String,
   hoveredIndex: Number,
   hoveredValue: Number | String,
@@ -258,7 +257,7 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
     z-index:${(props) => (props.isActive ? '2' : '1')};
     position:absolute;
     top:5px;
-    border:1px solid ${(props) => props.theme.colors.grey4}
+    border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius:4px;
     display: flex;
     flex-direction: column;
@@ -325,8 +324,9 @@ export default {
       required: false
     },
     selectWidth: {
+      type: String,
       required: false,
-      default: null
+      default: '100%'
     },
     selectHeight: {
       type: String,
@@ -568,11 +568,6 @@ export default {
     isSearchBarVisible() {
       // Removed the optionLength condition, because if there were no result/options when we searched, we still need to show the search input
       return this.isSearchable && this.isDropdownOpen
-    },
-    selectorWidth() {
-      const currentWidth = this.selectWidth ? this.selectWidth : '100%'
-
-      return `calc(${currentWidth} - ${CARET_WIDTH + ELLIPSIS_WIDTH}px)`
     }
   },
   watch: {