@eturnity/eturnity_reusable_components 7.51.3 → 7.51.4

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"
@@ -93,30 +107,30 @@
           >
             <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 || disabled
-                  ? 'grey2'
-                  : colorMode == 'dark'
+                caretColor || colorMode == 'dark' || colorMode == 'transparent'
                   ? 'white'
                   : 'transparentBlack1'
               "
               name="arrow_up"
-              size="12px"
+              :size="colorMode === 'transparent' ? '8px' : '12px'"
             />
             <Icon
               v-else
               :color="
-                caretColor || disabled
-                  ? 'grey2'
-                  : colorMode == 'dark'
+                caretColor || colorMode == 'dark' || colorMode == 'transparent'
                   ? 'white'
                   : 'transparentBlack1'
               "
               name="arrow_down"
-              size="12px"
+              :size="colorMode === 'transparent' ? '8px' : '12px'"
             />
           </Caret>
         </SelectButton>
@@ -126,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"
@@ -191,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;
@@ -237,6 +266,7 @@
   `
   const OptionalLabel = styled.span`
     font-weight: 300;
+    text-transform: lowercase;
   `
   const inputProps = {
     selectWidth: String,
@@ -281,6 +311,8 @@
     noRelative: Boolean,
     tablePaddingLeft: String,
     showDisabledBackground: Boolean,
+    colorMode: String,
+    isSearchBarVisible: Boolean,
   }
   const SelectButton = styled('div', selectButtonAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -288,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
@@ -316,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' : '')};
@@ -621,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/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>