@eturnity/eturnity_reusable_components 8.7.6 → 8.10.1

package/src/components/infoText/index.vue

@@ -1,25 +1,48 @@
 <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">
@@ -36,13 +59,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,7 +86,12 @@
   import styled from 'vue3-styled-components'
   import theme from '../../assets/theme.js'
 
-  const TextOverlay = styled('div')`
+  const TextOverlayAttrs = {
+    appTheme: String,
+    image: Boolean,
+    width: Number,
+  }
+  const TextOverlay = styled('div', TextOverlayAttrs)`
     background-color: ${(props) =>
       props.image ? props.theme.colors.white : props.theme.colors.black};
     color: ${(props) =>
@@ -88,16 +116,16 @@
     }
   `
 
-  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.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 +149,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 +207,16 @@
         default: '',
         type: String,
       },
+      isActive: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      labelText: {
+        required: false,
+        default: '',
+        type: String,
+      },
       size: {
         type: String,
         default: '14px',
@@ -189,6 +268,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 +330,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 +464,9 @@
           overflowY: 'auto',
           backgroundColor: props.image
             ? theme.colors.white
-            : theme.colors.black,
+            : props.appTheme === 'light'
+            ? theme.colors.black
+            : theme.colors.grey5,
         }
       }
 
@@ -408,7 +538,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/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;

package/src/components/panelRangeInfo/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <Container :width="width">
+    <MainLine />
+    <MainLineHighlight :max-percent="maxPercent" :min-percent="minPercent" />
+    <TopValueContainer :position="valuePercent + '%'">
+      <TextWrapper :background-color="arrowColor">{{ value }}</TextWrapper>
+      <Arrow :background-color="arrowColor" />
+      <VerticalMarkerArrow :color="colorVerticalMarkerArrow" />
+    </TopValueContainer>
+    <BottomValueContainer :position="minPercent + '%'">
+      <TextWrapper>{{ minValue }}</TextWrapper>
+      <VerticalMarker side="bottom" />
+    </BottomValueContainer>
+    <BottomValueContainer :position="maxPercent + '%'">
+      <TextWrapper>{{ maxValue }}</TextWrapper>
+      <VerticalMarker side="bottom" />
+    </BottomValueContainer>
+  </Container>
+</template>
+
+<script>
+  // import ProgressBar from "@eturnity/eturnity_reusable_components/src/components/progressBar"
+  //To Use:
+  // <progress-bar
+  //   fillColor="#000"
+  //   backgroundColor="#888"
+  //   minWidth="150px"
+  //   maxWidth="100%"
+  //   :fillProgress="50" //should be a number for percent
+  //   stepNumber="4"
+  //   :labelText="translate('step')"
+  // />
+  import styled from 'vue3-styled-components'
+  const Container = styled.div`
+    position: relative;
+    display: flex;
+    height: 47px;
+    width: ${(props) => props.width};
+  `
+  const TopValueContainer = styled('div', { position: String })`
+    font-size: 11px;
+    left: ${(props) => props.position};
+    position: absolute;
+    display: flex;
+    justify-content: center
+    width: 0px;
+    color:${(props) => props.theme.colors.black};
+    item-align: center;
+
+  `
+  const BottomValueContainer = styled('div', { position: String })`
+    font-size: 12px;
+    left: ${(props) => props.position};
+    width: 0px;
+    bottom: -2px;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    item-align: center;
+    border-radius: 4px;
+    color: white;
+  `
+  const TextWrapper = styled('div', { backgroundColor: String })`
+    padding: 2px 6px;
+    background-color: ${(props) =>
+      props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    border-radius: 4px;
+  `
+  const Arrow = styled('div', { backgroundColor: String })`
+    position: absolute;
+    bottom: -10px;
+    left: calc(50% - 6px);
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-top-color: ${(props) =>
+      props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
+  `
+  const MainLine = styled.div`
+    display: block;
+    position: absolute;
+    bottom: 16px;
+    height: 4px;
+    width: 100%;
+    border-radius: 4px;
+    background-color: ${(props) => props.theme.colors.grey4};
+  `
+  const MainLineHighlight = styled('div', {
+    minPercent: Number,
+    maxPercent: Number,
+  })`
+    display: block;
+    position: absolute;
+    left: ${(props) => props.minPercent + '%'};
+    right: ${(props) => 100 - props.maxPercent + '%'};
+    bottom: 16px;
+    height: 4px;
+    background-color: white;
+  `
+  const VerticalMarker = styled('div')`
+    position: absolute;
+    width: 1px;
+    height: 8px;
+    background-color: white;
+    display: inline-block;
+    top: -6px;
+    left: 0px;
+  `
+  const VerticalMarkerArrow = styled('div', { color: String })`
+    position: absolute;
+    width: 1px;
+    height: 4px;
+    background-color: ${(props) => props.color};
+    display: inline-block;
+    bottom: -14px;
+    left: 0px;
+  `
+  export default {
+    name: 'ProgressBar',
+    components: {
+      Container,
+      MainLineHighlight,
+      Arrow,
+      TopValueContainer,
+      BottomValueContainer,
+      MainLine,
+      VerticalMarker,
+      VerticalMarkerArrow,
+      TextWrapper,
+    },
+    props: {
+      minValue: {
+        required: true,
+        type: Number,
+      },
+      maxValue: {
+        required: true,
+        type: Number,
+      },
+      value: {
+        required: true,
+        type: Number,
+      },
+      arrowColor: {
+        required: false,
+        type: String,
+        default: 'white',
+      },
+      width: {
+        required: false,
+        type: String,
+        default: null,
+      },
+    },
+    data() {
+      return {}
+    },
+    computed: {
+      minPercent() {
+        if (this.maxValue === this.minValue) {
+          return 50
+        } else {
+          return 30
+        }
+      },
+      maxPercent() {
+        if (this.maxValue === this.minValue) {
+          return 50
+        } else {
+          return 70
+        }
+      },
+      valuePercent() {
+        let percent
+        if (this.maxValue === this.minValue) {
+          percent = this.minPercent + 10 * (this.value - this.minValue)
+        } else {
+          percent =
+            this.minPercent +
+            ((this.maxPercent - this.minPercent) /
+              (this.maxValue - this.minValue)) *
+              (this.value - this.minValue)
+        }
+        return Math.max(0, Math.min(100, percent))
+      },
+      colorVerticalMarkerArrow() {
+        if (this.value < this.maxValue && this.value > this.minValue) {
+          return 'black'
+        } else {
+          return 'white'
+        }
+      },
+    },
+  }
+</script>