@eturnity/eturnity_reusable_components 8.16.9-SLD.1 → 8.16.9-qa-16-03-26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.16.9-SLD.1",
+  "version": "8.16.9-qa-16-03-26.0",
   "files": [
     "dist",
     "src"

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

@@ -61,7 +61,7 @@
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
         :text-align="textAlign"
-        :value="formatWithCurrency(value)"
+        :value="formattedValue"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @input="onInput($event)"
@@ -75,7 +75,7 @@
 
       <UnitContainer
         v-if="unitName && showLinearUnitName && !hasSlot"
-        :has-length="!!textInput.length"
+        :has-length="hasLength"
         :is-error="isError"
         >{{ unitName }}</UnitContainer
       >
@@ -92,7 +92,7 @@
           :disabled="isSelectDisabled"
           :select-width="`${selectWidth}px`"
           :show-border="false"
-          @input-change="$emit('select-change', $event)"
+          @input-change="handleSelectChange"
         >
           <template #selector>
             <SelectText>{{ getSelectValue }}</SelectText>
@@ -457,8 +457,18 @@
     background-color: ${({ theme }) => theme.colors.grey4};
   `
 
+  const EVENT_TYPES = {
+    INPUT_FOCUS: 'input-focus',
+    INPUT_CHANGE: 'input-change',
+    INPUT_BLUR: 'input-blur',
+    PRESS_ENTER: 'on-enter-click',
+    INPUT_DRAG: 'on-input-drag',
+    SELECT_CHANGE: 'select-change',
+  }
+
   export default {
     name: 'InputNumber',
+    emits: [...Object.values(EVENT_TYPES)],
     components: {
       Container,
       InputContainer,
@@ -701,9 +711,10 @@
     },
     data() {
       return {
-        textInput: '',
         isFocused: false,
         warningIcon: warningIcon,
+        inputValue: null,
+        enteredValue: null,
       }
     },
     computed: {
@@ -726,6 +737,14 @@
 
         return item ? item.label : '-'
       },
+      formattedValue() {
+        return this.isFocused
+          ? this.enteredValue
+          : this.formatWithCurrency(this.value)
+      },
+      hasLength() {
+        return this.formattedValue !== null && this.formattedValue.length > 0
+      },
     },
     watch: {
       focus(value) {
@@ -736,30 +755,19 @@
       clearInput: function (value) {
         if (value) {
           // If the value is typed, then we should clear the textInput on Continue
-          this.textInput = ''
+          this.inputValue = ''
+          this.enteredValue = ''
         }
       },
-    },
-    created() {
-      if (this.value) {
-        this.textInput = numberToString({
-          value: this.value,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-      } else if (this.defaultNumber !== null) {
-        this.textInput = numberToString({
-          value: this.defaultNumber,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-      } else if (this.minNumber !== null) {
-        this.textInput = numberToString({
-          value: this.minNumber,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-      }
+      value: {
+        immediate: true,
+        handler(val) {
+          if (this.value !== this.inputValue && !Number.isNaN(this.value)) {
+            this.inputValue = this.value
+            this.enteredValue = Number(this.value.toFixed(this.numberPrecision))
+          }
+        },
+      },
     },
     mounted() {
       if (this.focus) {
@@ -798,32 +806,28 @@
         }
       },
       onEnterPress() {
-        this.$emit('on-enter-click')
+        this.$emit(EVENT_TYPES.PRESS_ENTER)
         this.$refs.inputField1.$el.blur()
       },
-      onChangeHandler(event) {
-        if (isNaN(event) || event === '') {
-          event = this.defaultNumber
+      onChangeHandler(value) {
+        if (isNaN(value) || value === '') {
+          value = this.defaultNumber
             ? this.defaultNumber
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
-            : event
+            : value
         }
         if (!this.allowNegative) {
-          event = Math.abs(event)
+          value = Math.abs(value)
         }
-        if (this.minNumber && this.minNumber > event) {
-          event = this.minNumber
-        }
-        event = parseFloat(event)
+        value = parseFloat(value)
         // Need to return an integer rather than a string
-        this.$emit('input-change', event)
+        return parseFloat(value)
       },
-      onEvaluateCode(event) {
+      onEvaluateCode(value) {
         // 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, '')
+        let filtered = value.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
         filtered = filtered.split(/([-+*/()])/)
         let formatted = filtered.map((item) => {
           if (
@@ -881,48 +885,32 @@
         return array
       },
       onInput(event) {
-        if (!this.isFocused) {
+        console.log('onInput', event.target.value)
+        this.enteredValue = event.target.value
+        if (!this.isFocused || this.enteredValue === this.inputValue) {
           return
         }
-        if (event.target.value === '') {
-          this.$emit('on-input', '')
-        }
         let evaluatedVal
         try {
-          evaluatedVal = this.onEvaluateCode(event)
+          evaluatedVal = this.onEvaluateCode(String(this.enteredValue))
         } finally {
-          if (evaluatedVal && this.value != evaluatedVal) {
-            this.$emit('on-input', evaluatedVal)
+          this.inputValue = this.onChangeHandler(evaluatedVal)
+
+          if (this.isFocused && typeof this.enteredValue !== 'number') {
+            this.$emit(EVENT_TYPES.INPUT_CHANGE, this.inputValue)
           }
         }
         this.textInput = evaluatedVal
       },
       onInputBlur(e) {
         this.isFocused = false
-        let value = e.target.value
-        let evaluatedInput = this.onEvaluateCode(e)
-        this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
-        if ((evaluatedInput && value.length) || this.minNumber !== null) {
-          this.textInput = numberToString({
-            value:
-              evaluatedInput && value.length
-                ? evaluatedInput
-                : this.defaultNumber
-                ? this.defaultNumber
-                : this.minNumber,
-            numberPrecision: this.numberPrecision,
-            minDecimals: this.minDecimals,
-          })
+        if (!Number.isNaN(this.inputValue)) {
+          this.enteredValue = this.inputValue
         }
-        let adjustedMinValue =
-          evaluatedInput && evaluatedInput.length
-            ? evaluatedInput
-            : this.defaultNumber
-            ? this.defaultNumber
-            : this.minNumber || this.minNumber === 0
-            ? this.minNumber
-            : ''
-        this.$emit('input-blur', adjustedMinValue)
+        this.$emit(
+          EVENT_TYPES.INPUT_BLUR,
+          Number(this.onEvaluateCode(String(this.inputValue)))
+        )
       },
       focusInput() {
         if (this.disabled) {
@@ -932,7 +920,7 @@
         this.$nextTick(() => {
           this.$refs.inputField1.$el.select()
         })
-        this.$emit('input-focus')
+        this.$emit(EVENT_TYPES.INPUT_FOCUS, this.inputValue)
       },
       blurInput() {
         if (this.disabled) {
@@ -952,7 +940,7 @@
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
             : ''
-        if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
+        if (adjustedMinValue || adjustedMinValue === 0) {
           let input = this.numberToStringEnabled
             ? numberToString({
                 value: adjustedMinValue,
@@ -965,6 +953,8 @@
           return input + ' ' + unit
         } else if (!adjustedMinValue && adjustedMinValue !== 0) {
           return ''
+        } else if (this.isFocused) {
+          return value
         } else {
           return this.numberToStringEnabled
             ? numberToString({
@@ -985,14 +975,7 @@
         e.preventDefault()
         let value = parseFloat(this.value || 0)
         value += parseFloat(this.interactionStep) * parseInt(e.movementX)
-        this.$emit('on-input-drag', value)
-
-        this.textInput = numberToString({
-          value: value && value.length ? value : this.minNumber,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-        //this.value=value
+        this.$emit(EVENT_TYPES.INPUT_DRAG, this.onChangeHandler(value))
       },
       stopInteract(e) {
         e.preventDefault()
@@ -1000,6 +983,9 @@
         window.removeEventListener('mouseup', this.stopInteract, false)
         this.blurInput()
       },
+      handleSelectChange(value) {
+        this.$emit(EVENT_TYPES.SELECT_CHANGE, value)
+      },
     },
   }
 </script>

package/src/components/inputs/select/option/index.vue

@@ -2,19 +2,18 @@
   <OptionContainer
     :background-color="
       colorMode == 'dark'
-        ? theme.semanticColors.teal[900]
+        ? '#000000'
         : colorMode == 'transparent'
         ? 'black'
         : backgroundColor
     "
-    :color-mode="colorMode"
     :cursor-type="cursorType"
     :data-value="value"
     :disabled-bg-color="disabledBgColor"
     :disabled-text-color="disabledTextColor"
     :hovered-bg-color="
       colorMode == 'dark'
-        ? theme.semanticColors.teal[800]
+        ? '#000000'
         : colorMode == 'transparent'
         ? 'grey6'
         : hoveredBgColor
@@ -37,7 +36,6 @@
   //   import selectButton from './selectButton'
   //   import selectDropdown from './selectDropDown'
   import styled from 'vue3-styled-components'
-  import theme from '@/assets/theme'
   const optionProps = {
     isDisabled: Boolean,
     hoveredBgColor: String,
@@ -48,7 +46,6 @@
     disabledTextColor: String,
     padding: String,
     textColor: String,
-    colorMode: String,
   }
   const OptionContainer = styled('div', optionProps)`
     display: flex;
@@ -80,8 +77,6 @@
             ? props.theme.colors[props.disabledTextColor]
             : props.disabledTextColor
           : props.theme.colors.grey3
-        : props.colorMode == 'dark'
-        ? props.theme.colors['white']
         : props.theme.colors[props.textColor]
         ? props.theme.colors[props.textColor]
         : props.textColor};
@@ -150,9 +145,7 @@
     },
     emits: ['option-hovered', 'option-selected'],
     data() {
-      return {
-        theme,
-      }
+      return {}
     },
     computed: {},
     methods: {

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

@@ -33,18 +33,8 @@
           :is-active="selectedValue == item.value"
           :primary-color="primaryColor"
           :secondary-color="secondaryColor"
-          :size="size"
           @click="selectItem(item.value)"
         >
-          <OptionIconContainer v-if="item.icon">
-            <RCIcon
-              :color="
-                selectedValue == item.value ? primaryColor : secondaryColor
-              "
-              :name="item.icon"
-              :size="item.iconSize"
-            />
-          </OptionIconContainer>
           {{ item.content }}
         </SwitchOption>
       </SwitchWrapper>
@@ -80,12 +70,6 @@
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
   import theme from '../../../assets/theme'
-  import RCIcon from '../../icon'
-  const OptionIconContainer = styled.div`
-    display: flex;
-    align-items: center;
-    margin-right: 5px;
-  `
   const Container = styled.div``
 
   const flexAttrs = {
@@ -105,6 +89,7 @@
   `
 
   const toggleAttrs = {
+    size: String,
     fontColor: String,
     disabled: Boolean,
     backgroundColor: String,
@@ -120,16 +105,20 @@
 
   const SwitchWrapper = styled('span', toggleAttrs)`
     display: flex;
-    align-items: center
     position: relative;
     cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    height: ${(props) =>
+      props.size === 'medium'
+        ? '24px'
+        : props.size === 'small'
+        ? '16px'
+        : '24px'};
   `
   const optionAttrs = {
     isActive: Boolean,
     primaryColor: String,
     secondaryColor: String,
     inactiveColor: String,
-    size: String,
   }
   const SwitchOption = styled('div', optionAttrs)`
     color: ${(props) =>
@@ -146,13 +135,7 @@
     font-size: 13px;
     line-height: 1;
     text-align: center;
-    height: ${(props) =>
-      props.size === 'medium'
-        ? '24px'
-        : props.size === 'small'
-        ? '16px'
-        : '24px'};
-    padding: 0 10px;
+    padding: 10px;
     margin-right: -1px;
     transition: all 0.1s ease-in-out;
     overflow: hidden;
@@ -186,8 +169,6 @@
       InfoText,
       LabelContainer,
       SwitchOption,
-      OptionIconContainer,
-      RCIcon,
     },
     props: {
       label: {

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

@@ -124,7 +124,6 @@
         : props.size === 'small'
         ? '13px'
         : '16px'};
-    font-weight: 700;
   `
 
   const ToggleWrapper = styled('span', toggleAttrs)`

package/src/helpers/numberConverter.js

@@ -94,7 +94,7 @@ export const stringToNumber = ({
 
 export const numberToString = ({ value, numberPrecision, minDecimals }) => {
   const minimumRounding = minDecimals ? minDecimals : 0
-  value = parseFloat(value)
+  value = !Number.isNaN(parseFloat(value)) ? parseFloat(value) : 0
   return value.toLocaleString(langForLocaleString(), {
     minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
     maximumFractionDigits:

package/src/assets/svgIcons/text_column_one.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 5.75C5 5.33579 5.33579 5 5.75 5H18.25C18.6642 5 19 5.33579 19 5.75C19 6.16421 18.6642 6.5 18.25 6.5H5.75C5.33579 6.5 5 6.16421 5 5.75Z" fill="white"/>
-<path d="M5 9.75C5 9.33579 5.33579 9 5.75 9H18.25C18.6642 9 19 9.33579 19 9.75C19 10.1642 18.6642 10.5 18.25 10.5H5.75C5.33579 10.5 5 10.1642 5 9.75Z" fill="white"/>
-<path d="M5 13.75C5 13.3358 5.33579 13 5.75 13H18.25C18.6642 13 19 13.3358 19 13.75C19 14.1642 18.6642 14.5 18.25 14.5H5.75C5.33579 14.5 5 14.1642 5 13.75Z" fill="white"/>
-<path d="M5 17.75C5 17.3358 5.33579 17 5.75 17H18.25C18.6642 17 19 17.3358 19 17.75C19 18.1642 18.6642 18.5 18.25 18.5H5.75C5.33579 18.5 5 18.1642 5 17.75Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/text_column_three.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 6C3 5.44772 3.44772 5 4 5H7C7.55228 5 8 5.44772 8 6C8 6.55228 7.55228 7 7 7H4C3.44772 7 3 6.55228 3 6Z" fill="#212121"/>
-<path d="M9.58 6C9.58 5.44772 10.0277 5 10.58 5H13.58C14.1323 5 14.58 5.44772 14.58 6C14.58 6.55228 14.1323 7 13.58 7H10.58C10.0277 7 9.58 6.55228 9.58 6Z" fill="#212121"/>
-<path d="M16 6C16 5.44772 16.4477 5 17 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H17C16.4477 7 16 6.55228 16 6Z" fill="#212121"/>
-<path d="M3 10C3 9.44772 3.44772 9 4 9H7C7.55228 9 8 9.44772 8 10C8 10.5523 7.55228 11 7 11H4C3.44772 11 3 10.5523 3 10Z" fill="#212121"/>
-<path d="M9.58 10C9.58 9.44772 10.0277 9 10.58 9H13.58C14.1323 9 14.58 9.44772 14.58 10C14.58 10.5523 14.1323 11 13.58 11H10.58C10.0277 11 9.58 10.5523 9.58 10Z" fill="#212121"/>
-<path d="M16 10C16 9.44772 16.4477 9 17 9H20C20.5523 9 21 9.44772 21 10C21 10.5523 20.5523 11 20 11H17C16.4477 11 16 10.5523 16 10Z" fill="#212121"/>
-<path d="M3 14C3 13.4477 3.44772 13 4 13H7C7.55228 13 8 13.4477 8 14C8 14.5523 7.55228 15 7 15H4C3.44772 15 3 14.5523 3 14Z" fill="#212121"/>
-<path d="M9.58 14C9.58 13.4477 10.0277 13 10.58 13H13.58C14.1323 13 14.58 13.4477 14.58 14C14.58 14.5523 14.1323 15 13.58 15H10.58C10.0277 15 9.58 14.5523 9.58 14Z" fill="#212121"/>
-<path d="M16 14C16 13.4477 16.4477 13 17 13H20C20.5523 13 21 13.4477 21 14C21 14.5523 20.5523 15 20 15H17C16.4477 15 16 14.5523 16 14Z" fill="#212121"/>
-<path d="M3 18C3 17.4477 3.44772 17 4 17H7C7.55228 17 8 17.4477 8 18C8 18.5523 7.55228 19 7 19H4C3.44772 19 3 18.5523 3 18Z" fill="#212121"/>
-<path d="M9.58 18C9.58 17.4477 10.0277 17 10.58 17H13.58C14.1323 17 14.58 17.4477 14.58 18C14.58 18.5523 14.1323 19 13.58 19H10.58C10.0277 19 9.58 18.5523 9.58 18Z" fill="#212121"/>
-<path d="M16 18C16 17.4477 16.4477 17 17 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H17C16.4477 19 16 18.5523 16 18Z" fill="#212121"/>
-</svg>

package/src/assets/svgIcons/text_column_two.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 6C3 5.44772 3.44772 5 4 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H4C3.44772 7 3 6.55228 3 6Z" fill="white"/>
-<path d="M3 10C3 9.44772 3.44772 9 4 9H10C10.5523 9 11 9.44772 11 10C11 10.5523 10.5523 11 10 11H4C3.44772 11 3 10.5523 3 10Z" fill="white"/>
-<path d="M3 14C3 13.4477 3.44772 13 4 13H10C10.5523 13 11 13.4477 11 14C11 14.5523 10.5523 15 10 15H4C3.44772 15 3 14.5523 3 14Z" fill="white"/>
-<path d="M3 18C3 17.4477 3.44772 17 4 17H10C10.5523 17 11 17.4477 11 18C11 18.5523 10.5523 19 10 19H4C3.44772 19 3 18.5523 3 18Z" fill="white"/>
-<path d="M13 6C13 5.44772 13.4477 5 14 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H14C13.4477 7 13 6.55228 13 6Z" fill="white"/>
-<path d="M13 10C13 9.44772 13.4477 9 14 9H20C20.5523 9 21 9.44772 21 10C21 10.5523 20.5523 11 20 11H14C13.4477 11 13 10.5523 13 10Z" fill="white"/>
-<path d="M13 14C13 13.4477 13.4477 13 14 13H20C20.5523 13 21 13.4477 21 14C21 14.5523 20.5523 15 20 15H14C13.4477 15 13 14.5523 13 14Z" fill="white"/>
-<path d="M13 18C13 17.4477 13.4477 17 14 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H14C13.4477 19 13 18.5523 13 18Z" fill="white"/>
-</svg>