@eturnity/eturnity_reusable_components 1.2.54 → 1.2.56

package/package.json

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

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

@@ -46,6 +46,7 @@
         :hasSlot="hasSlot"
         :hasLabelSlot="hasLabelSlot"
         :slotSize="slotSize"
+        :showLinearUnitName="showLinearUnitName"
       />
       <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
         <slot></slot>
@@ -119,7 +120,8 @@ const inputProps = {
   isInteractive: Boolean,
   alignItems: String,
   labelFontColor: String,
-  borderColor: String
+  borderColor: String,
+  showLinearUnitName: Boolean
 }
 
 const Container = styled('div', inputProps)`
@@ -144,8 +146,14 @@ const InputContainer = styled('input', inputProps)`
   padding-top: 11px;
   padding-bottom: 11px;
   padding-left: 10px;
-  padding-right: ${(props) =>
-    props.slotSize ? 'calc(' + props.slotSize + ' + 10px)' : '5px'};
+  padding-right: ${({ slotSize, isError, showLinearUnitName }) =>
+    slotSize
+      ? isError && !showLinearUnitName
+        ? 'calc(' + slotSize + ' + 24px)'
+        : 'calc(' + slotSize + ' + 10px)'
+      : isError && !showLinearUnitName
+      ? '24px'
+      : '5px'};
   border-radius: 4px;
   text-align: ${(props) => props.textAlign};
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
@@ -371,9 +379,9 @@ export default {
       required: false,
       default: 'left'
     },
-    defaultNumber:{
-      required:false,
-      default:null
+    defaultNumber: {
+      required: false,
+      default: null
     },
     minNumber: {
       required: false,
@@ -406,7 +414,8 @@ export default {
   computed: {
     displayedPlaceholder() {
       if (this.placeholder) return this.placeholder
-      if (this.defaultNumber) return `${this.defaultNumber} ${this.unitName ? this.unitName : ''}`
+      if (this.defaultNumber)
+        return `${this.defaultNumber} ${this.unitName ? this.unitName : ''}`
       return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
     },
     hasSlot() {
@@ -419,12 +428,11 @@ export default {
   methods: {
     onChangeHandler(event) {
       if (isNaN(event) || event === '') {
-
         event = this.defaultNumber
-        ?this.defaultNumber
-        :this.minNumber || this.minNumber === 0 
-        ? this.minNumber 
-        : event
+          ? this.defaultNumber
+          : this.minNumber || this.minNumber === 0
+          ? this.minNumber
+          : event
       }
       if (!this.allowNegative) {
         event = Math.abs(event)
@@ -436,7 +444,7 @@ export default {
     onEvaluateCode(val) {
       // function to perform math on the code
       // filter the string in case of any malicious content
-      let filtered = val.replace(/[^-()\d/*+.,]/g, '')
+      let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
       filtered = filtered.split(/([-+*/()])/)
       let formatted = filtered.map((item) => {
         if (
@@ -469,8 +477,8 @@ export default {
       return evaluated
     },
     onInput(value) {
-      if(value===""){
-        this.$emit('on-input','')
+      if (value === '') {
+        this.$emit('on-input', '')
       }
       let evaluatedVal
       try {
@@ -489,14 +497,17 @@ export default {
       if ((evaluatedInput && value.length) || this.minNumber !== null) {
         this.textInput = numberToString({
           value:
-            evaluatedInput && value.length ? evaluatedInput : 
-            this.defaultNumber?this.defaultNumber:this.minNumber,
+            evaluatedInput && value.length
+              ? evaluatedInput
+              : this.defaultNumber
+              ? this.defaultNumber
+              : this.minNumber,
           numberPrecision: this.numberPrecision
         })
       }
       let adjustedMinValue =
         evaluatedInput && evaluatedInput.length
-          ? evaluatedInput 
+          ? evaluatedInput
           : this.defaultNumber
           ? this.defaultNumber
           : this.minNumber || this.minNumber === 0

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

@@ -15,16 +15,20 @@
         />
       </label-wrapper>
       <input-container
-        :placeholder="placeholder"
-        :isError="isError"
-        :rows="rowHeight"
-        :value="value"
         :inputWidth="inputWidth"
-        :disabled="isDisabled"
+        :isError="isError"
         :fontSize="fontSize"
-        @input="onChangeHandler"
-        :resize="resize"
-      />
+        :disabled="isDisabled"
+      >
+        <textarea
+          :placeholder="placeholder"
+          :rows="rowHeight"
+          :value="value"
+          :disabled="isDisabled"
+          @input="onChangeHandler"
+          :resize="resize"
+        />
+      </input-container>
     </input-wrapper>
     <error-message v-if="isError && errorText">{{ errorText }}</error-message>
   </container>
@@ -71,27 +75,30 @@ const inputProps = {
   fontSize: String,
   inputWidth: String
 }
-const InputContainer = styled('textarea', inputProps)`
-  border: ${(props) =>
-    props.isError
-      ? '1px solid ' + props.theme.colors.red
-      : '1px solid ' + props.theme.colors.grey4};
-  padding: ${(props) =>
-    props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
-  border-radius: 4px;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
-  color: ${(props) => props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-  max-width: 100%;
-  box-sizing: border-box; // to allow width of 100% with padding
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
 
-  &::placeholder {
-    color: ${(props) => props.theme.colors.grey2};
-  }
+const InputContainer = styled('div', inputProps)`
+  textarea {
+    border: ${(props) =>
+      props.isError
+        ? '1px solid ' + props.theme.colors.red
+        : '1px solid ' + props.theme.colors.grey4};
+    padding: ${(props) =>
+      props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
+    border-radius: 4px;
+    font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+    color: ${(props) => props.theme.colors.black};
+    width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+    max-width: 100%;
+    box-sizing: border-box; // to allow width of 100% with padding
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
 
-  &:focus {
-    outline: none;
+    &::placeholder {
+      color: ${(props) => props.theme.colors.grey2};
+    }
+
+    &:focus {
+      outline: none;
+    }
   }
 `
 
@@ -181,7 +188,7 @@ export default {
       if (this.isDisabled) {
         return
       }
-      this.$emit('input-change', $event)
+      this.$emit('input-change', $event.target.value)
     }
   }
 }