@eturnity/eturnity_reusable_components 7.18.0-EPDM-10335.1 → 7.18.0-qa-dev03.0

package/src/components/icon/index.vue

@@ -1,13 +1,20 @@
 <template>
-  <wrapper>
-    <icon-image>
-      <i v-html="icon.html" />
-    </icon-image>
-    <striked-line v-if="isStriked"></striked-line>
-  </wrapper>
+  <Wrapper :isDisabled="disabled" :size="size" :cursor="cursor">
+    <icon-image
+      :disabled="disabled"
+      :size="size"
+      :color="color"
+      :hoveredColor="hoveredColor"
+      :backgroundColor="backgroundColor"
+      v-html="
+        require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
+      "
+    ></icon-image>
+    <striked-line v-if="isStriked" :color="color" :disabled="disabled" :hoveredColor="hoveredColor"></striked-line>
+  </Wrapper>
 </template>
 
-<script setup>
+<script>
 // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
 //  How to use:
 //<icon
@@ -19,71 +26,40 @@
 //   isStriked = "true"
 // />
 
-import { onMounted, reactive, watch } from 'vue'
-import styled from 'vue3-styled-components'
-import { fetchIcon } from './iconCache'
+import styled from 'vue-styled-components'
 
-const props = defineProps({
-  disabled: {
-    required: false,
-    default: false
-  },
-  name: {
-    required: true
-  },
-  color: {
-    required: false
-  },
-  hoveredColor: {
-    required: false
-  },
-  size: {
-    required: false,
-    default: '30px'
-  },
-  cursor: {
-    required: false,
-    default: null
-  },
-  isStriked: {
-    required: false,
-    default: false
-  }
-})
-
-const Wrapper = styled('div')`
+const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
+const Wrapper = styled('div', wrapperAttrs)`
   display: flex;
   position: relative;
   align-content: center;
   justify-content: center;
-  width: ${props.size};
-  height: ${props.size};
-  min-width: ${props.size};
-  min-height: ${props.size};
-  cursor: ${props.disabled ? 'not-allowed' : props.cursor};
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+  min-width: ${(props) => props.size};
+  min-height: ${(props) => props.size};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
   line-height: 0;
 `
-const strikedAttrs = {
-  isDisabled: Boolean,
-  color: String,
-  hoveredColor: String
-}
-const StrikedLine = styled.div`
+
+const strikedAttrs = { isDisabled: Boolean, color: String, hoveredColor: String }
+const strikedLine = styled('div', strikedAttrs)`
   display: flex;
   position: absolute;
-  bottom: 0;
-  left: 0;
+  bottom:0;
+  left:0;
   align-content: center;
   justify-content: center;
   width: 143%;
-  height: 8%;
-  background-color: ${({ theme }) => theme.colors[props.color] || props.color};
+  height:8%;
+  background-color: ${(props)=>props.theme.colors[props.color] || props.color};
   min-height: 0;
   line-height: 0;
   transform-origin: 0% 100%;
   transform: rotate(-45deg);
 `
-const IconImage = styled.div`
+const IconImageProps = { color: String, hoveredColor: String, size: String, backgroundColor: String}
+const IconImage = styled('div', IconImageProps)`
   width: 100%;
   svg {
     width: 100%;
@@ -92,24 +68,56 @@ const IconImage = styled.div`
     padding: ${(props) => props.backgroundColor ? '3px' : '0'};
   }
   svg path {
-    ${({ theme }) =>
-      props.color && `fill: ${theme.colors[props.color] || props.color};`}
+    ${(props) =>
+      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
   }
   &:hover > svg path {
-    ${props.hoveredColor && `fill: ${props.hoveredColor};`}
+    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
   }
   &:hover + div {
-    background-color: ${props.hoveredColor};
+    background-color: ${(props)=>props.hoveredColor};
   }
 `
 
-const icon = reactive({ html: '' })
-
-const loadSvg = async () => {
-  icon.html = await fetchIcon(props.name.toLowerCase())
+export default {
+  name: 'icon',
+  components: {
+    IconImage,
+    Wrapper,
+    strikedLine
+  },
+  props: {
+    disabled: {
+      required: false,
+      default: false
+    },
+    name: {
+      required: true
+    },
+    color: {
+      required: false
+    },
+    backgroundColor: {
+      required: false
+    },
+    hoveredColor: {
+      required: false
+    },
+    size: {
+      required: false,
+      default: '30px'
+    },
+    cursor: {
+      required: false,
+      default: null
+    },
+    isStriked: {
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  }
 }
-
-onMounted(() => loadSvg())
-
-watch(() => props.name, loadSvg)
 </script>

package/src/components/iconWrapper/index.vue

@@ -42,7 +42,7 @@
 //   size="60px" by default, this is 30px
 // />
 
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import icon from '../icon'
 const wrapperAttrs = {
   color: String,
@@ -148,6 +148,9 @@ export default {
       required: false,
       default: false
     }
+  },
+  data() {
+    return {}
   }
 }
 </script>

package/src/components/infoCard/index.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import Icon from '../icon'
 
 const InfoContainer = styled.div`
@@ -24,6 +24,7 @@ const TextContainer = styled.div`
   width: 100%;
 `
 
+
 export default {
   name: 'InfoCard',
   components: {
@@ -32,4 +33,4 @@ export default {
     TextContainer
   }
 }
-</script>
+</script>

package/src/components/infoText/index.vue

@@ -30,7 +30,7 @@
 //     alignArrow="right" // which side the arrow should be on
 // />
 import theme from '../../assets/theme.js'
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import icon from '../icon'
 
 const textAttrs = {

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

@@ -3,7 +3,7 @@
     <container
       :checkColor="checkColor"
       :size="size"
-      :hasLabel="hasLabel"
+      :hasLabel="!!label.length"
       :backgroundColor="backgroundColor"
       :isChecked="isChecked"
       :isDisabled="isDisabled"
@@ -14,10 +14,10 @@
         :data-id="dataId"
         @change="onChangeHandler(!isChecked)"
       />
-      <check-wrapper :hasLabel="hasLabel">
+      <div>
         <span class="checkmark"></span>
-      </check-wrapper>
-      <label-text v-if="hasLabel">{{ label }}</label-text>
+      </div>
+      <label-text v-if="!!label.length">{{ label }}</label-text>
     </container>
   </component-wrapper>
 </template>
@@ -34,21 +34,12 @@
 //     backgroundColor="red"
 //     :isDisabled="true"
 // />
-import styled from 'vue3-styled-components'
+import styled from 'vue-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,
@@ -154,8 +145,7 @@ export default {
     ComponentWrapper,
     Container,
     InputCheckbox,
-    LabelText,
-    CheckWrapper
+    LabelText
   },
   props: {
     label: {
@@ -185,11 +175,6 @@ export default {
       default: ''
     }
   },
-  computed: {
-    hasLabel() {
-      return !!this.label.length
-    }
-  },
   methods: {
     onChangeHandler(value) {
       if (this.isDisabled) {

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

@@ -47,6 +47,7 @@
         :fontSize="fontSize"
         :fontColor="fontColor"
         :backgroundColor="backgroundColor"
+        v-on="$listeners"
         :hasSlot="hasSlot"
         :hasLabelSlot="hasLabelSlot"
         :slotSize="slotSize"
@@ -100,7 +101,7 @@
 // >
 //<template name=label><img>....</template>
 //</inputNumber>
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import {
   stringToNumber,
   numberToString
@@ -487,10 +488,9 @@ export default {
       // Need to return an integer rather than a string
       this.$emit('input-change', event)
     },
-    onEvaluateCode(event) {
+    onEvaluateCode(val) {
       // 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,19 +548,19 @@ export default {
       }
       return array
     },
-    onInput(event) {
+    onInput(value) {
       if (this.isBlurred) {
         this.isBlurred = false
         return
       }
-      if (event.target.value === '') {
+      if (value === '' && this.isFocused) {
         this.$emit('on-input', '')
       }
       let evaluatedVal
       try {
-        evaluatedVal = this.onEvaluateCode(event)
+        evaluatedVal = this.onEvaluateCode(value)
       } finally {
-        if (evaluatedVal) {
+        if (evaluatedVal && this.isFocused && this.value != evaluatedVal) {
           this.$emit('on-input', evaluatedVal)
         }
       }
@@ -570,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(e)
+      let evaluatedInput = this.onEvaluateCode(value)
       this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
       if ((evaluatedInput && value.length) || this.minNumber !== null) {
         this.textInput = numberToString({
@@ -646,10 +646,10 @@ export default {
       }
     },
     initInteraction(e) {
+      this.focusInput()
+      e.preventDefault()
       window.addEventListener('mousemove', this.interact, false)
       window.addEventListener('mouseup', this.stopInteract, false)
-      e.preventDefault()
-      this.focusInput()
     },
     interact(e) {
       e.preventDefault()

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

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

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

@@ -66,7 +66,7 @@
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import Icon from '../../icon'
 import ErrorMessage from '../../errorMessage'
@@ -332,8 +332,8 @@ export default {
       this.$emit('on-enter-click')
       this.$refs.inputElement.$el.blur()
     },
-    onChangeHandler(event) {
-      this.$emit('input-change', event.target.value)
+    onChangeHandler($event) {
+      this.$emit('input-change', $event)
     },
     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 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import Modal from '../../modals/modal'
 import InfoText from '../../infoText'
 

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

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