@eturnity/eturnity_reusable_components 6.48.0-EPDM-8148.8 → 6.48.0-EPDM-8891.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.48.0-EPDM-8148.8",
+  "version": "6.48.0-EPDM-8891.3",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/iconWrapper/index.vue

@@ -8,85 +8,63 @@
     :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/inputs/inputNumber/index.vue

@@ -471,7 +471,7 @@ export default {
           ? this.minNumber
           : event
       }
-      if (!this.allowNegative && typeof event === 'number') {
+      if (!this.allowNegative) {
         event = Math.abs(event)
       }
       event = parseFloat(event)

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

@@ -492,14 +492,10 @@ 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) ||
-        event.target.parentNode === dropdownRef.$el
+        this.$refs.select.$el.contains(event.target)
       ) {
         return
       } else {
@@ -541,7 +537,15 @@ export default {
   computed: {
     optionLength() {
       if (this.isDropdownOpen) {
-        return this.$refs.dropdown.$children.length
+        // this filterRef is needed to check for the # of children on Filter dropdowns
+        const filterRef =
+          this.$refs.dropdown.$children &&
+          this.$refs.dropdown.$children.length > 1
+            ? this.$refs.dropdown.$children
+            : this.$refs.dropdown.$children[0].$children
+            ? this.$refs.dropdown.$children[0].$children
+            : this.$refs.dropdown.$children
+        return filterRef.length
       } else {
         return 0
       }

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

@@ -1,18 +1,10 @@
 <template>
   <optionContainer
     :data-value="value"
-    :hoveredBgColor="
-      colorMode == 'dark'
-        ? '#000000'
-        : hoveredBgColor
-        ? hoveredBgColor
-        : 'grey5'
-    "
+    :hoveredBgColor="colorMode == 'dark' ? '#000000' : 'hoveredBgColor'"
+    :backgroundColor="colorMode == 'dark' ? 'eturnityGrey' : '#fff'"
     @click="clickHandler"
     @mouseover="hoverHandler"
-    :cursorType="cursorType"
-    :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
-    :title="hoverText"
   >
     <slot></slot>
   </optionContainer>
@@ -22,29 +14,18 @@
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
 import styled from 'vue-styled-components'
-const optionProps = {
-  hoveredBgColor: String,
-  cursorType: String,
-  backgroundColor: String
-}
+const optionProps = { hoveredBgColor: String, backgroundColor: String }
 const optionContainer = styled('div', optionProps)`
   display: flex;
-  cursor: ${(props) => props.cursorType};
+  cursor: pointer;
   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]
@@ -66,21 +47,6 @@ 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
     }
   },
 
@@ -91,12 +57,7 @@ export default {
   },
   methods: {
     clickHandler() {
-      if (this.isDisabled) {
-        // prevent emitter if the option is disabled
-        return
-      } else {
-        this.$parent.$emit('option-selected', this.value)
-      }
+      this.$parent.$emit('option-selected', this.value)
     },
     hoverHandler() {
       this.$parent.$emit('option-hovered', this.value)

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,13 +134,11 @@
                   {{ !!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,11 +91,19 @@ export const stringToNumber = ({
   return parseFloat(newVal)
 }
 
-export const numberToString = ({ value, numberPrecision, minDecimals }) => {
-  const minimumRounding = minDecimals ? minDecimals : 0
+export const numberToString = ({ value, numberPrecision = 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: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
-    maximumFractionDigits: numberPrecision
+    minimumFractionDigits: minNumberPrecision,
+    maximumFractionDigits: maxNumberPrecision
   })
 }

package/src/assets/svgIcons/integrations.svg

@@ -1,3 +0,0 @@
-<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>