@eturnity/eturnity_reusable_components 7.18.0--EPDM-5518.4 → 7.18.0-EPDM-10335.0

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

@@ -3,11 +3,10 @@
     <container
       :checkColor="checkColor"
       :size="size"
-      :hasLabel="label && !!label.length"
+      :hasLabel="hasLabel"
       :backgroundColor="backgroundColor"
       :isChecked="isChecked"
       :isDisabled="isDisabled"
-      :cursorType="cursorType"
     >
       <input-checkbox
         type="checkbox"
@@ -15,10 +14,10 @@
         :data-id="dataId"
         @change="onChangeHandler(!isChecked)"
       />
-      <div>
+      <check-wrapper :hasLabel="hasLabel">
         <span class="checkmark"></span>
-      </div>
-      <label-text v-if="label && !!label.length">{{ label }}</label-text>
+      </check-wrapper>
+      <label-text v-if="hasLabel">{{ label }}</label-text>
     </container>
   </component-wrapper>
 </template>
@@ -34,22 +33,29 @@
 //     size="small"
 //     backgroundColor="red"
 //     :isDisabled="true"
-//     cursorType="default"
 // />
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 
 const ComponentWrapper = styled.div`
   min-height: 18px;
 `
 
+const CheckWrapper = styled('div', { hasLabel: Boolean })`
+  ${(props) =>
+    props.hasLabel &&
+    `
+    display: flex;
+    align-items: center;
+  `}
+`
+
 const containerAttrs = {
   checkColor: String,
   size: String,
   hasLabel: Boolean,
   backgroundColor: String,
   isChecked: Boolean,
-  isDisabled: Boolean,
-  cursorType: String
+  isDisabled: Boolean
 }
 const Container = styled('label', containerAttrs)`
   display: grid;
@@ -58,7 +64,7 @@ const Container = styled('label', containerAttrs)`
   align-content: center;
   color: ${(props) => props.theme.colors.black};
   position: relative;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: 16px;
   user-select: none;
 
@@ -83,7 +89,7 @@ const Container = styled('label', containerAttrs)`
           : props.theme.colors.green
         : props.isDisabled
         ? props.theme.colors.lightGray
-        : props.theme.colors.white};
+        : '#fff'};
     border-radius: 4px;
     border: 1px solid
       ${(props) =>
@@ -148,7 +154,8 @@ export default {
     ComponentWrapper,
     Container,
     InputCheckbox,
-    LabelText
+    LabelText,
+    CheckWrapper
   },
   props: {
     label: {
@@ -176,10 +183,11 @@ export default {
     dataId: {
       type: String,
       default: ''
-    },
-    cursorType: {
-      type: String,
-      default: 'pointer'
+    }
+  },
+  computed: {
+    hasLabel() {
+      return !!this.label.length
     }
   },
   methods: {

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

@@ -47,7 +47,6 @@
         :fontSize="fontSize"
         :fontColor="fontColor"
         :backgroundColor="backgroundColor"
-        v-on="$listeners"
         :hasSlot="hasSlot"
         :hasLabelSlot="hasLabelSlot"
         :slotSize="slotSize"
@@ -101,7 +100,7 @@
 // >
 //<template name=label><img>....</template>
 //</inputNumber>
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import {
   stringToNumber,
   numberToString
@@ -488,9 +487,10 @@ export default {
       // Need to return an integer rather than a string
       this.$emit('input-change', event)
     },
-    onEvaluateCode(val) {
+    onEvaluateCode(event) {
       // function to perform math on the code
       // filter the string in case of any malicious content
+      const val = event.target.value
       let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
       filtered = filtered.split(/([-+*/()])/)
       let formatted = filtered.map((item) => {
@@ -548,20 +548,17 @@ export default {
       }
       return array
     },
-    onInput(value) {
-      // if(!this.isFocused){
-      //   return
-      // }
+    onInput(event) {
       if (this.isBlurred) {
         this.isBlurred = false
         return
       }
-      if (value === '') {
+      if (event.target.value === '') {
         this.$emit('on-input', '')
       }
       let evaluatedVal
       try {
-        evaluatedVal = this.onEvaluateCode(value)
+        evaluatedVal = this.onEvaluateCode(event)
       } finally {
         if (evaluatedVal) {
           this.$emit('on-input', evaluatedVal)
@@ -573,7 +570,7 @@ export default {
       // setting isBlurred so we don't trigger onInput as well
       this.isBlurred = true
       let value = e.target.value
-      let evaluatedInput = this.onEvaluateCode(value)
+      let evaluatedInput = this.onEvaluateCode(e)
       this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
       if ((evaluatedInput && value.length) || this.minNumber !== null) {
         this.textInput = numberToString({

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

@@ -44,7 +44,7 @@
 //   number_max_allowed: 10,
 //   unit_short_name: "cm",
 // },
-import styled from "vue-styled-components"
+import styled from "vue3-styled-components"
 import {
   stringToNumber,
   numberToString,

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

@@ -66,7 +66,7 @@
 </template>
 
 <script>
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import InfoText from '../../infoText'
 import Icon from '../../icon'
 import ErrorMessage from '../../errorMessage'
@@ -328,12 +328,12 @@ export default {
     }
   },
   methods: {
-    onEnterPress() {
+    onEnterPress(event){
       this.$emit('on-enter-click')
       this.$refs.inputElement.$el.blur()
     },
-    onChangeHandler($event) {
-      this.$emit('input-change', $event)
+    onChangeHandler(event) {
+      this.$emit('input-change', event.target.value)
     },
     onInputBlur($event) {
       this.$emit('input-blur', $event.target.value)

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

@@ -60,7 +60,7 @@
 //   { label: 'Button 4', value: 'button_4', disabled: true }
 // ]
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import Modal from '../../modals/modal'
 import InfoText from '../../infoText'
 

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

@@ -1,6 +1,7 @@
 <template>
   <container :inputWidth="inputWidth">
-    <input-wrapper>
+    <input-wrapper :iconPosition="iconPosition" :iconColor="iconColor">
+      <SearchIconSvg class="search-icn" />
       <input-container
         ref="inputElement"
         :placeholder="placeholder"
@@ -13,10 +14,6 @@
         :hasFocus="hasFocus"
         :data-id="dataId"
       />
-      <img
-        class="search-icn"
-        :src="require('../../../assets/icons/search_icon_black.svg')"
-      />
     </input-wrapper>
   </container>
 </template>
@@ -32,8 +29,11 @@
 //   @on-change="function($event)"
 //   :isFilter="true" // to set the height at 30px
 //   data-id="test-data-id"
+//   iconPosition="left"
+//   iconColor="grey2"
 // />
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
+import SearchIconSvg from '../../../assets/icons/search_icon_black.svg'
 
 const inputAttrs = {
   isDisabled: Boolean,
@@ -68,11 +68,18 @@ const InputContainer = styled('input', inputAttrs)`
 const InputWrapper = styled.span`
   position: relative;
 
-  img {
+  svg {
     position: absolute;
-    right: 10px;
-    top: 50%;
     transform: translateY(-50%);
+    top: 50%;
+    ${(props) => (props.iconPosition === 'right' ? 'right' : 'left')}: 10px;
+
+    path {
+      fill: ${(props) =>
+        props.theme.colors[props.iconColor]
+          ? props.theme.colors[props.iconColor]
+          : props.iconColor};
+    }
   }
 `
 
@@ -81,7 +88,8 @@ export default {
   components: {
     InputContainer,
     InputWrapper,
-    Container
+    Container,
+    SearchIconSvg
   },
   props: {
     value: {
@@ -110,11 +118,20 @@ export default {
     dataId: {
       required: false,
       default: ''
+    },
+    iconPosition: {
+      type: String,
+      default: 'right'
+    },
+    iconColor: {
+      type: String,
+      default: 'black'
     }
   },
+  emits: ['on-change'],
   methods: {
     onChangeHandler(event) {
-      this.$emit('on-change', event)
+      this.$emit('on-change', event.target.value)
     },
     focusInputElement() {
       this.$nextTick(() => {