@eturnity/eturnity_reusable_components 1.2.30 → 1.2.31-3d-master.1

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

@@ -19,8 +19,8 @@
         :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
         :alignArrow="alignArrow"
         :iconSize="size"
-        ><slot />
-        <span v-html="text"></span>
+      ><slot />
+        {{ text }}
       </text-overlay>
     </icon-wrapper>
   </component-wrapper>
@@ -39,27 +39,19 @@ import theme from '../../assets/theme.js'
 import styled from 'vue-styled-components'
 import icon from '../icon'
 
-const textAttrs = {
-  iconSize: String,
-  borderColor: String,
-  alignArrow: String,
-  alignText: String,
-  width: String,
-  halfComputedTextInfoWidth: Number
-}
+const textAttrs = { iconSize:String, borderColor: String, alignArrow:String, alignText: String, width:String,halfComputedTextInfoWidth:Number }
 const TextOverlay = styled('div', textAttrs)`
   position: absolute;
-  top: ${(props) => 'calc(' + props.iconSize + ' + 15px)'};
-  ${(props) =>
-    props.alignArrow === 'left'
-      ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
-      : props.alignArrow === 'center'
-      ? 'left: calc((-' + props.width + ' + ' + props.iconSize + ') /2 + 2px)'
-      : 'right: calc(' + props.iconSize + ' /2 - 17px)'};
+  top: ${(props) => 'calc('+props.iconSize+' + 15px)'};
+  ${(props) => (props.alignArrow === 'left' 
+    ? 'left: calc('+props.iconSize+' /2 - 18px)' 
+    : props.alignArrow === 'center' 
+    ? 'left: calc((-'+props.width+' + '+props.iconSize+') /2 + 2px)'
+    : 'right: calc('+props.iconSize+' /2 - 17px)')};
   text-align: ${(props) => props.alignText};
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
-  width: ${(props) => props.width};
+  width: ${(props) => props.width };
   max-width: 400px;
   font-size: 13px;
   font-weight: 400;
@@ -72,21 +64,14 @@ const TextOverlay = styled('div', textAttrs)`
     background-color: ${(props) => props.theme.colors.black};
     position: absolute;
     top: 2px;
-    ${(props) =>
-      props.alignArrow === 'left'
-        ? 'left:40px;'
-        : props.alignArrow == 'center'
-        ? 'left: calc(50% + 19px);'
-        : 'right:-13px;'};
+    ${(props) => (props.alignArrow === 'left' ? 'left:40px;' : 
+    props.alignArrow=='center' ? 'left: calc(50% + 19px);' : 
+    'right:-13px;')};
     height: 8px;
     width: 8px;
     transform-origin: center center;
     transform: translate(-2em, -0.5em) rotate(45deg);
   }
-
-  span a {
-    color: #2cc0eb;
-  }
 `
 
 const iconAttrs = { isActive: Boolean, size: String, borderColor: String }
@@ -116,7 +101,7 @@ export default {
   },
   props: {
     text: {
-      required: false
+      required: false,
     },
     borderColor: {
       required: false,
@@ -130,17 +115,17 @@ export default {
       required: false,
       default: 'left' // "left" or "right"
     },
-    alignArrow: {
-      required: false,
-      default: 'center'
+    alignArrow:{
+      required:false,
+      default:'center'
     },
-    openTrigger: {
-      required: false,
+    openTrigger:{
+      required:false,
       default: 'onClick'
     },
-    width: {
-      required: false,
-      default: '165px'
+    width:{
+      required:false,
+      default:'165px'
     }
   },
   methods: {
@@ -162,7 +147,7 @@ export default {
   },
   data() {
     return {
-      showInfo: false
+      showInfo: false,
     }
   },
   computed: {
@@ -174,8 +159,8 @@ export default {
         : theme.colors.mediumGray
     },
     halfComputedTextInfoWidth() {
-      return parseInt(this.width) / 2
+      return parseInt(this.width)/2;
     }
   }
 }
-</script>
+</script>

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

@@ -1,5 +1,10 @@
 <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>
         {{ labelText }}
@@ -19,21 +24,23 @@
         :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"
         :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,21 @@ const inputProps = {
   textAlign: String,
   fontSize: String,
   fontColor: String,
+  backgroundColor:String,
   hasSlot: Boolean,
+  hasLabelSlot: Boolean,
   slotSize: String,
-  inputHeight: String
+  inputHeight:String,
+  isInteractive:Boolean,
+  alignItems: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,15 +131,13 @@ const InputContainer = styled('input', inputProps)`
       ? '1px solid ' + props.theme.colors.red
       : props.noBorder
       ? 'none'
-      : '1px solid ' + props.theme.colors.grey4};
+      : '1px solid ' + props.theme.colors.mediumGray};
   padding-top: 11px;
   padding-bottom: 11px;
   padding-left: 10px;
   padding-right: ${(props) =>
     props.slotSize
       ? 'calc(' + props.slotSize + ' + 10px)'
-      : props.hasUnit
-      ? '40px'
       : '5px'};
   border-radius: 4px;
   text-align: ${(props) => props.textAlign};
@@ -133,20 +145,22 @@ const InputContainer = styled('input', inputProps)`
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   color: ${(props) =>
     props.isError
-      ? props.theme.colors.grey6
-      : props.isDisabled
-      ? props.theme.colors.grey2
+      ? props.theme.colors.red
       : 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'};
   box-sizing: border-box;
-  max-height: ${(props) => props.inputHeight};
+  max-height: ${(props) => (props.inputHeight)};
   &::placeholder {
-    color: ${(props) => props.theme.colors.grey2};
+    color: ${(props) =>
+      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
   }
 
   &:focus {
@@ -211,16 +225,22 @@ const SlotContainer = styled('span', inputProps)`
       : props.theme.colors.mediumGray};
 `
 
-const LabelWrapper = styled.div`
+const LabelWrapper = styled('div',inputProps)`
   display: flex;
   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`
+  font-weight: bold;
   font-size: 13px;
-  color: ${(props) => props.theme.colors.eturnityGrey};
-  font-weight: 700;
 `
 
 export default {
@@ -232,17 +252,18 @@ export default {
     UnitContainer,
     ErrorMessage,
     LabelWrapper,
+    LabelSlotWrapper,
     LabelText,
     InfoText,
     Icon,
-    SlotContainer
+    SlotContainer,
   },
   inheritAttrs: false,
   data() {
     return {
       textInput: '',
       isFocused: false,
-      warningIcon: warningIcon
+      warningIcon: warningIcon,
     }
   },
   props: {
@@ -262,9 +283,9 @@ export default {
       required: false,
       default: null
     },
-    inputHeight: {
-      required: false,
-      default: null
+    inputHeight:{
+      required:false,
+      default:null
     },
     value: {
       required: true,
@@ -274,6 +295,10 @@ export default {
       required: false,
       default: false
     },
+    alignItems: {
+      required: false,
+      default: "vertical",
+    },
     errorMessage: {
       required: false,
       default: 'Please insert a correct number'
@@ -306,6 +331,14 @@ export default {
       required: false,
       default: '13px'
     },
+    isInteractive: {
+      required: false,
+      default: false
+    },
+    interactionStep:{
+      required:false,
+      default:1
+    },
     labelText: {
       required: false,
       default: null
@@ -326,6 +359,10 @@ export default {
       required: false,
       default: null
     },
+    backgroundColor: {
+      required: false,
+      default: null
+    },
     numberToStringEnabled: {
       required: false,
       default: true
@@ -340,10 +377,6 @@ export default {
       type: String,
       default: ''
     },
-    allowNegative: {
-      required: false,
-      default: true
-    },
     inputIconImageClass: {
       require: false,
       type: Array,
@@ -361,20 +394,18 @@ export default {
     hasSlot() {
       return !!this.$slots.default
     },
+    hasLabelSlot(){
+      return !!this.$slots.label
+    },
     computedSlotSize() {
       return this.slotSize || this.$slots['default'][0].elm.clientWidth
     }
   },
   methods: {
     onChangeHandler(event) {
-      if (isNaN(event) || event == '') {
+      if (isNaN(event) || event=="") {
         event = this.minNumber || this.minNumber === 0 ? this.minNumber : event
       }
-      if (!this.allowNegative) {
-        event = Math.abs(event)
-      }
-      event = parseFloat(event)
-      // Need to return an integer rather than a string
       this.$emit('input-change', event)
     },
     onEvaluateCode(val) {
@@ -407,11 +438,15 @@ export default {
           value: evaluated,
           numberPrecision: this.numberPrecision
         })
-      } else if (typeof evaluated === 'number') {
-        evaluated = evaluated.toFixed(this.numberPrecision)
+      }else if(typeof evaluated === 'number'){
+        evaluated=evaluated.toFixed(this.numberPrecision)
       }
       return evaluated
     },
+    onInput(value){
+      let evaluatedInput = this.onEvaluateCode(value)
+      this.$emit('on-input',evaluatedInput)
+    },
     onInputBlur(e) {
       this.isFocused = false
       let value = e.target.value
@@ -425,11 +460,11 @@ export default {
         })
       }
       let adjustedMinValue =
-        evaluatedInput && evaluatedInput.length
+      evaluatedInput && evaluatedInput.length
           ? evaluatedInput
           : this.minNumber || this.minNumber === 0
           ? this.minNumber
-          : ''
+          : ''  
       this.$emit('input-blur', adjustedMinValue)
     },
     focusInput() {
@@ -469,7 +504,31 @@ export default {
             })
           : adjustedMinValue
       }
-    }
+    },
+    initInteraction(e) {
+      window.addEventListener('mousemove', this.interact, false);
+      window.addEventListener('mouseup', this.stopInteract, false);
+      e.preventDefault() 
+    },
+    interact(e) {
+      e.preventDefault() 
+      let value=parseInt(this.value || 0)
+      
+      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);
+    },
   },
   created() {
     if (this.value) {
@@ -493,4 +552,4 @@ export default {
     }
   }
 }
-</script>
+</script>