@eturnity/eturnity_reusable_components 7.48.1-EPDM-10964.0 → 7.48.1-EPDM-12680.12

package/src/components/infoText/placeholder.vue

@@ -0,0 +1,225 @@
+<template>
+  <ComponentWrapper>
+    <IconWrapper :size="size">
+      <IconImg
+        ref="iconImg"
+        @click.prevent="toggleShowInfo()"
+        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+      >
+        <IconComponent
+          :color="iconColor"
+          cursor="pointer"
+          name="info"
+          :size="size"
+        />
+      </IconImg>
+      <TextOverlay
+        v-if="showInfo"
+        :arrow-position="arrowPosition"
+        :icon-size="size"
+        :max-width="maxWidth"
+        :position="overlayPosition"
+        :style="overlayStyle"
+        :width="width"
+        ><slot></slot>
+        <span v-html="text"></span>
+      </TextOverlay>
+    </IconWrapper>
+  </ComponentWrapper>
+</template>
+
+<script>
+  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+  //To use:
+  // <info-text
+  //     text="Veritatis et quasi architecto beatae vitae"
+  //     size="20px"
+  // />
+  import theme from '../../assets/theme.js'
+  import styled from 'vue3-styled-components'
+  import IconComponent from '../icon'
+
+  const textAttrs = {
+    iconSize: String,
+    width: String,
+    position: String,
+    arrowPosition: String,
+  }
+  const TextOverlay = styled('div', textAttrs)`
+    position: absolute;
+    text-align: left;
+    background: ${(props) => props.theme.colors.black};
+    padding: 10px;
+    width: ${(props) => props.width};
+    max-width: ${(props) => props.maxWidth};
+    font-size: 13px;
+    font-weight: 400;
+    line-height: normal;
+    border-radius: 4px;
+    z-index: 9999;
+    color: ${(props) => props.theme.colors.white};
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+
+    :before {
+      content: '';
+      background-color: ${(props) => props.theme.colors.black};
+      position: absolute;
+      ${(props) => (props.position === 'top' ? 'bottom: -4px;' : 'top: -4px;')}
+      ${(props) => {
+        switch (props.arrowPosition) {
+          case 'left':
+            return 'left: 40px;'
+          case 'center':
+            return 'left: calc(50% - 4px);'
+          case 'right':
+            return 'right: 40px;'
+          default:
+            return 'left: calc(50% - 4px);'
+        }
+      }}
+      height: 8px;
+      width: 8px;
+      transform-origin: center center;
+      transform: rotate(45deg);
+    }
+
+    span a {
+      color: #2cc0eb;
+    }
+  `
+
+  const iconAttrs = { size: String }
+  const IconWrapper = styled('div', iconAttrs)`
+    position: relative;
+    height: ${(props) => props.size};
+  `
+
+  const IconImg = styled.div`
+    line-height: 0;
+  `
+
+  const ComponentWrapper = styled.div`
+    display: inline-block;
+  `
+
+  export default {
+    name: 'InfoText',
+    components: {
+      IconWrapper,
+      TextOverlay,
+      ComponentWrapper,
+      IconImg,
+      IconComponent,
+    },
+    props: {
+      text: {
+        required: false,
+      },
+      size: {
+        required: false,
+        default: '14px',
+      },
+      openTrigger: {
+        required: false,
+        default: 'onHover', // onHover, onClick
+      },
+      width: {
+        required: false,
+        default: '200px',
+      },
+      maxWidth: {
+        type: String,
+        default: '400px',
+      },
+    },
+    data() {
+      return {
+        showInfo: false,
+        overlayStyle: {},
+        overlayPosition: 'top',
+        arrowPosition: 'center',
+      }
+    },
+    computed: {
+      iconColor() {
+        return theme.colors.mediumGray
+      },
+    },
+    mounted() {
+      window.addEventListener('resize', this.positionOverlay)
+    },
+    beforeUnmount() {
+      window.removeEventListener('resize', this.positionOverlay)
+    },
+    methods: {
+      toggleShowInfo() {
+        this.showInfo = !this.showInfo
+
+        if (this.showInfo) {
+          document.addEventListener('click', this.clickOutside)
+          this.$nextTick(() => {
+            this.positionOverlay()
+          })
+        } else {
+          document.removeEventListener('click', this.clickOutside)
+        }
+      },
+      clickOutside(event) {
+        if (this.$el.contains(event.target)) {
+          return
+        }
+        this.toggleShowInfo()
+      },
+      positionOverlay() {
+        const iconRect = this.$refs.iconImg.getBoundingClientRect()
+        const overlayRect = this.$el
+          .querySelector('.TextOverlay')
+          .getBoundingClientRect()
+
+        let top, left
+
+        // Check if there's enough space above the icon
+        if (
+          iconRect.top > overlayRect.height + 10 &&
+          iconRect.top > window.innerHeight / 2
+        ) {
+          top = -overlayRect.height - 10
+          this.overlayPosition = 'top'
+        } else {
+          // If not, position it below the icon
+          top = iconRect.height + 10
+          this.overlayPosition = 'bottom'
+        }
+
+        left = -(overlayRect.width / 2) + iconRect.width / 2
+
+        // Ensure the overlay doesn't go off-screen horizontally
+        if (iconRect.left + left < 0) {
+          left = -iconRect.left
+          this.arrowPosition = 'left'
+        } else if (
+          iconRect.left + left + overlayRect.width >
+          window.innerWidth
+        ) {
+          left = window.innerWidth - (iconRect.left + overlayRect.width)
+          this.arrowPosition = 'right'
+        } else {
+          this.arrowPosition = 'center'
+        }
+
+        // Adjust vertical position if it goes off-screen
+        const totalHeight = iconRect.top + top + overlayRect.height
+        if (totalHeight > window.innerHeight) {
+          top -= totalHeight - window.innerHeight + 10
+        }
+
+        this.overlayStyle = {
+          top: `${top}px`,
+          left: `${left}px`,
+        }
+      },
+    },
+  }
+</script>

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

@@ -13,7 +13,11 @@
     </LabelSlotWrapper>
 
     <LabelWrapper v-if="labelText">
-      <LabelText :data-id="labelDataId" :label-font-color="labelFontColor">
+      <LabelText
+        :data-id="labelDataId"
+        :label-font-color="labelFontColor"
+        :label-font-weight="labelFontWeight"
+      >
         {{ labelText }}
       </LabelText>
 
@@ -28,11 +32,14 @@
         v-bind="$attrs"
         ref="inputField1"
         :align-items="alignItems"
-        :background-color="backgroundColor"
-        :border-color="borderColor"
+        :background-color="
+          colorMode === 'transparent' ? 'transparent' : backgroundColor
+        "
+        :border-color="colorMode === 'transparent' ? 'white' : borderColor"
+        :color-mode="colorMode"
         :data-id="inputDataId"
         :disabled="disabled"
-        :font-color="fontColor"
+        :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
         :has-label-slot="hasLabelSlot"
         :has-slot="hasSlot"
@@ -51,6 +58,8 @@
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @input="onInput($event)"
+        @keydown.down="decrementValue"
+        @keydown.up="incrementValue"
         @keyup.enter="onEnterPress"
       />
       <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
@@ -92,6 +101,31 @@
           </template>
         </RCSelect>
       </SelectWrapper>
+
+      <ArrowControls
+        v-if="!disabled && showArrowControls"
+        :color-mode="colorMode"
+      >
+        <ArrowButton @click="incrementValue">
+          <Icon
+            :color="colorMode === 'transparent' ? 'white' : undefined"
+            name="arrow_up"
+            size="8px"
+          />
+        </ArrowButton>
+        <ArrowDivider :color-mode="colorMode" />
+        <ArrowButton
+          :is-disabled="textInput <= minNumber"
+          @click="decrementValue"
+        >
+          <Icon
+            :color="colorMode === 'transparent' ? 'white' : undefined"
+            :disabled="textInput <= minNumber"
+            name="arrow_down"
+            size="8px"
+          />
+        </ArrowButton>
+      </ArrowControls>
     </InputWrapper>
     <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
   </Container>
@@ -123,6 +157,7 @@
   //     labelInfoAlign="left"
   //     :minNumber="0"
   //     fontColor="blue"
+  //     colorMode="transparent" // Makes background transparent, border white, and font white
   // >
   //<template name=label><img>....</template>
   //</inputNumber>
@@ -156,8 +191,10 @@
     isInteractive: Boolean,
     alignItems: String,
     labelFontColor: String,
+    labelFontWeight: String,
     borderColor: String,
     showLinearUnitName: Boolean,
+    colorMode: String,
   }
 
   const Container = styled('div', inputProps)`
@@ -181,15 +218,18 @@
         : '1px solid ' + props.theme.colors.grey4};
     height: ${(props) => props.inputHeight};
     max-height: ${(props) => props.inputHeight};
-    padding: 0 10px;
-    padding-right: ${({ slotSize, isError, showLinearUnitName }) =>
-      slotSize
+    padding: ${({ colorMode }) =>
+      colorMode === 'transparent' ? '10px 15px' : '0 10px'};
+    padding-right: ${({ slotSize, isError, showLinearUnitName, colorMode }) =>
+      colorMode === 'transparent'
+        ? '0'
+        : slotSize
         ? isError && !showLinearUnitName
           ? 'calc(' + slotSize + ' + 24px)'
           : 'calc(' + slotSize + ' + 10px)'
         : isError && !showLinearUnitName
         ? '24px'
-        : '5px'};
+        : '40px'};
     border-radius: ${(props) =>
       props.isInteractive && props.alignItems != 'vertical'
         ? '0 4px 4px 0'
@@ -206,14 +246,16 @@
         ? props.fontColor + ' !important'
         : props.theme.colors.black};
     background-color: ${(props) =>
-      props.backgroundColor
+      props.isDisabled
+        ? props.theme.colors.disabled + ' !important'
+        : props.backgroundColor
         ? props.backgroundColor + ' !important'
         : props.theme.colors.white};
     width: ${(props) =>
       props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
     min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
     background-color: ${(props) =>
-      props.isDisabled ? props.theme.colors.grey5 : '#fff'};
+      props.isDisabled ? props.theme.colors.grey5 : props.theme.colors.white};
     box-sizing: border-box;
 
     &::placeholder {
@@ -225,6 +267,55 @@
     }
   `
 
+  const ArrowControlsProps = {
+    colorMode: String,
+  }
+  const ArrowControls = styled('div', ArrowControlsProps)`
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: grid;
+    grid-template-rows: 1fr auto 1fr;
+    align-items: center;
+    justify-items: center;
+    cursor: pointer;
+    width: 30px;
+    background-color: ${(props) =>
+      props.colorMode === 'transparent'
+        ? 'transparent'
+        : props.theme.colors.white};
+    border-left: 1px solid
+      ${(props) =>
+        props.colorMode === 'transparent'
+          ? props.theme.colors.white
+          : props.theme.colors.black};
+  `
+
+  const ArrowButtonProps = {
+    isDisabled: Boolean,
+  }
+  const ArrowButton = styled('button', ArrowButtonProps)`
+    background: transparent;
+    opacity: ${(props) => (props.isDisabled ? '0.2' : '1')};
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+  `
+
+  const ArrowDivider = styled('div', ArrowControlsProps)`
+    width: 100%;
+    height: 1px;
+    background-color: ${(props) =>
+      props.colorMode === 'transparent'
+        ? props.theme.colors.white
+        : props.theme.colors.black};
+  `
+
   const InputWrapper = styled.span`
     position: relative;
   `
@@ -307,7 +398,7 @@
       props.theme.colors[props.labelFontColor]
         ? props.theme.colors[props.labelFontColor]
         : props.labelFontColor};
-    font-weight: 700;
+    font-weight: ${(props) => props.labelFontWeight};
   `
 
   const IconAttrs = { size: String, marginRight: Number }
@@ -359,140 +450,184 @@
       SelectWrapper,
       SelectText,
       Divider,
+      ArrowControls,
+      ArrowButton,
+      ArrowDivider,
     },
     inheritAttrs: false,
     props: {
       placeholder: {
+        type: String,
         required: false,
         default: '',
       },
       isError: {
+        type: Boolean,
         required: false,
         default: false,
       },
       inputWidth: {
+        type: String,
         required: false,
         default: null,
       },
       minWidth: {
+        type: String,
         required: false,
         default: null,
       },
       inputHeight: {
+        type: String,
         required: false,
         default: '40px',
       },
       value: {
+        type: [String, Number],
         required: true,
         default: null,
       },
       clearInput: {
+        type: Boolean,
         required: false,
         default: false,
       },
       alignItems: {
+        type: String,
         required: false,
         default: 'vertical',
       },
       errorMessage: {
+        type: String,
         required: false,
         default: 'Please insert a correct number',
       },
       numberPrecision: {
+        type: Number,
         required: false,
         default: 0,
       },
       minDecimals: {
+        type: Number,
         required: false,
         default: 0,
       },
       unitName: {
+        type: String,
         required: false,
         default: '',
       },
       showLinearUnitName: {
+        type: Boolean,
         required: false,
         default: false,
       },
       disabled: {
+        type: Boolean,
         required: false,
         default: false,
       },
       noBorder: {
+        type: Boolean,
         required: false,
         default: false,
       },
       borderColor: {
+        type: String,
         required: false,
+        default: null,
       },
       textAlign: {
+        type: String,
         required: false,
         default: 'left',
       },
       fontSize: {
+        type: String,
         required: false,
         default: '13px',
       },
       isInteractive: {
+        type: Boolean,
         required: false,
         default: false,
       },
       interactionStep: {
+        type: Number,
         required: false,
         default: 1,
       },
       labelText: {
+        type: String,
         required: false,
         default: null,
       },
       labelInfoText: {
+        type: String,
         required: false,
         default: null,
       },
       labelInfoAlign: {
+        type: String,
         required: false,
         default: 'left',
       },
       defaultNumber: {
+        type: Number,
         required: false,
         default: null,
       },
       minNumber: {
+        type: Number,
         required: false,
         default: null,
       },
       fontColor: {
+        type: String,
         required: false,
         default: null,
       },
       backgroundColor: {
+        type: String,
         required: false,
         default: null,
       },
       numberToStringEnabled: {
+        type: Boolean,
         required: false,
         default: true,
       },
       allowNegative: {
+        type: Boolean,
         required: false,
         default: true,
       },
       slotSize: {
+        type: String,
         required: false,
+        default: null,
       },
       labelFontColor: {
+        type: String,
         required: false,
         default: 'eturnityGrey',
       },
+      labelFontWeight: {
+        type: String,
+        required: false,
+        default: '700',
+      },
       focus: {
+        type: Boolean,
         required: false,
         default: false,
       },
       labelDataId: {
+        type: String,
         required: false,
         default: '',
       },
       inputDataId: {
+        type: String,
         required: false,
         default: '',
       },
@@ -516,6 +651,14 @@
         type: Boolean,
         default: false,
       },
+      colorMode: {
+        type: String,
+        default: '',
+      },
+      showArrowControls: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -585,6 +728,36 @@
       }
     },
     methods: {
+      incrementValue() {
+        const currentValue = Math.max(
+          parseFloat(this.textInput || 0),
+          this.minNumber || 0
+        )
+        const newValue = currentValue + this.interactionStep
+        this.textInput = numberToString({
+          value: newValue,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+        this.$emit('on-input', newValue)
+        this.$emit('input-change', newValue)
+      },
+      decrementValue() {
+        const currentValue = Math.max(
+          parseFloat(this.textInput || 0),
+          this.minNumber || 0
+        )
+        const newValue = currentValue - this.interactionStep
+        if (this.allowNegative || newValue >= 0) {
+          this.textInput = numberToString({
+            value: newValue,
+            numberPrecision: this.numberPrecision,
+            minDecimals: this.minDecimals,
+          })
+          this.$emit('on-input', newValue)
+          this.$emit('input-change', newValue)
+        }
+      },
       onEnterPress() {
         this.$emit('on-enter-click')
         this.$refs.inputField1.$el.blur()
@@ -680,6 +853,7 @@
             this.$emit('on-input', evaluatedVal)
           }
         }
+        this.textInput = evaluatedVal
       },
       onInputBlur(e) {
         this.isFocused = false