@eturnity/eturnity_reusable_components 6.48.2-EPDM-8134.1 → 6.48.2-test-ext-02.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.48.2-EPDM-8134.1",
+  "version": "6.48.2-test-ext-02.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -114,6 +114,7 @@ import iconCollection from '@/components/icon/iconCollection'
 import dropdownComponent from '@/components/dropdown'
 import videoThumbnail from '@/components/videoThumbnail'
 import icon from '@/components/icon'
+import infoCard from '@/components/infoCard'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -138,7 +139,8 @@ export default {
     iconCollection,
     dropdownComponent,
     videoThumbnail,
-    icon
+    icon,
+    infoCard
   },
   data() {
     return {

package/src/assets/svgIcons/erase.svg

@@ -1,4 +1,4 @@
 <svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-<circle cx="20" cy="20" r="7"></circle>
+<circle cx="20" cy="20" fill="white" r="7"></circle>
 <path d="M24.9592 15.0408C22.2382 12.3197 17.7618 12.3197 15.0408 15.0408C12.3197 17.7618 12.3197 22.2382 15.0408 24.9592C17.7618 27.6803 22.2382 27.6803 24.9592 24.9592C27.6803 22.2382 27.6803 17.8495 24.9592 15.0408ZM23.6426 22.5016L22.4138 23.7304L19.9561 21.2727L17.4984 23.7304L16.2696 22.5016L18.7273 20.0439L16.2696 17.5862L17.4984 16.3574L19.9561 18.815L22.4138 16.3574L23.6426 17.5862L21.185 20.0439L23.6426 22.5016Z" fill="#FF5656"></path>
 </svg>

package/src/assets/svgIcons/integrations.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11H16C17.1046 0 18 0.895431 18 2V12H12C10.8954 12 10 11.1046 10 10V4L0 4V2C0 0.89543 0.895431 0 2 0H10ZM0 6H6C7.10457 6 8 6.89543 8 8V14H18V16C18 17.1046 17.1046 18 16 18H8H7H2C0.895431 18 0 17.1046 0 16V6Z" fill="white"/>
+</svg>

package/src/components/icon/iconCollection.vue

@@ -20,13 +20,13 @@ import styled from 'vue-styled-components'
 
 const Wrapper = styled.div`
   display: block;
-  text-align: center;
-  justify-items: center;
-  width: 100%;
-  background-color: #ccc;
+  text-align:center;
+  justify-items:center
+  width:100%;
+  background-color:#ccc;
 `
 const IconWrapper = styled.div`
-  display: inline-flex;
+  display:inline-flex
   flex-direction: column;
   background-color: white;
   border-radius: 6px;

package/src/components/icon/index.vue

@@ -30,7 +30,7 @@ import styled from 'vue-styled-components'
 const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
 const Wrapper = styled('div', wrapperAttrs)`
   display: flex;
-  position: relative;
+  position:relative
   align-content: center;
   justify-content: center;
   width: ${(props) => props.size};
@@ -58,7 +58,6 @@ const strikedLine = styled('div', strikedAttrs)`
 `
 const IconImageProps = { color: String, hoveredColor: String, size: String }
 const IconImage = styled('div', IconImageProps)`
-  width: 100%;
   svg {
     width: 100%;
     height: 100%;

package/src/components/iconWrapper/index.vue

@@ -8,63 +8,85 @@
     :color="iconColor"
     :hoveredBackgroundColor="hoveredBackgroundColor"
     :isHovered="isHovered"
-    >
-        <icon :disabled="disabled" 
-            :size="iconSize" 
-            :name="name" 
-            :color="iconColor" 
-            :hoveredColor="hoveredIconColor" 
-            :isStriked="isStriked"
-            />
-            
-        <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 = { color: String, isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String,hasBorder:Boolean }
-  const Wrapper = styled('div', wrapperAttrs)`
-    position:relative;
-    display: inline-flex;
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-    border: ${(props) => props.hasBorder? 'solid 1px '+props.theme.colors[props.color] || props.color : ""};
-    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;
-  `
-  
+  >
+    <icon
+      :disabled="disabled"
+      :size="iconSize"
+      :name="name"
+      :color="iconColor"
+      :hoveredColor="hoveredIconColor"
+      :isStriked="isStriked"
+    />
+
+    <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 = {
+  color: String,
+  isHovered: Boolean,
+  borderRadius: String,
+  disabled: Boolean,
+  size: String,
+  backgroundColor: String,
+  hoveredBackgroundColor: String,
+  hasBorder: Boolean
+}
+const Wrapper = styled('div', wrapperAttrs)`
+  position: relative;
+  display: inline-flex;
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+  border: ${(props) =>
+    props.hasBorder
+      ? 'solid 1px ' + props.theme.colors[props.color] || props.color
+      : ''};
+  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: {

package/src/components/infoCard/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <info-container>
+            <icon name="info" size="24px" />
+      <InfoTextContainer>
+        <slot />
+      </InfoTextContainer>
+    </info-container>
+</template>
+    
+<script>
+import styled from 'vue-styled-components'
+import icon from '../icon'
+const InfoContainer = styled('div')`
+  display: flex;
+  align-items: flex-start;
+  gap: 15px;
+  padding: 20px;
+  width: 500px;
+  min-width: 450px;
+  border: 1px dashed #dee2eb;
+  border-radius: 4px;
+  margin:20px 0;
+`
+
+const InfoTextContainer = styled('div')`
+  font-size: 13px;
+`
+
+
+export default {
+    components:{
+        icon,
+        InfoTextContainer,
+        InfoContainer
+    },
+    props:[]
+}
+</script>

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

@@ -84,6 +84,7 @@
 //     inputWidth="150px" //by default, this is 100%
 //     minWidth="100px"
 //     :numberPrecision="3"
+//     minDecimals="2"
 //     unitName="pc"
 //     :value="inputValue" //required -- String
 //     @input-change="onInputChange($event)" //required
@@ -358,6 +359,10 @@ export default {
       required: false,
       default: 0
     },
+    minDecimals: {
+      required: false,
+      default: 0
+    },
     unitName: {
       required: false,
       default: ''
@@ -498,7 +503,8 @@ export default {
         } else {
           let num = stringToNumber({
             value: item,
-            numberPrecision: false
+            numberPrecision: false,
+            minDecimals: this.minDecimals
           })
           return num
         }
@@ -509,7 +515,8 @@ export default {
       if (typeof evaluated === 'string') {
         evaluated = stringToNumber({
           value: evaluated,
-          numberPrecision: this.numberPrecision
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals
         })
       } else if (typeof evaluated === 'number') {
         evaluated = evaluated.toFixed(this.numberPrecision)
@@ -569,7 +576,8 @@ export default {
               : this.defaultNumber
               ? this.defaultNumber
               : this.minNumber,
-          numberPrecision: this.numberPrecision
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals
         })
       }
       let adjustedMinValue =
@@ -614,7 +622,8 @@ export default {
         let input = this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision
+              numberPrecision: this.numberPrecision,
+              minDecimals: this.minDecimals
             })
           : adjustedMinValue
         let unit = this.showLinearUnitName ? '' : this.unitName
@@ -626,7 +635,8 @@ export default {
         return this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision
+              numberPrecision: this.numberPrecision,
+              minDecimals: this.minDecimals
             })
           : adjustedMinValue
       }
@@ -645,7 +655,8 @@ export default {
 
       this.textInput = numberToString({
         value: value && value.length ? value : this.minNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
       //this.value=value
     },
@@ -660,17 +671,20 @@ export default {
     if (this.value) {
       this.textInput = numberToString({
         value: this.value,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     } else if (this.defaultNumber !== null) {
       this.textInput = numberToString({
         value: this.defaultNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     } else if (this.minNumber !== null) {
       this.textInput = numberToString({
         value: this.minNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     }
   },

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

@@ -492,10 +492,14 @@ export default {
       this.toggleDropdown()
     },
     clickOutside(event) {
+      const dropdownRef = this.$refs.dropdown
+      // we need to prevent closing on selecting an option, because in the case of
+      // a disabled option, we don't want to close the dropdown
       if (!this.isClickOutsideActive) return
       if (
         this.$refs.select.$el == event.target ||
-        this.$refs.select.$el.contains(event.target)
+        this.$refs.select.$el.contains(event.target) ||
+        event.target.parentNode === dropdownRef.$el
       ) {
         return
       } else {

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

@@ -1,10 +1,18 @@
 <template>
   <optionContainer
     :data-value="value"
-    :hoveredBgColor="colorMode == 'dark' ? '#000000' : 'hoveredBgColor'"
-    :backgroundColor="colorMode == 'dark' ? 'eturnityGrey' : '#fff'"
+    :hoveredBgColor="
+      colorMode == 'dark'
+        ? '#000000'
+        : hoveredBgColor
+        ? hoveredBgColor
+        : 'grey5'
+    "
     @click="clickHandler"
     @mouseover="hoverHandler"
+    :cursorType="cursorType"
+    :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
+    :title="hoverText"
   >
     <slot></slot>
   </optionContainer>
@@ -14,18 +22,29 @@
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
 import styled from 'vue-styled-components'
-const optionProps = { hoveredBgColor: String, backgroundColor: String }
+const optionProps = {
+  hoveredBgColor: String,
+  cursorType: String,
+  backgroundColor: String
+}
 const optionContainer = styled('div', optionProps)`
   display: flex;
-  cursor: pointer;
+  cursor: ${(props) => props.cursorType};
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 12px 10px;
   gap: 14px;
   width: 100%;
-  background-color: ${(props) => props.theme.colors[props.backgroundColor]?props.theme.colors[props.backgroundColor]:props.backgroundColor};
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor]
+      ? props.theme.colors[props.backgroundColor]
+      : props.backgroundColor};
   box-sizing: inherit;
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor]
+      ? props.theme.colors[props.backgroundColor]
+      : props.backgroundColor};
   &:hover {
     background-color: ${(props) =>
       props.theme.colors[props.hoveredBgColor]
@@ -47,6 +66,21 @@ export default {
     colorMode: {
       required: false,
       default: 'light'
+    },
+    cursorType: {
+      required: false,
+      default: 'cursor'
+    },
+    backgroundColor: {
+      required: false,
+      default: 'white'
+    },
+    hoverText: {
+      required: false
+    },
+    isDisabled: {
+      required: false,
+      default: false
     }
   },
 
@@ -57,7 +91,12 @@ export default {
   },
   methods: {
     clickHandler() {
-      this.$parent.$emit('option-selected', this.value)
+      if (this.isDisabled) {
+        // prevent emitter if the option is disabled
+        return
+      } else {
+        this.$parent.$emit('option-selected', this.value)
+      }
     },
     hoverHandler() {
       this.$parent.$emit('option-hovered', this.value)

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

@@ -10,6 +10,8 @@
         v-if="label && labelAlign === 'left'"
         :hasInfoMessage="!!infoTextMessage"
         :colorMode="colorMode"
+        :primaryColor="primaryColor"
+        :secondaryColor="secondaryColor"
       >
         <label-text :size="size">{{ label }}</label-text>
         <info-text
@@ -99,10 +101,12 @@ const toggleAttrs = {
   fontColor: String,
   disabled: Boolean,
   backgroundColor: String,
-  isChecked: Boolean
+  isChecked: Boolean,
+  secondaryColor: String,
+  primaryColor: String,
 }
 const LabelText = styled('div', toggleAttrs)`
-  color: white;
+  color: ${(props) => props.primaryColor };
   font-size: 13px;
   font-weight: 700;
 `

package/src/components/modals/modal/index.vue

@@ -37,7 +37,7 @@ const ContentContainer = styled('div', contentAttrs)`
   visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
 `
 
-const pageAttrs = { isOpen: Boolean, backdrop: String,position:String }
+const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
 const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
   display: grid;

package/src/components/tableDropdown/index.vue

@@ -134,11 +134,13 @@
                   {{ !!item[option] ? item[option] : '-' }}
                 </span>
                 <template-button
+                  :key="idx"
                   @click.stop="onTemplateClick(item)"
                   v-else-if="option === 'template' && item.has_template"
                   >{{ $gettext('Use template...') }}</template-button
                 >
                 <no-template
+                  :key="idx"
                   v-else-if="option === 'template' && !item.has_template"
                 >
                   {{ $gettext('No main component template') }}

package/src/helpers/numberConverter.js

@@ -91,19 +91,12 @@ export const stringToNumber = ({
   return parseFloat(newVal)
 }
 
-export const numberToString = ({ value, numberPrecision = 0 }) => {
+export const numberToString = ({ value, numberPrecision, minDecimals }) => {
+  const minimumRounding = minDecimals ? minDecimals : 0
   value = parseFloat(value)
-  let minNumberPrecision
-  let maxNumberPrecision
-  if (typeof numberPrecision === 'number') {
-    minNumberPrecision = numberPrecision
-    maxNumberPrecision = numberPrecision
-  } else {
-    minNumberPrecision = numberPrecision[0]
-    maxNumberPrecision = numberPrecision[1]
-  }
   return value.toLocaleString(langForLocaleString(), {
-    minimumFractionDigits: minNumberPrecision,
-    maximumFractionDigits: maxNumberPrecision
+    minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
+    maximumFractionDigits:
+      numberPrecision < minimumRounding ? minimumRounding : numberPrecision
   })
 }