@eturnity/eturnity_reusable_components 7.51.3 → 7.51.5

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,16 @@
         v-bind="$attrs"
         ref="inputField1"
         :align-items="alignItems"
-        :background-color="backgroundColor"
-        :border-color="borderColor"
+        :background-color="
+          colorMode === 'transparent' ? 'transparent' : backgroundColor
+        "
+        :border-color="
+          colorMode === 'transparent' && !borderColor ? '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"
@@ -44,6 +53,7 @@
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
+        :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
         :text-align="textAlign"
@@ -51,6 +61,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">
@@ -79,7 +91,7 @@
           @input-change="$emit('select-change', $event)"
         >
           <template #selector>
-            <SelectText>{{ getSelectValue }}</SelectText>
+            <SelectText>{{ getSelectValue() }}</SelectText>
           </template>
           <template #dropdown>
             <RCOption
@@ -92,6 +104,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 +160,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 +194,11 @@
     isInteractive: Boolean,
     alignItems: String,
     labelFontColor: String,
+    labelFontWeight: String,
     borderColor: String,
     showLinearUnitName: Boolean,
+    colorMode: String,
+    showArrowControls: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -181,9 +222,20 @@
         : '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,
+      showArrowControls,
+    }) =>
+      showArrowControls
+        ? '40px'
+        : colorMode === 'transparent'
+        ? '0'
+        : slotSize
         ? isError && !showLinearUnitName
           ? 'calc(' + slotSize + ' + 24px)'
           : 'calc(' + slotSize + ' + 10px)'
@@ -201,20 +253,26 @@
       props.isError
         ? props.theme.colors.grey6
         : props.isDisabled
-        ? props.theme.colors.grey2
+        ? props.colorMode === 'transparent'
+          ? props.theme.colors.white
+          : props.theme.colors.grey2
         : props.fontColor
         ? props.fontColor + ' !important'
         : props.theme.colors.black};
     background-color: ${(props) =>
-      props.backgroundColor
+      props.isDisabled
+        ? props.colorMode === 'transparent'
+          ? 'transparent'
+          : props.theme.colors.disabled
+        : 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'};
     box-sizing: border-box;
+    opacity: ${(props) =>
+      props.isDisabled && props.colorMode === 'transparent' ? '0.4' : '1'};
 
     &::placeholder {
       color: ${(props) => props.theme.colors.grey2};
@@ -225,6 +283,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 +414,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 +466,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 +667,14 @@
         type: Boolean,
         default: false,
       },
+      colorMode: {
+        type: String,
+        default: '',
+      },
+      showArrowControls: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -585,6 +744,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 +869,7 @@
             this.$emit('on-input', evaluatedVal)
           }
         }
+        this.textInput = evaluatedVal
       },
       onInputBlur(e) {
         this.isFocused = false

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

@@ -31,8 +31,10 @@
           <InputContainer
             ref="inputElement"
             :background-color="backgroundColor"
+            :border-color="borderColor"
             :data-id="inputDataId"
             data-test-id="input"
+            :default-padding="defaultPadding"
             :disabled="disabled"
             :disabled-background-color="disabledBackgroundColor"
             :font-color="fontColor"
@@ -64,6 +66,13 @@
           <IconWrapper v-if="hasError" data-test-id="error_wrapper" size="16px">
             <Icon cursor="default" name="warning" size="16px" />
           </IconWrapper>
+          <IconWrapper
+            v-if="iconName && !hasError && inputType !== 'password'"
+            :default-padding="defaultPadding"
+            size="16px"
+          >
+            <Icon color="white" cursor="default" :name="iconName" size="16px" />
+          </IconWrapper>
         </IconContainer>
         <ErrorMessage
           v-if="hasError && hasErrorMessage"
@@ -131,6 +140,7 @@
     borderColor: String,
     inputHeight: String,
     disabledBackgroundColor: String,
+    defaultPadding: Boolean,
   }
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
@@ -148,6 +158,8 @@
         ? '11px 25px 11px 10px'
         : props.inputType === 'password'
         ? '11px 25px 11px 10px'
+        : props.defaultPadding
+        ? '10px 35px 10px 15px'
         : '11px 5px 11px 10px'};
     border-radius: 4px;
     position: relative;
@@ -194,13 +206,13 @@
       props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
   `
 
-  const IconAttrs = { size: String }
+  const IconAttrs = { size: String, defaultPadding: Boolean }
   const IconWrapper = styled('div', IconAttrs)`
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto;
-    right: 5px;
+    right: ${(props) => (props.defaultPadding ? '15px' : '5px')};
     height: ${(props) => (props.size ? props.size : 'auto')};
   `
 
@@ -364,6 +376,15 @@
         default: '',
         type: String,
       },
+      iconName: {
+        required: false,
+        default: null,
+        type: String,
+      },
+      defaultPadding: {
+        required: false,
+        default: false,
+      },
     },
     data() {
       return {

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

@@ -1,5 +1,5 @@
 <template>
-  <ComponentWrapper :layout="layout">
+  <ComponentWrapper :color-mode="colorMode" :layout="layout">
     <RadioWrapper
       v-for="(item, index) in options"
       :key="item.value"
@@ -7,7 +7,9 @@
     >
       <LabelContainer
         :checkmark-color="checkmarkColor"
+        :color-mode="colorMode"
         :has-label="!!item.label"
+        :has-slots="!!$slots[`input-${item.value}`]"
         :is-checked="selectedOption === item.value"
         :is-disabled="item.disabled"
         :size="size"
@@ -25,6 +27,7 @@
         <span class="checkmark"></span>
         <LabelText
           v-if="item.label"
+          :color-mode="colorMode"
           :data-test-id="'radioLabel_' + item.value"
           :is-disabled="item.disabled"
         >
@@ -36,6 +39,7 @@
           size="16px"
           :text="item.infoText"
         />
+        <slot :name="`input-${item.value}`"></slot>
       </LabelContainer>
       <ImageContainer v-if="item.img">
         <RadioImage
@@ -95,12 +99,14 @@
 
   const wrapperProps = {
     layout: String,
+    colorMode: String,
   }
   const ComponentWrapper = styled('div', wrapperProps)`
     display: flex;
     flex-direction: ${(props) =>
       props.layout === 'vertical' ? 'column' : 'row'};
-    grid-gap: 10px 5px;
+    grid-gap: ${(props) =>
+      props.colorMode === 'transparent' ? '16px 5px' : '10px 5px'};
     flex-wrap: wrap;
   `
 
@@ -123,14 +129,20 @@
     isChecked: Boolean,
     checkmarkColor: String,
     hasLabel: Boolean,
+    colorMode: String,
+    hasSlots: Boolean,
   }
   const LabelContainer = styled('label', containerProps)`
     display: grid;
     grid-template-columns: auto 1fr auto;
-    grid-gap: ${(props) => (props.hasLabel ? '15px' : 0)};
+    grid-gap: ${(props) => (props.hasLabel || props.hasSlots ? '15px' : 0)};
     align-items: center;
     color: ${(props) =>
-      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+      props.isDisabled
+        ? props.theme.colors.grey2
+        : props.colorMode === 'transparent'
+        ? props.theme.colors.white
+        : props.theme.colors.black};
     position: relative;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     font-size: ${(props) =>
@@ -187,10 +199,14 @@
     }
   `
 
-  const textAttrs = { isDisabled: Boolean }
+  const textAttrs = { isDisabled: Boolean, colorMode: String }
   const LabelText = styled('div', textAttrs)`
     color: ${(props) =>
-      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+      props.isDisabled
+        ? props.theme.colors.grey2
+        : props.colorMode === 'transparent'
+        ? props.theme.colors.white
+        : props.theme.colors.black};
   `
 
   const RadioImage = styled.img`
@@ -280,6 +296,11 @@
         required: false,
         type: String,
       },
+      colorMode: {
+        default: '',
+        required: false,
+        type: String,
+      },
     },
     emits: ['on-radio-change'],
     data() {