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

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/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/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,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`
+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 +260,11 @@ export default {
     UnitContainer,
     ErrorMessage,
     LabelWrapper,
+    LabelSlotWrapper,
     LabelText,
     InfoText,
     Icon,
-    SlotContainer
+    SlotContainer,
   },
   inheritAttrs: false,
   data() {
@@ -274,6 +303,10 @@ export default {
       required: false,
       default: false
     },
+    alignItems: {
+      required: false,
+      default: "vertical",
+    },
     errorMessage: {
       required: false,
       default: 'Please insert a correct number'
@@ -298,6 +331,10 @@ export default {
       required: false,
       default: false
     },
+    borderColor:{
+      required:false,
+      default: 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) {