@eturnity/eturnity_reusable_components 1.2.37 → 1.2.39-EPDM-5626

package/package.json

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

package/src/components/buttons/mainButton/index.vue

@@ -1,8 +1,9 @@
 <template>
   <page-container>
     <button-container
-      :isDisabled="isDisabled"
       :type="type"
+      :minWidth="minWidth"
+      :isDisabled="isDisabled"
       :customColor="customColor"
     >
       {{ text }}
@@ -14,37 +15,39 @@
 // To use:
 // import MainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
 // <main-button
-//   type="secondary" // primary, secondary, cancel
-//   :isDisabled="true"
 //   text="Click Me"
 //   customColor="#ab5348"
+//   type="secondary" // primary, secondary, cancel
+//   :isDisabled="true"
+//   :minWidth="minWidth"
 // />
 
 import styled from "vue-styled-components"
 
 const PageContainer = styled.div``
 
-const ButtonAttrs = { type: String, isDisabled: Boolean, customColor: String }
+const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String }
 const ButtonContainer = styled("div", ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
   color: ${(props) => props.theme.colors.white};
   background-color: ${(props) =>
-    props.isDisabled
-      ? props.theme.colors.disabled
-      : props.customColor
-      ? props.customColor
-      : props.type === "primary"
-      ? props.theme.colors.black
-      : props.type === "secondary"
-      ? props.theme.colors.grey3
-      : props.type === "cancel"
-      ? props.theme.colors.red
-      : props.theme.colors.black};
+      props.isDisabled
+          ? props.theme.colors.disabled
+          : props.customColor
+              ? props.customColor
+              : props.type === "primary"
+                  ? props.theme.colors.black
+                  : props.type === "secondary"
+                      ? props.theme.colors.grey3
+                      : props.type === "cancel"
+                          ? props.theme.colors.red
+                          : props.theme.colors.black};
   border-radius: 4px;
   text-align: center;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   user-select: none;
+  ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
 
   &:hover {
     opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
@@ -77,6 +80,10 @@ export default {
       required: false,
       default: null,
     },
+    minWidth: {
+      required: false,
+      default: null
+    }
   },
 }
 </script>

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

@@ -1,9 +1,13 @@
 <template>
   <container :inputWidth="inputWidth" :alignItems="alignItems">
-    <label-slot-wrapper v-if="hasLabelSlot" :isInteractive="isInteractive" @mousedown="initInteraction">
+    <label-slot-wrapper
+      v-if="hasLabelSlot"
+      :isInteractive="isInteractive"
+      @mousedown="initInteraction"
+    >
       <slot name="label"></slot>
     </label-slot-wrapper>
-    
+
     <label-wrapper v-if="labelText">
       <label-text :labelFontColor="labelFontColor">
         {{ labelText }}
@@ -108,23 +112,23 @@ const inputProps = {
   textAlign: String,
   fontSize: String,
   fontColor: String,
-  backgroundColor:String,
+  backgroundColor: String,
   hasSlot: Boolean,
   hasLabelSlot: Boolean,
   slotSize: String,
-  inputHeight:String,
-  isInteractive:Boolean,
-  alignItems:String,
-  labelFontColor:String,
-  borderColor:String
+  inputHeight: String,
+  isInteractive: Boolean,
+  alignItems: String,
+  labelFontColor: String,
+  borderColor: String
 }
 
 const Container = styled('div', inputProps)`
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   position: relative;
-  display:grid;
+  display: grid;
   grid-template-columns: ${(props) =>
-    props.alignItems === "vertical" ? "1fr" : "auto 1fr"};
+    props.alignItems === 'vertical' ? '1fr' : 'auto 1fr'};
 `
 
 const InputContainer = styled('input', inputProps)`
@@ -133,18 +137,16 @@ const InputContainer = styled('input', inputProps)`
       ? '1px solid ' + props.theme.colors.red
       : props.noBorder
       ? 'none'
-      : props.borderColor ?
-      props.theme.colors[props.borderColor]
-      ? '1px solid ' + props.theme.colors[props.borderColor]
-      : '1px solid ' + props.borderColor
+      : props.borderColor
+      ? props.theme.colors[props.borderColor]
+        ? '1px solid ' + props.theme.colors[props.borderColor]
+        : '1px solid ' + props.borderColor
       : '1px solid ' + props.theme.colors.grey4};
   padding-top: 11px;
   padding-bottom: 11px;
   padding-left: 10px;
   padding-right: ${(props) =>
-    props.slotSize
-      ? 'calc(' + props.slotSize + ' + 10px)'
-      : '5px'};
+    props.slotSize ? 'calc(' + props.slotSize + ' + 10px)' : '5px'};
   border-radius: 4px;
   text-align: ${(props) => props.textAlign};
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
@@ -157,10 +159,12 @@ const InputContainer = styled('input', inputProps)`
       : props.fontColor
       ? props.fontColor + ' !important'
       : props.theme.colors.black};
-  background-color:${(props) => props.backgroundColor
-    ? props.backgroundColor+' !important'
-    : props.theme.colors.white};
-  width: ${(props) => (props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%')};
+  background-color: ${(props) =>
+    props.backgroundColor
+      ? props.backgroundColor + ' !important'
+      : props.theme.colors.white};
+  width: ${(props) =>
+    props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
   min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
   background-color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey5 : '#fff'};
@@ -198,7 +202,7 @@ const UnitContainer = styled('span', inputProps)`
         : props.theme.colors.mediumGray};
   position: absolute;
   right: 10px;
-  top: 0;
+  top: 10px;
   padding-left: 10px;
   text-align: right;
   color: ${(props) =>
@@ -222,7 +226,7 @@ const SlotContainer = styled('span', inputProps)`
   width: ${(props) =>
     props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
   right: 10px;
-  top: 0;
+  top: 10px;
   padding-left: 10px;
   color: ${(props) =>
     props.isError
@@ -232,23 +236,26 @@ const SlotContainer = styled('span', inputProps)`
       : props.theme.colors.mediumGray};
 `
 
-const LabelWrapper = styled('div',inputProps)`
+const LabelWrapper = styled('div', inputProps)`
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 8px;
-  cursor: ${(props) => (props.isInteractive?'ew-resize':'auto')};
+  cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
 `
-const LabelSlotWrapper = styled('div',inputProps)`
+const LabelSlotWrapper = styled('div', inputProps)`
   display: flex;
   gap: 10px;
-  align-items:center;
-  cursor: ${(props) => (props.isInteractive?'ew-resize':'auto')};
+  align-items: center;
+  cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
 `
 
-const LabelText = styled('div',inputProps)`
+const LabelText = styled('div', inputProps)`
   font-size: 13px;
-  color: ${(props) => props.theme.colors[props.labelFontColor]?props.theme.colors[props.labelFontColor]:props.labelFontColor};
+  color: ${(props) =>
+    props.theme.colors[props.labelFontColor]
+      ? props.theme.colors[props.labelFontColor]
+      : props.labelFontColor};
   font-weight: 700;
 `
 
@@ -265,7 +272,7 @@ export default {
     LabelText,
     InfoText,
     Icon,
-    SlotContainer,
+    SlotContainer
   },
   inheritAttrs: false,
   data() {
@@ -306,7 +313,7 @@ export default {
     },
     alignItems: {
       required: false,
-      default: "vertical",
+      default: 'vertical'
     },
     errorMessage: {
       required: false,
@@ -332,8 +339,8 @@ export default {
       required: false,
       default: false
     },
-    borderColor:{
-      required:false,
+    borderColor: {
+      required: false
     },
     textAlign: {
       required: false,
@@ -347,9 +354,9 @@ export default {
       required: false,
       default: false
     },
-    interactionStep:{
-      required:false,
-      default:1
+    interactionStep: {
+      required: false,
+      default: 1
     },
     labelText: {
       required: false,
@@ -401,9 +408,9 @@ export default {
     slotSize: {
       required: false
     },
-    labelFontColor:{
-      required:false,
-      default:'eturnityGrey'
+    labelFontColor: {
+      required: false,
+      default: 'eturnityGrey'
     }
   },
   computed: {
@@ -414,9 +421,9 @@ export default {
     hasSlot() {
       return !!this.$slots.default
     },
-    hasLabelSlot(){
+    hasLabelSlot() {
       return !!this.$slots.label
-    },
+    }
   },
   methods: {
     onChangeHandler(event) {
@@ -465,13 +472,13 @@ export default {
       }
       return evaluated
     },
-    onInput(value){
+    onInput(value) {
       let evaluatedVal
-      try{
-       evaluatedVal=this.onEvaluateCode(value)
-      }finally {
-        if(evaluatedVal){
-            this.$emit('on-input',evaluatedVal)
+      try {
+        evaluatedVal = this.onEvaluateCode(value)
+      } finally {
+        if (evaluatedVal) {
+          this.$emit('on-input', evaluatedVal)
         }
       }
     },
@@ -543,31 +550,30 @@ export default {
       }
     },
     initInteraction(e) {
-      window.addEventListener('mousemove', this.interact, false);
-      window.addEventListener('mouseup', this.stopInteract, false);
-      e.preventDefault() 
+      window.addEventListener('mousemove', this.interact, false)
+      window.addEventListener('mouseup', this.stopInteract, false)
+      e.preventDefault()
       this.focusInput()
     },
     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)
+      e.preventDefault()
+      let value = parseFloat(this.value || 0)
+      console.log('value', value)
+      value += parseFloat(this.interactionStep) * parseInt(e.movementX)
+      this.$emit('on-input', value)
 
-      this.textInput=numberToString({
-          value:
-          value && value.length ? value : this.minNumber,
-          numberPrecision: this.numberPrecision
-        })
+      this.textInput = numberToString({
+        value: value && value.length ? value : this.minNumber,
+        numberPrecision: this.numberPrecision
+      })
       //this.value=value
     },
     stopInteract(e) {
-      e.preventDefault() 
-      window.removeEventListener('mousemove', this.interact, false);
-      window.removeEventListener('mouseup', this.stopInteract, false);
+      e.preventDefault()
+      window.removeEventListener('mousemove', this.interact, false)
+      window.removeEventListener('mouseup', this.stopInteract, false)
       this.blurInput()
-    },
+    }
   },
   created() {
     if (this.value) {