@eturnity/eturnity_reusable_components 1.2.34-EPDM-5477.2 → 1.2.35

package/src/assets/svgIcons/vertical_tool.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.96161 0L10.9232 3.96161L7.96713 3.96161V6.55264L12.3875 9.0786L14 10L12.3875 10.9214L7 14L1.61245 10.9214L0 10L1.61245 9.0786L5.99272 6.57559V3.96161L3 3.96161L6.96161 0ZM5.99272 8.41839L3.2249 10L7 12.1572L10.7751 10L7.96713 8.39545V9.78795H5.99272V8.41839Z" fill="white"/>
+</svg>

package/src/assets/theme.js

@@ -20,6 +20,8 @@ const theme = {
     grey5: '#fafafa',
     grey6: '#555d61',
     green: '#99db0c',
+    transparentWhite1:'#ffffff32',
+    transparentBlack1:'#263238e6',
     disabled: '#dfe1e1',
     eturnityGrey: '#263238'
   },

package/src/components/deleteIcon/index.vue

@@ -6,6 +6,7 @@
   >
     <icon-image
       v-if="isHovered && !isDisabled"
+      :hoverBg="hoverBg"
       :src="require('../../assets/icons/delete_icon.svg')"
     />
     <icon-image
@@ -27,9 +28,10 @@ const Wrapper = styled("div", wrapperAttrs)`
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
 `
 
-const IconImage = styled.img`
+const IconImageAttrs = { hoverBg: String }
+const IconImage = styled('img', IconImageAttrs)`
   &:hover {
-    background-color: ${(props) => props.theme.colors.grey5};
+    background-color: ${(props) => props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
     border-radius: 4px;
   }
 `
@@ -45,6 +47,10 @@ export default {
       required: false,
       default: false,
     },
+    hoverBg: {
+      required: false,
+      default: '',
+    }
   },
   data() {
     return {

package/src/components/icon/index.vue

@@ -1,6 +1,7 @@
 <template>
-  <wrapper :isDisabled="isDisabled" :size="size" :cursor="cursor">
+  <Wrapper :isDisabled="disabled" :size="size" :cursor="cursor">
     <icon-image
+      :disabled="disabled"
       :size="size"
       :color="color"
       :hoveredColor="hoveredColor"
@@ -8,7 +9,7 @@
         require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
       "
     ></icon-image>
-  </wrapper>
+  </Wrapper>  
 </template>
 
 <script>
@@ -35,14 +36,14 @@ const Wrapper = styled('div', wrapperAttrs)`
 const IconImageProps = { color: String, hoveredColor: String, size: String }
 const IconImage = styled('div', IconImageProps)`
   svg {
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
+    width: 100%;
+    height: 100%;
   }
-  svg > path {
+  svg path {
     ${(props) =>
       props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
   }
-  &:hover > svg > path {
+  &:hover > svg path {
     ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
   }
 `
@@ -50,11 +51,11 @@ const IconImage = styled('div', IconImageProps)`
 export default {
   name: 'icon',
   components: {
-    Wrapper,
-    IconImage
+    IconImage,
+    Wrapper
   },
   props: {
-    isDisabled: {
+    disabled: {
       required: false,
       default: false
     },
@@ -73,7 +74,7 @@ export default {
     },
     cursor: {
       required: false,
-      default: 'pointer'
+      default: null
     }
   },
   data() {

package/src/components/iconWrapper/index.vue

@@ -0,0 +1,116 @@
+<template>
+    <Wrapper 
+    :disabled="disabled" 
+    :size="size" 
+    :backgroundColor="backgroundColor" 
+    :borderRadius="borderRadius"
+    :hoveredBackgroundColor="hoveredBackgroundColor"
+    :isHovered="isHovered"
+    >
+        <icon :disabled="disabled" 
+            :size="iconSize" 
+            :name="name" 
+            :color="iconColor" 
+            :hoveredColor="hoveredIconColor" />
+        <caret v-if="hasCaret">
+          <iconWrapper :disabled="disabled" 
+            size="10px" 
+            name="arrow_down" 
+            :iconColor="iconColor" 
+            :hoveredBackgroundColor="hoveredIconColor"
+            borderRadius="1px"
+            />  
+        </caret>
+    </Wrapper>
+  </template>
+  
+  <script>
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   size="60px" by default, this is 30px
+  // />
+  
+  import styled from 'vue-styled-components'
+  import icon from '../icon'
+  const wrapperAttrs = { isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String }
+  const Wrapper = styled('div', wrapperAttrs)`
+    position:relative;
+    display: inline-flex;
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+    justify-content:center;
+    align-items:center;
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    background-color: ${(props)=>props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    border-radius: ${(props) => props.borderRadius};
+    ${(props)=>(props.isHovered ? 'background-color:'+props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor : "")};
+    &:hover{
+        background-color:${(props)=>props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor};
+    }
+  `
+  const caret=styled.div`
+  position:absolute;
+  bottom:3px;
+  right:2px;
+  height:10px;
+  `
+
+  export default {
+    name: 'iconWrapper',
+    components: {
+      Wrapper,
+      icon,
+      caret
+    },
+    props: {
+      disabled: {
+        required: false,
+        default: false
+      },
+      name: {
+        required: true
+      },
+      iconColor: {
+        required: false,
+        default: 'white'
+      },
+      hoveredIconColor: {
+        required: false
+      },
+      backgroundColor: {
+        required: false,
+      },
+      hoveredBackgroundColor: {
+        required: false,
+        default:"transparentWhite1"
+      },
+      size: {
+        required: false,
+        default: '32px'
+      },
+      iconSize:{
+        required: false,
+        default:'18px'
+      },
+      hasCaret:{
+        required: false,
+        default: false
+      },
+      borderRadius:{
+        required:false,
+        default:'6px'
+      },
+      isHovered:{
+        required:false,
+        default:false
+      }
+    },
+    data() {
+      return {}
+    }
+  }
+  </script>

package/src/components/infoText/index.vue

@@ -2,14 +2,11 @@
   <component-wrapper>
     <icon-wrapper :size="size">
       <icon-img
-        :isActive="showInfo"
-        :size="size"
-        :borderColor="borderColor"
         @click.prevent="toggleShowInfo()"
         @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
         @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
       >
-        <icon :size="size" name="info" :color="iconColor" />
+        <icon :size="size" name="info" :color="iconColor" cursor="pointer" />
       </icon-img>
       <text-overlay
         v-if="showInfo"
@@ -54,7 +51,7 @@ const TextOverlay = styled('div', textAttrs)`
       : props.alignArrow === 'center'
       ? 'left: calc((-' + props.width + ' + ' + props.iconSize + ') /2 + 2px)'
       : 'right: calc(' + props.iconSize + ' /2 - 17px)'};
-  text-align: 'left';
+  text-align: left;
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
   width: ${(props) => props.width};
@@ -87,16 +84,14 @@ const TextOverlay = styled('div', textAttrs)`
   }
 `
 
-const iconAttrs = { isActive: Boolean, size: String, borderColor: String }
-
+const iconAttrs = { size: String }
 const IconWrapper = styled('div', iconAttrs)`
   position: relative;
-  top: 1px;
   height: ${(props) => props.size};
 `
-const IconImg = styled('div', iconAttrs)`
-  cursor: pointer;
-  height: ${(props) => props.size};
+
+const IconImg = styled.div`
+  line-height: 0;
 `
 
 const ComponentWrapper = styled.div`

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

@@ -1,7 +1,11 @@
 <template>
-  <container :inputWidth="inputWidth">
+  <container :inputWidth="inputWidth" :alignItems="alignItems">
+    <label-slot-wrapper v-if="hasLabelSlot" :isInteractive="isInteractive" @mousedown="initInteraction">
+      <slot name="label"></slot>
+    </label-slot-wrapper>
+    
     <label-wrapper v-if="labelText">
-      <label-text>
+      <label-text :labelFontColor="labelFontColor">
         {{ labelText }}
       </label-text>
       <info-text
@@ -19,21 +23,24 @@
         :hasUnit="unitName && !!unitName.length"
         :placeholder="displayedPlaceholder"
         :isError="isError"
-        :inputWidth="inputWidth"
         :inputHeight="inputHeight"
         :minWidth="minWidth"
         :value="formatWithCurrency(value)"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @keyup.enter="$emit('on-enter-click')"
+        @input="onInput($event)"
         :disabled="disabled"
         :isDisabled="disabled"
         :noBorder="noBorder"
+        :borderColor="borderColor"
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
+        :backgroundColor="backgroundColor"
         v-on="$listeners"
         :hasSlot="hasSlot"
+        :hasLabelSlot="hasLabelSlot"
         :slotSize="slotSize"
       />
       <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
@@ -101,14 +108,23 @@ const inputProps = {
   textAlign: String,
   fontSize: String,
   fontColor: String,
+  backgroundColor:String,
   hasSlot: Boolean,
+  hasLabelSlot: Boolean,
   slotSize: String,
-  inputHeight: 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;
+  grid-template-columns: ${(props) =>
+    props.alignItems === "vertical" ? "1fr" : "auto 1fr"};
 `
 
 const InputContainer = styled('input', inputProps)`
@@ -117,6 +133,10 @@ 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
       : '1px solid ' + props.theme.colors.grey4};
   padding-top: 11px;
   padding-bottom: 11px;
@@ -124,8 +144,6 @@ const InputContainer = styled('input', inputProps)`
   padding-right: ${(props) =>
     props.slotSize
       ? 'calc(' + props.slotSize + ' + 10px)'
-      : props.hasUnit
-      ? '40px'
       : '5px'};
   border-radius: 4px;
   text-align: ${(props) => props.textAlign};
@@ -139,7 +157,10 @@ const InputContainer = styled('input', inputProps)`
       : props.fontColor
       ? props.fontColor + ' !important'
       : props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? 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'};
@@ -211,15 +232,23 @@ const SlotContainer = styled('span', inputProps)`
       : props.theme.colors.mediumGray};
 `
 
-const LabelWrapper = styled.div`
+const LabelWrapper = styled('div',inputProps)`
   display: flex;
+  align-items: center;
   gap: 10px;
   margin-bottom: 8px;
+  cursor: ${(props) => (props.isInteractive?'ew-resize':'auto')};
+`
+const LabelSlotWrapper = styled('div',inputProps)`
+  display: flex;
+  gap: 10px;
+  align-items:center;
+  cursor: ${(props) => (props.isInteractive?'ew-resize':'auto')};
 `
 
-const LabelText = styled.div`
+const LabelText = styled('div',inputProps)`
   font-size: 13px;
-  color: ${(props) => props.theme.colors.eturnityGrey};
+  color: ${(props) => props.theme.colors[props.labelFontColor]?props.theme.colors[props.labelFontColor]:props.labelFontColor};
   font-weight: 700;
 `
 
@@ -232,10 +261,11 @@ export default {
     UnitContainer,
     ErrorMessage,
     LabelWrapper,
+    LabelSlotWrapper,
     LabelText,
     InfoText,
     Icon,
-    SlotContainer
+    SlotContainer,
   },
   inheritAttrs: false,
   data() {
@@ -274,6 +304,10 @@ export default {
       required: false,
       default: false
     },
+    alignItems: {
+      required: false,
+      default: "vertical",
+    },
     errorMessage: {
       required: false,
       default: 'Please insert a correct number'
@@ -298,6 +332,9 @@ export default {
       required: false,
       default: false
     },
+    borderColor:{
+      required:false,
+    },
     textAlign: {
       required: false,
       default: 'left'
@@ -306,6 +343,14 @@ export default {
       required: false,
       default: '13px'
     },
+    isInteractive: {
+      required: false,
+      default: false
+    },
+    interactionStep:{
+      required:false,
+      default:1
+    },
     labelText: {
       required: false,
       default: null
@@ -326,6 +371,10 @@ export default {
       required: false,
       default: null
     },
+    backgroundColor: {
+      required: false,
+      default: null
+    },
     numberToStringEnabled: {
       required: false,
       default: true
@@ -351,6 +400,10 @@ export default {
     },
     slotSize: {
       required: false
+    },
+    labelFontColor:{
+      required:false,
+      default:'eturnityGrey'
     }
   },
   computed: {
@@ -361,9 +414,9 @@ export default {
     hasSlot() {
       return !!this.$slots.default
     },
-    computedSlotSize() {
-      return this.slotSize || this.$slots['default'][0].elm.clientWidth
-    }
+    hasLabelSlot(){
+      return !!this.$slots.label
+    },
   },
   methods: {
     onChangeHandler(event) {
@@ -412,6 +465,16 @@ export default {
       }
       return evaluated
     },
+    onInput(value){
+      let evaluatedVal
+      try{
+       evaluatedVal=this.onEvaluateCode(value)
+      }finally {
+        if(evaluatedVal){
+            this.$emit('on-input',evaluatedVal)
+        }
+      }
+    },
     onInputBlur(e) {
       this.isFocused = false
       let value = e.target.value
@@ -442,6 +505,15 @@ export default {
       })
       this.$emit('input-focus')
     },
+    blurInput() {
+      if (this.disabled) {
+        return
+      }
+      this.isFocused = false
+      this.$nextTick(() => {
+        this.$refs.inputField1.$el.blur()
+      })
+    },
     formatWithCurrency(value) {
       let adjustedMinValue =
         value || value === 0
@@ -469,7 +541,33 @@ export default {
             })
           : adjustedMinValue
       }
-    }
+    },
+    initInteraction(e) {
+      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)
+
+      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);
+      this.blurInput()
+    },
   },
   created() {
     if (this.value) {

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

@@ -5,7 +5,7 @@
       :alignItems="alignItems"
     >
       <label-wrapper v-if="label">
-        <input-label :fontSize="fontSize">{{ label }}</input-label>
+        <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">{{ label }}</input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -21,6 +21,7 @@
             :isError="isError"
             :inputWidth="inputWidth"
             :minWidth="minWidth"
+            :inputHeight="inputHeight"
             :value="value"
             @input="onChangeHandler"
             @blur="onInputBlur"
@@ -30,6 +31,8 @@
             :fontSize="fontSize"
             :inputType="inputType"
             :type="inputTypeData"
+            :fontColor="fontColor"
+            :backgroundColor="backgroundColor"
           />
           <icon-wrapper
             v-if="inputType === 'password' && !isError"
@@ -61,9 +64,15 @@ const Container = styled.div`
   position: relative;
 `
 
-const labelAttrs = { fontSize: String }
+const labelAttrs = { fontSize: String,labelFontColor:String, }
 const InputLabel = styled('div', labelAttrs)`
-  color: ${(props) => props.theme.colors.eturnityGrey};
+  color: ${(props) => props.theme.colors[props.labelFontColor]?
+    props.theme.colors[props.labelFontColor]:
+    props.labelFontColor?
+    props.labelFontColor:
+    props.theme.colors.eturnityGrey
+  };
+
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   font-weight: 700;
 `
@@ -90,14 +99,22 @@ const inputProps = {
   noBorder: Boolean,
   isDisabled: Boolean,
   fontSize: String,
-  inputType: String
+  inputType: String,
+  fontColor: String,
+  backgroundColor:String,
+  borderColor:String,
+  inputHeight:String,
 }
 const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
-    props.isError
+      props.isError
       ? '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
       : '1px solid ' + props.theme.colors.grey4};
   padding: ${(props) =>
     props.isError
@@ -113,15 +130,20 @@ const InputContainer = styled('input', inputProps)`
       ? props.theme.colors.grey6
       : props.isDisabled
       ? props.theme.colors.grey2
+      : props.fontColor
+      ? props.fontColor + ' !important'
       : props.theme.colors.black};
+      
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
+  max-height: ${(props) => props.inputHeight};
   box-sizing: border-box; // to allow width of 100% with padding
   font-weight: 500;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
   background-color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey5 : '#fff'};
-
+    props.isDisabled ? props.theme.colors.grey5 : 
+    props.backgroundColor ? props.backgroundColor+' !important' :
+    props.theme.colors.white};
   &::placeholder {
     color: ${(props) => props.theme.colors.grey2};
   }
@@ -209,6 +231,10 @@ export default {
       required: false,
       default: null
     },
+    inputHeight: {
+      required: false,
+      default: null
+    },
     minWidth: {
       required: false,
       default: null
@@ -245,7 +271,22 @@ export default {
     inputType: {
       required: false,
       default: 'text'
-    }
+    },
+    labelFontColor:{
+      required:false,
+      default:'black'
+    },
+    backgroundColor:{
+      required:false,
+      default:'white'
+    },
+    fontColor:{
+      required:false,
+      default:'black'
+    },
+    borderColor:{
+      required:false,
+    },
   },
   methods: {
     onChangeHandler($event) {