@eturnity/eturnity_reusable_components 7.12.6-EPDM-10310.2 → 7.12.6

package/package.json

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

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

@@ -46,10 +46,7 @@
           :data-id="dataId"
           :paddingLeft="paddingLeft"
         >
-          <draggableInputHandle
-            v-if="isDraggable && !isSearchBarVisible"
-            :height="selectHeight"
-          />
+          <draggableInputHandle v-if="isDraggable && !isSearchBarVisible" :height="selectHeight" />
           <inputText
             v-if="isSearchBarVisible"
             ref="searchInput"
@@ -66,12 +63,7 @@
             @input-change="searchChange"
             @click.native.stop
           />
-          <selector
-            v-else
-            :showBorder="showBorder"
-            :selectWidth="selectWidth"
-            :paddingLeft="paddingLeft"
-          >
+          <selector v-else :selectWidth="selectWidth" :paddingLeft="paddingLeft">
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
           <Caret @click.stop="toggleCaretDropdown">
@@ -166,23 +158,11 @@ const Caret = styled.div`
   margin-left: auto;
 `
 
-const selectorProps = {
-  selectWidth: String,
-  paddingLeft: String,
-  showBorder: Boolean
-}
-const Selector = styled('div', selectorProps)`
-  ${(props) => props.selectWidth === '100%' ? 'width: 100%;' : `width: calc(${props.selectWidth} -
-      (
-        ${CARET_WIDTH} +
-        ${props.paddingLeft}
-        ${props.showBorder ? `+ (${BORDER_WIDTH} * 2)` : ''}
-      )
-    );
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;`
-  }
+const Selector = styled('div', { selectWidth: String, paddingLeft: String })`
+  width: ${(props) => `calc(${props.selectWidth} - (${CARET_WIDTH} + ${props.paddingLeft} + (${BORDER_WIDTH} * 2)))`};
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `
 
 const labelAttrs = { fontSize: String, fontColor: String }
@@ -234,8 +214,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  ${(props) =>
-    props.isSearchBarVisible ? '' : `padding-left: ${props.paddingLeft}`};
+  ${(props) => (props.isSearchBarVisible ? '' : `padding-left: ${props.paddingLeft}` )};
   text-align: left;
   min-height: ${(props) =>
     props.selectHeight
@@ -251,9 +230,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   ${({ showBorder, theme, hasError }) =>
     showBorder &&
     `
-    border: ${BORDER_WIDTH} solid ${
-      hasError ? theme.colors.red : theme.colors.grey4
-    }
+    border: ${BORDER_WIDTH} solid ${hasError ? theme.colors.red : theme.colors.grey4}
   `}
   background-color:${(props) =>
     props.disabled
@@ -267,10 +244,8 @@ const selectButton = styled('div', selectButtonAttrs)`
       : props.fontColor};
   ${(props) => (props.disabled ? 'pointer-events: none' : '')};
   overflow: hidden;
-  & > .handle {
-    border-right: ${(props) =>
-        props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
-      1px solid;
+  & >.handle{
+    border-right:${(props) =>props.hasError ? props.theme.colors.red : props.theme.colors.grey4} 1px solid;
   }
 `
 const selectDropdownAttrs = {
@@ -283,34 +258,34 @@ const selectDropdownAttrs = {
   selectedValue: Number | String
 }
 const selectDropdown = styled('div', selectDropdownAttrs)`
-  box-sizing: border-box;
-  z-index: ${(props) => (props.isActive ? '2' : '1')};
-  position: absolute;
-  top: 5px;
-  border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
-  border-radius: 4px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 0px;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
-  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};
-  max-height: 300px;
-  overflow-y: auto;
-  & > div[data-value='${(props) => props.hoveredValue}'] {
-    background-color: ${(props) =>
-      props.theme.colors[props.hoveredBgColor]
-        ? props.theme.colors[props.hoveredBgColor]
-        : props.hoveredBgColor};
-  }
+    box-sizing: border-box;
+    z-index:${(props) => (props.isActive ? '2' : '1')};
+    position:absolute;
+    top:5px;
+    border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
+    border-radius:4px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
+    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};
+    max-height:300px;
+    overflow-y:auto;
+    &>div[data-value="${(props) => props.hoveredValue}"]{
+        background-color:${(props) =>
+          props.theme.colors[props.hoveredBgColor]
+            ? props.theme.colors[props.hoveredBgColor]
+            : props.hoveredBgColor};
+    }
 `
 const DropdownWrapper = styled('div')`
   position: relative;