@eturnity/eturnity_reusable_components 8.7.6 → 8.10.1-EPDM-13568.0

package/src/components/infoText/index.vue

@@ -1,30 +1,54 @@
 <template>
-  <PageContainer ref="container" :type="type">
-    <div
-      ref="icon"
-      data-test-id="infoText_trigger"
-      @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
-      @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
-      @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
-    >
-      <Dot
-        v-if="type === 'dot'"
-        :color="dotColor"
-        data-test-id="infoText_dot"
-      />
-      <IconComponent
-        v-else
-        :color="iconColor || computedIconColor"
-        :cursor="isDisabled ? 'not-allowed' : 'pointer'"
-        :disabled="isDisabled"
-        :name="iconName"
-        :size="size"
-      />
+  <PageContainer
+    ref="container"
+    :type="type"
+    @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
+    @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
+    @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
+  >
+    <div ref="icon" data-test-id="infoText_trigger">
+      <IconWrapper
+        :background-color="backgroundColor"
+        :border-radius="borderRadius"
+        :hovered-icon="hoveredIcon"
+        :is-active="isActive"
+        :is-disabled="isDisabled"
+        :padding="padding"
+      >
+        <LabelWrapper
+          v-if="labelText && labelAlign === 'left'"
+          :color="iconColor || computedIconColor"
+          :size="labelSize"
+        >
+          {{ labelText }}
+        </LabelWrapper>
+        <Dot
+          v-if="type === 'dot'"
+          :color="dotColor"
+          data-test-id="infoText_dot"
+        />
+        <IconComponent
+          v-else-if="!noIcon"
+          :color="iconColor || computedIconColor"
+          :cursor="isDisabled ? 'not-allowed' : 'pointer'"
+          :disabled="isDisabled"
+          :name="iconName"
+          :size="size"
+        />
+        <LabelWrapper
+          v-if="labelText && labelAlign === 'right'"
+          :color="iconColor || computedIconColor"
+          :size="labelSize"
+        >
+          {{ labelText }}
+        </LabelWrapper>
+      </IconWrapper>
     </div>
     <Teleport v-if="isVisible" to="body">
       <TextWrapper :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
+          :app-theme="appTheme"
           :image="image"
           :style="boxStyle"
           :width="infoBoxWidth"
@@ -36,13 +60,13 @@
             :src="image"
             @load="onImageLoad"
           />
-          <span ref="textContent" :style="textStyle">
+          <span v-if="!hideInfoText" ref="textContent" :style="textStyle">
             <slot>
               <span v-html="text"></span>
             </slot>
           </span>
         </TextOverlay>
-        <Arrow :image="image" :style="arrowStyle" />
+        <!-- <Arrow :image="image" :style="arrowStyle" /> -->
       </TextWrapper>
     </Teleport>
   </PageContainer>
@@ -63,11 +87,14 @@
   import styled from 'vue3-styled-components'
   import theme from '../../assets/theme.js'
 
-  const TextOverlay = styled('div')`
-    background-color: ${(props) =>
-      props.image ? props.theme.colors.white : props.theme.colors.black};
+  const TextOverlayAttrs = {
+    appTheme: String,
+    image: Boolean,
+    width: Number,
+  }
+  const TextOverlay = styled('div', TextOverlayAttrs)`
     color: ${(props) =>
-      props.image ? props.theme.colors.grey1 : props.theme.colors.white};
+      props.image ? props.theme.colors.grey1 : props.theme.colors.black};
     font-size: ${(props) => (props.image ? '12px' : '13px')};
     border-radius: 4px;
     padding: 10px;
@@ -88,16 +115,20 @@
     }
   `
 
-  const Arrow = styled('div')`
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: 8px solid transparent;
-    border-top-color: ${(props) =>
-      props.image ? props.theme.colors.white : props.theme.colors.black};
-    filter: ${(props) =>
-      props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
-  `
+  // const Arrow = styled('div')`
+  //   position: absolute;
+  //   width: 0;
+  //   height: 0;
+  //   border: 8px solid transparent;
+  //   border-top-color: ${(props) =>
+  //     props.image
+  //       ? props.theme.colors.white
+  //       : props.appTheme === 'dark'
+  //       ? props.theme.colors.grey5
+  //       : props.theme.colors.black};
+  //   filter: ${(props) =>
+  //     props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
+  // `
 
   const PageContainer = styled('div')`
     display: ${(props) => (props.type === 'dot' ? 'unset' : 'inline-block')};
@@ -121,16 +152,57 @@
     border-radius: 50%;
   `
 
+  const IconWrapperAttrs = {
+    backgroundColor: String,
+    borderRadius: String,
+    padding: String,
+    hoveredIcon: Boolean,
+    isActive: Boolean,
+    isDisabled: Boolean,
+  }
+  const IconWrapper = styled('div', IconWrapperAttrs)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    white-space: nowrap;
+    background-color: ${(props) => props.backgroundColor};
+    border-radius: ${(props) =>
+      props.hoveredIcon ? '6px' : props.borderRadius};
+    padding: ${(props) => props.padding};
+    width: ${(props) => (props.hoveredIcon ? '32px' : '')};
+    height: ${(props) => (props.hoveredIcon ? '32px' : '')};
+    cursor: pointer;
+    background-color: ${(props) =>
+      props.isActive ? props.theme.colors.transparentWhite2 : ''};
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    &:hover {
+      background-color: ${(props) =>
+        props.hoveredIcon ? props.theme.colors.transparentWhite2 : ''};
+    }
+  `
+
+  const LabelWrapperAttrs = {
+    size: String,
+    color: String,
+  }
+  const LabelWrapper = styled('div', LabelWrapperAttrs)`
+    font-size: ${(props) => props.size};
+    color: ${(props) => props.color};
+  `
+
   export default {
     name: 'InfoText',
     components: {
       IconComponent,
       TextOverlay,
-      Arrow,
+      // Arrow,
       Dot,
       PageContainer,
       TextWrapper,
       OverlayImage,
+      IconWrapper,
+      LabelWrapper,
     },
     props: {
       text: {
@@ -138,6 +210,16 @@
         default: '',
         type: String,
       },
+      isActive: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      labelText: {
+        required: false,
+        default: '',
+        type: String,
+      },
       size: {
         type: String,
         default: '14px',
@@ -189,6 +271,51 @@
         required: false,
         default: 'info', // info, dot
       },
+      appTheme: {
+        type: String,
+        default: 'light', // light or dark
+        required: false,
+      },
+      labelAlign: {
+        type: String,
+        default: 'right',
+        required: false,
+      },
+      backgroundColor: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      borderRadius: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      padding: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      labelSize: {
+        type: String,
+        default: '12px',
+        required: false,
+      },
+      noIcon: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+      hoveredIcon: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+      hideInfoText: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     setup(props) {
       const isVisible = ref(false)
@@ -206,7 +333,11 @@
 
       const textStyle = computed(() => ({
         fontSize: props.image ? '12px' : '13px',
-        color: props.image ? theme.colors.grey1 : theme.colors.white,
+        color: props.image
+          ? theme.colors.grey1
+          : props.appTheme === 'dark'
+          ? theme.colors.black
+          : theme.colors.white,
         textAlign: props.image ? 'right' : 'left',
       }))
 
@@ -336,7 +467,9 @@
           overflowY: 'auto',
           backgroundColor: props.image
             ? theme.colors.white
-            : theme.colors.black,
+            : props.appTheme === 'light'
+            ? theme.colors.black
+            : theme.colors.grey5,
         }
       }
 
@@ -408,7 +541,7 @@
 
         // Calculate new width
         const calculatedWidth = Math.min(
-          Math.max(contentWidth, 200),
+          Math.max(contentWidth, 230),
           parseInt(props.maxWidth, 10)
         )
 

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

@@ -5,6 +5,7 @@
       :check-color="checkColor"
       :cursor-type="cursorType"
       :data-test-id="dataId"
+      :font-color="fontColor"
       :has-label="hasLabel"
       :is-checked="isChecked"
       :is-disabled="isDisabled"
@@ -63,6 +64,7 @@
     isChecked: Boolean,
     isDisabled: Boolean,
     cursorType: String,
+    fontColor: String,
   }
   const Container = styled('label', containerAttrs)`
     display: grid;
@@ -70,7 +72,10 @@
       props.hasLabel ? '16px auto' : '16px'};
     grid-gap: 16px;
     align-content: center;
-    color: ${(props) => props.theme.colors.black};
+    color: ${(props) =>
+      props.theme.colors[props.fontColor]
+        ? props.theme.colors[props.fontColor]
+        : props.fontColor};
     position: relative;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
     font-size: 16px;
@@ -176,7 +181,7 @@
     align-items: center;
     min-height: 18px;
     color: ${(props) =>
-      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+      props.isDisabled ? props.theme.colors.grey2 : 'unset'};
   `
 
   export default {
@@ -193,6 +198,10 @@
         required: false,
         default: '',
       },
+      fontColor: {
+        required: false,
+        default: 'black',
+      },
       isChecked: {
         required: true,
         default: false,

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

@@ -25,6 +25,7 @@
       <InfoText
         v-if="labelInfoText"
         :align-arrow="labelInfoAlign"
+        :app-theme="appTheme"
         :text="labelInfoText"
       />
     </LabelWrapper>
@@ -474,6 +475,10 @@
     },
     inheritAttrs: false,
     props: {
+      appTheme: {
+        type: String,
+        required: false,
+      },
       placeholder: {
         type: String,
         required: false,

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

@@ -21,6 +21,7 @@
         <InfoText
           v-if="infoTextMessage != ''"
           :align-arrow="infoTextAlign"
+          :app-theme="appTheme"
           data-test-id="info_text_message"
           :size="fontSize ? fontSize : '16px'"
           :text="infoTextMessage"
@@ -263,6 +264,11 @@
         default: '',
         type: String,
       },
+      appTheme: {
+        type: String,
+        required: false,
+        default: 'light',
+      },
       alignItems: {
         required: false,
         default: 'horizontal',

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

@@ -141,13 +141,10 @@
             <SelectDropdown
               v-show="isSelectDropdownShown"
               ref="dropdown"
-              :style="{
-                transform: `translate(${dropdownPosition?.left}px, ${
-                  noRelative ? 'auto' : `${dropdownPosition?.top}px`
-                })`,
-              }"
               :bg-color="
-                colorMode == 'dark' || colorMode == 'transparent'
+                dropdownBgColor ||
+                colorMode == 'dark' ||
+                colorMode == 'transparent'
                   ? 'black'
                   : 'white'
               "
@@ -400,8 +397,9 @@
     box-sizing: border-box;
     z-index: ${(props) => (props.isActive ? '2' : '99999')};
     position: absolute;
-    top: 0px;
-    left: 0px;
+    top: ${(props) =>
+      props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
+    left: ${(props) => props.dropdownPosition?.left}px;
     border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
     display: flex;
@@ -666,10 +664,6 @@
         },
         dropdownWidth: null,
         hoveredValue: null,
-        isDisplayedAtBottom: true,
-        selectTopPosition: 0,
-        selectAndDropdownDistance: 0,
-        animationFrameId: null,
       }
     },
     computed: {
@@ -740,13 +734,8 @@
           }, 10)
           await this.$nextTick()
           this.handleSetDropdownOffet()
-          this.calculateSelectTopPosition()
         } else {
           this.dropdownPosition.left = null
-          if (this.animationFrameId) {
-            cancelAnimationFrame(this.animationFrameId)
-            this.animationFrameId = null
-          }
           setTimeout(() => {
             this.isClickOutsideActive = false
           }, 10)
@@ -759,27 +748,11 @@
           })
         }
       },
-      isSelectDropdownShown(isShown) {
-        if (!isShown) return
-
-        // Need to wait for 1ms to make sure the dropdown menu is shown in the DOM
-        // before getting the distance between the select and the dropdown menu
-        setTimeout(() => {
-          this.getDistanceBetweenSelectAndDropdownMenu()
-        }, 100)
-      },
-      selectTopPosition() {
-        this.dropdownPosition.top =
-          this.selectTopPosition +
-          this.$refs.select.$el.clientHeight +
-          this.selectAndDropdownDistance
-      },
     },
     mounted() {
       this.observeDropdownHeight()
       this.observeSelectWidth()
       window.addEventListener('resize', this.handleSetDropdownOffet)
-      document.body.addEventListener('scroll', this.calculateSelectTopPosition)
     },
     beforeMount() {
       this.selectedValue = this.value
@@ -788,10 +761,6 @@
       window.removeEventListener('resize', this.handleSetDropdownOffet)
       if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
       if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
-      document.body.removeEventListener(
-        'scroll',
-        this.calculateSelectTopPosition
-      )
     },
     unmounted() {
       document.removeEventListener('click', this.clickOutside)
@@ -897,11 +866,11 @@
           return
         }
         await this.$nextTick()
-        this.isDisplayedAtBottom = await this.generateDropdownPosition()
+        const isDisplayedAtBottom = await this.generateDropdownPosition()
         // If the dropdown menu is going to be displayed at the bottom,
         // we need reverify its position after a dom update (nextTick)
         await this.$nextTick()
-        if (this.isDisplayedAtBottom) this.generateDropdownPosition()
+        if (isDisplayedAtBottom) this.generateDropdownPosition()
       },
       async generateDropdownPosition() {
         const isDropdownNotCompletelyVisible =
@@ -994,25 +963,6 @@
           }
         }
       },
-      getDistanceBetweenSelectAndDropdownMenu() {
-        const wholeSelectTopPosition =
-          this.selectTopPosition + this.$refs.select.$el.clientHeight
-        this.selectAndDropdownDistance =
-          this.dropdownPosition.top - wholeSelectTopPosition
-      },
-      calculateSelectTopPosition() {
-        const selectRef = this.$refs.select
-        if (selectRef) {
-          const currentTopPosition =
-            selectRef.$el.getBoundingClientRect().top + window.scrollY
-          if (this.selectTopPosition !== currentTopPosition) {
-            this.selectTopPosition = currentTopPosition
-          }
-        }
-        this.animationFrameId = requestAnimationFrame(
-          this.calculateSelectTopPosition
-        )
-      },
     },
   }
 </script>

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

@@ -50,6 +50,7 @@
       : 'rgba(255, 255, 255, 0.9)'};
   z-index: 99999;
   overflow: auto;
+  padding-top: 80px;
 
   @media (max-width: 425px) {
     background: white;