@eturnity/eturnity_reusable_components 6.33.1-EPDM-7762.3 → 6.33.1-EPDM-6487.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.33.1-EPDM-7762.3",
+  "version": "6.33.1-EPDM-6487.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/assets/theme.js

@@ -3,7 +3,7 @@ const theme = {
     primary: '#48a2d0',
     secondary: '#fdb813',
     tertiary: '#d5d5d5',
-    black: '#263238',
+    black: '#353535',
     yellow: '#fdb813',
     darkGray: '#818181',
     gray1: '#666',
@@ -20,8 +20,8 @@ const theme = {
     grey5: '#fafafa',
     grey6: '#555d61',
     green: '#99db0c',
-    transparentWhite1: '#ffffff32',
-    transparentBlack1: '#263238e6',
+    transparentWhite1:'#ffffff32',
+    transparentBlack1:'#263238e6',
     disabled: '#dfe1e1',
     eturnityGrey: '#263238'
   },

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

@@ -311,7 +311,8 @@ export default {
     return {
       textInput: '',
       isFocused: false,
-      warningIcon: warningIcon
+      warningIcon: warningIcon,
+      isBlurred: false
     }
   },
   props: {
@@ -488,7 +489,9 @@ export default {
           return num
         }
       })
-      let evaluated = eval(formatted.join(''))
+      let evaluated
+      formatted = this.removeStringItemsAfterLastNumber(formatted)
+      evaluated = eval(formatted.join(' '))
       if (typeof evaluated === 'string') {
         evaluated = stringToNumber({
           value: evaluated,
@@ -499,7 +502,32 @@ export default {
       }
       return evaluated
     },
+    removeStringItemsAfterLastNumber(array) {
+      // fixed in EPDM-6487, in order to prevent 'Unexpected end of input'
+      let lastNumberIndex = -1
+      // Find the index of the last number in the array
+      for (let i = array.length - 1; i >= 0; i--) {
+        if (typeof array[i] === 'number') {
+          lastNumberIndex = i
+          break
+        }
+      }
+      // if there are no numbers, return an empty array
+      if (lastNumberIndex === -1) {
+        return []
+      }
+      // Remove non-numeric items after the last number
+      if (lastNumberIndex !== -1) {
+        const newArray = array.slice(0, lastNumberIndex + 1)
+        return newArray
+      }
+      return array
+    },
     onInput(value) {
+      if (this.isBlurred) {
+        this.isBlurred = false
+        return
+      }
       if (value === '') {
         this.$emit('on-input', '')
       }
@@ -514,6 +542,8 @@ export default {
     },
     onInputBlur(e) {
       this.isFocused = false
+      // setting isBlurred so we don't trigger onInput as well
+      this.isBlurred = true
       let value = e.target.value
       let evaluatedInput = this.onEvaluateCode(value)
       this.onChangeHandler(evaluatedInput ? evaluatedInput : value)

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

@@ -14,11 +14,9 @@
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
           "
           :fontSize="fontSize"
-          >{{ label }}
-          <optionalLabel v-if="labelOptional">
-            ({{ $gettext('Optional') }})</optionalLabel
-          >
-        </input-label>
+          >{{ label }} <optionalLabel v-if="labelOptional"> ({{ $gettext('Optional') }})</optionalLabel>
+          </input-label
+        >
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -93,7 +91,9 @@
             :hoveredIndex="hoveredIndex"
             :isActive="isActive"
             :optionWidth="optionWidth"
-            :hoveredBgColor="colorMode == 'dark' ? 'black' : dropdownBgColor"
+            :bgColor="
+              dropdownBgColor || colorMode == 'dark' ? 'black' : 'white'
+            "
             :fontColor="
               dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
             "
@@ -151,7 +151,7 @@ const Selector = styled.div`
   width: 100%;
 `
 
-const labelAttrs = { fontSize: String, fontColor: String }
+const labelAttrs = { fontSize: String }
 const InputLabel = styled('div', labelAttrs)`
   color: ${(props) =>
     props.theme.colors[props.fontColor]
@@ -162,6 +162,7 @@ const InputLabel = styled('div', labelAttrs)`
 `
 const optionalLabel = styled.span`
   font-weight: 300;
+
 `
 const inputProps = { selectWidth: String, optionWidth: String }
 const Container = styled('div', inputProps)`
@@ -197,10 +198,11 @@ const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
+  padding: ${(props) =>
+    props.isSearchBarVisible ? '0' : '0px 0px 0 15px'};
   text-align: left;
   border-radius: 4px;
-  min-height: ${(props) => (props.selectHeight ? props.selectHeight : '36px')};
+  min-height: 36px;
   display: flex;
   align-items: center;
   max-height: ${(props) => props.selectHeight};
@@ -222,7 +224,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   ${(props) => (props.disabled ? 'pointer-events: none' : '')};
 `
 const selectDropdownAttrs = {
-  hoveredBgColor: String,
+  bgColor: String,
   fontColor: String,
   selectWidth: String,
   optionWidth: String,
@@ -243,20 +245,20 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
     background-color:${(props) =>
-      props.theme.colors[props.hoveredBgColor]
-        ? props.theme.colors[props.hoveredBgColor]
-        : props.hoveredBgColor};
+      props.theme.colors[props.bgColor]
+        ? props.theme.colors[props.bgColor]
+        : props.bgColor};
     color:${(props) =>
       props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
     max-height:300px;
     overflow-y:auto;
+    & [data-value="${(props) => props.selectedValue}"]{
+        backdrop-filter: brightness(1.4);
+    }
     &>div:nth-child(${(props) => props.hoveredIndex}){
-        background-color:${(props) =>
-          props.theme.colors[props.hoveredBgColor]
-            ? props.theme.colors[props.hoveredBgColor]
-            : props.hoveredBgColor};
+        backdrop-filter: brightness(1.2);
     }
 `
 const DropdownWrapper = styled('div')`
@@ -323,8 +325,7 @@ export default {
       required: false
     },
     dropdownBgColor: {
-      required: false,
-      default: 'grey5'
+      required: false
     },
     dropdownFontColor: {
       required: false

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

@@ -1,68 +1,59 @@
 <template>
-  <optionContainer
-    :data-value="value"
-    :hoveredBgColor="colorMode == 'dark' ? '#000000' : 'hoveredBgColor'"
-    :backgroundColor="colorMode == 'dark' ? '#000000' : '#fff'"
-    @click="clickHandler"
-    @mouseover="hoverHandler"
-  >
-    <slot></slot>
-  </optionContainer>
-</template>
+    <optionContainer :data-value="value" :hoveredBgColor="hoveredBgColor || colorMode=='dark'?'#000000':'grey5'" @click="clickHandler" @mouseover="hoverHandler">
+        <slot></slot>
+    </optionContainer>
+  </template>
 
-<script>
+  <script>
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
-import styled from 'vue-styled-components'
-const optionProps = { hoveredBgColor: String, backgroundColor: String }
-const optionContainer = styled('div', optionProps)`
-  display: flex;
-  cursor: pointer;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 10px;
-  gap: 14px;
-  width: 100%;
-  background-color: ${(props) => props.backgroundColor};
-  box-sizing: inherit;
-  &:hover {
-    background-color: ${(props) =>
-      props.theme.colors[props.hoveredBgColor]
-        ? props.theme.colors[props.hoveredBgColor]
-        : props.hoveredBgColor};
-  }
-`
+  import styled from 'vue-styled-components'
+  const optionProps={hoveredBgColor:String}
+  const optionContainer = styled('div',optionProps)`
+    display:flex;
+    cursor: pointer;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 10px;
+    gap: 14px;
+    width:100%;
+    box-sizing:inherit;
+    &:hover{
+      background-color:${(props) => props.theme.colors[props.hoveredBgColor]?props.theme.colors[props.hoveredBgColor]:props.hoveredBgColor};
+    }
+  `
 
-export default {
-  name: 'RCoption',
+  export default {
+    name: 'RCoption',
 
-  props: {
-    value: {
-      required: true
-    },
-    hoveredBgColor: {
-      required: false
+    props: {
+      value: {
+        required: true
+      },
+      hoveredBgColor:{
+        required:false,
+      },
+      colorMode:{
+        required:false,
+        default:'light'
+      }
     },
-    colorMode: {
-      required: false,
-      default: 'light'
-    }
-  },
 
-  components: { optionContainer },
+    components: {optionContainer},
 
-  data() {
-    return {}
-  },
-  methods: {
-    clickHandler() {
-      this.$parent.$emit('option-selected', this.value)
+    data() {
+      return {}
+    },
+    methods:{
+        clickHandler(){
+            this.$parent.$emit('option-selected',this.value)
+        },
+        hoverHandler(){
+            this.$parent.$emit('option-hovered',this.value)
+        }
     },
-    hoverHandler() {
-      this.$parent.$emit('option-hovered', this.value)
+    computed: {
     }
-  },
-  computed: {}
-}
-</script>
+  }
+  </script>