@eturnity/eturnity_reusable_components 7.51.2 → 7.51.4

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/defaultProps.js

@@ -1,6 +1,4 @@
 const defaultRadioButtonProps = {
-  dataId: 'radio_buttons',
-  name: 'options',
   options: [
     {
       label: 'Option 1',

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() {

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

@@ -17,7 +17,9 @@
       >
         <InputLabel
           :font-color="
-            labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
+            labelFontColor || colorMode == 'dark' || colorMode == 'transparent'
+              ? 'white'
+              : 'eturnityGrey'
           "
           :font-size="fontSize"
           >{{ label }}
@@ -40,18 +42,26 @@
         <SelectButton
           ref="select"
           :bg-color="
-            buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
+            buttonBgColor || colorMode == 'dark'
+              ? 'transparentBlack1'
+              : colorMode == 'transparent'
+              ? 'transparent'
+              : 'white'
           "
           class="select-button"
+          :color-mode="colorMode"
           :data-id="dataId"
           :disabled="disabled"
           :font-color="
-            buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
+            buttonFontColor || colorMode == 'dark' || colorMode == 'transparent'
+              ? 'white'
+              : 'black'
           "
           :font-size="fontSize"
           :has-error="hasError"
           :has-no-padding="isSearchBarVisible || !hasSelectButtonPadding"
           :height="height"
+          :is-search-bar-visible="isSearchBarVisible"
           :no-relative="noRelative"
           :padding-left="paddingLeft"
           :select-height="selectHeight"
@@ -72,7 +82,11 @@
             ref="searchInput"
             background-color="transparent"
             :font-color="
-              buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
+              buttonFontColor ||
+              colorMode == 'dark' ||
+              colorMode == 'transparent'
+                ? 'white'
+                : 'black'
             "
             :font-size="fontSize"
             input-height="34px"
@@ -86,32 +100,37 @@
           />
           <Selector
             v-else
+            :disabled="disabled"
             :padding-left="paddingLeft"
             :select-width="selectWidth"
             :show-border="showBorder"
           >
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
-          <Caret class="caret_dropdown" @click.stop="toggleCaretDropdown">
+          <Caret
+            class="caret_dropdown"
+            :color-mode="colorMode"
+            @click.stop="toggleCaretDropdown"
+          >
             <Icon
               v-if="isDropdownOpen"
               :color="
-                caretColor || colorMode == 'dark'
+                caretColor || colorMode == 'dark' || colorMode == 'transparent'
                   ? 'white'
                   : 'transparentBlack1'
               "
               name="arrow_up"
-              size="12px"
+              :size="colorMode === 'transparent' ? '8px' : '12px'"
             />
             <Icon
               v-else
               :color="
-                caretColor || colorMode == 'dark'
+                caretColor || colorMode == 'dark' || colorMode == 'transparent'
                   ? 'white'
                   : 'transparentBlack1'
               "
               name="arrow_down"
-              size="12px"
+              :size="colorMode === 'transparent' ? '8px' : '12px'"
             />
           </Caret>
         </SelectButton>
@@ -121,15 +140,27 @@
               v-show="isSelectDropdownShown"
               ref="dropdown"
               :bg-color="
-                dropdownBgColor || colorMode == 'dark' ? 'black' : 'white'
+                dropdownBgColor ||
+                colorMode == 'dark' ||
+                colorMode == 'transparent'
+                  ? 'black'
+                  : 'white'
               "
               :dropdown-position="dropdownPosition"
               :font-color="
-                dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
+                dropdownFontColor ||
+                colorMode == 'dark' ||
+                colorMode == 'transparent'
+                  ? 'white'
+                  : 'black'
               "
               :font-size="fontSize"
               :hovered-bg-color="
-                colorMode == 'dark' ? '#000000' : dropdownBgColor
+                colorMode == 'dark'
+                  ? '#000000'
+                  : colorMode == 'transparent'
+                  ? 'grey6'
+                  : dropdownBgColor
               "
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValue"
@@ -186,12 +217,15 @@
   const CARET_WIDTH = '30px'
   const BORDER_WIDTH = '1px'
 
-  const Caret = styled.div`
+  const CaretAttrs = { colorMode: String }
+  const Caret = styled('div', CaretAttrs)`
     display: flex;
     align-items: center;
     justify-content: center;
-    width: ${CARET_WIDTH};
-    min-width: ${CARET_WIDTH};
+    width: ${(props) =>
+      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
+    min-width: ${(props) =>
+      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
     height: 100%;
     align-items: center;
     cursor: pointer;
@@ -199,11 +233,13 @@
   `
 
   const selectorProps = {
+    disabled: Boolean,
     selectWidth: String,
     paddingLeft: String,
     showBorder: Boolean,
   }
   const Selector = styled('div', selectorProps)`
+    color: ${(props) => (props.disabled ? props.theme.colors.grey2 : '')};
     ${(props) =>
       props.selectWidth === '100%'
         ? 'width: 100%;'
@@ -230,6 +266,7 @@
   `
   const OptionalLabel = styled.span`
     font-weight: 300;
+    text-transform: lowercase;
   `
   const inputProps = {
     selectWidth: String,
@@ -274,6 +311,8 @@
     noRelative: Boolean,
     tablePaddingLeft: String,
     showDisabledBackground: Boolean,
+    colorMode: String,
+    isSearchBarVisible: Boolean,
   }
   const SelectButton = styled('div', selectButtonAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -281,7 +320,11 @@
     border-radius: 4px;
     max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
     ${(props) =>
-      props.isSearchBarVisible
+      props.colorMode === 'transparent'
+        ? props.isSearchBarVisible
+          ? 'padding: 10px 15px 10px 5px;'
+          : 'padding: 10px 15px;'
+        : props.isSearchBarVisible
         ? ''
         : `padding-left: ${
             props.hasNoPadding
@@ -309,14 +352,22 @@
         hasError ? theme.colors.red : theme.colors.grey4
       }
   `}
-    background-color:${(props) =>
-      props.disabled && props.showDisabledBackground
-        ? props.theme.colors.grey5
+    opacity: ${(props) =>
+      props.colorMode === 'transparent' && props.disabled ? '0.4' : '1'};
+    background-color: ${(props) =>
+      props.colorMode === 'transparent'
+        ? 'transparent'
+        : props.disabled && props.showDisabledBackground
+        ? props.theme.colors.disabled
         : props.theme.colors[props.bgColor]
         ? props.theme.colors[props.bgColor]
         : props.bgColor};
     color: ${(props) =>
-      props.theme.colors[props.fontColor]
+      props.colorMode === 'transparent'
+        ? props.theme.colors.white
+        : props.disabled && props.showDisabledBackground
+        ? props.theme.colors.black
+        : props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
     ${(props) => (props.disabled ? 'pointer-events: none' : '')};
@@ -535,6 +586,7 @@
       },
       disabled: {
         required: false,
+        type: Boolean,
         default: false,
       },
       isAutoSearch: {
@@ -613,7 +665,7 @@
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1
             ? this.$refs.dropdown.$el.childElementCount
-            : !!this.$refs.dropdown.$el.children[0]
+            : this.$refs.dropdown.$el.children[0]
             ? this.$refs.dropdown.$el.children[0].childElementCount
             : 0
         }

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

@@ -1,6 +1,12 @@
 <template>
   <OptionContainer
-    :background-color="colorMode == 'dark' ? '#000000' : backgroundColor"
+    :background-color="
+      colorMode == 'dark'
+        ? '#000000'
+        : colorMode == 'transparent'
+        ? 'black'
+        : backgroundColor
+    "
     :cursor-type="cursorType"
     :data-value="value"
     :disabled-bg-color="disabledBgColor"
@@ -8,6 +14,8 @@
     :hovered-bg-color="
       colorMode == 'dark'
         ? '#000000'
+        : colorMode == 'transparent'
+        ? 'grey6'
         : hoveredBgColor
         ? hoveredBgColor
         : 'grey5'
@@ -130,7 +138,8 @@
         default: '12px 10px',
       },
       textColor: {
-        type: true,
+        type: String,
+        required: false,
         default: 'inherit',
       },
     },

package/src/components/markerItem/index.vue

@@ -12,7 +12,7 @@
         :name="iconName"
         size="10px"
       />
-      <span>{{ label }}</span>
+      <span :title="label">{{ label }}</span>
     </MarkerContainer>
   </PageContainer>
 </template>
@@ -60,6 +60,13 @@
     border-radius: 4px;
     white-space: nowrap;
     cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   `
 
   export default {

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

@@ -5,7 +5,7 @@
     :is-open="isOpen"
     :position="position"
   >
-    <ModalContainer @click="onClickModalContainer">
+    <ModalContainer :overflow="overflowRule" @click="onClickModalContainer">
       <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
       <ContentContainer :visible="!isLoading">
         <slot></slot>
@@ -67,7 +67,8 @@
   }
 `
 
-  const ModalContainer = styled.div`
+  const modalContainerAttrs = { overflow: String }
+  const ModalContainer = styled('div', modalContainerAttrs)`
     align-self: center;
     justify-self: center;
     position: relative;
@@ -75,7 +76,7 @@
     border-radius: 4px;
     background: white;
     margin: 0 auto;
-    overflow: auto;
+    overflow: ${(props) => props.overflow};
     max-width: 95%;
     max-height: 95%;
     min-width: 100px;
@@ -152,6 +153,11 @@
         type: Boolean,
         default: true,
       },
+      overflowRule: {
+        required: false,
+        type: String,
+        default: 'auto',
+      },
     },
     watch: {
       isOpen: {

package/src/components/spinner/index.vue

@@ -3,6 +3,7 @@
     <Container>
       <SpinnerWrapper data-test-id="spinner_full_wrapper">
         <SpinnerSvg
+          :class="{ white: isWhite }"
           data-test-id="spinner_full_icon"
           :style="{ width: size, height: size }"
         />
@@ -16,6 +17,7 @@
   >
     <SpinnerWrapper data-test-id="spinner_wrapper">
       <SpinnerSvg
+        :class="{ white: isWhite }"
         data-test-id="spinner_icon"
         :style="{ width: size, height: size }"
       />
@@ -54,6 +56,10 @@
   const SpinnerWrapper = styled.div`
     width: ${(props) => (props.size ? props.size : '60px')};
     height: auto;
+
+    .white {
+      filter: brightness(0) invert(1);
+    }
   `
 
   export default {
@@ -80,6 +86,11 @@
         default: '60px',
         type: String,
       },
+      isWhite: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
     },
   }
 </script>

package/src/components/spinnerGif/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <SpinnerContainer v-if="fullWidth" data-test-id="spinner_full_container">
+    <Container>
+      <SpinnerWrapper data-test-id="spinner_full_wrapper">
+        <img
+          :class="{ white: isWhite }"
+          data-test-id="spinner_full_icon"
+          src="../../assets/gifs/spinner.gif"
+          :style="{ width: size, height: size }"
+        />
+      </SpinnerWrapper>
+    </Container>
+  </SpinnerContainer>
+  <Container
+    v-else
+    data-test-id="spinner_container"
+    :limited-to-modal="limitedToModal"
+  >
+    <SpinnerWrapper data-test-id="spinner_wrapper">
+      <img
+        :class="{ white: isWhite }"
+        data-test-id="spinner_full_icon"
+        src="../../assets/gifs/spinner.gif"
+        :style="{ width: size, height: size }"
+      />
+    </SpinnerWrapper>
+  </Container>
+</template>
+
+<script>
+  // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
+  // <spinner size="30px" />
+  import styled from 'vue3-styled-components'
+  import SpinnerSvg from '../../assets/icons/black_spinner.svg'
+
+  const SpinnerContainer = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.8);
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    z-index: 100;
+  `
+  const containerAttrs = { limitedToModal: Boolean }
+  const Container = styled('div', containerAttrs)`
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
+    height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
+    width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
+  `
+
+  const SpinnerWrapper = styled.div`
+    width: ${(props) => (props.size ? props.size : '60px')};
+    height: auto;
+
+    .white {
+      filter: brightness(0) invert(1);
+    }
+  `
+
+  export default {
+    name: 'SpinnerComponent',
+    components: {
+      Container,
+      SpinnerWrapper,
+      SpinnerContainer,
+      SpinnerSvg,
+    },
+    props: {
+      fullWidth: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      limitedToModal: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      size: {
+        required: false,
+        default: '60px',
+        type: String,
+      },
+      isWhite: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+    },
+  }
+</script>