@eturnity/eturnity_reusable_components 7.12.6 → 7.12.7-EPDM-10299.0

package/package.json

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

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

@@ -469,7 +469,7 @@ export default {
     }
   },
   methods: {
-    onEnterPress(){
+    onEnterPress() {
       this.$emit('on-enter-click')
       this.$refs.inputField1.$el.blur()
     },
@@ -549,9 +549,6 @@ export default {
       return array
     },
     onInput(value) {
-      // if(!this.isFocused){
-      //   return
-      // }
       if (this.isBlurred) {
         this.isBlurred = false
         return
@@ -563,7 +560,7 @@ export default {
       try {
         evaluatedVal = this.onEvaluateCode(value)
       } finally {
-        if (evaluatedVal) {
+        if (evaluatedVal && this.value != evaluatedVal) {
           this.$emit('on-input', evaluatedVal)
         }
       }
@@ -649,10 +646,10 @@ export default {
       }
     },
     initInteraction(e) {
+      this.focusInput()
+      e.preventDefault()
       window.addEventListener('mousemove', this.interact, false)
       window.addEventListener('mouseup', this.stopInteract, false)
-      e.preventDefault()
-      this.focusInput()
     },
     interact(e) {
       e.preventDefault()

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

@@ -46,7 +46,10 @@
           :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"
@@ -63,7 +66,12 @@
             @input-change="searchChange"
             @click.native.stop
           />
-          <selector v-else :selectWidth="selectWidth" :paddingLeft="paddingLeft">
+          <selector
+            v-else
+            :showBorder="showBorder"
+            :selectWidth="selectWidth"
+            :paddingLeft="paddingLeft"
+          >
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
           <Caret @click.stop="toggleCaretDropdown">
@@ -158,11 +166,23 @@ const Caret = styled.div`
   margin-left: auto;
 `
 
-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 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 labelAttrs = { fontSize: String, fontColor: String }
@@ -214,7 +234,8 @@ 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
@@ -230,7 +251,9 @@ 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
@@ -244,8 +267,10 @@ 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 = {
@@ -258,34 +283,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;