@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.22 → 7.48.1-EPDM-12680.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.48.1-EPDM-12680.22",
+  "version": "7.48.1-EPDM-12680.24",
   "files": [
     "dist",
     "src"

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

@@ -51,6 +51,7 @@
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
+        :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
         :text-align="textAlign"
@@ -195,6 +196,7 @@
     borderColor: String,
     showLinearUnitName: Boolean,
     colorMode: String,
+    showArrowControls: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -220,8 +222,16 @@
     max-height: ${(props) => props.inputHeight};
     padding: ${({ colorMode }) =>
       colorMode === 'transparent' ? '10px 15px' : '0 10px'};
-    padding-right: ${({ slotSize, isError, showLinearUnitName, colorMode }) =>
-      colorMode === 'transparent'
+    padding-right: ${({
+      slotSize,
+      isError,
+      showLinearUnitName,
+      colorMode,
+      showArrowControls,
+    }) =>
+      showArrowControls
+        ? '40px'
+        : colorMode === 'transparent'
         ? '0'
         : slotSize
         ? isError && !showLinearUnitName
@@ -229,7 +239,7 @@
           : 'calc(' + slotSize + ' + 10px)'
         : isError && !showLinearUnitName
         ? '24px'
-        : '40px'};
+        : '5px'};
     border-radius: ${(props) =>
       props.isInteractive && props.alignItems != 'vertical'
         ? '0 4px 4px 0'

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>

package/src/components/stringDesign/DropdownMenu/index.vue

@@ -150,16 +150,12 @@
         <SortingContainer v-if="dataList.length > 1">
           <SortingIconWrapper
             :data-test-id="'move_up_' + index"
-            :is-disabled="index === 0 || item.isLoading"
-            @click="
-              !item.isLoading && index > 0 && handleMoveClick('up', index)
-            "
+            :is-disabled="index === 0"
+            @click="index > 0 && handleMoveClick('up', index)"
           >
             <RCIcon
-              :color="index === 0 || item.isLoading ? 'grey6' : 'grey3'"
-              :cursor="
-                index === 0 || item.isLoading ? 'not-allowed' : 'pointer'
-              "
+              :color="index === 0 ? 'grey6' : 'grey3'"
+              :cursor="index === 0 ? 'not-allowed' : 'pointer'"
               name="move_up"
               size="14px"
             />
@@ -168,23 +164,15 @@
             :data-test-id="'move_down_' + index"
             :is-disabled="index === dataList.length - 1"
             @click="
-              !item.isLoading &&
-                index < dataList.length - 1 &&
-                handleMoveClick('down', index)
+              index < dataList.length - 1 && handleMoveClick('down', index)
             "
           >
             <RCIcon
-              :color="
-                index === dataList.length - 1 || item.isLoading
-                  ? 'grey6'
-                  : 'grey3'
-              "
+              :color="index === dataList.length - 1 ? 'grey6' : 'grey3'"
               :cursor="
-                index === dataList.length - 1 || item.isLoading
-                  ? 'not-allowed'
-                  : 'pointer'
+                index === dataList.length - 1 ? 'not-allowed' : 'pointer'
               "
-              :is-disabled="index === dataList.length - 1 || item.isLoading"
+              :is-disabled="index === dataList.length - 1"
               name="move_down"
               size="14px"
             />