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

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.7",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/assets/svgIcons/trim.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><path d="M0 24.006v24.006l18.125-.131 18.125-.131.141-5.608.141-5.607 5.109-.143 5.109-.142.131-18.125L47.012 0H0v24.006m67.619-5.881.131 18.125h68l.131-18.125L136.012 0H67.488l.131 18.125m89 0 .131 18.125 33.875.128 33.875.129V0h-68.012l.131 18.125m89 0 .131 18.125 8.875.137 8.875.136V49.5H300V0h-54.512l.131 18.125M69 146.5V229h160V64H69v82.5M0 102.506v34.006l18.125-.131 18.125-.131.128-33.875.129-33.875H0v34.006m263.5 1.744V138H300V70.5h-36.5v33.75m-67.5 42.5v49.75h-94V97h94v49.75M0 191.006v34.006l18.125-.131 18.125-.131.128-33.875.129-33.875H0v34.006m263.5 1.744v33.75H300V159h-36.5v33.75M0 272.75V300h49.5v-36.5h-13v-18H0v27.25m263.5-17.25v8h-15V300H300v-52.5h-36.5v8m-193 26.25V300h68v-36.5h-68v18.25m89 0V300h68v-36.5h-68v18.25" fill-rule="evenodd"/></svg>

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

@@ -371,6 +371,10 @@ export default {
       required: false,
       default: 'left'
     },
+    defaultNumber:{
+      required:false,
+      default:null
+    },
     minNumber: {
       required: false,
       default: null
@@ -402,6 +406,7 @@ export default {
   computed: {
     displayedPlaceholder() {
       if (this.placeholder) return this.placeholder
+      if (this.defaultNumber) return `${this.defaultNumber} ${this.unitName ? this.unitName : ''}`
       return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
     },
     hasSlot() {
@@ -413,8 +418,13 @@ export default {
   },
   methods: {
     onChangeHandler(event) {
-      if (isNaN(event) || event == '') {
-        event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
+      if (isNaN(event) || event === '') {
+
+        event = this.defaultNumber
+        ?this.defaultNumber
+        :this.minNumber || this.minNumber === 0 
+        ? this.minNumber 
+        : event
       }
       if (!this.allowNegative) {
         event = Math.abs(event)
@@ -459,6 +469,9 @@ export default {
       return evaluated
     },
     onInput(value) {
+      if(value===""){
+        this.$emit('on-input','')
+      }
       let evaluatedVal
       try {
         evaluatedVal = this.onEvaluateCode(value)
@@ -476,13 +489,16 @@ export default {
       if ((evaluatedInput && value.length) || this.minNumber !== null) {
         this.textInput = numberToString({
           value:
-            evaluatedInput && value.length ? evaluatedInput : 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
           ? this.minNumber
           : ''
@@ -511,6 +527,8 @@ export default {
       let adjustedMinValue =
         value || value === 0
           ? value
+          : this.defaultNumber
+          ? this.defaultNumber
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
           : ''
@@ -544,7 +562,6 @@ export default {
     interact(e) {
       e.preventDefault()
       let value = parseFloat(this.value || 0)
-      console.log('value', value)
       value += parseFloat(this.interactionStep) * parseInt(e.movementX)
       this.$emit('on-input', value)
 
@@ -567,6 +584,11 @@ export default {
         value: this.value,
         numberPrecision: this.numberPrecision
       })
+    } else if (this.defaultNumber !== null) {
+      this.textInput = numberToString({
+        value: this.defaultNumber,
+        numberPrecision: this.numberPrecision
+      })
     } else if (this.minNumber !== null) {
       this.textInput = numberToString({
         value: this.minNumber,

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

@@ -33,6 +33,7 @@
             :type="inputTypeData"
             :fontColor="fontColor"
             :backgroundColor="backgroundColor"
+            :disabledBackgroundColor="disabledBackgroundColor"
           />
           <icon-wrapper
             v-if="inputType === 'password' && !isError"
@@ -104,6 +105,7 @@ const inputProps = {
   backgroundColor:String,
   borderColor:String,
   inputHeight:String,
+  disabledBackgroundColor:String
 }
 const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
@@ -140,8 +142,10 @@ const InputContainer = styled('input', inputProps)`
   box-sizing: border-box; // to allow width of 100% with padding
   font-weight: 400;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
-  background-color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey5 : 
+  background-color: ${(props) => 
+    props.isDisabled ? 
+    (props.disabledBackgroundColor ? props.disabledBackgroundColor+' !important' 
+    : props.theme.colors.grey5) :
     props.backgroundColor ? props.backgroundColor+' !important' :
     props.theme.colors.white};
   &::placeholder {
@@ -280,6 +284,10 @@ export default {
       required:false,
       default:'white'
     },
+    disabledBackgroundColor:{
+      required:false,
+      default:null
+    },
     fontColor:{
       required:false,
       default:'black'

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,