@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.23 → 7.48.1-EPDM-12680.25

package/package.json

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

package/src/assets/svgIcons/expand_all.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99998 1.20459L11.3818 4.49095L10.6182 5.50914L6.99998 2.7955L3.3818 5.50914L2.61816 4.49095L6.99998 1.20459Z" fill="#263238"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99998 12.7954L11.3818 9.50905L10.6182 8.49086L6.99998 11.2045L3.3818 8.49086L2.61816 9.50905L6.99998 12.7954Z" fill="#263238"/>
+</svg>

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

@@ -5,7 +5,7 @@
       <ButtonIcon
         v-if="hasStringsOrStorage"
         custom-color="black"
-        :icon-name="hasExpandedSection ? 'collapse_all' : 'expand'"
+        :icon-name="hasExpandedSection ? 'collapse_all' : 'expand_all'"
         :text="$gettext(hasExpandedSection ? 'collapse_all' : 'expand_all')"
         @click="toggleAllSections"
       />
@@ -16,7 +16,7 @@
           <TitleContainer>
             <IconWrapper
               v-if="item.type != 'optimizer'"
-              size="36px"
+              size="32px"
               @click="toggleSection(item.inverterId)"
             >
               <RCIcon
@@ -28,7 +28,7 @@
               <IconPlaceholder v-else />
             </IconWrapper>
             <TextContainer
-              :style="{ marginLeft: item.type == 'optimizer' ? '36px' : '0' }"
+              :style="{ marginLeft: item.type == 'optimizer' ? '32px' : '0' }"
             >
               <TitleText :title="item.model">
                 {{
@@ -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"
             />
@@ -392,12 +380,14 @@
   const TitleContainer = styled.div`
     display: flex;
     align-items: center;
+    gap: 4px;
   `
 
   const IconsContainer = styled.div`
     display: flex;
     align-items: center;
-    margin-left: 36px;
+    margin-left: 32px;
+    margin-top: 4px;
   `
 
   const TextContainer = styled.div`
@@ -421,7 +411,7 @@
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-    margin: 4px 0 2px 36px;
+    margin: 4px 0 2px 32px;
     align-items: end;
   `
 
@@ -453,7 +443,7 @@
   `
 
   const IconAttrs = {
-    size: { type: String, default: '36px' },
+    size: { type: String, default: '32px' },
     marginLeft: String,
   }
   const IconWrapper = styled('div', IconAttrs)`
@@ -637,7 +627,7 @@
   `
 
   const IconPlaceholder = styled.div`
-    width: 36px;
+    width: 32px;
   `
 
   const EmptyStringBox = styled.div`
@@ -653,7 +643,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
+    width: 32px;
   `
 
   export default {